fix: slack issue caused by input TS conversion

1 files changed, 49 insertions, 45 deletions

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);