From f276207860f53915af6b7640d3b170ea4b79dc85 Mon Sep 17 00:00:00 2001 From: Roman Date: Wed, 27 Oct 2021 12:13:37 +0300 Subject: [PATCH] revived EditorPanel / usages of editor per dock-tab separately Signed-off-by: Roman --- .../components/dock/create-resource.tsx | 18 +++--- .../components/dock/dock-tab-context.tsx | 28 --------- .../components/dock/dock.views-manager.ts | 8 ++- .../components/dock/edit-resource.tsx | 18 +++--- ...ent.module.css => editor-panel.module.css} | 8 +-- ...{dock-tab-content.tsx => editor-panel.tsx} | 61 +++++++------------ src/renderer/components/dock/info-panel.tsx | 7 +-- .../components/dock/install-chart.tsx | 18 +++--- src/renderer/components/dock/logs.tsx | 3 +- .../components/dock/terminal-window.tsx | 3 +- .../components/dock/upgrade-chart.tsx | 18 +++--- 11 files changed, 70 insertions(+), 120 deletions(-) delete mode 100644 src/renderer/components/dock/dock-tab-context.tsx rename src/renderer/components/dock/{dock-tab-content.module.css => editor-panel.module.css} (92%) rename src/renderer/components/dock/{dock-tab-content.tsx => editor-panel.tsx} (52%) diff --git a/src/renderer/components/dock/create-resource.tsx b/src/renderer/components/dock/create-resource.tsx index 631b8b6828..9e0cafc66a 100644 --- a/src/renderer/components/dock/create-resource.tsx +++ b/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 { const { tabId } = this; return ( - createResourceStore.setData(tabId, value)} - > +
{ submitLabel="Create" showNotifications={false} /> - + createResourceStore.setData(tabId, value)} + /> +
); } } diff --git a/src/renderer/components/dock/dock-tab-context.tsx b/src/renderer/components/dock/dock-tab-context.tsx deleted file mode 100644 index aaea2ff9be..0000000000 --- a/src/renderer/components/dock/dock-tab-context.tsx +++ /dev/null @@ -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({}); - -export interface DockTabContextValue { - error?: string; -} diff --git a/src/renderer/components/dock/dock.views-manager.ts b/src/renderer/components/dock/dock.views-manager.ts index 537ac00aa4..70047175b5 100644 --- a/src/renderer/components/dock/dock.views-manager.ts +++ b/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; diff --git a/src/renderer/components/dock/edit-resource.tsx b/src/renderer/components/dock/edit-resource.tsx index 5341efa268..f3c2cb4d29 100644 --- a/src/renderer/components/dock/edit-resource.tsx +++ b/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 { if (!resource) return null; return ( - tabData.draft = v} - > +
{
)} /> - + tabData.draft = v} + /> + ); } } diff --git a/src/renderer/components/dock/dock-tab-content.module.css b/src/renderer/components/dock/editor-panel.module.css similarity index 92% rename from src/renderer/components/dock/dock-tab-content.module.css rename to src/renderer/components/dock/editor-panel.module.css index aee271b1db..ba766f1111 100644 --- a/src/renderer/components/dock/dock-tab-content.module.css +++ b/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; - } } diff --git a/src/renderer/components/dock/dock-tab-content.tsx b/src/renderer/components/dock/editor-panel.tsx similarity index 52% rename from src/renderer/components/dock/dock-tab-content.tsx rename to src/renderer/components/dock/editor-panel.tsx index 02a6e6ebde..26bd5dec36 100644 --- a/src/renderer/components/dock/dock-tab-content.tsx +++ b/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 { - 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 { - @observable.ref editor?: MonacoEditor; - @observable error = ""; +export class EditorPanel extends React.Component { + @observable.ref editor: MonacoEditor; - constructor(props: DockTabContentProps) { + constructor(props: EditorPanelProps) { super(props); makeObservable(this); disposeOnUnmount(this, [ // keep focus on editor's area when 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 ( -
- - {this.props.children} - - {withEditor && ( - { - this.error = ""; // reset first - editorOnChange?.(value, evt); - })} - onError={error => this.error = String(error)} - onModelChange={() => this.error = ""} - ref={monaco => this.editor = monaco}> - )} - -
+ this.editor = monaco} + /> ); } } diff --git a/src/renderer/components/dock/info-panel.tsx b/src/renderer/components/dock/info-panel.tsx index 9275ca72aa..cc3b858e88 100644 --- a/src/renderer/components/dock/info-panel.tsx +++ b/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 = { @observer export class InfoPanel extends Component { 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; diff --git a/src/renderer/components/dock/install-chart.tsx b/src/renderer/components/dock/install-chart.tsx index f85672e92c..406a7e2d05 100644 --- a/src/renderer/components/dock/install-chart.tsx +++ b/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 { ); return ( - installChartStore.getData(tabId).values = v} - > +
{ submittingMessage="Installing..." showSubmitClose={false} /> - + installChartStore.getData(tabId).values = v} + /> +
); } } diff --git a/src/renderer/components/dock/logs.tsx b/src/renderer/components/dock/logs.tsx index eadeb12687..c9142416c9 100644 --- a/src/renderer/components/dock/logs.tsx +++ b/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 { } diff --git a/src/renderer/components/dock/terminal-window.tsx b/src/renderer/components/dock/terminal-window.tsx index ed62019832..8d82131b20 100644 --- a/src/renderer/components/dock/terminal-window.tsx +++ b/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 { } diff --git a/src/renderer/components/dock/upgrade-chart.tsx b/src/renderer/components/dock/upgrade-chart.tsx index 217795b126..89dc20604e 100644 --- a/src/renderer/components/dock/upgrade-chart.tsx +++ b/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 { const { release, selectedVersion, chartVersions, tabId } = this; return ( - upgradeChartStore.values.set(tabId, v)} - > +
{
} /> - + upgradeChartStore.values.set(tabId, v)} + /> + ); } }