[MM-52833]: Migrate "components/admin_console/multiselect_settings.jsx" to Typescript (#23542)

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

@@ -1,39 +1,50 @@
 // 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 ReactSelect from 'react-select';
+import ReactSelect, {ValueType} from 'react-select';
 
 import FormError from 'components/form_error';
 
 import Setting from './setting';
 
-export default class MultiSelectSetting extends React.PureComponent {
+interface Option {
-    static propTypes = {
+    value: string;
-        id: PropTypes.string.isRequired,
+    text: string;
-        values: PropTypes.array.isRequired,
+}
-        label: PropTypes.node.isRequired,
-        selected: PropTypes.array.isRequired,
-        onChange: PropTypes.func.isRequired,
-        disabled: PropTypes.bool,
-        setByEnv: PropTypes.bool.isRequired,
-        helpText: PropTypes.node,
-        noResultText: PropTypes.node,
-    };
 
-    static defaultProps = {
+interface Props {
+    id: string;
+    values: Option[];
+    label: React.ReactNode;
+    selected: string[];
+    onChange: (id: string, values: string[]) => void;
+    disabled?: boolean;
+    setByEnv: boolean;
+    helpText?: React.ReactNode;
+    noResultText?: React.ReactNode;
+}
+
+interface State {
+    error: boolean;
+}
+
+export default class MultiSelectSetting extends React.PureComponent<
+Props,
+State
+> {
+    static defaultProps: Partial<Props> = {
         disabled: false,
     };
 
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         this.state = {error: false};
     }
 
-    handleChange = (newValue) => {
+    handleChange = (newValue: ValueType<Option>) => {
-        const values = newValue.map((n) => {
+        const values = (newValue as Option[]).map((n) => {
             return n.value;
         });
 
@@ -42,18 +53,16 @@ export default class MultiSelectSetting extends React.PureComponent {
     };
 
     calculateValue = () => {
-        return this.props.selected.reduce((values, item) => {
+        return this.props.selected.reduce<Option[]>((values, item) => {
-            const found = this.props.values.find((e) => {
+            const found = this.props.values.find((e) => e.value === item);
-                return e.value === item;
+            if (found) {
-            });
-            if (found !== null) {
                 values.push(found);
             }
             return values;
         }, []);
     };
 
-    getOptionLabel = ({text}) => text;
+    getOptionLabel = ({text}: { text: string}) => text;
 
     render() {
         return (

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

@@ -17,7 +17,7 @@ import RequestButton from 'components/admin_console/request_button/request_butto
 import BooleanSetting from 'components/admin_console/boolean_setting';
 import TextSetting from 'components/admin_console/text_setting';
 import DropdownSetting from 'components/admin_console/dropdown_setting.jsx';
-import MultiSelectSetting from 'components/admin_console/multiselect_settings.jsx';
+import MultiSelectSetting from 'components/admin_console/multiselect_settings';
 import RadioSetting from 'components/admin_console/radio_setting';
 import ColorSetting from 'components/admin_console/color_setting';
 import GeneratedSetting from 'components/admin_console/generated_setting';