fix: slack issue caused by input TS conversion

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

src/components/settings/services/EditServiceForm.js → 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);

src/components/ui/ImageUpload.tsx → 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,66 +19,72 @@ 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 {
     for (const file of rejectedFiles) {
       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,
-            }),
-          );
+            },
+          });
         }
       }
     }
   }
 
   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,12 +156,12 @@ 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>
     );
   }
 }
 
-export default observer(ImageUpload);
+export default ImageUpload;