add proxy exclude view and edit

scm-ui/public/locales/en/config.json

@@ -18,7 +18,11 @@
     "proxy-server": "Proxy Server",
     "proxy-user": "Proxy User",
     "enable-proxy": "Enable Proxy",
-    "proxy-excludes": "Proxy Excludes"
+    "proxy-excludes": "Proxy Excludes",
+    "remove-proxy-exclude-button": "Remove Proxy Exclude",
+    "add-proxy-exclude-error": "The proxy exclude you want to add is not valid",
+    "add-proxy-exclude-textfield": "Add proxy exclude you want to add to proxy excludes here",
+    "add-proxy-exclude-button": "Add Proxy Exclude"
   },
   "base-url-settings": {
     "name": "Base URL Settings",

scm-ui/src/config/components/buttons/RemoveProxyExcludeButton.js

@@ -0,0 +1,34 @@
+//@flow
+import React from "react";
+import { DeleteButton } from "../../../components/buttons";
+import { translate } from "react-i18next";
+import classNames from "classnames";
+
+type Props = {
+  t: string => string,
+  proxyExcludeName: string,
+  removeProxyExclude: string => void
+};
+
+type State = {};
+
+
+
+class RemoveProxyExcludeButton extends React.Component<Props, State> {
+  render() {
+    const { t , proxyExcludeName, removeProxyExclude} = this.props;
+    return (
+      <div className={classNames("is-pulled-right")}>
+        <DeleteButton
+          label={t("proxy-settings.remove-proxy-exclude-button")}
+          action={(event: Event) => {
+            event.preventDefault();
+            removeProxyExclude(proxyExcludeName);
+          }}
+        />
+      </div>
+    );
+  }
+}
+
+export default translate("config")(RemoveProxyExcludeButton);

scm-ui/src/config/components/fields/AddProxyExcludeField.js

@@ -0,0 +1,71 @@
+//@flow
+import React from "react";
+
+import { translate } from "react-i18next";
+import { AddButton } from "../../../components/buttons";
+import InputField from "../../../components/forms/InputField";
+
+type Props = {
+  t: string => string,
+  addProxyExclude: string => void
+};
+
+type State = {
+  proxyExcludeToAdd: string,
+  //validationError: boolean
+};
+
+class AddProxyExcludeField extends React.Component<Props, State> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      proxyExcludeToAdd: "",
+      //validationError: false
+    };
+  }
+
+  render() {
+    const { t } = this.props;
+    return (
+      <div className="field">
+        <InputField
+
+          label={t("proxy-settings.add-proxy-exclude-textfield")}
+          errorMessage={t("proxy-settings.add-proxy-exclude-error")}
+          onChange={this.handleAddProxyExcludeChange}
+          validationError={false}
+          value={this.state.proxyExcludeToAdd}
+          onReturnPressed={this.appendProxyExclude}
+        />
+        <AddButton
+          label={t("proxy-settings.add-proxy-exclude-button")}
+          action={this.addButtonClicked}
+          //disabled={!isMemberNameValid(this.state.memberToAdd)}
+        />
+      </div>
+    );
+  }
+
+  addButtonClicked = (event: Event) => {
+    event.preventDefault();
+    this.appendProxyExclude();
+  };
+
+  appendProxyExclude = () => {
+    const { proxyExcludeToAdd } = this.state;
+    //if (isMemberNameValid(memberToAdd)) {
+    this.props.addProxyExclude(proxyExcludeToAdd);
+    this.setState({ ...this.state, proxyExcludeToAdd: "" });
+    // }
+  };
+
+  handleAddProxyExcludeChange = (username: string) => {
+    this.setState({
+      ...this.state,
+      proxyExcludeToAdd: username,
+      //validationError: membername.length > 0 && !isMemberNameValid(membername)
+    });
+  };
+}
+
+export default translate("config")(AddProxyExcludeField);

scm-ui/src/config/components/form/ConfigForm.js

@@ -110,6 +110,7 @@ class ConfigForm extends React.Component<Props, State> {
           proxyServer={config.proxyServer ? config.proxyServer : ""}
           proxyUser={config.proxyUser ? config.proxyUser : ""}
           enableProxy={config.enableProxy}
+          proxyExcludes={config.proxyExcludes}
           onChange={(isValid, changedValue, name) =>
             this.onChange(isValid, changedValue, name)
           }

scm-ui/src/config/components/form/ProxySettings.js

@@ -3,6 +3,8 @@ import React from "react";
 import { translate } from "react-i18next";
 import { Checkbox, InputField } from "../../../components/forms/index";
 import Subtitle from "../../../components/layout/Subtitle";
+import ProxyExcludesTable from "../table/ProxyExcludesTable";
+import AddProxyExcludeField from "../fields/AddProxyExcludeField";
 
 type Props = {
   proxyPassword: string,
@@ -23,7 +25,8 @@ class ProxySettings extends React.Component<Props> {
       proxyPort,
       proxyServer,
       proxyUser,
-      enableProxy
+      enableProxy,
+      proxyExcludes
     } = this.props;
 
     return (
@@ -58,6 +61,13 @@ class ProxySettings extends React.Component<Props> {
           onChange={this.handleProxyUserChange}
           disable={!enableProxy}
         />
+        <ProxyExcludesTable
+          proxyExcludes={proxyExcludes}
+          onChange={(isValid, changedValue, name) =>
+            this.props.onChange(isValid, changedValue, name)
+          }
+        />
+        <AddProxyExcludeField addProxyExclude={this.addProxyExclude} />
       </div>
     );
   }
@@ -77,6 +87,21 @@ class ProxySettings extends React.Component<Props> {
   handleEnableProxyChange = (value: string) => {
     this.props.onChange(true, value, "enableProxy");
   };
+
+  addProxyExclude = (proxyExcludeName: string) => {
+    if (this.isProxyExcludeMember(proxyExcludeName)) {
+      return;
+    }
+    this.props.onChange(
+      true,
+      [...this.props.proxyExcludes, proxyExcludeName],
+      "proxyExcludes"
+    );
+  };
+
+  isProxyExcludeMember = (proxyExcludeName: string) => {
+    return this.props.proxyExcludes.includes(proxyExcludeName);
+  };
 }
 
 export default translate("config")(ProxySettings);

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

@@ -0,0 +1,47 @@
+//@flow
+import React from "react";
+import { translate } from "react-i18next";
+import RemoveProxyExcludeButton from "../buttons/RemoveProxyExcludeButton";
+
+type Props = {
+  proxyExcludes: string[],
+  t: string => string,
+  onChange: (boolean, any, string) => void
+};
+
+type State = {};
+
+class ProxyExcludesTable extends React.Component<Props, State> {
+  render() {
+    const { t } = this.props;
+    return (
+      <div>
+        <label className="label">{t("proxy-settings.proxy-excludes")}</label>
+        <table className="table is-hoverable is-fullwidth">
+          <tbody>
+          {this.props.proxyExcludes.map(excludes => {
+            return (
+              <tr key={excludes}>
+                <td key={excludes}>{excludes}</td>
+                <td>
+                  <RemoveProxyExcludeButton
+                    proxyExcludeName={excludes}
+                    removeProxyExclude={this.removeProxyExclude}
+                  />
+                </td>
+              </tr>
+            );
+          })}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+
+  removeProxyExclude = (excludename: string) => {
+    const newExcludes = this.props.proxyExcludes.filter(name => name !== excludename);
+    this.props.onChange(true, newExcludes, "proxyExcludes");
+  };
+}
+
+export default translate("config")(ProxyExcludesTable);