[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);
-    };
-
-    render(): JSX.Element {
-        const options = [];
-        for (const {value, text} of this.props.values) {
-            options.push(
         <div
             className='radio'
-                    key={value}
+            key={optionValue}
         >
             <label>
                 <input
                     type='radio'
-                            value={value}
+                    value={optionValue}
-                            name={this.props.id}
+                    name={id}
-                            checked={value === this.props.value}
+                    checked={optionValue === value}
-                            onChange={this.handleChange}
+                    onChange={handleChange}
-                            disabled={this.props.disabled || this.props.setByEnv}
+                    disabled={disabled || setByEnv}
                 />
                 {text}
             </label>
-                </div>,
+        </div>
-            );
+    ));
-        }
 
     return (
         <Setting
-                label={this.props.label}
+            label={label}
-                inputId={this.props.id}
+            inputId={id}
-                helpText={this.props.helpText}
+            helpText={helpText}
-                setByEnv={this.props.setByEnv}
+            setByEnv={setByEnv}
         >
             {options}
         </Setting>
     );
-    }
+};
-}
+
+export default React.memo(RadioSetting);