CONSOLE-4982: add resizable column feature Helm-plugin tables

frontend/packages/helm-plugin/src/components/list-page/HelmChartRepositoryList.tsx

@@ -5,12 +5,13 @@ import { ConsoleDataView } from '@console/app/src/components/data-view/ConsoleDa
 import type { TableProps } from '@console/internal/components/factory';
 import { LoadingBox } from '@console/internal/components/utils';
 import type { K8sResourceKind } from '@console/internal/module/k8s';
+import { HelmChartRepositoryModel } from '../../models';
 import { getDataViewRows } from './HelmChartRepositoryRow';
 import { useRepositoriesColumns } from './RepositoriesHeader';
 
 const HelmChartRepositoryList: FC<TableProps> = (props) => {
   const { t } = useTranslation();
-  const columns = useRepositoriesColumns();
+  const { columns, resetAllColumnWidths } = useRepositoriesColumns(HelmChartRepositoryModel);
 
   return (
     <Suspense fallback={<LoadingBox />}>
@@ -23,6 +24,8 @@ const HelmChartRepositoryList: FC<TableProps> = (props) => {
         getDataViewRows={getDataViewRows}
         hideColumnManagement
         data-test="helm-chart-repositories-list"
+        isResizable
+        resetAllColumnWidths={resetAllColumnWidths}
       />
     </Suspense>
   );

frontend/packages/helm-plugin/src/components/list-page/HelmReleaseList.tsx

@@ -13,9 +13,11 @@ import { useParams, Link } from 'react-router';
 import {
   ConsoleDataView,
   initialFiltersDefault,
-  cellIsStickyProps,
+  actionsCellProps,
+  nameCellProps,
 } from '@console/app/src/components/data-view/ConsoleDataView';
 import type { ResourceFilters } from '@console/app/src/components/data-view/types';
+import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps';
 import { LoadingBox } from '@console/internal/components/utils';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
 import { SecretModel } from '@console/internal/models';
@@ -24,6 +26,7 @@ import { isCatalogTypeEnabled } from '@console/shared';
 import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
 import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { HELM_CHART_CATALOG_TYPE_ID } from '../../const';
+import { HelmReleaseModel } from '../../models';
 import type { HelmRelease } from '../../types/helm-types';
 import {
   fetchHelmReleases,
@@ -36,23 +39,30 @@ import { getDataViewRows, tableColumnInfo } from './HelmReleaseListRow';
 
 type HelmReleaseFilters = ResourceFilters & { status: string[] };
 
-export const useHelmReleasesColumns = (): TableColumn<HelmRelease>[] => {
+export const useHelmReleasesColumns = (): {
+  columns: TableColumn<HelmRelease>[];
+  resetAllColumnWidths: () => void;
+} => {
   const { t } = useTranslation();
-  return useMemo(
+  const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(HelmReleaseModel);
+
+  const columns = useMemo(
     () => [
       {
         title: t('helm-plugin~Name'),
         id: tableColumnInfo[0].id,
         sort: 'name',
+        resizableProps: getResizableProps(tableColumnInfo[0].id),
         props: {
-          ...cellIsStickyProps,
+          ...nameCellProps,
           modifier: 'nowrap',
         },
       },
       {
         title: t('helm-plugin~Namespace'),
         id: tableColumnInfo[1].id,
         sort: 'namespace',
+        resizableProps: getResizableProps(tableColumnInfo[1].id),
         props: {
           modifier: 'nowrap',
         },
@@ -61,6 +71,7 @@ export const useHelmReleasesColumns = (): TableColumn<HelmRelease>[] => {
         title: t('helm-plugin~Revision'),
         id: tableColumnInfo[2].id,
         sort: 'version',
+        resizableProps: getResizableProps(tableColumnInfo[2].id),
         props: {
           modifier: 'nowrap',
         },
@@ -69,6 +80,7 @@ export const useHelmReleasesColumns = (): TableColumn<HelmRelease>[] => {
         title: t('helm-plugin~Updated'),
         id: tableColumnInfo[3].id,
         sort: 'info.last_deployed',
+        resizableProps: getResizableProps(tableColumnInfo[3].id),
         props: {
           modifier: 'nowrap',
         },
@@ -77,6 +89,7 @@ export const useHelmReleasesColumns = (): TableColumn<HelmRelease>[] => {
         title: t('helm-plugin~Status'),
         id: tableColumnInfo[4].id,
         sort: 'info.status',
+        resizableProps: getResizableProps(tableColumnInfo[4].id),
         props: {
           modifier: 'nowrap',
         },
@@ -85,6 +98,7 @@ export const useHelmReleasesColumns = (): TableColumn<HelmRelease>[] => {
         title: t('helm-plugin~Chart name'),
         id: tableColumnInfo[5].id,
         sort: 'chart.metadata.name',
+        resizableProps: getResizableProps(tableColumnInfo[5].id),
         props: {
           modifier: 'nowrap',
         },
@@ -93,6 +107,7 @@ export const useHelmReleasesColumns = (): TableColumn<HelmRelease>[] => {
         title: t('helm-plugin~Chart version'),
         id: tableColumnInfo[6].id,
         sort: 'chart.metadata.version',
+        resizableProps: getResizableProps(tableColumnInfo[6].id),
         props: {
           modifier: 'nowrap',
         },
@@ -101,6 +116,7 @@ export const useHelmReleasesColumns = (): TableColumn<HelmRelease>[] => {
         title: t('helm-plugin~App version'),
         id: tableColumnInfo[7].id,
         sort: 'chart.metadata.appVersion',
+        resizableProps: getResizableProps(tableColumnInfo[7].id),
         props: {
           modifier: 'nowrap',
         },
@@ -109,12 +125,14 @@ export const useHelmReleasesColumns = (): TableColumn<HelmRelease>[] => {
         title: '',
         id: tableColumnInfo[8].id,
         props: {
-          ...cellIsStickyProps,
+          ...actionsCellProps,
         },
       },
     ],
-    [t],
+    [t, getResizableProps],
   );
+
+  return { columns, resetAllColumnWidths };
 };
 
 const getObjectMetadata = (release: HelmRelease) => ({
@@ -185,7 +203,7 @@ const HelmReleaseList: FC = () => {
     };
   }, [namespace, newCount, secretsLoadError, secretsLoaded, t]);
 
-  const columns = useHelmReleasesColumns();
+  const { columns, resetAllColumnWidths } = useHelmReleasesColumns();
 
   const helmReleaseStatusFilterOptions = useMemo<DataViewFilterOption[]>(() => {
     return SelectedReleaseStatuses.map((status) => ({
@@ -272,6 +290,8 @@ const HelmReleaseList: FC = () => {
               getDataViewRows={getDataViewRows}
               hideLabelFilter
               hideColumnManagement
+              isResizable
+              resetAllColumnWidths={resetAllColumnWidths}
             />
           )}
         </Suspense>

frontend/packages/helm-plugin/src/components/list-page/ProjectHelmChartRepositoryList.tsx

@@ -5,12 +5,13 @@ import { ConsoleDataView } from '@console/app/src/components/data-view/ConsoleDa
 import type { TableProps } from '@console/internal/components/factory';
 import { LoadingBox } from '@console/internal/components/utils';
 import type { K8sResourceKind } from '@console/internal/module/k8s';
+import { ProjectHelmChartRepositoryModel } from '../../models';
 import { getDataViewRows } from './ProjectHelmChartRepositoryRow';
 import { useRepositoriesColumns } from './RepositoriesHeader';
 
 const ProjectHelmChartRepositoryList: FC<TableProps> = (props) => {
   const { t } = useTranslation();
-  const columns = useRepositoriesColumns();
+  const { columns, resetAllColumnWidths } = useRepositoriesColumns(ProjectHelmChartRepositoryModel);
 
   return (
     <Suspense fallback={<LoadingBox />}>
@@ -23,6 +24,8 @@ const ProjectHelmChartRepositoryList: FC<TableProps> = (props) => {
         getDataViewRows={getDataViewRows}
         hideColumnManagement
         data-test="project-helm-chart-repositories-list"
+        isResizable
+        resetAllColumnWidths={resetAllColumnWidths}
       />
     </Suspense>
   );

frontend/packages/helm-plugin/src/components/list-page/RepositoriesHeader.tsx

@@ -1,6 +1,8 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { cellIsStickyProps } from '@console/app/src/components/data-view/ConsoleDataView';
+import { nameCellProps } from '@console/app/src/components/data-view/ConsoleDataView';
+import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps';
+import type { K8sModel } from '@console/dynamic-plugin-sdk';
 import type { K8sResourceKind, TableColumn } from '@console/internal/module/k8s';
 
 export const tableColumnInfo = [
@@ -13,23 +15,32 @@ export const tableColumnInfo = [
   { id: 'kebab' },
 ];
 
-export const useRepositoriesColumns = (): TableColumn<K8sResourceKind>[] => {
+export const useRepositoriesColumns = (
+  model: K8sModel,
+): {
+  columns: TableColumn<K8sResourceKind>[];
+  resetAllColumnWidths: () => void;
+} => {
   const { t } = useTranslation();
-  return useMemo(
+  const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(model);
+
+  const columns = useMemo(
     () => [
       {
         title: t('helm-plugin~Name'),
         id: tableColumnInfo[0].id,
         sort: 'metadata.name',
+        resizableProps: getResizableProps(tableColumnInfo[0].id),
         props: {
-          ...cellIsStickyProps,
+          ...nameCellProps,
           modifier: 'nowrap',
         },
       },
       {
         title: t('helm-plugin~Display Name'),
         id: tableColumnInfo[1].id,
         sort: 'spec.name',
+        resizableProps: getResizableProps(tableColumnInfo[1].id),
         props: {
           modifier: 'nowrap',
         },
@@ -38,6 +49,7 @@ export const useRepositoriesColumns = (): TableColumn<K8sResourceKind>[] => {
         title: t('helm-plugin~Namespace'),
         id: tableColumnInfo[2].id,
         sort: 'metadata.namespace',
+        resizableProps: getResizableProps(tableColumnInfo[2].id),
         props: {
           modifier: 'nowrap',
         },
@@ -46,6 +58,7 @@ export const useRepositoriesColumns = (): TableColumn<K8sResourceKind>[] => {
         title: t('helm-plugin~Disabled'),
         id: tableColumnInfo[3].id,
         sort: 'spec.disabled',
+        resizableProps: getResizableProps(tableColumnInfo[3].id),
         props: {
           modifier: 'nowrap',
         },
@@ -54,6 +67,7 @@ export const useRepositoriesColumns = (): TableColumn<K8sResourceKind>[] => {
         title: t('helm-plugin~Repo URL'),
         id: tableColumnInfo[4].id,
         sort: 'spec.connectionConfig.url',
+        resizableProps: getResizableProps(tableColumnInfo[4].id),
         props: {
           modifier: 'nowrap',
         },
@@ -62,6 +76,7 @@ export const useRepositoriesColumns = (): TableColumn<K8sResourceKind>[] => {
         title: t('helm-plugin~Created'),
         id: tableColumnInfo[5].id,
         sort: 'metadata.creationTimestamp',
+        resizableProps: getResizableProps(tableColumnInfo[5].id),
         props: {
           modifier: 'nowrap',
         },
@@ -74,8 +89,10 @@ export const useRepositoriesColumns = (): TableColumn<K8sResourceKind>[] => {
         },
       },
     ],
-    [t],
+    [t, getResizableProps],
   );
+
+  return { columns, resetAllColumnWidths };
 };
 
 export default useRepositoriesColumns;

frontend/packages/helm-plugin/src/components/list-page/RepositoriesList.tsx

@@ -5,12 +5,15 @@ import { ConsoleDataView } from '@console/app/src/components/data-view/ConsoleDa
 import type { TableProps } from '@console/internal/components/factory';
 import { LoadingBox } from '@console/internal/components/utils';
 import type { K8sResourceKind } from '@console/internal/module/k8s';
+import { HelmRepositoriesCombinedListModel } from '../../models';
 import { useRepositoriesColumns } from './RepositoriesHeader';
 import { getDataViewRows } from './RepositoriesRow';
 
 const RepositoriesList: FC<TableProps> = (props) => {
   const { t } = useTranslation();
-  const columns = useRepositoriesColumns();
+  const { columns, resetAllColumnWidths } = useRepositoriesColumns(
+    HelmRepositoriesCombinedListModel,
+  );
 
   return (
     <Suspense fallback={<LoadingBox />}>
@@ -23,6 +26,8 @@ const RepositoriesList: FC<TableProps> = (props) => {
         getDataViewRows={getDataViewRows}
         hideColumnManagement
         data-test="repositories-list"
+        isResizable
+        resetAllColumnWidths={resetAllColumnWidths}
       />
     </Suspense>
   );

frontend/packages/helm-plugin/src/models/helm.ts

@@ -25,3 +25,31 @@ export const ProjectHelmChartRepositoryModel: K8sModel = {
   namespaced: true,
   crd: true,
 };
+
+/** Console-only model for UI (e.g. column width preferences); not a cluster API resource. */
+export const HelmReleaseModel: K8sModel = {
+  apiGroup: 'console.ui',
+  apiVersion: 'v1',
+  kind: 'HelmRelease',
+  id: 'helmrelease',
+  plural: 'helmreleases',
+  label: 'Helm Release',
+  labelPlural: 'Helm Releases',
+  abbr: 'HR',
+  namespaced: true,
+  crd: true,
+};
+
+/** Console-only model for the combined cluster + project Helm repositories list. */
+export const HelmRepositoriesCombinedListModel: K8sModel = {
+  apiGroup: 'console.ui',
+  apiVersion: 'v1',
+  kind: 'HelmRepositoriesCombinedList',
+  id: 'helmrepositoriescombinedlist',
+  plural: 'helmrepositoriescombinedlists',
+  label: 'Helm Chart Repositories',
+  labelPlural: 'Helm Chart Repositories',
+  abbr: 'HCRL',
+  namespaced: false,
+  crd: true,
+};