Rename PageLayout to SettingLayout (#3123)

* rename PageLayout to SettingLayout

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* expose to extensions

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

src/extensions/renderer-api/components.ts

@@ -20,6 +20,7 @@
  */
 
 // layouts
+export * from "../../renderer/components/layout/setting-layout";
 export * from "../../renderer/components/layout/page-layout";
 export * from "../../renderer/components/layout/wizard-layout";
 export * from "../../renderer/components/layout/tab-layout";

src/renderer/components/+add-cluster/add-cluster.tsx

@@ -38,8 +38,8 @@ import { navigate } from "../../navigation";
 import { iter } from "../../utils";
 import { AceEditor } from "../ace-editor";
 import { Button } from "../button";
-import { PageLayout } from "../layout/page-layout";
 import { Notifications } from "../notifications";
+import { SettingLayout } from "../layout/setting-layout";
 
 interface Option {
   config: KubeConfig;
@@ -108,7 +108,7 @@ export class AddCluster extends React.Component {
 
   render() {
     return (
-      <PageLayout className="AddClusters" showOnTop={true}>
+      <SettingLayout className="AddClusters">
         <h2>Add Clusters from Kubeconfig</h2>
         <p>
           Clusters added here are <b>not</b> merged into the <code>~/.kube/config</code> file.
@@ -144,7 +144,7 @@ export class AddCluster extends React.Component {
             tooltipOverrideDisabled
           />
         </div>
-      </PageLayout>
+      </SettingLayout>
     );
   }
 }

src/renderer/components/+entity-settings/entity-settings.tsx

@@ -25,7 +25,6 @@ import React from "react";
 import { observable, makeObservable } from "mobx";
 import type { RouteComponentProps } from "react-router";
 import { observer } from "mobx-react";
-import { PageLayout } from "../layout/page-layout";
 import { navigation } from "../../navigation";
 import { Tabs, Tab } from "../tabs";
 import type { CatalogEntity } from "../../api/catalog-entity";
@@ -33,6 +32,7 @@ import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { EntitySettingRegistry } from "../../../extensions/registries";
 import type { EntitySettingsRouteParams } from "../../../common/routes";
 import { groupBy } from "lodash";
+import { SettingLayout } from "../layout/setting-layout";
 
 interface Props extends RouteComponentProps<EntitySettingsRouteParams> {
 }
@@ -120,10 +120,9 @@ export class EntitySettings extends React.Component<Props> {
     const activeSetting = this.menuItems.find((setting) => setting.id === this.activeTab);
 
     return (
-      <PageLayout
+      <SettingLayout
         className="CatalogEntitySettings"
         navigation={this.renderNavigation()}
-        showOnTop={true}
         contentGaps={false}
       >
         <section>
@@ -132,7 +131,7 @@ export class EntitySettings extends React.Component<Props> {
             <activeSetting.components.View entity={this.entity} key={activeSetting.title} />
           </section>
         </section>
-      </PageLayout>
+      </SettingLayout>
     );
   }
 }

src/renderer/components/+extensions/extensions.tsx

@@ -39,12 +39,12 @@ import logger from "../../../main/logger";
 import { Button } from "../button";
 import { ConfirmDialog } from "../confirm-dialog";
 import { DropFileInput, InputValidators } from "../input";
-import { PageLayout } from "../layout/page-layout";
 import { Notifications } from "../notifications";
 import { ExtensionInstallationState, ExtensionInstallationStateStore } from "./extension-install.store";
 import { Install } from "./install";
 import { InstalledExtensions } from "./installed-extensions";
 import { Notice } from "./notice";
+import { SettingLayout } from "../layout/setting-layout";
 
 function getMessageFromError(error: any): string {
   if (!error || typeof error !== "object") {
@@ -510,7 +510,7 @@ export class Extensions extends React.Component<Props> {
 
     return (
       <DropFileInput onDropFiles={installOnDrop}>
-        <PageLayout showOnTop className="Extensions" contentGaps={false}>
+        <SettingLayout className="Extensions" contentGaps={false}>
           <section>
             <h1>Extensions</h1>
 
@@ -533,7 +533,7 @@ export class Extensions extends React.Component<Props> {
               uninstall={confirmUninstallExtension}
             />
           </section>
-        </PageLayout>
+        </SettingLayout>
       </DropFileInput>
     );
   }

src/renderer/components/+preferences/preferences.tsx

@@ -31,7 +31,6 @@ import { AppPreferenceRegistry, RegisteredAppPreference } from "../../../extensi
 import { UserStore } from "../../../common/user-store";
 import { ThemeStore } from "../../theme.store";
 import { Input } from "../input";
-import { PageLayout } from "../layout/page-layout";
 import { SubTitle } from "../layout/sub-title";
 import { Select, SelectOption } from "../select";
 import { HelmCharts } from "./helm-charts";
@@ -40,6 +39,7 @@ import { navigation } from "../../navigation";
 import { Tab, Tabs } from "../tabs";
 import { FormSwitch, Switcher } from "../switch";
 import { KubeconfigSyncs } from "./kubeconfig-syncs";
+import { SettingLayout } from "../layout/setting-layout";
 
 enum Pages {
   Application = "application",
@@ -136,8 +136,7 @@ export class Preferences extends React.Component {
       );
 
     return (
-      <PageLayout
+      <SettingLayout
-        showOnTop
         navigation={this.renderNavigation()}
         className="Preferences"
         contentGaps={false}
@@ -266,7 +265,7 @@ export class Preferences extends React.Component {
             {extensions.filter(e => !e.showInPreferencesTab).map(this.renderExtension)}
           </section>
         )}
-      </PageLayout>
+      </SettingLayout>
     );
   }
 }

src/renderer/components/layout/page-layout.tsx

@@ -19,96 +19,11 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./page-layout.scss";
+import { SettingLayout } from "./setting-layout";
 
-import React from "react";
+/**
-import { observer } from "mobx-react";
+ * PageLayout is deprecated. See MainLayout & SettingLayout
-import { boundMethod, cssNames, IClassName } from "../../utils";
+ *
-import { navigation } from "../../navigation";
+ * @deprecated
-import { Icon } from "../icon";
+ */
-
+export class PageLayout extends SettingLayout {}
-export interface PageLayoutProps extends React.DOMAttributes<any> {
-  className?: IClassName;
-  contentClass?: IClassName;
-  provideBackButtonNavigation?: boolean;
-  contentGaps?: boolean;
-  showOnTop?: boolean; // covers whole app view
-  navigation?: React.ReactNode;
-  back?: (evt: React.MouseEvent | KeyboardEvent) => void;
-}
-
-const defaultProps: Partial<PageLayoutProps> = {
-  provideBackButtonNavigation: true,
-  contentGaps: true,
-};
-
-@observer
-export class PageLayout extends React.Component<PageLayoutProps> {
-  static defaultProps = defaultProps as object;
-
-  @boundMethod
-  back(evt?: React.MouseEvent | KeyboardEvent) {
-    if (this.props.back) {
-      this.props.back(evt);
-    } else {
-      navigation.goBack();
-    }
-  }
-
-  async componentDidMount() {
-    window.addEventListener("keydown", this.onEscapeKey);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener("keydown", this.onEscapeKey);
-  }
-
-  onEscapeKey = (evt: KeyboardEvent) => {
-    if (!this.props.provideBackButtonNavigation) {
-      return;
-    }
-
-    if (evt.code === "Escape") {
-      evt.stopPropagation();
-      this.back(evt);
-    }
-  };
-
-  render() {
-    const {
-      contentClass, provideBackButtonNavigation,
-      contentGaps, showOnTop, navigation, children, ...elemProps
-    } = this.props;
-    const className = cssNames("PageLayout", { showOnTop, showNavigation: navigation }, this.props.className);
-
-    return (
-      <div {...elemProps} className={className}>
-        { navigation && (
-          <nav className="sidebarRegion">
-            <div className="sidebar">
-              {navigation}
-            </div>
-          </nav>
-        )}
-        <div className="contentRegion" id="ScrollSpyRoot">
-          <div className={cssNames("content", contentClass, contentGaps && "flex column gaps")}>
-            {children}
-          </div>
-          <div className="toolsRegion">
-            { this.props.provideBackButtonNavigation && (
-              <div className="fixedTools">
-                <div className="closeBtn" role="button" aria-label="Close" onClick={this.back}>
-                  <Icon material="close"/>
-                </div>
-
-                <div className="esc" aria-hidden="true">
-                  ESC
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    );
-  }
-}

src/renderer/components/layout/setting-layout.scss

@@ -19,12 +19,10 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-.PageLayout {
+.SettingLayout {
   --width: 75%;
   --nav-width: 180px;
   --nav-column-width: 30vw;
-
-  position: relative;
   width: 100%;
   height: 100%;
   display: grid !important;

src/renderer/components/layout/setting-layout.tsx

@@ -0,0 +1,116 @@
+/**
+ * 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 "./setting-layout.scss";
+
+import React from "react";
+import { observer } from "mobx-react";
+import { boundMethod, cssNames, IClassName } from "../../utils";
+import { navigation } from "../../navigation";
+import { Icon } from "../icon";
+
+export interface SettingLayoutProps extends React.DOMAttributes<any> {
+  className?: IClassName;
+  contentClass?: IClassName;
+  provideBackButtonNavigation?: boolean;
+  contentGaps?: boolean;
+  navigation?: React.ReactNode;
+  back?: (evt: React.MouseEvent | KeyboardEvent) => void;
+}
+
+const defaultProps: Partial<SettingLayoutProps> = {
+  provideBackButtonNavigation: true,
+  contentGaps: true,
+};
+
+/**
+ * Layout for settings like pages with navigation
+ */
+@observer
+export class SettingLayout extends React.Component<SettingLayoutProps> {
+  static defaultProps = defaultProps as object;
+
+  @boundMethod
+  back(evt?: React.MouseEvent | KeyboardEvent) {
+    if (this.props.back) {
+      this.props.back(evt);
+    } else {
+      navigation.goBack();
+    }
+  }
+
+  async componentDidMount() {
+    window.addEventListener("keydown", this.onEscapeKey);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("keydown", this.onEscapeKey);
+  }
+
+  onEscapeKey = (evt: KeyboardEvent) => {
+    if (!this.props.provideBackButtonNavigation) {
+      return;
+    }
+
+    if (evt.code === "Escape") {
+      evt.stopPropagation();
+      this.back(evt);
+    }
+  };
+
+  render() {
+    const {
+      contentClass, provideBackButtonNavigation,
+      contentGaps, navigation, children, ...elemProps
+    } = this.props;
+    const className = cssNames("SettingLayout", "showOnTop", { showNavigation: navigation }, this.props.className);
+
+    return (
+      <div {...elemProps} className={className}>
+        { navigation && (
+          <nav className="sidebarRegion">
+            <div className="sidebar">
+              {navigation}
+            </div>
+          </nav>
+        )}
+        <div className="contentRegion" id="ScrollSpyRoot">
+          <div className={cssNames("content", contentClass, contentGaps && "flex column gaps")}>
+            {children}
+          </div>
+          <div className="toolsRegion">
+            { this.props.provideBackButtonNavigation && (
+              <div className="fixedTools">
+                <div className="closeBtn" role="button" aria-label="Close" onClick={this.back}>
+                  <Icon material="close"/>
+                </div>
+
+                <div className="esc" aria-hidden="true">
+                  ESC
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}