Add mechanism for users to specify accessible namespaces (#702)

* Add mechanism for users to specify namespaces that are accessible to them. This is generally useful for when the user doesn't have permission to list the namespaces.

- Add new component "EditableList" which provides a simple way to
  display a list of items that can be added too.

- Add the ClusterAccessibleNamespaces to the GeneralClusterSettings

- style editable list list of lists, switch to using <>

Signed-off-by: Sebastian Malton <sebastian@malton.name>

Co-authored-by: Sebastian Malton <smalton@mirantis.com>

src/renderer/components/editable-list/editable-list.scss

@@ -0,0 +1,28 @@
+.EditableList {
+  .el-contents {
+    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;
+      }
+    }
+  }
+}

src/renderer/components/editable-list/editable-list.tsx

@@ -0,0 +1,71 @@
+import "./editable-list.scss"
+
+import React from "react";
+import { Icon } from "../icon";
+import { Input } from "../input";
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import { autobind } from "../../utils";
+import { _i18n } from "../../i18n";
+
+export interface Props<T> {
+  items: T[],
+  add: (newItem: string) => void,
+  remove: (info: { oldItem: T, index: number }) => void,
+  placeholder?: string,
+
+  // An optional prop used to convert T to a displayable string
+  // defaults to `String`
+  renderItem?: (item: T, index: number) => React.ReactNode,
+}
+
+const defaultProps: Partial<Props<any>> = {
+  placeholder: _i18n._("Add new item..."),
+  renderItem: (item: any, index: number) => <React.Fragment key={index}>{item}</React.Fragment>
+}
+
+@observer
+export class EditableList<T> extends React.Component<Props<T>> {
+  static defaultProps = defaultProps as Props<any>;
+  @observable currentNewItem = "";
+
+  @autobind()
+  onSubmit(val: string) {
+    const { add } = this.props
+
+    if (val) {
+      add(val)
+      this.currentNewItem = ""
+    }
+  }
+
+  render() {
+    const { items, remove, renderItem, placeholder } = this.props;
+
+    return (
+      <div className="EditableList">
+        <div className="el-header">
+          <Input
+            theme="round-black"
+            value={this.currentNewItem}
+            onSubmit={this.onSubmit}
+            placeholder={placeholder}
+            onChange={val => this.currentNewItem = val}
+          />
+        </div>
+        <div className="el-contents">
+          {
+            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>
+              </div>
+            ))
+          }
+        </div>
+      </div>
+    )
+  }
+}

src/renderer/components/editable-list/index.ts

@@ -0,0 +1 @@
+export * from "./editable-list"