15 files changed, 169 insertions, 188 deletions

diff --git a/src/components/ui/FAB.js b/src/components/ui/FAB.js
deleted file mode 100644
index 55fe97e82..000000000
--- a/src/components/ui/FAB.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * Floating Action Button (FAB)
- */
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer } from 'mobx-react';
-import classnames from 'classnames';
-
-import { oneOrManyChildElements } from '../../prop-types';
-
-@observer
-class Button extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    disabled: PropTypes.bool,
-    onClick: PropTypes.func,
-    type: PropTypes.string,
-    children: oneOrManyChildElements.isRequired,
-    htmlForm: PropTypes.string,
-  };
-
-  static defaultProps = {
-    className: null,
-    disabled: false,
-    onClick: () => {},
-    type: 'button',
-    htmlForm: '',
-  };
-
-  element = null;
-
-  render() {
-    const { className, disabled, onClick, type, children, htmlForm } =
-      this.props;
-
-    const buttonProps = {
-      className: classnames({
-        ferdi__fab: true,
-        [`${className}`]: className,
-      }),
-      type,
-    };
-
-    if (disabled) {
-      buttonProps.disabled = true;
-    }
-
-    if (onClick) {
-      buttonProps.onClick = onClick;
-    }
-
-    if (htmlForm) {
-      buttonProps.form = htmlForm;
-    }
-
-    return (
-      // disabling rule as button has type defined in `buttonProps`
-      <button {...buttonProps} type="button">
-        {children}
-      </button>
-    );
-  }
-}
-
-export default Button;
diff --git a/src/components/ui/FAB.tsx b/src/components/ui/FAB.tsx
new file mode 100644
index 000000000..583c9d556
--- /dev/null
+++ b/src/components/ui/FAB.tsx
@@ -0,0 +1,51 @@
+/**
+ * Floating Action Button (FAB)
+ */
+import { Component, ReactChildren } from 'react';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+
+type Props = {
+  className: string;
+  disabled: boolean;
+  onClick: () => void;
+  type: string;
+  children: ReactChildren;
+  htmlForm: string;
+};
+
+@observer
+class Button extends Component<Props> {
+  static defaultProps = {
+    disabled: false,
+    onClick: () => {},
+    type: 'button',
+    htmlForm: '',
+  };
+
+  element = null;
+
+  render() {
+    const { className, disabled, onClick, type, children, htmlForm } =
+      this.props;
+
+    const buttonProps = {
+      className: classnames({
+        ferdi__fab: true,
+        [`${className}`]: className,
+      }),
+      type,
+      disabled,
+      onClick,
+      form: htmlForm,
+    };
+
+    return (
+      <button {...buttonProps} type="button">
+        {children}
+      </button>
+    );
+  }
+}
+
+export default Button;
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.tsx
index c51d39a9b..4b25be502 100644
--- a/src/components/ui/ImageUpload.js
+++ b/src/components/ui/ImageUpload.tsx
@@ -1,23 +1,21 @@
-import { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
+import { Component } from 'react';
 import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
-import Dropzone from 'react-dropzone';
+import Dropzone, { DropzoneRef } from 'react-dropzone';
 import { isWindows } from '../../environment';
 
-@observer
-class ImageUpload extends Component {
-  static propTypes = {
-    field: PropTypes.instanceOf(Field).isRequired,
-    className: PropTypes.string,
-    multiple: PropTypes.bool,
-    textDelete: PropTypes.string.isRequired,
-    textUpload: PropTypes.string.isRequired,
-  };
+type Props = {
+  field: typeof Field;
+  className: string;
+  multiple: boolean;
+  textDelete: string;
+  textUpload: string;
+};
 
+@observer
+class ImageUpload extends Component<Props> {
   static defaultProps = {
-    className: null,
     multiple: false,
   };
 
@@ -25,7 +23,7 @@ class ImageUpload extends Component {
     path: null,
   };
 
-  dropzoneRef = null;
+  dropzoneRef: DropzoneRef | null = null;
 
   onDrop(acceptedFiles) {
     const { field } = this.props;
diff --git a/src/components/ui/Loader.js b/src/components/ui/Loader.tsx
index 71c6b9552..1173c11e7 100644
--- a/src/components/ui/Loader.js
+++ b/src/components/ui/Loader.tsx
@@ -1,31 +1,22 @@
-import { Component } from 'react';
+import { Component, ReactChildren } from 'react';
 import { observer, inject } from 'mobx-react';
-import PropTypes from 'prop-types';
 import Loader from 'react-loader';
 
-import { oneOrManyChildElements } from '../../prop-types';
+import { FerdiStores } from '../../stores.types';
+
+type Props = {
+  children: ReactChildren;
+  loaded: boolean;
+  className: string;
+  color: string;
+  stores: FerdiStores;
+};
 
 @inject('stores')
 @observer
-class LoaderComponent extends Component {
-  static propTypes = {
-    children: oneOrManyChildElements,
-    loaded: PropTypes.bool,
-    className: PropTypes.string,
-    color: PropTypes.string,
-    stores: PropTypes.shape({
-      settings: PropTypes.shape({
-        app: PropTypes.shape({
-          accentColor: PropTypes.string.isRequired,
-        }).isRequired,
-      }).isRequired,
-    }).isRequired,
-  };
-
+class LoaderComponent extends Component<Props> {
   static defaultProps = {
-    children: null,
     loaded: false,
-    className: '',
     color: 'ACCENT',
   };
 
@@ -40,7 +31,6 @@ class LoaderComponent extends Component {
     return (
       <Loader
         loaded={loaded}
-        // lines={10}
         width={4}
         scale={0.6}
         color={color}
diff --git a/src/components/ui/Radio.js b/src/components/ui/Radio.tsx
index 5354dbfe1..594ea70e4 100644
--- a/src/components/ui/Radio.js
+++ b/src/components/ui/Radio.tsx
@@ -1,20 +1,18 @@
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
 
-@observer
-class Radio extends Component {
-  static propTypes = {
-    field: PropTypes.instanceOf(Field).isRequired,
-    className: PropTypes.string,
-    focus: PropTypes.bool,
-    showLabel: PropTypes.bool,
-  };
+type Props = {
+  field: typeof Field;
+  className: string;
+  focus: boolean;
+  showLabel: boolean;
+};
 
+@observer
+class Radio extends Component<Props> {
   static defaultProps = {
-    className: null,
     focus: false,
     showLabel: true,
   };
@@ -28,6 +26,7 @@ class Radio extends Component {
   }
 
   focus() {
+    // @ts-expect-error Object is possibly 'null'.
     this.inputElement.focus();
   }
 
diff --git a/src/components/ui/SearchInput.js b/src/components/ui/SearchInput.tsx
index 2e8793a2b..af55b0e11 100644
--- a/src/components/ui/SearchInput.js
+++ b/src/components/ui/SearchInput.tsx
@@ -1,23 +1,22 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { ChangeEvent, Component } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { debounce } from 'lodash';
 
-@observer
-class SearchInput extends Component {
-  static propTypes = {
-    value: PropTypes.string,
-    placeholder: PropTypes.string,
-    className: PropTypes.string,
-    onChange: PropTypes.func,
-    onReset: PropTypes.func,
-    name: PropTypes.string,
-    throttle: PropTypes.bool,
-    throttleDelay: PropTypes.number,
-    autoFocus: PropTypes.bool,
-  };
+type Props = {
+  value: string;
+  placeholder: string;
+  className: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  onReset: () => void;
+  name: string;
+  throttle: boolean;
+  throttleDelay: number;
+  autoFocus: boolean;
+};
 
+@observer
+class SearchInput extends Component<Props> {
   static defaultProps = {
     value: '',
     placeholder: '',
@@ -32,7 +31,7 @@ class SearchInput extends Component {
 
   input = null;
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
 
     this.state = {
@@ -49,24 +48,27 @@ class SearchInput extends Component {
     const { autoFocus } = this.props;
 
     if (autoFocus) {
+      // @ts-expect-error Object is possibly 'null'.
       this.input.focus();
     }
   }
 
-  onChange(e) {
+  onChange(e: ChangeEvent<HTMLInputElement>) {
     const { throttle, onChange } = this.props;
     const { value } = e.target;
     this.setState({ value });
 
     if (throttle) {
       e.persist();
+      // @ts-expect-error Argument of type 'string' is not assignable to parameter of type 'ChangeEvent<HTMLInputElement>'.
       this.throttledOnChange(value);
     } else {
+      // @ts-expect-error Argument of type 'string' is not assignable to parameter of type 'ChangeEvent<HTMLInputElement>'.
       onChange(value);
     }
   }
 
-  throttledOnChange(e) {
+  throttledOnChange(e: ChangeEvent<HTMLInputElement>) {
     const { onChange } = this.props;
 
     onChange(e);
@@ -81,6 +83,7 @@ class SearchInput extends Component {
 
   render() {
     const { className, name, placeholder } = this.props;
+    // @ts-expect-error Property 'value' does not exist on type 'Readonly<{}>'.
     const { value } = this.state;
 
     return (
@@ -94,6 +97,7 @@ class SearchInput extends Component {
             value={value}
             onChange={e => this.onChange(e)}
             ref={ref => {
+              // @ts-expect-error Type 'HTMLInputElement | null' is not assignable to type 'null'.
               this.input = ref;
             }}
           />
diff --git a/src/features/basicAuth/index.js b/src/features/basicAuth/index.ts
index e43d51d15..149ab6c19 100644
--- a/src/features/basicAuth/index.js
+++ b/src/features/basicAuth/index.ts
@@ -1,4 +1,4 @@
-import { ipcRenderer } from 'electron';
+import { AuthInfo, BrowserWindow, ipcRenderer } from 'electron';
 
 import BasicAuthComponent from './Component';
 
@@ -11,7 +11,7 @@ const state = ModalState;
 export default function initialize() {
   debug('Initialize basicAuth feature');
 
-  window.ferdi.features.basicAuth = {
+  window['ferdi'].features.basicAuth = {
     state,
   };
 
@@ -23,7 +23,7 @@ export default function initialize() {
   });
 }
 
-export function mainIpcHandler(mainWindow, authInfo) {
+export function mainIpcHandler(mainWindow: BrowserWindow, authInfo: AuthInfo) {
   debug('Sending basic auth call', authInfo);
 
   mainWindow.webContents.send('feature:basic-auth-request', {
diff --git a/src/features/nightlyBuilds/index.js b/src/features/nightlyBuilds/index.ts
index 89bcb5cb3..14afbaf1b 100644
--- a/src/features/nightlyBuilds/index.js
+++ b/src/features/nightlyBuilds/index.ts
@@ -14,26 +14,26 @@ export default function initialize() {
   }
 
   function toggleFeature() {
-    if (window.ferdi.stores.settings.app.nightly) {
-      window.ferdi.actions.settings.update({
+    if (window['ferdi'].stores.settings.app.nightly) {
+      window['ferdi'].actions.settings.update({
         type: 'app',
         data: {
           nightly: false,
         },
       });
-      window.ferdi.actions.user.update({
+      window['ferdi'].actions.user.update({
         userData: {
           nightly: false,
         },
       });
     } else {
       // We need to close the settings, otherwise the modal will be drawn under the settings window
-      window.ferdi.actions.ui.closeSettings();
+      window['ferdi'].actions.ui.closeSettings();
       showModal();
     }
   }
 
-  window.ferdi.features.nightlyBuilds = {
+  window['ferdi'].features.nightlyBuilds = {
     state,
     showModal,
     toggleFeature,
diff --git a/src/features/todos/preload.js b/src/features/todos/preload.ts
index 3b86ddbc5..31d473051 100644
--- a/src/features/todos/preload.js
+++ b/src/features/todos/preload.ts
@@ -14,7 +14,7 @@ let hostMessageListener = ({ action }) => {
   }
 };
 
-window.ferdi = {
+window['ferdi'] = {
   onInitialize(ipcHostMessageListener) {
     hostMessageListener = ipcHostMessageListener;
     ipcRenderer.sendToHost(IPC.TODOS_CLIENT_CHANNEL, {
diff --git a/src/features/workspaces/components/WorkspaceItem.js b/src/features/workspaces/components/WorkspaceItem.tsx
index ff3f69dd9..6fb02d2f5 100644
--- a/src/features/workspaces/components/WorkspaceItem.js
+++ b/src/features/workspaces/components/WorkspaceItem.tsx
@@ -16,9 +16,15 @@ const styles = theme => ({
   columnName: {},
 });
 
+type Props = {
+  classes: any;
+  workspace: any;
+  onItemClick: (workspace) => void;
+};
+
 @injectSheet(styles)
 @observer
-class WorkspaceItem extends Component {
+class WorkspaceItem extends Component<Props> {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     workspace: PropTypes.instanceOf(Workspace).isRequired,
diff --git a/src/features/workspaces/components/WorkspaceServiceListItem.js b/src/features/workspaces/components/WorkspaceServiceListItem.tsx
index c06f3c61c..b6faaf4ce 100644
--- a/src/features/workspaces/components/WorkspaceServiceListItem.js
+++ b/src/features/workspaces/components/WorkspaceServiceListItem.tsx
@@ -1,14 +1,12 @@
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 import classnames from 'classnames';
 import { Toggle } from '@meetfranz/forms';
 
-import Service from '../../../models/Service';
 import ServiceIcon from '../../../components/ui/ServiceIcon';
 
-const styles = (theme) => ({
+const styles = theme => ({
   listItem: {
     height: theme.workspaces.settings.listItems.height,
     borderBottom: `1px solid ${theme.workspaces.settings.listItems.borderColor}`,
@@ -31,29 +29,22 @@ const styles = (theme) => ({
   },
 });
 
-@injectSheet(styles) @observer
-class WorkspaceServiceListItem extends Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    isInWorkspace: PropTypes.bool.isRequired,
-    onToggle: PropTypes.func.isRequired,
-    service: PropTypes.instanceOf(Service).isRequired,
-  };
+type Props = {
+  classes: any;
+  isInWorkspace: boolean;
+  onToggle: () => void;
+  service: any;
+};
 
+@injectSheet(styles)
+@observer
+class WorkspaceServiceListItem extends Component<Props> {
   render() {
-    const {
-      classes,
-      isInWorkspace,
-      onToggle,
-      service,
-    } = this.props;
+    const { classes, isInWorkspace, onToggle, service } = this.props;
 
     return (
       <div className={classes.listItem}>
-        <ServiceIcon
-          className={classes.serviceIcon}
-          service={service}
-        />
+        <ServiceIcon className={classes.serviceIcon} service={service} />
         <span
           className={classnames([
             classes.label,
diff --git a/src/features/workspaces/containers/EditWorkspaceScreen.js b/src/features/workspaces/containers/EditWorkspaceScreen.tsx
index bd9e235e3..8e8f8179d 100644
--- a/src/features/workspaces/containers/EditWorkspaceScreen.js
+++ b/src/features/workspaces/containers/EditWorkspaceScreen.tsx
@@ -1,26 +1,26 @@
 import { Component } from 'react';
 import { inject, observer } from 'mobx-react';
-import PropTypes from 'prop-types';
 
 import ErrorBoundary from '../../../components/util/ErrorBoundary';
 import EditWorkspaceForm from '../components/EditWorkspaceForm';
-import ServicesStore from '../../../stores/ServicesStore';
 import Workspace from '../models/Workspace';
 import { workspaceStore } from '../index';
 import { deleteWorkspaceRequest, updateWorkspaceRequest } from '../api';
-import WorkspacesStore from '../store';
+import { ServicesStore, WorkspacesStore } from '../../../stores.types';
 
-@inject('stores', 'actions') @observer
-class EditWorkspaceScreen extends Component {
-  static propTypes = {
-    actions: PropTypes.shape({
-      workspaces: PropTypes.instanceOf(WorkspacesStore),
-    }).isRequired,
-    stores: PropTypes.shape({
-      services: PropTypes.instanceOf(ServicesStore).isRequired,
-    }).isRequired,
+type Props = {
+  actions: {
+    workspaces: WorkspacesStore;
   };
+  stores: {
+    services: ServicesStore;
+  };
+};
 
+@inject('stores', 'actions')
+@observer
+class EditWorkspaceScreen extends Component<Props> {
+  // @ts-expect-error Not all code paths return a value.
   onDelete = () => {
     const { workspaceBeingEdited } = workspaceStore;
     const { actions } = this.props;
@@ -28,12 +28,14 @@ class EditWorkspaceScreen extends Component {
     actions.workspaces.delete({ workspace: workspaceBeingEdited });
   };
 
-  onSave = (values) => {
+  onSave = values => {
     const { workspaceBeingEdited } = workspaceStore;
     const { actions } = this.props;
-    const workspace = new Workspace(
-      ({ saving: true, ...workspaceBeingEdited, ...values }),
-    );
+    const workspace = new Workspace({
+      saving: true,
+      ...workspaceBeingEdited,
+      ...values,
+    });
     actions.workspaces.update({ workspace });
   };
 
diff --git a/src/features/workspaces/containers/WorkspacesScreen.js b/src/features/workspaces/containers/WorkspacesScreen.tsx
index 2ba3784cb..a07e92439 100644
--- a/src/features/workspaces/containers/WorkspacesScreen.js
+++ b/src/features/workspaces/containers/WorkspacesScreen.tsx
@@ -1,6 +1,5 @@
 import { Component } from 'react';
 import { inject, observer } from 'mobx-react';
-import PropTypes from 'prop-types';
 import WorkspacesDashboard from '../components/WorkspacesDashboard';
 import ErrorBoundary from '../../../components/util/ErrorBoundary';
 import { workspaceStore } from '../index';
@@ -10,16 +9,17 @@ import {
   getUserWorkspacesRequest,
   updateWorkspaceRequest,
 } from '../api';
-import WorkspacesStore from '../store';
+import { WorkspacesStore } from '../../../stores.types';
 
-@inject('stores', 'actions') @observer
-class WorkspacesScreen extends Component {
-  static propTypes = {
-    actions: PropTypes.shape({
-      workspaces: PropTypes.instanceOf(WorkspacesStore),
-    }).isRequired,
+type Props = {
+  actions: {
+    workspaces: WorkspacesStore;
   };
+};
 
+@inject('stores', 'actions')
+@observer
+class WorkspacesScreen extends Component<Props> {
   render() {
     const { actions } = this.props;
     return (
@@ -30,8 +30,8 @@ class WorkspacesScreen extends Component {
           createWorkspaceRequest={createWorkspaceRequest}
           deleteWorkspaceRequest={deleteWorkspaceRequest}
           updateWorkspaceRequest={updateWorkspaceRequest}
-          onCreateWorkspaceSubmit={(data) => actions.workspaces.create(data)}
-          onWorkspaceClick={(w) => actions.workspaces.edit({ workspace: w })}
+          onCreateWorkspaceSubmit={data => actions.workspaces.create(data)}
+          onWorkspaceClick={w => actions.workspaces.edit({ workspace: w })}
         />
       </ErrorBoundary>
     );
diff --git a/src/index.ts b/src/index.ts
index 248c6d110..b4a754289 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -499,7 +499,7 @@ app.on('login', (event, _webContents, _request, authInfo, callback) => {
 
   if (!authInfo.isProxy && authInfo.scheme === 'basic') {
     debug('basic auth handler', authInfo);
-    basicAuthHandler(mainWindow, authInfo);
+    basicAuthHandler(mainWindow!, authInfo);
   }
 });
 
diff --git a/src/stores.types.ts b/src/stores.types.ts
index dd879179d..e5978a392 100644
--- a/src/stores.types.ts
+++ b/src/stores.types.ts
@@ -182,7 +182,7 @@ interface RouterStore {
   replace: () => void;
 }
 
-interface ServicesStore {
+export interface ServicesStore {
   actions: Actions;
   api: Api;
   clearCacheRequest: () => void;
@@ -334,8 +334,13 @@ interface UserStore {
   team: () => void;
 }
 
-interface WorkspacesStore {
+export interface WorkspacesStore {
   activeWorkspace: () => void;
+  delete: ({ workspace }) => void;
+  update: ({ workspace }) => void;
+  create: ({ workspace }) => void;
+  edit: ({ workspace }) => void;
+  saving: boolean;
   filterServicesByActiveWorkspace: () => void;
   isFeatureActive: () => void;
   isFeatureEnabled: () => void;