page-layout: fixes + reuse in cluster-setttings and preferences pages

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

src/renderer/components/+cluster-settings/cluster-settings.scss

@@ -1,87 +1,51 @@
 .ClusterSettings {
-  .WizardLayout {
-    grid-template-columns: unset;
-    grid-template-rows: 76px 1fr;
-    padding: 0;
+  $spacing: $padding * 3;
 
-    .head-col {
-      justify-content: space-between;
+  > .content-wrapper {
+    --flex-gap: #{$spacing};
+  }
 
-      :nth-child(2) {
-        flex: 1 0 0;
-      }
-    }
+  // TODO: move sub-component styles to separate files
+  .admin-note {
+    font-size: small;
+    opacity: 0.5;
+    margin-left: $margin;
+  }
 
-    .content-col {
-      margin: 0;
-      padding-top: $padding * 3;
-      background-color: $clusterSettingsBackground;
+  .button-area {
+    margin-top: $margin * 2;
+  }
 
-      .SubTitle {
-        text-transform: none;
-      }
+  .file-loader {
+    margin-top: $margin * 2;
+  }
 
-      > div {
-        margin-top: $margin * 5;
-      }
+  .status-table {
+    margin: $spacing 0;
 
-      .admin-note {
-        font-size: small;
-        opacity: 0.5;
-        margin-left: $margin;
-      }
+    .Table {
+      border: 1px solid var(--drawerSubtitleBackground);
+      border-radius: $radius;
 
-      .button-area {
-        margin-top: $margin * 2;
-      }
+      .TableRow {
+        &:not(:last-of-type) {
+          border-bottom: 1px solid var(--drawerSubtitleBackground);
+        }
 
-      .file-loader {
-        margin-top: $margin * 2;
-      }
+        .value {
+          flex-grow: 2;
+          word-break: break-word;
+          color: var(--textColorSecondary);
+        }
 
-      .hint {
-        font-size: smaller;
-        opacity: 0.8;
-      }
-
-      p + p, .hint + p {
-        padding-top: $padding;
-      }
-    }
-
-    .status-table {
-      margin: $margin * 3 0;
-
-      .Table {
-        border: 1px solid var(--drawerSubtitleBackground);
-        border-radius: $radius;
-
-        .TableRow {
-          &:not(:last-of-type) {
-            border-bottom: 1px solid var(--drawerSubtitleBackground);
-          }
-
-          .value {
-            flex-grow: 2;
-            word-break: break-word;
-            color: var(--textColorSecondary);
-          }
-
-          .link {
-            @include pseudo-link;
-          }
+        .link {
+          @include pseudo-link;
         }
       }
     }
+  }
 
-    .Input, .Select {
-      margin-top: 10px;
-    }
-
-    .Select {
-      &__control {
-        box-shadow: 0 0 0 1px $borderFaintColor;
-      }
-    }
+  .Input, .Select {
+    margin-top: $padding;
   }
 }

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

@@ -1,21 +1,19 @@
 import "./cluster-settings.scss";
 
 import React from "react";
-import { observer, disposeOnUnmount } from "mobx-react";
+import { autorun } from "mobx";
+import { disposeOnUnmount, observer } from "mobx-react";
 import { Features } from "./features";
 import { Removal } from "./removal";
 import { Status } from "./status";
 import { General } from "./general";
 import { Cluster } from "../../../main/cluster";
-import { WizardLayout } from "../layout/wizard-layout";
 import { ClusterIcon } from "../cluster-icon";
-import { Icon } from "../icon";
-import { navigate } from "../../navigation";
 import { IClusterSettingsRouteParams } from "./cluster-settings.route";
 import { clusterStore } from "../../../common/cluster-store";
 import { RouteComponentProps } from "react-router";
 import { clusterIpc } from "../../../common/cluster-ipc";
-import { autorun } from "mobx";
+import { PageLayout } from "../layout/page-layout";
 
 interface Props extends RouteComponentProps<IClusterSettingsRouteParams> {
 }
@@ -27,7 +25,6 @@ export class ClusterSettings extends React.Component<Props> {
   }
 
   async componentDidMount() {
-    window.addEventListener('keydown', this.onEscapeKey);
     disposeOnUnmount(this,
       autorun(() => {
         this.refreshCluster();
@@ -35,51 +32,29 @@ export class ClusterSettings extends React.Component<Props> {
     )
   }
 
-  componentWillUnmount() {
-    window.removeEventListener('keydown', this.onEscapeKey);
-  }
-
-  onEscapeKey = (evt: KeyboardEvent) => {
-    if (evt.code === "Escape") {
-      evt.stopPropagation();
-      this.close();
-    }
-  }
-
   refreshCluster = async () => {
-    if(this.cluster) {
+    if (this.cluster) {
       await clusterIpc.activate.invokeFromRenderer(this.cluster.id);
       clusterIpc.refresh.invokeFromRenderer(this.cluster.id);
     }
   }
 
-  close() {
-    navigate("/");
-  }
-
   render() {
     const cluster = this.cluster
     if (!cluster) return null;
     const header = (
       <>
-        <ClusterIcon
-          cluster={cluster}
-          showErrors={false}
-          showTooltip={false}
-        />
+        <ClusterIcon cluster={cluster} showErrors={false} showTooltip={false}/>
         <h2>{cluster.preferences.clusterName}</h2>
-        <Icon material="close" onClick={this.close} big/>
       </>
     );
     return (
-      <div className="ClusterSettings">
-        <WizardLayout header={header} centered>
-          <Status cluster={cluster}></Status>
-          <General cluster={cluster}></General>
-          <Features cluster={cluster}></Features>
-          <Removal cluster={cluster}></Removal>
-        </WizardLayout>
-      </div>
+      <PageLayout className="ClusterSettings" header={header}>
+        <Status cluster={cluster}></Status>
+        <General cluster={cluster}></General>
+        <Features cluster={cluster}></Features>
+        <Removal cluster={cluster}></Removal>
+      </PageLayout>
     );
   }
 }

src/renderer/components/+cluster-settings/components/cluster-home-dir-setting.tsx

@@ -41,10 +41,10 @@ export class ClusterHomeDirSetting extends React.Component<Props> {
           onBlur={this.save}
           placeholder="$HOME"
         />
-        <span className="hint">
+        <small className="hint">
           An explicit start path where the terminal will be launched,{" "}
           this is used as the current working directory (cwd) for the shell process.
-        </span>
+        </small>
       </>
     );
   }

src/renderer/components/+cluster-settings/components/cluster-prometheus-setting.tsx

@@ -90,7 +90,7 @@ export class ClusterPrometheusSetting extends React.Component<Props> {
           }}
           options={options}
         />
-        <span className="hint">What query format is used to fetch metrics from Prometheus</span>
+        <small className="hint">What query format is used to fetch metrics from Prometheus</small>
         {this.canEditPrometheusPath && (
           <>
             <p>Prometheus service address.</p>
@@ -101,10 +101,10 @@ export class ClusterPrometheusSetting extends React.Component<Props> {
               onBlur={this.onSavePath}
               placeholder="<namespace>/<service>:<port>"
             />
-            <span className="hint">
+            <small className="hint">
               An address to an existing Prometheus installation{" "}
               ({'<namespace>/<service>:<port>'}). Lens tries to auto-detect address if left empty.
-            </span>
+            </small>
           </>
         )}
       </>

src/renderer/components/+preferences/preferences.scss

@@ -1,60 +1,24 @@
 .Preferences {
-  position: fixed!important; // Allows to cover ClustersMenu
-  z-index: 1;
+  $spacing: $padding * 2;
 
-  .WizardLayout {
-    grid-template-columns: unset;
-    grid-template-rows: 76px 1fr;
-    padding: 0;
+  .repos {
+    position: relative;
 
-    .content-col {
-      padding: $padding * 8 0;
-      background-color: $clusterSettingsBackground;
-
-      h2 {
-        margin-bottom: $margin * 2;
-
-        &:not(:first-child) {
-          margin-top: $margin * 3;
-        }
-      }
-
-      .SubTitle {
-        text-transform: none;
-        margin: 0!important;
-      }
-
-      .repos {
-        position: relative;
-
-        .Badge {
-          display: flex;
-          margin: 0;
-          margin-bottom: 1px;
-          padding: $padding $padding * 2;
-        }
-      }
-
-      .hint {
-        margin-top: -$margin;
-      }
+    .Badge {
+      display: flex;
+      margin: 0;
+      margin-bottom: 1px;
+      padding: $padding $spacing;
     }
   }
 
-  .is-mac & {
-    .WizardLayout .head-col {
-      padding-top: 32px;
-      overflow: hidden;
-
-      .Icon {
-        margin-top: -$margin * 2;
-      }
+  .extensions {
+    h2 {
+      margin: $spacing 0;
     }
-  }
 
-  .Select {
-    &__control {
-      box-shadow: 0 0 0 1px $borderFaintColor;
+    &:empty {
+      display: none;
     }
   }
 }

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

@@ -1,10 +1,10 @@
 import "./preferences.scss"
+
 import React from "react";
 import { observer } from "mobx-react";
 import { action, computed, observable } from "mobx";
 import { t, Trans } from "@lingui/macro";
 import { _i18n } from "../../i18n";
-import { WizardLayout } from "../layout/wizard-layout";
 import { Icon } from "../icon";
 import { Select, SelectOption } from "../select";
 import { userStore } from "../../../common/user-store";
@@ -14,10 +14,10 @@ import { Checkbox } from "../checkbox";
 import { Notifications } from "../notifications";
 import { Badge } from "../badge";
 import { themeStore } from "../../theme.store";
-import { history } from "../../navigation";
 import { Tooltip } from "../tooltip";
 import { KubectlBinaries } from "./kubectl-binaries";
 import { appPreferenceRegistry } from "../../../extensions/app-preference-registry";
+import { PageLayout } from "../layout/page-layout";
 
 @observer
 export class Preferences extends React.Component {
@@ -41,21 +41,9 @@ export class Preferences extends React.Component {
   }
 
   async componentDidMount() {
-    window.addEventListener('keydown', this.onEscapeKey);
     await this.loadHelmRepos();
   }
 
-  componentWillUnmount() {
-    window.removeEventListener('keydown', this.onEscapeKey);
-  }
-
-  onEscapeKey = (evt: KeyboardEvent) => {
-    if (evt.code === "Escape") {
-      evt.stopPropagation();
-      history.goBack();
-    }
-  }
-
   @action
   async loadHelmRepos() {
     this.helmLoading = true;
@@ -115,91 +103,86 @@ export class Preferences extends React.Component {
 
   render() {
     const { preferences } = userStore;
-    const extensionPreferences = appPreferenceRegistry.preferences
-    const header = (
-      <>
-        <h2>Preferences</h2>
-        <Icon material="close" big onClick={history.goBack}/>
-      </>
-    );
+    const extensionPreferences = appPreferenceRegistry.preferences;
+    const header = <h2><Trans>Preferences</Trans></h2>;
     return (
-      <div className="Preferences">
-        <WizardLayout header={header} centered>
-          <h2><Trans>Color Theme</Trans></h2>
-          <Select
-            options={this.themeOptions}
-            value={preferences.colorTheme}
-            onChange={({ value }: SelectOption) => preferences.colorTheme = value}
-          />
+      <PageLayout showOnTop className="Preferences" header={header}>
+        <h2><Trans>Color Theme</Trans></h2>
+        <Select
+          options={this.themeOptions}
+          value={preferences.colorTheme}
+          onChange={({ value }: SelectOption) => preferences.colorTheme = value}
+        />
 
-          <h2><Trans>HTTP Proxy</Trans></h2>
-          <Input
-            theme="round-black"
-            placeholder={_i18n._(t`Type HTTP proxy url (example: http://proxy.acme.org:8080)`)}
-            value={this.httpProxy}
-            onChange={v => this.httpProxy = v}
-            onBlur={() => preferences.httpsProxy = this.httpProxy}
-          />
-          <small className="hint">
-            <Trans>Proxy is used only for non-cluster communication.</Trans>
-          </small>
+        <h2><Trans>HTTP Proxy</Trans></h2>
+        <Input
+          theme="round-black"
+          placeholder={_i18n._(t`Type HTTP proxy url (example: http://proxy.acme.org:8080)`)}
+          value={this.httpProxy}
+          onChange={v => this.httpProxy = v}
+          onBlur={() => preferences.httpsProxy = this.httpProxy}
+        />
+        <small className="hint">
+          <Trans>Proxy is used only for non-cluster communication.</Trans>
+        </small>
 
-          <KubectlBinaries preferences={preferences} />
+        <KubectlBinaries preferences={preferences}/>
 
-          <h2><Trans>Helm</Trans></h2>
-          <Select
-            placeholder={<Trans>Repositories</Trans>}
-            isLoading={this.helmLoading}
-            isDisabled={this.helmLoading}
-            options={this.helmOptions}
-            onChange={this.onRepoSelect}
-            formatOptionLabel={this.formatHelmOptionLabel}
-            controlShouldRenderValue={false}
-          />
-          <div className="repos flex gaps column">
-            {Array.from(this.helmAddedRepos).map(([name, repo]) => {
-              const tooltipId = `message-${name}`;
-              return (
-                <Badge key={name} className="added-repo flex gaps align-center justify-space-between">
-                  <span id={tooltipId} className="repo">{name}</span>
-                  <Icon
-                    material="delete"
-                    onClick={() => this.removeRepo(repo)}
-                    tooltip={<Trans>Remove</Trans>}
-                  />
-                  <Tooltip targetId={tooltipId} formatters={{ narrow: true }}>
-                    {repo.url}
-                  </Tooltip>
-                </Badge>
-              )
-            })}
-          </div>
-
-          <h2><Trans>Certificate Trust</Trans></h2>
-          <Checkbox
-            label={<Trans>Allow untrusted Certificate Authorities</Trans>}
-            value={preferences.allowUntrustedCAs}
-            onChange={v => preferences.allowUntrustedCAs = v}
-          />
-          <small className="hint">
-            <Trans>This will make Lens to trust ANY certificate authority without any validations.</Trans>{" "}
-            <Trans>Needed with some corporate proxies that do certificate re-writing.</Trans>{" "}
-            <Trans>Does not affect cluster communications!</Trans>
-          </small>
-
-          {extensionPreferences.map(({title, components: { Hint, Input}}) => {
+        <h2><Trans>Helm</Trans></h2>
+        <Select
+          placeholder={<Trans>Repositories</Trans>}
+          isLoading={this.helmLoading}
+          isDisabled={this.helmLoading}
+          options={this.helmOptions}
+          onChange={this.onRepoSelect}
+          formatOptionLabel={this.formatHelmOptionLabel}
+          controlShouldRenderValue={false}
+        />
+        <div className="repos flex gaps column">
+          {Array.from(this.helmAddedRepos).map(([name, repo]) => {
+            const tooltipId = `message-${name}`;
             return (
-              <div key={title}>
+              <Badge key={name} className="added-repo flex gaps align-center justify-space-between">
+                <span id={tooltipId} className="repo">{name}</span>
+                <Icon
+                  material="delete"
+                  onClick={() => this.removeRepo(repo)}
+                  tooltip={<Trans>Remove</Trans>}
+                />
+                <Tooltip targetId={tooltipId} formatters={{ narrow: true }}>
+                  {repo.url}
+                </Tooltip>
+              </Badge>
+            )
+          })}
+        </div>
+
+        <h2><Trans>Certificate Trust</Trans></h2>
+        <Checkbox
+          label={<Trans>Allow untrusted Certificate Authorities</Trans>}
+          value={preferences.allowUntrustedCAs}
+          onChange={v => preferences.allowUntrustedCAs = v}
+        />
+        <small className="hint">
+          <Trans>This will make Lens to trust ANY certificate authority without any validations.</Trans>{" "}
+          <Trans>Needed with some corporate proxies that do certificate re-writing.</Trans>{" "}
+          <Trans>Does not affect cluster communications!</Trans>
+        </small>
+
+        <div className="extensions flex column gaps">
+          {extensionPreferences.map(({ title, components: { Hint, Input } }, index) => {
+            return (
+              <div key={index} className="preference">
                 <h2>{title}</h2>
-                <Input />
+                <Input/>
                 <small className="hint">
-                  <Hint />
+                  <Hint/>
                 </small>
               </div>
             )
           })}
-        </WizardLayout>
-      </div>
+        </div>
+      </PageLayout>
     );
   }
 }

src/renderer/components/+support/support.tsx

@@ -10,7 +10,7 @@ import { PageLayout } from "../layout/page-layout";
 export class Support extends React.Component {
   render() {
     return (
-      <PageLayout fullScreen className="Support" header={<h2>Support</h2>}>
+      <PageLayout showOnTop className="Support" header={<h2>Support</h2>}>
         <h2><Trans>Community Slack Channel</Trans></h2>
         <p>
           <Trans>Ask a question, see what's being discussed, join the conversation <a className="supportLink" href={slackUrl} target="_blank">here</a></Trans>{" "}

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

@@ -6,21 +6,21 @@
   display: grid !important;
   grid-template-rows: min-content 1fr;
 
-  // global page, covers whole app screen
-  &.global {
+  // covers whole app view area
+  &.top {
     position: fixed !important; // allow to cover ClustersMenu
     z-index: 1;
+
+    // adds extra space for traffic-light top buttons (mac only)
+    .is-mac & > .header {
+      padding-top: $spacing * 2;
+    }
   }
 
   > .header {
     position: sticky;
     padding: $spacing;
     background-color: $layoutTabsBackground;
-
-    // add extra spacing for traffic-light top buttons (mac only)
-    .is-mac & {
-      padding-top: $spacing * 2;
-    }
   }
 
   > .content-wrapper {
@@ -47,6 +47,15 @@
     color: $colorInfo;
   }
 
+  .SubTitle {
+    text-transform: none;
+    margin-bottom: 0 !important;
+
+    + * + .hint {
+      margin-top: -$padding / 2;
+    }
+  }
+
   .Select {
     &__control {
       box-shadow: 0 0 0 1px $borderFaintColor;

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

@@ -2,7 +2,7 @@ import "./page-layout.scss"
 
 import React from "react";
 import { observer } from "mobx-react";
-import { cssNames, IClassName } from "../../utils";
+import { autobind, cssNames, IClassName } from "../../utils";
 import { Icon } from "../icon";
 import { navigation } from "../../navigation";
 
@@ -13,7 +13,8 @@ export interface PageLayoutProps extends React.DOMAttributes<any> {
   contentClass?: IClassName;
   provideBackButtonNavigation?: boolean;
   contentGaps?: boolean;
-  fullScreen?: boolean; // covers whole app view
+  showOnTop?: boolean; // covers whole app view
+  back?: (evt: React.MouseEvent | KeyboardEvent) => void;
 }
 
 const defaultProps: Partial<PageLayoutProps> = {
@@ -25,7 +26,14 @@ const defaultProps: Partial<PageLayoutProps> = {
 export class PageLayout extends React.Component<PageLayoutProps> {
   static defaultProps = defaultProps as object;
 
-  back = () => navigation.goBack();
+  @autobind()
+  back(evt?: React.MouseEvent | KeyboardEvent) {
+    if (this.props.back) {
+      this.props.back(evt);
+    } else {
+      navigation.goBack();
+    }
+  }
 
   async componentDidMount() {
     window.addEventListener('keydown', this.onEscapeKey);
@@ -41,17 +49,18 @@ export class PageLayout extends React.Component<PageLayoutProps> {
     }
     if (evt.code === "Escape") {
       evt.stopPropagation();
-      this.back();
+      this.back(evt);
     }
   }
 
   render() {
     const {
-      className, contentClass, header, headerClass, provideBackButtonNavigation,
-      contentGaps, fullScreen, children, ...elemProps
+      contentClass, header, headerClass, provideBackButtonNavigation,
+      contentGaps, showOnTop, children, ...elemProps
     } = this.props;
+    const className = cssNames("PageLayout", { top: showOnTop }, this.props.className);
     return (
-      <div {...elemProps} className={cssNames("PageLayout", className, { global: fullScreen })}>
+      <div {...elemProps} className={className}>
         <div className={cssNames("header flex gaps align-center", headerClass)}>
           {header}
           {provideBackButtonNavigation && (