diff --git a/src/renderer/components/+workloads-pods/pods.tsx b/src/renderer/components/+workloads-pods/pods.tsx index 6d935a8a13..2296b98317 100644 --- a/src/renderer/components/+workloads-pods/pods.tsx +++ b/src/renderer/components/+workloads-pods/pods.tsx @@ -96,7 +96,7 @@ export class Pods extends React.Component { renderHeaderTitle="Pods" renderTableHeader={[ { title: "Name", className: "name", sortBy: sortBy.name }, - { className: "warning" }, + { className: "warning", showWithColumn: "name" }, { title: "Namespace", className: "namespace", sortBy: sortBy.namespace }, { title: "Containers", className: "containers", sortBy: sortBy.containers }, { title: "Restarts", className: "restarts", sortBy: sortBy.restarts }, diff --git a/src/renderer/components/item-object-list/item-list-layout.tsx b/src/renderer/components/item-object-list/item-list-layout.tsx index d57559e8da..0a24ef3b63 100644 --- a/src/renderer/components/item-object-list/item-list-layout.tsx +++ b/src/renderer/components/item-object-list/item-list-layout.tsx @@ -1,4 +1,5 @@ import "./item-list-layout.scss"; +import "./table-menu.scss"; import groupBy from "lodash/groupBy"; import React, { ReactNode } from "react"; @@ -119,7 +120,8 @@ export class ItemListLayout extends React.Component { } async componentDidMount() { - const { store, dependentStores, isClusterScoped, isConfigurable, tableId, renderTableHeader } = this.props; + const { store, dependentStores, isClusterScoped, tableId } = this.props; + if (this.canBeConfigured) this.hiddenColumnNames = new Set(userStore.preferences?.hiddenTableColumns?.[tableId]); const stores = [store, ...dependentStores]; @@ -139,11 +141,9 @@ export class ItemListLayout extends React.Component { componentWillUnmount() { this.isUnmounting = true; - const { store, isSelectable, isConfigurable, tableId } = this.props; + const { store, isSelectable } = this.props; + if (isSelectable) store.resetSelection(); - if (this.canBeConfigured) { - userStore.preferences.hiddenTableColumns[tableId] = Array.from(this.hiddenColumnNames); - } } private filterCallbacks: { [type: string]: ItemsFilter } = { @@ -233,15 +233,21 @@ export class ItemListLayout extends React.Component { } else { this.hiddenColumnNames.add(columnName); } + + if (this.canBeConfigured) { + userStore.preferences.hiddenTableColumns[this.props.tableId] = Array.from(this.hiddenColumnNames); + } } - showColumn(index: number): boolean { - const {isConfigurable, tableId , renderTableHeader} = this.props; + columnIsVisible(index: number): boolean { + const {renderTableHeader} = this.props; + if (!this.canBeConfigured) return true; - return !this.hiddenColumnNames.has(renderTableHeader[index].className); + + return !this.hiddenColumnNames.has(renderTableHeader[index].showWithColumn ?? renderTableHeader[index].className); } - @computed get canBeConfigured(): boolean { + get canBeConfigured(): boolean { const { isConfigurable, tableId, renderTableHeader } = this.props; if (!isConfigurable || !tableId) { @@ -250,6 +256,7 @@ export class ItemListLayout extends React.Component { if (!renderTableHeader?.every(({ className }) => className)) { logger.warning("[ItemObjectList]: cannot configure an object list without all headers being identifiable"); + return false; } @@ -298,7 +305,8 @@ export class ItemListLayout extends React.Component { cellProps.className = cssNames(cellProps.className, headCell.className); } } - return this.showColumn(index) ? : null; + + return this.columnIsVisible(index) ? : null; }) } {renderItemMenu && ( @@ -435,9 +443,8 @@ export class ItemListLayout extends React.Component { renderList() { const { - isSelectable, tableProps = {}, renderTableHeader, - store, hasDetailsView, addRemoveButtons = {}, virtual, sortingCallbacks, detailsItem, - isConfigurable, tableId + isSelectable, tableProps = {}, renderTableHeader, renderItemMenu, + store, hasDetailsView, addRemoveButtons = {}, virtual, sortingCallbacks, detailsItem } = this.props; const { isReady, removeItemsDialog, items } = this; const { selectedItems } = store; @@ -471,8 +478,8 @@ export class ItemListLayout extends React.Component { onClick={prevDefault(() => store.toggleSelectionAll(items))} /> )} - {renderTableHeader.map((cellProps, index) => this.showColumn(index) ? : null)} - { + {renderTableHeader.map((cellProps, index) => this.columnIsVisible(index) ? : null)} + { renderItemMenu && {this.canBeConfigured && this.renderColumnMenu()} @@ -496,19 +503,23 @@ export class ItemListLayout extends React.Component { renderColumnMenu() { const { renderTableHeader} = this.props; - return( + + return ( {renderTableHeader.map((cellProps, index) => ( - - `} - value ={!this.hiddenColumnNames.has(cellProps.className)} - onChange = {v =>this.updateColumnFilter(v, cellProps.className)} /> - )) - } + !cellProps.showWithColumn && + + `} + className = "MenuCheckbox" + value ={!this.hiddenColumnNames.has(cellProps.className)} + onChange = {(v) => this.updateColumnFilter(v, cellProps.className)} + /> + + ))} ); } diff --git a/src/renderer/components/item-object-list/table-menu.scss b/src/renderer/components/item-object-list/table-menu.scss new file mode 100644 index 0000000000..b7e41f54ca --- /dev/null +++ b/src/renderer/components/item-object-list/table-menu.scss @@ -0,0 +1,4 @@ +.MenuCheckbox { + width: 100%; + height: 100%; +} diff --git a/src/renderer/components/table/table-cell.tsx b/src/renderer/components/table/table-cell.tsx index a42db4c2be..97335078f1 100644 --- a/src/renderer/components/table/table-cell.tsx +++ b/src/renderer/components/table/table-cell.tsx @@ -15,6 +15,7 @@ export interface TableCellProps extends React.DOMAttributes { isChecked?: boolean; // mark checkbox as checked or not renderBoolean?: boolean; // show "true" or "false" for all of the children elements are "typeof boolean" sortBy?: TableSortBy; // column name, must be same as key in sortable object + showWithColumn?: string // className of another column, if it is not empty the current column is not shown in the filter menu, visibility of this one is the same as a specified column, applicable to headers only _sorting?: Partial; //
sorting state, don't use this prop outside (!) _sort?(sortBy: TableSortBy): void; //
sort function, don't use this prop outside (!) _nowrap?: boolean; // indicator, might come from parent , don't use this prop outside (!) @@ -63,7 +64,7 @@ export class TableCell extends React.Component { } render() { - const { className, checkbox, isChecked, sortBy, _sort, _sorting, _nowrap, children, title, renderBoolean: displayBoolean, ...cellProps } = this.props; + const { className, checkbox, isChecked, sortBy, _sort, _sorting, _nowrap, children, title, renderBoolean: displayBoolean, showWithColumn, ...cellProps } = this.props; const classNames = cssNames("TableCell", className, { checkbox, nowrap: _nowrap,