add resizable column feature to workload table

Author: vikram-raj

frontend/public/components/daemon-set.tsx

@@ -114,7 +114,7 @@ const EnvironmentTab: FC<EnvironmentTabProps> = (props) => (
 );
 
 export const DaemonSetsList: FC<DaemonSetsListProps> = ({ data, loaded, ...props }) => {
-  const columns = useWorkloadColumns<DaemonSetKind>();
+  const { columns, resetAllColumnWidths } = useWorkloadColumns<DaemonSetKind>(DaemonSetModel);
 
   return (
     <Suspense fallback={<LoadingBox />}>
@@ -126,6 +126,8 @@ export const DaemonSetsList: FC<DaemonSetsListProps> = ({ data, loaded, ...props
         columns={columns}
         getDataViewRows={getDataViewRows}
         hideColumnManagement={true}
+        isResizable
+        resetAllColumnWidths={resetAllColumnWidths}
       />
     </Suspense>
   );

frontend/public/components/deployment-config.tsx

@@ -306,7 +306,9 @@ export const DeploymentConfigsList: FC<DeploymentConfigsListProps> = ({
   loaded,
   ...props
 }) => {
-  const columns = useWorkloadColumns<DeploymentConfigKind>();
+  const { columns, resetAllColumnWidths } = useWorkloadColumns<DeploymentConfigKind>(
+    DeploymentConfigModel,
+  );
 
   return (
     <Suspense fallback={<LoadingBox />}>
@@ -318,6 +320,8 @@ export const DeploymentConfigsList: FC<DeploymentConfigsListProps> = ({
         columns={columns}
         getDataViewRows={getDataViewRows}
         hideColumnManagement={true}
+        isResizable
+        resetAllColumnWidths={resetAllColumnWidths}
       />
     </Suspense>
   );

frontend/public/components/deployment.tsx

@@ -226,7 +226,7 @@ const getDataViewRows: GetDataViewRows<DeploymentKind> = (data, columns) => {
 };
 
 export const DeploymentsList: FC<DeploymentsListProps> = ({ data, loaded, ...props }) => {
-  const columns = useWorkloadColumns<DeploymentKind>();
+  const { columns, resetAllColumnWidths } = useWorkloadColumns<DeploymentKind>(DeploymentModel);
 
   return (
     <Suspense fallback={<LoadingBox />}>
@@ -237,6 +237,8 @@ export const DeploymentsList: FC<DeploymentsListProps> = ({ data, loaded, ...pro
         loaded={loaded}
         columns={columns}
         getDataViewRows={getDataViewRows}
+        isResizable
+        resetAllColumnWidths={resetAllColumnWidths}
       />
     </Suspense>
   );

frontend/public/components/stateful-set.tsx

@@ -74,7 +74,7 @@ const EnvironmentTab: FC<EnvironmentTabProps> = (props) => (
 );
 
 const StatefulSetsList: FC<StatefulSetsListProps> = ({ data, loaded, ...props }) => {
-  const columns = useWorkloadColumns();
+  const { columns, resetAllColumnWidths } = useWorkloadColumns<K8sResourceKind>(StatefulSetModel);
 
   return (
     <Suspense fallback={<LoadingBox />}>
@@ -88,6 +88,8 @@ const StatefulSetsList: FC<StatefulSetsListProps> = ({ data, loaded, ...props })
           getWorkloadDataViewRows(dvData, dvColumns, StatefulSetModel)
         }
         hideColumnManagement={true}
+        isResizable
+        resetAllColumnWidths={resetAllColumnWidths}
       />
     </Suspense>
   );

frontend/public/components/workload-table.tsx

@@ -1,14 +1,15 @@
 import type { FC } from 'react';
 import {
   actionsCellProps,
-  cellIsStickyProps,
   getNameCellProps,
+  nameCellProps,
 } from '@console/app/src/components/data-view/ConsoleDataView';
 import {
   ConsoleDataViewColumn,
   ConsoleDataViewRow,
 } from '@console/app/src/components/data-view/types';
-import { K8sModel } from '@console/dynamic-plugin-sdk/src/api/common-types';
+import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps';
+import type { K8sModel } from '@console/dynamic-plugin-sdk/src/api/common-types';
 import { RowProps, TableColumn } from '@console/dynamic-plugin-sdk/src/extensions/console-types';
 import { getGroupVersionKindForModel } from '@console/dynamic-plugin-sdk/src/utils/k8s/k8s-ref';
 import LazyActionMenu, {
@@ -159,23 +160,29 @@ export const getWorkloadDataViewRows = <T extends K8sResourceKind>(
   });
 };
 
-export const useWorkloadColumns = <T extends K8sResourceKind>(): TableColumn<T>[] => {
+export const useWorkloadColumns = <T extends K8sResourceKind>(
+  model: K8sModel,
+): { columns: TableColumn<T>[]; resetAllColumnWidths: () => void } => {
   const { t } = useTranslation();
+  const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(model);
+
   const columns = useMemo(() => {
     return [
       {
         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',
         },
@@ -184,6 +191,7 @@ export const useWorkloadColumns = <T extends K8sResourceKind>(): TableColumn<T>[
         title: t('public~Status'),
         id: tableColumnInfo[2].id,
         sort: 'status.replicas',
+        resizableProps: getResizableProps(tableColumnInfo[2].id),
         props: {
           modifier: 'nowrap',
         },
@@ -192,30 +200,31 @@ export const useWorkloadColumns = <T extends K8sResourceKind>(): TableColumn<T>[
         title: t('public~Labels'),
         id: tableColumnInfo[3].id,
         sort: 'metadata.labels',
+        resizableProps: getResizableProps(tableColumnInfo[3].id),
         props: {
           modifier: 'nowrap',
-          width: 20,
         },
       },
       {
         title: t('public~Pod selector'),
         id: tableColumnInfo[4].id,
         sort: 'spec.selector',
+        resizableProps: getResizableProps(tableColumnInfo[4].id),
         props: {
           modifier: 'nowrap',
-          width: 20,
         },
       },
       {
         title: '',
         id: tableColumnInfo[5].id,
         props: {
-          ...cellIsStickyProps,
+          ...actionsCellProps,
         },
       },
     ];
-  }, [t]);
-  return columns;
+  }, [t, getResizableProps]);
+
+  return { columns, resetAllColumnWidths };
 };
 
 type ReplicasCountProps = {