use reflow to migrate from flow to typescript

scm-ui/ui-components/src/config/Configuration.tsx

@@ -1,37 +1,36 @@
-//@flow
-import React from "react";
-import { translate } from "react-i18next";
-import type { Links } from "@scm-manager/ui-types";
-import { apiClient, SubmitButton, Loading, ErrorNotification } from "../";
+import React from 'react';
+import { translate } from 'react-i18next';
+import { Links } from '@scm-manager/ui-types';
+import { apiClient, SubmitButton, Loading, ErrorNotification } from '../';
 
 type RenderProps = {
-  readOnly: boolean,
-  initialConfiguration: ConfigurationType,
-  onConfigurationChange: (ConfigurationType, boolean) => void
+  readOnly: boolean;
+  initialConfiguration: ConfigurationType;
+  onConfigurationChange: (p1: ConfigurationType, p2: boolean) => void;
 };
 
 type Props = {
-  link: string,
-  render: (props: RenderProps) => any, // ???
+  link: string;
+  render: (props: RenderProps) => any; // ???
 
   // context props
-  t: string => string
+  t: (p: string) => string;
 };
 
 type ConfigurationType = {
-  _links: Links
-} & Object;
+  _links: Links;
+} & object;
 
 type State = {
-  error?: Error,
-  fetching: boolean,
-  modifying: boolean,
-  contentType?: string,
-  configChanged: boolean,
+  error?: Error;
+  fetching: boolean;
+  modifying: boolean;
+  contentType?: string;
+  configChanged: boolean;
 
-  configuration?: ConfigurationType,
-  modifiedConfiguration?: ConfigurationType,
-  valid: boolean
+  configuration?: ConfigurationType;
+  modifiedConfiguration?: ConfigurationType;
+  valid: boolean;
 };
 
 /**
@@ -45,7 +44,7 @@ class Configuration extends React.Component<Props, State> {
       fetching: true,
       modifying: false,
       configChanged: false,
-      valid: false
+      valid: false,
     };
   }
 
@@ -61,23 +60,23 @@ class Configuration extends React.Component<Props, State> {
   }
 
   captureContentType = (response: Response) => {
-    const contentType = response.headers.get("Content-Type");
+    const contentType = response.headers.get('Content-Type');
     this.setState({
-      contentType
+      contentType,
     });
     return response;
   };
 
   getContentType = (): string => {
     const { contentType } = this.state;
-    return contentType ? contentType : "application/json";
+    return contentType ? contentType : 'application/json';
   };
 
   handleError = (error: Error) => {
     this.setState({
       error,
       fetching: false,
-      modifying: false
+      modifying: false,
     });
   };
 
@@ -85,11 +84,11 @@ class Configuration extends React.Component<Props, State> {
     this.setState({
       configuration,
       fetching: false,
-      error: undefined
+      error: undefined,
     });
   };
 
-  getModificationUrl = (): ?string => {
+  getModificationUrl = (): string | null | undefined => {
     const { configuration } = this.state;
     if (configuration) {
       const links = configuration._links;
@@ -107,14 +106,16 @@ class Configuration extends React.Component<Props, State> {
   configurationChanged = (configuration: ConfigurationType, valid: boolean) => {
     this.setState({
       modifiedConfiguration: configuration,
-      valid
+      valid,
     });
   };
 
   modifyConfiguration = (event: Event) => {
     event.preventDefault();
 
-    this.setState({ modifying: true });
+    this.setState({
+      modifying: true,
+    });
 
     const { modifiedConfiguration } = this.state;
 
@@ -122,9 +123,15 @@ class Configuration extends React.Component<Props, State> {
       .put(
         this.getModificationUrl(),
         modifiedConfiguration,
-        this.getContentType()
+        this.getContentType(),
+      )
+      .then(() =>
+        this.setState({
+          modifying: false,
+          configChanged: true,
+          valid: false,
+        }),
       )
-      .then(() => this.setState({ modifying: false, configChanged: true, valid: false }))
       .catch(this.handleError);
   };
 
@@ -134,9 +141,13 @@ class Configuration 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>
       );
     }
@@ -157,7 +168,7 @@ class Configuration extends React.Component<Props, State> {
       const renderProps: RenderProps = {
         readOnly,
         initialConfiguration: configuration,
-        onConfigurationChange: this.configurationChanged
+        onConfigurationChange: this.configurationChanged,
       };
 
       return (
@@ -167,7 +178,7 @@ class Configuration extends React.Component<Props, State> {
             {this.props.render(renderProps)}
             <hr />
             <SubmitButton
-              label={t("config.form.submit")}
+              label={t('config.form.submit')}
               disabled={!valid || readOnly}
               loading={modifying}
             />
@@ -178,4 +189,4 @@ class Configuration extends React.Component<Props, State> {
   }
 }
 
-export default translate("config")(Configuration);
+export default translate('config')(Configuration);

scm-ui/ui-components/src/config/ConfigurationBinder.js

@@ -1,104 +0,0 @@
-// @flow
-import React from "react";
-import { binder } from "@scm-manager/ui-extensions";
-import { NavLink } from "../navigation";
-import { Route } from "react-router-dom";
-import { translate } from "react-i18next";
-
-class ConfigurationBinder {
-
-  i18nNamespace: string = "plugins";
-
-  navLink(to: string, labelI18nKey: string, t: any){
-    return <NavLink to={to} label={t(labelI18nKey)} />;
-  }
-
-  route(path: string, Component: any){
-    return <Route path={path}
-                  render={() => Component}
-                  exact/>;
-  }
-
-  bindGlobal(to: string, labelI18nKey: string, linkName: string, ConfigurationComponent: any) {
-
-    // create predicate based on the link name of the index resource
-    // if the linkname is not available, the navigation link and the route are not bound to the extension points
-    const configPredicate = (props: Object) => {
-      return props.links && props.links[linkName];
-    };
-
-    // create NavigationLink with translated label
-    const ConfigNavLink = translate(this.i18nNamespace)(({t}) => {
-      return this.navLink("/admin/settings" + to, labelI18nKey, t);
-    });
-
-    // bind navigation link to extension point
-    binder.bind("admin.setting", ConfigNavLink, configPredicate);
-
-    // route for global configuration, passes the link from the index resource to component
-    const ConfigRoute = ({ url, links, ...additionalProps }) => {
-      const link = links[linkName].href;
-      return this.route(url + "/settings" + to, <ConfigurationComponent link={link} {...additionalProps} />);
-    };
-
-    // bind config route to extension point
-    binder.bind("admin.route", ConfigRoute, configPredicate);
-  }
-
-  bindRepository(to: string, labelI18nKey: string, linkName: string, RepositoryComponent: any) {
-
-    // create predicate based on the link name of the current repository route
-    // if the linkname is not available, the navigation link and the route are not bound to the extension points
-    const repoPredicate = (props: Object) => {
-      return props.repository && props.repository._links && props.repository._links[linkName];
-    };
-
-    // create NavigationLink with translated label
-    const RepoNavLink = translate(this.i18nNamespace)(({t, url}) => {
-      return this.navLink(url + to, labelI18nKey, t);
-    });
-
-    // bind navigation link to extension point
-    binder.bind("repository.navigation", RepoNavLink, repoPredicate);
-
-
-    // route for global configuration, passes the current repository to component
-    const RepoRoute = ({url, repository, ...additionalProps}) => {
-      const link = repository._links[linkName].href;
-      return this.route(url + to, <RepositoryComponent repository={repository} link={link} {...additionalProps}/>);
-    };
-
-    // bind config route to extension point
-    binder.bind("repository.route", RepoRoute, repoPredicate);
-  }
-
-  bindRepositorySetting(to: string, labelI18nKey: string, linkName: string, RepositoryComponent: any) {
-
-    // create predicate based on the link name of the current repository route
-    // if the linkname is not available, the navigation link and the route are not bound to the extension points
-    const repoPredicate = (props: Object) => {
-      return props.repository && props.repository._links && props.repository._links[linkName];
-    };
-
-    // create NavigationLink with translated label
-    const RepoNavLink = translate(this.i18nNamespace)(({t, url}) => {
-      return this.navLink(url + "/settings" + to, labelI18nKey, t);
-    });
-
-    // bind navigation link to extension point
-    binder.bind("repository.setting", RepoNavLink, repoPredicate);
-
-
-    // route for global configuration, passes the current repository to component
-    const RepoRoute = ({url, repository, ...additionalProps}) => {
-      const link = repository._links[linkName].href;
-      return this.route(url + "/settings" + to, <RepositoryComponent repository={repository} link={link} {...additionalProps}/>);
-    };
-
-    // bind config route to extension point
-    binder.bind("repository.route", RepoRoute, repoPredicate);
-  }
-
-}
-
-export default new ConfigurationBinder();

scm-ui/ui-components/src/config/ConfigurationBinder.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { binder } from '@scm-manager/ui-extensions';
+import { NavLink } from '../navigation';
+import { Route } from 'react-router-dom';
+import { translate } from 'react-i18next';
+
+class ConfigurationBinder {
+  i18nNamespace: string = 'plugins';
+
+  navLink(to: string, labelI18nKey: string, t: any) {
+    return <NavLink to={to} label={t(labelI18nKey)} />;
+  }
+
+  route(path: string, Component: any) {
+    return <Route path={path} render={() => Component} exact />;
+  }
+
+  bindGlobal(
+    to: string,
+    labelI18nKey: string,
+    linkName: string,
+    ConfigurationComponent: any,
+  ) {
+    // create predicate based on the link name of the index resource
+    // if the linkname is not available, the navigation link and the route are not bound to the extension points
+    const configPredicate = (props: object) => {
+      return props.links && props.links[linkName];
+    };
+
+    // create NavigationLink with translated label
+    const ConfigNavLink = translate(this.i18nNamespace)(({ t }) => {
+      return this.navLink('/admin/settings' + to, labelI18nKey, t);
+    });
+
+    // bind navigation link to extension point
+    binder.bind('admin.setting', ConfigNavLink, configPredicate);
+
+    // route for global configuration, passes the link from the index resource to component
+    const ConfigRoute = ({ url, links, ...additionalProps }) => {
+      const link = links[linkName].href;
+      return this.route(
+        url + '/settings' + to,
+        <ConfigurationComponent link={link} {...additionalProps} />,
+      );
+    };
+
+    // bind config route to extension point
+    binder.bind('admin.route', ConfigRoute, configPredicate);
+  }
+
+  bindRepository(
+    to: string,
+    labelI18nKey: string,
+    linkName: string,
+    RepositoryComponent: any,
+  ) {
+    // create predicate based on the link name of the current repository route
+    // if the linkname is not available, the navigation link and the route are not bound to the extension points
+    const repoPredicate = (props: object) => {
+      return (
+        props.repository &&
+        props.repository._links &&
+        props.repository._links[linkName]
+      );
+    };
+
+    // create NavigationLink with translated label
+    const RepoNavLink = translate(this.i18nNamespace)(({ t, url }) => {
+      return this.navLink(url + to, labelI18nKey, t);
+    });
+
+    // bind navigation link to extension point
+    binder.bind('repository.navigation', RepoNavLink, repoPredicate);
+
+    // route for global configuration, passes the current repository to component
+    const RepoRoute = ({ url, repository, ...additionalProps }) => {
+      const link = repository._links[linkName].href;
+      return this.route(
+        url + to,
+        <RepositoryComponent
+          repository={repository}
+          link={link}
+          {...additionalProps}
+        />,
+      );
+    };
+
+    // bind config route to extension point
+    binder.bind('repository.route', RepoRoute, repoPredicate);
+  }
+
+  bindRepositorySetting(
+    to: string,
+    labelI18nKey: string,
+    linkName: string,
+    RepositoryComponent: any,
+  ) {
+    // create predicate based on the link name of the current repository route
+    // if the linkname is not available, the navigation link and the route are not bound to the extension points
+    const repoPredicate = (props: object) => {
+      return (
+        props.repository &&
+        props.repository._links &&
+        props.repository._links[linkName]
+      );
+    };
+
+    // create NavigationLink with translated label
+    const RepoNavLink = translate(this.i18nNamespace)(({ t, url }) => {
+      return this.navLink(url + '/settings' + to, labelI18nKey, t);
+    });
+
+    // bind navigation link to extension point
+    binder.bind('repository.setting', RepoNavLink, repoPredicate);
+
+    // route for global configuration, passes the current repository to component
+    const RepoRoute = ({ url, repository, ...additionalProps }) => {
+      const link = repository._links[linkName].href;
+      return this.route(
+        url + '/settings' + to,
+        <RepositoryComponent
+          repository={repository}
+          link={link}
+          {...additionalProps}
+        />,
+      );
+    };
+
+    // bind config route to extension point
+    binder.bind('repository.route', RepoRoute, repoPredicate);
+  }
+}
+
+export default new ConfigurationBinder();

scm-ui/ui-components/src/config/index.js

@@ -1,3 +0,0 @@
-// @flow
-export { default as ConfigurationBinder } from "./ConfigurationBinder";
-export { default as Configuration } from "./Configuration";

scm-ui/ui-components/src/config/index.ts

@@ -0,0 +1,2 @@
+export { default as ConfigurationBinder } from './ConfigurationBinder';
+export { default as Configuration } from './Configuration';