19 files changed, 270 insertions, 260 deletions

diff --git a/src/@types/stores.types.ts b/src/@types/stores.types.ts
index bbb37cff9..edea41ea9 100644
--- a/src/@types/stores.types.ts
+++ b/src/@types/stores.types.ts
@@ -2,8 +2,8 @@ import Workspace from '../features/workspaces/models/Workspace';
 import Recipe from '../models/Recipe';
 import Service from '../models/Service';
 import User from '../models/User';
-import { Request } from '../stores/lib/Request';
-import { CachedRequest } from '../stores/lib/CachedRequest';
+import Request from '../stores/lib/Request';
+import CachedRequest from '../stores/lib/CachedRequest';
 import Reaction from '../stores/lib/Reaction';
 
 // TODO: This file will be removed in the future when all stores are
diff --git a/src/components/auth/AuthLayout.tsx b/src/components/auth/AuthLayout.tsx
index 527c2bb74..eeb93b83b 100644
--- a/src/components/auth/AuthLayout.tsx
+++ b/src/components/auth/AuthLayout.tsx
@@ -8,7 +8,7 @@ import { observer } from 'mobx-react';
 import { TitleBar } from 'electron-react-titlebar/renderer';
 import { injectIntl, WrappedComponentProps } from 'react-intl';
 import { mdiFlash } from '@mdi/js';
-import { GlobalError } from '../../@types/ferdium-components.types';
+import { Response } from 'electron';
 import Link from '../ui/Link';
 import InfoBar from '../ui/InfoBar';
 import { Component as PublishDebugInfo } from '../../features/publishDebugInfo';
@@ -22,7 +22,7 @@ import { serverName } from '../../api/apiBase';
 
 export interface IProps extends WrappedComponentProps {
   children: ReactElement;
-  error: GlobalError;
+  error: Response;
   isOnline: boolean;
   isAPIHealthy: boolean;
   retryHealthCheck: MouseEventHandler<HTMLButtonElement>;
@@ -106,9 +106,7 @@ class AuthLayout extends Component<IProps, IState> {
           )}
           <div className="auth__layout">
             {/* Inject globalError into children  */}
-            {cloneElement(children, {
-              error,
-            })}
+            {cloneElement(children, { error })}
           </div>
           {/* </div> */}
           <Link
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;
diff --git a/src/stores/AppStore.ts b/src/stores/AppStore.ts
index aab279e59..2db90bfa0 100644
--- a/src/stores/AppStore.ts
+++ b/src/stores/AppStore.ts
@@ -494,7 +494,7 @@ export default class AppStore extends TypedStore {
       ),
     );
 
-    await clearAppCache._promise;
+    await clearAppCache.promise;
 
     await sleep(ms('1s'));
 
diff --git a/src/stores/FeaturesStore.ts b/src/stores/FeaturesStore.ts
index ed0c6c17b..5f43ccf84 100644
--- a/src/stores/FeaturesStore.ts
+++ b/src/stores/FeaturesStore.ts
@@ -45,7 +45,7 @@ export default class FeaturesStore extends TypedStore {
       this._monitorLoginStatus.bind(this),
     ]);
 
-    await this.featuresRequest._promise;
+    await this.featuresRequest.promise;
     setTimeout(this._setupFeatures.bind(this), 1);
   }
 
diff --git a/src/stores/GlobalErrorStore.ts b/src/stores/GlobalErrorStore.ts
index c42e9a4af..be86563d0 100644
--- a/src/stores/GlobalErrorStore.ts
+++ b/src/stores/GlobalErrorStore.ts
@@ -1,4 +1,5 @@
 import { observable, action, makeObservable } from 'mobx';
+import { Response } from 'electron';
 import { Actions } from '../actions/lib/actions';
 import { ApiInterface } from '../api';
 import { Stores } from '../@types/stores.types';
@@ -11,12 +12,8 @@ interface Message {
     message?: string;
     status?: number;
   };
-  request?: {
-    result: any;
-    wasExecuted: any;
-    method: any;
-  };
-  response?: any;
+  request?: Request;
+  response?: Response;
   server?: any;
   info?: any;
   url?: string;
@@ -28,7 +25,7 @@ export default class GlobalErrorStore extends TypedStore {
 
   @observable messages: Message[] = [];
 
-  @observable response: object = {};
+  @observable response: Response = {} as Response;
 
   // TODO: Get rid of the @ts-ignores in this function.
   constructor(stores: Stores, api: ApiInterface, actions: Actions) {
@@ -85,21 +82,15 @@ export default class GlobalErrorStore extends TypedStore {
     }
   }
 
-  @action _handleRequests = async (request: {
-    isError: any;
-    error: { json: () => object | PromiseLike<object> };
-    result: any;
-    wasExecuted: any;
-    _method: any;
-  }): Promise<void> => {
+  @action _handleRequests = async (request: Request): Promise<void> => {
     if (request.isError) {
       this.error = request.error;
 
-      if (request.error.json) {
+      if (request.error && request.error.json) {
         try {
           this.response = await request.error.json();
         } catch {
-          this.response = {};
+          this.response = {} as Response;
         }
         if (this.error?.status === 401) {
           window['ferdium'].stores.app.authRequestFailed = true;
@@ -111,8 +102,8 @@ export default class GlobalErrorStore extends TypedStore {
         request: {
           result: request.result,
           wasExecuted: request.wasExecuted,
-          method: request._method,
-        },
+          method: request.method,
+        } as Request,
         error: this.error,
         response: this.response,
         server: window['ferdium'].stores.settings.app.server,
diff --git a/src/stores/RecipesStore.ts b/src/stores/RecipesStore.ts
index 25304e97c..07f1343f8 100644
--- a/src/stores/RecipesStore.ts
+++ b/src/stores/RecipesStore.ts
@@ -74,8 +74,8 @@ export default class RecipesStore extends TypedStore {
 
   // Actions
   async _install({ recipeId }): Promise<Recipe> {
-    const recipe = await this.installRecipeRequest.execute(recipeId)._promise;
-    await this.allRecipesRequest.invalidate({ immediately: true })._promise;
+    const recipe = await this.installRecipeRequest.execute(recipeId).promise;
+    await this.allRecipesRequest.invalidate({ immediately: true }).promise;
 
     return recipe;
   }
@@ -128,7 +128,7 @@ export default class RecipesStore extends TypedStore {
       const update = updates[i];
 
       this.actions.recipe.install({ recipeId: update });
-      await this.installRecipeRequest._promise;
+      await this.installRecipeRequest.promise;
 
       this.installRecipeRequest.reset();
 
@@ -158,10 +158,10 @@ export default class RecipesStore extends TypedStore {
         debug(`Recipe ${recipeId} is not installed, trying to install it`);
 
         const recipe = await this.installRecipeRequest.execute(recipeId)
-          ._promise;
+          .promise;
         if (recipe) {
           await this.allRecipesRequest.invalidate({ immediately: true })
-            ._promise;
+            .promise;
           router.push(`/settings/services/add/${recipeId}`);
         } else {
           router.push('/settings/recipes');
diff --git a/src/stores/RequestStore.ts b/src/stores/RequestStore.ts
index 279615e50..807f2d126 100644
--- a/src/stores/RequestStore.ts
+++ b/src/stores/RequestStore.ts
@@ -37,6 +37,9 @@ export default class RequestStore extends TypedStore {
     );
 
     this.registerReactions([this._autoRetry.bind(this)]);
+
+    this.userInfoRequest = {} as CachedRequest;
+    this.servicesRequest = {} as CachedRequest;
   }
 
   async setup(): Promise<void> {
diff --git a/src/stores/ServicesStore.ts b/src/stores/ServicesStore.ts
index 74810b81f..4fdd9d5ad 100644
--- a/src/stores/ServicesStore.ts
+++ b/src/stores/ServicesStore.ts
@@ -477,7 +477,7 @@ export default class ServicesStore extends TypedStore {
       : this._cleanUpTeamIdAndCustomUrl(recipeId, serviceData);
 
     const response = await this.createServiceRequest.execute(recipeId, data)
-      ._promise;
+      .promise;
 
     this.allServicesRequest.patch(result => {
       if (!result) return;
@@ -536,7 +536,7 @@ export default class ServicesStore extends TypedStore {
 
     const newData = serviceData;
     if (serviceData.iconFile) {
-      await request._promise;
+      await request.promise;
 
       newData.iconUrl = request.result.data.iconUrl;
       newData.hasCustomUploadedIcon = true;
@@ -562,7 +562,7 @@ export default class ServicesStore extends TypedStore {
       );
     });
 
-    await request._promise;
+    await request.promise;
     this.actionStatus = request.result.status;
 
     if (service.isEnabled) {
@@ -596,7 +596,7 @@ export default class ServicesStore extends TypedStore {
       remove(result, (c: Service) => c.id === serviceId);
     });
 
-    await request._promise;
+    await request.promise;
     this.actionStatus = request.result.status;
   }
 
@@ -637,7 +637,7 @@ export default class ServicesStore extends TypedStore {
   @action async _clearCache({ serviceId }) {
     this.clearCacheRequest.reset();
     const request = this.clearCacheRequest.execute(serviceId);
-    await request._promise;
+    await request.promise;
   }
 
   @action _setIsActive(service: Service, state: boolean): void {
diff --git a/src/stores/UserStore.ts b/src/stores/UserStore.ts
index c5e67c966..6c8f8f20b 100644
--- a/src/stores/UserStore.ts
+++ b/src/stores/UserStore.ts
@@ -187,7 +187,7 @@ export default class UserStore extends TypedStore {
 
   // Actions
   @action async _login({ email, password }): Promise<void> {
-    const authToken = await this.loginRequest.execute(email, password)._promise;
+    const authToken = await this.loginRequest.execute(email, password).promise;
     this._setUserData(authToken);
 
     this.stores.router.push('/');
@@ -209,6 +209,8 @@ export default class UserStore extends TypedStore {
     plan,
     currency,
   }): Promise<void> {
+    // TODO - [TS DEBT] Need to find a way proper to implement promise's then and catch in request class
+    // @ts-ignore
     const authToken = await this.signupRequest.execute({
       firstname,
       lastname,
@@ -231,14 +233,14 @@ export default class UserStore extends TypedStore {
   @action async _retrievePassword({ email }): Promise<void> {
     const request = this.passwordRequest.execute(email);
 
-    await request._promise;
+    await request.promise;
     this.actionStatus = request.result.status || [];
   }
 
   @action async _invite({ invites }): Promise<void> {
     const data = invites.filter(invite => invite.email !== '');
 
-    const response = await this.inviteRequest.execute(data)._promise;
+    const response = await this.inviteRequest.execute(data).promise;
 
     this.actionStatus = response.status || [];
 
@@ -251,8 +253,7 @@ export default class UserStore extends TypedStore {
   @action async _update({ userData }): Promise<void> {
     if (!this.isLoggedIn) return;
 
-    const response = await this.updateUserInfoRequest.execute(userData)
-      ._promise;
+    const response = await this.updateUserInfoRequest.execute(userData).promise;
 
     this.getUserInfoRequest.patch(() => response.data);
     this.actionStatus = response.status || [];
@@ -299,7 +300,7 @@ export default class UserStore extends TypedStore {
         data: service,
       });
       // eslint-disable-next-line no-await-in-loop
-      await this.stores.services.createServiceRequest._promise;
+      await this.stores.services.createServiceRequest.promise;
     }
 
     this.isImportLegacyServicesExecuting = false;
@@ -349,7 +350,7 @@ export default class UserStore extends TypedStore {
     if (this.isLoggedIn) {
       let data;
       try {
-        data = await this.getUserInfoRequest.execute()._promise;
+        data = await this.getUserInfoRequest.execute().promise;
       } catch {
         return;
       }
@@ -406,7 +407,7 @@ export default class UserStore extends TypedStore {
 
   async _migrateUserLocale(): Promise<void> {
     try {
-      await this.getUserInfoRequest._promise;
+      await this.getUserInfoRequest.promise;
     } catch {
       return;
     }
diff --git a/src/stores/lib/CachedRequest.js b/src/stores/lib/CachedRequest.ts
index a6dd47f7d..25cc365e2 100644
--- a/src/stores/lib/CachedRequest.js
+++ b/src/stores/lib/CachedRequest.ts
@@ -3,29 +3,33 @@ import { isEqual, remove } from 'lodash';
 import Request from './Request';
 
 export default class CachedRequest extends Request {
-  _apiCalls = [];
+  _apiCalls: any[] = [];
 
   _isInvalidated = true;
 
-  execute(...callArgs) {
+  execute(...callArgs): this {
     // Do not continue if this request is already loading
-    if (this._isWaitingForResponse) return this;
+    if (this.isWaitingForResponse) {
+      return this;
+    }
 
     // Very simple caching strategy -> only continue if the call / args changed
     // or the request was invalidated manually from outside
     const existingApiCall = this._findApiCall(callArgs);
 
     // Invalidate if new or different api call will be done
-    if (existingApiCall && existingApiCall !== this._currentApiCall) {
+    if (existingApiCall && existingApiCall !== this.currentApiCall) {
       this._isInvalidated = true;
-      this._currentApiCall = existingApiCall;
+      this.currentApiCall = existingApiCall;
     } else if (!existingApiCall) {
       this._isInvalidated = true;
-      this._currentApiCall = this._addApiCall(callArgs);
+      this.currentApiCall = this._addApiCall(callArgs);
     }
 
     // Do not continue if this request is not invalidated (see above)
-    if (!this._isInvalidated) return this;
+    if (!this._isInvalidated) {
+      return this;
+    }
 
     // This timeout is necessary to avoid warnings from mobx
     // regarding triggering actions as side-effect of getters
@@ -41,18 +45,18 @@ export default class CachedRequest extends Request {
     );
 
     // Issue api call & save it as promise that is handled to update the results of the operation
-    this._promise = new Promise(resolve => {
-      this._api[this._method](...callArgs)
+    this.promise = new Promise(resolve => {
+      this.api[this.method](...callArgs)
         .then(result => {
           setTimeout(
             action(() => {
               this.result = result;
-              if (this._currentApiCall) this._currentApiCall.result = result;
+              if (this.currentApiCall) this.currentApiCall.result = result;
               this.isExecuting = false;
               this.isError = false;
               this.wasExecuted = true;
               this._isInvalidated = false;
-              this._isWaitingForResponse = false;
+              this.isWaitingForResponse = false;
               this._triggerHooks();
               resolve(result);
             }),
@@ -68,7 +72,7 @@ export default class CachedRequest extends Request {
                 this.isExecuting = false;
                 this.isError = true;
                 this.wasExecuted = true;
-                this._isWaitingForResponse = false;
+                this.isWaitingForResponse = false;
                 this._triggerHooks();
                 // reject(error);
               }),
@@ -78,26 +82,27 @@ export default class CachedRequest extends Request {
         );
     });
 
-    this._isWaitingForResponse = true;
+    this.isWaitingForResponse = true;
     return this;
   }
 
-  // eslint-disable-next-line unicorn/no-object-as-default-parameter
-  invalidate(options = { immediately: false }) {
+  static defaultOptions = { immediately: false };
+
+  invalidate(options = CachedRequest.defaultOptions): this {
     this._isInvalidated = true;
-    if (options.immediately && this._currentApiCall) {
-      return this.execute(...this._currentApiCall.args);
+    if (options.immediately && this.currentApiCall) {
+      return this.execute(...this.currentApiCall.args);
     }
     return this;
   }
 
-  patch(modify) {
+  patch(modify): Promise<this> {
     return new Promise(resolve => {
       setTimeout(
         action(() => {
           const override = modify(this.result);
           if (override !== undefined) this.result = override;
-          if (this._currentApiCall) this._currentApiCall.result = this.result;
+          if (this.currentApiCall) this.currentApiCall.result = this.result;
           resolve(this);
         }),
         0,
@@ -105,17 +110,17 @@ export default class CachedRequest extends Request {
     });
   }
 
-  removeCacheForCallWith(...args) {
+  removeCacheForCallWith(...args: any): void {
     remove(this._apiCalls, c => isEqual(c.args, args));
   }
 
-  _addApiCall(args) {
+  _addApiCall(args: any) {
     const newCall = { args, result: null };
     this._apiCalls.push(newCall);
     return newCall;
   }
 
-  _findApiCall(args) {
+  _findApiCall(args: any) {
     return this._apiCalls.find(c => isEqual(c.args, args));
   }
 }
diff --git a/src/stores/lib/Request.js b/src/stores/lib/Request.ts
index 60c943a42..f9424ac99 100644
--- a/src/stores/lib/Request.js
+++ b/src/stores/lib/Request.ts
@@ -1,16 +1,18 @@
 import { observable, action, computed, makeObservable } from 'mobx';
 import { isEqual } from 'lodash/fp';
 
+type Hook = (request: Request) => void;
+
 export default class Request {
-  static _hooks = [];
+  static _hooks: Hook[] = [];
 
-  static registerHook(hook) {
+  static registerHook(hook: Hook) {
     Request._hooks.push(hook);
   }
 
-  @observable result = null;
+  @observable result: any = null;
 
-  @observable error = null;
+  @observable error: any = null;
 
   @observable isExecuting = false;
 
@@ -18,43 +20,47 @@ export default class Request {
 
   @observable wasExecuted = false;
 
-  @action _reset() {
-    this.error = null;
-    this.result = null;
-    this.isExecuting = false;
-    this.isError = false;
-    this.wasExecuted = false;
-    this._isWaitingForResponse = false;
-    this._promise = Promise;
+  promise: any = Promise;
 
-    return this;
-  }
+  protected api: any = {};
 
-  _promise = Promise;
+  method = '';
 
-  _api = {};
+  protected isWaitingForResponse = false;
 
-  _method = '';
+  protected currentApiCall: any = null;
 
-  _isWaitingForResponse = false;
+  retry = () => this.reload();
 
-  _currentApiCall = null;
+  reset = () => this._reset();
 
   constructor(api, method) {
     makeObservable(this);
 
-    this._api = api;
-    this._method = method;
+    this.api = api;
+    this.method = method;
+  }
+
+  @action _reset(): this {
+    this.error = null;
+    this.result = null;
+    this.isExecuting = false;
+    this.isError = false;
+    this.wasExecuted = false;
+    this.isWaitingForResponse = false;
+    this.promise = Promise;
+
+    return this;
   }
 
-  execute(...callArgs) {
+  execute(...callArgs: any[]): this {
     // Do not continue if this request is already loading
-    if (this._isWaitingForResponse) return this;
+    if (this.isWaitingForResponse) return this;
 
-    if (!this._api[this._method]) {
+    if (!this.api[this.method]) {
       throw new Error(
-        `Missing method <${this._method}> on api object:`,
-        this._api,
+        `Missing method <${this.method}> on api object:`,
+        this.api,
       );
     }
 
@@ -68,18 +74,18 @@ export default class Request {
     );
 
     // Issue api call & save it as promise that is handled to update the results of the operation
-    this._promise = new Promise((resolve, reject) => {
-      this._api[this._method](...callArgs)
+    this.promise = new Promise((resolve, reject) => {
+      this.api[this.method](...callArgs)
         .then(result => {
           setTimeout(
             action(() => {
               this.error = null;
               this.result = result;
-              if (this._currentApiCall) this._currentApiCall.result = result;
+              if (this.currentApiCall) this.currentApiCall.result = result;
               this.isExecuting = false;
               this.isError = false;
               this.wasExecuted = true;
-              this._isWaitingForResponse = false;
+              this.isWaitingForResponse = false;
               this._triggerHooks();
               resolve(result);
             }),
@@ -95,7 +101,7 @@ export default class Request {
                 this.isExecuting = false;
                 this.isError = true;
                 this.wasExecuted = true;
-                this._isWaitingForResponse = false;
+                this.isWaitingForResponse = false;
                 this._triggerHooks();
                 reject(error);
               }),
@@ -105,51 +111,49 @@ export default class Request {
         );
     });
 
-    this._isWaitingForResponse = true;
-    this._currentApiCall = { args: callArgs, result: null };
+    this.isWaitingForResponse = true;
+    this.currentApiCall = { args: callArgs, result: null };
     return this;
   }
 
-  reload() {
-    const args = this._currentApiCall ? this._currentApiCall.args : [];
+  reload(): this {
+    const args = this.currentApiCall ? this.currentApiCall.args : [];
     this.error = null;
     return this.execute(...args);
   }
 
-  retry = () => this.reload();
-
-  isExecutingWithArgs(...args) {
+  isExecutingWithArgs(...args: any[]): boolean {
     return (
       this.isExecuting &&
-      this._currentApiCall &&
-      isEqual(this._currentApiCall.args, args)
+      this.currentApiCall &&
+      isEqual(this.currentApiCall.args, args)
     );
   }
 
-  @computed get isExecutingFirstTime() {
+  @computed get isExecutingFirstTime(): boolean {
     return !this.wasExecuted && this.isExecuting;
   }
 
   /* eslint-disable unicorn/no-thenable */
-  then(...args) {
-    if (!this._promise)
+  then(...args: any[]) {
+    if (!this.promise)
       throw new Error(
         'You have to call Request::execute before you can access it as promise',
       );
-    return this._promise.then(...args);
+    return this.promise.then(...args);
   }
 
-  catch(...args) {
-    if (!this._promise)
+  catch(...args: any[]) {
+    if (!this.promise)
       throw new Error(
         'You have to call Request::execute before you can access it as promise',
       );
-    return this._promise.catch(...args);
+    return this.promise.catch(...args);
   }
 
-  _triggerHooks() {
-    for (const hook of Request._hooks) hook(this);
+  _triggerHooks(): void {
+    for (const hook of Request._hooks) {
+      hook(this);
+    }
   }
-
-  reset = () => this._reset();
 }