Add active columns hook

frontend/public/components/factory/ListPage/ListPageCreate.tsx

@@ -96,6 +96,7 @@ export const ListPageCreateDropdown: React.FC<ListPageCreateDropdownProps> = ({
         ))}
         isOpen={isOpen}
         data-test="item-create"
+        id="item-create"
       />
     </CreateWithPermissions>
   );

frontend/public/components/factory/Table/VirtualizedTable.tsx

@@ -9,7 +9,6 @@ import {
   ICell,
 } from '@patternfly/react-table';
 import { AutoSizer, WindowScroller } from '@patternfly/react-virtualized-extension';
-import { ALL_NAMESPACES_KEY, useActiveNamespace } from '@console/shared';
 
 import VirtualizedTableBody from './VirtualizedTableBody';
 import { history, StatusBox, WithScrollContainer } from '../../utils';
@@ -26,21 +25,11 @@ const MAX_COL_MD = 4;
 const MAX_COL_LG = 6;
 const MAX_COL_XL = 8;
 
-const isColumnVisible = (
-  widthInPixels: number,
-  columnID: string,
-  columns: Set<string> = new Set(),
-  showNamespaceOverride: boolean,
-  namespace: string,
-) => {
-  const showNamespace = columnID !== 'namespace' || !namespace || showNamespaceOverride;
-  if (_.isEmpty(columns) && showNamespace) {
+const isColumnVisible = (widthInPixels: number, column: TableColumn<any>, columnIDs: string[]) => {
+  if (column.title === '') {
     return true;
   }
-  if (!columns.has(columnID) || !showNamespace) {
-    return false;
-  }
-  const columnIndex = [...columns].indexOf(columnID);
+  const columnIndex = columnIDs.indexOf(column.id);
   if (widthInPixels < BREAKPOINT_SM) {
     return columnIndex < MAX_COL_XS;
   }
@@ -59,41 +48,6 @@ const isColumnVisible = (
   return true;
 };
 
-const getActiveColumns = <D extends any>(
-  windowWidth: number,
-  allColumns: TableColumn<D>[],
-  activeColumns: Set<string>,
-  columnManagementID: string,
-  showNamespaceOverride: boolean,
-  namespace: string,
-) => {
-  let columns = [...allColumns];
-  if (_.isEmpty(activeColumns)) {
-    activeColumns = new Set(
-      columns.map((col) => {
-        if (col.id && !col.additional) {
-          return col.id;
-        }
-      }),
-    );
-  }
-  if (columnManagementID) {
-    columns = columns?.filter(
-      (col) =>
-        isColumnVisible(windowWidth, col.id, activeColumns, showNamespaceOverride, namespace) ||
-        col.title === '',
-    );
-  } else {
-    columns = columns?.filter((col) => activeColumns.has(col.id) || col.title === '');
-  }
-
-  const showNamespace = !namespace || showNamespaceOverride;
-  if (!showNamespace) {
-    columns = columns.filter((column) => column.id !== 'namespace');
-  }
-  return columns;
-};
-
 export type TableColumn<D> = ICell & {
   title: string;
   id?: string;
@@ -104,6 +58,7 @@ export type TableColumn<D> = ICell & {
 export type RowProps<D, R extends any = {}> = {
   obj: D;
   rowData: R;
+  activeColumnIDs: Set<string>;
 };
 
 type VirtualizedTableProps<D, R extends any = {}> = {
@@ -120,9 +75,6 @@ type VirtualizedTableProps<D, R extends any = {}> = {
   label?: string;
   'aria-label'?: string;
   gridBreakPoint?: TableGridBreakpoint;
-  activeColumns?: Set<string>;
-  columnManagementID?: string;
-  showNamespaceOverride?: boolean;
   rowData?: R;
 };
 
@@ -139,9 +91,6 @@ const VirtualizedTable = <D, R extends any = {}>({
   gridBreakPoint = TableGridBreakpoint.none,
   onSelect,
   Row,
-  activeColumns,
-  columnManagementID,
-  showNamespaceOverride,
   rowData,
   unfilteredData,
 }: VirtualizedTableProps<D, R>) => {
@@ -152,20 +101,11 @@ const VirtualizedTable = <D, R extends any = {}>({
   }>({ index: columnShift, direction: SortByDirection.asc });
 
   const [windowWidth, setWindowWidth] = React.useState(window.innerWidth);
-  const [namespace] = useActiveNamespace();
 
-  const columns = React.useMemo(
-    () =>
-      getActiveColumns(
-        windowWidth,
-        allColumns,
-        activeColumns,
-        columnManagementID,
-        showNamespaceOverride,
-        namespace === ALL_NAMESPACES_KEY ? undefined : namespace,
-      ),
-    [windowWidth, allColumns, activeColumns, columnManagementID, showNamespaceOverride, namespace],
-  );
+  const columns = React.useMemo(() => {
+    const colIDs = allColumns.map((c) => c.id);
+    return allColumns?.filter((col) => isColumnVisible(windowWidth, col, colIDs));
+  }, [windowWidth, allColumns]);
 
   const applySort = React.useCallback(
     (index, direction) => {

frontend/public/components/factory/Table/VirtualizedTableBody.tsx

@@ -45,9 +45,12 @@ const VirtualizedTableBody = <D extends any, R extends any = {}>({
     keyMapper: (rowIndex) => (data?.[rowIndex] as K8sResourceCommon)?.metadata?.uid || rowIndex, // TODO custom keyMapper ?
   });
 
+  const activeColumnIDs = React.useMemo(() => new Set(columns.map((c) => c.id)), [columns]);
+
   const rowRenderer = ({ index, isVisible, key, style, parent }) => {
     const rowArgs: RowProps<D, R> = {
       obj: data[index],
+      activeColumnIDs,
       rowData,
     };
 

frontend/public/components/factory/Table/active-columns-hook.ts

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import {
+  ALL_NAMESPACES_KEY,
+  COLUMN_MANAGEMENT_CONFIGMAP_KEY,
+  COLUMN_MANAGEMENT_LOCAL_STORAGE_KEY,
+  useActiveNamespace,
+  useUserSettingsCompatibility,
+} from '@console/shared';
+import { TableColumn } from './VirtualizedTable';
+
+export const useActiveColumns = <D = any>({
+  columns,
+  showNamespaceOverride,
+  columnManagementID,
+}: {
+  columns: TableColumn<D>[];
+  showNamespaceOverride: boolean;
+  columnManagementID: string;
+}): [TableColumn<D>[], boolean] => {
+  const [tableColumns, , userSettingsLoaded] = useUserSettingsCompatibility(
+    COLUMN_MANAGEMENT_CONFIGMAP_KEY,
+    COLUMN_MANAGEMENT_LOCAL_STORAGE_KEY,
+    undefined,
+    true,
+  );
+  const [namespace] = useActiveNamespace();
+
+  return React.useMemo(() => {
+    const activeColumnIDs: Set<string> =
+      tableColumns?.[columnManagementID]?.length > 0
+        ? new Set(tableColumns[columnManagementID])
+        : null;
+
+    if (showNamespaceOverride && activeColumnIDs && !activeColumnIDs.has('namespace')) {
+      activeColumnIDs.add('namespace');
+    }
+
+    let activeColumns = columns.filter((c) => activeColumnIDs?.has(c.id) || c.title === '');
+    if (namespace && namespace !== ALL_NAMESPACES_KEY && !showNamespaceOverride) {
+      activeColumns = activeColumns.filter((column) => column.id !== 'namespace');
+    }
+    return [activeColumns, userSettingsLoaded];
+  }, [
+    tableColumns,
+    columnManagementID,
+    columns,
+    namespace,
+    showNamespaceOverride,
+    userSettingsLoaded,
+  ]);
+};

frontend/public/components/pod.tsx

@@ -101,6 +101,7 @@ import { useListPageFilter } from './factory/ListPage/filter-hook';
 import { RowFilter } from './filter-toolbar';
 import VirtualizedTable, { RowProps, TableColumn } from './factory/Table/VirtualizedTable';
 import { sortResourceByValue } from './factory/Table/sort';
+import { useActiveColumns } from './factory/Table/active-columns-hook';
 
 // Only request metrics if the device's screen width is larger than the
 // breakpoint where metrics are visible.
@@ -323,7 +324,7 @@ const getColumns = (showNodes: boolean, t: TFunction): TableColumn<PodKind>[] =>
   },
 ];
 
-const getSelectedColumns = (showNodes: boolean, t: TFunction) => {
+const getSelectedColumns = (showNodes: boolean, t: TFunction): Set<string> => {
   return new Set(
     getColumns(showNodes, t).reduce((acc, column) => {
       if (column.id && !column.additional) {
@@ -336,7 +337,8 @@ const getSelectedColumns = (showNodes: boolean, t: TFunction) => {
 
 const PodTableRow: React.FC<RowProps<PodKind, PodRowData>> = ({
   obj: pod,
-  rowData: { showNodes, showNamespaceOverride, tableColumns },
+  rowData: { showNodes },
+  activeColumnIDs,
 }) => {
   const { t } = useTranslation();
   const { name, namespace, creationTimestamp, labels } = pod.metadata;
@@ -351,8 +353,7 @@ const PodTableRow: React.FC<RowProps<PodKind, PodRowData>> = ({
   const { readyCount, totalContainers } = podReadiness(pod);
   const phase = podPhase(pod);
   const restarts = podRestarts(pod);
-  const columns: Set<string> =
-    tableColumns?.length > 0 ? new Set(tableColumns) : getSelectedColumns(showNodes, t);
+  const columns = activeColumnIDs?.size > 0 ? activeColumnIDs : getSelectedColumns(showNodes, t);
   const resourceKind = referenceFor(pod);
   const context = { [resourceKind]: pod };
   return (
@@ -364,7 +365,6 @@ const PodTableRow: React.FC<RowProps<PodKind, PodRowData>> = ({
         className={classNames(podColumnInfo.namespace.classes, 'co-break-word')}
         columns={columns}
         columnID={podColumnInfo.namespace.id}
-        showNamespaceOverride={showNamespaceOverride}
       >
         <ResourceLink kind="Namespace" name={namespace} />
       </TableData>
@@ -841,30 +841,24 @@ PodsDetailsPage.displayName = 'PodsDetailsPage';
 
 export const PodList: React.FC<PodListProps> = ({ showNamespaceOverride, showNodes, ...props }) => {
   const { t } = useTranslation();
-  const [tableColumns, , userSettingsLoaded] = useUserSettingsCompatibility(
-    COLUMN_MANAGEMENT_CONFIGMAP_KEY,
-    COLUMN_MANAGEMENT_LOCAL_STORAGE_KEY,
-    undefined,
-    true,
-  );
-  const rowData = React.useMemo<PodRowData>(() => {
-    const selectedColumns: Set<string> =
-      tableColumns?.[columnManagementID]?.length > 0
-        ? new Set(tableColumns[columnManagementID])
-        : null;
-    return {
-      showNamespaceOverride,
-      showNodes,
-      tableColumns: selectedColumns ? [...selectedColumns] : null,
-    };
-  }, [tableColumns, showNamespaceOverride, showNodes]);
   const columns = React.useMemo(() => getColumns(showNodes, t), [showNodes, t]);
+  const [activeColumns, userSettingsLoaded] = useActiveColumns({
+    columns,
+    showNamespaceOverride,
+    columnManagementID,
+  });
+  const rowData = React.useMemo<PodRowData>(
+    () => ({
+      showNodes,
+    }),
+    [showNodes],
+  );
   return (
     userSettingsLoaded && (
       <VirtualizedTable<PodKind, PodRowData>
         {...props}
         aria-label={t('public~Pods')}
-        columns={columns}
+        columns={activeColumns}
         Row={PodTableRow}
         rowData={rowData}
       />
@@ -1040,9 +1034,7 @@ type PodDetailsProps = {
 };
 
 type PodRowData = {
-  tableColumns: string[];
   showNodes?: boolean;
-  showNamespaceOverride?: boolean;
 };
 
 type PodListProps = {