Transform service components to ts (#778)

13 files changed, 285 insertions, 262 deletions

diff --git a/src/components/services/content/ConnectionLostBanner.js b/src/components/services/content/ConnectionLostBanner.tsx
index f2f70ca2e..88731f3b9 100644
--- a/src/components/services/content/ConnectionLostBanner.js
+++ b/src/components/services/content/ConnectionLostBanner.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 injectSheet from 'react-jss';
-import { defineMessages, injectIntl } from 'react-intl';
-
+import withStyles, { WithStylesProps } from 'react-jss';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { mdiAlert } from '@mdi/js';
 import { LIVE_API_FERDIUM_WEBSITE } from '../../../config';
 import Icon from '../../ui/icon';
@@ -23,11 +21,10 @@ const messages = defineMessages({
   },
 });
 
-let buttonTransition = 'none';
-
-if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
-  buttonTransition = 'opacity 0.25s';
-}
+const buttonTransition =
+  window && window.matchMedia('(prefers-reduced-motion: no-preference)')
+    ? 'opacity 0.25s'
+    : 'none';
 
 const styles = theme => ({
   root: {
@@ -68,17 +65,15 @@ const styles = theme => ({
   },
 });
 
-class ConnectionLostBanner extends Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    name: PropTypes.string.isRequired,
-    reload: PropTypes.func.isRequired,
-  };
-
-  render() {
-    const { classes, name, reload } = this.props;
+interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps {
+  name: string;
+  reload: () => void;
+}
 
-    const { intl } = this.props;
+@observer
+class ConnectionLostBanner extends Component<IProps> {
+  render(): ReactElement {
+    const { classes, name, reload, intl } = this.props;
 
     return (
       <div className={classes.root}>
@@ -101,4 +96,4 @@ class ConnectionLostBanner extends Component {
   }
 }
 
-export default injectIntl(injectSheet(styles)(observer(ConnectionLostBanner)));
+export default injectIntl(withStyles(styles)(ConnectionLostBanner));
diff --git a/src/components/services/content/ErrorHandlers/styles.ts b/src/components/services/content/ErrorHandlers/styles.ts
deleted file mode 100644
index 9e2509ee5..000000000
--- a/src/components/services/content/ErrorHandlers/styles.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export default theme => ({
-  component: {
-    left: 0,
-    position: 'absolute',
-    top: 0,
-    width: '100%',
-    zIndex: 0,
-    alignItems: 'center',
-    background: theme.colorWebviewErrorHandlerBackground,
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    textAlign: 'center',
-  },
-  buttonContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    height: 'auto',
-    margin: [40, 0, 20],
-
-    '& button': {
-      margin: [0, 10, 0, 10],
-    },
-  },
-});
diff --git a/src/components/services/content/ServiceDisabled.js b/src/components/services/content/ServiceDisabled.tsx
index d874a354e..2f0d439ec 100644
--- a/src/components/services/content/ServiceDisabled.js
+++ b/src/components/services/content/ServiceDisabled.tsx
@@ -1,8 +1,6 @@
-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 Button from '../../ui/button';
 import { H1 } from '../../ui/headline';
 
@@ -17,15 +15,15 @@ const messages = defineMessages({
   },
 });
 
-class ServiceDisabled extends Component {
-  static propTypes = {
-    name: PropTypes.string.isRequired,
-    enable: PropTypes.func.isRequired,
-  };
+interface IProps extends WrappedComponentProps {
+  name: string;
+  enable: () => void;
+}
 
-  render() {
-    const { name, enable } = this.props;
-    const { intl } = this.props;
+@observer
+class ServiceDisabled extends Component<IProps> {
+  render(): ReactElement {
+    const { name, enable, intl } = this.props;
 
     return (
       <div className="services__info-layer">
@@ -40,4 +38,4 @@ class ServiceDisabled extends Component {
   }
 }
 
-export default injectIntl(observer(ServiceDisabled));
+export default injectIntl(ServiceDisabled);
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.tsx
index cae16ef49..e41184431 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.tsx
@@ -1,52 +1,55 @@
-/* eslint-disable react/jsx-no-useless-fragment */
 import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { autorun } from 'mobx';
+import { autorun, IReactionDisposer } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import classnames from 'classnames';
 import TopBarProgress from 'react-topbar-progress-indicator';
-
 import ServiceModel from '../../../models/Service';
 import StatusBarTargetUrl from '../../ui/StatusBarTargetUrl';
 import WebviewLoader from '../../ui/WebviewLoader';
 import WebviewCrashHandler from './WebviewCrashHandler';
-import WebviewErrorHandler from './ErrorHandlers/WebviewErrorHandler';
+import WebviewErrorHandler from './WebviewErrorHandler';
 import ServiceDisabled from './ServiceDisabled';
 import ServiceWebview from './ServiceWebview';
-import SettingsStore from '../../../stores/SettingsStore';
 import WebControlsScreen from '../../../features/webControls/containers/WebControlsScreen';
 import { CUSTOM_WEBSITE_RECIPE_ID } from '../../../config';
+import { RealStores } from '../../../stores';
+
+interface IProps {
+  service: ServiceModel;
+  setWebviewRef: () => void;
+  detachService: () => void;
+  reload: () => void;
+  edit: () => void;
+  enable: () => void;
+  // isActive?: boolean; // TODO - [TECH DEBT][PROP NOT USED IN COMPONENT] check it
+  stores?: RealStores;
+  isSpellcheckerEnabled: boolean;
+}
+
+interface IState {
+  forceRepaint: boolean;
+  targetUrl: string;
+  statusBarVisible: boolean;
+}
+
+@inject('stores', 'actions')
+@observer
+class ServiceView extends Component<IProps, IState> {
+  // hibernationTimer = null; //  TODO - [TS DEBT] class property not reassigned, need to find its purpose
 
-class ServiceView extends Component {
-  static propTypes = {
-    service: PropTypes.instanceOf(ServiceModel).isRequired,
-    setWebviewReference: PropTypes.func.isRequired,
-    detachService: PropTypes.func.isRequired,
-    reload: PropTypes.func.isRequired,
-    edit: PropTypes.func.isRequired,
-    enable: PropTypes.func.isRequired,
-    isActive: PropTypes.bool,
-    stores: PropTypes.shape({
-      settings: PropTypes.instanceOf(SettingsStore).isRequired,
-    }).isRequired,
-    isSpellcheckerEnabled: PropTypes.bool.isRequired,
-  };
-
-  static defaultProps = {
-    isActive: false,
-  };
-
-  state = {
-    forceRepaint: false,
-    targetUrl: '',
-    statusBarVisible: false,
-  };
-
-  hibernationTimer = null;
-
-  autorunDisposer = null;
-
-  forceRepaintTimeout = null;
+  autorunDisposer: IReactionDisposer | undefined;
+
+  forceRepaintTimeout: NodeJS.Timeout | undefined;
+
+  constructor(props: IProps) {
+    super(props);
+
+    this.state = {
+      forceRepaint: false,
+      targetUrl: '',
+      statusBarVisible: false,
+    };
+  }
 
   componentDidMount() {
     this.autorunDisposer = autorun(() => {
@@ -60,16 +63,16 @@ class ServiceView extends Component {
   }
 
   componentWillUnmount() {
-    this.autorunDisposer();
-    clearTimeout(this.forceRepaintTimeout);
-    clearTimeout(this.hibernationTimer);
+    this.autorunDisposer!();
+    clearTimeout(this.forceRepaintTimeout!);
+    // clearTimeout(this.hibernationTimer); //  TODO - [TS DEBT] class property not reassigned, need to find its purpose
   }
 
   render() {
     const {
       detachService,
       service,
-      setWebviewReference,
+      setWebviewRef,
       reload,
       edit,
       enable,
@@ -78,7 +81,7 @@ class ServiceView extends Component {
     } = this.props;
 
     const { navigationBarBehaviour, navigationBarManualActive } =
-      stores.settings.app;
+      stores!.settings.app;
 
     const showNavBar =
       navigationBarBehaviour === 'always' ||
@@ -93,10 +96,9 @@ class ServiceView extends Component {
       'services__webview--force-repaint': this.state.forceRepaint,
     });
 
-    let statusBar = null;
-    if (this.state.statusBarVisible) {
-      statusBar = <StatusBarTargetUrl text={this.state.targetUrl} />;
-    }
+    const statusBar = this.state.statusBarVisible ? (
+      <StatusBarTargetUrl text={this.state.targetUrl} />
+    ) : null;
 
     return (
       <div
@@ -109,7 +111,7 @@ class ServiceView extends Component {
             {service.hasCrashed && (
               <WebviewCrashHandler
                 name={service.recipe.name}
-                webview={service.webview}
+                // webview={service.webview} //  TODO - [TECH DEBT][PROPS NOT EXIST IN COMPONENT] check it
                 reload={reload}
               />
             )}
@@ -138,7 +140,7 @@ class ServiceView extends Component {
             {service.isActive && (
               <ServiceDisabled
                 name={service.name !== '' ? service.name : service.recipe.name}
-                webview={service.webview}
+                // webview={service.webview} //  TODO - [TECH DEBT][PROPS NOT EXIST IN COMPONENT] check it
                 enable={enable}
               />
             )}
@@ -150,7 +152,7 @@ class ServiceView extends Component {
                 {showNavBar && <WebControlsScreen service={service} />}
                 <ServiceWebview
                   service={service}
-                  setWebviewReference={setWebviewReference}
+                  setWebviewReference={setWebviewRef}
                   detachService={detachService}
                   isSpellcheckerEnabled={isSpellcheckerEnabled}
                 />
@@ -187,4 +189,4 @@ class ServiceView extends Component {
   }
 }
 
-export default inject('stores', 'actions')(observer(ServiceView));
+export default ServiceView;
diff --git a/src/components/services/content/Services.tsx b/src/components/services/content/Services.tsx
index 53cddd907..fa26edaa6 100644
--- a/src/components/services/content/Services.tsx
+++ b/src/components/services/content/Services.tsx
@@ -42,8 +42,8 @@ interface IProps extends WrappedComponentProps, WithStylesProps<typeof styles> {
   services?: Service[];
   setWebviewReference: () => void;
   detachService: () => void;
-  handleIPCMessage: () => void;
-  openWindow: () => void;
+  // handleIPCMessage: () => void; // TODO - [TECH DEBT] later check it
+  // openWindow: () => void; // TODO - [TECH DEBT] later check it
   reload: (options: { serviceId: string }) => void;
   openSettings: (options: { path: string }) => void;
   update: (options: {
@@ -61,7 +61,7 @@ interface IState {
 
 @observer
 class Services extends Component<IProps, IState> {
-  _confettiTimeout: number | null = null;
+  confettiTimeout: number | null = null;
 
   constructor(props: IProps) {
     super(props);
@@ -72,7 +72,7 @@ class Services extends Component<IProps, IState> {
   }
 
   componentDidMount(): void {
-    this._confettiTimeout = window.setTimeout(() => {
+    this.confettiTimeout = window.setTimeout(() => {
       this.setState({
         showConfetti: false,
       });
@@ -80,18 +80,18 @@ class Services extends Component<IProps, IState> {
   }
 
   componentWillUnmount(): void {
-    if (this._confettiTimeout) {
-      clearTimeout(this._confettiTimeout);
+    if (this.confettiTimeout) {
+      clearTimeout(this.confettiTimeout);
     }
   }
 
   render(): ReactElement {
     const {
       services = [],
-      handleIPCMessage,
+      // handleIPCMessage, // TODO - [TECH DEBT] later check it
       setWebviewReference,
       detachService,
-      openWindow,
+      // openWindow, // TODO - [TECH DEBT] later check it
       reload,
       openSettings,
       update,
@@ -136,10 +136,10 @@ class Services extends Component<IProps, IState> {
             <ServiceView
               key={service.id}
               service={service}
-              handleIPCMessage={handleIPCMessage}
-              setWebviewReference={setWebviewReference}
+              // handleIPCMessage={handleIPCMessage} //  TODO - [TECH DEBT][PROPS NOT EXIST IN COMPONENT] later check it
+              setWebviewRef={setWebviewReference}
               detachService={detachService}
-              openWindow={openWindow}
+              // openWindow={openWindow} //  TODO - [TECH DEBT][PROPS NOT EXIST IN COMPONENT] later check it
               reload={() => reload({ serviceId: service.id })}
               edit={() => openSettings({ path: `services/edit/${service.id}` })}
               enable={() =>
diff --git a/src/components/services/content/WebviewCrashHandler.js b/src/components/services/content/WebviewCrashHandler.tsx
index 0e6e61be8..e9b17e8aa 100644
--- a/src/components/services/content/WebviewCrashHandler.js
+++ b/src/components/services/content/WebviewCrashHandler.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 { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import ms from 'ms';
-
 import Button from '../../ui/button';
 import { H1 } from '../../ui/headline';
 
@@ -27,21 +25,30 @@ const messages = defineMessages({
   },
 });
 
-class WebviewCrashHandler extends Component {
-  static propTypes = {
-    name: PropTypes.string.isRequired,
-    reload: PropTypes.func.isRequired,
-  };
+interface IProps extends WrappedComponentProps {
+  name: string;
+  reload: () => void;
+}
 
-  state = {
-    countdown: ms('10s'),
-  };
+interface IState {
+  countdown: number;
+}
 
-  countdownInterval = null;
+@observer
+class WebviewCrashHandler extends Component<IProps, IState> {
+  countdownInterval: NodeJS.Timer | undefined;
 
   countdownIntervalTimeout = ms('1s');
 
-  componentDidMount() {
+  constructor(props: IProps) {
+    super(props);
+
+    this.state = {
+      countdown: ms('10s'),
+    };
+  }
+
+  componentDidMount(): void {
     const { reload } = this.props;
 
     this.countdownInterval = setInterval(() => {
@@ -51,14 +58,13 @@ class WebviewCrashHandler extends Component {
 
       if (this.state.countdown <= 0) {
         reload();
-        clearInterval(this.countdownInterval);
+        clearInterval(this.countdownInterval!);
       }
     }, this.countdownIntervalTimeout);
   }
 
-  render() {
-    const { name, reload } = this.props;
-    const { intl } = this.props;
+  render(): ReactElement {
+    const { name, reload, intl } = this.props;
 
     return (
       <div className="services__info-layer">
@@ -81,4 +87,4 @@ class WebviewCrashHandler extends Component {
   }
 }
 
-export default injectIntl(observer(WebviewCrashHandler));
+export default injectIntl(WebviewCrashHandler);
diff --git a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js b/src/components/services/content/WebviewErrorHandler.tsx
index a658bec8b..b99c15006 100644
--- a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
+++ b/src/components/services/content/WebviewErrorHandler.tsx
@@ -1,13 +1,9 @@
-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 Button from '../../../ui/button';
-
-import styles from './styles';
-import { H1 } from '../../../ui/headline';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import withStyles, { WithStylesProps } from 'react-jss';
+import Button from '../../ui/button';
+import { H1 } from '../../ui/headline';
 
 const messages = defineMessages({
   headline: {
@@ -32,18 +28,43 @@ const messages = defineMessages({
   },
 });
 
-class WebviewErrorHandler extends Component {
-  static propTypes = {
-    name: PropTypes.string.isRequired,
-    reload: PropTypes.func.isRequired,
-    edit: PropTypes.func.isRequired,
-    errorMessage: PropTypes.string.isRequired,
-    classes: PropTypes.object.isRequired,
-  };
+const styles = theme => ({
+  component: {
+    left: 0,
+    position: 'absolute',
+    top: 0,
+    width: '100%',
+    zIndex: 0,
+    alignItems: 'center',
+    background: theme.colorWebviewErrorHandlerBackground,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    textAlign: 'center',
+  },
+  buttonContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    height: 'auto',
+    margin: [40, 0, 20],
+
+    '& button': {
+      margin: [0, 10, 0, 10],
+    },
+  },
+});
+
+interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps {
+  name: string;
+  reload: () => void;
+  edit: () => void;
+  errorMessage: string;
+}
 
-  render() {
-    const { name, reload, edit, errorMessage, classes } = this.props;
-    const { intl } = this.props;
+@observer
+class WebviewErrorHandler extends Component<IProps> {
+  render(): ReactElement {
+    const { name, reload, edit, errorMessage, classes, intl } = this.props;
 
     return (
       <div className={classes.component}>
@@ -71,5 +92,5 @@ class WebviewErrorHandler extends Component {
 }
 
 export default injectIntl(
-  injectSheet(styles, { injectTheme: true })(observer(WebviewErrorHandler)),
+  withStyles(styles, { injectTheme: true })(WebviewErrorHandler),
 );
diff --git a/src/components/settings/services/ServiceError.js b/src/components/settings/services/ServiceError.tsx
index fdcdb54c9..87efdeb96 100644
--- a/src/components/settings/services/ServiceError.js
+++ b/src/components/settings/services/ServiceError.tsx
@@ -1,8 +1,7 @@
-import { Component } from 'react';
+import { Component, 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 Infobox from '../../ui/Infobox';
 import Button from '../../ui/button';
 
@@ -25,8 +24,11 @@ const messages = defineMessages({
   },
 });
 
-class ServiceError extends Component {
-  render() {
+interface IProps extends WrappedComponentProps {}
+
+@observer
+class ServiceError extends Component<IProps> {
+  render(): ReactElement {
     const { intl } = this.props;
 
     return (
@@ -59,4 +61,4 @@ class ServiceError extends Component {
   }
 }
 
-export default injectIntl(observer(ServiceError));
+export default injectIntl(ServiceError);
diff --git a/src/components/settings/services/ServiceItem.js b/src/components/settings/services/ServiceItem.tsx
index c666b7dd2..fd961a0a8 100644
--- a/src/components/settings/services/ServiceItem.js
+++ b/src/components/settings/services/ServiceItem.tsx
@@ -1,10 +1,8 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { defineMessages, injectIntl } from 'react-intl';
+import { Component, ReactElement } from 'react';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-
 import { mdiBellOff, mdiMessageBulletedOff, mdiPower } from '@mdi/js';
 import ServiceModel from '../../../models/Service';
 import Icon from '../../ui/icon';
@@ -24,16 +22,17 @@ const messages = defineMessages({
   },
 });
 
-class ServiceItem extends Component {
-  static propTypes = {
-    service: PropTypes.instanceOf(ServiceModel).isRequired,
-    goToServiceForm: PropTypes.func.isRequired,
-  };
+interface IProps extends WrappedComponentProps {
+  service: ServiceModel;
+  goToServiceForm: () => void;
+}
 
-  render() {
+@observer
+class ServiceItem extends Component<IProps> {
+  render(): ReactElement {
     const {
       service,
-      // toggleAction,
+      // toggleAction, //  TODO - [TECH DEBT][PROP NOT USED IN COMPONENT] check it later
       goToServiceForm,
     } = this.props;
     const { intl } = this.props;
@@ -45,7 +44,11 @@ class ServiceItem extends Component {
           'service-table__row--disabled': !service.isEnabled,
         })}
       >
-        <td className="service-table__column-icon" onClick={goToServiceForm}>
+        <td
+          className="service-table__column-icon"
+          onClick={goToServiceForm}
+          role="gridcell"
+        >
           <img
             src={service.icon}
             className={classnames({
@@ -55,10 +58,18 @@ class ServiceItem extends Component {
             alt=""
           />
         </td>
-        <td className="service-table__column-name" onClick={goToServiceForm}>
+        <td
+          className="service-table__column-name"
+          onClick={goToServiceForm}
+          role="gridcell"
+        >
           {service.name !== '' ? service.name : service.recipe.name}
         </td>
-        <td className="service-table__column-info" onClick={goToServiceForm}>
+        <td
+          className="service-table__column-info"
+          onClick={goToServiceForm}
+          role="gridcell"
+        >
           {service.isMuted && (
             <Icon
               icon={mdiBellOff}
@@ -66,7 +77,11 @@ class ServiceItem extends Component {
             />
           )}
         </td>
-        <td className="service-table__column-info" onClick={goToServiceForm}>
+        <td
+          className="service-table__column-info"
+          onClick={goToServiceForm}
+          role="gridcell"
+        >
           {!service.isEnabled && (
             <Icon
               icon={mdiPower}
@@ -74,7 +89,11 @@ class ServiceItem extends Component {
             />
           )}
         </td>
-        <td className="service-table__column-info" onClick={goToServiceForm}>
+        <td
+          className="service-table__column-info"
+          onClick={goToServiceForm}
+          role="gridcell"
+        >
           {!service.isNotificationEnabled && (
             <Icon
               icon={mdiMessageBulletedOff}
@@ -90,4 +109,4 @@ class ServiceItem extends Component {
   }
 }
 
-export default injectIntl(observer(ServiceItem));
+export default injectIntl(ServiceItem);
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.tsx
index ac1c30ecb..36057902f 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.tsx
@@ -1,9 +1,8 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { Component, 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 { To } from 'history';
 import SearchInput from '../../ui/SearchInput';
 import Infobox from '../../ui/Infobox';
 import Loader from '../../ui/Loader';
@@ -11,6 +10,7 @@ import FAB from '../../ui/FAB';
 import ServiceItem from './ServiceItem';
 import Appear from '../../ui/effects/Appear';
 import { H1 } from '../../ui/headline';
+import Service from '../../../models/Service';
 
 const messages = defineMessages({
   headline: {
@@ -51,38 +51,35 @@ const messages = defineMessages({
   },
 });
 
-class ServicesDashboard extends Component {
-  static propTypes = {
-    services: MobxPropTypes.arrayOrObservableArray.isRequired,
-    isLoading: PropTypes.bool.isRequired,
-    toggleService: PropTypes.func.isRequired,
-    filterServices: PropTypes.func.isRequired,
-    resetFilter: PropTypes.func.isRequired,
-    goTo: PropTypes.func.isRequired,
-    servicesRequestFailed: PropTypes.bool.isRequired,
-    retryServicesRequest: PropTypes.func.isRequired,
-    status: MobxPropTypes.arrayOrObservableArray.isRequired,
-    searchNeedle: PropTypes.string,
-  };
-
-  static defaultProps = {
-    searchNeedle: '',
-  };
+interface IProps extends WrappedComponentProps {
+  services: Service[];
+  isLoading: boolean;
+  // toggleService: any; // TODO - - [TECH DEBT] check it later
+  filterServices: any;
+  resetFilter: () => void;
+  goTo: (to: To, state?: any) => void;
+  servicesRequestFailed: boolean;
+  retryServicesRequest: () => void;
+  status: any;
+  searchNeedle: string | null;
+}
 
-  render() {
+@observer
+class ServicesDashboard extends Component<IProps> {
+  render(): ReactElement {
     const {
       services,
       isLoading,
-      toggleService,
+      // toggleService, // TODO - - [TECH DEBT] check it later
       filterServices,
       resetFilter,
       goTo,
       servicesRequestFailed,
       retryServicesRequest,
       status,
-      searchNeedle,
+      searchNeedle = '',
+      intl,
     } = this.props;
-    const { intl } = this.props;
 
     return (
       <div className="settings__main">
@@ -115,7 +112,7 @@ class ServicesDashboard extends Component {
               <Infobox
                 type="success"
                 icon="checkbox-marked-circle-outline"
-                dismissable
+                dismissible
               >
                 {intl.formatMessage(messages.updatedInfo)}
               </Infobox>
@@ -127,7 +124,7 @@ class ServicesDashboard extends Component {
               <Infobox
                 type="success"
                 icon="checkbox-marked-circle-outline"
-                dismissable
+                dismissible
               >
                 {intl.formatMessage(messages.deletedInfo)}
               </Infobox>
@@ -160,15 +157,16 @@ class ServicesDashboard extends Component {
           {isLoading ? (
             <Loader />
           ) : (
-            <table className="service-table">
+            <table className="service-table" role="grid">
               <tbody>
                 {services.map(service => (
                   <ServiceItem
                     key={service.id}
                     service={service}
-                    toggleAction={() =>
-                      toggleService({ serviceId: service.id })
-                    }
+                    // TODO -  - [TECH DEBT][PROPS NOT USED IN COMPONENT] check it later
+                    // toggleAction={() =>
+                    //   toggleService({ serviceId: service.id })
+                    // }
                     goToServiceForm={() =>
                       goTo(`/settings/services/edit/${service.id}`)
                     }
@@ -178,7 +176,7 @@ class ServicesDashboard extends Component {
             </table>
           )}
 
-          <FAB>
+          <FAB className="FAB-class">
             <Link to="/settings/recipes">+</Link>
           </FAB>
         </div>
@@ -187,4 +185,4 @@ class ServicesDashboard extends Component {
   }
 }
 
-export default injectIntl(observer(ServicesDashboard));
+export default injectIntl(ServicesDashboard);
diff --git a/src/components/ui/FAB.tsx b/src/components/ui/FAB.tsx
index 37c3c9ec7..acb0f690e 100644
--- a/src/components/ui/FAB.tsx
+++ b/src/components/ui/FAB.tsx
@@ -1,30 +1,28 @@
-/**
- * Floating Action Button (FAB)
- */
-import { Component, ReactChildren } from 'react';
+import { Component, ReactElement, ReactNode } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
+import { noop } from 'lodash';
 
-type Props = {
+interface IProps {
   className: string;
-  disabled: boolean;
-  onClick: () => void;
-  type: string;
-  children: ReactChildren;
-  htmlForm: string;
-};
-
-class Button extends Component<Props> {
-  static defaultProps = {
-    disabled: false,
-    onClick: () => {},
-    type: 'button',
-    htmlForm: '',
-  };
+  disabled?: boolean;
+  onClick?: () => void;
+  type?: string;
+  children: ReactNode;
+  htmlForm?: string;
+}
 
-  render() {
-    const { className, disabled, onClick, type, children, htmlForm } =
-      this.props;
+@observer
+class Button extends Component<IProps> {
+  render(): ReactElement {
+    const {
+      className,
+      disabled = false,
+      onClick = noop,
+      type = 'button',
+      children,
+      htmlForm = '',
+    } = this.props;
 
     const buttonProps = {
       className: classnames({
@@ -45,4 +43,4 @@ class Button extends Component<Props> {
   }
 }
 
-export default observer(Button);
+export default Button;
diff --git a/src/containers/layout/AppLayoutContainer.tsx b/src/containers/layout/AppLayoutContainer.tsx
index 0864fa027..b077cebd7 100644
--- a/src/containers/layout/AppLayoutContainer.tsx
+++ b/src/containers/layout/AppLayoutContainer.tsx
@@ -11,11 +11,11 @@ import AppLoader from '../../components/ui/AppLoader';
 import WorkspaceDrawer from '../../features/workspaces/components/WorkspaceDrawer';
 import { workspaceStore } from '../../features/workspaces';
 
-interface AppLayoutContainerProps extends StoresProps {}
+interface IProps extends StoresProps {}
 
 @inject('stores', 'actions')
 @observer
-class AppLayoutContainer extends Component<AppLayoutContainerProps> {
+class AppLayoutContainer extends Component<IProps> {
   render(): ReactElement {
     const { app, features, services, ui, settings, requests, user, router } =
       this.props.stores;
@@ -31,10 +31,10 @@ class AppLayoutContainer extends Component<AppLayoutContainerProps> {
 
     const {
       setActive,
-      handleIPCMessage,
+      // handleIPCMessage,
       setWebviewReference,
       detachService,
-      openWindow,
+      // openWindow,
       reorder,
       reload,
       toggleNotifications,
@@ -118,10 +118,10 @@ class AppLayoutContainer extends Component<AppLayoutContainerProps> {
     const servicesContainer = (
       <Services
         services={services.allDisplayedUnordered}
-        handleIPCMessage={handleIPCMessage}
+        // handleIPCMessage={handleIPCMessage} // TODO - - [TECH DEBT] check it later
         setWebviewReference={setWebviewReference}
         detachService={detachService}
-        openWindow={openWindow}
+        // openWindow={openWindow} // TODO - - [TECH DEBT] check it later
         reload={reload}
         openSettings={openSettings}
         update={updateService}
diff --git a/src/containers/settings/ServicesScreen.tsx b/src/containers/settings/ServicesScreen.tsx
index affe965e9..780b7331e 100644
--- a/src/containers/settings/ServicesScreen.tsx
+++ b/src/containers/settings/ServicesScreen.tsx
@@ -1,39 +1,48 @@
 import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
-
 import { StoresProps } from '../../@types/ferdium-components.types';
 import ServicesDashboard from '../../components/settings/services/ServicesDashboard';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
 
-class ServicesScreen extends Component<StoresProps> {
+interface IProps extends StoresProps {}
+
+@inject('stores', 'actions')
+@observer
+class ServicesScreen extends Component<IProps> {
   componentWillUnmount(): void {
     this.props.actions.service.resetFilter();
     this.props.actions.service.resetStatus();
   }
 
-  deleteService(): void {
-    this.props.actions.service.deleteService();
-    this.props.actions.service.resetFilter();
-  }
+  // TODO - [TECH DEBT] need to check it
+  // deleteService(): void {
+  //   this.props.actions.service.deleteService();
+  //   this.props.actions.service.resetFilter();
+  // }
 
   render(): ReactElement {
-    const { user, services, router } = this.props.stores;
-    const { toggleService, filter, resetFilter } = this.props.actions.service;
+    const {
+      // user,
+      services,
+      router,
+    } = this.props.stores;
+    const {
+      // toggleService,
+      filter,
+      resetFilter,
+    } = this.props.actions.service;
     const isLoading = services.allServicesRequest.isExecuting;
-
-    let allServices = services.all;
-    if (services.filterNeedle !== null) {
-      allServices = services.filtered;
-    }
+    const allServices =
+      services.filterNeedle !== null ? services.filtered : services.all;
 
     return (
       <ErrorBoundary>
         <ServicesDashboard
-          user={user.data}
+          // user={user.data} //  TODO - [TECH DEBT][PROPS NOT EXIST IN COMPONENT] check it later
           services={allServices}
           status={services.actionStatus}
-          deleteService={() => this.deleteService()}
-          toggleService={toggleService}
+          // deleteService={() => this.deleteService()} //  TODO - [TECH DEBT][PROPS NOT EXIST IN COMPONENT] check it later
+          // toggleService={toggleService} //  TODO - [TECH DEBT][PROPS NOT USED IN COMPONENT] check it later
           isLoading={isLoading}
           filterServices={filter}
           resetFilter={resetFilter}
@@ -50,4 +59,4 @@ class ServicesScreen extends Component<StoresProps> {
   }
 }
 
-export default inject('stores', 'actions')(observer(ServicesScreen));
+export default ServicesScreen;