hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Allow having default hidden columns in ItemListLayout

Browse Source 
Signed-off-by: devodev <abalexandrebarone@gmail.com>
This commit is contained in:
devodev 2021-07-18 11:05:01 -04:00
parent 16344353ae
commit 03b0dd74e6
3 changed files with 21 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/common/user-store/preferences-helpers.ts
View File

@ -23,7 +23,7 @@ import moment from "moment-timezone";
import path from "path"; import path from "path";
import os from "os"; import os from "os";
import { ThemeStore } from "../../renderer/theme.store"; import { ThemeStore } from "../../renderer/theme.store";
import { ObservableToggleSet } from "../utils"; import { observable, ObservableMap } from "mobx";
export interface KubeconfigSyncEntry extends KubeconfigSyncValue { export interface KubeconfigSyncEntry extends KubeconfigSyncValue {
filePath: string; filePath: string;
@ -184,14 +184,14 @@ const openAtLogin: PreferenceDescription<boolean> = {
}, },
}; };
const hiddenTableColumns: PreferenceDescription<[string, string[]][], Map<string, ObservableToggleSet<string>>> = { const hiddenTableColumns: PreferenceDescription<[string, [string, boolean][]][], Map<string, ObservableMap<string, boolean>>> = {
fromStore(val) { fromStore(val) {
return new Map( return new Map(
(val ?? []).map(([tableId, columnIds]) => [tableId, new ObservableToggleSet(columnIds)]) (val ?? []).map(([tableId, columns]) => [tableId, observable.map(columns)])
); );
}, },
toStore(val) { toStore(val) {
const res: [string, string[]][] = []; const res: [string, [string, boolean][]][] = [];
for (const [table, columns] of val) { for (const [table, columns] of val) {
if (columns.size) { if (columns.size) {

16
src/common/user-store/user-store.ts
View File

@ -21,7 +21,7 @@
import { app, remote } from "electron"; import { app, remote } from "electron";
import semver from "semver"; import semver from "semver";
import { action, computed, observable, reaction, makeObservable } from "mobx"; import { action, computed, observable, reaction, makeObservable, ObservableMap } from "mobx";
import { BaseStore } from "../base-store"; import { BaseStore } from "../base-store";
import migrations from "../../migrations/user-store"; import migrations from "../../migrations/user-store";
import { getAppVersion } from "../utils/app-version"; import { getAppVersion } from "../utils/app-version";
@ -29,7 +29,7 @@ import { kubeConfigDefaultPath } from "../kube-helpers";
import { appEventBus } from "../event-bus"; import { appEventBus } from "../event-bus";
import path from "path"; import path from "path";
import { fileNameMigration } from "../../migrations/user-store"; import { fileNameMigration } from "../../migrations/user-store";
import { ObservableToggleSet, toJS } from "../../renderer/utils"; import { toJS } from "../../renderer/utils";
import { DESCRIPTORS, KubeconfigSyncValue, UserPreferencesModel } from "./preferences-helpers"; import { DESCRIPTORS, KubeconfigSyncValue, UserPreferencesModel } from "./preferences-helpers";
import logger from "../../main/logger"; import logger from "../../main/logger";
@ -79,7 +79,7 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
* The column IDs under each configurable table ID that have been configured * The column IDs under each configurable table ID that have been configured
* to not be shown * to not be shown
*/ */
hiddenTableColumns = observable.map<string, ObservableToggleSet<string>>(); hiddenTableColumns = observable.map<string, ObservableMap<string, boolean>>();
/** /**
* The set of file/folder paths to be synced * The set of file/folder paths to be synced
@ -136,12 +136,12 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
/** /**
* Toggles the hidden configuration of a table's column * Toggles the hidden configuration of a table's column
*/ */
toggleTableColumnVisibility(tableId: string, columnId: string) { toggleTableColumnVisibility(tableId: string, columnId: string, defaultHidden: boolean) {
if (!this.hiddenTableColumns.get(tableId)) { if (this.hiddenTableColumns.get(tableId)?.get(columnId) === undefined){
this.hiddenTableColumns.set(tableId, new ObservableToggleSet()); this.hiddenTableColumns.get(tableId)?.set(columnId, !defaultHidden);
} else if (!!this.hiddenTableColumns.get(tableId)?.get(columnId) !== defaultHidden) {
this.hiddenTableColumns.get(tableId)?.delete(columnId);
} }
this.hiddenTableColumns.get(tableId).toggle(columnId);
} }
@action @action

16
src/renderer/components/item-object-list/item-list-layout.tsx
View File

@ -23,11 +23,11 @@ import "./item-list-layout.scss";
import groupBy from "lodash/groupBy"; import groupBy from "lodash/groupBy";
import React, { ReactNode } from "react"; import React, { ReactNode } from "react";
import { computed, makeObservable } from "mobx"; import { computed, makeObservable, observable } from "mobx";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { ConfirmDialog, ConfirmDialogParams } from "../confirm-dialog"; import { ConfirmDialog, ConfirmDialogParams } from "../confirm-dialog";
import { Table, TableCell, TableCellProps, TableHead, TableProps, TableRow, TableRowProps, TableSortCallbacks } from "../table"; import { Table, TableCell, TableCellProps, TableHead, TableProps, TableRow, TableRowProps, TableSortCallbacks } from "../table";
import { boundMethod, createStorage, cssNames, IClassName, isReactNode, noop, ObservableToggleSet, prevDefault, stopPropagation } from "../../utils"; import { boundMethod, createStorage, cssNames, IClassName, isReactNode, noop, prevDefault, stopPropagation } from "../../utils";
import { AddRemoveButtons, AddRemoveButtonsProps } from "../add-remove-buttons"; import { AddRemoveButtons, AddRemoveButtonsProps } from "../add-remove-buttons";
import { NoItems } from "../no-items"; import { NoItems } from "../no-items";
import { Spinner } from "../spinner"; import { Spinner } from "../spinner";
@ -68,6 +68,7 @@ export interface ItemListLayoutProps<I extends ItemObject> {
searchFilters?: SearchFilter<I>[]; searchFilters?: SearchFilter<I>[];
/** @deprecated */ /** @deprecated */
filterItems?: ItemsFilter<I>[]; filterItems?: ItemsFilter<I>[];
hiddenColumns?: string[];
// header (title, filtering, searching, etc.) // header (title, filtering, searching, etc.)
showHeader?: boolean; showHeader?: boolean;
@ -111,6 +112,7 @@ const defaultProps: Partial<ItemListLayoutProps<ItemObject>> = {
searchFilters: [], searchFilters: [],
customizeHeader: [], customizeHeader: [],
filterItems: [], filterItems: [],
hiddenColumns: [],
hasDetailsView: true, hasDetailsView: true,
onDetails: noop, onDetails: noop,
virtual: true, virtual: true,
@ -146,7 +148,7 @@ export class ItemListLayout<I extends ItemObject> extends React.Component<ItemLi
} }
if (isConfigurable && !UserStore.getInstance().hiddenTableColumns.has(tableId)) { if (isConfigurable && !UserStore.getInstance().hiddenTableColumns.has(tableId)) {
UserStore.getInstance().hiddenTableColumns.set(tableId, new ObservableToggleSet()); UserStore.getInstance().hiddenTableColumns.set(tableId, observable.map());
} }
if (preloadStores) { if (preloadStores) {
@ -476,13 +478,13 @@ export class ItemListLayout<I extends ItemObject> extends React.Component<ItemLi
} }
showColumn({ id: columnId, showWithColumn }: TableCellProps): boolean { showColumn({ id: columnId, showWithColumn }: TableCellProps): boolean {
const { tableId, isConfigurable } = this.props; const { tableId, hiddenColumns, isConfigurable } = this.props;
return !isConfigurable || !UserStore.getInstance().isTableColumnHidden(tableId, columnId, showWithColumn); return !isConfigurable || !(UserStore.getInstance().isTableColumnHidden(tableId, columnId, showWithColumn) !== hiddenColumns.includes(columnId));
} }
renderColumnVisibilityMenu() { renderColumnVisibilityMenu() {
const { renderTableHeader, tableId } = this.props; const { renderTableHeader, hiddenColumns, tableId } = this.props;
return ( return (
<MenuActions className="ItemListLayoutVisibilityMenu" toolbar={false} autoCloseOnSelect={false}> <MenuActions className="ItemListLayoutVisibilityMenu" toolbar={false} autoCloseOnSelect={false}>
@ -492,7 +494,7 @@ export class ItemListLayout<I extends ItemObject> extends React.Component<ItemLi
<Checkbox <Checkbox
label={cellProps.title ?? `<${cellProps.className}>`} label={cellProps.title ?? `<${cellProps.className}>`}
value={this.showColumn(cellProps)} value={this.showColumn(cellProps)}
onChange={() => UserStore.getInstance().toggleTableColumnVisibility(tableId, cellProps.id)} onChange={() => UserStore.getInstance().toggleTableColumnVisibility(tableId, cellProps.id, hiddenColumns.includes(cellProps.id))}
/> />
</MenuItem> </MenuItem>
) )