revived EditorPanel / usages of editor per dock-tab separately

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

src/renderer/components/dock/create-resource.tsx

@@ -29,9 +29,9 @@ import { InfoPanel } from "./info-panel";
 import * as resourceApplierApi from "../../../common/k8s-api/endpoints/resource-applier.api";
 import { Notifications } from "../notifications";
 import { TabKind } from "./dock.store";
-import { dockViewsManager } from "./dock.views-manager";
+import { DockTabContentProps, dockViewsManager } from "./dock.views-manager";
 import logger from "../../../common/logger";
-import { DockTabContent, DockTabContentProps } from "./dock-tab-content";
+import { EditorPanel } from "./editor-panel";
 
 interface Props extends DockTabContentProps {
 }
@@ -135,12 +135,7 @@ export class CreateResource extends React.Component<Props> {
     const { tabId } = this;
 
     return (
-      <DockTabContent
-        tabId={tabId}
-        withEditor
-        editorValue={createResourceStore.getData(tabId)}
-        editorOnChange={value => createResourceStore.setData(tabId, value)}
-      >
+      <div className="CreateResource">
         <InfoPanel
           tabId={tabId}
           controls={this.renderControls()}
@@ -148,7 +143,12 @@ export class CreateResource extends React.Component<Props> {
           submitLabel="Create"
           showNotifications={false}
         />
-      </DockTabContent>
+        <EditorPanel
+          tabId={tabId}
+          value={createResourceStore.getData(tabId)}
+          onChange={value => createResourceStore.setData(tabId, value)}
+        />
+      </div>
     );
   }
 }

src/renderer/components/dock/dock-tab-context.tsx

@@ -1,28 +0,0 @@
-/**
- * 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.
- */
-
-import React from "react";
-
-export const DockTabContext = React.createContext<DockTabContextValue>({});
-
-export interface DockTabContextValue {
-  error?: string;
-}

src/renderer/components/dock/dock.views-manager.ts

@@ -21,8 +21,12 @@
 
 import type React from "react";
 import { observable } from "mobx";
-import type { TabKind } from "./dock.store";
-import type { DockTabContentProps } from "./dock-tab-content";
+import type { TabId, TabKind } from "./dock.store";
+
+export interface DockTabContentProps {
+  tabId: TabId;
+  className?: string;
+}
 
 export interface DockTabComponents {
   Content?: React.ComponentType<DockTabContentProps>;

src/renderer/components/dock/edit-resource.tsx

@@ -28,9 +28,9 @@ import { InfoPanel } from "./info-panel";
 import { Badge } from "../badge";
 import type { KubeObject } from "../../../common/k8s-api/kube-object";
 import { TabKind } from "./dock.store";
-import { dockViewsManager } from "./dock.views-manager";
+import { DockTabContentProps, dockViewsManager } from "./dock.views-manager";
 import { createPatch } from "rfc6902";
-import { DockTabContent, DockTabContentProps } from "./dock-tab-content";
+import { EditorPanel } from "./editor-panel";
 
 interface Props extends DockTabContentProps {
 }
@@ -111,12 +111,7 @@ export class EditResource extends React.Component<Props> {
     if (!resource) return null;
 
     return (
-      <DockTabContent
-        tabId={tabId}
-        withEditor
-        editorValue={tabData?.draft}
-        editorOnChange={v => tabData.draft = v}
-      >
+      <div className="EditResource">
         <InfoPanel
           tabId={tabId}
           submit={this.save}
@@ -130,7 +125,12 @@ export class EditResource extends React.Component<Props> {
             </div>
           )}
         />
-      </DockTabContent>
+        <EditorPanel
+          tabId={tabId}
+          value={tabData?.draft}
+          onChange={v => tabData.draft = v}
+        />
+      </div>
     );
   }
 }

src/renderer/components/dock/editor-panel.module.css

@@ -19,14 +19,8 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-.DockTabContent {
+.EditorPanel {
   position: relative;
   flex: 1;
   height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .editor {
-    flex: 1;
-  }
 }

src/renderer/components/dock/editor-panel.tsx

@@ -19,69 +19,54 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./dock-tab-content.module.css";
+import styles from "./editor-panel.module.css";
 import throttle from "lodash/throttle";
 import React from "react";
-import { action, makeObservable, observable, reaction } from "mobx";
+import { makeObservable, observable, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { dockStore, TabId } from "./dock.store";
+import { dockStore } from "./dock.store";
 import { cssNames } from "../../utils";
 import { MonacoEditor, MonacoEditorProps } from "../monaco-editor";
-import { DockTabContext } from "./dock-tab-context";
+import type { DockTabContentProps } from "./dock.views-manager";
 
-export interface DockTabContentProps extends React.HTMLAttributes<any> {
-  tabId: TabId;
-  className?: string;
-  withEditor?: boolean;
-  editorValue?: MonacoEditorProps["value"];
-  editorOnChange?: MonacoEditorProps["onChange"];
+export interface EditorPanelProps extends DockTabContentProps {
+  value: string;
+  onChange: MonacoEditorProps["onChange"];
+  onError?: MonacoEditorProps["onError"];
 }
 
 @observer
-export class DockTabContent extends React.Component<DockTabContentProps> {
-  @observable.ref editor?: MonacoEditor;
-  @observable error = "";
+export class EditorPanel extends React.Component<EditorPanelProps> {
+  @observable.ref editor: MonacoEditor;
 
-  constructor(props: DockTabContentProps) {
+  constructor(props: EditorPanelProps) {
     super(props);
     makeObservable(this);
 
     disposeOnUnmount(this, [
       // keep focus on editor's area when <Dock/> just opened
-      reaction(() => dockStore.isOpen, isOpen => isOpen && this.editor?.focus()),
+      reaction(() => dockStore.isOpen, isOpen => isOpen && this.editor.focus()),
 
       // focus to editor on dock's resize or turning into fullscreen mode
-      dockStore.onResize(throttle(() => this.editor?.focus(), 250)),
+      dockStore.onResize(throttle(() => this.editor.focus(), 250)),
     ]);
   }
 
   render() {
-    const { className, tabId, withEditor, editorValue, editorOnChange } = this.props;
-    const { error } = this;
+    const { className, tabId, value, onChange, onError } = this.props;
 
     if (!tabId) return null;
 
     return (
-      <div className={cssNames(styles.DockTabContent, className)}>
-        <DockTabContext.Provider value={{ error }}>
-          {this.props.children}
-
-          {withEditor && (
-            <MonacoEditor
-              autoFocus
-              id={tabId}
-              className={styles.editor}
-              value={editorValue ?? ""}
-              onChange={action((value, evt) => {
-                this.error = ""; // reset first
-                editorOnChange?.(value, evt);
-              })}
-              onError={error => this.error = String(error)}
-              onModelChange={() => this.error = ""}
-              ref={monaco => this.editor = monaco}></MonacoEditor>
-          )}
-        </DockTabContext.Provider>
-      </div>
+      <MonacoEditor
+        autoFocus
+        id={tabId}
+        value={value}
+        className={cssNames(styles.EditorPanel, className)}
+        onChange={onChange}
+        onError={onError}
+        ref={monaco => this.editor = monaco}
+      />
     );
   }
 }

src/renderer/components/dock/info-panel.tsx

@@ -29,7 +29,6 @@ import { Icon } from "../icon";
 import { Spinner } from "../spinner";
 import { dockStore, TabId } from "./dock.store";
 import { Notifications } from "../notifications";
-import { DockTabContext, DockTabContextValue } from "./dock-tab-context";
 
 export interface InfoPanelProps {
   tabId: TabId;
@@ -60,11 +59,9 @@ const defaultProps: Partial<InfoPanelProps> = {
 @observer
 export class InfoPanel extends Component<InfoPanelProps> {
   static defaultProps = defaultProps as object;
-  static contextType = DockTabContext;
-  declare context: DockTabContextValue;
 
-  get error() {
-    return this.props.error ?? this.context.error;
+  get error(): React.ReactNode {
+    return this.props.error;
   }
 
   @observable waiting = false;

src/renderer/components/dock/install-chart.tsx

@@ -39,8 +39,8 @@ import { Select, SelectOption } from "../select";
 import { Input } from "../input";
 import { navigate } from "../../navigation";
 import { releaseURL } from "../../../common/routes";
-import { dockViewsManager } from "./dock.views-manager";
-import { DockTabContent, DockTabContentProps } from "./dock-tab-content";
+import { DockTabContentProps, dockViewsManager } from "./dock.views-manager";
+import { EditorPanel } from "./editor-panel";
 
 interface Props extends DockTabContentProps {
 }
@@ -195,12 +195,7 @@ export class InstallChart extends Component<Props> {
     );
 
     return (
-      <DockTabContent
-        tabId={tabId}
-        withEditor
-        editorValue={installChartStore.getData(tabId).values}
-        editorOnChange={v => installChartStore.getData(tabId).values = v}
-      >
+      <div className="InstallChart">
         <InfoPanel
           tabId={tabId}
           className="InstallChartInfoPanel"
@@ -210,7 +205,12 @@ export class InstallChart extends Component<Props> {
           submittingMessage="Installing..."
           showSubmitClose={false}
         />
-      </DockTabContent>
+        <EditorPanel
+          tabId={tabId}
+          value={installChartStore.getData(tabId).values}
+          onChange={v => installChartStore.getData(tabId).values = v}
+        />
+      </div>
     );
   }
 }

src/renderer/components/dock/logs.tsx

@@ -33,8 +33,7 @@ import { LogSearch } from "./log-search";
 import { LogControls } from "./log-controls";
 import { LogTabData, logTabStore } from "./log-tab.store";
 import { TabKind } from "./dock.store";
-import { dockViewsManager } from "./dock.views-manager";
-import type { DockTabContentProps } from "./dock-tab-content";
+import { DockTabContentProps, dockViewsManager } from "./dock.views-manager";
 
 interface Props extends DockTabContentProps {
 }

src/renderer/components/dock/terminal-window.tsx

@@ -28,8 +28,7 @@ import type { Terminal } from "./terminal";
 import { TerminalStore } from "./terminal.store";
 import { ThemeStore } from "../../theme.store";
 import { dockStore, TabId, TabKind } from "./dock.store";
-import { dockViewsManager } from "./dock.views-manager";
-import type { DockTabContentProps } from "./dock-tab-content";
+import { DockTabContentProps, dockViewsManager } from "./dock.views-manager";
 
 interface Props extends DockTabContentProps {
 }

src/renderer/components/dock/upgrade-chart.tsx

@@ -29,8 +29,8 @@ import { dockStore, TabId, TabKind } from "./dock.store";
 import type { IChartVersion } from "../+apps-helm-charts/helm-chart.store";
 import type { HelmRelease } from "../../../common/k8s-api/endpoints/helm-releases.api";
 import { upgradeChartStore } from "./upgrade-chart.store";
-import { dockViewsManager } from "./dock.views-manager";
-import { DockTabContent, DockTabContentProps } from "./dock-tab-content";
+import { DockTabContentProps, dockViewsManager } from "./dock.views-manager";
+import { EditorPanel } from "./editor-panel";
 import { Spinner } from "../spinner";
 
 interface Props extends DockTabContentProps {
@@ -96,12 +96,7 @@ export class UpgradeChart extends React.Component<Props> {
     const { release, selectedVersion, chartVersions, tabId } = this;
 
     return (
-      <DockTabContent
-        tabId={tabId}
-        withEditor
-        editorValue={upgradeChartStore.values.get(tabId)}
-        editorOnChange={v => upgradeChartStore.values.set(tabId, v)}
-      >
+      <div className="UpgradeChart">
         <InfoPanel
           tabId={this.tabId}
           submit={this.upgrade}
@@ -124,7 +119,12 @@ export class UpgradeChart extends React.Component<Props> {
             </div>
           }
         />
-      </DockTabContent>
+        <EditorPanel
+          tabId={tabId}
+          value={upgradeChartStore.values.get(tabId)}
+          onChange={v => upgradeChartStore.values.set(tabId, v)}
+        />
+      </div>
     );
   }
 }