Transfrom workspace components to ts (#775)

8 files changed, 150 insertions, 142 deletions

diff --git a/src/features/workspaces/components/CreateWorkspaceForm.js b/src/features/workspaces/components/CreateWorkspaceForm.tsx
index fac84bed0..eafe9f36a 100644
--- a/src/features/workspaces/components/CreateWorkspaceForm.js
+++ b/src/features/workspaces/components/CreateWorkspaceForm.tsx
@@ -1,9 +1,7 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component, ReactElement } from 'react';
 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 Input from '../../../components/ui/input/index';
 import Button from '../../../components/ui/button';
 import Form from '../../../lib/Form';
@@ -34,47 +32,49 @@ const styles = {
   },
 };
 
-class CreateWorkspaceForm extends Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    isSubmitting: PropTypes.bool.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-  };
+interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps {
+  isSubmitting: boolean;
+  onSubmit: (...args: any[]) => void;
+}
+
+@observer
+class CreateWorkspaceForm extends Component<IProps> {
+  form: Form;
 
-  form = (() => {
-    const { intl } = this.props;
-    return new Form({
+  constructor(props: IProps) {
+    super(props);
+
+    this.form = new Form({
       fields: {
         name: {
-          label: intl.formatMessage(messages.name),
-          placeholder: intl.formatMessage(messages.name),
+          label: this.props.intl.formatMessage(messages.name),
+          placeholder: this.props.intl.formatMessage(messages.name),
           value: '',
           validators: [required],
         },
       },
     });
-  })();
+  }
 
-  submitForm() {
-    const { form } = this;
-    form.submit({
-      onSuccess: async f => {
+  submitForm(): void {
+    this.form.submit({
+      onSuccess: async form => {
         const { onSubmit } = this.props;
-        const values = f.values();
+        const values = form.values();
         onSubmit(values);
       },
     });
   }
 
-  render() {
-    const { intl } = this.props;
-    const { classes, isSubmitting } = this.props;
+  render(): ReactElement {
+    const { classes, isSubmitting, intl } = this.props;
     const { form } = this;
+
     return (
       <div className={classes.form}>
         <Input
-          className={classes.input}
           {...form.$('name').bind()}
+          className={classes.input}
           showLabel={false}
           onEnterKey={this.submitForm.bind(this, form)}
           focus={workspaceStore.isUserAllowedToUseFeature}
@@ -93,5 +93,5 @@ class CreateWorkspaceForm extends Component {
 }
 
 export default injectIntl(
-  injectSheet(styles, { injectTheme: true })(observer(CreateWorkspaceForm)),
+  withStyles(styles, { injectTheme: true })(CreateWorkspaceForm),
 );
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.tsx
index ff4e71260..a860ac2e8 100644
--- a/src/features/workspaces/components/EditWorkspaceForm.js
+++ b/src/features/workspaces/components/EditWorkspaceForm.tsx
@@ -1,11 +1,10 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component, ReactElement } from 'react';
 import { observer } from 'mobx-react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { Link } from 'react-router-dom';
-import injectSheet from 'react-jss';
+import withStyles, { WithStylesProps } from 'react-jss';
 import Infobox from '../../../components/ui/infobox/index';
-import Input from '../../../components/ui/input/index';
+import Input from '../../../components/ui/input';
 import Button from '../../../components/ui/button';
 import Workspace from '../models/Workspace';
 import Service from '../../../models/Service';
@@ -69,30 +68,36 @@ const styles = {
   },
 };
 
-class EditWorkspaceForm extends Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    onDelete: PropTypes.func.isRequired,
-    onSave: PropTypes.func.isRequired,
-    services: PropTypes.arrayOf(PropTypes.instanceOf(Service)).isRequired,
-    workspace: PropTypes.instanceOf(Workspace).isRequired,
-    updateWorkspaceRequest: PropTypes.instanceOf(Request).isRequired,
-    deleteWorkspaceRequest: PropTypes.instanceOf(Request).isRequired,
-  };
+interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps {
+  onDelete: () => void;
+  onSave: (...args: any[]) => void;
+  services: Service[];
+  workspace: Workspace;
+  updateWorkspaceRequest: Request;
+  deleteWorkspaceRequest: Request;
+}
+
+@observer
+class EditWorkspaceForm extends Component<IProps> {
+  form: Form;
+
+  constructor(props: IProps) {
+    super(props);
 
-  form = this.prepareWorkspaceForm(this.props.workspace);
+    this.form = this.prepareWorkspaceForm(this.props.workspace);
+  }
 
-  // eslint-disable-next-line react/no-deprecated
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps): void {
     const { workspace } = this.props;
     if (workspace.id !== nextProps.workspace.id) {
       this.form = this.prepareWorkspaceForm(nextProps.workspace);
     }
   }
 
-  prepareWorkspaceForm(workspace) {
+  prepareWorkspaceForm(workspace: Workspace): Form {
     const { intl, updateWorkspaceRequest } = this.props;
     updateWorkspaceRequest.reset();
+
     return new Form({
       fields: {
         name: {
@@ -105,6 +110,7 @@ class EditWorkspaceForm extends Component {
           label: intl.formatMessage(messages.keepLoaded),
           value: workspace.services.includes(KEEP_WS_LOADED_USID),
           default: false,
+          type: 'checkbox',
         },
         services: {
           value: [...workspace.services],
@@ -113,7 +119,7 @@ class EditWorkspaceForm extends Component {
     });
   }
 
-  save(form) {
+  save(form): void {
     this.props.updateWorkspaceRequest.reset();
     form.submit({
       onSuccess: async f => {
@@ -125,12 +131,12 @@ class EditWorkspaceForm extends Component {
     });
   }
 
-  delete() {
+  delete(): void {
     const { onDelete } = this.props;
     onDelete();
   }
 
-  toggleService(service) {
+  toggleService(service: Service): void {
     const servicesField = this.form.$('services');
     const serviceIds = servicesField.value;
     if (serviceIds.includes(service.id)) {
@@ -141,19 +147,20 @@ class EditWorkspaceForm extends Component {
     servicesField.set(serviceIds);
   }
 
-  render() {
-    const { intl } = this.props;
+  render(): ReactElement {
     const {
       classes,
       workspace,
       services,
       deleteWorkspaceRequest,
       updateWorkspaceRequest,
+      intl,
     } = this.props;
     const { form } = this;
     const workspaceServices = form.$('services').value;
     const isDeleting = deleteWorkspaceRequest.isExecuting;
     const isSaving = updateWorkspaceRequest.isExecuting;
+
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -195,12 +202,12 @@ class EditWorkspaceForm extends Component {
               </div>
             ) : (
               <>
-                {services.map(s => (
+                {services.map(service => (
                   <WorkspaceServiceListItem
-                    key={s.id}
-                    service={s}
-                    isInWorkspace={workspaceServices.includes(s.id)}
-                    onToggle={() => this.toggleService(s)}
+                    key={service.id}
+                    service={service}
+                    isInWorkspace={workspaceServices.includes(service.id)}
+                    onToggle={() => this.toggleService(service)}
                   />
                 ))}
               </>
@@ -236,5 +243,5 @@ class EditWorkspaceForm extends Component {
 }
 
 export default injectIntl(
-  injectSheet(styles, { injectTheme: true })(observer(EditWorkspaceForm)),
+  withStyles(styles, { injectTheme: true })(EditWorkspaceForm),
 );
diff --git a/src/features/workspaces/components/WorkspaceDrawer.tsx b/src/features/workspaces/components/WorkspaceDrawer.tsx
index bdbebdb0a..61284d81a 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.tsx
+++ b/src/features/workspaces/components/WorkspaceDrawer.tsx
@@ -11,7 +11,6 @@ import WorkspaceDrawerItem from './WorkspaceDrawerItem';
 import workspaceActions from '../actions';
 import { workspaceStore } from '../index';
 import { getUserWorkspacesRequest } from '../api';
-import Service from '../../../models/Service';
 import Workspace from '../models/Workspace';
 
 const messages = defineMessages({
@@ -90,7 +89,7 @@ const styles = theme => ({
 });
 
 interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps {
-  getServicesForWorkspace: (workspace: Workspace | null) => Service[];
+  getServicesForWorkspace: (workspace: Workspace | null) => string[];
 }
 
 @observer
@@ -150,7 +149,9 @@ class WorkspaceDrawer extends Component<IProps> {
               name={workspace.name}
               isActive={actualWorkspace === workspace}
               onClick={() => {
-                if (actualWorkspace === workspace) return;
+                if (actualWorkspace === workspace) {
+                  return;
+                }
                 workspaceActions.activate({ workspace });
                 workspaceActions.toggleWorkspaceDrawer();
               }}
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.tsx
index 22c0a39d9..0ad56d1ae 100644
--- a/src/features/workspaces/components/WorkspaceDrawerItem.js
+++ b/src/features/workspaces/components/WorkspaceDrawerItem.tsx
@@ -1,10 +1,11 @@
-import { Menu } from '@electron/remote';
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component, MouseEventHandler, ReactElement } from 'react';
 import { observer } from 'mobx-react';
-import injectSheet from 'react-jss';
+import withStyles, { WithStylesProps } from 'react-jss';
 import classnames from 'classnames';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import { noop } from 'lodash';
+import { Menu } from '@electron/remote';
+import { MenuItemConstructorOptions } from 'electron';
 import { altKey, cmdOrCtrlShortcutKey } from '../../../environment';
 
 const messages = defineMessages({
@@ -18,11 +19,10 @@ const messages = defineMessages({
   },
 });
 
-let itemTransition = 'none';
-
-if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
-  itemTransition = 'background-color 300ms ease-out';
-}
+const itemTransition =
+  window && window.matchMedia('(prefers-reduced-motion: no-preference)')
+    ? 'background-color 300ms ease-out'
+    : 'none';
 
 const styles = theme => ({
   item: {
@@ -65,35 +65,30 @@ const styles = theme => ({
   },
 });
 
-class WorkspaceDrawerItem extends Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    isActive: PropTypes.bool.isRequired,
-    name: PropTypes.string.isRequired,
-    onClick: PropTypes.func.isRequired,
-    services: PropTypes.arrayOf(PropTypes.string).isRequired,
-    onContextMenuEditClick: PropTypes.func,
-    shortcutIndex: PropTypes.number.isRequired,
-  };
-
-  static defaultProps = {
-    onContextMenuEditClick: null,
-  };
+interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps {
+  isActive: boolean;
+  name: string;
+  onClick: MouseEventHandler<HTMLInputElement>;
+  services: string[];
+  onContextMenuEditClick?: () => void | null;
+  shortcutIndex: number;
+}
 
-  render() {
+@observer
+class WorkspaceDrawerItem extends Component<IProps> {
+  render(): ReactElement {
     const {
       classes,
       isActive,
       name,
       onClick,
-      onContextMenuEditClick,
+      onContextMenuEditClick = null,
       services,
       shortcutIndex,
+      intl,
     } = this.props;
 
-    const { intl } = this.props;
-
-    const contextMenuTemplate = [
+    const contextMenuTemplate: MenuItemConstructorOptions[] = [
       {
         label: name,
         enabled: false,
@@ -103,7 +98,7 @@ class WorkspaceDrawerItem extends Component {
       },
       {
         label: intl.formatMessage(messages.contextMenuEdit),
-        click: onContextMenuEditClick,
+        click: onContextMenuEditClick || noop,
       },
     ];
 
@@ -116,7 +111,12 @@ class WorkspaceDrawerItem extends Component {
           isActive ? classes.isActiveItem : null,
         ])}
         onClick={onClick}
-        onContextMenu={() => onContextMenuEditClick && contextMenu.popup()}
+        onContextMenu={() => {
+          if (onContextMenuEditClick) {
+            contextMenu.popup();
+          }
+        }}
+        onKeyDown={noop}
         data-tip={`${
           shortcutIndex <= 9
             ? `(${cmdOrCtrlShortcutKey(false)}+${altKey(
@@ -149,5 +149,5 @@ class WorkspaceDrawerItem extends Component {
 }
 
 export default injectIntl(
-  injectSheet(styles, { injectTheme: true })(observer(WorkspaceDrawerItem)),
+  withStyles(styles, { injectTheme: true })(WorkspaceDrawerItem),
 );
diff --git a/src/features/workspaces/components/WorkspaceItem.tsx b/src/features/workspaces/components/WorkspaceItem.tsx
index eb33a0376..b097a8298 100644
--- a/src/features/workspaces/components/WorkspaceItem.tsx
+++ b/src/features/workspaces/components/WorkspaceItem.tsx
@@ -1,6 +1,8 @@
-import { Component } from 'react';
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ // TODO - [TS DEBT] Need to check and remove it
+import { Component, ReactElement } from 'react';
 import { observer } from 'mobx-react';
-import injectSheet from 'react-jss';
+import withStyles, { WithStylesProps } from 'react-jss';
+import { noop } from 'lodash';
 import Workspace from '../models/Workspace';
 
 const styles = theme => ({
@@ -14,24 +16,24 @@ const styles = theme => ({
   columnName: {},
 });
 
-type Props = {
-  classes: any;
-  workspace: typeof Workspace;
-  onItemClick: (workspace) => void;
-};
+interface IProps extends WithStylesProps<typeof styles> {
+  workspace: Workspace;
+  onItemClick: (workspace: Workspace) => void;
+}
 
-class WorkspaceItem extends Component<Props> {
-  render() {
+@observer
+class WorkspaceItem extends Component<IProps> {
+  render(): ReactElement {
     const { classes, workspace, onItemClick } = this.props;
 
     return (
       <tr className={classes.row}>
-        <td onClick={() => onItemClick(workspace)}>{workspace.name}</td>
+        <td onClick={() => onItemClick(workspace)} onKeyDown={noop}>
+          {workspace.name}
+        </td>
       </tr>
     );
   }
 }
 
-export default injectSheet(styles, { injectTheme: true })(
-  observer(WorkspaceItem),
-);
+export default withStyles(styles, { injectTheme: true })(WorkspaceItem);
diff --git a/src/features/workspaces/components/WorkspaceServiceListItem.tsx b/src/features/workspaces/components/WorkspaceServiceListItem.tsx
index e708d5cdf..9034be37c 100644
--- a/src/features/workspaces/components/WorkspaceServiceListItem.tsx
+++ b/src/features/workspaces/components/WorkspaceServiceListItem.tsx
@@ -2,6 +2,7 @@ import { Component, ReactElement } from 'react';
 import { observer } from 'mobx-react';
 import withStyles, { WithStylesProps } from 'react-jss';
 import classnames from 'classnames';
+import { noop } from 'lodash';
 import Toggle from '../../../components/ui/toggle';
 import ServiceIcon from '../../../components/ui/ServiceIcon';
 import Service from '../../../models/Service';
@@ -39,9 +40,9 @@ interface IProps extends WithStylesProps<typeof styles> {
 class WorkspaceServiceListItem extends Component<IProps> {
   render(): ReactElement {
     const { classes, isInWorkspace, onToggle, service } = this.props;
-
     return (
-      <div className={classes.listItem}>
+      // onclick in below div used to fix bug raised under toggle duplicate component removal
+      <div className={classes.listItem} onClick={onToggle} onKeyDown={noop}>
         <ServiceIcon className={classes.serviceIcon} service={service} />
         <span
           className={classnames([
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.tsx
index 87ba06a2d..60fc7a0ce 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.tsx
@@ -1,18 +1,16 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
-import { defineMessages, injectIntl } from 'react-intl';
-import injectSheet from 'react-jss';
-
+import { Component, ReactElement } from 'react';
+import { observer } from 'mobx-react';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import withStyles, { WithStylesProps } from 'react-jss';
 import Infobox from '../../../components/ui/infobox/index';
 import Loader from '../../../components/ui/Loader';
 import WorkspaceItem from './WorkspaceItem';
 import CreateWorkspaceForm from './CreateWorkspaceForm';
 import Request from '../../../stores/lib/Request';
 import Appear from '../../../components/ui/effects/Appear';
-import UIStore from '../../../stores/UIStore';
 import { H1 } from '../../../components/ui/headline';
+import Workspace from '../models/Workspace';
 
 const messages = defineMessages({
   headline: {
@@ -70,19 +68,19 @@ const styles = {
   },
 };
 
-class WorkspacesDashboard extends Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    getUserWorkspacesRequest: PropTypes.instanceOf(Request).isRequired,
-    createWorkspaceRequest: PropTypes.instanceOf(Request).isRequired,
-    deleteWorkspaceRequest: PropTypes.instanceOf(Request).isRequired,
-    updateWorkspaceRequest: PropTypes.instanceOf(Request).isRequired,
-    onCreateWorkspaceSubmit: PropTypes.func.isRequired,
-    onWorkspaceClick: PropTypes.func.isRequired,
-    workspaces: MobxPropTypes.arrayOrObservableArray.isRequired,
-  };
+interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps {
+  getUserWorkspacesRequest: Request;
+  createWorkspaceRequest: Request;
+  deleteWorkspaceRequest: Request;
+  updateWorkspaceRequest: Request;
+  onCreateWorkspaceSubmit: (workspace: Workspace) => void;
+  onWorkspaceClick: (workspace: Workspace) => void;
+  workspaces: Workspace[];
+}
 
-  render() {
+@observer
+class WorkspacesDashboard extends Component<IProps> {
+  render(): ReactElement {
     const {
       classes,
       getUserWorkspacesRequest,
@@ -108,7 +106,7 @@ class WorkspacesDashboard extends Component {
               <Infobox
                 type="success"
                 icon="checkbox-marked-circle-outline"
-                dismissable
+                dismissible
                 onUnmount={updateWorkspaceRequest.reset}
               >
                 {intl.formatMessage(messages.updatedInfo)}
@@ -122,7 +120,7 @@ class WorkspacesDashboard extends Component {
               <Infobox
                 type="success"
                 icon="checkbox-marked-circle-outline"
-                dismissable
+                dismissible
                 onUnmount={deleteWorkspaceRequest.reset}
               >
                 {intl.formatMessage(messages.deletedInfo)}
@@ -147,7 +145,7 @@ class WorkspacesDashboard extends Component {
                   icon="alert"
                   type="danger"
                   ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)}
-                  ctaLoading={getUserWorkspacesRequest.isExecuting}
+                  // ctaLoading={getUserWorkspacesRequest.isExecuting} //  TODO - [TECH DEBT][PROP NOT USED IN COMPONENT] need to check and update
                   ctaOnClick={getUserWorkspacesRequest.retry}
                 >
                   {intl.formatMessage(messages.workspacesRequestFailed)}
@@ -165,7 +163,7 @@ class WorkspacesDashboard extends Component {
                       </p>
                     </div>
                   ) : (
-                    <table className={classes.table}>
+                    <table className={classes.table} role="grid">
                       {/* ===== Workspaces list ===== */}
                       <tbody>
                         {workspaces.map(workspace => (
@@ -189,13 +187,5 @@ class WorkspacesDashboard extends Component {
 }
 
 export default injectIntl(
-  inject('stores')(
-    injectSheet(styles, { injectTheme: true })(observer(WorkspacesDashboard)),
-  ),
+  withStyles(styles, { injectTheme: true })(WorkspacesDashboard),
 );
-
-WorkspacesDashboard.propTypes = {
-  stores: PropTypes.shape({
-    ui: PropTypes.instanceOf(UIStore).isRequired,
-  }).isRequired,
-};
diff --git a/src/features/workspaces/containers/WorkspacesScreen.tsx b/src/features/workspaces/containers/WorkspacesScreen.tsx
index d43dc5efa..39f19935f 100644
--- a/src/features/workspaces/containers/WorkspacesScreen.tsx
+++ b/src/features/workspaces/containers/WorkspacesScreen.tsx
@@ -10,8 +10,13 @@ import {
   getUserWorkspacesRequest,
   updateWorkspaceRequest,
 } from '../api';
+import Workspace from '../models/Workspace';
 
-class WorkspacesScreen extends Component<StoresProps> {
+interface IProps extends StoresProps {}
+
+@inject('stores', 'actions')
+@observer
+class WorkspacesScreen extends Component<IProps> {
   render() {
     const { actions } = this.props;
     return (
@@ -23,11 +28,13 @@ class WorkspacesScreen extends Component<StoresProps> {
           deleteWorkspaceRequest={deleteWorkspaceRequest}
           updateWorkspaceRequest={updateWorkspaceRequest}
           onCreateWorkspaceSubmit={data => actions.workspaces.create(data)}
-          onWorkspaceClick={w => actions.workspaces.edit({ workspace: w })}
+          onWorkspaceClick={(workspace: Workspace) =>
+            actions.workspaces.edit({ workspace })
+          }
         />
       </ErrorBoundary>
     );
   }
 }
 
-export default inject('stores', 'actions')(observer(WorkspacesScreen));
+export default WorkspacesScreen;