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);

scm-ui/ui-webapp/src/admin/components/table/ArrayConfigTable.tsx

@@ -1,14 +1,16 @@
-//@flow
-import React from "react";
-import { RemoveEntryOfTableButton, LabelWithHelpIcon } from "@scm-manager/ui-components";
+import React from 'react';
+import {
+  RemoveEntryOfTableButton,
+  LabelWithHelpIcon,
+} from '@scm-manager/ui-components';
 
 type Props = {
-  items: string[],
-  label: string,
-  removeLabel: string,
-  onRemove: (string[], string) => void,
-  disabled: boolean,
-  helpText: string
+  items: string[];
+  label: string;
+  removeLabel: string;
+  onRemove: (p1: string[], p2: string) => void;
+  disabled: boolean;
+  helpText: string;
 };
 
 class ArrayConfigTable extends React.Component<Props> {
@@ -16,7 +18,7 @@ class ArrayConfigTable extends React.Component<Props> {
     const { label, disabled, removeLabel, items, helpText } = this.props;
     return (
       <div>
-        <LabelWithHelpIcon label={label} helpText={helpText}/>
+        <LabelWithHelpIcon label={label} helpText={helpText} />
         <table className="table is-hoverable is-fullwidth">
           <tbody>
             {items.map(item => {

scm-ui/ui-webapp/src/admin/components/table/ProxyExcludesTable.js

@@ -1,35 +0,0 @@
-//@flow
-import React from "react";
-import { translate } from "react-i18next";
-import ArrayConfigTable from "./ArrayConfigTable";
-
-type Props = {
-  proxyExcludes: string[],
-  t: string => string,
-  onChange: (boolean, any, string) => void,
-  disabled: boolean
-};
-
-type State = {};
-
-class ProxyExcludesTable extends React.Component<Props, State> {
-  render() {
-    const { proxyExcludes, disabled, t } = this.props;
-    return (
-      <ArrayConfigTable
-        items={proxyExcludes}
-        label={t("proxy-settings.proxy-excludes")}
-        removeLabel={t("proxy-settings.remove-proxy-exclude-button")}
-        onRemove={this.removeEntry}
-        disabled={disabled}
-        helpText={t("help.proxyExcludesHelpText")}
-      />
-    );
-  }
-
-  removeEntry = (newExcludes: string[]) => {
-    this.props.onChange(true, newExcludes, "proxyExcludes");
-  };
-}
-
-export default translate("config")(ProxyExcludesTable);

scm-ui/ui-webapp/src/admin/components/table/ProxyExcludesTable.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { translate } from 'react-i18next';
+import ArrayConfigTable from './ArrayConfigTable';
+
+type Props = {
+  proxyExcludes: string[];
+  t: (p: string) => string;
+  onChange: (p1: boolean, p2: any, p3: string) => void;
+  disabled: boolean;
+};
+
+type State = {};
+
+class ProxyExcludesTable extends React.Component<Props, State> {
+  render() {
+    const { proxyExcludes, disabled, t } = this.props;
+    return (
+      <ArrayConfigTable
+        items={proxyExcludes}
+        label={t('proxy-settings.proxy-excludes')}
+        removeLabel={t('proxy-settings.remove-proxy-exclude-button')}
+        onRemove={this.removeEntry}
+        disabled={disabled}
+        helpText={t('help.proxyExcludesHelpText')}
+      />
+    );
+  }
+
+  removeEntry = (newExcludes: string[]) => {
+    this.props.onChange(true, newExcludes, 'proxyExcludes');
+  };
+}
+
+export default translate('config')(ProxyExcludesTable);

scm-ui/ui-webapp/src/admin/containers/Admin.tsx

@@ -1,46 +1,45 @@
-// @flow
-import React from "react";
-import { translate } from "react-i18next";
-import { Redirect, Route, Switch } from "react-router-dom";
-import { ExtensionPoint } from "@scm-manager/ui-extensions";
-import type { History } from "history";
-import { connect } from "react-redux";
-import { compose } from "redux";
-import type { Links } from "@scm-manager/ui-types";
+import React from 'react';
+import { translate } from 'react-i18next';
+import { Redirect, Route, Switch } from 'react-router-dom';
+import { ExtensionPoint } from '@scm-manager/ui-extensions';
+import { History } from 'history';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { Links } from '@scm-manager/ui-types';
 import {
   Page,
   Navigation,
   NavLink,
   Section,
-  SubNavigation
-} from "@scm-manager/ui-components";
+  SubNavigation,
+} from '@scm-manager/ui-components';
 import {
   getLinks,
   getAvailablePluginsLink,
-  getInstalledPluginsLink
-} from "../../modules/indexResource";
-import AdminDetails from "./AdminDetails";
-import PluginsOverview from "../plugins/containers/PluginsOverview";
-import GlobalConfig from "./GlobalConfig";
-import RepositoryRoles from "../roles/containers/RepositoryRoles";
-import SingleRepositoryRole from "../roles/containers/SingleRepositoryRole";
-import CreateRepositoryRole from "../roles/containers/CreateRepositoryRole";
+  getInstalledPluginsLink,
+} from '../../modules/indexResource';
+import AdminDetails from './AdminDetails';
+import PluginsOverview from '../plugins/containers/PluginsOverview';
+import GlobalConfig from './GlobalConfig';
+import RepositoryRoles from '../roles/containers/RepositoryRoles';
+import SingleRepositoryRole from '../roles/containers/SingleRepositoryRole';
+import CreateRepositoryRole from '../roles/containers/CreateRepositoryRole';
 
 type Props = {
-  links: Links,
-  availablePluginsLink: string,
-  installedPluginsLink: string,
+  links: Links;
+  availablePluginsLink: string;
+  installedPluginsLink: string;
 
   // context objects
-  t: string => string,
-  match: any,
-  history: History
+  t: (p: string) => string;
+  match: any;
+  history: History;
 };
 
 class Admin extends React.Component<Props> {
   stripEndingSlash = (url: string) => {
-    if (url.endsWith("/")) {
-      if (url.includes("role")) {
+    if (url.endsWith('/')) {
+      if (url.includes('role')) {
         return url.substring(0, url.length - 2);
       }
       return url.substring(0, url.length - 1);
@@ -64,7 +63,7 @@ class Admin extends React.Component<Props> {
     const url = this.matchedUrl();
     const extensionProps = {
       links,
-      url
+      url,
     };
 
     return (
@@ -158,28 +157,28 @@ class Admin extends React.Component<Props> {
           </div>
           <div className="column is-one-quarter">
             <Navigation>
-              <Section label={t("admin.menu.navigationLabel")}>
+              <Section label={t('admin.menu.navigationLabel')}>
                 <NavLink
                   to={`${url}/info`}
                   icon="fas fa-info-circle"
-                  label={t("admin.menu.informationNavLink")}
+                  label={t('admin.menu.informationNavLink')}
                 />
                 {(availablePluginsLink || installedPluginsLink) && (
                   <SubNavigation
                     to={`${url}/plugins/`}
                     icon="fas fa-puzzle-piece"
-                    label={t("plugins.menu.pluginsNavLink")}
+                    label={t('plugins.menu.pluginsNavLink')}
                   >
                     {installedPluginsLink && (
                       <NavLink
                         to={`${url}/plugins/installed/`}
-                        label={t("plugins.menu.installedNavLink")}
+                        label={t('plugins.menu.installedNavLink')}
                       />
                     )}
                     {availablePluginsLink && (
                       <NavLink
                         to={`${url}/plugins/available/`}
-                        label={t("plugins.menu.availableNavLink")}
+                        label={t('plugins.menu.availableNavLink')}
                       />
                     )}
                   </SubNavigation>
@@ -187,7 +186,7 @@ class Admin extends React.Component<Props> {
                 <NavLink
                   to={`${url}/roles/`}
                   icon="fas fa-user-shield"
-                  label={t("repositoryRole.navLink")}
+                  label={t('repositoryRole.navLink')}
                   activeWhenMatch={this.matchesRoles}
                   activeOnlyWhenExact={false}
                 />
@@ -198,11 +197,11 @@ class Admin extends React.Component<Props> {
                 />
                 <SubNavigation
                   to={`${url}/settings/general`}
-                  label={t("admin.menu.settingsNavLink")}
+                  label={t('admin.menu.settingsNavLink')}
                 >
                   <NavLink
                     to={`${url}/settings/general`}
-                    label={t("admin.menu.generalNavLink")}
+                    label={t('admin.menu.generalNavLink')}
                   />
                   <ExtensionPoint
                     name="admin.setting"
@@ -226,11 +225,11 @@ const mapStateToProps = (state: any) => {
   return {
     links,
     availablePluginsLink,
-    installedPluginsLink
+    installedPluginsLink,
   };
 };
 
 export default compose(
   connect(mapStateToProps),
-  translate("admin")
+  translate('admin'),
 )(Admin);

scm-ui/ui-webapp/src/admin/containers/AdminDetails.tsx

@@ -1,18 +1,17 @@
-// @flow
-import React from "react";
-import { connect } from "react-redux";
-import { translate } from "react-i18next";
-import styled from "styled-components";
-import { Image, Loading, Subtitle, Title } from "@scm-manager/ui-components";
-import { getAppVersion } from "../../modules/indexResource";
+import React from 'react';
+import { connect } from 'react-redux';
+import { translate } from 'react-i18next';
+import styled from 'styled-components';
+import { Image, Loading, Subtitle, Title } from '@scm-manager/ui-components';
+import { getAppVersion } from '../../modules/indexResource';
 
 type Props = {
-  loading: boolean,
-  error: Error,
-  version: string,
+  loading: boolean;
+  error: Error;
+  version: string;
 
   // context props
-  t: string => string
+  t: (p: string) => string;
 };
 
 const BoxShadowBox = styled.div`
@@ -34,28 +33,28 @@ class AdminDetails extends React.Component<Props> {
 
     return (
       <>
-        <Title title={t("admin.info.currentAppVersion")} />
+        <Title title={t('admin.info.currentAppVersion')} />
         <Subtitle subtitle={this.props.version} />
         <BoxShadowBox className="box">
           <article className="media">
             <ImageWrapper className="media-left">
               <Image
                 src="/images/iconCommunitySupport.png"
-                alt={t("admin.info.communityIconAlt")}
+                alt={t('admin.info.communityIconAlt')}
               />
             </ImageWrapper>
             <div className="media-content">
               <div className="content">
                 <h3 className="has-text-weight-medium">
-                  {t("admin.info.communityTitle")}
+                  {t('admin.info.communityTitle')}
                 </h3>
-                <p>{t("admin.info.communityInfo")}</p>
+                <p>{t('admin.info.communityInfo')}</p>
                 <a
                   className="button is-info is-pulled-right"
                   target="_blank"
                   href="https://scm-manager.org/support/"
                 >
-                  {t("admin.info.communityButton")}
+                  {t('admin.info.communityButton')}
                 </a>
               </div>
             </div>
@@ -66,25 +65,25 @@ class AdminDetails extends React.Component<Props> {
             <ImageWrapper className="media-left">
               <Image
                 src="/images/iconEnterpriseSupport.png"
-                alt={t("admin.info.enterpriseIconAlt")}
+                alt={t('admin.info.enterpriseIconAlt')}
               />
             </ImageWrapper>
             <div className="media-content">
               <div className="content">
                 <h3 className="has-text-weight-medium">
-                  {t("admin.info.enterpriseTitle")}
+                  {t('admin.info.enterpriseTitle')}
                 </h3>
                 <p>
-                  {t("admin.info.enterpriseInfo")}
+                  {t('admin.info.enterpriseInfo')}
                   <br />
-                  <strong>{t("admin.info.enterprisePartner")}</strong>
+                  <strong>{t('admin.info.enterprisePartner')}</strong>
                 </p>
                 <a
                   className="button is-info is-pulled-right is-normal"
                   target="_blank"
-                  href={t("admin.info.enterpriseLink")}
+                  href={t('admin.info.enterpriseLink')}
                 >
-                  {t("admin.info.enterpriseButton")}
+                  {t('admin.info.enterpriseButton')}
                 </a>
               </div>
             </div>
@@ -98,8 +97,8 @@ class AdminDetails extends React.Component<Props> {
 const mapStateToProps = (state: any) => {
   const version = getAppVersion(state);
   return {
-    version
+    version,
   };
 };
 
-export default connect(mapStateToProps)(translate("admin")(AdminDetails));
+export default connect(mapStateToProps)(translate('admin')(AdminDetails));

scm-ui/ui-webapp/src/admin/containers/GlobalConfig.tsx

@@ -1,7 +1,6 @@
-// @flow
-import React from "react";
-import { translate } from "react-i18next";
-import { Title, Loading, ErrorNotification } from "@scm-manager/ui-components";
+import React from 'react';
+import { translate } from 'react-i18next';
+import { Title, Loading, ErrorNotification } from '@scm-manager/ui-components';
 import {
   fetchConfig,
   getFetchConfigFailure,
@@ -11,40 +10,40 @@ import {
   isModifyConfigPending,
   getConfigUpdatePermission,
   getModifyConfigFailure,
-  modifyConfigReset
-} from "../modules/config";
-import { connect } from "react-redux";
-import type { Config, NamespaceStrategies } from "@scm-manager/ui-types";
-import ConfigForm from "../components/form/ConfigForm";
-import { getConfigLink } from "../../modules/indexResource";
+  modifyConfigReset,
+} from '../modules/config';
+import { connect } from 'react-redux';
+import { Config, NamespaceStrategies } from '@scm-manager/ui-types';
+import ConfigForm from '../components/form/ConfigForm';
+import { getConfigLink } from '../../modules/indexResource';
 import {
   fetchNamespaceStrategiesIfNeeded,
   getFetchNamespaceStrategiesFailure,
   getNamespaceStrategies,
-  isFetchNamespaceStrategiesPending
-} from "../modules/namespaceStrategies";
+  isFetchNamespaceStrategiesPending,
+} from '../modules/namespaceStrategies';
 
 type Props = {
-  loading: boolean,
-  error: Error,
-  config: Config,
-  configUpdatePermission: boolean,
-  configLink: string,
-  namespaceStrategies?: NamespaceStrategies,
+  loading: boolean;
+  error: Error;
+  config: Config;
+  configUpdatePermission: boolean;
+  configLink: string;
+  namespaceStrategies?: NamespaceStrategies;
 
   // dispatch functions
-  modifyConfig: (config: Config, callback?: () => void) => void,
-  fetchConfig: (link: string) => void,
-  configReset: void => void,
-  fetchNamespaceStrategiesIfNeeded: void => void,
+  modifyConfig: (config: Config, callback?: () => void) => void;
+  fetchConfig: (link: string) => void;
+  configReset: (p: void) => void;
+  fetchNamespaceStrategiesIfNeeded: (p: void) => void;
 
   // context objects
-  t: string => string
+  t: (p: string) => string;
 };
 
 type State = {
-  configReadPermission: boolean,
-  configChanged: boolean
+  configReadPermission: boolean;
+  configChanged: boolean;
 };
 
 class GlobalConfig extends React.Component<Props, State> {
@@ -53,7 +52,7 @@ class GlobalConfig extends React.Component<Props, State> {
 
     this.state = {
       configReadPermission: true,
-      configChanged: false
+      configChanged: false,
     };
   }
 
@@ -63,13 +62,17 @@ class GlobalConfig extends React.Component<Props, State> {
     if (this.props.configLink) {
       this.props.fetchConfig(this.props.configLink);
     } else {
-      this.setState({configReadPermission: false});
+      this.setState({
+        configReadPermission: false,
+      });
     }
   }
 
   modifyConfig = (config: Config) => {
     this.props.modifyConfig(config);
-    this.setState({ configChanged: true });
+    this.setState({
+      configChanged: true,
+    });
   };
 
   renderConfigChangedNotification = () => {
@@ -78,9 +81,13 @@ class GlobalConfig extends React.Component<Props, State> {
         <div className="notification is-primary">
           <button
             className="delete"
-            onClick={() => this.setState({ configChanged: false })}
+            onClick={() =>
+              this.setState({
+                configChanged: false,
+              })
+            }
           />
-          {this.props.t("config.form.submit-success-notification")}
+          {this.props.t('config.form.submit-success-notification')}
         </div>
       );
     }
@@ -96,7 +103,7 @@ class GlobalConfig extends React.Component<Props, State> {
 
     return (
       <div>
-        <Title title={t("config.title")} />
+        <Title title={t('config.title')} />
         {this.renderError()}
         {this.renderContent()}
       </div>
@@ -112,7 +119,13 @@ class GlobalConfig extends React.Component<Props, State> {
   };
 
   renderContent = () => {
-    const { error, loading, config, configUpdatePermission, namespaceStrategies } = this.props;
+    const {
+      error,
+      loading,
+      config,
+      configUpdatePermission,
+      namespaceStrategies,
+    } = this.props;
     const { configReadPermission } = this.state;
     if (!error) {
       return (
@@ -146,17 +159,19 @@ const mapDispatchToProps = dispatch => {
     },
     fetchNamespaceStrategiesIfNeeded: () => {
       dispatch(fetchNamespaceStrategiesIfNeeded());
-    }
+    },
   };
 };
 
 const mapStateToProps = state => {
-  const loading = isFetchConfigPending(state)
-    || isModifyConfigPending(state)
-    || isFetchNamespaceStrategiesPending(state);
-  const error = getFetchConfigFailure(state)
-    || getModifyConfigFailure(state)
-    || getFetchNamespaceStrategiesFailure(state);
+  const loading =
+    isFetchConfigPending(state) ||
+    isModifyConfigPending(state) ||
+    isFetchNamespaceStrategiesPending(state);
+  const error =
+    getFetchConfigFailure(state) ||
+    getModifyConfigFailure(state) ||
+    getFetchNamespaceStrategiesFailure(state);
 
   const config = getConfig(state);
   const configUpdatePermission = getConfigUpdatePermission(state);
@@ -169,11 +184,11 @@ const mapStateToProps = state => {
     config,
     configUpdatePermission,
     configLink,
-    namespaceStrategies
+    namespaceStrategies,
   };
 };
 
 export default connect(
   mapStateToProps,
-  mapDispatchToProps
-)(translate("config")(GlobalConfig));
+  mapDispatchToProps,
+)(translate('config')(GlobalConfig));

scm-ui/ui-webapp/src/admin/modules/config.test.ts

@@ -1,7 +1,6 @@
-//@flow
-import configureMockStore from "redux-mock-store";
-import thunk from "redux-thunk";
-import fetchMock from "fetch-mock";
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import fetchMock from 'fetch-mock';
 
 import reducer, {
   FETCH_CONFIG,
@@ -20,106 +19,118 @@ import reducer, {
   isModifyConfigPending,
   getModifyConfigFailure,
   getConfig,
-  getConfigUpdatePermission
-} from "./config";
+  getConfigUpdatePermission,
+} from './config';
 
-const CONFIG_URL = "/config";
-const URL = "/api/v2" + CONFIG_URL;
+const CONFIG_URL = '/config';
+const URL = '/api/v2' + CONFIG_URL;
 
-const error = new Error("You have an error!");
+const error = new Error('You have an error!');
 
 const config = {
   proxyPassword: null,
   proxyPort: 8080,
-  proxyServer: "proxy.mydomain.com",
+  proxyServer: 'proxy.mydomain.com',
   proxyUser: null,
   enableProxy: false,
-  realmDescription: "SONIA :: SCM Manager",
+  realmDescription: 'SONIA :: SCM Manager',
   disableGroupingGrid: false,
-  dateFormat: "YYYY-MM-DD HH:mm:ss",
+  dateFormat: 'YYYY-MM-DD HH:mm:ss',
   anonymousAccessEnabled: false,
   adminGroups: [],
   adminUsers: [],
-  baseUrl: "http://localhost:8081",
+  baseUrl: 'http://localhost:8081',
   forceBaseUrl: false,
   loginAttemptLimit: -1,
   proxyExcludes: [],
   skipFailedAuthenticators: false,
   pluginUrl:
-    "http://plugins.scm-manager.org/scm-plugin-backend/api/{version}/plugins?os={os}&arch={arch}&snapshot=false",
+    'http://plugins.scm-manager.org/scm-plugin-backend/api/{version}/plugins?os={os}&arch={arch}&snapshot=false',
   loginAttemptLimitTimeout: 300,
   enabledXsrfProtection: true,
-  namespaceStrategy: "UsernameNamespaceStrategy",
+  namespaceStrategy: 'UsernameNamespaceStrategy',
   _links: {
-    self: { href: "http://localhost:8081/api/v2/config" },
-    update: { href: "http://localhost:8081/api/v2/config" }
-  }
+    self: {
+      href: 'http://localhost:8081/api/v2/config',
+    },
+    update: {
+      href: 'http://localhost:8081/api/v2/config',
+    },
+  },
 };
 
 const configWithNullValues = {
   proxyPassword: null,
   proxyPort: 8080,
-  proxyServer: "proxy.mydomain.com",
+  proxyServer: 'proxy.mydomain.com',
   proxyUser: null,
   enableProxy: false,
-  realmDescription: "SONIA :: SCM Manager",
+  realmDescription: 'SONIA :: SCM Manager',
   disableGroupingGrid: false,
-  dateFormat: "YYYY-MM-DD HH:mm:ss",
+  dateFormat: 'YYYY-MM-DD HH:mm:ss',
   anonymousAccessEnabled: false,
   adminGroups: null,
   adminUsers: null,
-  baseUrl: "http://localhost:8081",
+  baseUrl: 'http://localhost:8081',
   forceBaseUrl: false,
   loginAttemptLimit: -1,
   proxyExcludes: null,
   skipFailedAuthenticators: false,
   pluginUrl:
-    "http://plugins.scm-manager.org/scm-plugin-backend/api/{version}/plugins?os={os}&arch={arch}&snapshot=false",
+    'http://plugins.scm-manager.org/scm-plugin-backend/api/{version}/plugins?os={os}&arch={arch}&snapshot=false',
   loginAttemptLimitTimeout: 300,
   enabledXsrfProtection: true,
-  namespaceStrategy: "UsernameNamespaceStrategy",
+  namespaceStrategy: 'UsernameNamespaceStrategy',
   _links: {
-    self: { href: "http://localhost:8081/api/v2/config" },
-    update: { href: "http://localhost:8081/api/v2/config" }
-  }
+    self: {
+      href: 'http://localhost:8081/api/v2/config',
+    },
+    update: {
+      href: 'http://localhost:8081/api/v2/config',
+    },
+  },
 };
 
 const responseBody = {
   entries: config,
-  configUpdatePermission: false
+  configUpdatePermission: false,
 };
 
 const response = {
-  headers: { "content-type": "application/json" },
-  responseBody
+  headers: {
+    'content-type': 'application/json',
+  },
+  responseBody,
 };
 
-describe("config fetch()", () => {
+describe('config fetch()', () => {
   const mockStore = configureMockStore([thunk]);
   afterEach(() => {
     fetchMock.reset();
     fetchMock.restore();
   });
 
-  it("should successfully fetch config", () => {
+  it('should successfully fetch config', () => {
     fetchMock.getOnce(URL, response);
 
     const expectedActions = [
-      { type: FETCH_CONFIG_PENDING },
+      {
+        type: FETCH_CONFIG_PENDING,
+      },
       {
         type: FETCH_CONFIG_SUCCESS,
-        payload: response
-      }
+        payload: response,
+      },
     ];
 
     const store = mockStore({
       indexResources: {
         links: {
           config: {
-            href: CONFIG_URL
-          }
-        }
-      }
+            href: CONFIG_URL,
+          },
+        },
+      },
     });
 
     return store.dispatch(fetchConfig(CONFIG_URL)).then(() => {
@@ -127,19 +138,19 @@ describe("config fetch()", () => {
     });
   });
 
-  it("should fail getting config on HTTP 500", () => {
+  it('should fail getting config on HTTP 500', () => {
     fetchMock.getOnce(URL, {
-      status: 500
+      status: 500,
     });
 
     const store = mockStore({
       indexResources: {
         links: {
           config: {
-            href: CONFIG_URL
-          }
-        }
-      }
+            href: CONFIG_URL,
+          },
+        },
+      },
     });
     return store.dispatch(fetchConfig(CONFIG_URL)).then(() => {
       const actions = store.getActions();
@@ -149,9 +160,9 @@ describe("config fetch()", () => {
     });
   });
 
-  it("should successfully modify config", () => {
-    fetchMock.putOnce("http://localhost:8081/api/v2/config", {
-      status: 204
+  it('should successfully modify config', () => {
+    fetchMock.putOnce('http://localhost:8081/api/v2/config', {
+      status: 204,
     });
 
     const store = mockStore({});
@@ -164,9 +175,9 @@ describe("config fetch()", () => {
     });
   });
 
-  it("should call the callback after modifying config", () => {
-    fetchMock.putOnce("http://localhost:8081/api/v2/config", {
-      status: 204
+  it('should call the callback after modifying config', () => {
+    fetchMock.putOnce('http://localhost:8081/api/v2/config', {
+      status: 204,
     });
 
     let called = false;
@@ -183,9 +194,9 @@ describe("config fetch()", () => {
     });
   });
 
-  it("should fail modifying config on HTTP 500", () => {
-    fetchMock.putOnce("http://localhost:8081/api/v2/config", {
-      status: 500
+  it('should fail modifying config on HTTP 500', () => {
+    fetchMock.putOnce('http://localhost:8081/api/v2/config', {
+      status: 500,
     });
 
     const store = mockStore({});
@@ -199,28 +210,28 @@ describe("config fetch()", () => {
   });
 });
 
-describe("config reducer", () => {
-  it("should update state correctly according to FETCH_CONFIG_SUCCESS action", () => {
+describe('config reducer', () => {
+  it('should update state correctly according to FETCH_CONFIG_SUCCESS action', () => {
     const newState = reducer({}, fetchConfigSuccess(config));
 
     expect(newState).toEqual({
       entries: config,
-      configUpdatePermission: true
+      configUpdatePermission: true,
     });
   });
 
-  it("should set configUpdatePermission to true if update link is present", () => {
+  it('should set configUpdatePermission to true if update link is present', () => {
     const newState = reducer({}, fetchConfigSuccess(config));
 
     expect(newState.configUpdatePermission).toBeTruthy();
   });
 
-  it("should update state according to FETCH_CONFIG_SUCCESS action", () => {
+  it('should update state according to FETCH_CONFIG_SUCCESS action', () => {
     const newState = reducer({}, fetchConfigSuccess(config));
     expect(newState.entries).toBe(config);
   });
 
-  it("should return empty arrays for null values", () => {
+  it('should return empty arrays for null values', () => {
     // $FlowFixMe
     const config = reducer({}, fetchConfigSuccess(configWithNullValues))
       .entries;
@@ -230,73 +241,73 @@ describe("config reducer", () => {
   });
 });
 
-describe("selector tests", () => {
-  it("should return true, when fetch config is pending", () => {
+describe('selector tests', () => {
+  it('should return true, when fetch config is pending', () => {
     const state = {
       pending: {
-        [FETCH_CONFIG]: true
-      }
+        [FETCH_CONFIG]: true,
+      },
     };
     expect(isFetchConfigPending(state)).toEqual(true);
   });
 
-  it("should return false, when fetch config is not pending", () => {
+  it('should return false, when fetch config is not pending', () => {
     expect(isFetchConfigPending({})).toEqual(false);
   });
 
-  it("should return error when fetch config did fail", () => {
+  it('should return error when fetch config did fail', () => {
     const state = {
       failure: {
-        [FETCH_CONFIG]: error
-      }
+        [FETCH_CONFIG]: error,
+      },
     };
     expect(getFetchConfigFailure(state)).toEqual(error);
   });
 
-  it("should return undefined when fetch config did not fail", () => {
+  it('should return undefined when fetch config did not fail', () => {
     expect(getFetchConfigFailure({})).toBe(undefined);
   });
 
-  it("should return true, when modify group is pending", () => {
+  it('should return true, when modify group is pending', () => {
     const state = {
       pending: {
-        [MODIFY_CONFIG]: true
-      }
+        [MODIFY_CONFIG]: true,
+      },
     };
     expect(isModifyConfigPending(state)).toEqual(true);
   });
 
-  it("should return false, when modify config is not pending", () => {
+  it('should return false, when modify config is not pending', () => {
     expect(isModifyConfigPending({})).toEqual(false);
   });
 
-  it("should return error when modify config did fail", () => {
+  it('should return error when modify config did fail', () => {
     const state = {
       failure: {
-        [MODIFY_CONFIG]: error
-      }
+        [MODIFY_CONFIG]: error,
+      },
     };
     expect(getModifyConfigFailure(state)).toEqual(error);
   });
 
-  it("should return undefined when modify config did not fail", () => {
+  it('should return undefined when modify config did not fail', () => {
     expect(getModifyConfigFailure({})).toBe(undefined);
   });
 
-  it("should return config", () => {
+  it('should return config', () => {
     const state = {
       config: {
-        entries: config
-      }
+        entries: config,
+      },
     };
     expect(getConfig(state)).toEqual(config);
   });
 
-  it("should return configUpdatePermission", () => {
+  it('should return configUpdatePermission', () => {
     const state = {
       config: {
-        configUpdatePermission: true
-      }
+        configUpdatePermission: true,
+      },
     };
     expect(getConfigUpdatePermission(state)).toEqual(true);
   });

scm-ui/ui-webapp/src/admin/modules/config.ts

@@ -1,24 +1,23 @@
-// @flow
-import { apiClient } from "@scm-manager/ui-components";
-import * as types from "../../modules/types";
-import type { Action } from "@scm-manager/ui-types";
-import { isPending } from "../../modules/pending";
-import { getFailure } from "../../modules/failure";
-import { Dispatch } from "redux";
-import type { Config } from "@scm-manager/ui-types";
+import { apiClient } from '@scm-manager/ui-components';
+import * as types from '../../modules/types';
+import { Action } from '@scm-manager/ui-types';
+import { isPending } from '../../modules/pending';
+import { getFailure } from '../../modules/failure';
+import { Dispatch } from 'redux';
+import { Config } from '@scm-manager/ui-types';
 
-export const FETCH_CONFIG = "scm/config/FETCH_CONFIG";
+export const FETCH_CONFIG = 'scm/config/FETCH_CONFIG';
 export const FETCH_CONFIG_PENDING = `${FETCH_CONFIG}_${types.PENDING_SUFFIX}`;
 export const FETCH_CONFIG_SUCCESS = `${FETCH_CONFIG}_${types.SUCCESS_SUFFIX}`;
 export const FETCH_CONFIG_FAILURE = `${FETCH_CONFIG}_${types.FAILURE_SUFFIX}`;
 
-export const MODIFY_CONFIG = "scm/config/MODIFY_CONFIG";
+export const MODIFY_CONFIG = 'scm/config/MODIFY_CONFIG';
 export const MODIFY_CONFIG_PENDING = `${MODIFY_CONFIG}_${types.PENDING_SUFFIX}`;
 export const MODIFY_CONFIG_SUCCESS = `${MODIFY_CONFIG}_${types.SUCCESS_SUFFIX}`;
 export const MODIFY_CONFIG_FAILURE = `${MODIFY_CONFIG}_${types.FAILURE_SUFFIX}`;
 export const MODIFY_CONFIG_RESET = `${MODIFY_CONFIG}_${types.RESET_SUFFIX}`;
 
-const CONTENT_TYPE_CONFIG = "application/vnd.scmm-config+json;v=2";
+const CONTENT_TYPE_CONFIG = 'application/vnd.scmm-config+json;v=2';
 
 //fetch config
 export function fetchConfig(link: string) {
@@ -40,14 +39,14 @@ export function fetchConfig(link: string) {
 
 export function fetchConfigPending(): Action {
   return {
-    type: FETCH_CONFIG_PENDING
+    type: FETCH_CONFIG_PENDING,
   };
 }
 
 export function fetchConfigSuccess(config: Config): Action {
   return {
     type: FETCH_CONFIG_SUCCESS,
-    payload: config
+    payload: config,
   };
 }
 
@@ -55,8 +54,8 @@ export function fetchConfigFailure(error: Error): Action {
   return {
     type: FETCH_CONFIG_FAILURE,
     payload: {
-      error
-    }
+      error,
+    },
   };
 }
 
@@ -81,14 +80,14 @@ export function modifyConfig(config: Config, callback?: () => void) {
 export function modifyConfigPending(config: Config): Action {
   return {
     type: MODIFY_CONFIG_PENDING,
-    payload: config
+    payload: config,
   };
 }
 
 export function modifyConfigSuccess(config: Config): Action {
   return {
     type: MODIFY_CONFIG_SUCCESS,
-    payload: config
+    payload: config,
   };
 }
 
@@ -97,14 +96,14 @@ export function modifyConfigFailure(config: Config, error: Error): Action {
     type: MODIFY_CONFIG_FAILURE,
     payload: {
       error,
-      config
-    }
+      config,
+    },
   };
 }
 
 export function modifyConfigReset() {
   return {
-    type: MODIFY_CONFIG_RESET
+    type: MODIFY_CONFIG_RESET,
   };
 }
 
@@ -131,7 +130,7 @@ function reducer(state: any = {}, action: any = {}) {
       return {
         ...state,
         entries: config,
-        configUpdatePermission: action.payload._links.update ? true : false
+        configUpdatePermission: action.payload._links.update ? true : false,
       };
     default:
       return state;
@@ -142,29 +141,29 @@ export default reducer;
 
 // selectors
 
-export function isFetchConfigPending(state: Object) {
+export function isFetchConfigPending(state: object) {
   return isPending(state, FETCH_CONFIG);
 }
 
-export function getFetchConfigFailure(state: Object) {
+export function getFetchConfigFailure(state: object) {
   return getFailure(state, FETCH_CONFIG);
 }
 
-export function isModifyConfigPending(state: Object) {
+export function isModifyConfigPending(state: object) {
   return isPending(state, MODIFY_CONFIG);
 }
 
-export function getModifyConfigFailure(state: Object) {
+export function getModifyConfigFailure(state: object) {
   return getFailure(state, MODIFY_CONFIG);
 }
 
-export function getConfig(state: Object) {
+export function getConfig(state: object) {
   if (state.config && state.config.entries) {
     return state.config.entries;
   }
 }
 
-export function getConfigUpdatePermission(state: Object) {
+export function getConfigUpdatePermission(state: object) {
   if (state.config && state.config.configUpdatePermission) {
     return state.config.configUpdatePermission;
   }

scm-ui/ui-webapp/src/admin/modules/namespaceStrategies.test.ts

@@ -1,7 +1,6 @@
-// @flow
-import fetchMock from "fetch-mock";
-import configureMockStore from "redux-mock-store";
-import thunk from "redux-thunk";
+import fetchMock from 'fetch-mock';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
 import {
   FETCH_NAMESPACESTRATEGIES_TYPES,
   FETCH_NAMESPACESTRATEGIES_TYPES_FAILURE,
@@ -13,67 +12,67 @@ import {
   default as reducer,
   getNamespaceStrategies,
   isFetchNamespaceStrategiesPending,
-  getFetchNamespaceStrategiesFailure
-} from "./namespaceStrategies";
-import { MODIFY_CONFIG_SUCCESS } from "./config";
+  getFetchNamespaceStrategiesFailure,
+} from './namespaceStrategies';
+import { MODIFY_CONFIG_SUCCESS } from './config';
 
 const strategies = {
-  current: "UsernameNamespaceStrategy",
+  current: 'UsernameNamespaceStrategy',
   available: [
-    "UsernameNamespaceStrategy",
-    "CustomNamespaceStrategy",
-    "CurrentYearNamespaceStrategy",
-    "RepositoryTypeNamespaceStrategy"
+    'UsernameNamespaceStrategy',
+    'CustomNamespaceStrategy',
+    'CurrentYearNamespaceStrategy',
+    'RepositoryTypeNamespaceStrategy',
   ],
   _links: {
     self: {
-      href: "http://localhost:8081/scm/api/v2/namespaceStrategies"
-    }
-  }
+      href: 'http://localhost:8081/scm/api/v2/namespaceStrategies',
+    },
+  },
 };
 
-describe("namespace strategy caching", () => {
-  it("should fetch strategies, on empty state", () => {
+describe('namespace strategy caching', () => {
+  it('should fetch strategies, on empty state', () => {
     expect(shouldFetchNamespaceStrategies({})).toBe(true);
   });
 
-  it("should fetch strategies, on empty namespaceStrategies node", () => {
+  it('should fetch strategies, on empty namespaceStrategies node', () => {
     const state = {
-      namespaceStrategies: {}
+      namespaceStrategies: {},
     };
     expect(shouldFetchNamespaceStrategies(state)).toBe(true);
   });
 
-  it("should not fetch strategies, on pending state", () => {
+  it('should not fetch strategies, on pending state', () => {
     const state = {
       pending: {
-        [FETCH_NAMESPACESTRATEGIES_TYPES]: true
-      }
+        [FETCH_NAMESPACESTRATEGIES_TYPES]: true,
+      },
     };
     expect(shouldFetchNamespaceStrategies(state)).toBe(false);
   });
 
-  it("should not fetch strategies, on failure state", () => {
+  it('should not fetch strategies, on failure state', () => {
     const state = {
       failure: {
-        [FETCH_NAMESPACESTRATEGIES_TYPES]: new Error("no...")
-      }
+        [FETCH_NAMESPACESTRATEGIES_TYPES]: new Error('no...'),
+      },
     };
     expect(shouldFetchNamespaceStrategies(state)).toBe(false);
   });
 
-  it("should not fetch strategies, if they are already fetched", () => {
+  it('should not fetch strategies, if they are already fetched', () => {
     const state = {
       namespaceStrategies: {
-        current: "some"
-      }
+        current: 'some',
+      },
     };
     expect(shouldFetchNamespaceStrategies(state)).toBe(false);
   });
 });
 
-describe("namespace strategies fetch", () => {
-  const URL = "http://scm.hitchhiker.com/api/v2/namespaceStrategies";
+describe('namespace strategies fetch', () => {
+  const URL = 'http://scm.hitchhiker.com/api/v2/namespaceStrategies';
   const mockStore = configureMockStore([thunk]);
 
   afterEach(() => {
@@ -87,22 +86,24 @@ describe("namespace strategies fetch", () => {
       indexResources: {
         links: {
           namespaceStrategies: {
-            href: URL
-          }
-        }
-      }
+            href: URL,
+          },
+        },
+      },
     });
   };
 
-  it("should successfully fetch strategies", () => {
+  it('should successfully fetch strategies', () => {
     fetchMock.getOnce(URL, strategies);
 
     const expectedActions = [
-      { type: FETCH_NAMESPACESTRATEGIES_TYPES_PENDING },
+      {
+        type: FETCH_NAMESPACESTRATEGIES_TYPES_PENDING,
+      },
       {
         type: FETCH_NAMESPACESTRATEGIES_TYPES_SUCCESS,
-        payload: strategies
-      }
+        payload: strategies,
+      },
     ];
 
     const store = createStore();
@@ -111,9 +112,9 @@ describe("namespace strategies fetch", () => {
     });
   });
 
-  it("should dispatch FETCH_NAMESPACESTRATEGIES_TYPES_FAILURE on server error", () => {
+  it('should dispatch FETCH_NAMESPACESTRATEGIES_TYPES_FAILURE on server error', () => {
     fetchMock.getOnce(URL, {
-      status: 500
+      status: 500,
     });
 
     const store = createStore();
@@ -125,75 +126,75 @@ describe("namespace strategies fetch", () => {
     });
   });
 
-  it("should not dispatch any action, if the strategies are already fetched", () => {
+  it('should not dispatch any action, if the strategies are already fetched', () => {
     const store = createStore({
-      namespaceStrategies: strategies
+      namespaceStrategies: strategies,
     });
     store.dispatch(fetchNamespaceStrategiesIfNeeded());
     expect(store.getActions().length).toBe(0);
   });
 });
 
-describe("namespace strategies reducer", () => {
-  it("should return unmodified state on unknown action", () => {
+describe('namespace strategies reducer', () => {
+  it('should return unmodified state on unknown action', () => {
     const state = {};
     expect(reducer(state)).toBe(state);
   });
 
-  it("should store the strategies on success", () => {
+  it('should store the strategies on success', () => {
     const newState = reducer({}, fetchNamespaceStrategiesSuccess(strategies));
     expect(newState).toBe(strategies);
   });
 
-  it("should clear store if config was modified", () => {
+  it('should clear store if config was modified', () => {
     const modifyConfigAction = {
       type: MODIFY_CONFIG_SUCCESS,
       payload: {
-        namespaceStrategy: "CustomNamespaceStrategy"
-      }
+        namespaceStrategy: 'CustomNamespaceStrategy',
+      },
     };
     const newState = reducer(strategies, modifyConfigAction);
-    expect(newState.current).toEqual("CustomNamespaceStrategy");
+    expect(newState.current).toEqual('CustomNamespaceStrategy');
   });
 });
 
-describe("namespace strategy selectors", () => {
-  const error = new Error("The end of the universe");
+describe('namespace strategy selectors', () => {
+  const error = new Error('The end of the universe');
 
-  it("should return an empty object", () => {
+  it('should return an empty object', () => {
     expect(getNamespaceStrategies({})).toEqual({});
   });
 
-  it("should return the namespace strategies", () => {
+  it('should return the namespace strategies', () => {
     const state = {
-      namespaceStrategies: strategies
+      namespaceStrategies: strategies,
     };
     expect(getNamespaceStrategies(state)).toBe(strategies);
   });
 
-  it("should return true, when fetch namespace strategies is pending", () => {
+  it('should return true, when fetch namespace strategies is pending', () => {
     const state = {
       pending: {
-        [FETCH_NAMESPACESTRATEGIES_TYPES]: true
-      }
+        [FETCH_NAMESPACESTRATEGIES_TYPES]: true,
+      },
     };
     expect(isFetchNamespaceStrategiesPending(state)).toEqual(true);
   });
 
-  it("should return false, when fetch strategies is not pending", () => {
+  it('should return false, when fetch strategies is not pending', () => {
     expect(isFetchNamespaceStrategiesPending({})).toEqual(false);
   });
 
-  it("should return error when fetch namespace strategies did fail", () => {
+  it('should return error when fetch namespace strategies did fail', () => {
     const state = {
       failure: {
-        [FETCH_NAMESPACESTRATEGIES_TYPES]: error
-      }
+        [FETCH_NAMESPACESTRATEGIES_TYPES]: error,
+      },
     };
     expect(getFetchNamespaceStrategiesFailure(state)).toEqual(error);
   });
 
-  it("should return undefined when fetch strategies did not fail", () => {
+  it('should return undefined when fetch strategies did not fail', () => {
     expect(getFetchNamespaceStrategiesFailure({})).toBe(undefined);
   });
 });

scm-ui/ui-webapp/src/admin/modules/namespaceStrategies.ts

@@ -1,30 +1,23 @@
-// @flow
-import * as types from "../../modules/types";
-import type { Action, NamespaceStrategies } from "@scm-manager/ui-types";
-import { apiClient } from "@scm-manager/ui-components";
-import { isPending } from "../../modules/pending";
-import { getFailure } from "../../modules/failure";
-import { MODIFY_CONFIG_SUCCESS } from "./config";
+import * as types from '../../modules/types';
+import { Action, NamespaceStrategies } from '@scm-manager/ui-types';
+import { apiClient } from '@scm-manager/ui-components';
+import { isPending } from '../../modules/pending';
+import { getFailure } from '../../modules/failure';
+import { MODIFY_CONFIG_SUCCESS } from './config';
 
 export const FETCH_NAMESPACESTRATEGIES_TYPES =
-  "scm/config/FETCH_NAMESPACESTRATEGIES_TYPES";
-export const FETCH_NAMESPACESTRATEGIES_TYPES_PENDING = `${FETCH_NAMESPACESTRATEGIES_TYPES}_${
-  types.PENDING_SUFFIX
-}`;
-export const FETCH_NAMESPACESTRATEGIES_TYPES_SUCCESS = `${FETCH_NAMESPACESTRATEGIES_TYPES}_${
-  types.SUCCESS_SUFFIX
-}`;
-export const FETCH_NAMESPACESTRATEGIES_TYPES_FAILURE = `${FETCH_NAMESPACESTRATEGIES_TYPES}_${
-  types.FAILURE_SUFFIX
-}`;
+  'scm/config/FETCH_NAMESPACESTRATEGIES_TYPES';
+export const FETCH_NAMESPACESTRATEGIES_TYPES_PENDING = `${FETCH_NAMESPACESTRATEGIES_TYPES}_${types.PENDING_SUFFIX}`;
+export const FETCH_NAMESPACESTRATEGIES_TYPES_SUCCESS = `${FETCH_NAMESPACESTRATEGIES_TYPES}_${types.SUCCESS_SUFFIX}`;
+export const FETCH_NAMESPACESTRATEGIES_TYPES_FAILURE = `${FETCH_NAMESPACESTRATEGIES_TYPES}_${types.FAILURE_SUFFIX}`;
 
 export function fetchNamespaceStrategiesIfNeeded() {
-  return function(dispatch: any, getState: () => Object) {
+  return function(dispatch: any, getState: () => object) {
     const state = getState();
     if (shouldFetchNamespaceStrategies(state)) {
       return fetchNamespaceStrategies(
         dispatch,
-        state.indexResources.links.namespaceStrategies.href
+        state.indexResources.links.namespaceStrategies.href,
       );
     }
   };
@@ -43,7 +36,7 @@ function fetchNamespaceStrategies(dispatch: any, url: string) {
     });
 }
 
-export function shouldFetchNamespaceStrategies(state: Object) {
+export function shouldFetchNamespaceStrategies(state: object) {
   if (
     isFetchNamespaceStrategiesPending(state) ||
     getFetchNamespaceStrategiesFailure(state)
@@ -55,32 +48,34 @@ export function shouldFetchNamespaceStrategies(state: Object) {
 
 export function fetchNamespaceStrategiesPending(): Action {
   return {
-    type: FETCH_NAMESPACESTRATEGIES_TYPES_PENDING
+    type: FETCH_NAMESPACESTRATEGIES_TYPES_PENDING,
   };
 }
 
 export function fetchNamespaceStrategiesSuccess(
-  namespaceStrategies: NamespaceStrategies
+  namespaceStrategies: NamespaceStrategies,
 ): Action {
   return {
     type: FETCH_NAMESPACESTRATEGIES_TYPES_SUCCESS,
-    payload: namespaceStrategies
+    payload: namespaceStrategies,
   };
 }
 
 export function fetchNamespaceStrategiesFailure(error: Error): Action {
   return {
     type: FETCH_NAMESPACESTRATEGIES_TYPES_FAILURE,
-    payload: error
+    payload: error,
   };
 }
 
 // reducers
 
 export default function reducer(
-  state: Object = {},
-  action: Action = { type: "UNKNOWN" }
-): Object {
+  state: object = {},
+  action: Action = {
+    type: 'UNKNOWN',
+  },
+): object {
   if (
     action.type === FETCH_NAMESPACESTRATEGIES_TYPES_SUCCESS &&
     action.payload
@@ -90,7 +85,7 @@ export default function reducer(
     const config = action.payload;
     return {
       ...state,
-      current: config.namespaceStrategy
+      current: config.namespaceStrategy,
     };
   }
   return state;
@@ -98,17 +93,17 @@ export default function reducer(
 
 // selectors
 
-export function getNamespaceStrategies(state: Object) {
+export function getNamespaceStrategies(state: object) {
   if (state.namespaceStrategies) {
     return state.namespaceStrategies;
   }
   return {};
 }
 
-export function isFetchNamespaceStrategiesPending(state: Object) {
+export function isFetchNamespaceStrategiesPending(state: object) {
   return isPending(state, FETCH_NAMESPACESTRATEGIES_TYPES);
 }
 
-export function getFetchNamespaceStrategiesFailure(state: Object) {
+export function getFetchNamespaceStrategiesFailure(state: object) {
   return getFailure(state, FETCH_NAMESPACESTRATEGIES_TYPES);
 }

scm-ui/ui-webapp/src/admin/plugins/components/CancelPendingActionModal.tsx

@@ -1,18 +1,16 @@
-// @flow
-
-import React from "react";
-import PluginActionModal from "./PluginActionModal";
-import type { PendingPlugins } from "@scm-manager/ui-types";
-import { apiClient } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
+import React from 'react';
+import PluginActionModal from './PluginActionModal';
+import { PendingPlugins } from '@scm-manager/ui-types';
+import { apiClient } from '@scm-manager/ui-components';
+import { translate } from 'react-i18next';
 
 type Props = {
-  onClose: () => void,
-  refresh: () => void,
-  pendingPlugins: PendingPlugins,
+  onClose: () => void;
+  refresh: () => void;
+  pendingPlugins: PendingPlugins;
 
   // context props
-  t: string => string
+  t: (p: string) => string;
 };
 
 class CancelPendingActionModal extends React.Component<Props> {
@@ -21,8 +19,8 @@ class CancelPendingActionModal extends React.Component<Props> {
 
     return (
       <PluginActionModal
-        description={t("plugins.modal.cancelPending")}
-        label={t("plugins.cancelPending")}
+        description={t('plugins.modal.cancelPending')}
+        label={t('plugins.cancelPending')}
         onClose={onClose}
         pendingPlugins={pendingPlugins}
         execute={this.cancelPending}
@@ -39,4 +37,4 @@ class CancelPendingActionModal extends React.Component<Props> {
   };
 }
 
-export default translate("admin")(CancelPendingActionModal);
+export default translate('admin')(CancelPendingActionModal);

scm-ui/ui-webapp/src/admin/plugins/components/ExecutePendingAction.tsx

@@ -1,38 +1,37 @@
-// @flow
-import React from "react";
-import { Button } from "@scm-manager/ui-components";
-import type { PendingPlugins } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
-import ExecutePendingModal from "./ExecutePendingModal";
+import React from 'react';
+import { Button } from '@scm-manager/ui-components';
+import { PendingPlugins } from '@scm-manager/ui-types';
+import { translate } from 'react-i18next';
+import ExecutePendingModal from './ExecutePendingModal';
 
 type Props = {
-  pendingPlugins: PendingPlugins,
+  pendingPlugins: PendingPlugins;
 
   // context props
-  t: string => string
+  t: (p: string) => string;
 };
 
 type State = {
-  showModal: boolean
+  showModal: boolean;
 };
 
 class ExecutePendingAction extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      showModal: false
+      showModal: false,
     };
   }
 
   openModal = () => {
     this.setState({
-      showModal: true
+      showModal: true,
     });
   };
 
   closeModal = () => {
     this.setState({
-      showModal: false
+      showModal: false,
     });
   };
 
@@ -57,7 +56,7 @@ class ExecutePendingAction extends React.Component<Props, State> {
         {this.renderModal()}
         <Button
           color="primary"
-          label={t("plugins.executePending")}
+          label={t('plugins.executePending')}
           action={this.openModal}
         />
       </>
@@ -65,4 +64,4 @@ class ExecutePendingAction extends React.Component<Props, State> {
   }
 }
 
-export default translate("admin")(ExecutePendingAction);
+export default translate('admin')(ExecutePendingAction);

scm-ui/ui-webapp/src/admin/plugins/components/ExecutePendingActionModal.js

@@ -1,45 +0,0 @@
-// @flow
-
-import React from "react";
-import PluginActionModal from "./PluginActionModal";
-import type { PendingPlugins } from "@scm-manager/ui-types";
-import waitForRestart from "./waitForRestart";
-import { apiClient, Notification } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
-
-type Props = {
-  onClose: () => void,
-  pendingPlugins: PendingPlugins,
-
-  // context props
-  t: string => string
-};
-
-class ExecutePendingActionModal extends React.Component<Props> {
-  render() {
-    const { onClose, pendingPlugins, t } = this.props;
-
-    return (
-      <PluginActionModal
-        description={t("plugins.modal.executePending")}
-        label={t("plugins.modal.executeAndRestart")}
-        onClose={onClose}
-        pendingPlugins={pendingPlugins}
-        execute={this.executeAndRestart}
-      >
-        <Notification type="warning">
-          {t("plugins.modal.restartNotification")}
-        </Notification>
-      </PluginActionModal>
-    );
-  }
-
-  executeAndRestart = () => {
-    const { pendingPlugins } = this.props;
-    return apiClient
-      .post(pendingPlugins._links.execute.href)
-      .then(waitForRestart);
-  };
-}
-
-export default translate("admin")(ExecutePendingActionModal);

scm-ui/ui-webapp/src/admin/plugins/components/ExecutePendingActionModal.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PluginActionModal from './PluginActionModal';
+import { PendingPlugins } from '@scm-manager/ui-types';
+import waitForRestart from './waitForRestart';
+import { apiClient, Notification } from '@scm-manager/ui-components';
+import { translate } from 'react-i18next';
+
+type Props = {
+  onClose: () => void;
+  pendingPlugins: PendingPlugins;
+
+  // context props
+  t: (p: string) => string;
+};
+
+class ExecutePendingActionModal extends React.Component<Props> {
+  render() {
+    const { onClose, pendingPlugins, t } = this.props;
+
+    return (
+      <PluginActionModal
+        description={t('plugins.modal.executePending')}
+        label={t('plugins.modal.executeAndRestart')}
+        onClose={onClose}
+        pendingPlugins={pendingPlugins}
+        execute={this.executeAndRestart}
+      >
+        <Notification type="warning">
+          {t('plugins.modal.restartNotification')}
+        </Notification>
+      </PluginActionModal>
+    );
+  }
+
+  executeAndRestart = () => {
+    const { pendingPlugins } = this.props;
+    return apiClient
+      .post(pendingPlugins._links.execute.href)
+      .then(waitForRestart);
+  };
+}
+
+export default translate('admin')(ExecutePendingActionModal);

scm-ui/ui-webapp/src/admin/plugins/components/ExecutePendingModal.tsx

@@ -1,30 +1,29 @@
-// @flow
-import React from "react";
+import React from 'react';
 import {
   apiClient,
   Button,
   ButtonGroup,
   ErrorNotification,
   Modal,
-  Notification
-} from "@scm-manager/ui-components";
-import type { PendingPlugins } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
-import waitForRestart from "./waitForRestart";
-import SuccessNotification from "./SuccessNotification";
+  Notification,
+} from '@scm-manager/ui-components';
+import { PendingPlugins } from '@scm-manager/ui-types';
+import { translate } from 'react-i18next';
+import waitForRestart from './waitForRestart';
+import SuccessNotification from './SuccessNotification';
 
 type Props = {
-  onClose: () => void,
-  pendingPlugins: PendingPlugins,
+  onClose: () => void;
+  pendingPlugins: PendingPlugins;
 
   // context props
-  t: string => string
+  t: (p: string) => string;
 };
 
 type State = {
-  loading: boolean,
-  success: boolean,
-  error?: Error
+  loading: boolean;
+  success: boolean;
+  error?: Error;
 };
 
 class ExecutePendingModal extends React.Component<Props, State> {
@@ -32,7 +31,7 @@ class ExecutePendingModal extends React.Component<Props, State> {
     super(props);
     this.state = {
       loading: false,
-      success: false
+      success: false,
     };
   }
 
@@ -46,7 +45,7 @@ class ExecutePendingModal extends React.Component<Props, State> {
     } else {
       return (
         <Notification type="warning">
-          {t("plugins.modal.restartNotification")}
+          {t('plugins.modal.restartNotification')}
         </Notification>
       );
     }
@@ -55,7 +54,7 @@ class ExecutePendingModal extends React.Component<Props, State> {
   executeAndRestart = () => {
     const { pendingPlugins } = this.props;
     this.setState({
-      loading: true
+      loading: true,
     });
 
     apiClient
@@ -65,14 +64,14 @@ class ExecutePendingModal extends React.Component<Props, State> {
         this.setState({
           success: true,
           loading: false,
-          error: undefined
+          error: undefined,
         });
       })
       .catch(error => {
         this.setState({
           success: false,
           loading: false,
-          error: error
+          error: error,
         });
       });
   };
@@ -81,17 +80,16 @@ class ExecutePendingModal extends React.Component<Props, State> {
     const { pendingPlugins, t } = this.props;
     return (
       <>
-        {pendingPlugins._embedded &&
-          pendingPlugins._embedded.new.length > 0 && (
-            <>
-              <strong>{t("plugins.modal.installQueue")}</strong>
-              <ul>
-                {pendingPlugins._embedded.new.map(plugin => (
-                  <li key={plugin.name}>{plugin.name}</li>
-                ))}
-              </ul>
-            </>
-          )}
+        {pendingPlugins._embedded && pendingPlugins._embedded.new.length > 0 && (
+          <>
+            <strong>{t('plugins.modal.installQueue')}</strong>
+            <ul>
+              {pendingPlugins._embedded.new.map(plugin => (
+                <li key={plugin.name}>{plugin.name}</li>
+              ))}
+            </ul>
+          </>
+        )}
       </>
     );
   };
@@ -103,7 +101,7 @@ class ExecutePendingModal extends React.Component<Props, State> {
         {pendingPlugins._embedded &&
           pendingPlugins._embedded.update.length > 0 && (
             <>
-              <strong>{t("plugins.modal.updateQueue")}</strong>
+              <strong>{t('plugins.modal.updateQueue')}</strong>
               <ul>
                 {pendingPlugins._embedded.update.map(plugin => (
                   <li key={plugin.name}>{plugin.name}</li>
@@ -122,7 +120,7 @@ class ExecutePendingModal extends React.Component<Props, State> {
         {pendingPlugins._embedded &&
           pendingPlugins._embedded.uninstall.length > 0 && (
             <>
-              <strong>{t("plugins.modal.uninstallQueue")}</strong>
+              <strong>{t('plugins.modal.uninstallQueue')}</strong>
               <ul>
                 {pendingPlugins._embedded.uninstall.map(plugin => (
                   <li key={plugin.name}>{plugin.name}</li>
@@ -140,7 +138,7 @@ class ExecutePendingModal extends React.Component<Props, State> {
       <>
         <div className="media">
           <div className="content">
-            <p>{t("plugins.modal.executePending")}</p>
+            <p>{t('plugins.modal.executePending')}</p>
             {this.renderInstallQueue()}
             {this.renderUpdateQueue()}
             {this.renderUninstallQueue()}
@@ -158,12 +156,12 @@ class ExecutePendingModal extends React.Component<Props, State> {
       <ButtonGroup>
         <Button
           color="warning"
-          label={t("plugins.modal.executeAndRestart")}
+          label={t('plugins.modal.executeAndRestart')}
           loading={loading}
           action={this.executeAndRestart}
           disabled={error || success}
         />
-        <Button label={t("plugins.modal.abort")} action={onClose} />
+        <Button label={t('plugins.modal.abort')} action={onClose} />
       </ButtonGroup>
     );
   };
@@ -172,7 +170,7 @@ class ExecutePendingModal extends React.Component<Props, State> {
     const { onClose, t } = this.props;
     return (
       <Modal
-        title={t("plugins.modal.executeAndRestart")}
+        title={t('plugins.modal.executeAndRestart')}
         closeFunction={onClose}
         body={this.renderBody()}
         footer={this.renderFooter()}
@@ -182,4 +180,4 @@ class ExecutePendingModal extends React.Component<Props, State> {
   }
 }
 
-export default translate("admin")(ExecutePendingModal);
+export default translate('admin')(ExecutePendingModal);

scm-ui/ui-webapp/src/admin/plugins/components/PluginActionModal.tsx

@@ -1,35 +1,34 @@
-// @flow
-import * as React from "react";
+import * as React from 'react';
 import {
   Button,
   ButtonGroup,
   ErrorNotification,
-  Modal
-} from "@scm-manager/ui-components";
-import type { PendingPlugins, PluginCollection } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
-import SuccessNotification from "./SuccessNotification";
+  Modal,
+} from '@scm-manager/ui-components';
+import { PendingPlugins, PluginCollection } from '@scm-manager/ui-types';
+import { translate } from 'react-i18next';
+import SuccessNotification from './SuccessNotification';
 
 type Props = {
-  onClose: () => void,
-  actionType: string,
-  pendingPlugins?: PendingPlugins,
-  installedPlugins?: PluginCollection,
-  refresh: () => void,
-  execute: () => Promise<any>,
-  description: string,
-  label: string,
+  onClose: () => void;
+  actionType: string;
+  pendingPlugins?: PendingPlugins;
+  installedPlugins?: PluginCollection;
+  refresh: () => void;
+  execute: () => Promise<any>;
+  description: string;
+  label: string;
 
-  children?: React.Node,
+  children?: React.Node;
 
   // context props
-  t: string => string
+  t: (p: string) => string;
 };
 
 type State = {
-  loading: boolean,
-  success: boolean,
-  error?: Error
+  loading: boolean;
+  success: boolean;
+  error?: Error;
 };
 
 class PluginActionModal extends React.Component<Props, State> {
@@ -37,7 +36,7 @@ class PluginActionModal extends React.Component<Props, State> {
     super(props);
     this.state = {
       loading: false,
-      success: false
+      success: false,
     };
   }
 
@@ -55,7 +54,7 @@ class PluginActionModal extends React.Component<Props, State> {
 
   executeAction = () => {
     this.setState({
-      loading: true
+      loading: true,
     });
 
     this.props
@@ -63,14 +62,14 @@ class PluginActionModal extends React.Component<Props, State> {
       .then(() => {
         this.setState({
           success: true,
-          loading: false
+          loading: false,
         });
       })
       .catch(error => {
         this.setState({
           success: false,
           loading: false,
-          error: error
+          error: error,
         });
       });
   };
@@ -94,7 +93,7 @@ class PluginActionModal extends React.Component<Props, State> {
           installedPlugins._embedded &&
           installedPlugins._embedded.plugins && (
             <>
-              <strong>{t("plugins.modal.updateQueue")}</strong>
+              <strong>{t('plugins.modal.updateQueue')}</strong>
               <ul>
                 {installedPlugins._embedded.plugins
                   .filter(plugin => plugin._links && plugin._links.update)
@@ -116,7 +115,7 @@ class PluginActionModal extends React.Component<Props, State> {
           pendingPlugins._embedded &&
           pendingPlugins._embedded.new.length > 0 && (
             <>
-              <strong>{t("plugins.modal.installQueue")}</strong>
+              <strong>{t('plugins.modal.installQueue')}</strong>
               <ul>
                 {pendingPlugins._embedded.new.map(plugin => (
                   <li key={plugin.name}>{plugin.name}</li>
@@ -136,7 +135,7 @@ class PluginActionModal extends React.Component<Props, State> {
           pendingPlugins._embedded &&
           pendingPlugins._embedded.update.length > 0 && (
             <>
-              <strong>{t("plugins.modal.updateQueue")}</strong>
+              <strong>{t('plugins.modal.updateQueue')}</strong>
               <ul>
                 {pendingPlugins._embedded.update.map(plugin => (
                   <li key={plugin.name}>{plugin.name}</li>
@@ -156,7 +155,7 @@ class PluginActionModal extends React.Component<Props, State> {
           pendingPlugins._embedded &&
           pendingPlugins._embedded.uninstall.length > 0 && (
             <>
-              <strong>{t("plugins.modal.uninstallQueue")}</strong>
+              <strong>{t('plugins.modal.uninstallQueue')}</strong>
               <ul>
                 {pendingPlugins._embedded.uninstall.map(plugin => (
                   <li key={plugin.name}>{plugin.name}</li>
@@ -194,7 +193,7 @@ class PluginActionModal extends React.Component<Props, State> {
           action={this.executeAction}
           disabled={error || success}
         />
-        <Button label={t("plugins.modal.abort")} action={onClose} />
+        <Button label={t('plugins.modal.abort')} action={onClose} />
       </ButtonGroup>
     );
   };
@@ -213,4 +212,4 @@ class PluginActionModal extends React.Component<Props, State> {
   }
 }
 
-export default translate("admin")(PluginActionModal);
+export default translate('admin')(PluginActionModal);

scm-ui/ui-webapp/src/admin/plugins/components/PluginAvatar.js

@@ -1,22 +0,0 @@
-//@flow
-import React from "react";
-import {ExtensionPoint} from "@scm-manager/ui-extensions";
-import type {Plugin} from "@scm-manager/ui-types";
-import {Image} from "@scm-manager/ui-components";
-
-type Props = {
-  plugin: Plugin
-};
-
-export default class PluginAvatar extends React.Component<Props> {
-  render() {
-    const { plugin } = this.props;
-    return (
-      <p className="image is-64x64">
-        <ExtensionPoint name="plugins.plugin-avatar" props={{ plugin }}>
-          <Image src={plugin.avatarUrl ? plugin.avatarUrl : "/images/blib.jpg"} alt="Logo" />
-        </ExtensionPoint>
-      </p>
-    );
-  }
-}

scm-ui/ui-webapp/src/admin/plugins/components/PluginAvatar.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ExtensionPoint } from '@scm-manager/ui-extensions';
+import { Plugin } from '@scm-manager/ui-types';
+import { Image } from '@scm-manager/ui-components';
+
+type Props = {
+  plugin: Plugin;
+};
+
+export default class PluginAvatar extends React.Component<Props> {
+  render() {
+    const { plugin } = this.props;
+    return (
+      <p className="image is-64x64">
+        <ExtensionPoint
+          name="plugins.plugin-avatar"
+          props={{
+            plugin,
+          }}
+        >
+          <Image
+            src={plugin.avatarUrl ? plugin.avatarUrl : '/images/blib.jpg'}
+            alt="Logo"
+          />
+        </ExtensionPoint>
+      </p>
+    );
+  }
+}

scm-ui/ui-webapp/src/admin/plugins/components/PluginBottomActions.tsx

@@ -1,9 +1,8 @@
-// @flow
-import * as React from "react";
-import styled from "styled-components";
+import * as React from 'react';
+import styled from 'styled-components';
 
 type Props = {
-  children?: React.Node
+  children?: React.Node;
 };
 
 const ActionWrapper = styled.div`

scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.tsx

@@ -1,31 +1,30 @@
-//@flow
-import React from "react";
-import { translate } from "react-i18next";
-import classNames from "classnames";
-import styled from "styled-components";
-import type { Plugin } from "@scm-manager/ui-types";
-import { CardColumn, Icon } from "@scm-manager/ui-components";
-import PluginAvatar from "./PluginAvatar";
-import PluginModal from "./PluginModal";
+import React from 'react';
+import { translate } from 'react-i18next';
+import classNames from 'classnames';
+import styled from 'styled-components';
+import { Plugin } from '@scm-manager/ui-types';
+import { CardColumn, Icon } from '@scm-manager/ui-components';
+import PluginAvatar from './PluginAvatar';
+import PluginModal from './PluginModal';
 
 export const PluginAction = {
-  INSTALL: "install",
-  UPDATE: "update",
-  UNINSTALL: "uninstall"
+  INSTALL: 'install',
+  UPDATE: 'update',
+  UNINSTALL: 'uninstall',
 };
 
 type Props = {
-  plugin: Plugin,
-  refresh: () => void,
+  plugin: Plugin;
+  refresh: () => void;
 
   // context props
-  t: string => string
+  t: (p: string) => string;
 };
 
 type State = {
-  showInstallModal: boolean,
-  showUpdateModal: boolean,
-  showUninstallModal: boolean
+  showInstallModal: boolean;
+  showUpdateModal: boolean;
+  showUninstallModal: boolean;
 };
 
 const ActionbarWrapper = styled.div`
@@ -54,7 +53,7 @@ class PluginEntry extends React.Component<Props, State> {
     this.state = {
       showInstallModal: false,
       showUpdateModal: false,
-      showUninstallModal: false
+      showUninstallModal: false,
     };
   }
 
@@ -64,7 +63,9 @@ class PluginEntry extends React.Component<Props, State> {
 
   toggleModal = (showModal: string) => {
     const oldValue = this.state[showModal];
-    this.setState({ [showModal]: !oldValue });
+    this.setState({
+      [showModal]: !oldValue,
+    });
   };
 
   createFooterRight = (plugin: Plugin) => {
@@ -95,10 +96,10 @@ class PluginEntry extends React.Component<Props, State> {
         {this.isInstallable() && (
           <IconWrapper
             className="level-item"
-            onClick={() => this.toggleModal("showInstallModal")}
+            onClick={() => this.toggleModal('showInstallModal')}
           >
             <Icon
-              title={t("plugins.modal.install")}
+              title={t('plugins.modal.install')}
               name="download"
               color="info"
             />
@@ -107,10 +108,10 @@ class PluginEntry extends React.Component<Props, State> {
         {this.isUninstallable() && (
           <IconWrapper
             className="level-item"
-            onClick={() => this.toggleModal("showUninstallModal")}
+            onClick={() => this.toggleModal('showUninstallModal')}
           >
             <Icon
-              title={t("plugins.modal.uninstall")}
+              title={t('plugins.modal.uninstall')}
               name="trash"
               color="info"
             />
@@ -119,10 +120,10 @@ class PluginEntry extends React.Component<Props, State> {
         {this.isUpdatable() && (
           <IconWrapper
             className="level-item"
-            onClick={() => this.toggleModal("showUpdateModal")}
+            onClick={() => this.toggleModal('showUpdateModal')}
           >
             <Icon
-              title={t("plugins.modal.update")}
+              title={t('plugins.modal.update')}
               name="sync-alt"
               color="info"
             />
@@ -140,7 +141,7 @@ class PluginEntry extends React.Component<Props, State> {
           plugin={plugin}
           pluginAction={PluginAction.INSTALL}
           refresh={refresh}
-          onClose={() => this.toggleModal("showInstallModal")}
+          onClose={() => this.toggleModal('showInstallModal')}
         />
       );
     } else if (this.state.showUpdateModal && this.isUpdatable()) {
@@ -149,7 +150,7 @@ class PluginEntry extends React.Component<Props, State> {
           plugin={plugin}
           pluginAction={PluginAction.UPDATE}
           refresh={refresh}
-          onClose={() => this.toggleModal("showUpdateModal")}
+          onClose={() => this.toggleModal('showUpdateModal')}
         />
       );
     } else if (this.state.showUninstallModal && this.isUninstallable()) {
@@ -158,7 +159,7 @@ class PluginEntry extends React.Component<Props, State> {
           plugin={plugin}
           pluginAction={PluginAction.UNINSTALL}
           refresh={refresh}
-          onClose={() => this.toggleModal("showUninstallModal")}
+          onClose={() => this.toggleModal('showUninstallModal')}
         />
       );
     } else {
@@ -172,7 +173,7 @@ class PluginEntry extends React.Component<Props, State> {
       <Icon
         className="fa-spin fa-lg"
         name="spinner"
-        color={plugin.markedForUninstall ? "danger" : "info"}
+        color={plugin.markedForUninstall ? 'danger' : 'info'}
       />
     );
   };
@@ -190,7 +191,7 @@ class PluginEntry extends React.Component<Props, State> {
         <CardColumn
           action={
             this.isInstallable()
-              ? () => this.toggleModal("showInstallModal")
+              ? () => this.toggleModal('showInstallModal')
               : null
           }
           avatar={avatar}
@@ -209,4 +210,4 @@ class PluginEntry extends React.Component<Props, State> {
   }
 }
 
-export default translate("admin")(PluginEntry);
+export default translate('admin')(PluginEntry);

scm-ui/ui-webapp/src/admin/plugins/components/PluginGroupEntry.js

@@ -1,22 +0,0 @@
-//@flow
-import React from "react";
-import { CardColumnGroup } from "@scm-manager/ui-components";
-import type { PluginGroup } from "@scm-manager/ui-types";
-import PluginEntry from "./PluginEntry";
-
-type Props = {
-  group: PluginGroup,
-  refresh: () => void
-};
-
-class PluginGroupEntry extends React.Component<Props> {
-  render() {
-    const { group, refresh } = this.props;
-    const entries = group.plugins.map(plugin => {
-      return <PluginEntry plugin={plugin} key={plugin.name} refresh={refresh} />;
-    });
-    return <CardColumnGroup name={group.name} elements={entries} />;
-  }
-}
-
-export default PluginGroupEntry;

scm-ui/ui-webapp/src/admin/plugins/components/PluginGroupEntry.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { CardColumnGroup } from '@scm-manager/ui-components';
+import { PluginGroup } from '@scm-manager/ui-types';
+import PluginEntry from './PluginEntry';
+
+type Props = {
+  group: PluginGroup;
+  refresh: () => void;
+};
+
+class PluginGroupEntry extends React.Component<Props> {
+  render() {
+    const { group, refresh } = this.props;
+    const entries = group.plugins.map(plugin => {
+      return (
+        <PluginEntry plugin={plugin} key={plugin.name} refresh={refresh} />
+      );
+    });
+    return <CardColumnGroup name={group.name} elements={entries} />;
+  }
+}
+
+export default PluginGroupEntry;

scm-ui/ui-webapp/src/admin/plugins/components/PluginList.js

@@ -1,27 +0,0 @@
-//@flow
-import React from "react";
-import type { Plugin } from "@scm-manager/ui-types";
-import PluginGroupEntry from "../components/PluginGroupEntry";
-import groupByCategory from "./groupByCategory";
-
-type Props = {
-  plugins: Plugin[],
-  refresh: () => void
-};
-
-class PluginList extends React.Component<Props> {
-  render() {
-    const { plugins, refresh } = this.props;
-
-    const groups = groupByCategory(plugins);
-    return (
-      <div className="content is-plugin-page">
-        {groups.map(group => {
-          return <PluginGroupEntry group={group} key={group.name} refresh={refresh} />;
-        })}
-      </div>
-    );
-  }
-}
-
-export default PluginList;

scm-ui/ui-webapp/src/admin/plugins/components/PluginList.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Plugin } from '@scm-manager/ui-types';
+import PluginGroupEntry from '../components/PluginGroupEntry';
+import groupByCategory from './groupByCategory';
+
+type Props = {
+  plugins: Plugin[];
+  refresh: () => void;
+};
+
+class PluginList extends React.Component<Props> {
+  render() {
+    const { plugins, refresh } = this.props;
+
+    const groups = groupByCategory(plugins);
+    return (
+      <div className="content is-plugin-page">
+        {groups.map(group => {
+          return (
+            <PluginGroupEntry
+              group={group}
+              key={group.name}
+              refresh={refresh}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+}
+
+export default PluginList;

scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.tsx

@@ -1,9 +1,8 @@
-//@flow
-import React from "react";
-import { translate } from "react-i18next";
-import classNames from "classnames";
-import styled from "styled-components";
-import type { Plugin } from "@scm-manager/ui-types";
+import React from 'react';
+import { translate } from 'react-i18next';
+import classNames from 'classnames';
+import styled from 'styled-components';
+import { Plugin } from '@scm-manager/ui-types';
 import {
   apiClient,
   Button,
@@ -11,33 +10,33 @@ import {
   Checkbox,
   ErrorNotification,
   Modal,
-  Notification
-} from "@scm-manager/ui-components";
-import waitForRestart from "./waitForRestart";
-import SuccessNotification from "./SuccessNotification";
-import { PluginAction } from "./PluginEntry";
+  Notification,
+} from '@scm-manager/ui-components';
+import waitForRestart from './waitForRestart';
+import SuccessNotification from './SuccessNotification';
+import { PluginAction } from './PluginEntry';
 
 type Props = {
-  plugin: Plugin,
-  pluginAction: string,
-  refresh: () => void,
-  onClose: () => void,
+  plugin: Plugin;
+  pluginAction: string;
+  refresh: () => void;
+  onClose: () => void;
 
   // context props
-  t: (key: string, params?: Object) => string
+  t: (key: string, params?: object) => string;
 };
 
 type State = {
-  success: boolean,
-  restart: boolean,
-  loading: boolean,
-  error?: Error
+  success: boolean;
+  restart: boolean;
+  loading: boolean;
+  error?: Error;
 };
 
 const ListParent = styled.div`
   margin-right: 0;
   min-width: ${props =>
-    props.pluginAction === PluginAction.INSTALL ? "5.5em" : "10em"};
+    props.pluginAction === PluginAction.INSTALL ? '5.5em' : '10em'};
   text-align: left;
 `;
 
@@ -51,7 +50,7 @@ class PluginModal extends React.Component<Props, State> {
     this.state = {
       loading: false,
       restart: false,
-      success: false
+      success: false,
     };
   }
 
@@ -61,7 +60,7 @@ class PluginModal extends React.Component<Props, State> {
 
     const newState = {
       loading: false,
-      error: undefined
+      error: undefined,
     };
 
     if (restart) {
@@ -69,14 +68,14 @@ class PluginModal extends React.Component<Props, State> {
         .then(() => {
           this.setState({
             ...newState,
-            success: true
+            success: true,
           });
         })
         .catch(error => {
           this.setState({
             loading: false,
             success: false,
-            error
+            error,
           });
         });
     } else {
@@ -91,7 +90,7 @@ class PluginModal extends React.Component<Props, State> {
     const { plugin, pluginAction } = this.props;
     const { restart } = this.state;
 
-    let pluginActionLink = "";
+    let pluginActionLink = '';
 
     if (pluginAction === PluginAction.INSTALL) {
       pluginActionLink = plugin._links.install.href;
@@ -100,12 +99,12 @@ class PluginModal extends React.Component<Props, State> {
     } else if (pluginAction === PluginAction.UNINSTALL) {
       pluginActionLink = plugin._links.uninstall.href;
     }
-    return pluginActionLink + "?restart=" + restart.toString();
+    return pluginActionLink + '?restart=' + restart.toString();
   };
 
   handlePluginAction = (e: Event) => {
     this.setState({
-      loading: true
+      loading: true,
     });
     e.preventDefault();
     apiClient
@@ -115,7 +114,7 @@ class PluginModal extends React.Component<Props, State> {
         this.setState({
           loading: false,
           success: false,
-          error: error
+          error: error,
         });
       });
   };
@@ -124,10 +123,10 @@ class PluginModal extends React.Component<Props, State> {
     const { pluginAction, onClose, t } = this.props;
     const { loading, error, restart, success } = this.state;
 
-    let color = pluginAction === PluginAction.UNINSTALL ? "warning" : "primary";
+    let color = pluginAction === PluginAction.UNINSTALL ? 'warning' : 'primary';
     let label = `plugins.modal.${pluginAction}`;
     if (restart) {
-      color = "warning";
+      color = 'warning';
       label = `plugins.modal.${pluginAction}AndRestart`;
     }
     return (
@@ -139,7 +138,7 @@ class PluginModal extends React.Component<Props, State> {
           loading={loading}
           disabled={!!error || success}
         />
-        <Button label={t("plugins.modal.abort")} action={onClose} />
+        <Button label={t('plugins.modal.abort')} action={onClose} />
       </ButtonGroup>
     );
   };
@@ -152,7 +151,7 @@ class PluginModal extends React.Component<Props, State> {
       dependencies = (
         <div className="media">
           <Notification type="warning">
-            <strong>{t("plugins.modal.dependencyNotification")}</strong>
+            <strong>{t('plugins.modal.dependencyNotification')}</strong>
             <ul>
               {plugin.dependencies.map((dependency, index) => {
                 return <li key={index}>{dependency}</li>;
@@ -184,7 +183,7 @@ class PluginModal extends React.Component<Props, State> {
       return (
         <div className="media">
           <Notification type="warning">
-            {t("plugins.modal.restartNotification")}
+            {t('plugins.modal.restartNotification')}
           </Notification>
         </div>
       );
@@ -194,7 +193,7 @@ class PluginModal extends React.Component<Props, State> {
 
   handleRestartChange = (value: boolean) => {
     this.setState({
-      restart: value
+      restart: value,
     });
   };
 
@@ -213,25 +212,25 @@ class PluginModal extends React.Component<Props, State> {
           <div className="media-content">
             <div className="field is-horizontal">
               <ListParent
-                className={classNames("field-label", "is-inline-flex")}
+                className={classNames('field-label', 'is-inline-flex')}
                 pluginAction={pluginAction}
               >
-                {t("plugins.modal.author")}:
+                {t('plugins.modal.author')}:
               </ListParent>
-              <ListChild className={classNames("field-body", "is-inline-flex")}>
+              <ListChild className={classNames('field-body', 'is-inline-flex')}>
                 {plugin.author}
               </ListChild>
             </div>
             {pluginAction === PluginAction.INSTALL && (
               <div className="field is-horizontal">
                 <ListParent
-                  className={classNames("field-label", "is-inline-flex")}
+                  className={classNames('field-label', 'is-inline-flex')}
                   pluginAction={pluginAction}
                 >
-                  {t("plugins.modal.version")}:
+                  {t('plugins.modal.version')}:
                 </ListParent>
                 <ListChild
-                  className={classNames("field-body", "is-inline-flex")}
+                  className={classNames('field-body', 'is-inline-flex')}
                 >
                   {plugin.version}
                 </ListChild>
@@ -241,12 +240,12 @@ class PluginModal extends React.Component<Props, State> {
               pluginAction === PluginAction.UNINSTALL) && (
               <div className="field is-horizontal">
                 <ListParent
-                  className={classNames("field-label", "is-inline-flex")}
+                  className={classNames('field-label', 'is-inline-flex')}
                 >
-                  {t("plugins.modal.currentVersion")}:
+                  {t('plugins.modal.currentVersion')}:
                 </ListParent>
                 <ListChild
-                  className={classNames("field-body", "is-inline-flex")}
+                  className={classNames('field-body', 'is-inline-flex')}
                 >
                   {plugin.version}
                 </ListChild>
@@ -255,12 +254,12 @@ class PluginModal extends React.Component<Props, State> {
             {pluginAction === PluginAction.UPDATE && (
               <div className="field is-horizontal">
                 <ListParent
-                  className={classNames("field-label", "is-inline-flex")}
+                  className={classNames('field-label', 'is-inline-flex')}
                 >
-                  {t("plugins.modal.newVersion")}:
+                  {t('plugins.modal.newVersion')}:
                 </ListParent>
                 <ListChild
-                  className={classNames("field-body", "is-inline-flex")}
+                  className={classNames('field-body', 'is-inline-flex')}
                 >
                   {plugin.newVersion}
                 </ListChild>
@@ -273,7 +272,7 @@ class PluginModal extends React.Component<Props, State> {
           <div className="media-content">
             <Checkbox
               checked={restart}
-              label={t("plugins.modal.restart")}
+              label={t('plugins.modal.restart')}
               onChange={this.handleRestartChange}
               disabled={false}
             />
@@ -286,7 +285,7 @@ class PluginModal extends React.Component<Props, State> {
     return (
       <Modal
         title={t(`plugins.modal.title.${pluginAction}`, {
-          name: plugin.displayName ? plugin.displayName : plugin.name
+          name: plugin.displayName ? plugin.displayName : plugin.name,
         })}
         closeFunction={() => onClose()}
         body={body}
@@ -297,4 +296,4 @@ class PluginModal extends React.Component<Props, State> {
   }
 }
 
-export default translate("admin")(PluginModal);
+export default translate('admin')(PluginModal);

scm-ui/ui-webapp/src/admin/plugins/components/PluginTopActions.tsx

@@ -1,10 +1,9 @@
-// @flow
-import * as React from "react";
-import classNames from "classnames";
-import styled from "styled-components";
+import * as React from 'react';
+import classNames from 'classnames';
+import styled from 'styled-components';
 
 type Props = {
-  children?: React.Node
+  children?: React.Node;
 };
 
 const ChildWrapper = styled.div`
@@ -18,10 +17,10 @@ export default class PluginTopActions extends React.Component<Props> {
     return (
       <ChildWrapper
         className={classNames(
-          "column",
-          "is-flex",
-          "is-one-fifths",
-          "is-mobile-action-spacing"
+          'column',
+          'is-flex',
+          'is-one-fifths',
+          'is-mobile-action-spacing',
         )}
       >
         {children}

scm-ui/ui-webapp/src/admin/plugins/components/SuccessNotification.js

@@ -1,25 +0,0 @@
-// @flow
-import React from "react";
-import { translate } from "react-i18next";
-import { Notification } from "@scm-manager/ui-components";
-
-type Props = {
-  // context props
-  t: string => string
-};
-
-class InstallSuccessNotification extends React.Component<Props> {
-  render() {
-    const { t } = this.props;
-    return (
-      <Notification type="success">
-        {t("plugins.modal.successNotification")}{" "}
-        <a onClick={e => window.location.reload(true)}>
-          {t("plugins.modal.reload")}
-        </a>
-      </Notification>
-    );
-  }
-}
-
-export default translate("admin")(InstallSuccessNotification);

scm-ui/ui-webapp/src/admin/plugins/components/SuccessNotification.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { translate } from 'react-i18next';
+import { Notification } from '@scm-manager/ui-components';
+
+type Props = {
+  // context props
+  t: (p: string) => string;
+};
+
+class InstallSuccessNotification extends React.Component<Props> {
+  render() {
+    const { t } = this.props;
+    return (
+      <Notification type="success">
+        {t('plugins.modal.successNotification')}{' '}
+        <a onClick={e => window.location.reload(true)}>
+          {t('plugins.modal.reload')}
+        </a>
+      </Notification>
+    );
+  }
+}
+
+export default translate('admin')(InstallSuccessNotification);

scm-ui/ui-webapp/src/admin/plugins/components/UpdateAllActionModal.tsx

@@ -1,18 +1,16 @@
-// @flow
-
-import React from "react";
-import PluginActionModal from "./PluginActionModal";
-import type { PluginCollection } from "@scm-manager/ui-types";
-import { apiClient } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
+import React from 'react';
+import PluginActionModal from './PluginActionModal';
+import { PluginCollection } from '@scm-manager/ui-types';
+import { apiClient } from '@scm-manager/ui-components';
+import { translate } from 'react-i18next';
 
 type Props = {
-  onClose: () => void,
-  refresh: () => void,
-  installedPlugins: PluginCollection,
+  onClose: () => void;
+  refresh: () => void;
+  installedPlugins: PluginCollection;
 
   // context props
-  t: string => string
+  t: (p: string) => string;
 };
 
 class UpdateAllActionModal extends React.Component<Props> {
@@ -21,8 +19,8 @@ class UpdateAllActionModal extends React.Component<Props> {
 
     return (
       <PluginActionModal
-        description={t("plugins.modal.updateAll")}
-        label={t("plugins.updateAll")}
+        description={t('plugins.modal.updateAll')}
+        label={t('plugins.updateAll')}
         onClose={onClose}
         installedPlugins={installedPlugins}
         execute={this.updateAll}
@@ -39,4 +37,4 @@ class UpdateAllActionModal extends React.Component<Props> {
   };
 }
 
-export default translate("admin")(UpdateAllActionModal);
+export default translate('admin')(UpdateAllActionModal);

scm-ui/ui-webapp/src/admin/plugins/components/groupByCategory.ts

@@ -1,9 +1,6 @@
-// @flow
-import type { Plugin, PluginGroup } from "@scm-manager/ui-types";
+import { Plugin, PluginGroup } from '@scm-manager/ui-types';
 
-export default function groupByCategory(
-  plugins: Plugin[]
-): PluginGroup[] {
+export default function groupByCategory(plugins: Plugin[]): PluginGroup[] {
   let groups = {};
   for (let plugin of plugins) {
     const groupName = plugin.category;
@@ -12,7 +9,7 @@ export default function groupByCategory(
     if (!group) {
       group = {
         name: groupName,
-        plugins: []
+        plugins: [],
       };
       groups[groupName] = group;
     }

scm-ui/ui-webapp/src/admin/plugins/components/waitForRestart.ts

@@ -1,5 +1,4 @@
-// @flow
-import { apiClient } from "@scm-manager/ui-components";
+import { apiClient } from '@scm-manager/ui-components';
 
 const waitForRestart = () => {
   const endTime = Number(new Date()) + 10000;
@@ -12,13 +11,13 @@ const waitForRestart = () => {
       setTimeout(executor, 1000, resolve, reject);
     } else {
       apiClient
-        .get("")
+        .get('')
         .then(resolve)
         .catch(() => {
           if (Number(new Date()) < endTime) {
             setTimeout(executor, 500, resolve, reject);
           } else {
-            reject(new Error("timeout reached"));
+            reject(new Error('timeout reached'));
           }
         });
     }

scm-ui/ui-webapp/src/admin/plugins/containers/PluginsOverview.tsx

@@ -1,9 +1,8 @@
-// @flow
-import * as React from "react";
-import { connect } from "react-redux";
-import { translate } from "react-i18next";
-import { compose } from "redux";
-import type { PendingPlugins, PluginCollection } from "@scm-manager/ui-types";
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { translate } from 'react-i18next';
+import { compose } from 'redux';
+import { PendingPlugins, PluginCollection } from '@scm-manager/ui-types';
 import {
   ButtonGroup,
   ErrorNotification,
@@ -11,60 +10,60 @@ import {
   Notification,
   Subtitle,
   Title,
-  Button
-} from "@scm-manager/ui-components";
+  Button,
+} from '@scm-manager/ui-components';
 import {
   fetchPendingPlugins,
   fetchPluginsByLink,
   getFetchPluginsFailure,
   getPendingPlugins,
   getPluginCollection,
-  isFetchPluginsPending
-} from "../modules/plugins";
-import PluginsList from "../components/PluginList";
+  isFetchPluginsPending,
+} from '../modules/plugins';
+import PluginsList from '../components/PluginList';
 import {
   getAvailablePluginsLink,
   getInstalledPluginsLink,
-  getPendingPluginsLink
-} from "../../../modules/indexResource";
-import PluginTopActions from "../components/PluginTopActions";
-import PluginBottomActions from "../components/PluginBottomActions";
-import ExecutePendingActionModal from "../components/ExecutePendingActionModal";
-import CancelPendingActionModal from "../components/CancelPendingActionModal";
-import UpdateAllActionModal from "../components/UpdateAllActionModal";
+  getPendingPluginsLink,
+} from '../../../modules/indexResource';
+import PluginTopActions from '../components/PluginTopActions';
+import PluginBottomActions from '../components/PluginBottomActions';
+import ExecutePendingActionModal from '../components/ExecutePendingActionModal';
+import CancelPendingActionModal from '../components/CancelPendingActionModal';
+import UpdateAllActionModal from '../components/UpdateAllActionModal';
 
 type Props = {
-  loading: boolean,
-  error: Error,
-  collection: PluginCollection,
-  baseUrl: string,
-  installed: boolean,
-  availablePluginsLink: string,
-  installedPluginsLink: string,
-  pendingPluginsLink: string,
-  pendingPlugins: PendingPlugins,
+  loading: boolean;
+  error: Error;
+  collection: PluginCollection;
+  baseUrl: string;
+  installed: boolean;
+  availablePluginsLink: string;
+  installedPluginsLink: string;
+  pendingPluginsLink: string;
+  pendingPlugins: PendingPlugins;
 
   // context objects
-  t: (key: string, params?: Object) => string,
+  t: (key: string, params?: object) => string;
 
   // dispatched functions
-  fetchPluginsByLink: (link: string) => void,
-  fetchPendingPlugins: (link: string) => void
+  fetchPluginsByLink: (link: string) => void;
+  fetchPendingPlugins: (link: string) => void;
 };
 
 type State = {
-  showPendingModal: boolean,
-  showUpdateAllModal: boolean,
-  showCancelModal: boolean
+  showPendingModal: boolean;
+  showUpdateAllModal: boolean;
+  showCancelModal: boolean;
 };
 
 class PluginsOverview extends React.Component<Props, State> {
-  constructor(props: Props, context: *) {
-    super(props, context);
+  constructor(props: Props) {
+    super(props);
     this.state = {
       showPendingModal: false,
       showUpdateAllModal: false,
-      showCancelModal: false
+      showCancelModal: false,
     };
   }
 
@@ -86,7 +85,7 @@ class PluginsOverview extends React.Component<Props, State> {
       availablePluginsLink,
       installedPluginsLink,
       pendingPluginsLink,
-      fetchPendingPlugins
+      fetchPendingPlugins,
     } = this.props;
     fetchPluginsByLink(installed ? installedPluginsLink : availablePluginsLink);
     if (pendingPluginsLink) {
@@ -99,12 +98,12 @@ class PluginsOverview extends React.Component<Props, State> {
     return (
       <div className="columns">
         <div className="column">
-          <Title title={t("plugins.title")} />
+          <Title title={t('plugins.title')} />
           <Subtitle
             subtitle={
               installed
-                ? t("plugins.installedSubtitle")
-                : t("plugins.availableSubtitle")
+                ? t('plugins.installedSubtitle')
+                : t('plugins.availableSubtitle')
             }
           />
         </div>
@@ -133,11 +132,15 @@ class PluginsOverview extends React.Component<Props, State> {
         <Button
           color="primary"
           reducedMobile={true}
-          key={"executePending"}
-          icon={"arrow-circle-right"}
-          label={t("plugins.executePending")}
-          action={() => this.setState({ showPendingModal: true })}
-        />
+          key={'executePending'}
+          icon={'arrow-circle-right'}
+          label={t('plugins.executePending')}
+          action={() =>
+            this.setState({
+              showPendingModal: true,
+            })
+          }
+        />,
       );
     }
 
@@ -150,11 +153,15 @@ class PluginsOverview extends React.Component<Props, State> {
         <Button
           color="primary"
           reducedMobile={true}
-          key={"cancelPending"}
-          icon={"times"}
-          label={t("plugins.cancelPending")}
-          action={() => this.setState({ showCancelModal: true })}
-        />
+          key={'cancelPending'}
+          icon={'times'}
+          label={t('plugins.cancelPending')}
+          action={() =>
+            this.setState({
+              showCancelModal: true,
+            })
+          }
+        />,
       );
     }
 
@@ -163,11 +170,15 @@ class PluginsOverview extends React.Component<Props, State> {
         <Button
           color="primary"
           reducedMobile={true}
-          key={"updateAll"}
-          icon={"sync-alt"}
+          key={'updateAll'}
+          icon={'sync-alt'}
           label={this.computeUpdateAllSize()}
-          action={() => this.setState({ showUpdateAllModal: true })}
-        />
+          action={() =>
+            this.setState({
+              showUpdateAllModal: true,
+            })
+          }
+        />,
       );
     }
 
@@ -180,10 +191,10 @@ class PluginsOverview extends React.Component<Props, State> {
   computeUpdateAllSize = () => {
     const { collection, t } = this.props;
     const outdatedPlugins = collection._embedded.plugins.filter(
-      p => p._links.update
+      p => p._links.update,
     ).length;
-    return t("plugins.outdatedPlugins", {
-      count: outdatedPlugins
+    return t('plugins.outdatedPlugins', {
+      count: outdatedPlugins,
     });
   };
 
@@ -215,13 +226,17 @@ class PluginsOverview extends React.Component<Props, State> {
     const {
       showPendingModal,
       showCancelModal,
-      showUpdateAllModal
+      showUpdateAllModal,
     } = this.state;
 
     if (showPendingModal) {
       return (
         <ExecutePendingActionModal
-          onClose={() => this.setState({ showPendingModal: false })}
+          onClose={() =>
+            this.setState({
+              showPendingModal: false,
+            })
+          }
           pendingPlugins={pendingPlugins}
         />
       );
@@ -229,7 +244,11 @@ class PluginsOverview extends React.Component<Props, State> {
     if (showCancelModal) {
       return (
         <CancelPendingActionModal
-          onClose={() => this.setState({ showCancelModal: false })}
+          onClose={() =>
+            this.setState({
+              showCancelModal: false,
+            })
+          }
           refresh={this.fetchPlugins}
           pendingPlugins={pendingPlugins}
         />
@@ -238,7 +257,11 @@ class PluginsOverview extends React.Component<Props, State> {
     if (showUpdateAllModal) {
       return (
         <UpdateAllActionModal
-          onClose={() => this.setState({ showUpdateAllModal: false })}
+          onClose={() =>
+            this.setState({
+              showUpdateAllModal: false,
+            })
+          }
           refresh={this.fetchPlugins}
           installedPlugins={collection}
         />
@@ -257,7 +280,7 @@ class PluginsOverview extends React.Component<Props, State> {
         />
       );
     }
-    return <Notification type="info">{t("plugins.noPlugins")}</Notification>;
+    return <Notification type="info">{t('plugins.noPlugins')}</Notification>;
   }
 }
 
@@ -277,7 +300,7 @@ const mapStateToProps = state => {
     availablePluginsLink,
     installedPluginsLink,
     pendingPluginsLink,
-    pendingPlugins
+    pendingPlugins,
   };
 };
 
@@ -288,14 +311,14 @@ const mapDispatchToProps = dispatch => {
     },
     fetchPendingPlugins: (link: string) => {
       dispatch(fetchPendingPlugins(link));
-    }
+    },
   };
 };
 
 export default compose(
-  translate("admin"),
+  translate('admin'),
   connect(
     mapStateToProps,
-    mapDispatchToProps
-  )
+    mapDispatchToProps,
+  ),
 )(PluginsOverview);

scm-ui/ui-webapp/src/admin/plugins/modules/plugins.test.js

@@ -1,353 +0,0 @@
-// @flow
-import configureMockStore from "redux-mock-store";
-import thunk from "redux-thunk";
-import fetchMock from "fetch-mock";
-import reducer, {
-  FETCH_PLUGINS,
-  FETCH_PLUGINS_PENDING,
-  FETCH_PLUGINS_SUCCESS,
-  FETCH_PLUGINS_FAILURE,
-  FETCH_PLUGIN,
-  FETCH_PLUGIN_PENDING,
-  FETCH_PLUGIN_SUCCESS,
-  FETCH_PLUGIN_FAILURE,
-  fetchPluginsByLink,
-  fetchPluginsSuccess,
-  getPluginCollection,
-  isFetchPluginsPending,
-  getFetchPluginsFailure,
-  fetchPluginByLink,
-  fetchPluginByName,
-  fetchPluginSuccess,
-  getPlugin,
-  isFetchPluginPending,
-  getFetchPluginFailure
-} from "./plugins";
-import type { Plugin, PluginCollection } from "@scm-manager/ui-types";
-
-const groupManagerPlugin: Plugin = {
-  name: "scm-groupmanager-plugin",
-  bundles: ["/scm/groupmanager-plugin.bundle.js"],
-  type: "Administration",
-  version: "2.0.0-SNAPSHOT",
-  author: "Sebastian Sdorra",
-  description: "Notify a remote webserver whenever a plugin is pushed to.",
-  _links: {
-    self: {
-      href: "http://localhost:8081/api/v2/ui/plugins/scm-groupmanager-plugin"
-    }
-  }
-};
-
-const scriptPlugin: Plugin = {
-  name: "scm-script-plugin",
-  bundles: ["/scm/script-plugin.bundle.js"],
-  type: "Miscellaneous",
-  version: "2.0.0-SNAPSHOT",
-  author: "Sebastian Sdorra",
-  description: "Script support for scm-manager.",
-  _links: {
-    self: {
-      href: "http://localhost:8081/api/v2/ui/plugins/scm-script-plugin"
-    }
-  }
-};
-
-const branchwpPlugin: Plugin = {
-  name: "scm-branchwp-plugin",
-  bundles: ["/scm/branchwp-plugin.bundle.js"],
-  type: "Miscellaneous",
-  version: "2.0.0-SNAPSHOT",
-  author: "Sebastian Sdorra",
-  description: "This plugin adds branch write protection for plugins.",
-  _links: {
-    self: {
-      href: "http://localhost:8081/api/v2/ui/plugins/scm-branchwp-plugin"
-    }
-  }
-};
-
-const pluginCollectionWithNames: PluginCollection = {
-  _links: {
-    self: {
-      href: "http://localhost:8081/api/v2/ui/plugins"
-    }
-  },
-  _embedded: {
-    plugins: [groupManagerPlugin.name, scriptPlugin.name, branchwpPlugin.name]
-  }
-};
-
-const pluginCollection: PluginCollection = {
-  _links: {
-    self: {
-      href: "http://localhost:8081/api/v2/ui/plugins"
-    }
-  },
-  _embedded: {
-    plugins: [groupManagerPlugin, scriptPlugin, branchwpPlugin]
-  }
-};
-
-describe("plugins fetch", () => {
-  const URL = "ui/plugins";
-  const PLUGINS_URL = "/api/v2/ui/plugins";
-  const mockStore = configureMockStore([thunk]);
-
-  afterEach(() => {
-    fetchMock.reset();
-    fetchMock.restore();
-  });
-
-  it("should successfully fetch plugins from link", () => {
-    fetchMock.getOnce(PLUGINS_URL, pluginCollection);
-
-    const expectedActions = [
-      { type: FETCH_PLUGINS_PENDING },
-      {
-        type: FETCH_PLUGINS_SUCCESS,
-        payload: pluginCollection
-      }
-    ];
-
-    const store = mockStore({});
-    return store.dispatch(fetchPluginsByLink(URL)).then(() => {
-      expect(store.getActions()).toEqual(expectedActions);
-    });
-  });
-
-  it("should dispatch FETCH_PLUGINS_FAILURE if request fails", () => {
-    fetchMock.getOnce(PLUGINS_URL, {
-      status: 500
-    });
-
-    const store = mockStore({});
-    return store.dispatch(fetchPluginsByLink(URL)).then(() => {
-      const actions = store.getActions();
-      expect(actions[0].type).toEqual(FETCH_PLUGINS_PENDING);
-      expect(actions[1].type).toEqual(FETCH_PLUGINS_FAILURE);
-      expect(actions[1].payload).toBeDefined();
-    });
-  });
-
-  it("should successfully fetch scm-groupmanager-plugin by name", () => {
-    fetchMock.getOnce(
-      PLUGINS_URL + "/scm-groupmanager-plugin",
-      groupManagerPlugin
-    );
-
-    const expectedActions = [
-      {
-        type: FETCH_PLUGIN_PENDING,
-        payload: {
-          name: "scm-groupmanager-plugin"
-        },
-        itemId: "scm-groupmanager-plugin"
-      },
-      {
-        type: FETCH_PLUGIN_SUCCESS,
-        payload: groupManagerPlugin,
-        itemId: "scm-groupmanager-plugin"
-      }
-    ];
-
-    const store = mockStore({});
-    return store
-      .dispatch(fetchPluginByName(URL, "scm-groupmanager-plugin"))
-      .then(() => {
-        expect(store.getActions()).toEqual(expectedActions);
-      });
-  });
-
-  it("should dispatch FETCH_PLUGIN_FAILURE, if the request for scm-groupmanager-plugin by name fails", () => {
-    fetchMock.getOnce(PLUGINS_URL + "/scm-groupmanager-plugin", {
-      status: 500
-    });
-
-    const store = mockStore({});
-    return store
-      .dispatch(fetchPluginByName(URL, "scm-groupmanager-plugin"))
-      .then(() => {
-        const actions = store.getActions();
-        expect(actions[0].type).toEqual(FETCH_PLUGIN_PENDING);
-        expect(actions[1].type).toEqual(FETCH_PLUGIN_FAILURE);
-        expect(actions[1].payload.name).toBe("scm-groupmanager-plugin");
-        expect(actions[1].payload.error).toBeDefined();
-        expect(actions[1].itemId).toBe("scm-groupmanager-plugin");
-      });
-  });
-
-  it("should successfully fetch scm-groupmanager-plugin", () => {
-    fetchMock.getOnce(
-      "http://localhost:8081/api/v2/ui/plugins/scm-groupmanager-plugin",
-      groupManagerPlugin
-    );
-
-    const expectedActions = [
-      {
-        type: FETCH_PLUGIN_PENDING,
-        payload: {
-          name: "scm-groupmanager-plugin"
-        },
-        itemId: "scm-groupmanager-plugin"
-      },
-      {
-        type: FETCH_PLUGIN_SUCCESS,
-        payload: groupManagerPlugin,
-        itemId: "scm-groupmanager-plugin"
-      }
-    ];
-
-    const store = mockStore({});
-    return store.dispatch(fetchPluginByLink(groupManagerPlugin)).then(() => {
-      expect(store.getActions()).toEqual(expectedActions);
-    });
-  });
-
-  it("should dispatch FETCH_PLUGIN_FAILURE, it the request for scm-groupmanager-plugin fails", () => {
-    fetchMock.getOnce(
-      "http://localhost:8081/api/v2/ui/plugins/scm-groupmanager-plugin",
-      {
-        status: 500
-      }
-    );
-
-    const store = mockStore({});
-    return store.dispatch(fetchPluginByLink(groupManagerPlugin)).then(() => {
-      const actions = store.getActions();
-      expect(actions[0].type).toEqual(FETCH_PLUGIN_PENDING);
-      expect(actions[1].type).toEqual(FETCH_PLUGIN_FAILURE);
-      expect(actions[1].payload.name).toBe("scm-groupmanager-plugin");
-      expect(actions[1].payload.error).toBeDefined();
-      expect(actions[1].itemId).toBe("scm-groupmanager-plugin");
-    });
-  });
-});
-
-describe("plugins reducer", () => {
-  it("should return empty object, if state and action is undefined", () => {
-    expect(reducer()).toEqual({});
-  });
-
-  it("should return the same state, if the action is undefined", () => {
-    const state = { x: true };
-    expect(reducer(state)).toBe(state);
-  });
-
-  it("should return the same state, if the action is unknown to the reducer", () => {
-    const state = { x: true };
-    expect(reducer(state, { type: "EL_SPECIALE" })).toBe(state);
-  });
-
-  it("should store the plugins by it's type and name on FETCH_PLUGINS_SUCCESS", () => {
-    const newState = reducer({}, fetchPluginsSuccess(pluginCollection));
-    expect(newState.list._embedded.plugins).toEqual([
-      "scm-groupmanager-plugin",
-      "scm-script-plugin",
-      "scm-branchwp-plugin"
-    ]);
-    expect(newState.byNames["scm-groupmanager-plugin"]).toBe(
-      groupManagerPlugin
-    );
-    expect(newState.byNames["scm-script-plugin"]).toBe(scriptPlugin);
-    expect(newState.byNames["scm-branchwp-plugin"]).toBe(branchwpPlugin);
-  });
-
-  it("should store the plugin at byNames", () => {
-    const newState = reducer({}, fetchPluginSuccess(groupManagerPlugin));
-    expect(newState.byNames["scm-groupmanager-plugin"]).toBe(
-      groupManagerPlugin
-    );
-  });
-});
-
-describe("plugins selectors", () => {
-  const error = new Error("something went wrong");
-
-  it("should return the plugins collection", () => {
-    const state = {
-      plugins: {
-        list: pluginCollectionWithNames,
-        byNames: {
-          "scm-groupmanager-plugin": groupManagerPlugin,
-          "scm-script-plugin": scriptPlugin,
-          "scm-branchwp-plugin": branchwpPlugin
-        }
-      }
-    };
-
-    const collection = getPluginCollection(state);
-    expect(collection).toEqual(pluginCollection);
-  });
-
-  it("should return true, when fetch plugins is pending", () => {
-    const state = {
-      pending: {
-        [FETCH_PLUGINS]: true
-      }
-    };
-    expect(isFetchPluginsPending(state)).toEqual(true);
-  });
-
-  it("should return false, when fetch plugins is not pending", () => {
-    expect(isFetchPluginsPending({})).toEqual(false);
-  });
-
-  it("should return error when fetch plugins did fail", () => {
-    const state = {
-      failure: {
-        [FETCH_PLUGINS]: error
-      }
-    };
-    expect(getFetchPluginsFailure(state)).toEqual(error);
-  });
-
-  it("should return undefined when fetch plugins did not fail", () => {
-    expect(getFetchPluginsFailure({})).toBe(undefined);
-  });
-
-  it("should return the plugin collection", () => {
-    const state = {
-      plugins: {
-        byNames: {
-          "scm-groupmanager-plugin": groupManagerPlugin
-        }
-      }
-    };
-
-    const plugin = getPlugin(state, "scm-groupmanager-plugin");
-    expect(plugin).toEqual(groupManagerPlugin);
-  });
-
-  it("should return true, when fetch plugin is pending", () => {
-    const state = {
-      pending: {
-        [FETCH_PLUGIN + "/scm-groupmanager-plugin"]: true
-      }
-    };
-    expect(isFetchPluginPending(state, "scm-groupmanager-plugin")).toEqual(
-      true
-    );
-  });
-
-  it("should return false, when fetch plugin is not pending", () => {
-    expect(isFetchPluginPending({}, "scm-groupmanager-plugin")).toEqual(false);
-  });
-
-  it("should return error when fetch plugin did fail", () => {
-    const state = {
-      failure: {
-        [FETCH_PLUGIN + "/scm-groupmanager-plugin"]: error
-      }
-    };
-    expect(getFetchPluginFailure(state, "scm-groupmanager-plugin")).toEqual(
-      error
-    );
-  });
-
-  it("should return undefined when fetch plugin did not fail", () => {
-    expect(getFetchPluginFailure({}, "scm-groupmanager-plugin")).toBe(
-      undefined
-    );
-  });
-});

scm-ui/ui-webapp/src/admin/plugins/modules/plugins.test.ts

@@ -0,0 +1,362 @@
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import fetchMock from 'fetch-mock';
+import reducer, {
+  FETCH_PLUGINS,
+  FETCH_PLUGINS_PENDING,
+  FETCH_PLUGINS_SUCCESS,
+  FETCH_PLUGINS_FAILURE,
+  FETCH_PLUGIN,
+  FETCH_PLUGIN_PENDING,
+  FETCH_PLUGIN_SUCCESS,
+  FETCH_PLUGIN_FAILURE,
+  fetchPluginsByLink,
+  fetchPluginsSuccess,
+  getPluginCollection,
+  isFetchPluginsPending,
+  getFetchPluginsFailure,
+  fetchPluginByLink,
+  fetchPluginByName,
+  fetchPluginSuccess,
+  getPlugin,
+  isFetchPluginPending,
+  getFetchPluginFailure,
+} from './plugins';
+import { Plugin, PluginCollection } from '@scm-manager/ui-types';
+
+const groupManagerPlugin: Plugin = {
+  name: 'scm-groupmanager-plugin',
+  bundles: ['/scm/groupmanager-plugin.bundle.js'],
+  type: 'Administration',
+  version: '2.0.0-SNAPSHOT',
+  author: 'Sebastian Sdorra',
+  description: 'Notify a remote webserver whenever a plugin is pushed to.',
+  _links: {
+    self: {
+      href: 'http://localhost:8081/api/v2/ui/plugins/scm-groupmanager-plugin',
+    },
+  },
+};
+
+const scriptPlugin: Plugin = {
+  name: 'scm-script-plugin',
+  bundles: ['/scm/script-plugin.bundle.js'],
+  type: 'Miscellaneous',
+  version: '2.0.0-SNAPSHOT',
+  author: 'Sebastian Sdorra',
+  description: 'Script support for scm-manager.',
+  _links: {
+    self: {
+      href: 'http://localhost:8081/api/v2/ui/plugins/scm-script-plugin',
+    },
+  },
+};
+
+const branchwpPlugin: Plugin = {
+  name: 'scm-branchwp-plugin',
+  bundles: ['/scm/branchwp-plugin.bundle.js'],
+  type: 'Miscellaneous',
+  version: '2.0.0-SNAPSHOT',
+  author: 'Sebastian Sdorra',
+  description: 'This plugin adds branch write protection for plugins.',
+  _links: {
+    self: {
+      href: 'http://localhost:8081/api/v2/ui/plugins/scm-branchwp-plugin',
+    },
+  },
+};
+
+const pluginCollectionWithNames: PluginCollection = {
+  _links: {
+    self: {
+      href: 'http://localhost:8081/api/v2/ui/plugins',
+    },
+  },
+  _embedded: {
+    plugins: [groupManagerPlugin.name, scriptPlugin.name, branchwpPlugin.name],
+  },
+};
+
+const pluginCollection: PluginCollection = {
+  _links: {
+    self: {
+      href: 'http://localhost:8081/api/v2/ui/plugins',
+    },
+  },
+  _embedded: {
+    plugins: [groupManagerPlugin, scriptPlugin, branchwpPlugin],
+  },
+};
+
+describe('plugins fetch', () => {
+  const URL = 'ui/plugins';
+  const PLUGINS_URL = '/api/v2/ui/plugins';
+  const mockStore = configureMockStore([thunk]);
+
+  afterEach(() => {
+    fetchMock.reset();
+    fetchMock.restore();
+  });
+
+  it('should successfully fetch plugins from link', () => {
+    fetchMock.getOnce(PLUGINS_URL, pluginCollection);
+
+    const expectedActions = [
+      {
+        type: FETCH_PLUGINS_PENDING,
+      },
+      {
+        type: FETCH_PLUGINS_SUCCESS,
+        payload: pluginCollection,
+      },
+    ];
+
+    const store = mockStore({});
+    return store.dispatch(fetchPluginsByLink(URL)).then(() => {
+      expect(store.getActions()).toEqual(expectedActions);
+    });
+  });
+
+  it('should dispatch FETCH_PLUGINS_FAILURE if request fails', () => {
+    fetchMock.getOnce(PLUGINS_URL, {
+      status: 500,
+    });
+
+    const store = mockStore({});
+    return store.dispatch(fetchPluginsByLink(URL)).then(() => {
+      const actions = store.getActions();
+      expect(actions[0].type).toEqual(FETCH_PLUGINS_PENDING);
+      expect(actions[1].type).toEqual(FETCH_PLUGINS_FAILURE);
+      expect(actions[1].payload).toBeDefined();
+    });
+  });
+
+  it('should successfully fetch scm-groupmanager-plugin by name', () => {
+    fetchMock.getOnce(
+      PLUGINS_URL + '/scm-groupmanager-plugin',
+      groupManagerPlugin,
+    );
+
+    const expectedActions = [
+      {
+        type: FETCH_PLUGIN_PENDING,
+        payload: {
+          name: 'scm-groupmanager-plugin',
+        },
+        itemId: 'scm-groupmanager-plugin',
+      },
+      {
+        type: FETCH_PLUGIN_SUCCESS,
+        payload: groupManagerPlugin,
+        itemId: 'scm-groupmanager-plugin',
+      },
+    ];
+
+    const store = mockStore({});
+    return store
+      .dispatch(fetchPluginByName(URL, 'scm-groupmanager-plugin'))
+      .then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+  });
+
+  it('should dispatch FETCH_PLUGIN_FAILURE, if the request for scm-groupmanager-plugin by name fails', () => {
+    fetchMock.getOnce(PLUGINS_URL + '/scm-groupmanager-plugin', {
+      status: 500,
+    });
+
+    const store = mockStore({});
+    return store
+      .dispatch(fetchPluginByName(URL, 'scm-groupmanager-plugin'))
+      .then(() => {
+        const actions = store.getActions();
+        expect(actions[0].type).toEqual(FETCH_PLUGIN_PENDING);
+        expect(actions[1].type).toEqual(FETCH_PLUGIN_FAILURE);
+        expect(actions[1].payload.name).toBe('scm-groupmanager-plugin');
+        expect(actions[1].payload.error).toBeDefined();
+        expect(actions[1].itemId).toBe('scm-groupmanager-plugin');
+      });
+  });
+
+  it('should successfully fetch scm-groupmanager-plugin', () => {
+    fetchMock.getOnce(
+      'http://localhost:8081/api/v2/ui/plugins/scm-groupmanager-plugin',
+      groupManagerPlugin,
+    );
+
+    const expectedActions = [
+      {
+        type: FETCH_PLUGIN_PENDING,
+        payload: {
+          name: 'scm-groupmanager-plugin',
+        },
+        itemId: 'scm-groupmanager-plugin',
+      },
+      {
+        type: FETCH_PLUGIN_SUCCESS,
+        payload: groupManagerPlugin,
+        itemId: 'scm-groupmanager-plugin',
+      },
+    ];
+
+    const store = mockStore({});
+    return store.dispatch(fetchPluginByLink(groupManagerPlugin)).then(() => {
+      expect(store.getActions()).toEqual(expectedActions);
+    });
+  });
+
+  it('should dispatch FETCH_PLUGIN_FAILURE, it the request for scm-groupmanager-plugin fails', () => {
+    fetchMock.getOnce(
+      'http://localhost:8081/api/v2/ui/plugins/scm-groupmanager-plugin',
+      {
+        status: 500,
+      },
+    );
+
+    const store = mockStore({});
+    return store.dispatch(fetchPluginByLink(groupManagerPlugin)).then(() => {
+      const actions = store.getActions();
+      expect(actions[0].type).toEqual(FETCH_PLUGIN_PENDING);
+      expect(actions[1].type).toEqual(FETCH_PLUGIN_FAILURE);
+      expect(actions[1].payload.name).toBe('scm-groupmanager-plugin');
+      expect(actions[1].payload.error).toBeDefined();
+      expect(actions[1].itemId).toBe('scm-groupmanager-plugin');
+    });
+  });
+});
+
+describe('plugins reducer', () => {
+  it('should return empty object, if state and action is undefined', () => {
+    expect(reducer()).toEqual({});
+  });
+
+  it('should return the same state, if the action is undefined', () => {
+    const state = {
+      x: true,
+    };
+    expect(reducer(state)).toBe(state);
+  });
+
+  it('should return the same state, if the action is unknown to the reducer', () => {
+    const state = {
+      x: true,
+    };
+    expect(
+      reducer(state, {
+        type: 'EL_SPECIALE',
+      }),
+    ).toBe(state);
+  });
+
+  it("should store the plugins by it's type and name on FETCH_PLUGINS_SUCCESS", () => {
+    const newState = reducer({}, fetchPluginsSuccess(pluginCollection));
+    expect(newState.list._embedded.plugins).toEqual([
+      'scm-groupmanager-plugin',
+      'scm-script-plugin',
+      'scm-branchwp-plugin',
+    ]);
+    expect(newState.byNames['scm-groupmanager-plugin']).toBe(
+      groupManagerPlugin,
+    );
+    expect(newState.byNames['scm-script-plugin']).toBe(scriptPlugin);
+    expect(newState.byNames['scm-branchwp-plugin']).toBe(branchwpPlugin);
+  });
+
+  it('should store the plugin at byNames', () => {
+    const newState = reducer({}, fetchPluginSuccess(groupManagerPlugin));
+    expect(newState.byNames['scm-groupmanager-plugin']).toBe(
+      groupManagerPlugin,
+    );
+  });
+});
+
+describe('plugins selectors', () => {
+  const error = new Error('something went wrong');
+
+  it('should return the plugins collection', () => {
+    const state = {
+      plugins: {
+        list: pluginCollectionWithNames,
+        byNames: {
+          'scm-groupmanager-plugin': groupManagerPlugin,
+          'scm-script-plugin': scriptPlugin,
+          'scm-branchwp-plugin': branchwpPlugin,
+        },
+      },
+    };
+
+    const collection = getPluginCollection(state);
+    expect(collection).toEqual(pluginCollection);
+  });
+
+  it('should return true, when fetch plugins is pending', () => {
+    const state = {
+      pending: {
+        [FETCH_PLUGINS]: true,
+      },
+    };
+    expect(isFetchPluginsPending(state)).toEqual(true);
+  });
+
+  it('should return false, when fetch plugins is not pending', () => {
+    expect(isFetchPluginsPending({})).toEqual(false);
+  });
+
+  it('should return error when fetch plugins did fail', () => {
+    const state = {
+      failure: {
+        [FETCH_PLUGINS]: error,
+      },
+    };
+    expect(getFetchPluginsFailure(state)).toEqual(error);
+  });
+
+  it('should return undefined when fetch plugins did not fail', () => {
+    expect(getFetchPluginsFailure({})).toBe(undefined);
+  });
+
+  it('should return the plugin collection', () => {
+    const state = {
+      plugins: {
+        byNames: {
+          'scm-groupmanager-plugin': groupManagerPlugin,
+        },
+      },
+    };
+
+    const plugin = getPlugin(state, 'scm-groupmanager-plugin');
+    expect(plugin).toEqual(groupManagerPlugin);
+  });
+
+  it('should return true, when fetch plugin is pending', () => {
+    const state = {
+      pending: {
+        [FETCH_PLUGIN + '/scm-groupmanager-plugin']: true,
+      },
+    };
+    expect(isFetchPluginPending(state, 'scm-groupmanager-plugin')).toEqual(
+      true,
+    );
+  });
+
+  it('should return false, when fetch plugin is not pending', () => {
+    expect(isFetchPluginPending({}, 'scm-groupmanager-plugin')).toEqual(false);
+  });
+
+  it('should return error when fetch plugin did fail', () => {
+    const state = {
+      failure: {
+        [FETCH_PLUGIN + '/scm-groupmanager-plugin']: error,
+      },
+    };
+    expect(getFetchPluginFailure(state, 'scm-groupmanager-plugin')).toEqual(
+      error,
+    );
+  });
+
+  it('should return undefined when fetch plugin did not fail', () => {
+    expect(getFetchPluginFailure({}, 'scm-groupmanager-plugin')).toBe(
+      undefined,
+    );
+  });
+});

scm-ui/ui-webapp/src/admin/plugins/modules/plugins.ts

@@ -1,30 +1,23 @@
-// @flow
-import * as types from "../../../modules/types";
-import { isPending } from "../../../modules/pending";
-import { getFailure } from "../../../modules/failure";
-import type { Action, Plugin, PluginCollection } from "@scm-manager/ui-types";
-import { apiClient } from "@scm-manager/ui-components";
+import * as types from '../../../modules/types';
+import { isPending } from '../../../modules/pending';
+import { getFailure } from '../../../modules/failure';
+import { Action, Plugin, PluginCollection } from '@scm-manager/ui-types';
+import { apiClient } from '@scm-manager/ui-components';
 
-export const FETCH_PLUGINS = "scm/plugins/FETCH_PLUGINS";
+export const FETCH_PLUGINS = 'scm/plugins/FETCH_PLUGINS';
 export const FETCH_PLUGINS_PENDING = `${FETCH_PLUGINS}_${types.PENDING_SUFFIX}`;
 export const FETCH_PLUGINS_SUCCESS = `${FETCH_PLUGINS}_${types.SUCCESS_SUFFIX}`;
 export const FETCH_PLUGINS_FAILURE = `${FETCH_PLUGINS}_${types.FAILURE_SUFFIX}`;
 
-export const FETCH_PLUGIN = "scm/plugins/FETCH_PLUGIN";
+export const FETCH_PLUGIN = 'scm/plugins/FETCH_PLUGIN';
 export const FETCH_PLUGIN_PENDING = `${FETCH_PLUGIN}_${types.PENDING_SUFFIX}`;
 export const FETCH_PLUGIN_SUCCESS = `${FETCH_PLUGIN}_${types.SUCCESS_SUFFIX}`;
 export const FETCH_PLUGIN_FAILURE = `${FETCH_PLUGIN}_${types.FAILURE_SUFFIX}`;
 
-export const FETCH_PENDING_PLUGINS = "scm/plugins/FETCH_PENDING_PLUGINS";
-export const FETCH_PENDING_PLUGINS_PENDING = `${FETCH_PENDING_PLUGINS}_${
-  types.PENDING_SUFFIX
-}`;
-export const FETCH_PENDING_PLUGINS_SUCCESS = `${FETCH_PENDING_PLUGINS}_${
-  types.SUCCESS_SUFFIX
-}`;
-export const FETCH_PENDING_PLUGINS_FAILURE = `${FETCH_PENDING_PLUGINS}_${
-  types.FAILURE_SUFFIX
-}`;
+export const FETCH_PENDING_PLUGINS = 'scm/plugins/FETCH_PENDING_PLUGINS';
+export const FETCH_PENDING_PLUGINS_PENDING = `${FETCH_PENDING_PLUGINS}_${types.PENDING_SUFFIX}`;
+export const FETCH_PENDING_PLUGINS_SUCCESS = `${FETCH_PENDING_PLUGINS}_${types.SUCCESS_SUFFIX}`;
+export const FETCH_PENDING_PLUGINS_FAILURE = `${FETCH_PENDING_PLUGINS}_${types.FAILURE_SUFFIX}`;
 
 // fetch plugins
 export function fetchPluginsByLink(link: string) {
@@ -44,21 +37,21 @@ export function fetchPluginsByLink(link: string) {
 
 export function fetchPluginsPending(): Action {
   return {
-    type: FETCH_PLUGINS_PENDING
+    type: FETCH_PLUGINS_PENDING,
   };
 }
 
 export function fetchPluginsSuccess(plugins: PluginCollection): Action {
   return {
     type: FETCH_PLUGINS_SUCCESS,
-    payload: plugins
+    payload: plugins,
   };
 }
 
 export function fetchPluginsFailure(err: Error): Action {
   return {
     type: FETCH_PLUGINS_FAILURE,
-    payload: err
+    payload: err,
   };
 }
 
@@ -68,7 +61,7 @@ export function fetchPluginByLink(plugin: Plugin) {
 }
 
 export function fetchPluginByName(link: string, name: string) {
-  const pluginUrl = link.endsWith("/") ? link : link + "/";
+  const pluginUrl = link.endsWith('/') ? link : link + '/';
   return fetchPlugin(pluginUrl + name, name);
 }
 
@@ -91,9 +84,9 @@ export function fetchPluginPending(name: string): Action {
   return {
     type: FETCH_PLUGIN_PENDING,
     payload: {
-      name
+      name,
     },
-    itemId: name
+    itemId: name,
   };
 }
 
@@ -101,7 +94,7 @@ export function fetchPluginSuccess(plugin: Plugin): Action {
   return {
     type: FETCH_PLUGIN_SUCCESS,
     payload: plugin,
-    itemId: plugin.name
+    itemId: plugin.name,
   };
 }
 
@@ -110,9 +103,9 @@ export function fetchPluginFailure(name: string, error: Error): Action {
     type: FETCH_PLUGIN_FAILURE,
     payload: {
       name,
-      error
+      error,
     },
-    itemId: name
+    itemId: name,
   };
 }
 
@@ -134,26 +127,26 @@ export function fetchPendingPlugins(link: string) {
 
 export function fetchPendingPluginsPending(): Action {
   return {
-    type: FETCH_PENDING_PLUGINS_PENDING
+    type: FETCH_PENDING_PLUGINS_PENDING,
   };
 }
 
 export function fetchPendingPluginsSuccess(PendingPlugins: {}): Action {
   return {
     type: FETCH_PENDING_PLUGINS_SUCCESS,
-    payload: PendingPlugins
+    payload: PendingPlugins,
   };
 }
 
 export function fetchPendingPluginsFailure(err: Error): Action {
   return {
     type: FETCH_PENDING_PLUGINS_FAILURE,
-    payload: err
+    payload: err,
   };
 }
 
 // reducer
-function normalizeByName(state: Object, pluginCollection: PluginCollection) {
+function normalizeByName(state: object, pluginCollection: PluginCollection) {
   const names = [];
   const byNames = {};
   for (const plugin of pluginCollection._embedded.plugins) {
@@ -165,27 +158,29 @@ function normalizeByName(state: Object, pluginCollection: PluginCollection) {
     list: {
       ...pluginCollection,
       _embedded: {
-        plugins: names
-      }
+        plugins: names,
+      },
     },
-    byNames: byNames
+    byNames: byNames,
   };
 }
 
-const reducerByNames = (state: Object, plugin: Plugin) => {
+const reducerByNames = (state: object, plugin: Plugin) => {
   return {
     ...state,
     byNames: {
       ...state.byNames,
-      [plugin.name]: plugin
-    }
+      [plugin.name]: plugin,
+    },
   };
 };
 
 export default function reducer(
-  state: Object = {},
-  action: Action = { type: "UNKNOWN" }
-): Object {
+  state: object = {},
+  action: Action = {
+    type: 'UNKNOWN',
+  },
+): object {
   if (!action.payload) {
     return state;
   }
@@ -196,14 +191,17 @@ export default function reducer(
     case FETCH_PLUGIN_SUCCESS:
       return reducerByNames(state, action.payload);
     case FETCH_PENDING_PLUGINS_SUCCESS:
-      return { ...state, pending: action.payload };
+      return {
+        ...state,
+        pending: action.payload,
+      };
     default:
       return state;
   }
 }
 
 // selectors
-export function getPluginCollection(state: Object) {
+export function getPluginCollection(state: object) {
   if (state.plugins && state.plugins.list && state.plugins.byNames) {
     const plugins = [];
     for (let pluginName of state.plugins.list._embedded.plugins) {
@@ -212,44 +210,44 @@ export function getPluginCollection(state: Object) {
     return {
       ...state.plugins.list,
       _embedded: {
-        plugins
-      }
+        plugins,
+      },
     };
   }
 }
 
-export function isFetchPluginsPending(state: Object) {
+export function isFetchPluginsPending(state: object) {
   return isPending(state, FETCH_PLUGINS);
 }
 
-export function getFetchPluginsFailure(state: Object) {
+export function getFetchPluginsFailure(state: object) {
   return getFailure(state, FETCH_PLUGINS);
 }
 
-export function getPlugin(state: Object, name: string) {
+export function getPlugin(state: object, name: string) {
   if (state.plugins && state.plugins.byNames) {
     return state.plugins.byNames[name];
   }
 }
 
-export function isFetchPluginPending(state: Object, name: string) {
+export function isFetchPluginPending(state: object, name: string) {
   return isPending(state, FETCH_PLUGIN, name);
 }
 
-export function getFetchPluginFailure(state: Object, name: string) {
+export function getFetchPluginFailure(state: object, name: string) {
   return getFailure(state, FETCH_PLUGIN, name);
 }
 
-export function getPendingPlugins(state: Object) {
+export function getPendingPlugins(state: object) {
   if (state.plugins && state.plugins.pending) {
     return state.plugins.pending;
   }
 }
 
-export function isFetchPendingPluginsPending(state: Object) {
+export function isFetchPendingPluginsPending(state: object) {
   return isPending(state, FETCH_PENDING_PLUGINS);
 }
 
-export function getFetchPendingPluginsFailure(state: Object) {
+export function getFetchPendingPluginsFailure(state: object) {
   return getFailure(state, FETCH_PENDING_PLUGINS);
 }

scm-ui/ui-webapp/src/admin/roles/components/AvailableVerbs.tsx

@@ -1,13 +1,12 @@
-//@flow
-import React from "react";
-import { translate } from "react-i18next";
-import type { RepositoryRole } from "@scm-manager/ui-types";
+import React from 'react';
+import { translate } from 'react-i18next';
+import { RepositoryRole } from '@scm-manager/ui-types';
 
 type Props = {
-  role: RepositoryRole,
+  role: RepositoryRole;
 
   // context props
-  t: string => string
+  t: (p: string) => string;
 };
 
 class AvailableVerbs extends React.Component<Props> {
@@ -22,7 +21,7 @@ class AvailableVerbs extends React.Component<Props> {
             <ul>
               {role.verbs.map(verb => {
                 return (
-                  <li>{t("verbs.repository." + verb + ".displayName")}</li>
+                  <li>{t('verbs.repository.' + verb + '.displayName')}</li>
                 );
               })}
             </ul>
@@ -34,4 +33,4 @@ class AvailableVerbs extends React.Component<Props> {
   }
 }
 
-export default translate("plugins")(AvailableVerbs);
+export default translate('plugins')(AvailableVerbs);

scm-ui/ui-webapp/src/admin/roles/components/PermissionRoleDetails.tsx

@@ -1,17 +1,16 @@
-//@flow
-import React from "react";
-import { translate } from "react-i18next";
-import type { RepositoryRole } from "@scm-manager/ui-types";
-import { ExtensionPoint } from "@scm-manager/ui-extensions";
-import PermissionRoleDetailsTable from "./PermissionRoleDetailsTable";
-import { Button } from "@scm-manager/ui-components";
+import React from 'react';
+import { translate } from 'react-i18next';
+import { RepositoryRole } from '@scm-manager/ui-types';
+import { ExtensionPoint } from '@scm-manager/ui-extensions';
+import PermissionRoleDetailsTable from './PermissionRoleDetailsTable';
+import { Button } from '@scm-manager/ui-components';
 
 type Props = {
-  role: RepositoryRole,
-  url: string,
+  role: RepositoryRole;
+  url: string;
 
   // context props
-  t: string => string
+  t: (p: string) => string;
 };
 
 class PermissionRoleDetails extends React.Component<Props> {
@@ -20,7 +19,7 @@ class PermissionRoleDetails extends React.Component<Props> {
     if (!!this.props.role._links.update) {
       return (
         <Button
-          label={t("repositoryRole.editButton")}
+          label={t('repositoryRole.editButton')}
           link={`${url}/edit`}
           color="primary"
         />
@@ -40,11 +39,13 @@ class PermissionRoleDetails extends React.Component<Props> {
         <ExtensionPoint
           name="repositoryRole.role-details.information"
           renderAll={true}
-          props={{ role }}
+          props={{
+            role,
+          }}
         />
       </>
     );
   }
 }
 
-export default translate("admin")(PermissionRoleDetails);
+export default translate('admin')(PermissionRoleDetails);

scm-ui/ui-webapp/src/admin/roles/components/PermissionRoleDetailsTable.js

@@ -1,38 +0,0 @@
-//@flow
-import React from "react";
-import type { RepositoryRole } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
-import AvailableVerbs from "./AvailableVerbs";
-
-type Props = {
-  role: RepositoryRole,
-
-  // context props
-  t: string => string
-};
-
-class PermissionRoleDetailsTable extends React.Component<Props> {
-  render() {
-    const { role, t } = this.props;
-    return (
-      <table className="table content">
-        <tbody>
-        <tr>
-          <th>{t("repositoryRole.name")}</th>
-          <td>{role.name}</td>
-        </tr>
-        <tr>
-          <th>{t("repositoryRole.type")}</th>
-          <td>{role.type}</td>
-        </tr>
-        <tr>
-          <th>{t("repositoryRole.verbs")}</th>
-          <AvailableVerbs role={role} />
-        </tr>
-        </tbody>
-      </table>
-    );
-  }
-}
-
-export default translate("admin")(PermissionRoleDetailsTable);

scm-ui/ui-webapp/src/admin/roles/components/PermissionRoleDetailsTable.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { RepositoryRole } from '@scm-manager/ui-types';
+import { translate } from 'react-i18next';
+import AvailableVerbs from './AvailableVerbs';
+
+type Props = {
+  role: RepositoryRole;
+
+  // context props
+  t: (p: string) => string;
+};
+
+class PermissionRoleDetailsTable extends React.Component<Props> {
+  render() {
+    const { role, t } = this.props;
+    return (
+      <table className="table content">
+        <tbody>
+          <tr>
+            <th>{t('repositoryRole.name')}</th>
+            <td>{role.name}</td>
+          </tr>
+          <tr>
+            <th>{t('repositoryRole.type')}</th>
+            <td>{role.type}</td>
+          </tr>
+          <tr>
+            <th>{t('repositoryRole.verbs')}</th>
+            <AvailableVerbs role={role} />
+          </tr>
+        </tbody>
+      </table>
+    );
+  }
+}
+
+export default translate('admin')(PermissionRoleDetailsTable);

scm-ui/ui-webapp/src/admin/roles/components/PermissionRoleRow.tsx

@@ -1,12 +1,11 @@
-// @flow
-import React from "react";
-import { Link } from "react-router-dom";
-import type { RepositoryRole } from "@scm-manager/ui-types";
-import SystemRoleTag from "./SystemRoleTag";
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { RepositoryRole } from '@scm-manager/ui-types';
+import SystemRoleTag from './SystemRoleTag';
 
 type Props = {
-  baseUrl: string,
-  role: RepositoryRole
+  baseUrl: string;
+  role: RepositoryRole;
 };
 
 class PermissionRoleRow extends React.Component<Props> {

scm-ui/ui-webapp/src/admin/roles/components/PermissionRoleTable.js

@@ -1,37 +0,0 @@
-// @flow
-import React from "react";
-import { translate } from "react-i18next";
-import type { RepositoryRole } from "@scm-manager/ui-types";
-import PermissionRoleRow from "./PermissionRoleRow";
-
-type Props = {
-  baseUrl: string,
-  roles: RepositoryRole[],
-
-  // context props
-  t: string => string
-};
-
-class PermissionRoleTable extends React.Component<Props> {
-  render() {
-    const { baseUrl, roles, t } = this.props;
-    return (
-      <table className="card-table table is-hoverable is-fullwidth">
-        <thead>
-        <tr>
-          <th>{t("repositoryRole.name")}</th>
-        </tr>
-        </thead>
-        <tbody>
-        {roles.map((role, index) => {
-          return (
-            <PermissionRoleRow key={index} baseUrl={baseUrl} role={role} />
-          );
-        })}
-        </tbody>
-      </table>
-    );
-  }
-}
-
-export default translate("admin")(PermissionRoleTable);

scm-ui/ui-webapp/src/admin/roles/components/PermissionRoleTable.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { translate } from 'react-i18next';
+import { RepositoryRole } from '@scm-manager/ui-types';
+import PermissionRoleRow from './PermissionRoleRow';
+
+type Props = {
+  baseUrl: string;
+  roles: RepositoryRole[];
+
+  // context props
+  t: (p: string) => string;
+};
+
+class PermissionRoleTable extends React.Component<Props> {
+  render() {
+    const { baseUrl, roles, t } = this.props;
+    return (
+      <table className="card-table table is-hoverable is-fullwidth">
+        <thead>
+          <tr>
+            <th>{t('repositoryRole.name')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {roles.map((role, index) => {
+            return (
+              <PermissionRoleRow key={index} baseUrl={baseUrl} role={role} />
+            );
+          })}
+        </tbody>
+      </table>
+    );
+  }
+}
+
+export default translate('admin')(PermissionRoleTable);

scm-ui/ui-webapp/src/admin/roles/components/SystemRoleTag.js

@@ -1,30 +0,0 @@
-//@flow
-import React from "react";
-import { translate } from "react-i18next";
-import styled from "styled-components";
-import { Tag } from "@scm-manager/ui-components";
-
-type Props = {
-  system?: boolean,
-
-  // context props
-  t: string => string
-};
-
-const LeftMarginTag = styled(Tag)`
-  margin-left: 0.75rem;
-  vertical-align: inherit;
-`;
-
-class SystemRoleTag extends React.Component<Props> {
-  render() {
-    const { system, t } = this.props;
-
-    if (system) {
-      return <LeftMarginTag color="dark" label={t("repositoryRole.system")} />;
-    }
-    return null;
-  }
-}
-
-export default translate("admin")(SystemRoleTag);

scm-ui/ui-webapp/src/admin/roles/components/SystemRoleTag.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { translate } from 'react-i18next';
+import styled from 'styled-components';
+import { Tag } from '@scm-manager/ui-components';
+
+type Props = {
+  system?: boolean;
+
+  // context props
+  t: (p: string) => string;
+};
+
+const LeftMarginTag = styled(Tag)`
+  margin-left: 0.75rem;
+  vertical-align: inherit;
+`;
+
+class SystemRoleTag extends React.Component<Props> {
+  render() {
+    const { system, t } = this.props;
+
+    if (system) {
+      return <LeftMarginTag color="dark" label={t('repositoryRole.system')} />;
+    }
+    return null;
+  }
+}
+
+export default translate('admin')(SystemRoleTag);

scm-ui/ui-webapp/src/admin/roles/containers/CreateRepositoryRole.tsx

@@ -1,43 +1,42 @@
-// @flow
-import React from "react";
-import RepositoryRoleForm from "./RepositoryRoleForm";
-import { connect } from "react-redux";
-import { translate } from "react-i18next";
-import {ErrorNotification, Subtitle, Title} from "@scm-manager/ui-components";
+import React from 'react';
+import RepositoryRoleForm from './RepositoryRoleForm';
+import { connect } from 'react-redux';
+import { translate } from 'react-i18next';
+import { ErrorNotification, Subtitle, Title } from '@scm-manager/ui-components';
 import {
   createRole,
   getCreateRoleFailure,
   getFetchVerbsFailure,
-  isFetchVerbsPending
-} from "../modules/roles";
-import type { RepositoryRole } from "@scm-manager/ui-types";
+  isFetchVerbsPending,
+} from '../modules/roles';
+import { RepositoryRole } from '@scm-manager/ui-types';
 import {
   getRepositoryRolesLink,
-  getRepositoryVerbsLink
-} from "../../../modules/indexResource";
-import type {History} from "history";
+  getRepositoryVerbsLink,
+} from '../../../modules/indexResource';
+import { History } from 'history';
 
 type Props = {
-  repositoryRolesLink: string,
-  error?: Error,
-  history: History,
+  repositoryRolesLink: string;
+  error?: Error;
+  history: History;
 
   //dispatch function
-  addRole: (link: string, role: RepositoryRole, callback?: () => void) => void,
+  addRole: (link: string, role: RepositoryRole, callback?: () => void) => void;
 
   // context objects
-  t: string => string
+  t: (p: string) => string;
 };
 
 class CreateRepositoryRole extends React.Component<Props> {
   repositoryRoleCreated = (role: RepositoryRole) => {
     const { history } = this.props;
-    history.push("/admin/role/" + role.name + "/info");
+    history.push('/admin/role/' + role.name + '/info');
   };
 
   createRepositoryRole = (role: RepositoryRole) => {
     this.props.addRole(this.props.repositoryRolesLink, role, () =>
-      this.repositoryRoleCreated(role)
+      this.repositoryRoleCreated(role),
     );
   };
 
@@ -50,8 +49,8 @@ class CreateRepositoryRole extends React.Component<Props> {
 
     return (
       <>
-        <Title title={t("repositoryRole.title")} />
-        <Subtitle subtitle={t("repositoryRole.createSubtitle")} />
+        <Title title={t('repositoryRole.title')} />
+        <Subtitle subtitle={t('repositoryRole.createSubtitle')} />
         <RepositoryRoleForm
           submitForm={role => this.createRepositoryRole(role)}
         />
@@ -70,7 +69,7 @@ const mapStateToProps = (state, ownProps) => {
     loading,
     error,
     verbsLink,
-    repositoryRolesLink
+    repositoryRolesLink,
   };
 };
 
@@ -78,11 +77,11 @@ const mapDispatchToProps = dispatch => {
   return {
     addRole: (link: string, role: RepositoryRole, callback?: () => void) => {
       dispatch(createRole(link, role, callback));
-    }
+    },
   };
 };
 
 export default connect(
   mapStateToProps,
-  mapDispatchToProps
-)(translate("admin")(CreateRepositoryRole));
+  mapDispatchToProps,
+)(translate('admin')(CreateRepositoryRole));

scm-ui/ui-webapp/src/admin/roles/containers/DeleteRepositoryRole.tsx

@@ -1,41 +1,40 @@
-// @flow
-import React from "react";
-import { translate } from "react-i18next";
-import type { RepositoryRole } from "@scm-manager/ui-types";
+import React from 'react';
+import { translate } from 'react-i18next';
+import { RepositoryRole } from '@scm-manager/ui-types';
 import {
   Subtitle,
   DeleteButton,
   confirmAlert,
-  ErrorNotification
-} from "@scm-manager/ui-components";
-import { connect } from "react-redux";
-import { withRouter } from "react-router-dom";
-import type { History } from "history";
+  ErrorNotification,
+} from '@scm-manager/ui-components';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+import { History } from 'history';
 import {
   deleteRole,
   getDeleteRoleFailure,
-  isDeleteRolePending
-} from "../modules/roles";
+  isDeleteRolePending,
+} from '../modules/roles';
 
 type Props = {
-  loading: boolean,
-  error: Error,
-  role: RepositoryRole,
-  confirmDialog?: boolean,
-  deleteRole: (role: RepositoryRole, callback?: () => void) => void,
+  loading: boolean;
+  error: Error;
+  role: RepositoryRole;
+  confirmDialog?: boolean;
+  deleteRole: (role: RepositoryRole, callback?: () => void) => void;
 
   // context props
-  history: History,
-  t: string => string
+  history: History;
+  t: (p: string) => string;
 };
 
 class DeleteRepositoryRole extends React.Component<Props> {
   static defaultProps = {
-    confirmDialog: true
+    confirmDialog: true,
   };
 
   roleDeleted = () => {
-    this.props.history.push("/admin/roles/");
+    this.props.history.push('/admin/roles/');
   };
 
   deleteRole = () => {
@@ -45,18 +44,18 @@ class DeleteRepositoryRole extends React.Component<Props> {
   confirmDelete = () => {
     const { t } = this.props;
     confirmAlert({
-      title: t("repositoryRole.delete.confirmAlert.title"),
-      message: t("repositoryRole.delete.confirmAlert.message"),
+      title: t('repositoryRole.delete.confirmAlert.title'),
+      message: t('repositoryRole.delete.confirmAlert.message'),
       buttons: [
         {
-          label: t("repositoryRole.delete.confirmAlert.submit"),
-          onClick: () => this.deleteRole()
+          label: t('repositoryRole.delete.confirmAlert.submit'),
+          onClick: () => this.deleteRole(),
         },
         {
-          label: t("repositoryRole.delete.confirmAlert.cancel"),
-          onClick: () => null
-        }
-      ]
+          label: t('repositoryRole.delete.confirmAlert.cancel'),
+          onClick: () => null,
+        },
+      ],
     });
   };
 
@@ -74,12 +73,12 @@ class DeleteRepositoryRole extends React.Component<Props> {
 
     return (
       <>
-        <Subtitle subtitle={t("repositoryRole.delete.subtitle")} />
+        <Subtitle subtitle={t('repositoryRole.delete.subtitle')} />
         <div className="columns">
           <div className="column">
             <ErrorNotification error={error} />
             <DeleteButton
-              label={t("repositoryRole.delete.button")}
+              label={t('repositoryRole.delete.button')}
               action={action}
               loading={loading}
             />
@@ -95,7 +94,7 @@ const mapStateToProps = (state, ownProps) => {
   const error = getDeleteRoleFailure(state, ownProps.role.name);
   return {
     loading,
-    error
+    error,
   };
 };
 
@@ -103,11 +102,11 @@ const mapDispatchToProps = dispatch => {
   return {
     deleteRole: (role: RepositoryRole, callback?: () => void) => {
       dispatch(deleteRole(role, callback));
-    }
+    },
   };
 };
 
 export default connect(
   mapStateToProps,
-  mapDispatchToProps
-)(withRouter(translate("admin")(DeleteRepositoryRole)));
+  mapDispatchToProps,
+)(withRouter(translate('admin')(DeleteRepositoryRole)));

scm-ui/ui-webapp/src/admin/roles/containers/EditRepositoryRole.tsx

@@ -1,35 +1,34 @@
-// @flow
-import React from "react";
-import RepositoryRoleForm from "./RepositoryRoleForm";
-import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import React from 'react';
+import RepositoryRoleForm from './RepositoryRoleForm';
+import { connect } from 'react-redux';
+import { translate } from 'react-i18next';
 import {
   getModifyRoleFailure,
   isModifyRolePending,
-  modifyRole
-} from "../modules/roles";
-import { ErrorNotification, Subtitle } from "@scm-manager/ui-components";
-import type { RepositoryRole } from "@scm-manager/ui-types";
-import type { History } from "history";
-import DeleteRepositoryRole from "./DeleteRepositoryRole";
+  modifyRole,
+} from '../modules/roles';
+import { ErrorNotification, Subtitle } from '@scm-manager/ui-components';
+import { RepositoryRole } from '@scm-manager/ui-types';
+import { History } from 'history';
+import DeleteRepositoryRole from './DeleteRepositoryRole';
 
 type Props = {
-  disabled: boolean,
-  role: RepositoryRole,
-  repositoryRolesLink: string,
-  error?: Error,
+  disabled: boolean;
+  role: RepositoryRole;
+  repositoryRolesLink: string;
+  error?: Error;
 
   // context objects
-  t: string => string,
-  history: History,
+  t: (p: string) => string;
+  history: History;
 
   //dispatch function
-  updateRole: (role: RepositoryRole, callback?: () => void) => void
+  updateRole: (role: RepositoryRole, callback?: () => void) => void;
 };
 
 class EditRepositoryRole extends React.Component<Props> {
   repositoryRoleUpdated = () => {
-    this.props.history.push("/admin/roles/");
+    this.props.history.push('/admin/roles/');
   };
 
   updateRepositoryRole = (role: RepositoryRole) => {
@@ -45,13 +44,13 @@ class EditRepositoryRole extends React.Component<Props> {
 
     return (
       <>
-        <Subtitle subtitle={t("repositoryRole.editSubtitle")} />
+        <Subtitle subtitle={t('repositoryRole.editSubtitle')} />
         <RepositoryRoleForm
           role={this.props.role}
           submitForm={role => this.updateRepositoryRole(role)}
         />
-        <hr/>
-        <DeleteRepositoryRole role={this.props.role}/>
+        <hr />
+        <DeleteRepositoryRole role={this.props.role} />
       </>
     );
   }
@@ -63,7 +62,7 @@ const mapStateToProps = (state, ownProps) => {
 
   return {
     loading,
-    error
+    error,
   };
 };
 
@@ -71,11 +70,11 @@ const mapDispatchToProps = dispatch => {
   return {
     updateRole: (role: RepositoryRole, callback?: () => void) => {
       dispatch(modifyRole(role, callback));
-    }
+    },
   };
 };
 
 export default connect(
   mapStateToProps,
-  mapDispatchToProps
-)(translate("admin")(EditRepositoryRole));
+  mapDispatchToProps,
+)(translate('admin')(EditRepositoryRole));

scm-ui/ui-webapp/src/admin/roles/containers/RepositoryRoleForm.tsx

@@ -1,37 +1,36 @@
-// @flow
-import React from "react";
-import { connect } from "react-redux";
-import { translate } from "react-i18next";
-import type { RepositoryRole } from "@scm-manager/ui-types";
-import { InputField, SubmitButton } from "@scm-manager/ui-components";
-import PermissionCheckbox from "../../../repos/permissions/components/PermissionCheckbox";
+import React from 'react';
+import { connect } from 'react-redux';
+import { translate } from 'react-i18next';
+import { RepositoryRole } from '@scm-manager/ui-types';
+import { InputField, SubmitButton } from '@scm-manager/ui-components';
+import PermissionCheckbox from '../../../repos/permissions/components/PermissionCheckbox';
 import {
   fetchAvailableVerbs,
   getFetchVerbsFailure,
   getVerbsFromState,
-  isFetchVerbsPending
-} from "../modules/roles";
+  isFetchVerbsPending,
+} from '../modules/roles';
 import {
   getRepositoryRolesLink,
-  getRepositoryVerbsLink
-} from "../../../modules/indexResource";
+  getRepositoryVerbsLink,
+} from '../../../modules/indexResource';
 
 type Props = {
-  role?: RepositoryRole,
-  loading?: boolean,
-  availableVerbs: string[],
-  verbsLink: string,
-  submitForm: RepositoryRole => void,
+  role?: RepositoryRole;
+  loading?: boolean;
+  availableVerbs: string[];
+  verbsLink: string;
+  submitForm: (p: RepositoryRole) => void;
 
   // context objects
-  t: string => string,
+  t: (p: string) => string;
 
   // dispatch functions
-  fetchAvailableVerbs: (link: string) => void
+  fetchAvailableVerbs: (link: string) => void;
 };
 
 type State = {
-  role: RepositoryRole
+  role: RepositoryRole;
 };
 
 class RepositoryRoleForm extends React.Component<Props, State> {
@@ -40,11 +39,11 @@ class RepositoryRoleForm extends React.Component<Props, State> {
 
     this.state = {
       role: {
-        name: "",
+        name: '',
         verbs: [],
         system: false,
-        _links: {}
-      }
+        _links: {},
+      },
     };
   }
 
@@ -52,7 +51,9 @@ class RepositoryRoleForm extends React.Component<Props, State> {
     const { fetchAvailableVerbs, verbsLink } = this.props;
     fetchAvailableVerbs(verbsLink);
     if (this.props.role) {
-      this.setState({ role: this.props.role });
+      this.setState({
+        role: this.props.role,
+      });
     }
   }
 
@@ -73,8 +74,8 @@ class RepositoryRoleForm extends React.Component<Props, State> {
     this.setState({
       role: {
         ...this.state.role,
-        name
-      }
+        name,
+      },
     });
   };
 
@@ -89,8 +90,8 @@ class RepositoryRoleForm extends React.Component<Props, State> {
       ...this.state,
       role: {
         ...role,
-        verbs: newVerbs
-      }
+        verbs: newVerbs,
+      },
     });
   };
 
@@ -120,21 +121,21 @@ class RepositoryRoleForm extends React.Component<Props, State> {
       <form onSubmit={this.submit}>
         <InputField
           name="name"
-          label={t("repositoryRole.form.name")}
+          label={t('repositoryRole.form.name')}
           onChange={this.handleNameChange}
-          value={role.name ? role.name : ""}
+          value={role.name ? role.name : ''}
           disabled={!!this.props.role}
         />
         <div className="field">
           <label className="label">
-            {t("repositoryRole.form.permissions")}
+            {t('repositoryRole.form.permissions')}
           </label>
           {verbSelectBoxes}
         </div>
         <hr />
         <SubmitButton
           loading={loading}
-          label={t("repositoryRole.form.submit")}
+          label={t('repositoryRole.form.submit')}
           disabled={!this.isValid()}
         />
       </form>
@@ -154,7 +155,7 @@ const mapStateToProps = (state, ownProps) => {
     error,
     verbsLink,
     availableVerbs,
-    repositoryRolesLink
+    repositoryRolesLink,
   };
 };
 
@@ -162,11 +163,11 @@ const mapDispatchToProps = dispatch => {
   return {
     fetchAvailableVerbs: (link: string) => {
       dispatch(fetchAvailableVerbs(link));
-    }
+    },
   };
 };
 
 export default connect(
   mapStateToProps,
-  mapDispatchToProps
-)(translate("admin")(RepositoryRoleForm));
+  mapDispatchToProps,
+)(translate('admin')(RepositoryRoleForm));

scm-ui/ui-webapp/src/admin/roles/containers/RepositoryRoles.tsx

@@ -1,10 +1,9 @@
-// @flow
-import React from "react";
-import { connect } from "react-redux";
-import { withRouter } from "react-router-dom";
-import { translate } from "react-i18next";
-import type { History } from "history";
-import type { RepositoryRole, PagedCollection } from "@scm-manager/ui-types";
+import React from 'react';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+import { translate } from 'react-i18next';
+import { History } from 'history';
+import { RepositoryRole, PagedCollection } from '@scm-manager/ui-types';
 import {
   Title,
   Subtitle,
@@ -12,36 +11,36 @@ import {
   Notification,
   LinkPaginator,
   urls,
-  CreateButton
-} from "@scm-manager/ui-components";
+  CreateButton,
+} from '@scm-manager/ui-components';
 import {
   fetchRolesByPage,
   getRolesFromState,
   selectListAsCollection,
   isPermittedToCreateRoles,
   isFetchRolesPending,
-  getFetchRolesFailure
-} from "../modules/roles";
-import PermissionRoleTable from "../components/PermissionRoleTable";
-import { getRepositoryRolesLink } from "../../../modules/indexResource";
+  getFetchRolesFailure,
+} from '../modules/roles';
+import PermissionRoleTable from '../components/PermissionRoleTable';
+import { getRepositoryRolesLink } from '../../../modules/indexResource';
 
 type Props = {
-  baseUrl: string,
-  roles: RepositoryRole[],
-  loading: boolean,
-  error: Error,
-  canAddRoles: boolean,
-  list: PagedCollection,
-  page: number,
-  rolesLink: string,
+  baseUrl: string;
+  roles: RepositoryRole[];
+  loading: boolean;
+  error: Error;
+  canAddRoles: boolean;
+  list: PagedCollection;
+  page: number;
+  rolesLink: string;
 
   // context objects
-  t: string => string,
-  history: History,
-  location: any,
+  t: (p: string) => string;
+  history: History;
+  location: any;
 
   // dispatch functions
-  fetchRolesByPage: (link: string, page: number) => void
+  fetchRolesByPage: (link: string, page: number) => void;
 };
 
 class RepositoryRoles extends React.Component<Props> {
@@ -57,15 +56,12 @@ class RepositoryRoles extends React.Component<Props> {
       page,
       rolesLink,
       location,
-      fetchRolesByPage
+      fetchRolesByPage,
     } = this.props;
     if (list && page && !loading) {
       const statePage: number = list.page + 1;
       if (page !== statePage || prevProps.location.search !== location.search) {
-        fetchRolesByPage(
-          rolesLink,
-          page
-        );
+        fetchRolesByPage(rolesLink, page);
       }
     }
   };
@@ -79,8 +75,8 @@ class RepositoryRoles extends React.Component<Props> {
 
     return (
       <>
-        <Title title={t("repositoryRole.title")} />
-        <Subtitle subtitle={t("repositoryRole.overview.title")} />
+        <Title title={t('repositoryRole.title')} />
+        <Subtitle subtitle={t('repositoryRole.overview.title')} />
         {this.renderPermissionsTable()}
         {this.renderCreateButton()}
       </>
@@ -99,7 +95,7 @@ class RepositoryRoles extends React.Component<Props> {
     }
     return (
       <Notification type="info">
-        {t("repositoryRole.overview.noPermissionRoles")}
+        {t('repositoryRole.overview.noPermissionRoles')}
       </Notification>
     );
   }
@@ -109,7 +105,7 @@ class RepositoryRoles extends React.Component<Props> {
     if (canAddRoles) {
       return (
         <CreateButton
-          label={t("repositoryRole.overview.createButton")}
+          label={t('repositoryRole.overview.createButton')}
           link={`${baseUrl}/create`}
         />
       );
@@ -135,7 +131,7 @@ const mapStateToProps = (state, ownProps) => {
     canAddRoles,
     list,
     page,
-    rolesLink
+    rolesLink,
   };
 };
 
@@ -143,13 +139,13 @@ const mapDispatchToProps = dispatch => {
   return {
     fetchRolesByPage: (link: string, page: number) => {
       dispatch(fetchRolesByPage(link, page));
-    }
+    },
   };
 };
 
 export default withRouter(
   connect(
     mapStateToProps,
-    mapDispatchToProps
-  )(translate("admin")(RepositoryRoles))
+    mapDispatchToProps,
+  )(translate('admin')(RepositoryRoles)),
 );

scm-ui/ui-webapp/src/admin/roles/containers/SingleRepositoryRole.tsx

@@ -1,50 +1,49 @@
-//@flow
-import React from "react";
-import { connect } from "react-redux";
-import { Loading, ErrorPage, Title } from "@scm-manager/ui-components";
-import { Route } from "react-router-dom";
-import type { History } from "history";
-import { translate } from "react-i18next";
-import type { RepositoryRole } from "@scm-manager/ui-types";
-import { getRepositoryRolesLink } from "../../../modules/indexResource";
-import { ExtensionPoint } from "@scm-manager/ui-extensions";
+import React from 'react';
+import { connect } from 'react-redux';
+import { Loading, ErrorPage, Title } from '@scm-manager/ui-components';
+import { Route } from 'react-router-dom';
+import { History } from 'history';
+import { translate } from 'react-i18next';
+import { RepositoryRole } from '@scm-manager/ui-types';
+import { getRepositoryRolesLink } from '../../../modules/indexResource';
+import { ExtensionPoint } from '@scm-manager/ui-extensions';
 import {
   fetchRoleByName,
   getFetchRoleFailure,
   getRoleByName,
-  isFetchRolePending
-} from "../modules/roles";
-import { withRouter } from "react-router-dom";
-import PermissionRoleDetail from "../components/PermissionRoleDetails";
-import EditRepositoryRole from "./EditRepositoryRole";
+  isFetchRolePending,
+} from '../modules/roles';
+import { withRouter } from 'react-router-dom';
+import PermissionRoleDetail from '../components/PermissionRoleDetails';
+import EditRepositoryRole from './EditRepositoryRole';
 
 type Props = {
-  roleName: string,
-  role: RepositoryRole,
-  loading: boolean,
-  error: Error,
-  repositoryRolesLink: string,
-  disabled: boolean,
+  roleName: string;
+  role: RepositoryRole;
+  loading: boolean;
+  error: Error;
+  repositoryRolesLink: string;
+  disabled: boolean;
 
   // dispatcher function
-  fetchRoleByName: (string, string) => void,
+  fetchRoleByName: (p1: string, p2: string) => void;
 
   // context objects
-  t: string => string,
-  match: any,
-  history: History
+  t: (p: string) => string;
+  match: any;
+  history: History;
 };
 
 class SingleRepositoryRole extends React.Component<Props> {
   componentDidMount() {
     this.props.fetchRoleByName(
       this.props.repositoryRolesLink,
-      this.props.roleName
+      this.props.roleName,
     );
   }
 
   stripEndingSlash = (url: string) => {
-    if (url.endsWith("/")) {
+    if (url.endsWith('/')) {
       return url.substring(0, url.length - 2);
     }
     return url;
@@ -60,8 +59,8 @@ class SingleRepositoryRole extends React.Component<Props> {
     if (error) {
       return (
         <ErrorPage
-          title={t("repositoryRole.errorTitle")}
-          subtitle={t("repositoryRole.errorSubtitle")}
+          title={t('repositoryRole.errorTitle')}
+          subtitle={t('repositoryRole.errorSubtitle')}
           error={error}
         />
       );
@@ -75,12 +74,12 @@ class SingleRepositoryRole extends React.Component<Props> {
 
     const extensionProps = {
       role,
-      url
+      url,
     };
 
     return (
       <>
-        <Title title={t("repositoryRole.title")} />
+        <Title title={t('repositoryRole.title')} />
         <Route
           path={`${url}/info`}
           component={() => <PermissionRoleDetail role={role} url={url} />}
@@ -113,7 +112,7 @@ const mapStateToProps = (state, ownProps) => {
     roleName,
     role,
     loading,
-    error
+    error,
   };
 };
 
@@ -121,13 +120,13 @@ const mapDispatchToProps = dispatch => {
   return {
     fetchRoleByName: (link: string, name: string) => {
       dispatch(fetchRoleByName(link, name));
-    }
+    },
   };
 };
 
 export default withRouter(
   connect(
     mapStateToProps,
-    mapDispatchToProps
-  )(translate("admin")(SingleRepositoryRole))
+    mapDispatchToProps,
+  )(translate('admin')(SingleRepositoryRole)),
 );

scm-ui/ui-webapp/src/admin/roles/modules/roles.test.ts

@@ -1,7 +1,6 @@
-// @flow
-import configureMockStore from "redux-mock-store";
-import thunk from "redux-thunk";
-import fetchMock from "fetch-mock";
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import fetchMock from 'fetch-mock';
 
 import reducer, {
   FETCH_ROLES,
@@ -46,42 +45,42 @@ import reducer, {
   deleteRoleSuccess,
   getDeleteRoleFailure,
   selectListAsCollection,
-  isPermittedToCreateRoles
-} from "./roles";
+  isPermittedToCreateRoles,
+} from './roles';
 
 const role1 = {
-  name: "specialrole",
-  verbs: ["read", "pull", "push", "readPullRequest"],
+  name: 'specialrole',
+  verbs: ['read', 'pull', 'push', 'readPullRequest'],
   system: false,
   _links: {
     self: {
-      href: "http://localhost:8081/scm/api/v2/repositoryRoles/specialrole"
+      href: 'http://localhost:8081/scm/api/v2/repositoryRoles/specialrole',
     },
     delete: {
-      href: "http://localhost:8081/scm/api/v2/repositoryRoles/specialrole"
+      href: 'http://localhost:8081/scm/api/v2/repositoryRoles/specialrole',
     },
     update: {
-      href: "http://localhost:8081/scm/api/v2/repositoryRoles/specialrole"
-    }
-  }
+      href: 'http://localhost:8081/scm/api/v2/repositoryRoles/specialrole',
+    },
+  },
 };
 const role2 = {
-  name: "WRITE",
+  name: 'WRITE',
   verbs: [
-    "read",
-    "pull",
-    "push",
-    "createPullRequest",
-    "readPullRequest",
-    "commentPullRequest",
-    "mergePullRequest"
+    'read',
+    'pull',
+    'push',
+    'createPullRequest',
+    'readPullRequest',
+    'commentPullRequest',
+    'mergePullRequest',
   ],
   system: true,
   _links: {
     self: {
-      href: "http://localhost:8081/scm/api/v2/repositoryRoles/WRITE"
-    }
-  }
+      href: 'http://localhost:8081/scm/api/v2/repositoryRoles/WRITE',
+    },
+  },
 };
 
 const responseBody = {
@@ -90,53 +89,57 @@ const responseBody = {
   _links: {
     self: {
       href:
-        "http://localhost:8081/scm/api/v2/repositoryRoles/?page=0&pageSize=10"
+        'http://localhost:8081/scm/api/v2/repositoryRoles/?page=0&pageSize=10',
     },
     first: {
       href:
-        "http://localhost:8081/scm/api/v2/repositoryRoles/?page=0&pageSize=10"
+        'http://localhost:8081/scm/api/v2/repositoryRoles/?page=0&pageSize=10',
     },
     last: {
       href:
-        "http://localhost:8081/scm/api/v2/repositoryRoles/?page=0&pageSize=10"
+        'http://localhost:8081/scm/api/v2/repositoryRoles/?page=0&pageSize=10',
     },
     create: {
-      href: "http://localhost:8081/scm/api/v2/repositoryRoles/"
-    }
+      href: 'http://localhost:8081/scm/api/v2/repositoryRoles/',
+    },
   },
   _embedded: {
-    repositoryRoles: [role1, role2]
-  }
+    repositoryRoles: [role1, role2],
+  },
 };
 
 const response = {
-  headers: { "content-type": "application/json" },
-  responseBody
+  headers: {
+    'content-type': 'application/json',
+  },
+  responseBody,
 };
 
-const URL = "repositoryRoles";
-const ROLES_URL = "/api/v2/repositoryRoles";
+const URL = 'repositoryRoles';
+const ROLES_URL = '/api/v2/repositoryRoles';
 const ROLE1_URL =
-  "http://localhost:8081/scm/api/v2/repositoryRoles/specialrole";
+  'http://localhost:8081/scm/api/v2/repositoryRoles/specialrole';
 
-const error = new Error("FEHLER!");
+const error = new Error('FEHLER!');
 
-describe("repository roles fetch", () => {
+describe('repository roles fetch', () => {
   const mockStore = configureMockStore([thunk]);
   afterEach(() => {
     fetchMock.reset();
     fetchMock.restore();
   });
 
-  it("should successfully fetch repository roles", () => {
+  it('should successfully fetch repository roles', () => {
     fetchMock.getOnce(ROLES_URL, response);
 
     const expectedActions = [
-      { type: FETCH_ROLES_PENDING },
+      {
+        type: FETCH_ROLES_PENDING,
+      },
       {
         type: FETCH_ROLES_SUCCESS,
-        payload: response
-      }
+        payload: response,
+      },
     ];
 
     const store = mockStore({});
@@ -146,9 +149,9 @@ describe("repository roles fetch", () => {
     });
   });
 
-  it("should fail getting repository roles on HTTP 500", () => {
+  it('should fail getting repository roles on HTTP 500', () => {
     fetchMock.getOnce(ROLES_URL, {
-      status: 500
+      status: 500,
     });
 
     const store = mockStore({});
@@ -161,11 +164,11 @@ describe("repository roles fetch", () => {
     });
   });
 
-  it("should sucessfully fetch single role by name", () => {
-    fetchMock.getOnce(ROLES_URL + "/specialrole", role1);
+  it('should sucessfully fetch single role by name', () => {
+    fetchMock.getOnce(ROLES_URL + '/specialrole', role1);
 
     const store = mockStore({});
-    return store.dispatch(fetchRoleByName(URL, "specialrole")).then(() => {
+    return store.dispatch(fetchRoleByName(URL, 'specialrole')).then(() => {
       const actions = store.getActions();
       expect(actions[0].type).toEqual(FETCH_ROLE_PENDING);
       expect(actions[1].type).toEqual(FETCH_ROLE_SUCCESS);
@@ -173,13 +176,13 @@ describe("repository roles fetch", () => {
     });
   });
 
-  it("should fail fetching single role by name on HTTP 500", () => {
-    fetchMock.getOnce(ROLES_URL + "/specialrole", {
-      status: 500
+  it('should fail fetching single role by name on HTTP 500', () => {
+    fetchMock.getOnce(ROLES_URL + '/specialrole', {
+      status: 500,
     });
 
     const store = mockStore({});
-    return store.dispatch(fetchRoleByName(URL, "specialrole")).then(() => {
+    return store.dispatch(fetchRoleByName(URL, 'specialrole')).then(() => {
       const actions = store.getActions();
       expect(actions[0].type).toEqual(FETCH_ROLE_PENDING);
       expect(actions[1].type).toEqual(FETCH_ROLE_FAILURE);
@@ -187,7 +190,7 @@ describe("repository roles fetch", () => {
     });
   });
 
-  it("should sucessfully fetch single role", () => {
+  it('should sucessfully fetch single role', () => {
     fetchMock.getOnce(ROLE1_URL, role1);
 
     const store = mockStore({});
@@ -199,9 +202,9 @@ describe("repository roles fetch", () => {
     });
   });
 
-  it("should fail fetching single role on HTTP 500", () => {
+  it('should fail fetching single role on HTTP 500', () => {
     fetchMock.getOnce(ROLE1_URL, {
-      status: 500
+      status: 500,
     });
 
     const store = mockStore({});
@@ -213,10 +216,10 @@ describe("repository roles fetch", () => {
     });
   });
 
-  it("should add a role successfully", () => {
+  it('should add a role successfully', () => {
     // unmatched
     fetchMock.postOnce(ROLES_URL, {
-      status: 204
+      status: 204,
     });
 
     // after create, the roles are fetched again
@@ -231,9 +234,9 @@ describe("repository roles fetch", () => {
     });
   });
 
-  it("should fail adding a role on HTTP 500", () => {
+  it('should fail adding a role on HTTP 500', () => {
     fetchMock.postOnce(ROLES_URL, {
-      status: 500
+      status: 500,
     });
 
     const store = mockStore({});
@@ -246,27 +249,27 @@ describe("repository roles fetch", () => {
     });
   });
 
-  it("should call the callback after role successfully created", () => {
+  it('should call the callback after role successfully created', () => {
     // unmatched
     fetchMock.postOnce(ROLES_URL, {
-      status: 204
+      status: 204,
     });
 
-    let callMe = "not yet";
+    let callMe = 'not yet';
 
     const callback = () => {
-      callMe = "yeah";
+      callMe = 'yeah';
     };
 
     const store = mockStore({});
     return store.dispatch(createRole(URL, role1, callback)).then(() => {
-      expect(callMe).toBe("yeah");
+      expect(callMe).toBe('yeah');
     });
   });
 
-  it("successfully update role", () => {
+  it('successfully update role', () => {
     fetchMock.putOnce(ROLE1_URL, {
-      status: 204
+      status: 204,
     });
     fetchMock.getOnce(ROLE1_URL, role1);
 
@@ -280,9 +283,9 @@ describe("repository roles fetch", () => {
     });
   });
 
-  it("should call callback, after successful modified role", () => {
+  it('should call callback, after successful modified role', () => {
     fetchMock.putOnce(ROLE1_URL, {
-      status: 204
+      status: 204,
     });
     fetchMock.getOnce(ROLE1_URL, role1);
 
@@ -297,9 +300,9 @@ describe("repository roles fetch", () => {
     });
   });
 
-  it("should fail updating role on HTTP 500", () => {
+  it('should fail updating role on HTTP 500', () => {
     fetchMock.putOnce(ROLE1_URL, {
-      status: 500
+      status: 500,
     });
 
     const store = mockStore({});
@@ -311,9 +314,9 @@ describe("repository roles fetch", () => {
     });
   });
 
-  it("should delete successfully role1", () => {
+  it('should delete successfully role1', () => {
     fetchMock.deleteOnce(ROLE1_URL, {
-      status: 204
+      status: 204,
     });
 
     const store = mockStore({});
@@ -326,9 +329,9 @@ describe("repository roles fetch", () => {
     });
   });
 
-  it("should call the callback after successful delete", () => {
+  it('should call the callback after successful delete', () => {
     fetchMock.deleteOnce(ROLE1_URL, {
-      status: 204
+      status: 204,
     });
 
     let called = false;
@@ -342,9 +345,9 @@ describe("repository roles fetch", () => {
     });
   });
 
-  it("should fail to delete role1", () => {
+  it('should fail to delete role1', () => {
     fetchMock.deleteOnce(ROLE1_URL, {
-      status: 500
+      status: 500,
     });
 
     const store = mockStore({});
@@ -358,296 +361,325 @@ describe("repository roles fetch", () => {
   });
 });
 
-describe("repository roles reducer", () => {
-  it("should update state correctly according to FETCH_ROLES_SUCCESS action", () => {
+describe('repository roles reducer', () => {
+  it('should update state correctly according to FETCH_ROLES_SUCCESS action', () => {
     const newState = reducer({}, fetchRolesSuccess(responseBody));
 
     expect(newState.list).toEqual({
-      entries: ["specialrole", "WRITE"],
+      entries: ['specialrole', 'WRITE'],
       entry: {
         roleCreatePermission: true,
         page: 0,
         pageTotal: 1,
-        _links: responseBody._links
-      }
+        _links: responseBody._links,
+      },
     });
 
     expect(newState.byNames).toEqual({
       specialrole: role1,
-      WRITE: role2
+      WRITE: role2,
     });
 
     expect(newState.list.entry.roleCreatePermission).toBeTruthy();
   });
 
-  it("should set roleCreatePermission to true if update link is present", () => {
+  it('should set roleCreatePermission to true if update link is present', () => {
     const newState = reducer({}, fetchRolesSuccess(responseBody));
 
     expect(newState.list.entry.roleCreatePermission).toBeTruthy();
   });
 
-  it("should not replace whole byNames map when fetching roles", () => {
+  it('should not replace whole byNames map when fetching roles', () => {
     const oldState = {
       byNames: {
-        WRITE: role2
-      }
+        WRITE: role2,
+      },
     };
 
     const newState = reducer(oldState, fetchRolesSuccess(responseBody));
-    expect(newState.byNames["specialrole"]).toBeDefined();
-    expect(newState.byNames["WRITE"]).toBeDefined();
+    expect(newState.byNames['specialrole']).toBeDefined();
+    expect(newState.byNames['WRITE']).toBeDefined();
   });
 
-  it("should remove role from state when delete succeeds", () => {
+  it('should remove role from state when delete succeeds', () => {
     const state = {
       list: {
-        entries: ["WRITE", "specialrole"]
+        entries: ['WRITE', 'specialrole'],
       },
       byNames: {
         specialrole: role1,
-        WRITE: role2
-      }
+        WRITE: role2,
+      },
     };
 
     const newState = reducer(state, deleteRoleSuccess(role2));
-    expect(newState.byNames["specialrole"]).toBeDefined();
-    expect(newState.byNames["WRITE"]).toBeFalsy();
-    expect(newState.list.entries).toEqual(["specialrole"]);
+    expect(newState.byNames['specialrole']).toBeDefined();
+    expect(newState.byNames['WRITE']).toBeFalsy();
+    expect(newState.list.entries).toEqual(['specialrole']);
   });
 
-  it("should set roleCreatePermission to true if create link is present", () => {
+  it('should set roleCreatePermission to true if create link is present', () => {
     const newState = reducer({}, fetchRolesSuccess(responseBody));
 
     expect(newState.list.entry.roleCreatePermission).toBeTruthy();
-    expect(newState.list.entries).toEqual(["specialrole", "WRITE"]);
-    expect(newState.byNames["WRITE"]).toBeTruthy();
-    expect(newState.byNames["specialrole"]).toBeTruthy();
+    expect(newState.list.entries).toEqual(['specialrole', 'WRITE']);
+    expect(newState.byNames['WRITE']).toBeTruthy();
+    expect(newState.byNames['specialrole']).toBeTruthy();
   });
 
-  it("should update state according to FETCH_ROLE_SUCCESS action", () => {
+  it('should update state according to FETCH_ROLE_SUCCESS action', () => {
     const newState = reducer({}, fetchRoleSuccess(role2));
-    expect(newState.byNames["WRITE"]).toBe(role2);
+    expect(newState.byNames['WRITE']).toBe(role2);
   });
 
-  it("should affect roles state nor the state of other roles", () => {
+  it('should affect roles state nor the state of other roles', () => {
     const newState = reducer(
       {
         list: {
-          entries: ["specialrole"]
-        }
+          entries: ['specialrole'],
+        },
       },
-      fetchRoleSuccess(role2)
+      fetchRoleSuccess(role2),
     );
-    expect(newState.byNames["WRITE"]).toBe(role2);
-    expect(newState.list.entries).toEqual(["specialrole"]);
+    expect(newState.byNames['WRITE']).toBe(role2);
+    expect(newState.list.entries).toEqual(['specialrole']);
   });
 });
 
-describe("repository roles selector", () => {
-  it("should return an empty object", () => {
+describe('repository roles selector', () => {
+  it('should return an empty object', () => {
     expect(selectListAsCollection({})).toEqual({});
-    expect(selectListAsCollection({ roles: { a: "a" } })).toEqual({});
+    expect(
+      selectListAsCollection({
+        roles: {
+          a: 'a',
+        },
+      }),
+    ).toEqual({});
   });
 
-  it("should return a state slice collection", () => {
+  it('should return a state slice collection', () => {
     const collection = {
       page: 3,
-      totalPages: 42
+      totalPages: 42,
     };
 
     const state = {
       roles: {
         list: {
-          entry: collection
-        }
-      }
+          entry: collection,
+        },
+      },
     };
     expect(selectListAsCollection(state)).toBe(collection);
   });
 
-  it("should return false", () => {
+  it('should return false', () => {
     expect(isPermittedToCreateRoles({})).toBe(false);
-    expect(isPermittedToCreateRoles({ roles: { list: { entry: {} } } })).toBe(
-      false
-    );
     expect(
       isPermittedToCreateRoles({
-        roles: { list: { entry: { roleCreatePermission: false } } }
-      })
+        roles: {
+          list: {
+            entry: {},
+          },
+        },
+      }),
+    ).toBe(false);
+    expect(
+      isPermittedToCreateRoles({
+        roles: {
+          list: {
+            entry: {
+              roleCreatePermission: false,
+            },
+          },
+        },
+      }),
     ).toBe(false);
   });
 
-  it("should return true", () => {
+  it('should return true', () => {
     const state = {
       roles: {
         list: {
           entry: {
-            roleCreatePermission: true
-          }
-        }
-      }
+            roleCreatePermission: true,
+          },
+        },
+      },
     };
     expect(isPermittedToCreateRoles(state)).toBe(true);
   });
 
-  it("should get repositoryRoles from state", () => {
+  it('should get repositoryRoles from state', () => {
     const state = {
       roles: {
         list: {
-          entries: ["a", "b"]
+          entries: ['a', 'b'],
         },
         byNames: {
-          a: { name: "a" },
-          b: { name: "b" }
-        }
-      }
+          a: {
+            name: 'a',
+          },
+          b: {
+            name: 'b',
+          },
+        },
+      },
     };
-    expect(getRolesFromState(state)).toEqual([{ name: "a" }, { name: "b" }]);
+    expect(getRolesFromState(state)).toEqual([
+      {
+        name: 'a',
+      },
+      {
+        name: 'b',
+      },
+    ]);
   });
 
-  it("should return true, when fetch repositoryRoles is pending", () => {
+  it('should return true, when fetch repositoryRoles is pending', () => {
     const state = {
       pending: {
-        [FETCH_ROLES]: true
-      }
+        [FETCH_ROLES]: true,
+      },
     };
     expect(isFetchRolesPending(state)).toEqual(true);
   });
 
-  it("should return false, when fetch repositoryRoles is not pending", () => {
+  it('should return false, when fetch repositoryRoles is not pending', () => {
     expect(isFetchRolesPending({})).toEqual(false);
   });
 
-  it("should return error when fetch repositoryRoles did fail", () => {
+  it('should return error when fetch repositoryRoles did fail', () => {
     const state = {
       failure: {
-        [FETCH_ROLES]: error
-      }
+        [FETCH_ROLES]: error,
+      },
     };
     expect(getFetchRolesFailure(state)).toEqual(error);
   });
 
-  it("should return undefined when fetch repositoryRoles did not fail", () => {
+  it('should return undefined when fetch repositoryRoles did not fail', () => {
     expect(getFetchRolesFailure({})).toBe(undefined);
   });
 
-  it("should return true if create role is pending", () => {
+  it('should return true if create role is pending', () => {
     const state = {
       pending: {
-        [CREATE_ROLE]: true
-      }
+        [CREATE_ROLE]: true,
+      },
     };
     expect(isCreateRolePending(state)).toBe(true);
   });
 
-  it("should return false if create role is not pending", () => {
+  it('should return false if create role is not pending', () => {
     const state = {
       pending: {
-        [CREATE_ROLE]: false
-      }
+        [CREATE_ROLE]: false,
+      },
     };
     expect(isCreateRolePending(state)).toBe(false);
   });
 
-  it("should return error when create role did fail", () => {
+  it('should return error when create role did fail', () => {
     const state = {
       failure: {
-        [CREATE_ROLE]: error
-      }
+        [CREATE_ROLE]: error,
+      },
     };
     expect(getCreateRoleFailure(state)).toEqual(error);
   });
 
-  it("should return undefined when create role did not fail", () => {
+  it('should return undefined when create role did not fail', () => {
     expect(getCreateRoleFailure({})).toBe(undefined);
   });
 
-  it("should return role1", () => {
+  it('should return role1', () => {
     const state = {
       roles: {
         byNames: {
-          role1: role1
-        }
-      }
+          role1: role1,
+        },
+      },
     };
-    expect(getRoleByName(state, "role1")).toEqual(role1);
+    expect(getRoleByName(state, 'role1')).toEqual(role1);
   });
 
-  it("should return true, when fetch role2 is pending", () => {
+  it('should return true, when fetch role2 is pending', () => {
     const state = {
       pending: {
-        [FETCH_ROLE + "/role2"]: true
-      }
+        [FETCH_ROLE + '/role2']: true,
+      },
     };
-    expect(isFetchRolePending(state, "role2")).toEqual(true);
+    expect(isFetchRolePending(state, 'role2')).toEqual(true);
   });
 
-  it("should return false, when fetch role2 is not pending", () => {
-    expect(isFetchRolePending({}, "role2")).toEqual(false);
+  it('should return false, when fetch role2 is not pending', () => {
+    expect(isFetchRolePending({}, 'role2')).toEqual(false);
   });
 
-  it("should return error when fetch role2 did fail", () => {
+  it('should return error when fetch role2 did fail', () => {
     const state = {
       failure: {
-        [FETCH_ROLE + "/role2"]: error
-      }
+        [FETCH_ROLE + '/role2']: error,
+      },
     };
-    expect(getFetchRoleFailure(state, "role2")).toEqual(error);
+    expect(getFetchRoleFailure(state, 'role2')).toEqual(error);
   });
 
-  it("should return undefined when fetch role2 did not fail", () => {
-    expect(getFetchRoleFailure({}, "role2")).toBe(undefined);
+  it('should return undefined when fetch role2 did not fail', () => {
+    expect(getFetchRoleFailure({}, 'role2')).toBe(undefined);
   });
 
-  it("should return true, when modify role1 is pending", () => {
+  it('should return true, when modify role1 is pending', () => {
     const state = {
       pending: {
-        [MODIFY_ROLE + "/role1"]: true
-      }
+        [MODIFY_ROLE + '/role1']: true,
+      },
     };
-    expect(isModifyRolePending(state, "role1")).toEqual(true);
+    expect(isModifyRolePending(state, 'role1')).toEqual(true);
   });
 
-  it("should return false, when modify role1 is not pending", () => {
-    expect(isModifyRolePending({}, "role1")).toEqual(false);
+  it('should return false, when modify role1 is not pending', () => {
+    expect(isModifyRolePending({}, 'role1')).toEqual(false);
   });
 
-  it("should return error when modify role1 did fail", () => {
+  it('should return error when modify role1 did fail', () => {
     const state = {
       failure: {
-        [MODIFY_ROLE + "/role1"]: error
-      }
+        [MODIFY_ROLE + '/role1']: error,
+      },
     };
-    expect(getModifyRoleFailure(state, "role1")).toEqual(error);
+    expect(getModifyRoleFailure(state, 'role1')).toEqual(error);
   });
 
-  it("should return undefined when modify role1 did not fail", () => {
-    expect(getModifyRoleFailure({}, "role1")).toBe(undefined);
+  it('should return undefined when modify role1 did not fail', () => {
+    expect(getModifyRoleFailure({}, 'role1')).toBe(undefined);
   });
 
-  it("should return true, when delete role2 is pending", () => {
+  it('should return true, when delete role2 is pending', () => {
     const state = {
       pending: {
-        [DELETE_ROLE + "/role2"]: true
-      }
+        [DELETE_ROLE + '/role2']: true,
+      },
     };
-    expect(isDeleteRolePending(state, "role2")).toEqual(true);
+    expect(isDeleteRolePending(state, 'role2')).toEqual(true);
   });
 
-  it("should return false, when delete role2 is not pending", () => {
-    expect(isDeleteRolePending({}, "role2")).toEqual(false);
+  it('should return false, when delete role2 is not pending', () => {
+    expect(isDeleteRolePending({}, 'role2')).toEqual(false);
   });
 
-  it("should return error when delete role2 did fail", () => {
+  it('should return error when delete role2 did fail', () => {
     const state = {
       failure: {
-        [DELETE_ROLE + "/role2"]: error
-      }
+        [DELETE_ROLE + '/role2']: error,
+      },
     };
-    expect(getDeleteRoleFailure(state, "role2")).toEqual(error);
+    expect(getDeleteRoleFailure(state, 'role2')).toEqual(error);
   });
 
-  it("should return undefined when delete role2 did not fail", () => {
-    expect(getDeleteRoleFailure({}, "role2")).toBe(undefined);
+  it('should return undefined when delete role2 did not fail', () => {
+    expect(getDeleteRoleFailure({}, 'role2')).toBe(undefined);
   });
 });

scm-ui/ui-webapp/src/admin/roles/modules/roles.ts

@@ -1,60 +1,55 @@
-// @flow
-import { apiClient } from "@scm-manager/ui-components";
-import { isPending } from "../../../modules/pending";
-import { getFailure } from "../../../modules/failure";
-import * as types from "../../../modules/types";
-import { combineReducers, Dispatch } from "redux";
-import type {
-  Action,
-  PagedCollection,
-  RepositoryRole
-} from "@scm-manager/ui-types";
+import { apiClient } from '@scm-manager/ui-components';
+import { isPending } from '../../../modules/pending';
+import { getFailure } from '../../../modules/failure';
+import * as types from '../../../modules/types';
+import { combineReducers, Dispatch } from 'redux';
+import { Action, PagedCollection, RepositoryRole } from '@scm-manager/ui-types';
 
-export const FETCH_ROLES = "scm/roles/FETCH_ROLES";
+export const FETCH_ROLES = 'scm/roles/FETCH_ROLES';
 export const FETCH_ROLES_PENDING = `${FETCH_ROLES}_${types.PENDING_SUFFIX}`;
 export const FETCH_ROLES_SUCCESS = `${FETCH_ROLES}_${types.SUCCESS_SUFFIX}`;
 export const FETCH_ROLES_FAILURE = `${FETCH_ROLES}_${types.FAILURE_SUFFIX}`;
 
-export const FETCH_ROLE = "scm/roles/FETCH_ROLE";
+export const FETCH_ROLE = 'scm/roles/FETCH_ROLE';
 export const FETCH_ROLE_PENDING = `${FETCH_ROLE}_${types.PENDING_SUFFIX}`;
 export const FETCH_ROLE_SUCCESS = `${FETCH_ROLE}_${types.SUCCESS_SUFFIX}`;
 export const FETCH_ROLE_FAILURE = `${FETCH_ROLE}_${types.FAILURE_SUFFIX}`;
 
-export const CREATE_ROLE = "scm/roles/CREATE_ROLE";
+export const CREATE_ROLE = 'scm/roles/CREATE_ROLE';
 export const CREATE_ROLE_PENDING = `${CREATE_ROLE}_${types.PENDING_SUFFIX}`;
 export const CREATE_ROLE_SUCCESS = `${CREATE_ROLE}_${types.SUCCESS_SUFFIX}`;
 export const CREATE_ROLE_FAILURE = `${CREATE_ROLE}_${types.FAILURE_SUFFIX}`;
 export const CREATE_ROLE_RESET = `${CREATE_ROLE}_${types.RESET_SUFFIX}`;
 
-export const MODIFY_ROLE = "scm/roles/MODIFY_ROLE";
+export const MODIFY_ROLE = 'scm/roles/MODIFY_ROLE';
 export const MODIFY_ROLE_PENDING = `${MODIFY_ROLE}_${types.PENDING_SUFFIX}`;
 export const MODIFY_ROLE_SUCCESS = `${MODIFY_ROLE}_${types.SUCCESS_SUFFIX}`;
 export const MODIFY_ROLE_FAILURE = `${MODIFY_ROLE}_${types.FAILURE_SUFFIX}`;
 export const MODIFY_ROLE_RESET = `${MODIFY_ROLE}_${types.RESET_SUFFIX}`;
 
-export const DELETE_ROLE = "scm/roles/DELETE_ROLE";
+export const DELETE_ROLE = 'scm/roles/DELETE_ROLE';
 export const DELETE_ROLE_PENDING = `${DELETE_ROLE}_${types.PENDING_SUFFIX}`;
 export const DELETE_ROLE_SUCCESS = `${DELETE_ROLE}_${types.SUCCESS_SUFFIX}`;
 export const DELETE_ROLE_FAILURE = `${DELETE_ROLE}_${types.FAILURE_SUFFIX}`;
 
-export const FETCH_VERBS = "scm/roles/FETCH_VERBS";
+export const FETCH_VERBS = 'scm/roles/FETCH_VERBS';
 export const FETCH_VERBS_PENDING = `${FETCH_VERBS}_${types.PENDING_SUFFIX}`;
 export const FETCH_VERBS_SUCCESS = `${FETCH_VERBS}_${types.SUCCESS_SUFFIX}`;
 export const FETCH_VERBS_FAILURE = `${FETCH_VERBS}_${types.FAILURE_SUFFIX}`;
 
-const CONTENT_TYPE_ROLE = "application/vnd.scmm-repositoryRole+json;v=2";
+const CONTENT_TYPE_ROLE = 'application/vnd.scmm-repositoryRole+json;v=2';
 
 // fetch roles
 export function fetchRolesPending(): Action {
   return {
-    type: FETCH_ROLES_PENDING
+    type: FETCH_ROLES_PENDING,
   };
 }
 
 export function fetchRolesSuccess(roles: any): Action {
   return {
     type: FETCH_ROLES_SUCCESS,
-    payload: roles
+    payload: roles,
   };
 }
 
@@ -63,8 +58,8 @@ export function fetchRolesFailure(url: string, error: Error): Action {
     type: FETCH_ROLES_FAILURE,
     payload: {
       error,
-      url
-    }
+      url,
+    },
   };
 }
 
@@ -97,7 +92,7 @@ export function fetchRolePending(name: string): Action {
   return {
     type: FETCH_ROLE_PENDING,
     payload: name,
-    itemId: name
+    itemId: name,
   };
 }
 
@@ -105,7 +100,7 @@ export function fetchRoleSuccess(role: any): Action {
   return {
     type: FETCH_ROLE_SUCCESS,
     payload: role,
-    itemId: role.name
+    itemId: role.name,
   };
 }
 
@@ -114,9 +109,9 @@ export function fetchRoleFailure(name: string, error: Error): Action {
     type: FETCH_ROLE_FAILURE,
     payload: {
       name,
-      error
+      error,
     },
-    itemId: name
+    itemId: name,
   };
 }
 
@@ -138,7 +133,7 @@ function fetchRole(link: string, name: string) {
 }
 
 export function fetchRoleByName(link: string, name: string) {
-  const roleUrl = link.endsWith("/") ? link + name : link + "/" + name;
+  const roleUrl = link.endsWith('/') ? link + name : link + '/' + name;
   return fetchRole(roleUrl, name);
 }
 
@@ -150,33 +145,33 @@ export function fetchRoleByLink(role: RepositoryRole) {
 export function createRolePending(role: RepositoryRole): Action {
   return {
     type: CREATE_ROLE_PENDING,
-    role
+    role,
   };
 }
 
 export function createRoleSuccess(): Action {
   return {
-    type: CREATE_ROLE_SUCCESS
+    type: CREATE_ROLE_SUCCESS,
   };
 }
 
 export function createRoleFailure(error: Error): Action {
   return {
     type: CREATE_ROLE_FAILURE,
-    payload: error
+    payload: error,
   };
 }
 
 export function createRoleReset() {
   return {
-    type: CREATE_ROLE_RESET
+    type: CREATE_ROLE_RESET,
   };
 }
 
 export function createRole(
   link: string,
   role: RepositoryRole,
-  callback?: () => void
+  callback?: () => void,
 ) {
   return function(dispatch: Dispatch) {
     dispatch(createRolePending(role));
@@ -195,21 +190,21 @@ export function createRole(
 //fetch verbs
 export function fetchVerbsPending(): Action {
   return {
-    type: FETCH_VERBS_PENDING
+    type: FETCH_VERBS_PENDING,
   };
 }
 
 export function fetchVerbsSuccess(verbs: any): Action {
   return {
     type: FETCH_VERBS_SUCCESS,
-    payload: verbs
+    payload: verbs,
   };
 }
 
 export function fetchVerbsFailure(error: Error): Action {
   return {
     type: FETCH_VERBS_FAILURE,
-    payload: error
+    payload: error,
   };
 }
 
@@ -234,7 +229,10 @@ function verbReducer(state: any = {}, action: any = {}) {
   switch (action.type) {
     case FETCH_VERBS_SUCCESS:
       const verbs = action.payload.verbs;
-      return { ...state, verbs };
+      return {
+        ...state,
+        verbs,
+      };
     default:
       return state;
   }
@@ -245,7 +243,7 @@ export function modifyRolePending(role: RepositoryRole): Action {
   return {
     type: MODIFY_ROLE_PENDING,
     payload: role,
-    itemId: role.name
+    itemId: role.name,
   };
 }
 
@@ -253,7 +251,7 @@ export function modifyRoleSuccess(role: RepositoryRole): Action {
   return {
     type: MODIFY_ROLE_SUCCESS,
     payload: role,
-    itemId: role.name
+    itemId: role.name,
   };
 }
 
@@ -262,16 +260,16 @@ export function modifyRoleFailure(role: RepositoryRole, error: Error): Action {
     type: MODIFY_ROLE_FAILURE,
     payload: {
       error,
-      role
+      role,
     },
-    itemId: role.name
+    itemId: role.name,
   };
 }
 
 export function modifyRoleReset(role: RepositoryRole): Action {
   return {
     type: MODIFY_ROLE_RESET,
-    itemId: role.name
+    itemId: role.name,
   };
 }
 
@@ -300,7 +298,7 @@ export function deleteRolePending(role: RepositoryRole): Action {
   return {
     type: DELETE_ROLE_PENDING,
     payload: role,
-    itemId: role.name
+    itemId: role.name,
   };
 }
 
@@ -308,7 +306,7 @@ export function deleteRoleSuccess(role: RepositoryRole): Action {
   return {
     type: DELETE_ROLE_SUCCESS,
     payload: role,
-    itemId: role.name
+    itemId: role.name,
   };
 }
 
@@ -317,9 +315,9 @@ export function deleteRoleFailure(role: RepositoryRole, error: Error): Action {
     type: DELETE_ROLE_FAILURE,
     payload: {
       error,
-      role
+      role,
     },
-    itemId: role.name
+    itemId: role.name,
   };
 }
 
@@ -343,7 +341,7 @@ export function deleteRole(role: RepositoryRole, callback?: () => void) {
 function extractRolesByNames(
   roles: RepositoryRole[],
   roleNames: string[],
-  oldRolesByNames: Object
+  oldRolesByNames: object,
 ) {
   const rolesByNames = {};
 
@@ -376,7 +374,7 @@ function deleteRoleInEntries(roles: [], roleName: string) {
 const reducerByName = (state: any, rolename: string, newRoleState: any) => {
   return {
     ...state,
-    [rolename]: newRoleState
+    [rolename]: newRoleState,
   };
 };
 
@@ -392,19 +390,19 @@ function listReducer(state: any = {}, action: any = {}) {
           roleCreatePermission: !!action.payload._links.create,
           page: action.payload.page,
           pageTotal: action.payload.pageTotal,
-          _links: action.payload._links
-        }
+          _links: action.payload._links,
+        },
       };
 
     // Delete single role actions
     case DELETE_ROLE_SUCCESS:
       const newRoleEntries = deleteRoleInEntries(
         state.entries,
-        action.payload.name
+        action.payload.name,
       );
       return {
         ...state,
-        entries: newRoleEntries
+        entries: newRoleEntries,
       };
     default:
       return state;
@@ -419,7 +417,7 @@ function byNamesReducer(state: any = {}, action: any = {}) {
       const roleNames = roles.map(role => role.name);
       const byNames = extractRolesByNames(roles, roleNames, state.byNames);
       return {
-        ...byNames
+        ...byNames,
       };
 
     // Fetch single role actions
@@ -437,17 +435,17 @@ function byNamesReducer(state: any = {}, action: any = {}) {
 export default combineReducers({
   list: listReducer,
   byNames: byNamesReducer,
-  verbs: verbReducer
+  verbs: verbReducer,
 });
 
 // selectors
-const selectList = (state: Object) => {
+const selectList = (state: object) => {
   if (state.roles && state.roles.list) {
     return state.roles.list;
   }
   return {};
 };
-const selectListEntry = (state: Object): Object => {
+const selectListEntry = (state: object): object => {
   const list = selectList(state);
   if (list.entry) {
     return list.entry;
@@ -455,15 +453,15 @@ const selectListEntry = (state: Object): Object => {
   return {};
 };
 
-export const selectListAsCollection = (state: Object): PagedCollection => {
+export const selectListAsCollection = (state: object): PagedCollection => {
   return selectListEntry(state);
 };
 
-export const isPermittedToCreateRoles = (state: Object): boolean => {
+export const isPermittedToCreateRoles = (state: object): boolean => {
   return !!selectListEntry(state).roleCreatePermission;
 };
 
-export function getRolesFromState(state: Object) {
+export function getRolesFromState(state: object) {
   const roleNames = selectList(state).entries;
   if (!roleNames) {
     return null;
@@ -477,66 +475,66 @@ export function getRolesFromState(state: Object) {
   return roleEntries;
 }
 
-export function getRoleCreateLink(state: Object) {
+export function getRoleCreateLink(state: object) {
   if (state && state.list && state.list._links && state.list._links.create) {
     return state.list._links.create.href;
   }
 }
 
-export function getVerbsFromState(state: Object) {
+export function getVerbsFromState(state: object) {
   return state.roles.verbs.verbs;
 }
 
-export function isFetchRolesPending(state: Object) {
+export function isFetchRolesPending(state: object) {
   return isPending(state, FETCH_ROLES);
 }
 
-export function getFetchRolesFailure(state: Object) {
+export function getFetchRolesFailure(state: object) {
   return getFailure(state, FETCH_ROLES);
 }
 
-export function isFetchVerbsPending(state: Object) {
+export function isFetchVerbsPending(state: object) {
   return isPending(state, FETCH_VERBS);
 }
 
-export function getFetchVerbsFailure(state: Object) {
+export function getFetchVerbsFailure(state: object) {
   return getFailure(state, FETCH_VERBS);
 }
 
-export function isCreateRolePending(state: Object) {
+export function isCreateRolePending(state: object) {
   return isPending(state, CREATE_ROLE);
 }
 
-export function getCreateRoleFailure(state: Object) {
+export function getCreateRoleFailure(state: object) {
   return getFailure(state, CREATE_ROLE);
 }
 
-export function getRoleByName(state: Object, name: string) {
+export function getRoleByName(state: object, name: string) {
   if (state.roles && state.roles.byNames) {
     return state.roles.byNames[name];
   }
 }
 
-export function isFetchRolePending(state: Object, name: string) {
+export function isFetchRolePending(state: object, name: string) {
   return isPending(state, FETCH_ROLE, name);
 }
 
-export function getFetchRoleFailure(state: Object, name: string) {
+export function getFetchRoleFailure(state: object, name: string) {
   return getFailure(state, FETCH_ROLE, name);
 }
 
-export function isModifyRolePending(state: Object, name: string) {
+export function isModifyRolePending(state: object, name: string) {
   return isPending(state, MODIFY_ROLE, name);
 }
 
-export function getModifyRoleFailure(state: Object, name: string) {
+export function getModifyRoleFailure(state: object, name: string) {
   return getFailure(state, MODIFY_ROLE, name);
 }
 
-export function isDeleteRolePending(state: Object, name: string) {
+export function isDeleteRolePending(state: object, name: string) {
   return isPending(state, DELETE_ROLE, name);
 }
 
-export function getDeleteRoleFailure(state: Object, name: string) {
+export function getDeleteRoleFailure(state: object, name: string) {
   return getFailure(state, DELETE_ROLE, name);
 }