From f6971073b8da8bfaf4a82020cfa8a62e27c65115 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <smalton@mirantis.com>
Date: Wed, 2 Sep 2020 10:51:39 -0400
Subject: [PATCH] style editable list list of lists, switch to using <>

Signed-off-by: Sebastian Malton <smalton@mirantis.com>
---
 src/main/cluster.ts                           |  4 ++--
 .../cluster-accessible-namespaces.tsx         |  2 +-
 .../editable-list/editable-list.scss          | 20 +++++++++++++++++--
 .../editable-list/editable-list.tsx           | 13 ++++++------
 4 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/main/cluster.ts b/src/main/cluster.ts
index 8d80ca9dd4..b88fe6c7ef 100644
--- a/src/main/cluster.ts
+++ b/src/main/cluster.ts
@@ -80,7 +80,7 @@ export class Cluster implements ClusterModel, ClusterState {
   @observable metadata: ClusterMetadata = {};
   @observable allowedNamespaces: string[] = [];
   @observable allowedResources: string[] = [];
-  @observable accessibleNamespaces?: string[];
+  @observable accessibleNamespaces: string[] = [];
 
   @computed get available() {
     return this.accessible && !this.disconnected;
@@ -427,7 +427,7 @@ export class Cluster implements ClusterModel, ClusterState {
   }
 
   protected async getAllowedNamespaces() {
-    if (this.accessibleNamespaces?.length) {
+    if (this.accessibleNamespaces.length) {
       return this.accessibleNamespaces
     }
 
diff --git a/src/renderer/components/+cluster-settings/components/cluster-accessible-namespaces.tsx b/src/renderer/components/+cluster-settings/components/cluster-accessible-namespaces.tsx
index 54f5f5ee59..a887bc3424 100644
--- a/src/renderer/components/+cluster-settings/components/cluster-accessible-namespaces.tsx
+++ b/src/renderer/components/+cluster-settings/components/cluster-accessible-namespaces.tsx
@@ -17,7 +17,7 @@ export class ClusterAccessibleNamespaces extends React.Component<Props> {
   render() {
     return (
       <>
-        <SubTitle title="Cluster's Accessible Namespaces" />
+        <SubTitle title="Accessible Namespaces" />
         <p>This setting is useful for manually specifying which namespaces you have access to. This is useful when you don't have permissions to list namespaces.</p>
         <EditableList
           placeholder={_i18n._("Add new namespace...")}
diff --git a/src/renderer/components/editable-list/editable-list.scss b/src/renderer/components/editable-list/editable-list.scss
index 95278a8700..a331e4dc83 100644
--- a/src/renderer/components/editable-list/editable-list.scss
+++ b/src/renderer/components/editable-list/editable-list.scss
@@ -1,12 +1,28 @@
 .EditableList {
   .el-contents {
-    display: grid;
-    grid-template-columns: 1fr auto;
+    display: flex;
+    flex-direction: column;
+    margin-top: $padding * 2;
 
     .el-value-remove {
       .Icon {
         justify-content: unset;
       }
     }
+
+    .el-item {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      padding: $padding $padding * 2;
+      margin-bottom: 1px;
+
+      :last-child {
+        margin-bottom: unset;
+      }
+
+      :first-child {
+        align-self: center;
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/src/renderer/components/editable-list/editable-list.tsx b/src/renderer/components/editable-list/editable-list.tsx
index e3520c25ab..e530afa4b2 100644
--- a/src/renderer/components/editable-list/editable-list.tsx
+++ b/src/renderer/components/editable-list/editable-list.tsx
@@ -45,6 +45,7 @@ export class EditableList<T> extends React.Component<Props<T>> {
       <div className="EditableList">
         <div className="el-header">
           <Input
+            theme="round-black"
             value={this.currentNewItem}
             onSubmit={this.onSubmit}
             placeholder={placeholder}
@@ -53,14 +54,14 @@ export class EditableList<T> extends React.Component<Props<T>> {
         </div>
         <div className="el-contents">
           {
-            items
-              .map((item, index) => [
-                <div key={`${index}-value`}>{renderItem(item, index)}</div>,
-                <div key={`${index}-remove`} className="el-value-remove">
+            items.map((item, index) => (
+              <div key={item + `${index}`} className="el-item Badge">
+                <div>{renderItem(item, index)}</div>
+                <div className="el-value-remove">
                   <Icon material="delete_outline" onClick={() => remove(({ index, oldItem: item }))} />
                 </div>
-              ])
-              .flat()
+              </div>
+            ))
           }
         </div>
       </div>