From 18ca0aab86fc198da3ad05ec23e62aabe413c828 Mon Sep 17 00:00:00 2001 From: Roman Date: Fri, 8 Oct 2021 15:59:41 +0300 Subject: [PATCH] fix: restore editor's model state (cursor pos, selection, etc.) on any dock tabs change Signed-off-by: Roman --- .../components/dock/create-resource.tsx | 47 ++++----- .../components/dock/dock-tab-content.scss | 26 +++++ .../components/dock/dock-tab-content.tsx | 58 +++++++++-- .../components/dock/dock-tab.store.ts | 1 + src/renderer/components/dock/dock.scss | 4 - src/renderer/components/dock/dock.store.ts | 1 + src/renderer/components/dock/dock.tsx | 7 +- .../components/dock/dock.views-manager.ts | 17 ++-- .../components/dock/edit-resource.store.ts | 23 +++-- .../components/dock/edit-resource.tsx | 57 +++-------- .../components/dock/install-chart.store.ts | 15 ++- .../components/dock/install-chart.tsx | 42 +++----- src/renderer/components/dock/logs.tsx | 8 +- .../components/dock/terminal-window.tsx | 25 +++-- .../components/dock/upgrade-chart.store.ts | 16 +-- .../components/dock/upgrade-chart.tsx | 99 +++++++------------ 16 files changed, 234 insertions(+), 212 deletions(-) create mode 100644 src/renderer/components/dock/dock-tab-content.scss diff --git a/src/renderer/components/dock/create-resource.tsx b/src/renderer/components/dock/create-resource.tsx index 135118dcd8..c4ea7f9202 100644 --- a/src/renderer/components/dock/create-resource.tsx +++ b/src/renderer/components/dock/create-resource.tsx @@ -23,17 +23,16 @@ import "./create-resource.scss"; import React from "react"; import { GroupSelectOption, Select, SelectOption } from "../select"; import jsYaml from "js-yaml"; -import { computed, makeObservable, observable } from "mobx"; +import { computed, makeObservable } from "mobx"; import { observer } from "mobx-react"; import { createResourceStore } from "./create-resource.store"; import { InfoPanel } from "./info-panel"; import { resourceApplierApi } from "../../../common/k8s-api/endpoints/resource-applier.api"; import type { JsonApiErrorParsed } from "../../../common/k8s-api/json-api"; import { Notifications } from "../notifications"; -import { DockTabContent, DockTabContentProps } from "./dock-tab-content"; import { TabKind } from "./dock.store"; +import type { DockTabContentProps } from "./dock-tab-content"; import { dockViewsManager } from "./dock.views-manager"; -import { MonacoEditor } from "../monaco-editor"; interface Props extends DockTabContentProps { } @@ -53,8 +52,6 @@ export class CreateResource extends React.Component { makeObservable(this); } - @observable error = ""; - get tabId() { return this.props.tab.id; } @@ -63,17 +60,10 @@ export class CreateResource extends React.Component { return createResourceStore.getData(this.tabId); } - onChange = (value: string) => { - createResourceStore.setData(this.tabId, value); - }; + create = async (): Promise => { + const isEmpty = !this.draft?.trim(); - onError = (error: string) => { - this.error = error; - }; - - create = async () => { - if (this.error || !this.draft) { - // do not save when field is empty or there is an error + if (!isEmpty) { return null; } @@ -145,29 +135,28 @@ export class CreateResource extends React.Component { }; render() { - const { tabId, draft, error, create, onChange, onError } = this; - return ( - +
- - +
); } } dockViewsManager.register(TabKind.CREATE_RESOURCE, { - tabContent: CreateResource, + Content: CreateResource, + editor: { + getValue(tabId) { + return createResourceStore.getData(tabId); + }, + setValue(tabId, value) { + createResourceStore.setData(tabId, value); + }, + } }); diff --git a/src/renderer/components/dock/dock-tab-content.scss b/src/renderer/components/dock/dock-tab-content.scss new file mode 100644 index 0000000000..8c2cf3e0df --- /dev/null +++ b/src/renderer/components/dock/dock-tab-content.scss @@ -0,0 +1,26 @@ +/** + * Copyright (c) 2021 OpenLens Authors + * + * Permission is hereby granted, free of charge, to any person obtaining a copy of + * this software and associated documentation files (the "Software"), to deal in + * the Software without restriction, including without limitation the rights to + * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of + * the Software, and to permit persons to whom the Software is furnished to do so, + * subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS + * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR + * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER + * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN + * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + */ + +.DockTabContent { + position: relative; + flex: 1; + height: 100%; +} diff --git a/src/renderer/components/dock/dock-tab-content.tsx b/src/renderer/components/dock/dock-tab-content.tsx index fe877fb832..b7c01f1cf0 100644 --- a/src/renderer/components/dock/dock-tab-content.tsx +++ b/src/renderer/components/dock/dock-tab-content.tsx @@ -19,23 +19,67 @@ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ +import "./dock-tab-content.scss"; import React from "react"; -import type { DockTab } from "./dock.store"; +import { observer } from "mobx-react"; +import { computed, makeObservable } from "mobx"; +import type { DockTab, TabId } from "./dock.store"; import { cssNames } from "../../utils"; +import { DockTabComponents, dockViewsManager } from "./dock.views-manager"; +import { MonacoEditor } from "../monaco-editor"; -export interface DockTabContentProps { +export interface DockTabContentProps extends React.HTMLAttributes { className?: string; tab: DockTab; - bindElemRef?(container: HTMLElement): void; + bindContainerRef?(elem: HTMLElement): void; } +@observer export class DockTabContent extends React.Component { - render() { - const { children: tabContent, bindElemRef, className } = this.props; + constructor(props: DockTabContentProps) { + super(props); + makeObservable(this); + } + + @computed get tabId(): TabId { + return this.props.tab.id; + } + + @computed get tabComponents(): DockTabComponents { + return dockViewsManager.get(this.props.tab.kind); + } + + /** + * Always keep editor in DOM while (while is open/rendered). + * This allows to restore editor's model-view state (cursor pos, selection, etc.) + * while switching between different tab.kind-s (e.g. "terminal" tab doesn't have editor) + */ + renderEditor() { + const { tabId } = this; + const { editor } = this.tabComponents; return ( -
- {tabContent} + editor?.setValue(tabId, value)} + onError={error => editor?.onError?.(tabId, error)} + /> + ); + } + + render() { + const { children: bottomContent, bindContainerRef, className, tab } = this.props; + + if (!tab) return null; + const { Content } = this.tabComponents; + + return ( +
+ {Content && } + {this.renderEditor()} + {bottomContent}
); } diff --git a/src/renderer/components/dock/dock-tab.store.ts b/src/renderer/components/dock/dock-tab.store.ts index d6d38ac8c9..e19db2adc0 100644 --- a/src/renderer/components/dock/dock-tab.store.ts +++ b/src/renderer/components/dock/dock-tab.store.ts @@ -77,6 +77,7 @@ export class DockTabStore { ]); } + @action protected init() { this.dataReady = true; diff --git a/src/renderer/components/dock/dock.scss b/src/renderer/components/dock/dock.scss index 4f76ae5530..d5b52c5fa7 100644 --- a/src/renderer/components/dock/dock.scss +++ b/src/renderer/components/dock/dock.scss @@ -81,8 +81,4 @@ bottom: 0; } } - - .MonacoEditor { - border: none; - } } diff --git a/src/renderer/components/dock/dock.store.ts b/src/renderer/components/dock/dock.store.ts index 17a9b2b140..94ecb9400d 100644 --- a/src/renderer/components/dock/dock.store.ts +++ b/src/renderer/components/dock/dock.store.ts @@ -216,6 +216,7 @@ export class DockStore implements DockStorageState { const { tabKind, dockIsVisible = true, ...reactionOpts } = options; return reaction(() => this.selectedTab, ((tab, prevTab) => { + if (!tab) return; // skip if (tabKind && tabKind !== tab.kind) return; if (dockIsVisible && !this.isOpen) return; diff --git a/src/renderer/components/dock/dock.tsx b/src/renderer/components/dock/dock.tsx index 1bbf505471..5d956433ae 100644 --- a/src/renderer/components/dock/dock.tsx +++ b/src/renderer/components/dock/dock.tsx @@ -31,7 +31,7 @@ import { createResourceTab } from "./create-resource.store"; import { DockTabs } from "./dock-tabs"; import { dockStore, DockTab } from "./dock.store"; import { createTerminalTab } from "./terminal.store"; -import { dockViewsManager } from "./dock.views-manager"; +import { DockTabContent } from "./dock-tab-content"; interface Props { className?: string; @@ -61,11 +61,10 @@ export class Dock extends React.Component { open(); selectTab(tab.id); }; - + render() { const { className } = this.props; const { isOpen, toggle, tabs, toggleFillSize, selectedTab, hasTabs, fullSize, height } = dockStore; - const DockTabContent = dockViewsManager.get(selectedTab?.kind)?.tabContent; return (
{
- {DockTabContent && } +
); diff --git a/src/renderer/components/dock/dock.views-manager.ts b/src/renderer/components/dock/dock.views-manager.ts index 8ac91168b2..acabe0ab30 100644 --- a/src/renderer/components/dock/dock.views-manager.ts +++ b/src/renderer/components/dock/dock.views-manager.ts @@ -21,23 +21,28 @@ import type React from "react"; import { observable } from "mobx"; -import type { TabKind } from "./dock.store"; +import type { TabId, TabKind } from "./dock.store"; import type { DockTabContentProps } from "./dock-tab-content"; -export interface DockViews { - tabContent?: React.ComponentType; +export interface DockTabComponents { + Content?: React.ComponentType; + editor?: { + getValue(tabId: TabId): string | undefined; + setValue(tabId: TabId, value: string): void; + onError?(tabId: TabId, error: string | Error): void; + } } -const dockViews = observable.map([], { +const dockViews = observable.map([], { deep: false, // mobx: don't try to modify react components }); export const dockViewsManager = { - get(tabKind: TabKind): DockViews { + get(tabKind: TabKind): DockTabComponents { return dockViews.get(tabKind) ?? {}; }, - register(tabKind: TabKind, views: DockViews) { + register(tabKind: TabKind, views: DockTabComponents) { const currentViews = this.get(tabKind); dockViews.set(tabKind, { ...currentViews, ...views }); diff --git a/src/renderer/components/dock/edit-resource.store.ts b/src/renderer/components/dock/edit-resource.store.ts index 1851faee60..4673221221 100644 --- a/src/renderer/components/dock/edit-resource.store.ts +++ b/src/renderer/components/dock/edit-resource.store.ts @@ -35,14 +35,23 @@ export interface EditingResource { export class EditResourceStore extends DockTabStore { constructor() { - super({ - storageKey: "edit_resource_store", - }); - autoBind(this); + super({ storageKey: "edit_resource_store" }); makeObservable(this); + autoBind(this); } - async loadResource(tabId: TabId) { + protected init() { + super.init(); + + this.dispose.push( + dockStore.onTabChange(({ tabId }) => editResourceStore.editResource(tabId), { + tabKind: TabKind.EDIT_RESOURCE, + fireImmediately: true, + }) + ); + } + + async editResource(tabId: TabId) { const store = this.getStore(tabId); const data = this.getData(tabId); let resource = this.getResource(tabId); @@ -51,9 +60,9 @@ export class EditResourceStore extends DockTabStore { try { resource ??= await store.loadFromPath(data.resource); - this.getData(tabId).draft = jsYaml.safeDump(resource.toPlainObject()); + data.draft ||= jsYaml.safeDump(resource.toPlainObject()); } catch (error) { - console.error(`[DOCK]: dump of resource "${data.resource}" failed: ${error}`); + console.error(`[DOCK]: dumping '${data.resource}' has failed: ${error}`, { store, data }); } } diff --git a/src/renderer/components/dock/edit-resource.tsx b/src/renderer/components/dock/edit-resource.tsx index cdecbfca9d..fdb6277d77 100644 --- a/src/renderer/components/dock/edit-resource.tsx +++ b/src/renderer/components/dock/edit-resource.tsx @@ -22,8 +22,7 @@ import "./edit-resource.scss"; import React from "react"; -import { action, autorun, makeObservable, observable } from "mobx"; -import { disposeOnUnmount, observer } from "mobx-react"; +import { observer } from "mobx-react"; import jsYaml from "js-yaml"; import { editResourceStore } from "./edit-resource.store"; import { InfoPanel } from "./info-panel"; @@ -31,27 +30,14 @@ import { Badge } from "../badge"; import { Spinner } from "../spinner"; import type { KubeObject } from "../../../common/k8s-api/kube-object"; import type { DockTabContentProps } from "./dock-tab-content"; -import { DockTabContent } from "./dock-tab-content"; import { TabKind } from "./dock.store"; import { dockViewsManager } from "./dock.views-manager"; -import { MonacoEditor } from "../monaco-editor"; interface Props extends DockTabContentProps { } @observer export class EditResource extends React.Component { - @observable error = ""; - - constructor(props: Props) { - super(props); - makeObservable(this); - - disposeOnUnmount(this, [ - autorun(() => editResourceStore.loadResource(this.tabId)), - ]); - } - get tabId() { return this.props.tab.id; } @@ -61,10 +47,9 @@ export class EditResource extends React.Component { } get draft(): string { - return editResourceStore.getData(this.tabId)?.draft ?? ""; + return editResourceStore.getData(this.tabId)?.draft; } - @action saveDraft(draft: string | object) { if (typeof draft === "object") { draft = draft ? jsYaml.safeDump(draft) : undefined; @@ -73,18 +58,7 @@ export class EditResource extends React.Component { editResourceStore.getData(this.tabId).draft = draft; } - onChange = (draft: string) => { - this.saveDraft(draft); - }; - - onError = (error: string) => { - this.error = error; - }; - save = async () => { - if (this.error) { - return null; - } const store = editResourceStore.getStore(this.tabId); const updatedResource: KubeObject = await store.update(this.resource, jsYaml.safeLoad(this.draft)); @@ -100,17 +74,16 @@ export class EditResource extends React.Component { }; render() { - if (!editResourceStore.dataReady || !this.resource) { + const { tabId, resource } = this; + + if (!editResourceStore.dataReady || !resource) { return ; } - const { tabId, error, draft, resource, onChange, onError } = this; - return ( - +
{
)} /> - - + ); } } dockViewsManager.register(TabKind.EDIT_RESOURCE, { - tabContent: EditResource, + Content: EditResource, + editor: { + getValue(tabId) { + return editResourceStore.getData(tabId).draft; + }, + setValue(tabId, value) { + editResourceStore.getData(tabId).draft = value; + }, + } }); diff --git a/src/renderer/components/dock/install-chart.store.ts b/src/renderer/components/dock/install-chart.store.ts index 2df3b0c467..0392a93b97 100644 --- a/src/renderer/components/dock/install-chart.store.ts +++ b/src/renderer/components/dock/install-chart.store.ts @@ -41,12 +41,21 @@ export class InstallChartStore extends DockTabStore { versions = observable.map(); constructor() { - super({ - storageKey: "install_charts" - }); + super({ storageKey: "install_charts" }); makeObservable(this); } + protected init() { + super.init(); + + this.dispose.push( + dockStore.onTabChange(({ tabId }) => this.loadData(tabId), { + tabKind: TabKind.INSTALL_CHART, + fireImmediately: true, + }), + ); + } + @action async loadData(tabId: TabId) { const promises = []; diff --git a/src/renderer/components/dock/install-chart.tsx b/src/renderer/components/dock/install-chart.tsx index 154077109b..6c6193a820 100644 --- a/src/renderer/components/dock/install-chart.tsx +++ b/src/renderer/components/dock/install-chart.tsx @@ -22,8 +22,8 @@ import "./install-chart.scss"; import React, { Component } from "react"; -import { autorun, computed, makeObservable, observable } from "mobx"; -import { disposeOnUnmount, observer } from "mobx-react"; +import { computed, makeObservable, observable } from "mobx"; +import { observer } from "mobx-react"; import { dockStore, TabKind } from "./dock.store"; import { InfoPanel } from "./info-panel"; import { Badge } from "../badge"; @@ -39,25 +39,19 @@ import { Select, SelectOption } from "../select"; import { Input } from "../input"; import { navigate } from "../../navigation"; import { releaseURL } from "../../../common/routes"; -import { DockTabContent, DockTabContentProps } from "./dock-tab-content"; +import type { DockTabContentProps } from "./dock-tab-content"; import { dockViewsManager } from "./dock.views-manager"; -import { MonacoEditor } from "../monaco-editor"; interface Props extends DockTabContentProps { } @observer export class InstallChart extends Component { - @observable error = ""; @observable showNotes = false; constructor(props: Props) { super(props); makeObservable(this); - - disposeOnUnmount(this, [ - autorun(() => installChartStore.loadData(this.tabId)), - ]); } get tabId() { @@ -105,14 +99,6 @@ export class InstallChart extends Component { installChartStore.loadValues(this.tabId); }; - onValuesChange = (values: string) => { - this.save({ values }); - }; - - onValuesError = (error: string) => { - this.error = error; - }; - onNamespaceChange = (opt: SelectOption) => { this.save({ namespace: opt.value }); }; @@ -176,6 +162,7 @@ export class InstallChart extends Component { const { tabId, chartData, install, versions } = this; const { repo, name, version, namespace, releaseName } = chartData; + const panelControls = (
Chart @@ -208,27 +195,28 @@ export class InstallChart extends Component { ); return ( - +
- - +
); } } dockViewsManager.register(TabKind.INSTALL_CHART, { - tabContent: InstallChart, + Content: InstallChart, + editor: { + getValue(tabId) { + return installChartStore.getData(tabId).values; + }, + setValue(tabId, value) { + installChartStore.getData(tabId).values = value; + }, + } }); diff --git a/src/renderer/components/dock/logs.tsx b/src/renderer/components/dock/logs.tsx index e57ccf0a7e..cac18bec63 100644 --- a/src/renderer/components/dock/logs.tsx +++ b/src/renderer/components/dock/logs.tsx @@ -32,9 +32,9 @@ import { logStore } from "./log.store"; import { LogSearch } from "./log-search"; import { LogControls } from "./log-controls"; import { LogTabData, logTabStore } from "./log-tab.store"; -import { DockTabContent, DockTabContentProps } from "./dock-tab-content"; import { TabKind } from "./dock.store"; import { dockViewsManager } from "./dock.views-manager"; +import type { DockTabContentProps } from "./dock-tab-content"; interface Props extends DockTabContentProps { } @@ -143,7 +143,7 @@ export class Logs extends React.Component { } return ( - +
{this.renderResourceSelector(data)} { save={newData => logTabStore.setData(this.tabId, { ...data, ...newData })} reload={this.reload} /> - +
); } } dockViewsManager.register(TabKind.POD_LOGS, { - tabContent: Logs, + Content: Logs, }); diff --git a/src/renderer/components/dock/terminal-window.tsx b/src/renderer/components/dock/terminal-window.tsx index e07d9d800c..8261086509 100644 --- a/src/renderer/components/dock/terminal-window.tsx +++ b/src/renderer/components/dock/terminal-window.tsx @@ -22,15 +22,14 @@ import "./terminal-window.scss"; import React from "react"; -import { reaction } from "mobx"; import { disposeOnUnmount, observer } from "mobx-react"; import { cssNames } from "../../utils"; import type { Terminal } from "./terminal"; -import { terminalStore } from "./terminal.store"; +import { TerminalStore } from "./terminal.store"; import { ThemeStore } from "../../theme.store"; -import { DockTabContent, DockTabContentProps } from "./dock-tab-content"; -import { TabKind } from "./dock.store"; +import { dockStore, TabId, TabKind } from "./dock.store"; import { dockViewsManager } from "./dock.views-manager"; +import type { DockTabContentProps } from "./dock-tab-content"; interface Props extends DockTabContentProps { } @@ -42,29 +41,29 @@ export class TerminalWindow extends React.Component { componentDidMount() { disposeOnUnmount(this, [ - reaction(() => this.props.tab.id, tabId => this.activate(tabId), { - fireImmediately: true - }) + dockStore.onTabChange(({ tabId }) => this.activate(tabId), { + tabKind: TabKind.TERMINAL, + fireImmediately: true, + }), ]); } - activate(tabId = this.props.tab.id) { + activate(tabId: TabId = dockStore.selectedTabId) { if (this.terminal) this.terminal.detach(); // detach previous - this.terminal = terminalStore.getTerminal(tabId); + this.terminal = TerminalStore.getInstance().getTerminal(tabId); this.terminal.attachTo(this.elem); } render() { return ( - this.elem = elem} + ref={elem => this.elem = elem} /> ); } } dockViewsManager.register(TabKind.TERMINAL, { - tabContent: TerminalWindow, + Content: TerminalWindow, }); diff --git a/src/renderer/components/dock/upgrade-chart.store.ts b/src/renderer/components/dock/upgrade-chart.store.ts index 5ee6fa1416..f22453e5d3 100644 --- a/src/renderer/components/dock/upgrade-chart.store.ts +++ b/src/renderer/components/dock/upgrade-chart.store.ts @@ -37,16 +37,20 @@ export class UpgradeChartStore extends DockTabStore { public versions = observable.array(); constructor() { - super({ - storageKey: "chart_releases" - }); - + super({ storageKey: "chart_releases" }); makeObservable(this); } - protected init() { + protected async init() { super.init(); - releaseStore.loadFromContextNamespaces(); + await releaseStore.loadFromContextNamespaces(); + + this.dispose.push( + dockStore.onTabChange(({ tabId }) => this.loadData(tabId), { + tabKind: TabKind.UPGRADE_CHART, + fireImmediately: true, + }), + ); } hasValues(tabId: TabId) { diff --git a/src/renderer/components/dock/upgrade-chart.tsx b/src/renderer/components/dock/upgrade-chart.tsx index 6e43caf41b..1decb75ca5 100644 --- a/src/renderer/components/dock/upgrade-chart.tsx +++ b/src/renderer/components/dock/upgrade-chart.tsx @@ -22,38 +22,32 @@ import "./upgrade-chart.scss"; import React from "react"; -import { autorun, computed, makeObservable, observable } from "mobx"; -import { disposeOnUnmount, observer } from "mobx-react"; +import { computed, makeObservable, observable } from "mobx"; +import { observer } from "mobx-react"; import { InfoPanel } from "./info-panel"; import { upgradeChartStore } from "./upgrade-chart.store"; -import { Spinner } from "../spinner"; import { releaseStore } from "../+apps-releases/release.store"; import { Badge } from "../badge"; import { Select, SelectOption } from "../select"; import type { IChartVersion } from "../+apps-helm-charts/helm-chart.store"; import type { HelmRelease } from "../../../common/k8s-api/endpoints/helm-releases.api"; -import { DockTabContent, DockTabContentProps } from "./dock-tab-content"; +import type { DockTabContentProps } from "./dock-tab-content"; import { TabKind } from "./dock.store"; import { dockViewsManager } from "./dock.views-manager"; -import { MonacoEditor } from "../monaco-editor"; +import { Spinner } from "../spinner"; interface Props extends DockTabContentProps { } @observer export class UpgradeChart extends React.Component { - @observable error: string; - @observable selectedVersion: IChartVersion; - constructor(props: Props) { super(props); makeObservable(this); - - disposeOnUnmount(this, [ - autorun(() => upgradeChartStore.loadData(this.tabId)), - ]); } + @observable selectedVersion: IChartVersion; + get tabId() { return this.props.tab.id; } @@ -62,15 +56,7 @@ export class UpgradeChart extends React.Component { return upgradeChartStore.getRelease(this.tabId); } - get isReady() { - return [ - upgradeChartStore.dataReady, - this.release, - this.selectedVersion, - ].every(Boolean); - } - - @computed get versionOptions(): SelectOption[] { + @computed get versions(): SelectOption[] { return upgradeChartStore.versions.map(version => ({ value: version })); } @@ -78,16 +64,7 @@ export class UpgradeChart extends React.Component { return upgradeChartStore.values.get(this.tabId); } - onChange = (value: string) => { - upgradeChartStore.values.set(this.tabId, value); - }; - - onError = (error: string) => { - this.error = error; - }; - upgrade = async () => { - if (this.error) return null; const { version, repo } = this.selectedVersion; const releaseName = this.release.getName(); const releaseNs = this.release.getNs(); @@ -113,52 +90,52 @@ export class UpgradeChart extends React.Component { }; render() { - if (!this.isReady) { + const { tabId, release, versions, selectedVersion } = this; + + if (!release) { return ; } - const { tabId, release, value, error, versionOptions, selectedVersion, onChange, onError } = this; const currentVersion = release.getVersion(); - const controlsAndInfo = ( -
- Release - Namespace - Version - Upgrade version - ) => this.selectedVersion = value} + /> +
+ } /> - - +
); } } dockViewsManager.register(TabKind.UPGRADE_CHART, { - tabContent: UpgradeChart, + Content: UpgradeChart, + editor: { + getValue(tabId): string { + return upgradeChartStore.values.get(tabId); + }, + setValue(tabId, value) { + upgradeChartStore.values.set(tabId, value); + }, + } });