[MM-56011] Migrated radio_setting.tsx from Class to Functional Component #25603 (#25668)

* Added cancel button in the delete category modal

* fix lint error

* fix eslint issues

* migrated from class to functional component

* updateCode

* used react.memo

* updateSnapshots

---------

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

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

@@ -288,7 +288,7 @@ exports[`components/MessageExportSettings should match snapshot, disabled, globa
       <SettingsGroup
         id="globalRelaySettings"
       >
-        <RadioSetting
+        <Memo(RadioSetting)
           disabled={true}
           helpText={
             <Memo(MemoizedFormattedMessage)
@@ -733,7 +733,7 @@ exports[`components/MessageExportSettings should match snapshot, enabled, global
       <SettingsGroup
         id="globalRelaySettings"
       >
-        <RadioSetting
+        <Memo(RadioSetting)
           disabled={false}
           helpText={
             <Memo(MemoizedFormattedMessage)

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

@@ -143,7 +143,7 @@ exports[`components/admin_console/SchemaAdminSettings should match snapshot with
               ]
             }
           />
-          <RadioSetting
+          <Memo(RadioSetting)
             disabled={false}
             helpText={
               <SchemaText

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

@@ -107,7 +107,7 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
               ]
             }
           />
-          <RadioSetting
+          <Memo(RadioSetting)
             disabled={false}
             helpText={
               <SchemaText
@@ -417,7 +417,7 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
               ]
             }
           />
-          <RadioSetting
+          <Memo(RadioSetting)
             disabled={false}
             helpText={
               <SchemaText

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

@@ -15,47 +15,49 @@ interface Props {
     helpText?: React.ReactNode;
     onChange(id: string, value: any): void;
 }
-export default class RadioSetting extends React.PureComponent<Props> {
+const RadioSetting = ({
-    public static defaultProps: Partial<Props> = {
+    id,
-        disabled: false,
+    label,
+    values,
+    value,
+    setByEnv,
+    disabled = false,
+    helpText,
+    onChange,
+}: Props) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        onChange(id, e.target.value);
     };
 
-    private handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const options = values.map(({value: optionValue, text}) => (
-        this.props.onChange(this.props.id, e.target.value);
+        <div
-    };
+            className='radio'
+            key={optionValue}
+        >
+            <label>
+                <input
+                    type='radio'
+                    value={optionValue}
+                    name={id}
+                    checked={optionValue === value}
+                    onChange={handleChange}
+                    disabled={disabled || setByEnv}
+                />
+                {text}
+            </label>
+        </div>
+    ));
 
-    render(): JSX.Element {
+    return (
-        const options = [];
+        <Setting
-        for (const {value, text} of this.props.values) {
+            label={label}
-            options.push(
+            inputId={id}
-                <div
+            helpText={helpText}
-                    className='radio'
+            setByEnv={setByEnv}
-                    key={value}
+        >
-                >
+            {options}
-                    <label>
+        </Setting>
-                        <input
+    );
-                            type='radio'
+};
-                            value={value}
-                            name={this.props.id}
-                            checked={value === this.props.value}
-                            onChange={this.handleChange}
-                            disabled={this.props.disabled || this.props.setByEnv}
-                        />
-                        {text}
-                    </label>
-                </div>,
-            );
-        }
 
-        return (
+export default React.memo(RadioSetting);
-            <Setting
-                label={this.props.label}
-                inputId={this.props.id}
-                helpText={this.props.helpText}
-                setByEnv={this.props.setByEnv}
-            >
-                {options}
-            </Setting>
-        );
-    }
-}