use reflow to migrate from flow to typescript

scm-ui/ui-webapp/src/admin/components/form/BaseUrlSettings.tsx

@@ -1,14 +1,13 @@
-// @flow
-import React from "react";
-import { translate } from "react-i18next";
-import { Checkbox, InputField, Subtitle } from "@scm-manager/ui-components";
+import React from 'react';
+import { translate } from 'react-i18next';
+import { Checkbox, InputField, Subtitle } from '@scm-manager/ui-components';
 
 type Props = {
-  baseUrl: string,
-  forceBaseUrl: boolean,
-  t: string => string,
-  onChange: (boolean, any, string) => void,
-  hasUpdatePermission: boolean
+  baseUrl: string;
+  forceBaseUrl: boolean;
+  t: (p: string) => string;
+  onChange: (p1: boolean, p2: any, p3: string) => void;
+  hasUpdatePermission: boolean;
 };
 
 class BaseUrlSettings extends React.Component<Props> {
@@ -17,24 +16,24 @@ class BaseUrlSettings extends React.Component<Props> {
 
     return (
       <div>
-        <Subtitle subtitle={t("base-url-settings.name")} />
+        <Subtitle subtitle={t('base-url-settings.name')} />
         <div className="columns">
           <div className="column is-half">
             <InputField
-              label={t("base-url-settings.base-url")}
+              label={t('base-url-settings.base-url')}
               onChange={this.handleBaseUrlChange}
               value={baseUrl}
               disabled={!hasUpdatePermission}
-              helpText={t("help.baseUrlHelpText")}
+              helpText={t('help.baseUrlHelpText')}
             />
           </div>
           <div className="column is-half">
             <Checkbox
               checked={forceBaseUrl}
-              label={t("base-url-settings.force-base-url")}
+              label={t('base-url-settings.force-base-url')}
               onChange={this.handleForceBaseUrlChange}
               disabled={!hasUpdatePermission}
-              helpText={t("help.forceBaseUrlHelpText")}
+              helpText={t('help.forceBaseUrlHelpText')}
             />
           </div>
         </div>
@@ -43,11 +42,11 @@ class BaseUrlSettings extends React.Component<Props> {
   }
 
   handleBaseUrlChange = (value: string) => {
-    this.props.onChange(true, value, "baseUrl");
+    this.props.onChange(true, value, 'baseUrl');
   };
   handleForceBaseUrlChange = (value: boolean) => {
-    this.props.onChange(true, value, "forceBaseUrl");
+    this.props.onChange(true, value, 'forceBaseUrl');
   };
 }
 
-export default translate("config")(BaseUrlSettings);
+export default translate('config')(BaseUrlSettings);

scm-ui/ui-webapp/src/admin/components/form/ConfigForm.tsx

@@ -1,32 +1,31 @@
-// @flow
-import React from "react";
-import { translate } from "react-i18next";
-import { SubmitButton, Notification } from "@scm-manager/ui-components";
-import type { NamespaceStrategies, Config } from "@scm-manager/ui-types";
-import ProxySettings from "./ProxySettings";
-import GeneralSettings from "./GeneralSettings";
-import BaseUrlSettings from "./BaseUrlSettings";
-import LoginAttempt from "./LoginAttempt";
+import React from 'react';
+import { translate } from 'react-i18next';
+import { SubmitButton, Notification } from '@scm-manager/ui-components';
+import { NamespaceStrategies, Config } from '@scm-manager/ui-types';
+import ProxySettings from './ProxySettings';
+import GeneralSettings from './GeneralSettings';
+import BaseUrlSettings from './BaseUrlSettings';
+import LoginAttempt from './LoginAttempt';
 
 type Props = {
-  submitForm: Config => void,
-  config?: Config,
-  loading?: boolean,
-  configReadPermission: boolean,
-  configUpdatePermission: boolean,
-  namespaceStrategies?: NamespaceStrategies,
+  submitForm: (p: Config) => void;
+  config?: Config;
+  loading?: boolean;
+  configReadPermission: boolean;
+  configUpdatePermission: boolean;
+  namespaceStrategies?: NamespaceStrategies;
   // context props
-  t: string => string
+  t: (p: string) => string;
 };
 
 type State = {
-  config: Config,
-  showNotification: boolean,
+  config: Config;
+  showNotification: boolean;
   error: {
-    loginAttemptLimitTimeout: boolean,
-    loginAttemptLimit: boolean
-  },
-  changed: boolean
+    loginAttemptLimitTimeout: boolean;
+    loginAttemptLimit: boolean;
+  };
+  changed: boolean;
 };
 
 class ConfigForm extends React.Component<Props, State> {
@@ -37,48 +36,56 @@ class ConfigForm extends React.Component<Props, State> {
       config: {
         proxyPassword: null,
         proxyPort: 0,
-        proxyServer: "",
+        proxyServer: '',
         proxyUser: null,
         enableProxy: false,
-        realmDescription: "",
+        realmDescription: '',
         disableGroupingGrid: false,
-        dateFormat: "",
+        dateFormat: '',
         anonymousAccessEnabled: false,
-        baseUrl: "",
+        baseUrl: '',
         forceBaseUrl: false,
         loginAttemptLimit: 0,
         proxyExcludes: [],
         skipFailedAuthenticators: false,
-        pluginUrl: "",
+        pluginUrl: '',
         loginAttemptLimitTimeout: 0,
         enabledXsrfProtection: true,
-        namespaceStrategy: "",
-        loginInfoUrl: "",
-        _links: {}
+        namespaceStrategy: '',
+        loginInfoUrl: '',
+        _links: {},
       },
       showNotification: false,
       error: {
         loginAttemptLimitTimeout: false,
-        loginAttemptLimit: false
+        loginAttemptLimit: false,
       },
-      changed: false
+      changed: false,
     };
   }
 
   componentDidMount() {
     const { config, configUpdatePermission } = this.props;
     if (config) {
-      this.setState({ ...this.state, config: { ...config } });
+      this.setState({
+        ...this.state,
+        config: {
+          ...config,
+        },
+      });
     }
     if (!configUpdatePermission) {
-      this.setState({ ...this.state, showNotification: true });
+      this.setState({
+        ...this.state,
+        showNotification: true,
+      });
     }
   }
 
   submit = (event: Event) => {
     event.preventDefault();
     this.setState({
-      changed: false
+      changed: false,
     });
     this.props.submitForm(this.state.config);
   };
@@ -89,7 +96,7 @@ class ConfigForm extends React.Component<Props, State> {
       t,
       namespaceStrategies,
       configReadPermission,
-      configUpdatePermission
+      configUpdatePermission,
     } = this.props;
     const config = this.state.config;
 
@@ -98,8 +105,8 @@ class ConfigForm extends React.Component<Props, State> {
     if (!configReadPermission) {
       return (
         <Notification
-          type={"danger"}
-          children={t("config.form.no-read-permission-notification")}
+          type={'danger'}
+          children={t('config.form.no-read-permission-notification')}
         />
       );
     }
@@ -107,8 +114,8 @@ class ConfigForm extends React.Component<Props, State> {
     if (this.state.showNotification) {
       noPermissionNotification = (
         <Notification
-          type={"info"}
-          children={t("config.form.no-write-permission-notification")}
+          type={'info'}
+          children={t('config.form.no-write-permission-notification')}
           onClose={() => this.onClose()}
         />
       );
@@ -153,10 +160,10 @@ class ConfigForm extends React.Component<Props, State> {
         />
         <hr />
         <ProxySettings
-          proxyPassword={config.proxyPassword ? config.proxyPassword : ""}
+          proxyPassword={config.proxyPassword ? config.proxyPassword : ''}
           proxyPort={config.proxyPort}
-          proxyServer={config.proxyServer ? config.proxyServer : ""}
-          proxyUser={config.proxyUser ? config.proxyUser : ""}
+          proxyServer={config.proxyServer ? config.proxyServer : ''}
+          proxyUser={config.proxyUser ? config.proxyUser : ''}
           enableProxy={config.enableProxy}
           proxyExcludes={config.proxyExcludes}
           onChange={(isValid, changedValue, name) =>
@@ -167,7 +174,7 @@ class ConfigForm extends React.Component<Props, State> {
         <hr />
         <SubmitButton
           loading={loading}
-          label={t("config.form.submit")}
+          label={t('config.form.submit')}
           disabled={
             !configUpdatePermission || this.hasError() || !this.state.changed
           }
@@ -181,13 +188,13 @@ class ConfigForm extends React.Component<Props, State> {
       ...this.state,
       config: {
         ...this.state.config,
-        [name]: changedValue
+        [name]: changedValue,
       },
       error: {
         ...this.state.error,
-        [name]: !isValid
+        [name]: !isValid,
       },
-      changed: true
+      changed: true,
     });
   };
 
@@ -201,9 +208,9 @@ class ConfigForm extends React.Component<Props, State> {
   onClose = () => {
     this.setState({
       ...this.state,
-      showNotification: false
+      showNotification: false,
     });
   };
 }
 
-export default translate("config")(ConfigForm);
+export default translate('config')(ConfigForm);

scm-ui/ui-webapp/src/admin/components/form/GeneralSettings.tsx

@@ -1,25 +1,24 @@
-// @flow
-import React from "react";
-import {translate} from "react-i18next";
-import {Checkbox, InputField} from "@scm-manager/ui-components";
-import type {NamespaceStrategies} from "@scm-manager/ui-types";
-import NamespaceStrategySelect from "./NamespaceStrategySelect";
+import React from 'react';
+import { translate } from 'react-i18next';
+import { Checkbox, InputField } from '@scm-manager/ui-components';
+import { NamespaceStrategies } from '@scm-manager/ui-types';
+import NamespaceStrategySelect from './NamespaceStrategySelect';
 
 type Props = {
-  realmDescription: string,
-  loginInfoUrl: string,
-  disableGroupingGrid: boolean,
-  dateFormat: string,
-  anonymousAccessEnabled: boolean,
-  skipFailedAuthenticators: boolean,
-  pluginUrl: string,
-  enabledXsrfProtection: boolean,
-  namespaceStrategy: string,
-  namespaceStrategies?: NamespaceStrategies,
-  onChange: (boolean, any, string) => void,
-  hasUpdatePermission: boolean,
+  realmDescription: string;
+  loginInfoUrl: string;
+  disableGroupingGrid: boolean;
+  dateFormat: string;
+  anonymousAccessEnabled: boolean;
+  skipFailedAuthenticators: boolean;
+  pluginUrl: string;
+  enabledXsrfProtection: boolean;
+  namespaceStrategy: string;
+  namespaceStrategies?: NamespaceStrategies;
+  onChange: (p1: boolean, p2: any, p3: string) => void;
+  hasUpdatePermission: boolean;
   // context props
-  t: string => string
+  t: (p: string) => string;
 };
 
 class GeneralSettings extends React.Component<Props> {
@@ -33,7 +32,7 @@ class GeneralSettings extends React.Component<Props> {
       anonymousAccessEnabled,
       namespaceStrategy,
       hasUpdatePermission,
-      namespaceStrategies
+      namespaceStrategies,
     } = this.props;
 
     return (
@@ -41,61 +40,61 @@ class GeneralSettings extends React.Component<Props> {
         <div className="columns">
           <div className="column is-half">
             <InputField
-              label={t("general-settings.realm-description")}
+              label={t('general-settings.realm-description')}
               onChange={this.handleRealmDescriptionChange}
               value={realmDescription}
               disabled={!hasUpdatePermission}
-              helpText={t("help.realmDescriptionHelpText")}
+              helpText={t('help.realmDescriptionHelpText')}
             />
           </div>
           <div className="column is-half">
             <NamespaceStrategySelect
-              label={t("general-settings.namespace-strategy")}
+              label={t('general-settings.namespace-strategy')}
               onChange={this.handleNamespaceStrategyChange}
               value={namespaceStrategy}
               disabled={!hasUpdatePermission}
               namespaceStrategies={namespaceStrategies}
-              helpText={t("help.nameSpaceStrategyHelpText")}
+              helpText={t('help.nameSpaceStrategyHelpText')}
             />
           </div>
         </div>
         <div className="columns">
           <div className="column is-half">
             <InputField
-              label={t("general-settings.login-info-url")}
+              label={t('general-settings.login-info-url')}
               onChange={this.handleLoginInfoUrlChange}
               value={loginInfoUrl}
               disabled={!hasUpdatePermission}
-              helpText={t("help.loginInfoUrlHelpText")}
+              helpText={t('help.loginInfoUrlHelpText')}
             />
           </div>
           <div className="column is-half">
             <Checkbox
               checked={enabledXsrfProtection}
-              label={t("general-settings.enabled-xsrf-protection")}
+              label={t('general-settings.enabled-xsrf-protection')}
               onChange={this.handleEnabledXsrfProtectionChange}
               disabled={!hasUpdatePermission}
-              helpText={t("help.enableXsrfProtectionHelpText")}
+              helpText={t('help.enableXsrfProtectionHelpText')}
             />
           </div>
         </div>
         <div className="columns">
           <div className="column is-half">
             <InputField
-              label={t("general-settings.plugin-url")}
+              label={t('general-settings.plugin-url')}
               onChange={this.handlePluginCenterUrlChange}
               value={pluginUrl}
               disabled={!hasUpdatePermission}
-              helpText={t("help.pluginUrlHelpText")}
+              helpText={t('help.pluginUrlHelpText')}
             />
           </div>
           <div className="column is-half">
             <Checkbox
               checked={anonymousAccessEnabled}
-              label={t("general-settings.anonymous-access-enabled")}
+              label={t('general-settings.anonymous-access-enabled')}
               onChange={this.handleEnableAnonymousAccess}
               disabled={!hasUpdatePermission}
-              helpText={t("help.allowAnonymousAccessHelpText")}
+              helpText={t('help.allowAnonymousAccessHelpText')}
             />
           </div>
         </div>
@@ -104,23 +103,23 @@ class GeneralSettings extends React.Component<Props> {
   }
 
   handleLoginInfoUrlChange = (value: string) => {
-    this.props.onChange(true, value, "loginInfoUrl");
+    this.props.onChange(true, value, 'loginInfoUrl');
   };
   handleRealmDescriptionChange = (value: string) => {
-    this.props.onChange(true, value, "realmDescription");
+    this.props.onChange(true, value, 'realmDescription');
   };
   handleEnabledXsrfProtectionChange = (value: boolean) => {
-    this.props.onChange(true, value, "enabledXsrfProtection");
+    this.props.onChange(true, value, 'enabledXsrfProtection');
   };
   handleEnableAnonymousAccess = (value: boolean) => {
-    this.props.onChange(true, value, "anonymousAccessEnabled");
+    this.props.onChange(true, value, 'anonymousAccessEnabled');
   };
   handleNamespaceStrategyChange = (value: string) => {
-    this.props.onChange(true, value, "namespaceStrategy");
+    this.props.onChange(true, value, 'namespaceStrategy');
   };
   handlePluginCenterUrlChange = (value: string) => {
-    this.props.onChange(true, value, "pluginUrl");
+    this.props.onChange(true, value, 'pluginUrl');
   };
 }
 
-export default translate("config")(GeneralSettings);
+export default translate('config')(GeneralSettings);

scm-ui/ui-webapp/src/admin/components/form/LoginAttempt.tsx

@@ -1,23 +1,22 @@
-// @flow
-import React from "react";
-import { translate } from "react-i18next";
+import React from 'react';
+import { translate } from 'react-i18next';
 import {
   InputField,
   Subtitle,
-  validation as validator
-} from "@scm-manager/ui-components";
+  validation as validator,
+} from '@scm-manager/ui-components';
 
 type Props = {
-  loginAttemptLimit: number,
-  loginAttemptLimitTimeout: number,
-  t: string => string,
-  onChange: (boolean, any, string) => void,
-  hasUpdatePermission: boolean
+  loginAttemptLimit: number;
+  loginAttemptLimitTimeout: number;
+  t: (p: string) => string;
+  onChange: (p1: boolean, p2: any, p3: string) => void;
+  hasUpdatePermission: boolean;
 };
 
 type State = {
-  loginAttemptLimitError: boolean,
-  loginAttemptLimitTimeoutError: boolean
+  loginAttemptLimitError: boolean;
+  loginAttemptLimitTimeoutError: boolean;
 };
 
 class LoginAttempt extends React.Component<Props, State> {
@@ -26,7 +25,7 @@ class LoginAttempt extends React.Component<Props, State> {
 
     this.state = {
       loginAttemptLimitError: false,
-      loginAttemptLimitTimeoutError: false
+      loginAttemptLimitTimeoutError: false,
     };
   }
   render() {
@@ -34,33 +33,33 @@ class LoginAttempt extends React.Component<Props, State> {
       t,
       loginAttemptLimit,
       loginAttemptLimitTimeout,
-      hasUpdatePermission
+      hasUpdatePermission,
     } = this.props;
 
     return (
       <div>
-        <Subtitle subtitle={t("login-attempt.name")} />
+        <Subtitle subtitle={t('login-attempt.name')} />
         <div className="columns">
           <div className="column is-half">
             <InputField
-              label={t("login-attempt.login-attempt-limit")}
+              label={t('login-attempt.login-attempt-limit')}
               onChange={this.handleLoginAttemptLimitChange}
               value={loginAttemptLimit}
               disabled={!hasUpdatePermission}
               validationError={this.state.loginAttemptLimitError}
-              errorMessage={t("validation.login-attempt-limit-invalid")}
-              helpText={t("help.loginAttemptLimitHelpText")}
+              errorMessage={t('validation.login-attempt-limit-invalid')}
+              helpText={t('help.loginAttemptLimitHelpText')}
             />
           </div>
           <div className="column is-half">
             <InputField
-              label={t("login-attempt.login-attempt-limit-timeout")}
+              label={t('login-attempt.login-attempt-limit-timeout')}
               onChange={this.handleLoginAttemptLimitTimeoutChange}
               value={loginAttemptLimitTimeout}
               disabled={!hasUpdatePermission}
               validationError={this.state.loginAttemptLimitTimeoutError}
-              errorMessage={t("validation.login-attempt-limit-timeout-invalid")}
-              helpText={t("help.loginAttemptLimitTimeoutHelpText")}
+              errorMessage={t('validation.login-attempt-limit-timeout-invalid')}
+              helpText={t('help.loginAttemptLimitTimeoutHelpText')}
             />
           </div>
         </div>
@@ -72,26 +71,26 @@ class LoginAttempt extends React.Component<Props, State> {
   handleLoginAttemptLimitChange = (value: string) => {
     this.setState({
       ...this.state,
-      loginAttemptLimitError: !validator.isNumberValid(value)
+      loginAttemptLimitError: !validator.isNumberValid(value),
     });
     this.props.onChange(
       validator.isNumberValid(value),
       value,
-      "loginAttemptLimit"
+      'loginAttemptLimit',
     );
   };
 
   handleLoginAttemptLimitTimeoutChange = (value: string) => {
     this.setState({
       ...this.state,
-      loginAttemptLimitTimeoutError: !validator.isNumberValid(value)
+      loginAttemptLimitTimeoutError: !validator.isNumberValid(value),
     });
     this.props.onChange(
       validator.isNumberValid(value),
       value,
-      "loginAttemptLimitTimeout"
+      'loginAttemptLimitTimeout',
     );
   };
 }
 
-export default translate("config")(LoginAttempt);
+export default translate('config')(LoginAttempt);

scm-ui/ui-webapp/src/admin/components/form/NamespaceStrategySelect.tsx

@@ -1,18 +1,17 @@
-//@flow
-import React from "react";
-import { translate, type TFunction } from "react-i18next";
-import { Select } from "@scm-manager/ui-components";
-import type { NamespaceStrategies } from "@scm-manager/ui-types";
+import React from 'react';
+import { translate, TFunction } from 'react-i18next';
+import { Select } from '@scm-manager/ui-components';
+import { NamespaceStrategies } from '@scm-manager/ui-types';
 
 type Props = {
-  namespaceStrategies: NamespaceStrategies,
-  label: string,
-  value?: string,
-  disabled?: boolean,
-  helpText?: string,
-  onChange: (value: string, name?: string) => void,
+  namespaceStrategies: NamespaceStrategies;
+  label: string;
+  value?: string;
+  disabled?: boolean;
+  helpText?: string;
+  onChange: (value: string, name?: string) => void;
   // context props
-  t: TFunction
+  t: TFunction;
 };
 
 class NamespaceStrategySelect extends React.Component<Props> {
@@ -24,14 +23,14 @@ class NamespaceStrategySelect extends React.Component<Props> {
     }
 
     return available.map(ns => {
-      const key = "namespaceStrategies." + ns;
+      const key = 'namespaceStrategies.' + ns;
       let label = t(key);
       if (label === key) {
         label = ns;
       }
       return {
         value: ns,
-        label: label
+        label: label,
       };
     });
   };
@@ -64,4 +63,4 @@ class NamespaceStrategySelect extends React.Component<Props> {
   }
 }
 
-export default translate("plugins")(NamespaceStrategySelect);
+export default translate('plugins')(NamespaceStrategySelect);

scm-ui/ui-webapp/src/admin/components/form/ProxySettings.js

@@ -1,146 +0,0 @@
-// @flow
-import React from "react";
-import { translate } from "react-i18next";
-import {
-  Checkbox,
-  InputField,
-  Subtitle,
-  AddEntryToTableField
-} from "@scm-manager/ui-components";
-import ProxyExcludesTable from "../table/ProxyExcludesTable";
-
-type Props = {
-  proxyPassword: string,
-  proxyPort: number,
-  proxyServer: string,
-  proxyUser: string,
-  enableProxy: boolean,
-  proxyExcludes: string[],
-  t: string => string,
-  onChange: (boolean, any, string) => void,
-  hasUpdatePermission: boolean
-};
-
-class ProxySettings extends React.Component<Props> {
-  render() {
-    const {
-      t,
-      proxyPassword,
-      proxyPort,
-      proxyServer,
-      proxyUser,
-      enableProxy,
-      proxyExcludes,
-      hasUpdatePermission
-    } = this.props;
-
-    return (
-      <div>
-        <Subtitle subtitle={t("proxy-settings.name")} />
-        <div className="columns">
-                <div className="column is-full">
-                    <Checkbox
-                      checked={enableProxy}
-                      label={t("proxy-settings.enable-proxy")}
-                      onChange={this.handleEnableProxyChange}
-                      disabled={!hasUpdatePermission}
-                      helpText={t("help.enableProxyHelpText")}
-                    />
-                </div>
-            </div>
-            <div className="columns">
-                <div className="column is-half">
-                    <InputField
-                      label={t("proxy-settings.proxy-password")}
-                      onChange={this.handleProxyPasswordChange}
-                      value={proxyPassword}
-                      type="password"
-                      disabled={!enableProxy || !hasUpdatePermission}
-                      helpText={t("help.proxyPasswordHelpText")}
-                    />
-                </div>
-                <div className="column is-half">
-                    <InputField
-                      label={t("proxy-settings.proxy-port")}
-                      value={proxyPort}
-                      onChange={this.handleProxyPortChange}
-                      disabled={!enableProxy || !hasUpdatePermission}
-                      helpText={t("help.proxyPortHelpText")}
-                    />
-                </div>
-            </div>
-            <div className="columns">
-                <div className="column is-half">
-                    <InputField
-                      label={t("proxy-settings.proxy-server")}
-                      value={proxyServer}
-                      onChange={this.handleProxyServerChange}
-                      disabled={!enableProxy || !hasUpdatePermission}
-                      helpText={t("help.proxyServerHelpText")}
-                    />
-                </div>
-                <div className="column is-half">
-                    <InputField
-                      label={t("proxy-settings.proxy-user")}
-                      value={proxyUser}
-                      onChange={this.handleProxyUserChange}
-                      disabled={!enableProxy || !hasUpdatePermission}
-                      helpText={t("help.proxyUserHelpText")}
-                    />
-                </div>
-            </div>
-            <div className="columns">
-                <div className="column is-full">
-                    <ProxyExcludesTable
-                      proxyExcludes={proxyExcludes}
-                      onChange={(isValid, changedValue, name) =>
-                        this.props.onChange(isValid, changedValue, name)
-                      }
-                      disabled={!enableProxy || !hasUpdatePermission}
-                    />
-                <AddEntryToTableField
-                  addEntry={this.addProxyExclude}
-                  disabled={!enableProxy || !hasUpdatePermission}
-                  buttonLabel={t("proxy-settings.add-proxy-exclude-button")}
-                  fieldLabel={t("proxy-settings.add-proxy-exclude-textfield")}
-                  errorMessage={t("proxy-settings.add-proxy-exclude-error")}
-                />
-                </div>
-            </div>
-      </div>
-    );
-  }
-
-  handleProxyPasswordChange = (value: string) => {
-    this.props.onChange(true, value, "proxyPassword");
-  };
-  handleProxyPortChange = (value: string) => {
-    this.props.onChange(true, value, "proxyPort");
-  };
-  handleProxyServerChange = (value: string) => {
-    this.props.onChange(true, value, "proxyServer");
-  };
-  handleProxyUserChange = (value: string) => {
-    this.props.onChange(true, value, "proxyUser");
-  };
-  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/ui-webapp/src/admin/components/form/ProxySettings.tsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import { translate } from 'react-i18next';
+import {
+  Checkbox,
+  InputField,
+  Subtitle,
+  AddEntryToTableField,
+} from '@scm-manager/ui-components';
+import ProxyExcludesTable from '../table/ProxyExcludesTable';
+
+type Props = {
+  proxyPassword: string;
+  proxyPort: number;
+  proxyServer: string;
+  proxyUser: string;
+  enableProxy: boolean;
+  proxyExcludes: string[];
+  t: (p: string) => string;
+  onChange: (p1: boolean, p2: any, p3: string) => void;
+  hasUpdatePermission: boolean;
+};
+
+class ProxySettings extends React.Component<Props> {
+  render() {
+    const {
+      t,
+      proxyPassword,
+      proxyPort,
+      proxyServer,
+      proxyUser,
+      enableProxy,
+      proxyExcludes,
+      hasUpdatePermission,
+    } = this.props;
+
+    return (
+      <div>
+        <Subtitle subtitle={t('proxy-settings.name')} />
+        <div className="columns">
+          <div className="column is-full">
+            <Checkbox
+              checked={enableProxy}
+              label={t('proxy-settings.enable-proxy')}
+              onChange={this.handleEnableProxyChange}
+              disabled={!hasUpdatePermission}
+              helpText={t('help.enableProxyHelpText')}
+            />
+          </div>
+        </div>
+        <div className="columns">
+          <div className="column is-half">
+            <InputField
+              label={t('proxy-settings.proxy-password')}
+              onChange={this.handleProxyPasswordChange}
+              value={proxyPassword}
+              type="password"
+              disabled={!enableProxy || !hasUpdatePermission}
+              helpText={t('help.proxyPasswordHelpText')}
+            />
+          </div>
+          <div className="column is-half">
+            <InputField
+              label={t('proxy-settings.proxy-port')}
+              value={proxyPort}
+              onChange={this.handleProxyPortChange}
+              disabled={!enableProxy || !hasUpdatePermission}
+              helpText={t('help.proxyPortHelpText')}
+            />
+          </div>
+        </div>
+        <div className="columns">
+          <div className="column is-half">
+            <InputField
+              label={t('proxy-settings.proxy-server')}
+              value={proxyServer}
+              onChange={this.handleProxyServerChange}
+              disabled={!enableProxy || !hasUpdatePermission}
+              helpText={t('help.proxyServerHelpText')}
+            />
+          </div>
+          <div className="column is-half">
+            <InputField
+              label={t('proxy-settings.proxy-user')}
+              value={proxyUser}
+              onChange={this.handleProxyUserChange}
+              disabled={!enableProxy || !hasUpdatePermission}
+              helpText={t('help.proxyUserHelpText')}
+            />
+          </div>
+        </div>
+        <div className="columns">
+          <div className="column is-full">
+            <ProxyExcludesTable
+              proxyExcludes={proxyExcludes}
+              onChange={(isValid, changedValue, name) =>
+                this.props.onChange(isValid, changedValue, name)
+              }
+              disabled={!enableProxy || !hasUpdatePermission}
+            />
+            <AddEntryToTableField
+              addEntry={this.addProxyExclude}
+              disabled={!enableProxy || !hasUpdatePermission}
+              buttonLabel={t('proxy-settings.add-proxy-exclude-button')}
+              fieldLabel={t('proxy-settings.add-proxy-exclude-textfield')}
+              errorMessage={t('proxy-settings.add-proxy-exclude-error')}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  handleProxyPasswordChange = (value: string) => {
+    this.props.onChange(true, value, 'proxyPassword');
+  };
+  handleProxyPortChange = (value: string) => {
+    this.props.onChange(true, value, 'proxyPort');
+  };
+  handleProxyServerChange = (value: string) => {
+    this.props.onChange(true, value, 'proxyServer');
+  };
+  handleProxyUserChange = (value: string) => {
+    this.props.onChange(true, value, 'proxyUser');
+  };
+  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);