MM-52824 Migrate file_upload_settings.jsx to typescript (#24913)

Automatic Merge

webapp/channels/src/components/admin_console/file_upload_setting.tsx

@@ -1,7 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
@@ -9,48 +8,58 @@ import * as Utils from 'utils/utils';
 
 import Setting from './setting';
 
-export default class FileUploadSetting extends Setting {
+type Props = {
-    static get propTypes() {
+    id: string;
-        return {
+    label: React.ReactNode;
-            id: PropTypes.string.isRequired,
+    helpText?: React.ReactNode;
-            label: PropTypes.node.isRequired,
+    uploadingText?: React.ReactNode;
-            helpText: PropTypes.node,
+    onSubmit: (id: string, file: File, errorCallback: (error: string) => void) => void;
-            uploadingText: PropTypes.node,
+    disabled: boolean;
-            onSubmit: PropTypes.func.isRequired,
+    fileType: string;
-            disabled: PropTypes.bool,
+    error?: string;
-            fileType: PropTypes.string.isRequired,
+}
-            error: PropTypes.string,
-        };
-    }
 
-    constructor(props) {
+type State = {
+    fileName: null|string;
+    fileSelected: boolean;
+    serverError?: string;
+    uploading: boolean;
+}
+
+export default class FileUploadSetting extends React.PureComponent<Props, State> {
+    fileInputRef = React.createRef<HTMLInputElement>();
+
+    constructor(props: Props) {
         super(props);
 
         this.state = {
             fileName: null,
             serverError: props.error,
             uploading: false,
+            fileSelected: false,
         };
-        this.fileInputRef = React.createRef();
     }
 
     handleChange = () => {
-        const files = this.fileInputRef.current.files;
+        const files = this.fileInputRef.current?.files;
         if (files && files.length > 0) {
             this.setState({fileSelected: true, fileName: files[0].name});
         }
     };
 
-    handleSubmit = (e) => {
+    handleSubmit = (e: React.MouseEvent) => {
         e.preventDefault();
 
         this.setState({uploading: true});
-        this.props.onSubmit(this.props.id, this.fileInputRef.current.files[0], (error) => {
+        const file = this.fileInputRef.current?.files?.[0];
-            this.setState({uploading: false});
+        if (file) {
-            if (error) {
+            this.props.onSubmit(this.props.id, file, (error) => {
-                Utils.clearFileInput(this.fileInputRef.current);
+                this.setState({uploading: false});
-            }
+                if (error && this.fileInputRef.current) {
-        });
+                    Utils.clearFileInput(this.fileInputRef.current);
+                }
+            });
+        }
     };
 
     render() {

webapp/channels/src/components/admin_console/schema_admin_settings.jsx

@@ -10,7 +10,7 @@ import {Link} from 'react-router-dom';
 import BooleanSetting from 'components/admin_console/boolean_setting';
 import ColorSetting from 'components/admin_console/color_setting';
 import DropdownSetting from 'components/admin_console/dropdown_setting';
-import FileUploadSetting from 'components/admin_console/file_upload_setting.jsx';
+import FileUploadSetting from 'components/admin_console/file_upload_setting';
 import GeneratedSetting from 'components/admin_console/generated_setting';
 import JobsTable from 'components/admin_console/jobs';
 import MultiSelectSetting from 'components/admin_console/multiselect_settings';