migrate DropdownSetting component from class based to function based component (#24796)

* migrate DropdownSetting component to function comp

* code optimized

* snapshot updated

* snapshot updated

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/admin_console/__snapshots__/message_export_settings.test.jsx.snap

@@ -72,7 +72,7 @@ exports[`components/MessageExportSettings should match snapshot, disabled, actia
         setByEnv={false}
         value="01:00"
       />
-      <DropdownSetting
+      <Memo(DropdownSetting)
         disabled={true}
         helpText={
           <FormattedMarkdownMessage
@@ -86,7 +86,6 @@ exports[`components/MessageExportSettings should match snapshot, disabled, actia
           />
         }
         id="exportFormat"
-        isDisabled={false}
         label={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Export Format:"
@@ -246,7 +245,7 @@ exports[`components/MessageExportSettings should match snapshot, disabled, globa
         setByEnv={false}
         value="01:00"
       />
-      <DropdownSetting
+      <Memo(DropdownSetting)
         disabled={true}
         helpText={
           <FormattedMarkdownMessage
@@ -260,7 +259,6 @@ exports[`components/MessageExportSettings should match snapshot, disabled, globa
           />
         }
         id="exportFormat"
-        isDisabled={false}
         label={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Export Format:"
@@ -515,7 +513,7 @@ exports[`components/MessageExportSettings should match snapshot, enabled, actian
         setByEnv={false}
         value="01:00"
       />
-      <DropdownSetting
+      <Memo(DropdownSetting)
         disabled={false}
         helpText={
           <FormattedMarkdownMessage
@@ -529,7 +527,6 @@ exports[`components/MessageExportSettings should match snapshot, enabled, actian
           />
         }
         id="exportFormat"
-        isDisabled={false}
         label={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Export Format:"
@@ -689,7 +686,7 @@ exports[`components/MessageExportSettings should match snapshot, enabled, global
         setByEnv={false}
         value="01:00"
       />
-      <DropdownSetting
+      <Memo(DropdownSetting)
         disabled={false}
         helpText={
           <FormattedMarkdownMessage
@@ -703,7 +700,6 @@ exports[`components/MessageExportSettings should match snapshot, enabled, global
           />
         }
         id="exportFormat"
-        isDisabled={false}
         label={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Export Format:"

webapp/channels/src/components/admin_console/__snapshots__/push_settings.test.tsx.snap

@@ -16,10 +16,9 @@ exports[`components/PushSettings should match snapshot, licensed 1`] = `
       />
     </AdminHeader>
     <SettingsGroup>
-      <DropdownSetting
+      <Memo(DropdownSetting)
         helpText={null}
         id="pushNotificationServerType"
-        isDisabled={false}
         label={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Enable Push Notifications: "
@@ -50,9 +49,8 @@ exports[`components/PushSettings should match snapshot, licensed 1`] = `
           ]
         }
       />
-      <DropdownSetting
+      <Memo(DropdownSetting)
         id="pushNotificationServerLocation"
-        isDisabled={false}
         label={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Push Notification Server location:"
@@ -208,10 +206,9 @@ exports[`components/PushSettings should match snapshot, unlicensed 1`] = `
       />
     </AdminHeader>
     <SettingsGroup>
-      <DropdownSetting
+      <Memo(DropdownSetting)
         helpText={null}
         id="pushNotificationServerType"
-        isDisabled={false}
         label={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Enable Push Notifications: "

webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.jsx.snap

@@ -111,7 +111,7 @@ exports[`components/admin_console/SchemaAdminSettings should match snapshot with
             }
             value={false}
           />
-          <DropdownSetting
+          <Memo(DropdownSetting)
             disabled={false}
             helpText={
               <SchemaText
@@ -121,7 +121,6 @@ exports[`components/admin_console/SchemaAdminSettings should match snapshot with
               />
             }
             id="FirstSettings.settingc"
-            isDisabled={false}
             key="Config_dropdown_FirstSettings.settingc"
             label="Setting Three"
             onChange={[Function]}
@@ -269,7 +268,7 @@ exports[`components/admin_console/SchemaAdminSettings should match snapshot with
               </span>
             </div>
           </div>
-          <DropdownSetting
+          <Memo(DropdownSetting)
             disabled={false}
             helpText={
               <SchemaText
@@ -279,7 +278,6 @@ exports[`components/admin_console/SchemaAdminSettings should match snapshot with
               />
             }
             id="SecondSettings.settingi"
-            isDisabled={false}
             key="Config_language_SecondSettings.settingi"
             label="Setting Nine"
             onChange={[Function]}

webapp/channels/src/components/admin_console/custom_plugin_settings/__snapshots__/custom_plugin_settings.test.tsx.snap

@@ -76,7 +76,7 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
             }
             value={true}
           />
-          <DropdownSetting
+          <Memo(DropdownSetting)
             disabled={false}
             helpText={
               <SchemaText
@@ -85,7 +85,6 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
               />
             }
             id="settingc"
-            isDisabled={false}
             key="testplugin_dropdown_settingc"
             label="Setting Three"
             onChange={[Function]}
@@ -387,7 +386,7 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
             }
             value={false}
           />
-          <DropdownSetting
+          <Memo(DropdownSetting)
             disabled={false}
             helpText={
               <SchemaText
@@ -396,7 +395,6 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
               />
             }
             id="PluginSettings.Plugins.testplugin.settingc"
-            isDisabled={false}
             key="testplugin_dropdown_PluginSettings.Plugins.testplugin.settingc"
             label="Setting Three"
             onChange={[Function]}

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

@@ -1,8 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import PropTypes from 'prop-types';
-import React, {PureComponent} from 'react';
+import React, {memo, useCallback, useMemo} from 'react';
 import type {ReactNode, ChangeEvent} from 'react';
 
 import type {EmailSettings} from '@mattermost/types/config';
@@ -20,57 +19,49 @@ type Props = {
     helpText?: ReactNode;
 }
 
-export default class DropdownSetting extends PureComponent<Props> {
-    static propTypes = {
-        id: PropTypes.string.isRequired,
-        values: PropTypes.array.isRequired,
-        label: PropTypes.node.isRequired,
-        value: PropTypes.string.isRequired,
-        onChange: PropTypes.func.isRequired,
-        disabled: PropTypes.bool,
-        setByEnv: PropTypes.bool.isRequired,
-        helpText: PropTypes.node,
-    };
+const DropdownSetting = ({
+    id,
+    values,
+    label,
+    value,
+    onChange,
+    disabled = false,
+    setByEnv,
+    helpText,
+}: Props) => {
+    const handleChange = useCallback((e: ChangeEvent<HTMLSelectElement>) => {
+        onChange(id, e.target.value);
+    }, [onChange, id]);
 
-    static defaultProps = {
-        isDisabled: false,
-    };
-
-    handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
-        this.props.onChange(this.props.id, e.target.value);
-    };
-
-    render() {
-        const options = [];
-        for (const {value, text} of this.props.values) {
-            options.push(
-                <option
-                    value={value}
-                    key={value}
-                >
-                    {text}
-                </option>,
-            );
-        }
-
-        return (
-            <Setting
-                label={this.props.label}
-                inputId={this.props.id}
-                helpText={this.props.helpText}
-                setByEnv={this.props.setByEnv}
+    const options = useMemo(() =>
+        values.map(({value: val, text}) => (
+            <option
+                value={val}
+                key={val}
             >
-                <select
-                    data-testid={this.props.id + 'dropdown'}
-                    className='form-control'
-                    id={this.props.id}
-                    value={this.props.value}
-                    onChange={this.handleChange}
-                    disabled={this.props.disabled || this.props.setByEnv}
-                >
-                    {options}
-                </select>
-            </Setting>
-        );
-    }
-}
+                {text}
+            </option>
+        )), [values]);
+
+    return (
+        <Setting
+            label={label}
+            inputId={id}
+            helpText={helpText}
+            setByEnv={setByEnv}
+        >
+            <select
+                data-testid={id + 'dropdown'}
+                className='form-control'
+                id={id}
+                value={value}
+                onChange={handleChange}
+                disabled={disabled || setByEnv}
+            >
+                {options}
+            </select>
+        </Setting>
+    );
+};
+
+export default memo(DropdownSetting);