extract logic of AdminGroupTable, AdminUserTable and ProxyExcludesTable in to ArrayConfigTable

scm-ui/src/config/components/table/AdminGroupTable.js

@@ -1,48 +1,34 @@
 //@flow
 import React from "react";
 import { translate } from "react-i18next";
-import { RemoveEntryOfTableButton } from "../../../components/buttons";
+import ArrayConfigTable from "./ArrayConfigTable";
 
 type Props = {
   adminGroups: string[],
-  t: string => string,
   onChange: (boolean, any, string) => void,
-  disabled: boolean
+  disabled: boolean,
+
+  // context props
+  t: string => string
 };
 
 type State = {};
 
 class AdminGroupTable extends React.Component<Props, State> {
   render() {
-    const { t, disabled } = this.props;
+    const { t, disabled, adminGroups } = this.props;
     return (
-      <div>
+      <ArrayConfigTable
-        <label className="label">{t("admin-settings.admin-groups")}</label>
+        items={adminGroups}
-        <table className="table is-hoverable is-fullwidth">
+        label={t("admin-settings.admin-groups")}
-          <tbody>
+        removeLabel={t("admin-settings.remove-group-button")}
-            {this.props.adminGroups.map(group => {
+        onRemove={this.removeEntry}
-              return (
+        disabled={disabled}
-                <tr key={group}>
+      />
-                  <td key={group}>{group}</td>
-                  <td>
-                    <RemoveEntryOfTableButton
-                      entryname={group}
-                      removeEntry={this.removeEntry}
-                      disabled={disabled}
-                      label={t("admin-settings.remove-group-button")}
-                    />
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
     );
   }
 
-  removeEntry = (groupname: string) => {
+  removeEntry = (newGroups: string[]) => {
-    const newGroups = this.props.adminGroups.filter(name => name !== groupname);
     this.props.onChange(true, newGroups, "adminGroups");
   };
 }

scm-ui/src/config/components/table/AdminUserTable.js

@@ -1,48 +1,32 @@
 //@flow
 import React from "react";
 import { translate } from "react-i18next";
-import { RemoveEntryOfTableButton } from "../../../components/buttons";
+import ArrayConfigTable from "./ArrayConfigTable";
 
 type Props = {
   adminUsers: string[],
-  t: string => string,
   onChange: (boolean, any, string) => void,
-  disabled: boolean
+  disabled: boolean,
+
+  // context props
+  t: string => string
 };
 
-type State = {};
+class AdminUserTable extends React.Component<Props> {
-
-class AdminUserTable extends React.Component<Props, State> {
   render() {
-    const { t, disabled } = this.props;
+    const { adminUsers, t, disabled } = this.props;
     return (
-      <div>
+      <ArrayConfigTable
-        <label className="label">{t("admin-settings.admin-users")}</label>
+        items={adminUsers}
-        <table className="table is-hoverable is-fullwidth">
+        label={t("admin-settings.admin-users")}
-          <tbody>
+        removeLabel={t("admin-settings.remove-user-button")}
-            {this.props.adminUsers.map(user => {
+        onRemove={this.removeEntry}
-              return (
+        disabled={disabled}
-                <tr key={user}>
+      />
-                  <td key={user}>{user}</td>
-                  <td>
-                    <RemoveEntryOfTableButton
-                      entryname={user}
-                      removeEntry={this.removeEntry}
-                      disabled={disabled}
-                      label={t("admin-settings.remove-user-button")}
-                    />
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
     );
   }
 
-  removeEntry = (username: string) => {
+  removeEntry = (newUsers: string[]) => {
-    const newUsers = this.props.adminUsers.filter(name => name !== username);
     this.props.onChange(true, newUsers, "adminUsers");
   };
 }

scm-ui/src/config/components/table/ArrayConfigTable.js

@@ -0,0 +1,48 @@
+//@flow
+import React from "react";
+import { RemoveEntryOfTableButton } from "../../../components/buttons";
+
+type Props = {
+  items: string[],
+  label: string,
+  removeLabel: string,
+  onRemove: (string[], string) => void,
+  disabled: boolean
+};
+
+class ArrayConfigTable extends React.Component<Props> {
+  render() {
+    const { label, disabled, removeLabel, items } = this.props;
+    return (
+      <div>
+        <label className="label">{label}</label>
+        <table className="table is-hoverable is-fullwidth">
+          <tbody>
+            {items.map(item => {
+              return (
+                <tr key={item}>
+                  <td>{item}</td>
+                  <td>
+                    <RemoveEntryOfTableButton
+                      entryname={item}
+                      removeEntry={this.removeEntry}
+                      disabled={disabled}
+                      label={removeLabel}
+                    />
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+
+  removeEntry = (item: string) => {
+    const newItems = this.props.items.filter(name => name !== item);
+    this.props.onRemove(newItems, item);
+  };
+}
+
+export default ArrayConfigTable;

scm-ui/src/config/components/table/ProxyExcludesTable.js

@@ -1,7 +1,7 @@
 //@flow
 import React from "react";
 import { translate } from "react-i18next";
-import { RemoveEntryOfTableButton } from "../../../components/buttons";
+import ArrayConfigTable from "./ArrayConfigTable";
 
 type Props = {
   proxyExcludes: string[],
@@ -14,37 +14,19 @@ type State = {};
 
 class ProxyExcludesTable extends React.Component<Props, State> {
   render() {
-    const { t } = this.props;
+    const { proxyExcludes, disabled, t } = this.props;
     return (
-      <div>
+      <ArrayConfigTable
-        <label className="label">{t("proxy-settings.proxy-excludes")}</label>
+        items={proxyExcludes}
-        <table className="table is-hoverable is-fullwidth">
+        label={t("proxy-settings.proxy-excludes")}
-          <tbody>
+        removeLabel={t("proxy-settings.remove-proxy-exclude-button")}
-            {this.props.proxyExcludes.map(excludes => {
+        onRemove={this.removeEntry}
-              return (
+        disabled={disabled}
-                <tr key={excludes}>
+      />
-                  <td key={excludes}>{excludes}</td>
-                  <td>
-                    <RemoveEntryOfTableButton
-                      entryname={excludes}
-                      removeEntry={this.removeEntry}
-                      disabled={this.props.disabled}
-                      label={t("proxy-settings.remove-proxy-exclude-button")}
-                    />
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
     );
   }
 
-  removeEntry = (excludename: string) => {
+  removeEntry = (newExcludes: string[]) => {
-    const newExcludes = this.props.proxyExcludes.filter(
-      name => name !== excludename
-    );
     this.props.onChange(true, newExcludes, "proxyExcludes");
   };
 }