Preferences section restyling (#700)

* Adding 'centering' option to WizardLayout

Signed-off-by: alexfront <alex.andreev.email@gmail.com>

* Using centered layout in Cluster Settings

Signed-off-by: alexfront <alex.andreev.email@gmail.com>

* Restyling Preferences section

Signed-off-by: alexfront <alex.andreev.email@gmail.com>

* Simplifying Helm loading state

Signed-off-by: alexfront <alex.andreev.email@gmail.com>
Signed-off-by: Lauri Nevala <lauri.nevala@gmail.com>

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

@@ -1,6 +1,7 @@
 .ClusterSettings {
   .WizardLayout {
     grid-template-columns: unset;
+    grid-template-rows: 76px 1fr;
     padding: 0;
 
     .head-col {
@@ -9,15 +10,6 @@
       :nth-child(2) {
         flex: 1 0 0;
       }
-
-      a {
-        text-decoration: none;
-        color: $grey-600;
-      }
-    }
-
-    .info-col {
-      display: none;
     }
 
     .content-col {
@@ -29,25 +21,18 @@
         text-transform: none;
       }
 
-      .settings-wrapper {
-        margin: 0 auto;
-        width: 60%;
-        min-width: 570px;
-        max-width: 1000px;
+      > div {
+        margin-top: $margin * 5;
+      }
 
-        > div {
-          margin-top: $margin * 5;
-        }
+      .admin-note {
+        font-size: small;
+        opacity: 0.5;
+        margin-left: $margin;
+      }
 
-        .admin-note {
-          font-size: small;
-          opacity: 0.5;
-          margin-left: $margin;
-        }
-
-        .button-area {
-          margin-top: $margin * 2;
-        }
+      .button-area {
+        margin-top: $margin * 2;
       }
 
       .file-loader {

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

@@ -1,7 +1,6 @@
 import "./cluster-settings.scss";
 
 import React from "react";
-import { Link } from "react-router-dom";
 import { observer } from "mobx-react";
 import { Features } from "./features";
 import { Removal } from "./removal";
@@ -11,6 +10,7 @@ import { WizardLayout } from "../layout/wizard-layout";
 import { ClusterIcon } from "../cluster-icon";
 import { Icon } from "../icon";
 import { getMatchedCluster } from "../cluster-manager/cluster-view.route";
+import { navigate } from "../../navigation";
 
 @observer
 export class ClusterSettings extends React.Component {
@@ -25,20 +25,16 @@ export class ClusterSettings extends React.Component {
           showTooltip={false}
         />
         <h2>{cluster.preferences.clusterName}</h2>
-        <Link to="/">
-          <Icon material="close" big/>
-        </Link>
+        <Icon material="close" onClick={() => navigate("/")} big/>
       </>
     );
     return (
       <div className="ClusterSettings">
-        <WizardLayout header={header}>
-          <div className="settings-wrapper">
-            <Status cluster={cluster}></Status>
-            <General cluster={cluster}></General>
-            <Features cluster={cluster}></Features>
-            <Removal cluster={cluster}></Removal>
-          </div>
+        <WizardLayout header={header} centered>
+          <Status cluster={cluster}></Status>
+          <General cluster={cluster}></General>
+          <Features cluster={cluster}></Features>
+          <Removal cluster={cluster}></Removal>
         </WizardLayout>
       </div>
     );

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

@@ -1,23 +1,51 @@
 .Preferences {
-  h2 {
-    &:not(:first-child) {
-      margin-top: $padding * 3;
+  position: fixed!important; // Allows to cover ClustersMenu
+  z-index: 1;
+
+  .WizardLayout {
+    grid-template-columns: unset;
+    grid-template-rows: 76px 1fr;
+    padding: 0;
+
+    .content-col {
+      background-color: transparent;
+      padding: $padding * 8 0;
+
+      h2 {
+        margin-bottom: $margin * 2;
+
+        &:not(:first-child) {
+          margin-top: $margin * 3;
+        }
+      }
+
+      .repos {
+        position: relative;
+
+        .Badge {
+          display: flex;
+          margin: 0;
+          margin-bottom: 1px;
+          padding: $padding $padding * 2;
+        }
+      }
+
+      .hint {
+        margin-top: -$margin;
+      }
     }
   }
 
-  .info-block {
-    --flex-gap: #{$padding};
+  .is-mac & {
+    .WizardLayout .head-col {
+      padding-top: 32px;
+      overflow: hidden;
+    }
   }
 
-  .repos {
-    --flex-gap: #{$padding};
-
-    > .title {
-      font-style: italic;
-    }
-
-    .Badge {
-      margin: $padding / 2;
+  .Select {
+    &__control {
+      box-shadow: 0 0 0 1px $borderFaintColor;
     }
   }
 }

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

@@ -1,5 +1,5 @@
 import "./preferences.scss"
-import React, { Fragment } from "react";
+import React from "react";
 import { observer } from "mobx-react";
 import { action, computed, observable } from "mobx";
 import { t, Trans } from "@lingui/macro";
@@ -15,11 +15,12 @@ import { Notifications } from "../notifications";
 import { Badge } from "../badge";
 import { Spinner } from "../spinner";
 import { themeStore } from "../../theme.store";
+import { history } from "../../navigation";
+import { Tooltip } from "../tooltip";
 
 @observer
 export class Preferences extends React.Component {
   @observable helmLoading = false;
-  @observable helmUpdating = false;
   @observable helmRepos: HelmRepo[] = [];
   @observable helmAddedRepos = observable.map<string, HelmRepo>();
 
@@ -88,9 +89,9 @@ export class Preferences extends React.Component {
       Notifications.ok(<Trans>Helm branch <b>{repo.name}</b> already in use</Trans>)
       return;
     }
-    this.helmUpdating = false;
+    this.helmLoading = true;
     await this.addRepo(repo);
-    this.helmUpdating = false;
+    this.helmLoading = false;
   }
 
   formatHelmOptionLabel = ({ value: repo }: SelectOption<HelmRepo>) => {
@@ -103,104 +104,96 @@ export class Preferences extends React.Component {
     )
   }
 
-  renderInfo() {
-    return (
-      <Fragment>
-        <h2>
-          <Trans>Preferences</Trans>
-        </h2>
-        <div className="info-block flex gaps align-flex-start">
-          <Icon small material="info"/>
-          <p>
-            <Trans>Lens Global Settings</Trans> (<Trans>applicable to all clusters</Trans>)
-          </p>
-        </div>
-      </Fragment>
-    )
-  }
-
   render() {
     const { preferences } = userStore;
+    const header = (
+      <>
+        <h2>Preferences</h2>
+        <Icon material="close" big onClick={history.goBack}/>
+      </>
+    );
     return (
-      <WizardLayout className="Preferences" infoPanel={this.renderInfo()}>
-        <h2><Trans>Color Theme</Trans></h2>
-        <Select
-          options={this.themeOptions}
-          value={preferences.colorTheme}
-          onChange={({ value }: SelectOption) => preferences.colorTheme = value}
-        />
+      <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}
+          />
 
-        <h2><Trans>Download Mirror</Trans></h2>
-        <Select
-          placeholder={<Trans>Download mirror for kubectl</Trans>}
-          options={this.downloadMirrorOptions}
-          value={preferences.downloadMirror}
-          onChange={({ value }: SelectOption) => preferences.downloadMirror = value}
-        />
+          <h2><Trans>Download Mirror</Trans></h2>
+          <Select
+            placeholder={<Trans>Download mirror for kubectl</Trans>}
+            options={this.downloadMirrorOptions}
+            value={preferences.downloadMirror}
+            onChange={({ value }: SelectOption) => preferences.downloadMirror = value}
+          />
 
-        <h2><Trans>Helm</Trans></h2>
-        <Select
-          placeholder={<Trans>Repositories</Trans>}
-          isLoading={this.helmLoading}
-          isDisabled={this.helmUpdating}
-          options={this.helmOptions}
-          onChange={this.onRepoSelect}
-          formatOptionLabel={this.formatHelmOptionLabel}
-          controlShouldRenderValue={false}
-        />
-        <div className="repos flex gaps align-center">
-          <div className="title">
-            <Trans>Added repos:</Trans>
-          </div>
-          <div className="repos-list">
-            {this.helmLoading && <Spinner/>}
+          <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" title={repo.url}>
-                  <span className="repo">{name}</span>
+                <Badge key={name} className="added-repo flex gaps align-center justify-space-between">
+                  <span id={tooltipId} className="repo">{name}</span>
                   <Icon
-                    material="remove_circle_outline"
+                    material="delete"
                     onClick={() => this.removeRepo(repo)}
                     tooltip={<Trans>Remove</Trans>}
                   />
+                  <Tooltip targetId={tooltipId} formatters={{ narrow: true }}>
+                    {repo.url}
+                  </Tooltip>
                 </Badge>
               )
             })}
           </div>
-        </div>
 
-        <h2><Trans>HTTP Proxy</Trans></h2>
-        <Input
-          placeholder={_i18n._(t`Type HTTP proxy url (example: http://proxy.acme.org:8080)`)}
-          value={preferences.httpsProxy || ""}
-          onChange={v => preferences.httpsProxy = v}
-        />
-        <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={preferences.httpsProxy || ""}
+            onChange={v => preferences.httpsProxy = v}
+          />
+          <small className="hint">
+            <Trans>Proxy is used only for non-cluster communication.</Trans>
+          </small>
 
-        <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>
+          <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>
 
-        <h2><Trans>Telemetry & Usage Tracking</Trans></h2>
-        <Checkbox
-          label={<Trans>Allow telemetry & usage tracking</Trans>}
-          value={preferences.allowTelemetry}
-          onChange={v => preferences.allowTelemetry = v}
-        />
-        <small className="hint">
-          <Trans>Telemetry & usage data is collected to continuously improve the Lens experience.</Trans>
-        </small>
-      </WizardLayout>
-    )
+          <h2><Trans>Telemetry & Usage Tracking</Trans></h2>
+          <Checkbox
+            label={<Trans>Allow telemetry & usage tracking</Trans>}
+            value={preferences.allowTelemetry}
+            onChange={v => preferences.allowTelemetry = v}
+          />
+          <small className="hint">
+            <Trans>Telemetry & usage data is collected to continuously improve the Lens experience.</Trans>
+          </small>
+        </WizardLayout>
+      </div>
+    );
   }
 }

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

@@ -16,6 +16,7 @@
   > .head-col {
     position: sticky;
     border-bottom: 1px solid $grey-800;
+    justify-content: space-between;
   }
 
   > .content-col {
@@ -41,4 +42,17 @@
   a {
     color: $colorInfo;
   }
+
+  &.centered {
+    .content-col {
+      margin: 0;
+
+      > div {
+        margin: 0 auto;
+        width: 60%;
+        min-width: 570px;
+        max-width: 1000px;
+      }
+    }
+  }
 }

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

@@ -10,25 +10,30 @@ interface Props {
   contentClass?: IClassName;
   infoPanelClass?: IClassName;
   infoPanel?: React.ReactNode;
+  centered?: boolean;  // Centering content horizontally
 }
 
 @observer
 export class WizardLayout extends React.Component<Props> {
   render() {
-    const { className, contentClass, infoPanelClass, infoPanel, header, headerClass, children: content } = this.props;
+    const { className, contentClass, infoPanelClass, infoPanel, header, headerClass, centered, children: content } = this.props;
     return (
-      <div className={cssNames("WizardLayout", className)}>
+      <div className={cssNames("WizardLayout", { centered }, className)}>
         {header && (
           <div className={cssNames("head-col flex gaps align-center", headerClass)}>
             {header}
           </div>
         )}
         <div className={cssNames("content-col flex column gaps", contentClass)}>
-          {content}
-        </div>
-        <div className={cssNames("info-col flex column gaps", infoPanelClass)}>
-          {infoPanel}
+          <div className="flex column gaps">
+            {content}
+          </div>
         </div>
+        {infoPanel && (
+          <div className={cssNames("info-col flex column gaps", infoPanelClass)}>
+            {infoPanel}
+          </div>
+        )}
       </div>
     )
   }

src/renderer/components/select/select.scss

@@ -23,7 +23,7 @@ html {
     &--is-disabled {
       opacity: .75;
       cursor: not-allowed;
-      pointer-events: auto;
+      pointer-events: none;
     }
 
     &__control {