fix: slack issue caused by input TS conversion

8 files changed, 219 insertions, 143 deletions

diff --git a/src/@types/mobx-form.types.ts b/src/@types/mobx-form.types.ts
index 2a984d3a6..07234a47a 100644
--- a/src/@types/mobx-form.types.ts
+++ b/src/@types/mobx-form.types.ts
@@ -1,3 +1,4 @@
+import { File } from 'electron-dl';
 import { ChangeEventHandler, FocusEventHandler } from 'react';
 import { GlobalError } from './ferdium-components.types';
 
@@ -25,6 +26,8 @@ export interface Field extends Listeners {
   options?: SelectOptions[];
   default?: string | boolean | number | null;
   validators?: any; // Not sure yet.
+  set?: (value: any) => void;
+  [key: string]: any;
 }
 
 export interface SelectOptions {
@@ -37,4 +40,5 @@ export interface Listeners {
   onChange?: ChangeEventHandler<HTMLInputElement | HTMLSelectElement>;
   onBlur?: FocusEventHandler<HTMLElement>;
   onFocus?: FocusEventHandler<HTMLElement>;
+  onDrop?: (file: File) => void;
 }
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.tsx
index eb18b57eb..b594fcd40 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.tsx
@@ -1,25 +1,24 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component, FormEvent, ReactElement } from 'react';
 import { observer } from 'mobx-react';
 import { Link } from 'react-router-dom';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import normalizeUrl from 'normalize-url';
 import { mdiInformation } from '@mdi/js';
 import Form from '../../../lib/Form';
-import Recipe from '../../../models/Recipe';
-import Service from '../../../models/Service';
 import Tabs from '../../ui/Tabs/Tabs';
 import TabItem from '../../ui/Tabs/TabItem';
 import Input from '../../ui/input/index';
 import Toggle from '../../ui/toggle';
 import Slider from '../../ui/Slider';
 import Button from '../../ui/button';
-import ImageUpload from '../../ui/ImageUpload';
+import ImageUpload from '../../ui/imageUpload';
 import Select from '../../ui/Select';
 import { isMac } from '../../../environment';
 import globalMessages from '../../../i18n/globalMessages';
 import Icon from '../../ui/icon';
 import { H3 } from '../../ui/headline';
+import { IRecipe } from '../../../models/Recipe';
+import Service from '../../../models/Service';
 
 const messages = defineMessages({
   saveService: {
@@ -149,36 +148,34 @@ const messages = defineMessages({
   },
 });
 
-class EditServiceForm extends Component {
-  static propTypes = {
-    recipe: PropTypes.instanceOf(Recipe).isRequired,
-    service(props, propName) {
-      if (props.action === 'edit' && !(props[propName] instanceof Service)) {
-        return new Error(`'${propName}'' is expected to be of type 'Service'
-          when editing a Service`);
-      }
+interface IProps extends WrappedComponentProps {
+  recipe: IRecipe;
+  service: Service | null;
+  action?: string;
+  form: Form;
+  onSubmit: (...args: any[]) => void;
+  onDelete: () => void;
+  openRecipeFile: (recipeFile: string) => void;
+  isSaving: boolean;
+  isDeleting: boolean;
+  isProxyFeatureEnabled: boolean;
+}
 
-      return null;
-    },
-    action: PropTypes.string.isRequired,
-    form: PropTypes.instanceOf(Form).isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    onDelete: PropTypes.func.isRequired,
-    openRecipeFile: PropTypes.func.isRequired,
-    isSaving: PropTypes.bool.isRequired,
-    isDeleting: PropTypes.bool.isRequired,
-    isProxyFeatureEnabled: PropTypes.bool.isRequired,
-  };
+interface IState {
+  isValidatingCustomUrl: boolean;
+}
 
-  static defaultProps = {
-    service: {},
-  };
+@observer
+class EditServiceForm extends Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props);
 
-  state = {
-    isValidatingCustomUrl: false,
-  };
+    this.state = {
+      isValidatingCustomUrl: false,
+    };
+  }
 
-  submit(e) {
+  submit(e: FormEvent): void {
     const { recipe } = this.props;
 
     e.preventDefault();
@@ -189,7 +186,8 @@ class EditServiceForm extends Component {
 
         const { files } = form.$('customIcon');
         if (files) {
-          values.iconFile = files[0];
+          const [iconFile] = files;
+          values.iconFile = iconFile;
         }
 
         if (recipe.validateUrl && values.customUrl) {
@@ -219,20 +217,19 @@ class EditServiceForm extends Component {
     });
   }
 
-  render() {
+  render(): ReactElement {
     const {
       recipe,
-      service,
-      action,
+      service = {} as Service,
+      action = '',
       form,
       isSaving,
       isDeleting,
       onDelete,
       openRecipeFile,
       isProxyFeatureEnabled,
+      intl,
     } = this.props;
-    const { intl } = this.props;
-
     const { isValidatingCustomUrl } = this.state;
 
     const deleteButton = isDeleting ? (
@@ -283,7 +280,8 @@ class EditServiceForm extends Component {
                   name: recipe.name,
                 })
               : intl.formatMessage(messages.editServiceHeadline, {
-                  name: service.name !== '' ? service.name : recipe.name,
+                  name:
+                    service && service.name !== '' ? service.name : recipe.name,
                 })}
           </span>
         </div>
@@ -295,23 +293,29 @@ class EditServiceForm extends Component {
             {(recipe.hasTeamId || recipe.hasCustomUrl) && (
               <Tabs active={activeTabIndex}>
                 {recipe.hasHostedOption && (
-                  <TabItem title={recipe.name}>
+                  <TabItem
+                  // title={recipe.name} // TODO - [TS DEBT] property not used inside TabItem need to check it
+                  >
                     {intl.formatMessage(messages.useHostedService, {
                       name: recipe.name,
                     })}
                   </TabItem>
                 )}
                 {recipe.hasTeamId && (
-                  <TabItem title={intl.formatMessage(messages.tabHosted)}>
+                  <TabItem
+                  // title={intl.formatMessage(messages.tabHosted)} // TODO - [TS DEBT] property not used inside TabItem need to check it
+                  >
                     <Input
-                      field={form.$('team')}
+                      {...form.$('team').bind()}
                       prefix={recipe.urlInputPrefix}
                       suffix={recipe.urlInputSuffix}
                     />
                   </TabItem>
                 )}
                 {recipe.hasCustomUrl && (
-                  <TabItem title={intl.formatMessage(messages.tabOnPremise)}>
+                  <TabItem
+                  // title={intl.formatMessage(messages.tabOnPremise)} // TODO - [TS DEBT] property not used inside TabItem need to check it
+                  >
                     <Input {...form.$('customUrl').bind()} />
                     {form.error === 'url-validation-error' && (
                       <p className="franz-form__error">
@@ -404,7 +408,7 @@ class EditServiceForm extends Component {
               </div>
               <div className="service-icon">
                 <ImageUpload
-                  field={form.$('customIcon')}
+                  {...form.$('customIcon').bind()}
                   textDelete={intl.formatMessage(messages.iconDelete)}
                   textUpload={intl.formatMessage(messages.iconUpload)}
                   maxSize={2_097_152}
@@ -533,4 +537,4 @@ class EditServiceForm extends Component {
   }
 }
 
-export default injectIntl(observer(EditServiceForm));
+export default injectIntl(EditServiceForm);
diff --git a/src/components/ui/ImageUpload.tsx b/src/components/ui/imageUpload/index.tsx
index 7732928f8..7a2ca747f 100644
--- a/src/components/ui/ImageUpload.tsx
+++ b/src/components/ui/imageUpload/index.tsx
@@ -1,15 +1,15 @@
-import { Component } from 'react';
+import { Component, InputHTMLAttributes } from 'react';
 import { observer } from 'mobx-react';
-import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
 import Dropzone from 'react-dropzone';
 import { mdiDelete, mdiFileImage } from '@mdi/js';
 import prettyBytes from 'pretty-bytes';
-import { isWindows } from '../../environment';
-import Icon from './icon';
+import { noop } from 'lodash';
+import { isWindows } from '../../../environment';
+import Icon from '../icon';
+import { IFormField } from '../typings/generic';
 
-type Props = {
-  field: typeof Field;
+interface IProps extends InputHTMLAttributes<HTMLInputElement>, IFormField {
   className: string;
   multiple: boolean;
   textDelete: string;
@@ -19,39 +19,43 @@ type Props = {
   maxSize?: number;
   maxFiles?: number;
   messages: any;
-};
+  set?: (value: string) => void;
+}
 
-// Should this file be converted into the coding style similar to './toggle/index.tsx'?
-class ImageUpload extends Component<Props> {
-  static defaultProps = {
-    multiple: false,
-    maxSize: Number.POSITIVE_INFINITY,
-    maxFiles: 0,
-  };
+interface IState {
+  path: string | null;
+  errorState: boolean;
+  errorMessage: { message: string };
+}
 
-  state = {
-    path: null,
-    errorState: false,
-  };
+// TODO - drag and drop image for recipe add/edit not working from 6.2.0 need to look at it
+@observer
+class ImageUpload extends Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props);
 
-  errorMessage = {
-    message: '',
-  };
+    this.state = {
+      path: null,
+      errorState: false,
+      errorMessage: {
+        message: '',
+      },
+    };
+  }
 
-  onDropAccepted(acceptedFiles) {
-    const { field } = this.props;
+  onDropAccepted(acceptedFiles): void {
+    const { onDrop = noop, set = noop } = this.props;
     this.setState({ errorState: false });
 
     for (const file of acceptedFiles) {
-      const imgPath = isWindows ? file.path.replace(/\\/g, '/') : file.path;
-      this.setState({
-        path: imgPath,
-      });
-
-      this.props.field.onDrop(file);
+      const imgPath: string = isWindows
+        ? file.path.replace(/\\/g, '/')
+        : file.path;
+      this.setState({ path: imgPath });
+      onDrop(file);
     }
 
-    field.set('');
+    set('');
   }
 
   onDropRejected(rejectedFiles): void {
@@ -59,11 +63,11 @@ class ImageUpload extends Component<Props> {
       for (const error of file.errors) {
         if (error.code === 'file-too-large') {
           this.setState({ errorState: true });
-          this.setState(
-            (this.errorMessage = {
+          this.setState({
+            errorMessage: {
               message: this.props.textMaxFileSizeError,
-            }),
-          );
+            },
+          });
         }
       }
     }
@@ -71,14 +75,16 @@ class ImageUpload extends Component<Props> {
 
   render() {
     const {
-      field,
       className,
-      multiple,
+      multiple = false,
       textDelete,
       textUpload,
       textMaxFileSize,
-      maxSize,
-      maxFiles,
+      value,
+      maxSize = Number.POSITIVE_INFINITY,
+      maxFiles = 0,
+      label = '',
+      set = noop,
     } = this.props;
 
     const cssClasses = classnames({
@@ -94,27 +100,25 @@ class ImageUpload extends Component<Props> {
     return (
       <div className="image-upload-wrapper">
         <label className="franz-form__label" htmlFor="iconUpload">
-          {field.label}
+          {label}
         </label>
         <div className="image-upload">
-          {(field.value && field.value !== 'delete') || this.state.path ? (
+          {(value && value !== 'delete') || this.state.path ? (
             <>
               <div
                 className="image-upload__preview"
                 style={{
-                  backgroundImage: `url("${this.state.path || field.value}")`,
+                  backgroundImage: `url("${this.state.path || value}")`,
                 }}
               />
               <div className="image-upload__action">
                 <button
                   type="button"
                   onClick={() => {
-                    if (field.value) {
-                      field.set('delete');
+                    if (value) {
+                      set('delete');
                     } else {
-                      this.setState({
-                        path: null,
-                      });
+                      this.setState({ path: null });
                     }
                   }}
                 >
@@ -152,7 +156,7 @@ class ImageUpload extends Component<Props> {
         )}
         {this.state.errorState && (
           <span className="image-upload-wrapper__file-size-error">
-            {this.errorMessage.message}
+            {this.state.errorMessage.message}
           </span>
         )}
       </div>
@@ -160,4 +164,4 @@ class ImageUpload extends Component<Props> {
   }
 }
 
-export default observer(ImageUpload);
+export default ImageUpload;
diff --git a/src/components/ui/toggle/index.tsx b/src/components/ui/toggle/index.tsx
index fee8adbc7..828941886 100644
--- a/src/components/ui/toggle/index.tsx
+++ b/src/components/ui/toggle/index.tsx
@@ -1,7 +1,7 @@
 import classnames from 'classnames';
 import { Property } from 'csstype';
 import { noop } from 'lodash';
-import { Component, InputHTMLAttributes } from 'react';
+import { Component, InputHTMLAttributes, ReactElement } from 'react';
 import withStyles, { WithStylesProps } from 'react-jss';
 import { Theme } from '../../../themes';
 import Error from '../error';
@@ -10,11 +10,10 @@ import { IFormField } from '../typings/generic';
 import Wrapper from '../wrapper';
 
 interface IProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value'>,
+  extends InputHTMLAttributes<HTMLInputElement>,
     IFormField,
     WithStylesProps<typeof styles> {
   className?: string;
-  value: boolean | undefined; // due to type capability between InputHTMLAttributes and mobx-react-form
 }
 
 const buttonTransition: string =
@@ -62,8 +61,8 @@ const styles = (theme: Theme) => ({
   },
 });
 
-class ToggleComponent extends Component<IProps> {
-  render() {
+class Toggle extends Component<IProps> {
+  render(): ReactElement {
     const {
       classes,
       className,
@@ -71,7 +70,7 @@ class ToggleComponent extends Component<IProps> {
       name = '',
       label = '',
       error = '',
-      value = false,
+      checked = false,
       showLabel = true,
       disabled = false,
       onChange = noop,
@@ -94,14 +93,14 @@ class ToggleComponent extends Component<IProps> {
             <div
               className={classnames({
                 [`${classes.button}`]: true,
-                [`${classes.buttonActive}`]: value,
+                [`${classes.buttonActive}`]: checked,
               })}
             />
             <input
               type="checkbox"
               id={id}
               name={name}
-              checked={value as boolean | undefined}
+              checked={checked}
               className={classes.input}
               onChange={onChange}
               disabled={disabled}
@@ -114,4 +113,4 @@ class ToggleComponent extends Component<IProps> {
   }
 }
 
-export default withStyles(styles, { injectTheme: true })(ToggleComponent);
+export default withStyles(styles, { injectTheme: true })(Toggle);
diff --git a/src/containers/settings/EditServiceScreen.tsx b/src/containers/settings/EditServiceScreen.tsx
index d0f0c779d..09dd19925 100644
--- a/src/containers/settings/EditServiceScreen.tsx
+++ b/src/containers/settings/EditServiceScreen.tsx
@@ -1,25 +1,19 @@
 import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
-import { defineMessages, injectIntl } from 'react-intl';
-
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { Params } from 'react-router-dom';
 import { StoresProps } from '../../@types/ferdium-components.types';
 import { IRecipe } from '../../models/Recipe';
 import Service from '../../models/Service';
 import { FormFields } from '../../@types/mobx-form.types';
 import Form from '../../lib/Form';
-
 import ServiceError from '../../components/settings/services/ServiceError';
 import EditServiceForm from '../../components/settings/services/EditServiceForm';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
-
 import { required, url, oneRequired } from '../../helpers/validation-helpers';
 import { getSelectOptions } from '../../helpers/i18n-helpers';
-
 import { config as proxyFeature } from '../../features/serviceProxy';
-
 import { SPELLCHECKER_LOCALES } from '../../i18n/languages';
-
 import globalMessages from '../../i18n/globalMessages';
 import { DEFAULT_APP_SETTINGS, DEFAULT_SERVICE_SETTINGS } from '../../config';
 import withParams from '../../components/util/WithParams';
@@ -123,13 +117,22 @@ const messages = defineMessages({
   },
 });
 
-interface EditServicesScreenProps extends StoresProps {
-  intl: any;
+interface IProxyConfig {
+  isEnabled?: boolean;
+  host?: string;
+  port?: number;
+  user?: string;
+  password?: string;
+}
+
+interface IProps extends StoresProps, WrappedComponentProps {
   params: Params;
 }
 
-class EditServiceScreen extends Component<EditServicesScreenProps> {
-  onSubmit(data: any) {
+@inject('stores', 'actions')
+@observer
+class EditServiceScreen extends Component<IProps> {
+  onSubmit(data: any): void {
     const { action } = this.props.params;
     const { recipes, services } = this.props.stores;
     const { createService, updateService } = this.props.actions.service;
@@ -153,9 +156,7 @@ class EditServiceScreen extends Component<EditServicesScreenProps> {
   }
 
   prepareForm(recipe: IRecipe, service: Service | null, proxy: any): Form {
-    const { intl } = this.props;
-
-    const { stores } = this.props;
+    const { stores, intl } = this.props;
 
     let defaultSpellcheckerLanguage =
       SPELLCHECKER_LOCALES[stores.settings.app.spellcheckerLanguage];
@@ -189,41 +190,49 @@ class EditServiceScreen extends Component<EditServicesScreenProps> {
           label: intl.formatMessage(messages.enableService),
           value: service?.isEnabled,
           default: DEFAULT_SERVICE_SETTINGS.isEnabled,
+          type: 'checkbox',
         },
         isHibernationEnabled: {
           label: intl.formatMessage(messages.enableHibernation),
           value: service?.isHibernationEnabled,
           default: DEFAULT_SERVICE_SETTINGS.isHibernationEnabled,
+          type: 'checkbox',
         },
         isWakeUpEnabled: {
           label: intl.formatMessage(messages.enableWakeUp),
           value: service?.isWakeUpEnabled,
           default: DEFAULT_SERVICE_SETTINGS.isWakeUpEnabled,
+          type: 'checkbox',
         },
         isNotificationEnabled: {
           label: intl.formatMessage(messages.enableNotification),
           value: service?.isNotificationEnabled,
           default: DEFAULT_SERVICE_SETTINGS.isNotificationEnabled,
+          type: 'checkbox',
         },
         isBadgeEnabled: {
           label: intl.formatMessage(messages.enableBadge),
           value: service?.isBadgeEnabled,
           default: DEFAULT_SERVICE_SETTINGS.isBadgeEnabled,
+          type: 'checkbox',
         },
         isMediaBadgeEnabled: {
           label: intl.formatMessage(messages.enableMediaBadge),
           value: service?.isMediaBadgeEnabled,
           default: DEFAULT_SERVICE_SETTINGS.isMediaBadgeEnabled,
+          type: 'checkbox',
         },
         trapLinkClicks: {
           label: intl.formatMessage(messages.trapLinkClicks),
           value: service?.trapLinkClicks,
           default: DEFAULT_SERVICE_SETTINGS.trapLinkClicks,
+          type: 'checkbox',
         },
         isMuted: {
           label: intl.formatMessage(messages.enableAudio),
           value: !service?.isMuted,
           default: DEFAULT_SERVICE_SETTINGS.isMuted,
+          type: 'checkbox',
         },
         customIcon: {
           label: intl.formatMessage(messages.icon),
@@ -235,6 +244,7 @@ class EditServiceScreen extends Component<EditServicesScreenProps> {
           label: intl.formatMessage(messages.enableDarkMode),
           value: service?.isDarkModeEnabled,
           default: stores.settings.app.darkMode,
+          type: 'checkbox',
         },
         darkReaderBrightness: {
           label: intl.formatMessage(messages.darkReaderBrightness),
@@ -261,6 +271,7 @@ class EditServiceScreen extends Component<EditServicesScreenProps> {
           label: intl.formatMessage(messages.enableProgressbar),
           value: service?.isProgressbarEnabled,
           default: DEFAULT_SERVICE_SETTINGS.isProgressbarEnabled,
+          type: 'checkbox',
         },
         spellcheckerLanguage: {
           label: intl.formatMessage(globalMessages.spellcheckerLanguage),
@@ -277,25 +288,28 @@ class EditServiceScreen extends Component<EditServicesScreenProps> {
     };
 
     if (recipe.hasTeamId) {
-      Object.assign(config.fields, {
+      config.fields = {
+        ...config.fields,
+
         team: {
           label: intl.formatMessage(messages.team),
           placeholder: intl.formatMessage(messages.team),
           value: service?.team,
           validators: [required],
         },
-      });
+      };
     }
 
     if (recipe.hasCustomUrl) {
-      Object.assign(config.fields, {
+      config.fields = {
+        ...config.fields,
         customUrl: {
           label: intl.formatMessage(messages.customUrl),
           placeholder: "'http://' or 'https://' or 'file:///'",
           value: service?.customUrl || recipe.serviceURL,
           validators: [required, url],
         },
-      });
+      };
     }
 
     // More fine grained and use case specific validation rules
@@ -318,38 +332,37 @@ class EditServiceScreen extends Component<EditServicesScreenProps> {
     }
 
     if (recipe.hasIndirectMessages) {
-      Object.assign(config.fields, {
+      config.fields = {
+        ...config.fields,
         isIndirectMessageBadgeEnabled: {
           label: intl.formatMessage(messages.indirectMessages),
           value: service?.isIndirectMessageBadgeEnabled,
           default: DEFAULT_SERVICE_SETTINGS.hasIndirectMessages,
+          type: 'checkbox',
         },
-      });
+      };
     }
 
     if (recipe.allowFavoritesDelineationInUnreadCount) {
-      Object.assign(config.fields, {
+      config.fields = {
+        ...config.fields,
         onlyShowFavoritesInUnreadCount: {
           label: intl.formatMessage(messages.onlyShowFavoritesInUnreadCount),
           value: service?.onlyShowFavoritesInUnreadCount,
           default: DEFAULT_APP_SETTINGS.onlyShowFavoritesInUnreadCount,
+          type: 'checkbox',
         },
-      });
+      };
     }
 
     if (proxy.isEnabled) {
-      let serviceProxyConfig: {
-        isEnabled?: boolean;
-        host?: string;
-        port?: number;
-        user?: string;
-        password?: string;
-      } = {};
+      let serviceProxyConfig: IProxyConfig = {};
       if (service) {
         serviceProxyConfig = stores.settings.proxy[service.id] || {};
       }
 
-      Object.assign(config.fields, {
+      config.fields = {
+        ...config.fields,
         proxy: {
           name: 'proxy',
           label: 'proxy',
@@ -358,6 +371,7 @@ class EditServiceScreen extends Component<EditServicesScreenProps> {
               label: intl.formatMessage(messages.enableProxy),
               value: serviceProxyConfig.isEnabled,
               default: DEFAULT_APP_SETTINGS.proxyFeatureEnabled,
+              type: 'checkbox',
             },
             host: {
               label: intl.formatMessage(messages.proxyHost),
@@ -382,11 +396,10 @@ class EditServiceScreen extends Component<EditServicesScreenProps> {
             },
           },
         },
-      });
+      };
     }
 
     // @ts-ignore: Remove this ignore once mobx-react-form v4 with typescript
-    // support has been released.
     return new Form(config);
   }
 
@@ -417,7 +430,11 @@ class EditServiceScreen extends Component<EditServicesScreenProps> {
   }
 
   render(): ReactElement {
-    const { recipes, services, user } = this.props.stores;
+    const {
+      recipes,
+      services,
+      //  user
+    } = this.props.stores;
     const { action } = this.props.params;
 
     let recipe: null | IRecipe = null;
@@ -455,9 +472,9 @@ class EditServiceScreen extends Component<EditServicesScreenProps> {
           action={action}
           recipe={recipe}
           service={service}
-          user={user.data}
+          // user={user.data} // TODO - [TS DEBT] Need to check why its passed as its not used inside EditServiceForm
           form={form}
-          status={services.actionStatus}
+          // status={services.actionStatus} // TODO - [TS DEBT] Need to check why its passed as its not used inside EditServiceForm
           isSaving={
             services.updateServiceRequest.isExecuting ||
             services.createServiceRequest.isExecuting
@@ -473,8 +490,4 @@ class EditServiceScreen extends Component<EditServicesScreenProps> {
   }
 }
 
-export default withParams(
-  injectIntl<'intl', EditServicesScreenProps>(
-    inject('stores', 'actions')(observer(EditServiceScreen)),
-  ),
-);
+export default withParams(injectIntl(EditServiceScreen));
diff --git a/src/containers/settings/EditSettingsScreen.tsx b/src/containers/settings/EditSettingsScreen.tsx
index 91752ad43..f18eb24a7 100644
--- a/src/containers/settings/EditSettingsScreen.tsx
+++ b/src/containers/settings/EditSettingsScreen.tsx
@@ -544,26 +544,31 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
           label: intl.formatMessage(messages.autoLaunchOnStart),
           value: app.autoLaunchOnStart,
           default: DEFAULT_APP_SETTINGS.autoLaunchOnStart,
+          type: 'checkbox',
         },
         autoLaunchInBackground: {
           label: intl.formatMessage(messages.autoLaunchInBackground),
           value: app.launchInBackground,
           default: DEFAULT_APP_SETTINGS.autoLaunchInBackground,
+          type: 'checkbox',
         },
         runInBackground: {
           label: intl.formatMessage(messages.runInBackground),
           value: settings.all.app.runInBackground,
           default: DEFAULT_APP_SETTINGS.runInBackground,
+          type: 'checkbox',
         },
         startMinimized: {
           label: intl.formatMessage(messages.startMinimized),
           value: settings.all.app.startMinimized,
           default: DEFAULT_APP_SETTINGS.startMinimized,
+          type: 'checkbox',
         },
         confirmOnQuit: {
           label: intl.formatMessage(messages.confirmOnQuit),
           value: settings.all.app.confirmOnQuit,
           default: DEFAULT_APP_SETTINGS.confirmOnQuit,
+          type: 'checkbox',
         },
         enableSystemTray: {
           label: intl.formatMessage(
@@ -571,11 +576,13 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
           ),
           value: settings.all.app.enableSystemTray,
           default: DEFAULT_APP_SETTINGS.enableSystemTray,
+          type: 'checkbox',
         },
         reloadAfterResume: {
           label: intl.formatMessage(messages.reloadAfterResume),
           value: settings.all.app.reloadAfterResume,
           default: DEFAULT_APP_SETTINGS.reloadAfterResume,
+          type: 'checkbox',
         },
         reloadAfterResumeTime: {
           label: intl.formatMessage(messages.reloadAfterResumeTime),
@@ -586,26 +593,31 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
           label: intl.formatMessage(messages.minimizeToSystemTray),
           value: settings.all.app.minimizeToSystemTray,
           default: DEFAULT_APP_SETTINGS.minimizeToSystemTray,
+          type: 'checkbox',
         },
         closeToSystemTray: {
           label: intl.formatMessage(messages.closeToSystemTray),
           value: settings.all.app.closeToSystemTray,
           default: DEFAULT_APP_SETTINGS.closeToSystemTray,
+          type: 'checkbox',
         },
         privateNotifications: {
           label: intl.formatMessage(messages.privateNotifications),
           value: settings.all.app.privateNotifications,
           default: DEFAULT_APP_SETTINGS.privateNotifications,
+          type: 'checkbox',
         },
         clipboardNotifications: {
           label: intl.formatMessage(messages.clipboardNotifications),
           value: settings.all.app.clipboardNotifications,
           default: DEFAULT_APP_SETTINGS.clipboardNotifications,
+          type: 'checkbox',
         },
         notifyTaskBarOnMessage: {
           label: intl.formatMessage(messages.notifyTaskBarOnMessage),
           value: settings.all.app.notifyTaskBarOnMessage,
           default: DEFAULT_APP_SETTINGS.notifyTaskBarOnMessage,
+          type: 'checkbox',
         },
         navigationBarBehaviour: {
           label: intl.formatMessage(messages.navigationBarBehaviour),
@@ -618,6 +630,7 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
           value: settings.all.app.webRTCIPHandlingPolicy,
           default: DEFAULT_APP_SETTINGS.webRTCIPHandlingPolicy,
           options: webRTCIPHandlingPolicies,
+          type: 'checkbox',
         },
         searchEngine: {
           label: intl.formatMessage(messages.searchEngine),
@@ -641,11 +654,13 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
           label: intl.formatMessage(messages.sentry),
           value: settings.all.app.sentry,
           default: DEFAULT_APP_SETTINGS.sentry,
+          type: 'checkbox',
         },
         hibernateOnStartup: {
           label: intl.formatMessage(messages.hibernateOnStartup),
           value: settings.all.app.hibernateOnStartup,
           default: DEFAULT_APP_SETTINGS.hibernateOnStartup,
+          type: 'checkbox',
         },
         hibernationStrategy: {
           label: intl.formatMessage(messages.hibernationStrategy),
@@ -669,6 +684,7 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
           label: intl.formatMessage(messages.wakeUpHibernationSplay),
           value: settings.all.app.wakeUpHibernationSplay,
           default: DEFAULT_APP_SETTINGS.wakeUpHibernationSplay,
+          type: 'checkbox',
         },
         predefinedTodoServer: {
           label: intl.formatMessage(messages.predefinedTodoServer),
@@ -685,6 +701,7 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
           label: intl.formatMessage(messages.enableLock),
           value: settings.all.app.lockingFeatureEnabled || false,
           default: DEFAULT_APP_SETTINGS.lockingFeatureEnabled,
+          type: 'checkbox',
         },
         lockedPassword: {
           label: intl.formatMessage(messages.lockPassword),
@@ -696,6 +713,7 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
           label: intl.formatMessage(messages.useTouchIdToUnlock),
           value: settings.all.app.useTouchIdToUnlock,
           default: DEFAULT_APP_SETTINGS.useTouchIdToUnlock,
+          type: 'checkbox',
         },
         inactivityLock: {
           label: intl.formatMessage(messages.inactivityLock),
@@ -707,6 +725,7 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
           label: intl.formatMessage(messages.scheduledDNDEnabled),
           value: settings.all.app.scheduledDNDEnabled || false,
           default: DEFAULT_APP_SETTINGS.scheduledDNDEnabled,
+          type: 'checkbox',
         },
         scheduledDNDStart: {
           label: intl.formatMessage(messages.scheduledDNDStart),
@@ -724,31 +743,37 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
           label: intl.formatMessage(messages.showDisabledServices),
           value: settings.all.app.showDisabledServices,
           default: DEFAULT_APP_SETTINGS.showDisabledServices,
+          type: 'checkbox',
         },
         showServiceName: {
           label: intl.formatMessage(messages.showServiceName),
           value: settings.all.app.showServiceName,
           default: DEFAULT_APP_SETTINGS.showServiceName,
+          type: 'checkbox',
         },
         showMessageBadgeWhenMuted: {
           label: intl.formatMessage(messages.showMessageBadgeWhenMuted),
           value: settings.all.app.showMessageBadgeWhenMuted,
           default: DEFAULT_APP_SETTINGS.showMessageBadgeWhenMuted,
+          type: 'checkbox',
         },
         showDragArea: {
           label: intl.formatMessage(messages.showDragArea),
           value: settings.all.app.showDragArea,
           default: DEFAULT_APP_SETTINGS.showDragArea,
+          type: 'checkbox',
         },
         enableSpellchecking: {
           label: intl.formatMessage(messages.enableSpellchecking),
           value: settings.all.app.enableSpellchecking,
           default: DEFAULT_APP_SETTINGS.enableSpellchecking,
+          type: 'checkbox',
         },
         enableTranslator: {
           label: intl.formatMessage(messages.enableTranslator),
           value: settings.all.app.enableTranslator,
           default: DEFAULT_APP_SETTINGS.enableTranslator,
+          type: 'checkbox',
         },
         spellcheckerLanguage: {
           label: intl.formatMessage(globalMessages.spellcheckerLanguage),
@@ -766,21 +791,25 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
           label: intl.formatMessage(messages.darkMode),
           value: settings.all.app.darkMode,
           default: DEFAULT_APP_SETTINGS.darkMode,
+          type: 'checkbox',
         },
         adaptableDarkMode: {
           label: intl.formatMessage(messages.adaptableDarkMode),
           value: settings.all.app.adaptableDarkMode,
           default: DEFAULT_APP_SETTINGS.adaptableDarkMode,
+          type: 'checkbox',
         },
         universalDarkMode: {
           label: intl.formatMessage(messages.universalDarkMode),
           value: settings.all.app.universalDarkMode,
           default: DEFAULT_APP_SETTINGS.universalDarkMode,
+          type: 'checkbox',
         },
         splitMode: {
           label: intl.formatMessage(messages.splitMode),
           value: settings.all.app.splitMode,
           default: DEFAULT_APP_SETTINGS.splitMode,
+          type: 'checkbox',
         },
         splitColumns: {
           label: `${intl.formatMessage(
@@ -811,31 +840,37 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
           label: intl.formatMessage(messages.enableLongPressServiceHint),
           value: settings.all.app.enableLongPressServiceHint,
           default: DEFAULT_APP_SETTINGS.enableLongPressServiceHint,
+          type: 'checkbox',
         },
         useHorizontalStyle: {
           label: intl.formatMessage(messages.useHorizontalStyle),
           value: settings.all.app.useHorizontalStyle,
           default: DEFAULT_APP_SETTINGS.useHorizontalStyle,
+          type: 'checkbox',
         },
         hideCollapseButton: {
           label: intl.formatMessage(messages.hideCollapseButton),
           value: settings.all.app.hideCollapseButton,
           default: DEFAULT_APP_SETTINGS.hideCollapseButton,
+          type: 'checkbox',
         },
         hideRecipesButton: {
           label: intl.formatMessage(messages.hideRecipesButton),
           value: settings.all.app.hideRecipesButton,
           default: DEFAULT_APP_SETTINGS.hideRecipesButton,
+          type: 'checkbox',
         },
         hideSplitModeButton: {
           label: intl.formatMessage(messages.hideSplitModeButton),
           value: settings.all.app.hideSplitModeButton,
           default: DEFAULT_APP_SETTINGS.hideSplitModeButton,
+          type: 'checkbox',
         },
         useGrayscaleServices: {
           label: intl.formatMessage(messages.useGrayscaleServices),
           value: settings.all.app.useGrayscaleServices,
           default: DEFAULT_APP_SETTINGS.useGrayscaleServices,
+          type: 'checkbox',
         },
         grayscaleServicesDim: {
           label: intl.formatMessage(messages.grayscaleServicesDim),
@@ -846,21 +881,25 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
           label: intl.formatMessage(messages.hideWorkspacesButton),
           value: settings.all.app.hideWorkspacesButton,
           default: DEFAULT_APP_SETTINGS.hideWorkspacesButton,
+          type: 'checkbox',
         },
         hideNotificationsButton: {
           label: intl.formatMessage(messages.hideNotificationsButton),
           value: settings.all.app.hideNotificationsButton,
           default: DEFAULT_APP_SETTINGS.hideNotificationsButton,
+          type: 'checkbox',
         },
         hideSettingsButton: {
           label: intl.formatMessage(messages.hideSettingsButton),
           value: settings.all.app.hideSettingsButton,
           default: DEFAULT_APP_SETTINGS.hideSettingsButton,
+          type: 'checkbox',
         },
         alwaysShowWorkspaces: {
           label: intl.formatMessage(messages.alwaysShowWorkspaces),
           value: settings.all.app.alwaysShowWorkspaces,
           default: DEFAULT_APP_SETTINGS.alwaysShowWorkspaces,
+          type: 'checkbox',
         },
         accentColor: {
           label: intl.formatMessage(messages.accentColor),
@@ -876,11 +915,13 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
           label: intl.formatMessage(messages.enableGPUAcceleration),
           value: settings.all.app.enableGPUAcceleration,
           default: DEFAULT_APP_SETTINGS.enableGPUAcceleration,
+          type: 'checkbox',
         },
         enableGlobalHideShortcut: {
           label: intl.formatMessage(messages.enableGlobalHideShortcut),
           value: settings.all.app.enableGlobalHideShortcut,
           default: DEFAULT_APP_SETTINGS.enableGlobalHideShortcut,
+          type: 'checkbox',
         },
         locale: {
           label: intl.formatMessage(messages.language),
@@ -897,6 +938,7 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
           label: intl.formatMessage(messages.automaticUpdates),
           value: settings.app.automaticUpdates,
           default: DEFAULT_APP_SETTINGS.automaticUpdates,
+          type: 'checkbox',
         },
       },
     };
@@ -914,6 +956,7 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
         label: intl.formatMessage(messages.keepAllWorkspacesLoaded),
         value: workspaces.settings.keepAllWorkspacesLoaded,
         default: DEFAULT_SETTING_KEEP_ALL_WORKSPACES_LOADED,
+        type: 'checkbox',
       };
     }
 
@@ -922,6 +965,7 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
         label: intl.formatMessage(messages.enableTodos),
         value: todos.settings.isFeatureEnabledByUser,
         default: DEFAULT_IS_FEATURE_ENABLED_BY_USER,
+        type: 'checkbox',
       };
     }
 
diff --git a/src/features/workspaces/components/WorkspaceServiceListItem.tsx b/src/features/workspaces/components/WorkspaceServiceListItem.tsx
index 420aed595..e708d5cdf 100644
--- a/src/features/workspaces/components/WorkspaceServiceListItem.tsx
+++ b/src/features/workspaces/components/WorkspaceServiceListItem.tsx
@@ -53,7 +53,7 @@ class WorkspaceServiceListItem extends Component<IProps> {
         </span>
         <Toggle
           className={classes.toggle}
-          value={isInWorkspace}
+          checked={isInWorkspace}
           onChange={onToggle}
         />
       </div>
diff --git a/src/models/Recipe.ts b/src/models/Recipe.ts
index 6911f7301..8b4c7a8ba 100644
--- a/src/models/Recipe.ts
+++ b/src/models/Recipe.ts
@@ -55,6 +55,11 @@ export interface IRecipe {
   readonly modifyRequestHeaders?: null | Function;
   readonly knownCertificateHosts?: null | Function;
   readonly events?: null | { (key: string): string };
+
+  // TODO - [TS DEBT] Need to check if below properties are needed and where is inherited / implemented from
+  author?: string[];
+  hasDarkMode?: boolean;
+  validateUrl?: (url: string) => boolean;
 }
 
 export default class Recipe implements IRecipe {
@@ -102,6 +107,9 @@ export default class Recipe implements IRecipe {
   // TODO: Is this being used?
   local = false;
 
+  // TODO - [TS DEBT] introduced to address missing function but need to check how validateUrl is inherited / implemented in recipe
+  validateUrl?: (url: string) => boolean;
+
   // TODO: Need to reconcile which of these are optional/mandatory
   constructor(data: RecipeData) {
     if (!data) {