use reflow to migrate from flow to typescript

scm-ui/ui-webapp/src/permissions/components/PermissionCheckbox.tsx

@@ -1,34 +1,32 @@
-// @flow
-
-import React from "react";
-import { translate } from "react-i18next";
-import { Checkbox } from "@scm-manager/ui-components";
+import React from 'react';
+import { translate } from 'react-i18next';
+import { Checkbox } from '@scm-manager/ui-components';
 
 type Props = {
-  permission: string,
-  checked: boolean,
-  onChange: (value: boolean, name: string) => void,
-  disabled: boolean,
-  t: string => string
+  permission: string;
+  checked: boolean;
+  onChange: (value: boolean, name: string) => void;
+  disabled: boolean;
+  t: (p: string) => string;
 };
 
 class PermissionCheckbox extends React.Component<Props> {
   render() {
     const { t, permission, checked, onChange, disabled } = this.props;
-    const key = permission.split(":").join(".");
+    const key = permission.split(':').join('.');
     return (
       <Checkbox
         name={permission}
         label={this.translateOrDefault(
-          "permissions." + key + ".displayName",
-          key
+          'permissions.' + key + '.displayName',
+          key,
         )}
         checked={checked}
         onChange={onChange}
         disabled={disabled}
         helpText={this.translateOrDefault(
-          "permissions." + key + ".description",
-          t("permissions.unknown")
+          'permissions.' + key + '.description',
+          t('permissions.unknown'),
         )}
       />
     );
@@ -44,4 +42,4 @@ class PermissionCheckbox extends React.Component<Props> {
   };
 }
 
-export default translate("plugins")(PermissionCheckbox);
+export default translate('plugins')(PermissionCheckbox);

scm-ui/ui-webapp/src/permissions/components/SetPermissions.tsx

@@ -1,34 +1,35 @@
-// @flow
-import React from "react";
-import { connect } from "react-redux";
-import { translate } from "react-i18next";
-import classNames from "classnames";
-import styled from "styled-components";
-import type { Link } from "@scm-manager/ui-types";
+import React from 'react';
+import { connect } from 'react-redux';
+import { translate } from 'react-i18next';
+import classNames from 'classnames';
+import styled from 'styled-components';
+import { Link } from '@scm-manager/ui-types';
 import {
   Notification,
   ErrorNotification,
-  SubmitButton
-} from "@scm-manager/ui-components";
-import { getLink } from "../../modules/indexResource";
-import { loadPermissionsForEntity, setPermissions } from "./handlePermissions";
-import PermissionCheckbox from "./PermissionCheckbox";
+  SubmitButton,
+} from '@scm-manager/ui-components';
+import { getLink } from '../../modules/indexResource';
+import { loadPermissionsForEntity, setPermissions } from './handlePermissions';
+import PermissionCheckbox from './PermissionCheckbox';
 
 type Props = {
-  availablePermissionLink: string,
-  selectedPermissionsLink: Link,
+  availablePermissionLink: string;
+  selectedPermissionsLink: Link;
 
   // context props
-  t: string => string
+  t: (p: string) => string;
 };
 
 type State = {
-  permissions: { [string]: boolean },
-  loading: boolean,
-  error?: Error,
-  permissionsChanged: boolean,
-  permissionsSubmitted: boolean,
-  overwritePermissionsLink?: Link
+  permissions: {
+    [key: string]: boolean;
+  };
+  loading: boolean;
+  error?: Error;
+  permissionsChanged: boolean;
+  permissionsSubmitted: boolean;
+  overwritePermissionsLink?: Link;
 };
 
 const PermissionsWrapper = styled.div`
@@ -50,20 +51,20 @@ class SetPermissions extends React.Component<Props, State> {
       permissionsChanged: false,
       permissionsSubmitted: false,
       modifiable: false,
-      overwritePermissionsLink: undefined
+      overwritePermissionsLink: undefined,
     };
   }
 
   setLoadingState = () => {
     this.setState({
-      loading: true
+      loading: true,
     });
   };
 
   setErrorState = (error: Error) => {
     this.setState({
       error: error,
-      loading: false
+      loading: false,
     });
   };
 
@@ -72,20 +73,20 @@ class SetPermissions extends React.Component<Props, State> {
       loading: false,
       error: undefined,
       permissionsSubmitted: true,
-      permissionsChanged: false
+      permissionsChanged: false,
     });
   };
 
   componentDidMount(): void {
     loadPermissionsForEntity(
       this.props.availablePermissionLink,
-      this.props.selectedPermissionsLink.href
+      this.props.selectedPermissionsLink.href,
     ).then(response => {
       const { permissions, overwriteLink } = response;
       this.setState({
         permissions: permissions,
         loading: false,
-        overwritePermissionsLink: overwriteLink
+        overwritePermissionsLink: overwriteLink,
       });
     });
   }
@@ -101,7 +102,7 @@ class SetPermissions extends React.Component<Props, State> {
       if (this.state.overwritePermissionsLink) {
         setPermissions(
           this.state.overwritePermissionsLink.href,
-          selectedPermissions
+          selectedPermissions,
         )
           .then(result => {
             this.setSuccessfulState();
@@ -122,8 +123,8 @@ class SetPermissions extends React.Component<Props, State> {
     if (permissionsSubmitted) {
       message = (
         <Notification
-          type={"success"}
-          children={t("setPermissions.setPermissionsSuccessful")}
+          type={'success'}
+          children={t('setPermissions.setPermissionsSuccessful')}
           onClose={() => this.onClose()}
         />
       );
@@ -138,7 +139,7 @@ class SetPermissions extends React.Component<Props, State> {
         <SubmitButton
           disabled={!this.state.permissionsChanged}
           loading={loading}
-          label={t("setPermissions.button")}
+          label={t('setPermissions.button')}
         />
       </form>
     );
@@ -149,7 +150,7 @@ class SetPermissions extends React.Component<Props, State> {
     const permissionArray = Object.keys(permissions);
     return (
       <div className="columns">
-        <PermissionsWrapper className={classNames("column", "is-half")}>
+        <PermissionsWrapper className={classNames('column', 'is-half')}>
           {permissionArray.slice(0, permissionArray.length / 2 + 1).map(p => (
             <PermissionCheckbox
               key={p}
@@ -160,7 +161,7 @@ class SetPermissions extends React.Component<Props, State> {
             />
           ))}
         </PermissionsWrapper>
-        <PermissionsWrapper className={classNames("column", "is-half")}>
+        <PermissionsWrapper className={classNames('column', 'is-half')}>
           {permissionArray
             .slice(permissionArray.length / 2 + 1, permissionArray.length)
             .map(p => (
@@ -183,25 +184,25 @@ class SetPermissions extends React.Component<Props, State> {
       newPermissions[name] = value;
       return {
         permissions: newPermissions,
-        permissionsChanged: true
+        permissionsChanged: true,
       };
     });
   };
 
   onClose = () => {
     this.setState({
-      permissionsSubmitted: false
+      permissionsSubmitted: false,
     });
   };
 }
 
 const mapStateToProps = state => {
-  const availablePermissionLink = getLink(state, "permissions");
+  const availablePermissionLink = getLink(state, 'permissions');
   return {
-    availablePermissionLink
+    availablePermissionLink,
   };
 };
 
 export default connect(mapStateToProps)(
-  translate("permissions")(SetPermissions)
+  translate('permissions')(SetPermissions),
 );

scm-ui/ui-webapp/src/permissions/components/handlePermissions.test.ts

@@ -1,10 +1,9 @@
-//@flow
-import fetchMock from "fetch-mock";
-import { loadPermissionsForEntity } from "./handlePermissions";
+import fetchMock from 'fetch-mock';
+import { loadPermissionsForEntity } from './handlePermissions';
 
-describe("load permissions for entity", () => {
-  const AVAILABLE_PERMISSIONS_URL = "/permissions";
-  const USER_PERMISSIONS_URL = "/user/scmadmin/permissions";
+describe('load permissions for entity', () => {
+  const AVAILABLE_PERMISSIONS_URL = '/permissions';
+  const USER_PERMISSIONS_URL = '/user/scmadmin/permissions';
 
   const availablePermissions = `{
       "permissions": [
@@ -29,10 +28,10 @@ describe("load permissions for entity", () => {
 
   beforeEach(() => {
     fetchMock.getOnce(
-      "/api/v2" + AVAILABLE_PERMISSIONS_URL,
-      availablePermissions
+      '/api/v2' + AVAILABLE_PERMISSIONS_URL,
+      availablePermissions,
     );
-    fetchMock.getOnce("/api/v2" + USER_PERMISSIONS_URL, userPermissions);
+    fetchMock.getOnce('/api/v2' + USER_PERMISSIONS_URL, userPermissions);
   });
 
   afterEach(() => {
@@ -40,27 +39,27 @@ describe("load permissions for entity", () => {
     fetchMock.restore();
   });
 
-  it("should return permissions array", done => {
+  it('should return permissions array', done => {
     loadPermissionsForEntity(
       AVAILABLE_PERMISSIONS_URL,
-      USER_PERMISSIONS_URL
+      USER_PERMISSIONS_URL,
     ).then(result => {
       const { permissions } = result;
       expect(Object.entries(permissions).length).toBe(3);
-      expect(permissions["repository:read,pull:*"]).toBe(true);
-      expect(permissions["repository:read,pull,push:*"]).toBe(false);
-      expect(permissions["repository:*:*"]).toBe(false);
+      expect(permissions['repository:read,pull:*']).toBe(true);
+      expect(permissions['repository:read,pull,push:*']).toBe(false);
+      expect(permissions['repository:*:*']).toBe(false);
       done();
     });
   });
 
-  it("should return overwrite link", done => {
+  it('should return overwrite link', done => {
     loadPermissionsForEntity(
       AVAILABLE_PERMISSIONS_URL,
-      USER_PERMISSIONS_URL
+      USER_PERMISSIONS_URL,
     ).then(result => {
       const { overwriteLink } = result;
-      expect(overwriteLink.href).toBe("/api/v2/users/rene/permissions");
+      expect(overwriteLink.href).toBe('/api/v2/users/rene/permissions');
       done();
     });
   });

scm-ui/ui-webapp/src/permissions/components/handlePermissions.ts

@@ -1,12 +1,17 @@
-//@flow
-import { apiClient } from "@scm-manager/ui-components";
+import { apiClient } from '@scm-manager/ui-components';
 
 export const CONTENT_TYPE_PERMISSIONS =
-  "application/vnd.scmm-permissionCollection+json;v=2";
+  'application/vnd.scmm-permissionCollection+json;v=2';
 
 export function setPermissions(url: string, permissions: string[]) {
   return apiClient
-    .put(url, { permissions: permissions }, CONTENT_TYPE_PERMISSIONS)
+    .put(
+      url,
+      {
+        permissions: permissions,
+      },
+      CONTENT_TYPE_PERMISSIONS,
+    )
     .then(response => {
       return response;
     });
@@ -14,7 +19,7 @@ export function setPermissions(url: string, permissions: string[]) {
 
 export function loadPermissionsForEntity(
   availableUrl: string,
-  userUrl: string
+  userUrl: string,
 ) {
   return Promise.all([
     apiClient.get(availableUrl).then(response => {
@@ -22,12 +27,15 @@ export function loadPermissionsForEntity(
     }),
     apiClient.get(userUrl).then(response => {
       return response.json();
-    })
+    }),
   ]).then(values => {
     const [availablePermissions, checkedPermissions] = values;
     const permissions = {};
     availablePermissions.permissions.forEach(p => (permissions[p] = false));
     checkedPermissions.permissions.forEach(p => (permissions[p] = true));
-    return { permissions, overwriteLink: checkedPermissions._links.overwrite };
+    return {
+      permissions,
+      overwriteLink: checkedPermissions._links.overwrite,
+    };
   });
 }