5 files changed, 107 insertions, 108 deletions

diff --git a/src/components/settings/services/EditServiceForm.tsx b/src/components/settings/services/EditServiceForm.tsx
index b594fcd40..112e5a452 100644
--- a/src/components/settings/services/EditServiceForm.tsx
+++ b/src/components/settings/services/EditServiceForm.tsx
@@ -293,18 +293,14 @@ class EditServiceForm extends Component<IProps, IState> {
             {(recipe.hasTeamId || recipe.hasCustomUrl) && (
               <Tabs active={activeTabIndex}>
                 {recipe.hasHostedOption && (
-                  <TabItem
-                  // title={recipe.name} // TODO - [TS DEBT] property not used inside TabItem need to check it
-                  >
+                  <TabItem title={recipe.name}>
                     {intl.formatMessage(messages.useHostedService, {
                       name: recipe.name,
                     })}
                   </TabItem>
                 )}
                 {recipe.hasTeamId && (
-                  <TabItem
-                  // title={intl.formatMessage(messages.tabHosted)} // TODO - [TS DEBT] property not used inside TabItem need to check it
-                  >
+                  <TabItem title={intl.formatMessage(messages.tabHosted)}>
                     <Input
                       {...form.$('team').bind()}
                       prefix={recipe.urlInputPrefix}
@@ -313,9 +309,7 @@ class EditServiceForm extends Component<IProps, IState> {
                   </TabItem>
                 )}
                 {recipe.hasCustomUrl && (
-                  <TabItem
-                  // title={intl.formatMessage(messages.tabOnPremise)} // TODO - [TS DEBT] property not used inside TabItem need to check it
-                  >
+                  <TabItem title={intl.formatMessage(messages.tabOnPremise)}>
                     <Input {...form.$('customUrl').bind()} />
                     {form.error === 'url-validation-error' && (
                       <p className="franz-form__error">
diff --git a/src/components/ui/Tabs/TabItem.tsx b/src/components/ui/Tabs/TabItem.tsx
index 631586d62..815dced8c 100644
--- a/src/components/ui/Tabs/TabItem.tsx
+++ b/src/components/ui/Tabs/TabItem.tsx
@@ -1 +1,19 @@
-export default ({ children }) => <>{children}</>;
+import { Fragment, ReactElement } from 'react';
+
+export interface IProps {
+  children:
+    | string
+    | ReactElement<HTMLInputElement>
+    | (
+        | boolean
+        | ReactElement<HTMLInputElement>
+        | ReactElement<HTMLParagraphElement>
+      )[];
+  title?: string; // it is used on Tabs.tsx
+}
+
+function TabItem({ children, title = '' }: IProps): ReactElement {
+  return <Fragment key={title}>{children}</Fragment>;
+}
+
+export default TabItem;
diff --git a/src/components/ui/Tabs/Tabs.js b/src/components/ui/Tabs/Tabs.tsx
index 5d2da6293..2c34d7e24 100644
--- a/src/components/ui/Tabs/Tabs.js
+++ b/src/components/ui/Tabs/Tabs.tsx
@@ -1,32 +1,36 @@
-import { Children, Component } from 'react';
-import PropTypes from 'prop-types';
+import { Children, Component, ReactElement, ReactPortal } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
+import { IProps as TabItemProps } from './TabItem';
 
-import { oneOrManyChildElements } from '../../../prop-types';
+interface IProps {
+  children:
+    | ReactElement<TabItemProps>
+    | (boolean | ReactElement<TabItemProps>)[];
+  active?: number;
+}
 
-class Tab extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { active: this.props.active };
-  }
+interface IState {
+  active: number;
+}
 
-  static propTypes = {
-    children: oneOrManyChildElements.isRequired,
-    active: PropTypes.number,
-  };
+@observer
+class Tab extends Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props);
 
-  static defaultProps = {
-    active: 0,
-  };
+    this.state = {
+      active: this.props.active || 0,
+    };
+  }
 
-  switchTab(index) {
+  switchTab(index: number): void {
     this.setState({ active: index });
   }
 
-  render() {
+  render(): ReactElement {
     const { children: childElements } = this.props;
-    const children = childElements.filter(c => !!c);
+    const children = Children.toArray(childElements); // removes all null values
 
     if (children.length === 1) {
       return <div>{children}</div>;
@@ -37,7 +41,7 @@ class Tab extends Component {
         <div className="content-tabs__tabs">
           {Children.map(children, (child, i) => (
             <button
-              key="{i}"
+              key={i}
               className={classnames({
                 'content-tabs__item': true,
                 'is-active': this.state.active === i,
@@ -45,19 +49,19 @@ class Tab extends Component {
               onClick={() => this.switchTab(i)}
               type="button"
             >
-              {child.props.title}
+              {(child as ReactPortal).props.title}
             </button>
           ))}
         </div>
         <div className="content-tabs__content">
           {Children.map(children, (child, i) => (
             <div
-              key="{i}"
+              key={i}
               className={classnames({
                 'content-tabs__item': true,
                 'is-active': this.state.active === i,
               })}
-              type="button"
+              // type="button"
             >
               {child}
             </div>
@@ -68,4 +72,4 @@ class Tab extends Component {
   }
 }
 
-export default observer(Tab);
+export default Tab;
diff --git a/src/containers/settings/EditServiceScreen.tsx b/src/containers/settings/EditServiceScreen.tsx
index 09dd19925..05375d352 100644
--- a/src/containers/settings/EditServiceScreen.tsx
+++ b/src/containers/settings/EditServiceScreen.tsx
@@ -288,27 +288,20 @@ class EditServiceScreen extends Component<IProps> {
     };
 
     if (recipe.hasTeamId) {
-      config.fields = {
-        ...config.fields,
-
-        team: {
-          label: intl.formatMessage(messages.team),
-          placeholder: intl.formatMessage(messages.team),
-          value: service?.team,
-          validators: [required],
-        },
+      config.fields.team = {
+        label: intl.formatMessage(messages.team),
+        placeholder: intl.formatMessage(messages.team),
+        value: service?.team,
+        validators: [required],
       };
     }
 
     if (recipe.hasCustomUrl) {
-      config.fields = {
-        ...config.fields,
-        customUrl: {
-          label: intl.formatMessage(messages.customUrl),
-          placeholder: "'http://' or 'https://' or 'file:///'",
-          value: service?.customUrl || recipe.serviceURL,
-          validators: [required, url],
-        },
+      config.fields.customUrl = {
+        label: intl.formatMessage(messages.customUrl),
+        placeholder: "'http://' or 'https://' or 'file:///'",
+        value: service?.customUrl || recipe.serviceURL,
+        validators: [required, url],
       };
     }
 
@@ -332,82 +325,71 @@ class EditServiceScreen extends Component<IProps> {
     }
 
     if (recipe.hasIndirectMessages) {
-      config.fields = {
-        ...config.fields,
-        isIndirectMessageBadgeEnabled: {
-          label: intl.formatMessage(messages.indirectMessages),
-          value: service?.isIndirectMessageBadgeEnabled,
-          default: DEFAULT_SERVICE_SETTINGS.hasIndirectMessages,
-          type: 'checkbox',
-        },
+      config.fields.isIndirectMessageBadgeEnabled = {
+        label: intl.formatMessage(messages.indirectMessages),
+        value: service?.isIndirectMessageBadgeEnabled,
+        default: DEFAULT_SERVICE_SETTINGS.hasIndirectMessages,
+        type: 'checkbox',
       };
     }
 
     if (recipe.allowFavoritesDelineationInUnreadCount) {
-      config.fields = {
-        ...config.fields,
-        onlyShowFavoritesInUnreadCount: {
-          label: intl.formatMessage(messages.onlyShowFavoritesInUnreadCount),
-          value: service?.onlyShowFavoritesInUnreadCount,
-          default: DEFAULT_APP_SETTINGS.onlyShowFavoritesInUnreadCount,
-          type: 'checkbox',
-        },
+      config.fields.onlyShowFavoritesInUnreadCount = {
+        label: intl.formatMessage(messages.onlyShowFavoritesInUnreadCount),
+        value: service?.onlyShowFavoritesInUnreadCount,
+        default: DEFAULT_APP_SETTINGS.onlyShowFavoritesInUnreadCount,
+        type: 'checkbox',
       };
     }
 
     if (proxy.isEnabled) {
-      let serviceProxyConfig: IProxyConfig = {};
-      if (service) {
-        serviceProxyConfig = stores.settings.proxy[service.id] || {};
-      }
-
-      config.fields = {
-        ...config.fields,
-        proxy: {
-          name: 'proxy',
-          label: 'proxy',
-          fields: {
-            isEnabled: {
-              label: intl.formatMessage(messages.enableProxy),
-              value: serviceProxyConfig.isEnabled,
-              default: DEFAULT_APP_SETTINGS.proxyFeatureEnabled,
-              type: 'checkbox',
-            },
-            host: {
-              label: intl.formatMessage(messages.proxyHost),
-              value: serviceProxyConfig.host,
-              default: '',
-            },
-            port: {
-              label: intl.formatMessage(messages.proxyPort),
-              value: serviceProxyConfig.port,
-              default: '',
-            },
-            user: {
-              label: intl.formatMessage(messages.proxyUser),
-              value: serviceProxyConfig.user,
-              default: '',
-            },
-            password: {
-              label: intl.formatMessage(messages.proxyPassword),
-              value: serviceProxyConfig.password,
-              default: '',
-              type: 'password',
-            },
+      const serviceProxyConfig: IProxyConfig = service
+        ? stores.settings.proxy[service.id]
+        : {};
+
+      config.fields.proxy = {
+        name: 'proxy',
+        label: 'proxy',
+        fields: {
+          isEnabled: {
+            label: intl.formatMessage(messages.enableProxy),
+            value: serviceProxyConfig.isEnabled,
+            default: DEFAULT_APP_SETTINGS.proxyFeatureEnabled,
+            type: 'checkbox',
+          },
+          host: {
+            label: intl.formatMessage(messages.proxyHost),
+            value: serviceProxyConfig.host,
+            default: '',
+          },
+          port: {
+            label: intl.formatMessage(messages.proxyPort),
+            value: serviceProxyConfig.port,
+            default: '',
+          },
+          user: {
+            label: intl.formatMessage(messages.proxyUser),
+            value: serviceProxyConfig.user,
+            default: '',
+          },
+          password: {
+            label: intl.formatMessage(messages.proxyPassword),
+            value: serviceProxyConfig.password,
+            default: '',
+            type: 'password',
           },
         },
       };
     }
 
-    // @ts-ignore: Remove this ignore once mobx-react-form v4 with typescript
     return new Form(config);
   }
 
   deleteService(): void {
-    const { deleteService } = this.props.actions.service;
     const { action } = this.props.params;
 
     if (action === 'edit') {
+      const { deleteService } = this.props.actions.service;
       const { activeSettings: service } = this.props.stores.services;
       deleteService({
         serviceId: service?.id,
@@ -437,8 +419,8 @@ class EditServiceScreen extends Component<IProps> {
     } = this.props.stores;
     const { action } = this.props.params;
 
-    let recipe: null | IRecipe = null;
-    let service: null | Service = null;
+    let recipe: IRecipe | null = null;
+    let service: Service | null = null;
     let isLoading = false;
 
     if (action === 'add') {
diff --git a/src/containers/settings/EditSettingsScreen.tsx b/src/containers/settings/EditSettingsScreen.tsx
index f18eb24a7..2dbd8d2be 100644
--- a/src/containers/settings/EditSettingsScreen.tsx
+++ b/src/containers/settings/EditSettingsScreen.tsx
@@ -933,6 +933,7 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
           label: intl.formatMessage(messages.beta),
           value: user.data.beta,
           default: DEFAULT_APP_SETTINGS.beta,
+          type: 'checkbox',
         },
         automaticUpdates: {
           label: intl.formatMessage(messages.automaticUpdates),