Moving cluster icon settings on top

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

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

@@ -39,18 +39,17 @@ export function GeneralSettings({ entity }: EntitySettingViewProps) {
 
   return (
     <section>
+      <section>
+        <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 className="small">
-        <p>General Cluster settings.</p>
-      </section>
-      <section>
-        <components.ClusterNameSetting cluster={cluster} />
-      </section>
-      <hr/>
-      <section>
-        <components.ClusterIconSetting cluster={cluster} entity={entity as KubernetesCluster} />
-      </section>
-      <hr/>
-      <section>
         <components.ClusterKubeconfig cluster={cluster} />
       </section>
     </section>

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

@@ -22,13 +22,12 @@
 import React from "react";
 import type { Cluster } from "../../../../main/cluster";
 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",
@@ -45,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;
@@ -65,13 +66,11 @@ export class ClusterIconSetting extends React.Component<Props> {
     }
   }
 
-  getClearButton() {
-    return <Button
-      label="Clear"
-      onClick={() => this.onIconPick([])}
-      disabled={!this.props.cluster.preferences.icon}
-      className="ml-5"
-    />;
+  @boundMethod
+  onUploadClick() {
+    const input = this.element.current.querySelector("input[type=file]") as HTMLInputElement;
+
+    input.click();
   }
 
   render() {
@@ -83,25 +82,32 @@ export class ClusterIconSetting extends React.Component<Props> {
           title={entity.metadata.name}
           source={entity.metadata.source}
           src={entity.spec.icon?.src}
-          size={50}
+          size={53}
         />
-        <Button className="ml-5">Upload Icon</Button>
       </>
     );
 
     return (
-      <>
-        <SubTitle title="Cluster Icon" />
-        <div className="file-loader flex flex-row items-center mt-2">
-          <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/layout/setting-layout.scss

@@ -211,7 +211,7 @@
       font-size: 18px;
       line-height: 20px;
       font-weight: 600;
-      margin-bottom: 20px;
+      margin-bottom: 30px;
     }
 
     a {