Split UserManagement into seperate Cluster and Namespace Roles and RoleBindings (#2755)

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

@@ -23,7 +23,7 @@
   .el-contents {
     display: flex;
     flex-direction: column;
-    margin-top: $padding * 2;
+    margin: $padding 0px;
 
     .el-value-remove {
       .Icon {
@@ -35,7 +35,9 @@
       display: grid;
       grid-template-columns: 1fr auto;
       padding: $padding $padding * 2;
-      margin-bottom: 1px;
+      margin-bottom: $padding / 4;
+      backdrop-filter: brightness(0.75);
+      border-radius: var(--border-radius);
 
       :last-child {
         margin-bottom: unset;
@@ -46,4 +48,4 @@
       }
     }
   }
-}
+}

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

@@ -21,11 +21,11 @@
 
 import "./editable-list.scss";
 
+import { observer } from "mobx-react";
 import React from "react";
+
 import { Icon } from "../icon";
 import { Input } from "../input";
-import { observable, makeObservable } from "mobx";
-import { observer } from "mobx-react";
 import { boundMethod } from "../../utils";
 
 export interface Props<T> {
@@ -47,20 +47,14 @@ const defaultProps: Partial<Props<any>> = {
 @observer
 export class EditableList<T> extends React.Component<Props<T>> {
   static defaultProps = defaultProps as Props<any>;
-  @observable currentNewItem = "";
-
-  constructor(props: Props<T>) {
-    super(props);
-    makeObservable(this);
-  }
 
   @boundMethod
-  onSubmit(val: string) {
+  onSubmit(val: string, evt: React.KeyboardEvent) {
     const { add } = this.props;
 
     if (val) {
+      evt.preventDefault();
       add(val);
-      this.currentNewItem = "";
     }
   }
 
@@ -71,17 +65,15 @@ export class EditableList<T> extends React.Component<Props<T>> {
       <div className="EditableList">
         <div className="el-header">
           <Input
-            theme="round-black"
-            value={this.currentNewItem}
+            theme="round"
             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 key={`${item}${index}`} className="el-item">
                 <div>{renderItem(item, index)}</div>
                 <div className="el-value-remove">
                   <Icon material="delete_outline" onClick={() => remove(({ index, oldItem: item }))} />