Cleaning settings page view (#3156)

* Making inputs consistent

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

* Fixing hover effect in inputs

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

* Adding separators to sidebar menu

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

* Fine-tuning general section

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

* Fine-tuning hidden metrics area

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

* EntityIcon in Settings sidebar

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

* Moving cluster icon settings on top

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

* Shrink Apply button a big

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

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

@@ -40,12 +40,16 @@ export function GeneralSettings({ entity }: EntitySettingViewProps) {
   return (
     <section>
       <section>
-        <components.ClusterNameSetting cluster={cluster} />
+        <div className="flex">
+          <div className="flex-grow pr-8">
+            <components.ClusterNameSetting cluster={cluster} />
+          </div>
+          <div>
+            <components.ClusterIconSetting cluster={cluster} entity={entity as KubernetesCluster} />
+          </div>
+        </div>
       </section>
-      <section>
-        <components.ClusterIconSetting cluster={cluster} entity={entity as KubernetesCluster} />
-      </section>
-      <section>
+      <section className="small">
         <components.ClusterKubeconfig cluster={cluster} />
       </section>
     </section>
@@ -106,10 +110,9 @@ export function MetricsSettings({ entity }: EntitySettingViewProps) {
       <section>
         <components.ClusterPrometheusSetting cluster={cluster} />
       </section>
+      <hr/>
       <section>
         <components.ClusterMetricsSetting cluster={cluster} />
-      </section>
-      <section>
         <components.ShowMetricsSetting cluster={cluster} />
       </section>
     </section>

src/renderer/components/cluster-settings/components/cluster-accessible-namespaces.tsx

@@ -54,6 +54,7 @@ export class ClusterAccessibleNamespaces extends React.Component<Props> {
             this.namespaces.delete(oldNamesapce);
             this.props.cluster.accessibleNamespaces = Array.from(this.namespaces);
           }}
+          inputTheme="round-black"
         />
         <small className="hint">
         This setting is useful for manually specifying which namespaces you have access to. This is useful when you do not have permissions to list namespaces.

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

@@ -21,15 +21,13 @@
 
 import React from "react";
 import type { Cluster } from "../../../../main/cluster";
-//import { FilePicker, OverSizeLimitStyle } from "../../file-picker";
 import { boundMethod } from "../../../utils";
-import { Button } from "../../button";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
-import { SubTitle } from "../../layout/sub-title";
 import { HotbarIcon } from "../../hotbar/hotbar-icon";
 import type { KubernetesCluster } from "../../../../common/catalog-entities";
 import { FilePicker, OverSizeLimitStyle } from "../../file-picker";
+import { MenuActions, MenuItem } from "../../menu";
 
 enum GeneralInputStatus {
   CLEAN = "clean",
@@ -46,6 +44,8 @@ export class ClusterIconSetting extends React.Component<Props> {
   @observable status = GeneralInputStatus.CLEAN;
   @observable errorText?: string;
 
+  private element = React.createRef<HTMLDivElement>();
+
   @boundMethod
   async onIconPick([file]: File[]) {
     const { cluster } = this.props;
@@ -66,16 +66,11 @@ export class ClusterIconSetting extends React.Component<Props> {
     }
   }
 
-  getClearButton() {
-    if (this.props.cluster.preferences.icon) {
-      return <Button
-        label="Clear"
-        tooltip="Revert back to default icon"
-        onClick={() => this.onIconPick([])}
-      />;
-    }
+  @boundMethod
+  onUploadClick() {
+    const input = this.element.current.querySelector("input[type=file]") as HTMLInputElement;
 
-    return null;
+    input.click();
   }
 
   render() {
@@ -87,24 +82,32 @@ export class ClusterIconSetting extends React.Component<Props> {
           title={entity.metadata.name}
           source={entity.metadata.source}
           src={entity.spec.icon?.src}
+          size={53}
         />
-        <span style={{marginRight: "var(--unit)"}}>Browse for new icon...</span>
       </>
     );
 
     return (
-      <>
-        <SubTitle title="Cluster Icon" />
-        <div className="file-loader">
-          <FilePicker
-            accept="image/*"
-            label={label}
-            onOverSizeLimit={OverSizeLimitStyle.FILTER}
-            handler={this.onIconPick}
-          />
-          {this.getClearButton()}
+      <div ref={this.element}>
+        <div className="file-loader flex flex-row items-center">
+          <div className="mr-5">
+            <FilePicker
+              accept="image/*"
+              label={label}
+              onOverSizeLimit={OverSizeLimitStyle.FILTER}
+              handler={this.onIconPick}
+            />
+          </div>
+          <MenuActions toolbar={false} autoCloseOnSelect={true} triggerIcon={{ material: "more_horiz" }}>
+            <MenuItem onClick={this.onUploadClick}>
+              Upload Icon
+            </MenuItem>
+            <MenuItem onClick={() => this.onIconPick([])} disabled={!this.props.cluster.preferences.icon}>
+              Clear
+            </MenuItem>
+          </MenuActions>
         </div>
-      </>
+      </div>
     );
   }
 }

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

@@ -25,6 +25,7 @@ import { observer } from "mobx-react";
 import { SubTitle } from "../../layout/sub-title";
 import { boundMethod } from "../../../../common/utils";
 import { shell } from "electron";
+import { Notice } from "../../+extensions/notice";
 
 interface Props {
   cluster: Cluster;
@@ -42,14 +43,12 @@ export class ClusterKubeconfig extends React.Component<Props> {
 
   render() {
     return (
-      <>
+      <Notice>
         <SubTitle title="Kubeconfig" />
-
         <span>
           <a className="link value" onClick={this.openKubeconfig}>{this.props.cluster.kubeConfigPath}</a>
         </span>
-
-      </>
+      </Notice>
     );
   }
 }

src/renderer/components/cluster-settings/components/cluster-metrics-setting.tsx

@@ -100,6 +100,7 @@ export class ClusterMetricsSetting extends React.Component<Props> {
           options={Object.values(ClusterMetricsResourceType)}
           onChange={this.onChangeSelect}
           formatOptionLabel={this.formatOptionLabel}
+          themeName="lens"
         />
         <Button
           primary
@@ -118,7 +119,7 @@ export class ClusterMetricsSetting extends React.Component<Props> {
   render() {
 
     return (
-      <div className="MetricsSelect">
+      <div className="MetricsSelec0 mb-5">
         <SubTitle title={"Hide metrics from the UI"}/>
         <div className="flex gaps">
           {this.renderMetricsSelect()}

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

@@ -138,26 +138,30 @@ export class ClusterPrometheusSetting extends React.Component<Props> {
                     this.onSaveProvider();
                   }}
                   options={this.options}
+                  themeName="lens"
                 />
                 <small className="hint">What query format is used to fetch metrics from Prometheus</small>
               </>
           }
         </section>
         {this.canEditPrometheusPath && (
-          <section>
-            <p>Prometheus service address.</p>
-            <Input
-              theme="round-black"
-              value={this.path}
-              onChange={(value) => this.path = value}
-              onBlur={this.onSavePath}
-              placeholder="<namespace>/<service>:<port>"
-            />
-            <small className="hint">
-              An address to an existing Prometheus installation{" "}
-              ({"<namespace>/<service>:<port>"}). {productName} tries to auto-detect address if left empty.
-            </small>
-          </section>
+          <>
+            <hr/>
+            <section>
+              <SubTitle title="Prometheus service address" />
+              <Input
+                theme="round-black"
+                value={this.path}
+                onChange={(value) => this.path = value}
+                onBlur={this.onSavePath}
+                placeholder="<namespace>/<service>:<port>"
+              />
+              <small className="hint">
+                An address to an existing Prometheus installation{" "}
+                ({"<namespace>/<service>:<port>"}). {productName} tries to auto-detect address if left empty.
+              </small>
+            </section>
+          </>
         )}
       </>
     );

src/renderer/components/cluster-settings/components/cluster-show-metrics.tsx

@@ -25,6 +25,7 @@ import type { Cluster } from "../../../../main/cluster";
 import { observable, reaction, makeObservable } from "mobx";
 import { Badge } from "../../badge/badge";
 import { Icon } from "../../icon/icon";
+import { Notice } from "../../+extensions/notice";
 
 interface Props {
   cluster: Cluster;
@@ -55,14 +56,20 @@ export class ShowMetricsSetting extends React.Component<Props> {
   }
 
   renderMetrics() {
+    const metrics = Array.from(this.hiddenMetrics);
+
+    if (!metrics.length) {
+      return (
+        <div className="flex-grow text-center">All metrics are visible on the UI</div>
+      );
+    }
 
     return (
-
-      Array.from(this.hiddenMetrics).map(name => {
+      metrics.map(name => {
         const tooltipId = `${name}`;
 
         return (
-          <Badge key={name}>
+          <Badge key={name} flat>
             <span id={tooltipId}>{name}</span>
             <Icon
               smallest
@@ -79,9 +86,11 @@ export class ShowMetricsSetting extends React.Component<Props> {
   render() {
 
     return (
-      <div className="MetricsSelect flex wrap gaps">
-        {this.renderMetrics()}
-      </div>
+      <Notice>
+        <div className="MetricsSelect flex wrap gaps leading-relaxed">
+          {this.renderMetrics()}
+        </div>
+      </Notice>
     );
   }
 }