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

Merge remote-tracking branch 'origin/master' into mobx-6.2

Browse Source 
# Conflicts:
#	src/common/user-store.ts
#	src/renderer/components/hotbar/hotbar-icon.tsx
This commit is contained in:
Roman 2021-04-28 14:28:37 +03:00
commit 170412a2c4
28 changed files with 357 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.azure-pipelines.yml
View File

@ -40,7 +40,7 @@ jobs:
git clone "https://${GH_TOKEN}@github.com/lensapp/lens-ide.git" .lens-ide-overlay
rm -rf .lens-ide-overlay/.git
cp -r .lens-ide-overlay/* ./
cp build/package.json.patch . && patch package.json package.json.patch
jq -s '.[0] * .[1]' package.json package.ide.json > package.custom.json && mv package.custom.json package.json
displayName: Customize config
env:
GH_TOKEN: $(LENS_IDE_GH_TOKEN)
@ -90,7 +90,7 @@ jobs:
git clone "https://${GH_TOKEN}@github.com/lensapp/lens-ide.git" .lens-ide-overlay
rm -rf .lens-ide-overlay/.git
cp -r .lens-ide-overlay/* ./
cp build/package.json.patch . && patch package.json package.json.patch
jq -s '.[0] * .[1]' package.json package.ide.json > package.custom.json && mv package.custom.json package.json
displayName: Customize config
env:
GH_TOKEN: $(LENS_IDE_GH_TOKEN)
@ -142,7 +142,7 @@ jobs:
git clone "https://${GH_TOKEN}@github.com/lensapp/lens-ide.git" .lens-ide-overlay
rm -rf .lens-ide-overlay/.git
cp -r .lens-ide-overlay/* ./
cp build/package.json.patch . && patch package.json package.json.patch
jq -s '.[0] * .[1]' package.json package.ide.json > package.custom.json && mv package.custom.json package.json
displayName: Customize config
env:
GH_TOKEN: $(LENS_IDE_GH_TOKEN)

2
package.json
View File

@ -2,7 +2,7 @@
"name": "open-lens",
"productName": "OpenLens",
"description": "OpenLens - Open Source IDE for Kubernetes",
"version": "5.0.0-alpha.3",
"version": "5.0.0-alpha.4",
"main": "static/build/main.js",
"copyright": "© 2021 OpenLens Authors",
"license": "MIT",

14
src/common/__tests__/user-store.test.ts
View File

@ -60,13 +60,13 @@ describe("user store tests", () => {
it("allows setting and getting preferences", () => {
const us = UserStore.getInstance();
us.preferences.httpsProxy = "abcd://defg";
us.httpsProxy = "abcd://defg";
expect(us.preferences.httpsProxy).toBe("abcd://defg");
expect(us.preferences.colorTheme).toBe(UserStore.defaultTheme);
expect(us.httpsProxy).toBe("abcd://defg");
expect(us.colorTheme).toBe(UserStore.defaultTheme);
us.preferences.colorTheme = "light";
expect(us.preferences.colorTheme).toBe("light");
us.colorTheme = "light";
expect(us.colorTheme).toBe("light");
});
it("correctly resets theme to default value", async () => {
@ -74,9 +74,9 @@ describe("user store tests", () => {
us.isLoaded = true;
us.preferences.colorTheme = "some other theme";
us.colorTheme = "some other theme";
await us.resetTheme();
expect(us.preferences.colorTheme).toBe(UserStore.defaultTheme);
expect(us.colorTheme).toBe(UserStore.defaultTheme);
});
it("correctly calculates if the last seen version is an old release", () => {

2
src/common/request.ts
View File

@ -6,7 +6,7 @@ import { UserStore } from "./user-store";
// https://github.com/lensapp/lens/issues/459
function getDefaultRequestOpts(): Partial<request.Options> {
const { httpsProxy, allowUntrustedCAs } = UserStore.getInstance().preferences;
const { httpsProxy, allowUntrustedCAs } = UserStore.getInstance();
return {
proxy: httpsProxy || undefined,

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

@ -2,24 +2,26 @@ import type { ThemeId } from "../renderer/theme.store";
import { app, remote } from "electron";
import semver from "semver";
import { readFile } from "fs-extra";
import { action, computed, makeObservable, observable, reaction } from "mobx";
import { action, computed, observable, reaction, makeObservable } from "mobx";
import moment from "moment-timezone";
import { BaseStore } from "./base-store";
import migrations, { fileNameMigration } from "../migrations/user-store";
import migrations from "../migrations/user-store";
import { getAppVersion, toJS } from "./utils";
import { kubeConfigDefaultPath, loadConfig } from "./kube-helpers";
import { appEventBus } from "./event-bus";
import logger from "../main/logger";
import path from "path";
import { fileNameMigration } from "../migrations/user-store";
import { ObservableToggleSet } from "../renderer/utils";
export interface UserStoreModel {
kubeConfigPath: string;
lastSeenAppVersion: string;
seenContexts: string[];
preferences: UserPreferences;
preferences: UserPreferencesModel;
}
export interface UserPreferences {
export interface UserPreferencesModel {
httpsProxy?: string;
shell?: string;
colorTheme?: string;
@ -31,7 +33,7 @@ export interface UserPreferences {
downloadBinariesPath?: string;
kubectlBinariesPath?: string;
openAtLogin?: boolean;
hiddenTableColumns?: Record<string, string[]>;
hiddenTableColumns?: [string, string[]][];
}
export class UserStore extends BaseStore<UserStoreModel> {
@ -44,25 +46,33 @@ export class UserStore extends BaseStore<UserStoreModel> {
});
makeObservable(this);
this.handleOnLoad();
}
@observable lastSeenAppVersion = "0.0.0";
@observable kubeConfigPath = kubeConfigDefaultPath; // used in add-cluster page for providing context
/**
* used in add-cluster page for providing context
*/
@observable kubeConfigPath = kubeConfigDefaultPath;
@observable seenContexts = observable.set<string>();
@observable newContexts = observable.set<string>();
@observable allowTelemetry = true;
@observable allowUntrustedCAs = false;
@observable colorTheme = UserStore.defaultTheme;
@observable localeTimezone = moment.tz.guess(true) || "UTC";
@observable downloadMirror = "default";
@observable httpsProxy?: string;
@observable shell?: string;
@observable downloadBinariesPath?: string;
@observable kubectlBinariesPath?: string;
@observable preferences: UserPreferences = {
allowTelemetry: true,
allowUntrustedCAs: false,
colorTheme: UserStore.defaultTheme,
localeTimezone: moment.tz.guess(true) || "UTC",
downloadMirror: "default",
downloadKubectlBinaries: true, // Download kubectl binaries matching cluster version
openAtLogin: false,
hiddenTableColumns: {},
};
/**
* Download kubectl binaries matching cluster version
*/
@observable downloadKubectlBinaries = true;
@observable openAtLogin = false;
hiddenTableColumns = observable.map<string, ObservableToggleSet<string>>();
protected async handleOnLoad() {
await this.whenLoaded;
@ -73,12 +83,12 @@ export class UserStore extends BaseStore<UserStoreModel> {
if (app) {
// track telemetry availability
reaction(() => this.preferences.allowTelemetry, allowed => {
reaction(() => this.allowTelemetry, allowed => {
appEventBus.emit({ name: "telemetry", action: allowed ? "enabled" : "disabled" });
});
// open at system start-up
reaction(() => this.preferences.openAtLogin, openAtLogin => {
reaction(() => this.openAtLogin, openAtLogin => {
app.setLoginItemSettings({
openAtLogin,
openAsHidden: true,
@ -100,17 +110,40 @@ export class UserStore extends BaseStore<UserStoreModel> {
return super.load();
}
get isNewVersion() {
@computed get isNewVersion() {
return semver.gt(getAppVersion(), this.lastSeenAppVersion);
}
@action
setHiddenTableColumns(tableId: string, names: Set<string> | string[]) {
this.preferences.hiddenTableColumns[tableId] = Array.from(names);
@computed get resolvedShell(): string | undefined {
return this.shell || process.env.SHELL || process.env.PTYSHELL;
}
getHiddenTableColumns(tableId: string): Set<string> {
return new Set(this.preferences.hiddenTableColumns[tableId]);
/**
* Checks if a column (by ID) for a table (by ID) is configured to be hidden
* @param tableId The ID of the table to be checked against
* @param columnIds The list of IDs the check if one is hidden
* @returns true if at least one column under the table is set to hidden
*/
isTableColumnHidden(tableId: string, ...columnIds: string[]): boolean {
if (columnIds.length === 0) {
return true;
}
const config = this.hiddenTableColumns.get(tableId);
if (!config) {
return true;
}
return columnIds.some(columnId => config.has(columnId));
}
@action
/**
* Toggles the hidden configuration of a table's column
*/
toggleTableColumnVisibility(tableId: string, columnId: string) {
this.hiddenTableColumns.get(tableId)?.toggle(columnId);
}
@action
@ -125,7 +158,7 @@ export class UserStore extends BaseStore<UserStoreModel> {
@action
async resetTheme() {
await this.whenLoaded;
this.preferences.colorTheme = UserStore.defaultTheme;
this.colorTheme = UserStore.defaultTheme;
}
@action
@ -136,7 +169,7 @@ export class UserStore extends BaseStore<UserStoreModel> {
@action
setLocaleTimezone(tz: string) {
this.preferences.localeTimezone = tz;
this.localeTimezone = tz;
}
protected refreshNewContexts = async () => {
@ -176,16 +209,58 @@ export class UserStore extends BaseStore<UserStoreModel> {
this.kubeConfigPath = kubeConfigPath;
}
this.seenContexts.replace(seenContexts);
Object.assign(this.preferences, preferences);
if (!preferences) {
return;
}
this.httpsProxy = preferences.httpsProxy;
this.shell = preferences.shell;
this.colorTheme = preferences.colorTheme;
this.localeTimezone = preferences.localeTimezone;
this.allowUntrustedCAs = preferences.allowUntrustedCAs;
this.allowTelemetry = preferences.allowTelemetry;
this.downloadMirror = preferences.downloadMirror;
this.downloadKubectlBinaries = preferences.downloadKubectlBinaries;
this.downloadBinariesPath = preferences.downloadBinariesPath;
this.kubectlBinariesPath = preferences.kubectlBinariesPath;
this.openAtLogin = preferences.openAtLogin;
this.hiddenTableColumns.clear();
for (const [tableId, columnIds] of preferences.hiddenTableColumns ?? []) {
this.hiddenTableColumns.set(tableId, new ObservableToggleSet(columnIds));
}
}
toJSON(): UserStoreModel {
return toJS({
const hiddenTableColumns: [string, string[]][] = [];
for (const [key, values] of this.hiddenTableColumns.entries()) {
hiddenTableColumns.push([key, Array.from(values)]);
}
const model: UserStoreModel = {
kubeConfigPath: this.kubeConfigPath,
lastSeenAppVersion: this.lastSeenAppVersion,
seenContexts: Array.from(this.seenContexts),
preferences: this.preferences,
});
preferences: {
httpsProxy: this.httpsProxy,
shell: this.shell,
colorTheme: this.colorTheme,
localeTimezone: this.localeTimezone,
allowUntrustedCAs: this.allowUntrustedCAs,
allowTelemetry: this.allowTelemetry,
downloadMirror: this.downloadMirror,
downloadKubectlBinaries: this.downloadKubectlBinaries,
downloadBinariesPath: this.downloadBinariesPath,
kubectlBinariesPath: this.kubectlBinariesPath,
openAtLogin: this.openAtLogin,
hiddenTableColumns,
},
};
return toJS(model);
}
}

15
src/common/utils/index.ts
View File

@ -8,19 +8,20 @@ export * from "./base64";
export * from "./camelCase";
export * from "./toJS";
export * from "./cloneJson";
export * from "./delay";
export * from "./debouncePromise";
export * from "./defineGlobal";
export * from "./getRandId";
export * from "./splitArray";
export * from "./saveToAppFiles";
export * from "./singleton";
export * from "./openExternal";
export * from "./delay";
export * from "./disposer";
export * from "./downloadFile";
export * from "./escapeRegExp";
export * from "./getRandId";
export * from "./openExternal";
export * from "./saveToAppFiles";
export * from "./singleton";
export * from "./splitArray";
export * from "./tar";
export * from "./toggle-set";
export * from "./type-narrowing";
export * from "./disposer";
import * as iter from "./iter";

20
src/common/utils/toggle-set.ts Normal file
View File

@ -0,0 +1,20 @@
import { action, ObservableSet } from "mobx";
export class ToggleSet<T> extends Set<T> {
public toggle(value: T): void {
if (!this.delete(value)) {
// Set.prototype.delete returns false if `value` was not in the set
this.add(value);
}
}
}
export class ObservableToggleSet<T> extends ObservableSet<T> {
@action
public toggle(value: T): void {
if (!this.delete(value)) {
// Set.prototype.delete returns false if `value` was not in the set
this.add(value);
}
}
}

14
src/main/kubectl.ts
View File

@ -113,12 +113,12 @@ export class Kubectl {
}
public getPathFromPreferences() {
return UserStore.getInstance().preferences?.kubectlBinariesPath || this.getBundledPath();
return UserStore.getInstance().kubectlBinariesPath || this.getBundledPath();
}
protected getDownloadDir() {
if (UserStore.getInstance().preferences?.downloadBinariesPath) {
return path.join(UserStore.getInstance().preferences.downloadBinariesPath, "kubectl");
if (UserStore.getInstance().downloadBinariesPath) {
return path.join(UserStore.getInstance().downloadBinariesPath, "kubectl");
}
return Kubectl.kubectlDir;
@ -129,7 +129,7 @@ export class Kubectl {
return this.getBundledPath();
}
if (UserStore.getInstance().preferences?.downloadKubectlBinaries === false) {
if (UserStore.getInstance().downloadKubectlBinaries === false) {
return this.getPathFromPreferences();
}
@ -223,7 +223,7 @@ export class Kubectl {
}
public async ensureKubectl(): Promise<boolean> {
if (UserStore.getInstance().preferences?.downloadKubectlBinaries === false) {
if (UserStore.getInstance().downloadKubectlBinaries === false) {
return true;
}
@ -303,7 +303,7 @@ export class Kubectl {
}
protected async writeInitScripts() {
const kubectlPath = UserStore.getInstance().preferences?.downloadKubectlBinaries ? this.dirname : path.dirname(this.getPathFromPreferences());
const kubectlPath = UserStore.getInstance().downloadKubectlBinaries ? this.dirname : path.dirname(this.getPathFromPreferences());
const helmPath = helmCli.getBinaryDir();
const fsPromises = fs.promises;
const bashScriptPath = path.join(this.dirname, ".bash_set_path");
@ -361,7 +361,7 @@ export class Kubectl {
}
protected getDownloadMirror() {
const mirror = packageMirrors.get(UserStore.getInstance().preferences?.downloadMirror);
const mirror = packageMirrors.get(UserStore.getInstance().downloadMirror);
if (mirror) {
return mirror;

4
src/main/shell-session/local-shell-session.ts
View File

@ -21,8 +21,8 @@ export class LocalShellSession extends ShellSession {
protected async getShellArgs(shell: string): Promise<string[]> {
const helmpath = helmCli.getBinaryDir();
const pathFromPreferences = UserStore.getInstance().preferences.kubectlBinariesPath || this.kubectl.getBundledPath();
const kubectlPathDir = UserStore.getInstance().preferences.downloadKubectlBinaries ? await this.kubectlBinDirP : path.dirname(pathFromPreferences);
const pathFromPreferences = UserStore.getInstance().kubectlBinariesPath || this.kubectl.getBundledPath();
const kubectlPathDir = UserStore.getInstance().downloadKubectlBinaries ? await this.kubectlBinDirP : path.dirname(pathFromPreferences);
switch(path.basename(shell)) {
case "powershell.exe":

4
src/main/shell-session/shell-session.ts
View File

@ -119,7 +119,7 @@ export abstract class ShellSession {
protected async getShellEnv() {
const env = clearKubeconfigEnvVars(JSON.parse(JSON.stringify(await shellEnv())));
const pathStr = [...this.getPathEntries(), await this.kubectlBinDirP, process.env.PATH].join(path.delimiter);
const shell = UserStore.getInstance().preferences.shell || process.env.SHELL || process.env.PTYSHELL;
const shell = UserStore.getInstance().resolvedShell;
delete env.DEBUG; // don't pass DEBUG into shells
@ -143,7 +143,7 @@ export abstract class ShellSession {
if (path.basename(env.PTYSHELL) === "zsh") {
env.OLD_ZDOTDIR = env.ZDOTDIR || env.HOME;
env.ZDOTDIR = this.kubectlBinDirP;
env.ZDOTDIR = await this.kubectlBinDirP;
env.DISABLE_AUTO_UPDATE = "true";
}

18
src/migrations/user-store/5.0.0-alpha.3.ts Normal file
View File

@ -0,0 +1,18 @@
// Switch representation of hiddenTableColumns in store
import { migration } from "../migration-wrapper";
export default migration({
version: "5.0.0-alpha.3",
run(store) {
const preferences = store.get("preferences");
const oldHiddenTableColumns: Record<string, string[]> = preferences?.hiddenTableColumns;
if (!oldHiddenTableColumns) {
return;
}
preferences.hiddenTableColumns = Object.entries(oldHiddenTableColumns);
store.set("preferences", preferences);
}
});

2
src/migrations/user-store/index.ts
View File

@ -1,6 +1,7 @@
// User store migrations
import version210Beta4 from "./2.1.0-beta.4";
import version500Alpha3 from "./5.0.0-alpha.3";
import { fileNameMigration } from "./file-name-migration";
export {
@ -9,4 +10,5 @@ export {
export default {
...version210Beta4,
...version500Alpha3,
};

15
src/renderer/components/+catalog/catalog-add-button.scss
View File

@ -5,5 +5,20 @@
.MuiFab-primary {
background-color: var(--blue);
&:hover {
background-color: #317bb3;
}
}
}
.MuiTooltip-popper {
.MuiTooltip-tooltip {
background-color: #222;
font-size: 12px
}
.MuiTooltip-arrow {
color: #222;
}
}

8
src/renderer/components/+catalog/catalog-add-button.tsx
View File

@ -50,6 +50,13 @@ export class CatalogAddButton extends React.Component<CatalogAddButtonProps> {
this.isOpen = false;
}
@autobind()
onButtonClick() {
if (this.menuItems.length == 1) {
this.menuItems[0].onClick();
}
}
render() {
if (this.menuItems.length === 0) {
return null;
@ -64,6 +71,7 @@ export class CatalogAddButton extends React.Component<CatalogAddButtonProps> {
onClose={this.onClose}
icon={<Icon material="add"/>}
direction="up"
onClick={this.onButtonClick}
>
{this.menuItems.map((menuItem, index) => {
return <SpeedDialAction

29
src/renderer/components/+preferences/kubectl-binaries.tsx
View File

@ -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>
</>

25
src/renderer/components/+preferences/preferences.tsx
View File

@ -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;
constructor(props: object) {
@ -105,7 +105,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
|| (
@ -128,8 +127,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>
@ -143,7 +142,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>
@ -154,8 +153,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"
/>
}
@ -169,7 +168,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"
/>
@ -186,7 +185,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.
@ -200,8 +199,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"
/>
}
@ -220,7 +219,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">

2
src/renderer/components/animate/animate.scss vendored
View File

@ -63,6 +63,6 @@
}
&.opacity-scale {
@include animate-opacity-scale;
@include animate-opacity-scale(100ms);
}
}

81
src/renderer/components/command-palette/command-container.scss
View File

@ -1,11 +1,86 @@
#command-container {
position: absolute;
top: 20px;
width: 40%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
padding: 10px;
background-color: var(--dockInfoBackground);
background-color: var(--layoutBackground);
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 16px 70px;
max-width: 640px;
color: var(--settingsColor);
transition: all 0.3s;
.Input {
label {
caret-color: var(--blue);
color: var(--settingsColor);
background: transparent;
border: 0;
font-size: 18px;
padding: 15px 19px;
border-bottom: 1px solid var(--borderFaintColor);
&:focus {
box-shadow: none;
}
}
}
.hint {
padding: 8px;
display: block;
}
.errors {
padding: 8px;
}
.Select__menu {
position: relative;
}
.Select__control {
padding: var(--padding);
box-shadow: none;
border-bottom: 1px solid var(--borderFaintColor);
caret-color: var(--blue);
font-size: 18px;
&:focus {
box-shadow: none;
}
}
.Select__menu {
box-shadow: none;
background: transparent;
margin: 0;
}
.Select__menu-list {
padding: 0;
}
.Select__option {
background-color: transparent;
padding: 10px 18px;
&:hover {
background-color: var(--menuSelectedOptionBgc);
border-left: 4px solid var(--blue);
padding-left: 14px;
}
&.Select__option--is-focused {
background-color: var(--menuSelectedOptionBgc);
border-left: 4px solid var(--blue);
padding-left: 14px;
}
}
.Select__menu-notice--no-options {
padding: 12px;
}
}

2
src/renderer/components/command-palette/command-container.tsx
View File

@ -78,7 +78,7 @@ export class CommandContainer extends React.Component<{ clusterId?: string }> {
render() {
return (
<Dialog isOpen={!!this.commandComponent} animated={false} onClose={() => this.commandComponent = null}>
<Dialog isOpen={!!this.commandComponent} animated={true} onClose={() => this.commandComponent = null} modal={false}>
<div id="command-container">
{this.commandComponent}
</div>

3
src/renderer/components/command-palette/command-dialog.tsx
View File

@ -75,6 +75,7 @@ export class CommandDialog extends React.Component {
render() {
return (
<Select
menuPortalTarget={null}
onChange={(v) => this.onChange(v.value)}
components={{ DropdownIndicator: null, IndicatorSeparator: null }}
menuIsOpen={this.menuIsOpen}
@ -82,7 +83,7 @@ export class CommandDialog extends React.Component {
autoFocus={true}
escapeClearsValue={false}
data-test-id="command-palette-search"
placeholder="" />
placeholder="Type a command or search&hellip;" />
);
}
}

3
src/renderer/components/dock/log-list.tsx
View File

@ -86,7 +86,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;
@ -94,7 +93,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}`));
}
/**

23
src/renderer/components/hotbar/hotbar-icon.scss
View File

@ -24,6 +24,23 @@
}
}
> .led {
position: absolute;
left: 3px;
top: 3px;
background-color: var(--layoutBackground);
border: 1px solid var(--clusterMenuBackground);
border-radius: 50%;
padding: 0px;
width: 8px;
height: 8px;
&.online {
background-color: var(--primary);
box-shadow: 0 0 5px var(--clusterMenuBackground), 0 0 5px var(--primary);
}
}
.badge {
position: absolute;
right: -2px;
@ -34,14 +51,10 @@
color: white;
padding: 0px;
border-radius: 50%;
border: 3px solid var(--clusterMenuBackground);
border: 2px solid var(--clusterMenuBackground);
width: 15px;
height: 15px;
&.online {
background-color: #44b700;
}
svg {
width: 13px;
}

9
src/renderer/components/hotbar/hotbar-icon.tsx
View File

@ -74,7 +74,7 @@ export class HotbarIcon extends React.Component<Props> {
}
get kindIcon() {
const className = cssNames("badge", { online: this.props.entity.status.phase == "connected"});
const className = "badge";
const category = catalogCategoryRegistry.getCategoryForEntity(this.props.entity);
if (!category) {
@ -88,6 +88,12 @@ export class HotbarIcon extends React.Component<Props> {
}
}
get ledIcon() {
const className = cssNames("led", { online: this.props.entity.status.phase == "connected"}); // TODO: make it more generic
return <div className={className} />;
}
toggleMenu() {
this.menuOpen = !this.menuOpen;
}
@ -149,6 +155,7 @@ export class HotbarIcon extends React.Component<Props> {
>
{this.iconString}
</Avatar>
{this.ledIcon }
{this.kindIcon}
<Menu
usePortal

1
src/renderer/components/hotbar/hotbar-remove-command.tsx
View File

@ -50,6 +50,7 @@ export class HotbarRemoveCommand extends React.Component {
render() {
return (
<Select
menuPortalTarget={null}
onChange={(v) => this.onChange(v.value)}
components={{ DropdownIndicator: null, IndicatorSeparator: null }}
menuIsOpen={true}

1
src/renderer/components/hotbar/hotbar-switch-command.tsx
View File

@ -51,6 +51,7 @@ export class HotbarSwitchCommand extends React.Component {
render() {
return (
<Select
menuPortalTarget={null}
onChange={(v) => this.onChange(v.value)}
components={{ DropdownIndicator: null, IndicatorSeparator: null }}
menuIsOpen={true}

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

@ -6,7 +6,7 @@ import { computed, makeObservable } 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";
@ -122,6 +122,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();
@ -256,7 +260,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} />;
}
})
@ -425,11 +429,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>
@ -473,34 +477,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}>
@ -509,8 +493,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>
)

3
src/renderer/components/locale-date/locale-date.tsx
View File

@ -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();
}
}

2
src/renderer/theme.store.ts
View File

@ -37,7 +37,7 @@ export class ThemeStore extends Singleton {
}
@computed get activeThemeId(): string {
return UserStore.getInstance().preferences.colorTheme;
return UserStore.getInstance().colorTheme;
}
@computed get activeTheme(): Theme {