From caa87ec7f6dd762d1b3b7757236e9f5e78d5c7bf Mon Sep 17 00:00:00 2001
From: Umar Abid <75561750+umrkhn@users.noreply.github.com>
Date: Mon, 6 Nov 2023 17:22:16 +0500
Subject: [PATCH] [GH-24745] Convert ./components/admin_console/setting.tsx
 from Class Component to Function Component (#24861)

* fix: convert admin_console/setting.tsx to FC

* fix: update failing snapshots
---
 .../custom_url_schemes_setting.test.tsx.snap  | 20 +++----
 .../__snapshots__/radio_setting.test.tsx.snap |  4 +-
 .../src/components/admin_console/setting.tsx  | 56 ++++++++-----------
 3 files changed, 36 insertions(+), 44 deletions(-)

diff --git a/webapp/channels/src/components/admin_console/__snapshots__/custom_url_schemes_setting.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/custom_url_schemes_setting.test.tsx.snap
index 433104f946..1a7d736254 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/custom_url_schemes_setting.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/custom_url_schemes_setting.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`components/AdminConsole/CustomUrlSchemeSetting initial state with multi
     ]
   }
 >
-  <Settings
+  <Memo(Settings)
     helpText="Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: \\"http\\", \\"https\\", \\"ftp\\", \\"tel\\", and \\"mailto\\"."
     inputId="MySetting"
     label="Custom URL Schemes:"
@@ -88,7 +88,7 @@ exports[`components/AdminConsole/CustomUrlSchemeSetting initial state with multi
         </div>
       </div>
     </div>
-  </Settings>
+  </Memo(Settings)>
 </CustomURLSchemesSetting>
 `;
 
@@ -138,7 +138,7 @@ exports[`components/AdminConsole/CustomUrlSchemeSetting initial state with no it
   setByEnv={false}
   value={Array []}
 >
-  <Settings
+  <Memo(Settings)
     helpText="Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: \\"http\\", \\"https\\", \\"ftp\\", \\"tel\\", and \\"mailto\\"."
     inputId="MySetting"
     label="Custom URL Schemes:"
@@ -174,7 +174,7 @@ exports[`components/AdminConsole/CustomUrlSchemeSetting initial state with no it
         </div>
       </div>
     </div>
-  </Settings>
+  </Memo(Settings)>
 </CustomURLSchemesSetting>
 `;
 
@@ -228,7 +228,7 @@ exports[`components/AdminConsole/CustomUrlSchemeSetting initial state with one i
     ]
   }
 >
-  <Settings
+  <Memo(Settings)
     helpText="Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: \\"http\\", \\"https\\", \\"ftp\\", \\"tel\\", and \\"mailto\\"."
     inputId="MySetting"
     label="Custom URL Schemes:"
@@ -264,7 +264,7 @@ exports[`components/AdminConsole/CustomUrlSchemeSetting initial state with one i
         </div>
       </div>
     </div>
-  </Settings>
+  </Memo(Settings)>
 </CustomURLSchemesSetting>
 `;
 
@@ -319,7 +319,7 @@ exports[`components/AdminConsole/CustomUrlSchemeSetting renders properly when di
     ]
   }
 >
-  <Settings
+  <Memo(Settings)
     helpText="Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: \\"http\\", \\"https\\", \\"ftp\\", \\"tel\\", and \\"mailto\\"."
     inputId="MySetting"
     label="Custom URL Schemes:"
@@ -355,7 +355,7 @@ exports[`components/AdminConsole/CustomUrlSchemeSetting renders properly when di
         </div>
       </div>
     </div>
-  </Settings>
+  </Memo(Settings)>
 </CustomURLSchemesSetting>
 `;
 
@@ -410,7 +410,7 @@ exports[`components/AdminConsole/CustomUrlSchemeSetting renders properly when se
     ]
   }
 >
-  <Settings
+  <Memo(Settings)
     helpText="Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: \\"http\\", \\"https\\", \\"ftp\\", \\"tel\\", and \\"mailto\\"."
     inputId="MySetting"
     label="Custom URL Schemes:"
@@ -460,6 +460,6 @@ exports[`components/AdminConsole/CustomUrlSchemeSetting renders properly when se
         </SetByEnv>
       </div>
     </div>
-  </Settings>
+  </Memo(Settings)>
 </CustomURLSchemesSetting>
 `;
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/radio_setting.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/radio_setting.test.tsx.snap
index 3a18f2d35e..94bc39abf4 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/radio_setting.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/radio_setting.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/admin_console/RadioSetting should match snapshot 1`] = `
-<Settings
+<Memo(Settings)
   inputId="string.id"
   label="some label"
   setByEnv={false}
@@ -54,5 +54,5 @@ exports[`components/admin_console/RadioSetting should match snapshot 1`] = `
       this is administration
     </label>
   </div>
-</Settings>
+</Memo(Settings)>
 `;
diff --git a/webapp/channels/src/components/admin_console/setting.tsx b/webapp/channels/src/components/admin_console/setting.tsx
index 9269bd7102..6f85a6f029 100644
--- a/webapp/channels/src/components/admin_console/setting.tsx
+++ b/webapp/channels/src/components/admin_console/setting.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {PureComponent} from 'react';
+import React from 'react';
 
 import SetByEnv from './set_by_env';
 
@@ -13,38 +13,30 @@ export type Props = {
     setByEnv?: boolean;
 }
 
-export default class Settings extends PureComponent<Props> {
-    public render() {
-        const {
-            children,
-            setByEnv,
-            helpText,
-            inputId,
-            label,
-        } = this.props;
-
-        return (
-            <div
-                data-testid={inputId}
-                className='form-group'
+const Settings = ({children, setByEnv, helpText, inputId, label}: Props) => {
+    return (
+        <div
+            data-testid={inputId}
+            className='form-group'
+        >
+            <label
+                className='control-label col-sm-4'
+                htmlFor={inputId}
             >
-                <label
-                    className='control-label col-sm-4'
-                    htmlFor={inputId}
+                {label}
+            </label>
+            <div className='col-sm-8'>
+                {children}
+                <div
+                    data-testid={inputId + 'help-text'}
+                    className='help-text'
                 >
-                    {label}
-                </label>
-                <div className='col-sm-8'>
-                    {children}
-                    <div
-                        data-testid={inputId + 'help-text'}
-                        className='help-text'
-                    >
-                        {helpText}
-                    </div>
-                    {setByEnv ? <SetByEnv/> : null}
+                    {helpText}
                 </div>
+                {setByEnv ? <SetByEnv/> : null}
             </div>
-        );
-    }
-}
+        </div>
+    );
+};
+
+export default React.memo(Settings);