From 877f9ea02b3ba6265013c236f092af70ed4ff305 Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Mon, 23 Mar 2026 11:27:51 +0530 Subject: [PATCH] add resizable column feature Helm-plugin tables --- .../list-page/HelmChartRepositoryList.tsx | 5 ++- .../components/list-page/HelmReleaseList.tsx | 34 +++++++++++++++---- .../ProjectHelmChartRepositoryList.tsx | 5 ++- .../list-page/RepositoriesHeader.tsx | 27 ++++++++++++--- .../components/list-page/RepositoriesList.tsx | 7 +++- .../packages/helm-plugin/src/models/helm.ts | 28 +++++++++++++++ 6 files changed, 91 insertions(+), 15 deletions(-) diff --git a/frontend/packages/helm-plugin/src/components/list-page/HelmChartRepositoryList.tsx b/frontend/packages/helm-plugin/src/components/list-page/HelmChartRepositoryList.tsx index 12f65202ba7..ef5560aedea 100644 --- a/frontend/packages/helm-plugin/src/components/list-page/HelmChartRepositoryList.tsx +++ b/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 = (props) => { const { t } = useTranslation(); - const columns = useRepositoriesColumns(); + const { columns, resetAllColumnWidths } = useRepositoriesColumns(HelmChartRepositoryModel); return ( }> @@ -23,6 +24,8 @@ const HelmChartRepositoryList: FC = (props) => { getDataViewRows={getDataViewRows} hideColumnManagement data-test="helm-chart-repositories-list" + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); diff --git a/frontend/packages/helm-plugin/src/components/list-page/HelmReleaseList.tsx b/frontend/packages/helm-plugin/src/components/list-page/HelmReleaseList.tsx index c38b94cbf73..17c963803c1 100644 --- a/frontend/packages/helm-plugin/src/components/list-page/HelmReleaseList.tsx +++ b/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,16 +39,22 @@ import { getDataViewRows, tableColumnInfo } from './HelmReleaseListRow'; type HelmReleaseFilters = ResourceFilters & { status: string[] }; -export const useHelmReleasesColumns = (): TableColumn[] => { +export const useHelmReleasesColumns = (): { + columns: TableColumn[]; + 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', }, }, @@ -53,6 +62,7 @@ export const useHelmReleasesColumns = (): TableColumn[] => { 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[] => { 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[] => { 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[] => { 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[] => { 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[] => { 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[] => { 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[] => { 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(() => { return SelectedReleaseStatuses.map((status) => ({ @@ -272,6 +290,8 @@ const HelmReleaseList: FC = () => { getDataViewRows={getDataViewRows} hideLabelFilter hideColumnManagement + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> )} diff --git a/frontend/packages/helm-plugin/src/components/list-page/ProjectHelmChartRepositoryList.tsx b/frontend/packages/helm-plugin/src/components/list-page/ProjectHelmChartRepositoryList.tsx index 645116d8565..89e8654466e 100644 --- a/frontend/packages/helm-plugin/src/components/list-page/ProjectHelmChartRepositoryList.tsx +++ b/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 = (props) => { const { t } = useTranslation(); - const columns = useRepositoriesColumns(); + const { columns, resetAllColumnWidths } = useRepositoriesColumns(ProjectHelmChartRepositoryModel); return ( }> @@ -23,6 +24,8 @@ const ProjectHelmChartRepositoryList: FC = (props) => { getDataViewRows={getDataViewRows} hideColumnManagement data-test="project-helm-chart-repositories-list" + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); diff --git a/frontend/packages/helm-plugin/src/components/list-page/RepositoriesHeader.tsx b/frontend/packages/helm-plugin/src/components/list-page/RepositoriesHeader.tsx index b2ce1da66cb..c4ff17858f5 100644 --- a/frontend/packages/helm-plugin/src/components/list-page/RepositoriesHeader.tsx +++ b/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,16 +15,24 @@ export const tableColumnInfo = [ { id: 'kebab' }, ]; -export const useRepositoriesColumns = (): TableColumn[] => { +export const useRepositoriesColumns = ( + model: K8sModel, +): { + columns: TableColumn[]; + 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', }, }, @@ -30,6 +40,7 @@ export const useRepositoriesColumns = (): TableColumn[] => { 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[] => { 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[] => { 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[] => { 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[] => { 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[] => { }, }, ], - [t], + [t, getResizableProps], ); + + return { columns, resetAllColumnWidths }; }; export default useRepositoriesColumns; diff --git a/frontend/packages/helm-plugin/src/components/list-page/RepositoriesList.tsx b/frontend/packages/helm-plugin/src/components/list-page/RepositoriesList.tsx index cb856e9d1aa..9d2d47a409f 100644 --- a/frontend/packages/helm-plugin/src/components/list-page/RepositoriesList.tsx +++ b/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 = (props) => { const { t } = useTranslation(); - const columns = useRepositoriesColumns(); + const { columns, resetAllColumnWidths } = useRepositoriesColumns( + HelmRepositoriesCombinedListModel, + ); return ( }> @@ -23,6 +26,8 @@ const RepositoriesList: FC = (props) => { getDataViewRows={getDataViewRows} hideColumnManagement data-test="repositories-list" + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); diff --git a/frontend/packages/helm-plugin/src/models/helm.ts b/frontend/packages/helm-plugin/src/models/helm.ts index e99dd608504..41ab082bf93 100644 --- a/frontend/packages/helm-plugin/src/models/helm.ts +++ b/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, +};