From 89b2c79fe292617786a7ad555189bc3be3b18176 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Thu, 12 Aug 2021 16:27:48 +0300
Subject: [PATCH] Using RemovableItem for items in Kubernetes page

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../+preferences/helm-charts.module.css       | 33 ++++++++
 .../components/+preferences/helm-charts.tsx   | 20 ++---
 .../+preferences/kubeconfig-syncs.tsx         | 80 ++++++++-----------
 .../+preferences/kubectl-binaries.tsx         | 14 +---
 .../+preferences/removable-item.module.css    |  7 ++
 .../+preferences/removable-item.tsx           | 48 +++++++++++
 .../components/layout/setting-layout.scss     |  2 +-
 7 files changed, 136 insertions(+), 68 deletions(-)
 create mode 100644 src/renderer/components/+preferences/helm-charts.module.css
 create mode 100644 src/renderer/components/+preferences/removable-item.module.css
 create mode 100644 src/renderer/components/+preferences/removable-item.tsx

diff --git a/src/renderer/components/+preferences/helm-charts.module.css b/src/renderer/components/+preferences/helm-charts.module.css
new file mode 100644
index 0000000000..287124cd41
--- /dev/null
+++ b/src/renderer/components/+preferences/helm-charts.module.css
@@ -0,0 +1,33 @@
+/**
+ * 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.
+ */
+
+.repos {
+  @apply mt-6 flex flex-col;
+}
+
+.repoName {
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.repoUrl {
+  color: var(--textColorDimmed);
+}
\ No newline at end of file
diff --git a/src/renderer/components/+preferences/helm-charts.tsx b/src/renderer/components/+preferences/helm-charts.tsx
index 94f95ccb40..2de1b68eec 100644
--- a/src/renderer/components/+preferences/helm-charts.tsx
+++ b/src/renderer/components/+preferences/helm-charts.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./helm-charts.scss";
+import styles from "./helm-charts.module.css";
 
 import React from "react";
 import { action, computed, observable, makeObservable } from "mobx";
@@ -31,6 +31,7 @@ import { Notifications } from "../notifications";
 import { Select, SelectOption } from "../select";
 import { AddHelmRepoDialog } from "./add-helm-repo-dialog";
 import { observer } from "mobx-react";
+import { RemovableItem } from "./removable-item";
 
 @observer
 export class HelmCharts extends React.Component {
@@ -119,7 +120,7 @@ export class HelmCharts extends React.Component {
 
   render() {
     return (
-      <div className="HelmCharts">
+      <div>
         <div className="flex gaps">
           <Select id="HelmRepoSelect"
             placeholder="Repositories"
@@ -139,20 +140,15 @@ export class HelmCharts extends React.Component {
           />
         </div>
         <AddHelmRepoDialog onAddRepo={() => this.loadRepos()}/>
-        <div className="repos flex gaps column">
+        <div className={styles.repos}>
           {Array.from(this.addedRepos).map(([name, repo]) => {
             return (
-              <div key={name} className="repo flex gaps align-center justify-space-between">
+              <RemovableItem key={name} onRemove={() => this.removeRepo(repo)} className="mt-3">
                 <div>
-                  <div className="repoName">{name}</div>
-                  <div className="repoUrl">{repo.url}</div>
+                  <div className={styles.repoName}>{name}</div>
+                  <div className={styles.repoUrl}>{repo.url}</div>
                 </div>
-                <Icon
-                  material="delete"
-                  onClick={() => this.removeRepo(repo)}
-                  tooltip="Remove"
-                />
-              </div>
+              </RemovableItem>
             );
           })}
         </div>
diff --git a/src/renderer/components/+preferences/kubeconfig-syncs.tsx b/src/renderer/components/+preferences/kubeconfig-syncs.tsx
index c09113aac1..3d071d8793 100644
--- a/src/renderer/components/+preferences/kubeconfig-syncs.tsx
+++ b/src/renderer/components/+preferences/kubeconfig-syncs.tsx
@@ -18,19 +18,19 @@
  * 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 React from "react";
-import { Avatar, IconButton, List, ListItem, ListItemAvatar, ListItemSecondaryAction, ListItemText, Paper } from "@material-ui/core";
-import { Description, Folder, Delete, HelpOutline } from "@material-ui/icons";
-import { action, computed, observable, reaction, makeObservable } from "mobx";
-import { disposeOnUnmount, observer } from "mobx-react";
 import fse from "fs-extra";
+import { action, computed, makeObservable, observable, reaction } from "mobx";
+import { disposeOnUnmount, observer } from "mobx-react";
+import React from "react";
+
 import { KubeconfigSyncEntry, KubeconfigSyncValue, UserStore } from "../../../common/user-store";
-import { Spinner } from "../spinner";
+import { isWindows } from "../../../common/vars";
 import logger from "../../../main/logger";
 import { iter, multiSet } from "../../utils";
-import { isWindows } from "../../../common/vars";
+import { SubTitle } from "../layout/sub-title";
 import { PathPicker } from "../path-picker/path-picker";
+import { Spinner } from "../spinner";
+import { RemovableItem } from "./removable-item";
 
 interface SyncInfo {
   type: "file" | "folder" | "unknown";
@@ -111,41 +111,29 @@ export class KubeconfigSyncs extends React.Component {
   @action
   onPick = async (filePaths: string[]) => multiSet(this.syncs, await getAllEntries(filePaths));
 
-  renderEntryIcon(entry: Entry) {
+  getIconName(entry: Entry) {
     switch (entry.info.type) {
       case "file":
-        return <Description />;
+        return "description";
       case "folder":
-        return <Folder />;
+        return "folder";
       case "unknown":
-        return <HelpOutline />;
+        return "help_outline";
     }
   }
 
   renderEntry = (entry: Entry) => {
     return (
-      <Paper className="entry" key={entry.filePath} elevation={3}>
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar>
-              {this.renderEntryIcon(entry)}
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText
-            primary={entry.filePath}
-            className="description"
-          />
-          <ListItemSecondaryAction className="action">
-            <IconButton
-              edge="end"
-              aria-label="delete"
-              onClick={() => this.syncs.delete(entry.filePath)}
-            >
-              <Delete />
-            </IconButton>
-          </ListItemSecondaryAction>
-        </ListItem>
-      </Paper>
+      <RemovableItem
+        key={entry.filePath}
+        onRemove={() => this.syncs.delete(entry.filePath)}
+        className="mt-3"
+        icon={this.getIconName(entry)}
+      >
+        <div className="flex-grow break-all">
+          {entry.filePath}
+        </div>
+      </RemovableItem>
     );
   };
 
@@ -161,26 +149,25 @@ export class KubeconfigSyncs extends React.Component {
     }
 
     return (
-      <List className="kubeconfig-sync-list">
+      <div>
         {entries.map(this.renderEntry)}
-      </List>
+      </div>
     );
   }
 
   renderSyncButtons() {
     if (isWindows) {
       return (
-        <div className="flex gaps align-center">
+        <div className="flex gaps align-center mb-5">
           <PathPicker
             label="Sync file(s)"
-            className="box grow"
             onPick={this.onPick}
             buttonLabel="Sync"
             properties={["showHiddenFiles", "multiSelections", "openFile"]}
           />
+          <span>or</span>
           <PathPicker
             label="Sync folder(s)"
-            className="box grow"
             onPick={this.onPick}
             buttonLabel="Sync"
             properties={["showHiddenFiles", "multiSelections", "openDirectory"]}
@@ -190,12 +177,14 @@ export class KubeconfigSyncs extends React.Component {
     }
 
     return (
-      <PathPicker
-        label="Sync file(s) and folder(s)"
-        onPick={this.onPick}
-        buttonLabel="Sync"
-        properties={["showHiddenFiles", "multiSelections", "openFile", "openDirectory"]}
-      />
+      <div className="self-start mb-5">
+        <PathPicker
+          label="Sync Files and Folders"
+          onPick={this.onPick}
+          buttonLabel="Sync"
+          properties={["showHiddenFiles", "multiSelections", "openFile", "openDirectory"]}
+        />
+      </div>
     );
   }
 
@@ -203,6 +192,7 @@ export class KubeconfigSyncs extends React.Component {
     return (
       <>
         {this.renderSyncButtons()}
+        <SubTitle title="Synced Items" className="pt-5"/>
         {this.renderEntries()}
       </>
     );
diff --git a/src/renderer/components/+preferences/kubectl-binaries.tsx b/src/renderer/components/+preferences/kubectl-binaries.tsx
index 7cb3b8c105..9c7bff3132 100644
--- a/src/renderer/components/+preferences/kubectl-binaries.tsx
+++ b/src/renderer/components/+preferences/kubectl-binaries.tsx
@@ -46,7 +46,7 @@ export const KubectlBinaries = observer(() => {
 
   return (
     <>
-      <section className="small">
+      <section>
         <SubTitle title="Kubectl binary download"/>
         <FormSwitch
           control={
@@ -60,9 +60,7 @@ export const KubectlBinaries = observer(() => {
         />
       </section>
 
-      <hr className="small"/>
-
-      <section className="small">
+      <section>
         <SubTitle title="Download mirror" />
         <Select
           placeholder="Download mirror for kubectl"
@@ -74,9 +72,7 @@ export const KubectlBinaries = observer(() => {
         />
       </section>
 
-      <hr className="small"/>
-
-      <section className="small">
+      <section>
         <SubTitle title="Directory for binaries" />
         <Input
           theme="round-black"
@@ -92,9 +88,7 @@ export const KubectlBinaries = observer(() => {
         </div>
       </section>
 
-      <hr className="small"/>
-
-      <section className="small">
+      <section>
         <SubTitle title="Path to kubectl binary" />
         <Input
           theme="round-black"
diff --git a/src/renderer/components/+preferences/removable-item.module.css b/src/renderer/components/+preferences/removable-item.module.css
new file mode 100644
index 0000000000..e170da9532
--- /dev/null
+++ b/src/renderer/components/+preferences/removable-item.module.css
@@ -0,0 +1,7 @@
+.item {
+  --flex-gap: 1.2rem;
+
+  @apply rounded-md px-7 py-5 shadow-sm;
+  background: var(--inputControlBackground);
+  min-height: 65px;
+}
\ No newline at end of file
diff --git a/src/renderer/components/+preferences/removable-item.tsx b/src/renderer/components/+preferences/removable-item.tsx
new file mode 100644
index 0000000000..19164746fa
--- /dev/null
+++ b/src/renderer/components/+preferences/removable-item.tsx
@@ -0,0 +1,48 @@
+/**
+ * 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 styles from "./removable-item.module.css";
+
+import React, { DOMAttributes } from "react";
+
+import { cssNames } from "../../utils";
+import { Icon } from "../icon";
+
+interface Props extends DOMAttributes<any>{
+  icon?: string;
+  onRemove: () => void;
+  className?: string;
+}
+
+export function RemovableItem({icon, onRemove, children, className, ...rest}: Props) {
+  return (
+    <div className={cssNames(styles.item, "flex gaps align-center justify-space-between", className)} {...rest}>
+      {icon && (
+        <Icon material={icon}/>
+      )}
+      {children}
+      <Icon
+        material="delete"
+        onClick={onRemove}
+        tooltip="Remove"
+      />
+    </div>
+  );
+}
diff --git a/src/renderer/components/layout/setting-layout.scss b/src/renderer/components/layout/setting-layout.scss
index 3e6bfd8726..7fd66d0d90 100644
--- a/src/renderer/components/layout/setting-layout.scss
+++ b/src/renderer/components/layout/setting-layout.scss
@@ -228,7 +228,7 @@
       margin-top: 0;
       margin-bottom: 8px;
       padding-bottom: 0;
-      font-size: 12px;
+      font-size: 13px;
       line-height: 1;
     }