Add SystemName validation to AccessibleNamespaces (#2754)

- Don't validate after a submit

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

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

@@ -20,8 +20,13 @@
  */
 
 .EditableList {
+  --gradientColor: var(--colorVague);
+
   .el-contents {
     display: flex;
+    background-color: var(--colorVague);
+    color: $textColorSecondary;
+    border-radius: $radius;
     flex-direction: column;
 
     &:not(:empty) {
@@ -35,20 +40,53 @@
     }
 
     .el-item {
-      display: grid;
-      grid-template-columns: 1fr auto;
-      padding: $padding $padding * 2;
-      margin-bottom: $padding / 4;
-      backdrop-filter: brightness(0.75);
-      border-radius: var(--border-radius);
-
-      :last-child {
-        margin-bottom: unset;
-      }
-
-      :first-child {
+      display: flex;
+      flex-direction: row;
+      padding: $padding 0;
+      margin-bottom: 1px;
+      
+      .el-value-container {
+        position: relative;
+        max-width: calc(100% - 29px);
         align-self: center;
+
+        &::before, &::after {
+          content: ' ';
+          position: absolute;
+          z-index: 20;
+          display: block;
+          width: 8px;
+          height: var(--font-size);
+        }
+
+        &::before {
+          left: 0px;
+          top: 0px;
+          background: linear-gradient(to right, var(--gradientColor) 0px, transparent);
+        }
+
+        &::after {
+          right: 0px;
+          top: 0px;
+          background: linear-gradient(to left, var(--gradientColor) 0px, transparent);
+        }
       }
+
+      .el-value {
+        white-space: nowrap;
+        overflow: scroll!important;
+        text-overflow: unset!important;
+        padding-left: 8px;
+        padding-right: 8px;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+    }
+
+    :last-child {
+      margin-bottom: unset;
     }
   }
 }

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

@@ -25,7 +25,7 @@ import { observer } from "mobx-react";
 import React from "react";
 
 import { Icon } from "../icon";
-import { Input, InputProps } from "../input";
+import { Input, InputProps, InputValidator } from "../input";
 import { boundMethod } from "../../utils";
 
 export interface Props<T> {
@@ -33,6 +33,7 @@ export interface Props<T> {
   add: (newItem: string) => void,
   remove: (info: { oldItem: T, index: number }) => void,
   placeholder?: string,
+  validators?: InputValidator | InputValidator[];
 
   // An optional prop used to convert T to a displayable string
   // defaults to `String`
@@ -61,7 +62,7 @@ export class EditableList<T> extends React.Component<Props<T>> {
   }
 
   render() {
-    const { items, remove, renderItem, placeholder, inputTheme } = this.props;
+    const { items, remove, renderItem, placeholder, validators, inputTheme } = this.props;
 
     return (
       <div className="EditableList">
@@ -69,6 +70,7 @@ export class EditableList<T> extends React.Component<Props<T>> {
           <Input
             theme={inputTheme}
             onSubmit={this.onSubmit}
+            validators={validators}
             placeholder={placeholder}
           />
         </div>
@@ -76,7 +78,9 @@ export class EditableList<T> extends React.Component<Props<T>> {
           {
             items.map((item, index) => (
               <div key={`${item}${index}`} className="el-item">
-                <div>{renderItem(item, index)}</div>
+                <div className="el-value-container">
+                  <div className="el-value">{renderItem(item, index)}</div>
+                </div>
                 <div className="el-value-remove">
                   <Icon material="delete_outline" onClick={() => remove(({ index, oldItem: item }))} />
                 </div>