mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Flatten user preferences in user store (#2587)
Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
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">
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user