Transform JSX components to TSX (#755)

* color picker types
* Import
* SetupAssistant
* Services & appear
* ServiceWebView
* SettingsLayout
* ImportantScreen
* WorkspaceDrawer
* SetupAssistant

* chore: update vscode settings
* chore: removed stale Import screen component & its tree

2 files changed, 33 insertions, 200 deletions

diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js
deleted file mode 100644
index b897116e2..000000000
--- a/src/components/auth/Import.js
+++ /dev/null
@@ -1,168 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
-import { defineMessages, injectIntl } from 'react-intl';
-import { Link } from 'react-router-dom';
-import classnames from 'classnames';
-import Form from '../../lib/Form';
-import Toggle from '../ui/toggle';
-import Button from '../ui/button';
-import { H1 } from '../ui/headline';
-
-const messages = defineMessages({
-  headline: {
-    id: 'import.headline',
-    defaultMessage: 'Import your Ferdium 4 services',
-  },
-  notSupportedHeadline: {
-    id: 'import.notSupportedHeadline',
-    defaultMessage: 'Services not yet supported in Ferdium 5',
-  },
-  submitButtonLabel: {
-    id: 'import.submit.label',
-    defaultMessage: 'Import {count} services',
-  },
-  skipButtonLabel: {
-    id: 'import.skip.label',
-    defaultMessage: 'I want to add services manually',
-  },
-});
-
-class Import extends Component {
-  static propTypes = {
-    services: MobxPropTypes.arrayOrObservableArray.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    isSubmitting: PropTypes.bool.isRequired,
-    inviteRoute: PropTypes.string.isRequired,
-  };
-
-  componentDidMount() {
-    const config = {
-      fields: {
-        import: [
-          ...this.props.services
-            .filter(s => s.recipe)
-            .map(s => ({
-              fields: {
-                add: {
-                  default: true,
-                  options: s,
-                },
-              },
-            })),
-        ],
-      },
-    };
-
-    this.form = new Form(config, this.props.intl);
-  }
-
-  submit(e) {
-    const { services } = this.props;
-    e.preventDefault();
-    this.form.submit({
-      onSuccess: form => {
-        const servicesImport = form
-          .values()
-          .import.map(
-            (value, i) => !value.add || services.filter(s => s.recipe)[i],
-          )
-          .filter(s => typeof s !== 'boolean');
-
-        this.props.onSubmit({ services: servicesImport });
-      },
-      onError: () => {},
-    });
-  }
-
-  render() {
-    const { intl } = this.props;
-    const { services, isSubmitting, inviteRoute } = this.props;
-
-    const availableServices = services.filter(s => s.recipe);
-    const unavailableServices = services.filter(s => !s.recipe);
-
-    return (
-      <div className="auth__scroll-container">
-        <div className="auth__container auth__container--signup">
-          <form
-            className="franz-form auth__form"
-            onSubmit={e => this.submit(e)}
-          >
-            <img src="./assets/images/logo.svg" className="auth__logo" alt="" />
-            <H1>{intl.formatMessage(messages.headline)}</H1>
-            <table className="service-table available-services">
-              <tbody>
-                {this.form.$('import').map((service, i) => (
-                  <tr key={service.id} className="service-table__row">
-                    <td className="service-table__toggle">
-                      <Toggle {...service.$('add').bind()} showLabel={false} />
-                    </td>
-                    <td className="service-table__column-icon">
-                      <img
-                        src={
-                          availableServices[i].custom_icon ||
-                          availableServices[i].recipe.icons.svg
-                        }
-                        className={classnames({
-                          'service-table__icon': true,
-                          'has-custom-icon': availableServices[i].custom_icon,
-                        })}
-                        alt=""
-                      />
-                    </td>
-                    <td className="service-table__column-name">
-                      {availableServices[i].name !== ''
-                        ? availableServices[i].name
-                        : availableServices[i].recipe.name}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-            {unavailableServices.length > 0 && (
-              <div className="unavailable-services">
-                <strong>
-                  {intl.formatMessage(messages.notSupportedHeadline)}
-                </strong>
-                <p>
-                  {services
-                    .filter(s => !s.recipe)
-                    .map((service, i) => (
-                      <span key={service.id}>
-                        {service.name !== '' ? service.name : service.service}
-                        {unavailableServices.length > i + 1 ? ', ' : ''}
-                      </span>
-                    ))}
-                </p>
-              </div>
-            )}
-
-            {isSubmitting ? (
-              <Button
-                className="auth__button is-loading"
-                label={`${intl.formatMessage(messages.submitButtonLabel)} ...`}
-                loaded={false}
-                disabled
-              />
-            ) : (
-              <Button
-                type="submit"
-                className="auth__button"
-                label={intl.formatMessage(messages.submitButtonLabel)}
-              />
-            )}
-            <Link
-              to={inviteRoute}
-              className="franz-form__button franz-form__button--secondary auth__button auth__button--skip"
-            >
-              {intl.formatMessage(messages.skipButtonLabel)}
-            </Link>
-          </form>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default injectIntl(observer(Import));
diff --git a/src/components/auth/SetupAssistant.jsx b/src/components/auth/SetupAssistant.tsx
index 8d15e36d1..c5fb79919 100644
--- a/src/components/auth/SetupAssistant.jsx
+++ b/src/components/auth/SetupAssistant.tsx
@@ -1,10 +1,8 @@
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { defineMessages, injectIntl } from 'react-intl';
-import injectSheet from 'react-jss';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import withStyles, { WithStylesProps } from 'react-jss';
 import classnames from 'classnames';
-
 import Input from '../ui/input/index';
 import Button from '../ui/button';
 import Badge from '../ui/badge';
@@ -12,7 +10,6 @@ import Modal from '../ui/Modal';
 import Infobox from '../ui/Infobox';
 import Appear from '../ui/effects/Appear';
 import globalMessages from '../../i18n/globalMessages';
-
 import { CDN_URL } from '../../config';
 import { H1, H2 } from '../ui/headline';
 
@@ -42,11 +39,10 @@ const messages = defineMessages({
   },
 });
 
-let transition = 'none';
-
-if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
-  transition = 'all 0.25s';
-}
+const transition =
+  window && window.matchMedia('(prefers-reduced-motion: no-preference)')
+    ? 'all 0.25s'
+    : 'none';
 
 const styles = theme => ({
   root: {
@@ -136,39 +132,41 @@ const styles = theme => ({
   },
 });
 
-class SetupAssistant extends Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    isInviteSuccessful: PropTypes.bool,
-    services: PropTypes.object.isRequired,
-    isSettingUpServices: PropTypes.bool.isRequired,
-  };
+interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps {
+  onSubmit: (...args: any[]) => void;
+  isInviteSuccessful?: boolean;
+  services: any; //  TODO - [TS DEBT] check legacy services type
+  isSettingUpServices: boolean;
+}
 
-  static defaultProps = {
-    isInviteSuccessful: false,
-  };
+interface IState {
+  services: any[];
+  isSlackModalOpen: boolean;
+  slackWorkspace: string;
+  showSuccessInfo: boolean;
+}
 
-  constructor() {
-    super();
+@observer
+class SetupAssistant extends Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props);
 
     this.state = {
       services: [],
       isSlackModalOpen: false,
+      showSuccessInfo: false,
       slackWorkspace: '',
     };
   }
 
-  slackWorkspaceHandler() {
+  slackWorkspaceHandler(): void {
     const { slackWorkspace = '', services } = this.state;
-
     const sanitizedWorkspace = slackWorkspace
       .trim()
       .replace(/^https?:\/\//, '');
 
     if (sanitizedWorkspace) {
       const index = services.findIndex(s => s.id === SLACK_ID);
-
       if (index === -1) {
         const newServices = services;
         newServices.push({ id: SLACK_ID, team: sanitizedWorkspace });
@@ -183,13 +181,13 @@ class SetupAssistant extends Component {
   }
 
   render() {
-    const { intl } = this.props;
     const {
       classes,
-      isInviteSuccessful,
+      isInviteSuccessful = false,
       onSubmit,
       services,
       isSettingUpServices,
+      intl,
     } = this.props;
     const {
       isSlackModalOpen,
@@ -204,7 +202,7 @@ class SetupAssistant extends Component {
             <Infobox
               type="success"
               icon="checkbox-marked-circle-outline"
-              dismissable
+              dismissible
             >
               {intl.formatMessage(messages.inviteSuccessInfo)}
             </Infobox>
@@ -300,11 +298,14 @@ class SetupAssistant extends Component {
                   label={intl.formatMessage(globalMessages.save)}
                 />
                 <Button
-                  type="link"
+                  type="button"
                   buttonType="secondary"
                   label={intl.formatMessage(globalMessages.cancel)}
                   className={classes.ctaCancel}
-                  onClick={() => this.setState({ slackWorkspace: '' })}
+                  onClick={e => {
+                    e.preventDefault();
+                    this.setState({ slackWorkspace: '' });
+                  }}
                 />
               </div>
             </form>
@@ -332,5 +333,5 @@ class SetupAssistant extends Component {
 }
 
 export default injectIntl(
-  injectSheet(styles, { injectTheme: true })(observer(SetupAssistant)),
+  withStyles(styles, { injectTheme: true })(SetupAssistant),
 );