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 os from "os";
import { ThemeStore } from "../../renderer/theme.store";
import { ObservableToggleSet } from "../utils";
import { observable, ObservableMap } from "mobx";
export interface KubeconfigSyncEntry extends KubeconfigSyncValue {
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) {
return new Map(
(val ?? []).map(([tableId, columnIds]) => [tableId, new ObservableToggleSet(columnIds)])
(val ?? []).map(([tableId, columns]) => [tableId, observable.map(columns)])
);
},
toStore(val) {
const res: [string, string[]][] = [];
const res: [string, [string, boolean][]][] = [];
for (const [table, columns] of val) {
if (columns.size) {

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

@ -21,7 +21,7 @@
import { app, remote } from "electron";
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 migrations from "../../migrations/user-store";
import { getAppVersion } from "../utils/app-version";
@ -29,7 +29,7 @@ import { kubeConfigDefaultPath } from "../kube-helpers";
import { appEventBus } from "../event-bus";
import path from "path";
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 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
* 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
@ -136,12 +136,12 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
/**
* Toggles the hidden configuration of a table's column
*/
toggleTableColumnVisibility(tableId: string, columnId: string) {
if (!this.hiddenTableColumns.get(tableId)) {
this.hiddenTableColumns.set(tableId, new ObservableToggleSet());
toggleTableColumnVisibility(tableId: string, columnId: string, defaultHidden: boolean) {
if (this.hiddenTableColumns.get(tableId)?.get(columnId) === undefined){
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

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 React, { ReactNode } from "react";
import { computed, makeObservable } from "mobx";
import { computed, makeObservable, observable } from "mobx";
import { observer } from "mobx-react";
import { ConfirmDialog, ConfirmDialogParams } from "../confirm-dialog";
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 { NoItems } from "../no-items";
import { Spinner } from "../spinner";
@ -68,6 +68,7 @@ export interface ItemListLayoutProps<I extends ItemObject> {
searchFilters?: SearchFilter<I>[];
/** @deprecated */
filterItems?: ItemsFilter<I>[];
hiddenColumns?: string[];
// header (title, filtering, searching, etc.)
showHeader?: boolean;
@ -111,6 +112,7 @@ const defaultProps: Partial<ItemListLayoutProps<ItemObject>> = {
searchFilters: [],
customizeHeader: [],
filterItems: [],
hiddenColumns: [],
hasDetailsView: true,
onDetails: noop,
virtual: true,
@ -146,7 +148,7 @@ export class ItemListLayout<I extends ItemObject> extends React.Component<ItemLi
}
if (isConfigurable && !UserStore.getInstance().hiddenTableColumns.has(tableId)) {
UserStore.getInstance().hiddenTableColumns.set(tableId, new ObservableToggleSet());
UserStore.getInstance().hiddenTableColumns.set(tableId, observable.map());
}
if (preloadStores) {
@ -476,13 +478,13 @@ export class ItemListLayout<I extends ItemObject> extends React.Component<ItemLi
}
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() {
const { renderTableHeader, tableId } = this.props;
const { renderTableHeader, hiddenColumns, tableId } = this.props;
return (
<MenuActions className="ItemListLayoutVisibilityMenu" toolbar={false} autoCloseOnSelect={false}>
@ -492,7 +494,7 @@ export class ItemListLayout<I extends ItemObject> extends React.Component<ItemLi
<Checkbox
label={cellProps.title ?? `<${cellProps.className}>`}
value={this.showColumn(cellProps)}
onChange={() => UserStore.getInstance().toggleTableColumnVisibility(tableId, cellProps.id)}
onChange={() => UserStore.getInstance().toggleTableColumnVisibility(tableId, cellProps.id, hiddenColumns.includes(cellProps.id))}
/>
</MenuItem>
)