Flatten user preferences in user store (#2587)

Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton authored and GitHub committed 2021-04-27 09:44:02 -04:00
1 parent 119d584bcb
commit afa5379ba9
16 files changed
+212 -116

No files matched your search

@@ -1,15 +1,16 @@
import React, { useState } from "react";
import { Input, InputValidators } from "../input";
import { SubTitle } from "../layout/sub-title";
import { getDefaultKubectlPath, UserPreferences } from "../../../common/user-store";
import { getDefaultKubectlPath, UserStore } from "../../../common/user-store";
import { observer } from "mobx-react";
import { bundledKubectlPath } from "../../../main/kubectl";
import { SelectOption, Select } from "../select";
import { FormSwitch, Switcher } from "../switch";
export const KubectlBinaries = observer(({ preferences }: { preferences: UserPreferences }) => {
const [downloadPath, setDownloadPath] = useState(preferences.downloadBinariesPath || "");
const [binariesPath, setBinariesPath] = useState(preferences.kubectlBinariesPath || "");
export const KubectlBinaries = observer(() => {
const userStore = UserStore.getInstance();
const [downloadPath, setDownloadPath] = useState(userStore.downloadBinariesPath || "");
const [binariesPath, setBinariesPath] = useState(userStore.kubectlBinariesPath || "");
const pathValidator = downloadPath ? InputValidators.isPath : undefined;
const downloadMirrorOptions: SelectOption<string>[] = [
@@ -18,8 +19,8 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
];
const save = () => {
preferences.downloadBinariesPath = downloadPath;
preferences.kubectlBinariesPath = binariesPath;
userStore.downloadBinariesPath = downloadPath;
userStore.kubectlBinariesPath = binariesPath;
};
return (
@@ -29,8 +30,8 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
<FormSwitch
control={
<Switcher
checked={preferences.downloadKubectlBinaries}
onChange={v => preferences.downloadKubectlBinaries = v.target.checked}
checked={userStore.downloadKubectlBinaries}
onChange={v => userStore.downloadKubectlBinaries = v.target.checked}
name="kubectl-download"
/>
}
@@ -45,9 +46,9 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
<Select
placeholder="Download mirror for kubectl"
options={downloadMirrorOptions}
value={preferences.downloadMirror}
onChange={({ value }: SelectOption) => preferences.downloadMirror = value}
disabled={!preferences.downloadKubectlBinaries}
value={userStore.downloadMirror}
onChange={({ value }: SelectOption) => userStore.downloadMirror = value}
disabled={!userStore.downloadKubectlBinaries}
themeName="lens"
/>
</section>
@@ -58,12 +59,12 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
<SubTitle title="Directory for binaries" />
<Input
theme="round-black"
value={downloadPath}
value={userStore.downloadBinariesPath}
placeholder={getDefaultKubectlPath()}
validators={pathValidator}
onChange={setDownloadPath}
onBlur={save}
disabled={!preferences.downloadKubectlBinaries}
disabled={!userStore.downloadKubectlBinaries}
/>
<div className="hint">
The directory to download binaries into.
@@ -81,7 +82,7 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
validators={pathValidator}
onChange={setBinariesPath}
onBlur={save}
disabled={preferences.downloadKubectlBinaries}
disabled={userStore.downloadKubectlBinaries}
/>
</section>
</>
@@ -30,8 +30,8 @@ enum Pages {
@observer
export class Preferences extends React.Component {
@observable httpProxy = UserStore.getInstance().preferences.httpsProxy || "";
@observable shell = UserStore.getInstance().preferences.shell || "";
@observable httpProxy = UserStore.getInstance().httpsProxy || "";
@observable shell = UserStore.getInstance().shell || "";
@observable activeTab = Pages.Application;
@computed get themeOptions(): SelectOption<string>[] {
@@ -100,7 +100,6 @@ export class Preferences extends React.Component {
render() {
const extensions = appPreferenceRegistry.getItems();
const telemetryExtensions = extensions.filter(e => e.showInPreferencesTab == Pages.Telemetry);
const { preferences } = UserStore.getInstance();
const defaultShell = process.env.SHELL
|| process.env.PTYSHELL
|| (
@@ -123,8 +122,8 @@ export class Preferences extends React.Component {
<SubTitle title="Theme"/>
<Select
options={this.themeOptions}
value={preferences.colorTheme}
onChange={({ value }: SelectOption) => preferences.colorTheme = value}
value={UserStore.getInstance().colorTheme}
onChange={({ value }: SelectOption) => UserStore.getInstance().colorTheme = value}
themeName="lens"
/>
</section>
@@ -138,7 +137,7 @@ export class Preferences extends React.Component {
placeholder={defaultShell}
value={this.shell}
onChange={v => this.shell = v}
onBlur={() => preferences.shell = this.shell}
onBlur={() => UserStore.getInstance().shell = this.shell}
/>
</section>
@@ -149,8 +148,8 @@ export class Preferences extends React.Component {
<FormSwitch
control={
<Switcher
checked={preferences.openAtLogin}
onChange={v => preferences.openAtLogin = v.target.checked}
checked={UserStore.getInstance().openAtLogin}
onChange={v => UserStore.getInstance().openAtLogin = v.target.checked}
name="startup"
/>
}
@@ -164,7 +163,7 @@ export class Preferences extends React.Component {
<SubTitle title="Locale Timezone" />
<Select
options={this.timezoneOptions}
value={preferences.localeTimezone}
value={UserStore.getInstance().localeTimezone}
onChange={({ value }: SelectOption) => UserStore.getInstance().setLocaleTimezone(value)}
themeName="lens"
/>
@@ -181,7 +180,7 @@ export class Preferences extends React.Component {
placeholder="Type HTTP proxy url (example: http://proxy.acme.org:8080)"
value={this.httpProxy}
onChange={v => this.httpProxy = v}
onBlur={() => preferences.httpsProxy = this.httpProxy}
onBlur={() => UserStore.getInstance().httpsProxy = this.httpProxy}
/>
<small className="hint">
Proxy is used only for non-cluster communication.
@@ -195,8 +194,8 @@ export class Preferences extends React.Component {
<FormSwitch
control={
<Switcher
checked={preferences.allowUntrustedCAs}
onChange={v => preferences.allowUntrustedCAs = v.target.checked}
checked={UserStore.getInstance().allowUntrustedCAs}
onChange={v => UserStore.getInstance().allowUntrustedCAs = v.target.checked}
name="startup"
/>
}
@@ -215,7 +214,7 @@ export class Preferences extends React.Component {
<section id="kubernetes">
<section id="kubectl">
<h2 data-testid="kubernetes-header">Kubernetes</h2>
<KubectlBinaries preferences={preferences}/>
<KubectlBinaries />
</section>
<hr/>
<section id="helm">
+1 -2
View File
@@ -81,7 +81,6 @@ export class LogList extends React.Component<Props> {
@computed
get logs() {
const showTimestamps = logTabStore.getData(this.props.id).showTimestamps;
const { preferences } = UserStore.getInstance();
if (!showTimestamps) {
return logStore.logsWithoutTimestamps;
@@ -89,7 +88,7 @@ export class LogList extends React.Component<Props> {
return this.props.logs
.map(log => logStore.splitOutTimestamp(log))
.map(([logTimestamp, log]) => (`${moment.tz(logTimestamp, preferences.localeTimezone).format()}${log}`));
.map(([logTimestamp, log]) => (`${moment.tz(logTimestamp, UserStore.getInstance().localeTimezone).format()}${log}`));
}
/**
@@ -6,7 +6,7 @@ import { computed } from "mobx";
import { disposeOnUnmount, observer } from "mobx-react";
import { ConfirmDialog, ConfirmDialogParams } from "../confirm-dialog";
import { Table, TableCell, TableCellProps, TableHead, TableProps, TableRow, TableRowProps, TableSortCallback } from "../table";
import { autobind, createStorage, cssNames, IClassName, isReactNode, noop, prevDefault, stopPropagation } from "../../utils";
import { autobind, createStorage, cssNames, IClassName, isReactNode, noop, ObservableToggleSet, prevDefault, stopPropagation } from "../../utils";
import { AddRemoveButtons, AddRemoveButtonsProps } from "../add-remove-buttons";
import { NoItems } from "../no-items";
import { Spinner } from "../spinner";
@@ -117,6 +117,10 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
throw new Error("[ItemListLayout]: configurable list require props.tableId to be specified");
}
if (isConfigurable && !UserStore.getInstance().hiddenTableColumns.has(tableId)) {
UserStore.getInstance().hiddenTableColumns.set(tableId, new ObservableToggleSet());
}
if (preloadStores) {
this.loadStores();
@@ -251,7 +255,7 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
cellProps.className = cssNames(cellProps.className, headCell.className);
}
if (!headCell || !this.isHiddenColumn(headCell)) {
if (!headCell || this.showColumn(headCell)) {
return <TableCell key={index} {...cellProps} />;
}
})
@@ -420,11 +424,11 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
onClick={prevDefault(() => store.toggleSelectionAll(enabledItems))}
/>
)}
{renderTableHeader.map((cellProps, index) => {
if (!this.isHiddenColumn(cellProps)) {
return <TableCell key={cellProps.id ?? index} {...cellProps} />;
}
})}
{renderTableHeader.map((cellProps, index) => (
this.showColumn(cellProps) && (
<TableCell key={cellProps.id ?? index} {...cellProps} />
)
))}
<TableCell className="menu">
{isConfigurable && this.renderColumnVisibilityMenu()}
</TableCell>
@@ -468,34 +472,14 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
);
}
@computed get hiddenColumns() {
return UserStore.getInstance().getHiddenTableColumns(this.props.tableId);
}
showColumn({ id: columnId, showWithColumn }: TableCellProps): boolean {
const { tableId, isConfigurable } = this.props;
isHiddenColumn({ id: columnId, showWithColumn }: TableCellProps): boolean {
if (!this.props.isConfigurable) {
return false;
}
return this.hiddenColumns.has(columnId) || (
showWithColumn && this.hiddenColumns.has(showWithColumn)
);
}
updateColumnVisibility({ id: columnId }: TableCellProps, isVisible: boolean) {
const hiddenColumns = new Set(this.hiddenColumns);
if (!isVisible) {
hiddenColumns.add(columnId);
} else {
hiddenColumns.delete(columnId);
}
UserStore.getInstance().setHiddenTableColumns(this.props.tableId, hiddenColumns);
return !isConfigurable || !UserStore.getInstance().isTableColumnHidden(tableId, columnId, showWithColumn);
}
renderColumnVisibilityMenu() {
const { renderTableHeader } = this.props;
const { renderTableHeader, tableId } = this.props;
return (
<MenuActions className="ItemListLayoutVisibilityMenu" toolbar={false} autoCloseOnSelect={false}>
@@ -504,8 +488,8 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
<MenuItem key={index} className="input">
<Checkbox
label={cellProps.title ?? `<${cellProps.className}>`}
value={!this.isHiddenColumn(cellProps)}
onChange={isVisible => this.updateColumnVisibility(cellProps, isVisible)}
value={this.showColumn(cellProps)}
onChange={() => UserStore.getInstance().toggleTableColumnVisibility(tableId, cellProps.id)}
/>
</MenuItem>
)
@@ -10,9 +10,8 @@ interface Props {
@observer
export class LocaleDate extends React.Component<Props> {
render() {
const { preferences } = UserStore.getInstance();
const { date } = this.props;
return <>{moment.tz(date, preferences.localeTimezone).format()}</>;
return moment.tz(date, UserStore.getInstance().localeTimezone).format();
}
}
+1 -1
View File
@@ -38,7 +38,7 @@ export class ThemeStore extends Singleton {
}
@computed get activeThemeId(): string {
return UserStore.getInstance().preferences.colorTheme;
return UserStore.getInstance().colorTheme;
}
@computed get activeTheme(): Theme {