[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

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>
 `;

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)>
 `;

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> {
+const Settings = ({children, setByEnv, helpText, inputId, label}: Props) => {
-    public render() {
+    return (
-        const {
+        <div
-            children,
+            data-testid={inputId}
-            setByEnv,
+            className='form-group'
-            helpText,
+        >
-            inputId,
+            <label
-            label,
+                className='control-label col-sm-4'
-        } = this.props;
+                htmlFor={inputId}
-
-        return (
-            <div
-                data-testid={inputId}
-                className='form-group'
             >
-                <label
+                {label}
-                    className='control-label col-sm-4'
+            </label>
-                    htmlFor={inputId}
+            <div className='col-sm-8'>
+                {children}
+                <div
+                    data-testid={inputId + 'help-text'}
+                    className='help-text'
                 >
-                    {label}
+                    {helpText}
-                </label>
-                <div className='col-sm-8'>
-                    {children}
-                    <div
-                        data-testid={inputId + 'help-text'}
-                        className='help-text'
-                    >
-                        {helpText}
-                    </div>
-                    {setByEnv ? <SetByEnv/> : null}
                 </div>
+                {setByEnv ? <SetByEnv/> : null}
             </div>
-        );
+        </div>
-    }
+    );
-}
+};
+
+export default React.memo(Settings);