From cd8796bf0b22239db286464a4282b515ca535af2 Mon Sep 17 00:00:00 2001
From: Zubair Imtiaz <106450046+ZubairImtiaz3@users.noreply.github.com>
Date: Mon, 18 Dec 2023 05:26:57 +0500
Subject: [PATCH] [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>
---
 .../message_export_settings.test.jsx.snap     |  4 +-
 .../schema_admin_settings.test.jsx.snap       |  2 +-
 .../custom_plugin_settings.test.tsx.snap      |  4 +-
 .../admin_console/radio_setting.tsx           | 82 ++++++++++---------
 4 files changed, 47 insertions(+), 45 deletions(-)

diff --git a/webapp/channels/src/components/admin_console/__snapshots__/message_export_settings.test.jsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/message_export_settings.test.jsx.snap
index ab26dc6f56..0e30831f84 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/message_export_settings.test.jsx.snap
+++ b/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)
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.jsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.jsx.snap
index d8beef855a..494e17918a 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.jsx.snap
+++ b/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
diff --git a/webapp/channels/src/components/admin_console/custom_plugin_settings/__snapshots__/custom_plugin_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/custom_plugin_settings/__snapshots__/custom_plugin_settings.test.tsx.snap
index efb67fad70..7342131b8a 100644
--- a/webapp/channels/src/components/admin_console/custom_plugin_settings/__snapshots__/custom_plugin_settings.test.tsx.snap
+++ b/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
diff --git a/webapp/channels/src/components/admin_console/radio_setting.tsx b/webapp/channels/src/components/admin_console/radio_setting.tsx
index 619731fca5..065b9e3369 100644
--- a/webapp/channels/src/components/admin_console/radio_setting.tsx
+++ b/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> {
-    public static defaultProps: Partial<Props> = {
-        disabled: false,
+const RadioSetting = ({
+    id,
+    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>) => {
-        this.props.onChange(this.props.id, e.target.value);
-    };
+    const options = values.map(({value: optionValue, text}) => (
+        <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 {
-        const options = [];
-        for (const {value, text} of this.props.values) {
-            options.push(
-                <div
-                    className='radio'
-                    key={value}
-                >
-                    <label>
-                        <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 (
+        <Setting
+            label={label}
+            inputId={id}
+            helpText={helpText}
+            setByEnv={setByEnv}
+        >
+            {options}
+        </Setting>
+    );
+};
 
-        return (
-            <Setting
-                label={this.props.label}
-                inputId={this.props.id}
-                helpText={this.props.helpText}
-                setByEnv={this.props.setByEnv}
-            >
-                {options}
-            </Setting>
-        );
-    }
-}
+export default React.memo(RadioSetting);