fix: restore editor's model state (cursor pos, selection, etc.) on any dock tabs change

Signed-off-by: Roman <ixrock@gmail.com>

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<Props> {
     makeObservable(this);
   }
 
-  @observable error = "";
-
   get tabId() {
     return this.props.tab.id;
   }
@@ -63,17 +60,10 @@ export class CreateResource extends React.Component<Props> {
     return createResourceStore.getData(this.tabId);
   }
 
-  onChange = (value: string) => {
+  create = async (): Promise<any> => {
-    createResourceStore.setData(this.tabId, value);
+    const isEmpty = !this.draft?.trim();
-  };
 
-  onError = (error: string) => {
+    if (!isEmpty) {
-    this.error = error;
-  };
-
-  create = async () => {
-    if (this.error || !this.draft) {
-      // do not save when field is empty or there is an error
       return null;
     }
 
@@ -145,29 +135,28 @@ export class CreateResource extends React.Component<Props> {
   };
 
   render() {
-    const { tabId, draft, error, create, onChange, onError } = this;
-
     return (
-      <DockTabContent className="CreateResource" {...this.props}>
+      <div className="CreateResource">
         <InfoPanel
-          tabId={tabId}
+          tabId={this.tabId}
-          error={error}
           controls={this.renderControls()}
-          submit={create}
+          submit={this.create}
           submitLabel="Create"
           showNotifications={false}
         />
-        <MonacoEditor
+      </div>
-          id={tabId}
-          value={draft}
-          onChange={onChange}
-          onError={onError}
-        />
-      </DockTabContent>
     );
   }
 }
 
 dockViewsManager.register(TabKind.CREATE_RESOURCE, {
-  tabContent: CreateResource,
+  Content: CreateResource,
+  editor: {
+    getValue(tabId) {
+      return createResourceStore.getData(tabId);
+    },
+    setValue(tabId, value) {
+      createResourceStore.setData(tabId, value);
+    },
+  }
 });

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%;
+}

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<any> {
   className?: string;
   tab: DockTab;
-  bindElemRef?(container: HTMLElement): void;
+  bindContainerRef?(elem: HTMLElement): void;
 }
 
+@observer
 export class DockTabContent extends React.Component<DockTabContentProps> {
-  render() {
+  constructor(props: DockTabContentProps) {
-    const { children: tabContent, bindElemRef, className } = this.props;
+    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 <Dock/> 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 (
-      <div className={cssNames("DockTabContent flex column", className)} ref={bindElemRef}>
+      <MonacoEditor
-        {tabContent}
+        id={tabId}
+        className={cssNames({ hidden: !editor })}
+        value={editor?.getValue(tabId)}
+        onChange={value => 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 (
+      <div className={cssNames("DockTabContent flex column", className)} ref={bindContainerRef}>
+        {Content && <Content {...this.props}/>}
+        {this.renderEditor()}
+        {bottomContent}
       </div>
     );
   }

src/renderer/components/dock/dock-tab.store.ts

@@ -77,6 +77,7 @@ export class DockTabStore<T extends {}> {
     ]);
   }
 
+  @action
   protected init() {
     this.dataReady = true;
 

src/renderer/components/dock/dock.scss

@@ -81,8 +81,4 @@
       bottom: 0;
     }
   }
-
-  .MonacoEditor {
-    border: none;
-  }
 }

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;
 

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;
@@ -65,7 +65,6 @@ export class Dock extends React.Component<Props> {
   render() {
     const { className } = this.props;
     const { isOpen, toggle, tabs, toggleFillSize, selectedTab, hasTabs, fullSize, height } = dockStore;
-    const DockTabContent = dockViewsManager.get(selectedTab?.kind)?.tabContent;
 
     return (
       <div
@@ -121,7 +120,7 @@ export class Dock extends React.Component<Props> {
           </div>
         </div>
         <div className="tab-content" style={{ flexBasis: isOpen ? height : 0 }}>
-          {DockTabContent && <DockTabContent tab={selectedTab}/>}
+          <DockTabContent tab={selectedTab}/>
         </div>
       </div>
     );

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 {
+export interface DockTabComponents {
-  tabContent?: React.ComponentType<DockTabContentProps>;
+  Content?: React.ComponentType<DockTabContentProps>;
+  editor?: {
+    getValue(tabId: TabId): string | undefined;
+    setValue(tabId: TabId, value: string): void;
+    onError?(tabId: TabId, error: string | Error): void;
+  }
 }
 
-const dockViews = observable.map<TabKind, DockViews>([], {
+const dockViews = observable.map<TabKind, DockTabComponents>([], {
   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 });

src/renderer/components/dock/edit-resource.store.ts

@@ -35,14 +35,23 @@ export interface EditingResource {
 
 export class EditResourceStore extends DockTabStore<EditingResource> {
   constructor() {
-    super({
+    super({ storageKey: "edit_resource_store" });
-      storageKey: "edit_resource_store",
-    });
-    autoBind(this);
     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<EditingResource> {
 
     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 });
     }
   }
 

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 { observer } from "mobx-react";
-import { disposeOnUnmount, 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<Props> {
-  @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<Props> {
   }
 
   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<Props> {
     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<Props> {
   };
 
   render() {
-    if (!editResourceStore.dataReady || !this.resource) {
+    const { tabId, resource } = this;
+
+    if (!editResourceStore.dataReady || !resource) {
       return <Spinner center/>;
     }
 
-    const { tabId, error, draft, resource, onChange, onError } = this;
-
     return (
-      <DockTabContent className="EditResource" {...this.props}>
+      <div className="EditResource">
         <InfoPanel
           tabId={tabId}
-          error={error}
           submit={this.save}
           submitLabel="Save"
           submittingMessage="Applying.."
@@ -122,17 +95,19 @@ export class EditResource extends React.Component<Props> {
             </div>
           )}
         />
-        <MonacoEditor
+      </div>
-          id={tabId}
-          value={draft}
-          onChange={onChange}
-          onError={onError}
-        />
-      </DockTabContent>
     );
   }
 }
 
 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;
+    },
+  }
 });

src/renderer/components/dock/install-chart.store.ts

@@ -41,12 +41,21 @@ export class InstallChartStore extends DockTabStore<IChartInstallData> {
   versions = observable.map<TabId, string[]>();
 
   constructor() {
-    super({
+    super({ storageKey: "install_charts" });
-      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 = [];

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 { computed, makeObservable, observable } from "mobx";
-import { disposeOnUnmount, observer } from "mobx-react";
+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<Props> {
-  @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<Props> {
     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<Props> {
 
     const { tabId, chartData, install, versions } = this;
     const { repo, name, version, namespace, releaseName } = chartData;
+
     const panelControls = (
       <div className="install-controls flex gaps align-center">
         <span>Chart</span>
@@ -208,27 +195,28 @@ export class InstallChart extends Component<Props> {
     );
 
     return (
-      <DockTabContent className="InstallChart" {...this.props}>
+      <div className="InstallChart">
         <InfoPanel
           tabId={tabId}
           controls={panelControls}
-          error={this.error}
           submit={install}
           submitLabel="Install"
           submittingMessage="Installing..."
           showSubmitClose={false}
         />
-        <MonacoEditor
+      </div>
-          id={tabId}
-          value={chartData.values}
-          onChange={this.onValuesChange}
-          onError={this.onValuesError}
-        />
-      </DockTabContent>
     );
   }
 }
 
 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;
+    },
+  }
 });

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<Props> {
     }
 
     return (
-      <DockTabContent className="PodLogs" {...this.props}>
+      <div className="PodLogs flex column">
         {this.renderResourceSelector(data)}
         <LogList
           logs={logs}
@@ -158,11 +158,11 @@ export class Logs extends React.Component<Props> {
           save={newData => logTabStore.setData(this.tabId, { ...data, ...newData })}
           reload={this.reload}
         />
-      </DockTabContent>
+      </div>
     );
   }
 }
 
 dockViewsManager.register(TabKind.POD_LOGS, {
-  tabContent: Logs,
+  Content: Logs,
 });

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 { dockStore, TabId, TabKind } from "./dock.store";
-import { 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<Props> {
 
   componentDidMount() {
     disposeOnUnmount(this, [
-      reaction(() => this.props.tab.id, tabId => this.activate(tabId), {
+      dockStore.onTabChange(({ tabId }) => this.activate(tabId), {
-        fireImmediately: true
+        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 (
-      <DockTabContent
+      <div
-        {...this.props}
         className={cssNames("TerminalWindow", ThemeStore.getInstance().activeTheme.type)}
-        bindElemRef={elem => this.elem = elem}
+        ref={elem => this.elem = elem}
       />
     );
   }
 }
 
 dockViewsManager.register(TabKind.TERMINAL, {
-  tabContent: TerminalWindow,
+  Content: TerminalWindow,
 });

src/renderer/components/dock/upgrade-chart.store.ts

@@ -37,16 +37,20 @@ export class UpgradeChartStore extends DockTabStore<IChartUpgradeData> {
   public versions = observable.array<IChartVersion>();
 
   constructor() {
-    super({
+    super({ storageKey: "chart_releases" });
-      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) {

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 { computed, makeObservable, observable } from "mobx";
-import { disposeOnUnmount, observer } from "mobx-react";
+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<Props> {
-  @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<Props> {
     return upgradeChartStore.getRelease(this.tabId);
   }
 
-  get isReady() {
+  @computed get versions(): SelectOption<IChartVersion>[] {
-    return [
-      upgradeChartStore.dataReady,
-      this.release,
-      this.selectedVersion,
-    ].every(Boolean);
-  }
-
-  @computed get versionOptions(): SelectOption<IChartVersion>[] {
     return upgradeChartStore.versions.map(version => ({ value: version }));
   }
 
@@ -78,16 +64,7 @@ export class UpgradeChart extends React.Component<Props> {
     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<Props> {
   };
 
   render() {
-    if (!this.isReady) {
+    const { tabId, release, versions, selectedVersion } = this;
+
+    if (!release) {
       return <Spinner center/>;
     }
 
-    const { tabId, release, value, error, versionOptions, selectedVersion, onChange, onError } = this;
     const currentVersion = release.getVersion();
 
-    const controlsAndInfo = (
-      <div className="upgrade flex gaps align-center">
-        <span>Release</span> <Badge label={release.getName()}/>
-        <span>Namespace</span> <Badge label={release.getNs()}/>
-        <span>Version</span> <Badge label={currentVersion}/>
-        <span>Upgrade version</span>
-        <Select
-          className="chart-version"
-          menuPlacement="top"
-          themeName="outlined"
-          value={selectedVersion}
-          options={versionOptions}
-          formatOptionLabel={this.formatVersionLabel}
-          onChange={({ value }: SelectOption) => this.selectedVersion = value}
-        />
-      </div>
-    );
-
     return (
-      <DockTabContent className="UpgradeChart" {...this.props}>
+      <div className="UpgradeChart">
         <InfoPanel
           tabId={tabId}
-          error={error}
           submit={this.upgrade}
           submitLabel="Upgrade"
           submittingMessage="Updating.."
-          controls={controlsAndInfo}
+          controls={
+            <div className="upgrade flex gaps align-center">
+              <span>Release</span> <Badge label={release.getName()}/>
+              <span>Namespace</span> <Badge label={release.getNs()}/>
+              <span>Version</span> <Badge label={currentVersion}/>
+              <span>Upgrade version</span>
+              <Select
+                className="chart-version"
+                menuPlacement="top"
+                themeName="outlined"
+                value={selectedVersion ?? versions[0]}
+                options={versions}
+                formatOptionLabel={this.formatVersionLabel}
+                onChange={({ value }: SelectOption<IChartVersion>) => this.selectedVersion = value}
+              />
+            </div>
+          }
         />
-        <MonacoEditor
+      </div>
-          id={tabId}
-          value={value}
-          onChange={onChange}
-          onError={onError}
-        />
-      </DockTabContent>
     );
   }
 }
 
 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);
+    },
+  }
 });