CONSOLE-4982: add resizable column feature to Administration tables

frontend/public/components/custom-resource-definition.tsx

@@ -57,11 +57,12 @@ import {
 } from '@patternfly/react-core';
 import {
   actionsCellProps,
-  cellIsStickyProps,
   getNameCellProps,
   ConsoleDataView,
+  nameCellProps,
 } from '@console/app/src/components/data-view/ConsoleDataView';
 import { GetDataViewRows } from '@console/app/src/components/data-view/types';
+import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps';
 import LazyActionMenu from '@console/shared/src/components/actions/LazyActionMenu';
 import { ActionMenuVariant } from '@console/shared/src/components/actions/types';
 
@@ -215,23 +216,32 @@ const tableColumnInfo = [
   { id: '' },
 ];
 
-const useCustomResourceDefinitionsColumns = (): TableColumn<CustomResourceDefinitionKind>[] => {
+const useCustomResourceDefinitionsColumns = (): {
+  columns: TableColumn<CustomResourceDefinitionKind>[];
+  resetAllColumnWidths: () => void;
+} => {
   const { t } = useTranslation();
-  const columns: TableColumn<CustomResourceDefinitionKind>[] = useMemo(() => {
-    return [
+  const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(
+    CustomResourceDefinitionModel,
+  );
+
+  const columns: TableColumn<CustomResourceDefinitionKind>[] = useMemo(
+    () => [
       {
         title: t('public~Name'),
         id: tableColumnInfo[0].id,
         sort: 'spec.names.kind',
+        resizableProps: getResizableProps(tableColumnInfo[0].id),
         props: {
-          ...cellIsStickyProps,
+          ...nameCellProps,
           modifier: 'nowrap',
         },
       },
       {
         title: t('public~Group'),
         id: tableColumnInfo[1].id,
         sort: 'spec.group',
+        resizableProps: getResizableProps(tableColumnInfo[1].id),
         props: {
           modifier: 'nowrap',
         },
@@ -243,6 +253,7 @@ const useCustomResourceDefinitionsColumns = (): TableColumn<CustomResourceDefini
           data.sort(
             sortResourceByValue<CustomResourceDefinitionKind>(direction, getLatestVersionForCRD),
           ),
+        resizableProps: getResizableProps(tableColumnInfo[2].id),
         props: {
           modifier: 'nowrap',
         },
@@ -251,13 +262,15 @@ const useCustomResourceDefinitionsColumns = (): TableColumn<CustomResourceDefini
         title: t('public~Namespaced'),
         id: tableColumnInfo[3].id,
         sort: 'spec.scope',
+        resizableProps: getResizableProps(tableColumnInfo[3].id),
         props: {
           modifier: 'nowrap',
         },
       },
       {
         title: t('public~Established'),
         id: tableColumnInfo[4].id,
+        resizableProps: getResizableProps(tableColumnInfo[4].id),
         props: {
           modifier: 'nowrap',
         },
@@ -266,12 +279,14 @@ const useCustomResourceDefinitionsColumns = (): TableColumn<CustomResourceDefini
         title: '',
         id: tableColumnInfo[5].id,
         props: {
-          ...cellIsStickyProps,
+          ...actionsCellProps,
         },
       },
-    ];
-  }, [t]);
-  return columns;
+    ],
+    [t, getResizableProps],
+  );
+
+  return { columns, resetAllColumnWidths };
 };
 
 const IsNamespaced: FC<{ obj: CustomResourceDefinitionKind }> = ({ obj }) => {
@@ -334,7 +349,7 @@ export const CustomResourceDefinitionsList: FC<CustomResourceDefinitionsListProp
   loaded,
   ...props
 }) => {
-  const columns = useCustomResourceDefinitionsColumns();
+  const { columns, resetAllColumnWidths } = useCustomResourceDefinitionsColumns();
 
   return (
     <Suspense fallback={<LoadingBox />}>
@@ -346,6 +361,8 @@ export const CustomResourceDefinitionsList: FC<CustomResourceDefinitionsListProp
         columns={columns}
         getDataViewRows={getDataViewRows}
         hideColumnManagement={true}
+        isResizable
+        resetAllColumnWidths={resetAllColumnWidths}
       />
     </Suspense>
   );

frontend/public/components/limit-range.tsx

@@ -19,10 +19,11 @@ import {
   ConsoleDataView,
   getNameCellProps,
   actionsCellProps,
-  cellIsStickyProps,
+  nameCellProps,
 } from '@console/app/src/components/data-view/ConsoleDataView';
 import { TableColumn } from '@console/internal/module/k8s';
 import { GetDataViewRows } from '@console/app/src/components/data-view/types';
+import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps';
 import { DASH } from '@console/shared/src/constants/ui';
 import LazyActionMenu from '@console/shared/src/components/actions/LazyActionMenu';
 
@@ -63,23 +64,30 @@ const getDataViewRows: GetDataViewRows<K8sResourceKind> = (data, columns) => {
   });
 };
 
-const useLimitRangeColumns = (): TableColumn<K8sResourceKind>[] => {
+const useLimitRangeColumns = (): {
+  columns: TableColumn<K8sResourceKind>[];
+  resetAllColumnWidths: () => void;
+} => {
   const { t } = useTranslation();
-  return useMemo(
+  const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(LimitRangeModel);
+
+  const columns = useMemo(
     () => [
       {
         title: t('public~Name'),
         id: tableColumnInfo[0].id,
         sort: 'metadata.name',
+        resizableProps: getResizableProps(tableColumnInfo[0].id),
         props: {
-          ...cellIsStickyProps,
+          ...nameCellProps,
           modifier: 'nowrap',
         },
       },
       {
         title: t('public~Namespace'),
         id: tableColumnInfo[1].id,
         sort: 'metadata.namespace',
+        resizableProps: getResizableProps(tableColumnInfo[1].id),
         props: {
           modifier: 'nowrap',
         },
@@ -88,6 +96,7 @@ const useLimitRangeColumns = (): TableColumn<K8sResourceKind>[] => {
         title: t('public~Created'),
         id: tableColumnInfo[2].id,
         sort: 'metadata.creationTimestamp',
+        resizableProps: getResizableProps(tableColumnInfo[2].id),
         props: {
           modifier: 'nowrap',
         },
@@ -96,17 +105,19 @@ const useLimitRangeColumns = (): TableColumn<K8sResourceKind>[] => {
         title: '',
         id: tableColumnInfo[3].id,
         props: {
-          ...cellIsStickyProps,
+          ...actionsCellProps,
         },
       },
     ],
-    [t],
+    [t, getResizableProps],
   );
+
+  return { columns, resetAllColumnWidths };
 };
 
 export const LimitRangeList: FC<{ data: K8sResourceKind[]; loaded: boolean }> = (props) => {
   const { data, loaded } = props;
-  const columns = useLimitRangeColumns();
+  const { columns, resetAllColumnWidths } = useLimitRangeColumns();
 
   return (
     <Suspense fallback={<LoadingBox />}>
@@ -117,6 +128,8 @@ export const LimitRangeList: FC<{ data: K8sResourceKind[]; loaded: boolean }> =
         columns={columns}
         getDataViewRows={getDataViewRows}
         hideColumnManagement={true}
+        isResizable
+        resetAllColumnWidths={resetAllColumnWidths}
       />
     </Suspense>
   );