[MM-56848] Convert ./components/admin_console/settings_group.tsx from Class Component to Function Component (#26258)

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

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

@@ -15,7 +15,7 @@ exports[`components/BleveSettings should match snapshot, disabled 1`] = `
         id="admin.bleve.title"
       />
     </AdminHeader>
-    <SettingsGroup>
+    <Memo(SettingsGroup)>
       <BooleanSetting
         disabled={false}
         falseText={
@@ -207,7 +207,7 @@ exports[`components/BleveSettings should match snapshot, disabled 1`] = `
         }
         value={false}
       />
-    </SettingsGroup>
+    </Memo(SettingsGroup)>
     <div
       className="admin-console-save"
     >
@@ -266,7 +266,7 @@ exports[`components/BleveSettings should match snapshot, enabled 1`] = `
         id="admin.bleve.title"
       />
     </AdminHeader>
-    <SettingsGroup>
+    <Memo(SettingsGroup)>
       <BooleanSetting
         disabled={false}
         falseText={
@@ -458,7 +458,7 @@ exports[`components/BleveSettings should match snapshot, enabled 1`] = `
         }
         value={false}
       />
-    </SettingsGroup>
+    </Memo(SettingsGroup)>
     <div
       className="admin-console-save"
     >

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

@@ -15,7 +15,7 @@ exports[`components/ClusterSettings should match snapshot, compression disabled
         id="admin.advance.cluster"
       />
     </AdminHeader>
-    <SettingsGroup>
+    <Memo(SettingsGroup)>
       <Memo(ClusterTableContainer) />
       <div
         className="banner"
@@ -249,7 +249,7 @@ exports[`components/ClusterSettings should match snapshot, compression disabled
         }
         setByEnv={false}
       />
-    </SettingsGroup>
+    </Memo(SettingsGroup)>
     <div
       className="admin-console-save"
     >
@@ -308,7 +308,7 @@ exports[`components/ClusterSettings should match snapshot, compression enabled 1
         id="admin.advance.cluster"
       />
     </AdminHeader>
-    <SettingsGroup>
+    <Memo(SettingsGroup)>
       <Memo(ClusterTableContainer) />
       <div
         className="banner"
@@ -542,7 +542,7 @@ exports[`components/ClusterSettings should match snapshot, compression enabled 1
         }
         setByEnv={false}
       />
-    </SettingsGroup>
+    </Memo(SettingsGroup)>
     <div
       className="admin-console-save"
     >
@@ -601,7 +601,7 @@ exports[`components/ClusterSettings should match snapshot, encryption disabled 1
         id="admin.advance.cluster"
       />
     </AdminHeader>
-    <SettingsGroup>
+    <Memo(SettingsGroup)>
       <Memo(ClusterTableContainer) />
       <div
         className="banner"
@@ -835,7 +835,7 @@ exports[`components/ClusterSettings should match snapshot, encryption disabled 1
         }
         setByEnv={false}
       />
-    </SettingsGroup>
+    </Memo(SettingsGroup)>
     <div
       className="admin-console-save"
     >
@@ -894,7 +894,7 @@ exports[`components/ClusterSettings should match snapshot, encryption enabled 1`
         id="admin.advance.cluster"
       />
     </AdminHeader>
-    <SettingsGroup>
+    <Memo(SettingsGroup)>
       <Memo(ClusterTableContainer) />
       <div
         className="banner"
@@ -1128,7 +1128,7 @@ exports[`components/ClusterSettings should match snapshot, encryption enabled 1`
         }
         setByEnv={false}
       />
-    </SettingsGroup>
+    </Memo(SettingsGroup)>
     <div
       className="admin-console-save"
     >

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

@@ -15,7 +15,7 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
         id="admin.database.title"
       />
     </AdminHeader>
-    <SettingsGroup>
+    <Memo(SettingsGroup)>
       <div
         className="banner"
       >
@@ -422,7 +422,7 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
           </div>
         </div>
       </div>
-    </SettingsGroup>
+    </Memo(SettingsGroup)>
     <div
       className="admin-console-save"
     >

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

@@ -15,7 +15,7 @@ exports[`components/ElasticSearchSettings should match snapshot, disabled 1`] =
         id="admin.elasticsearch.title"
       />
     </AdminHeader>
-    <SettingsGroup>
+    <Memo(SettingsGroup)>
       <BooleanSetting
         disabled={false}
         falseText={
@@ -462,7 +462,7 @@ exports[`components/ElasticSearchSettings should match snapshot, disabled 1`] =
         }
         value={false}
       />
-    </SettingsGroup>
+    </Memo(SettingsGroup)>
     <div
       className="admin-console-save"
     >
@@ -521,7 +521,7 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = `
         id="admin.elasticsearch.title"
       />
     </AdminHeader>
-    <SettingsGroup>
+    <Memo(SettingsGroup)>
       <BooleanSetting
         disabled={false}
         falseText={
@@ -967,7 +967,7 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = `
         }
         value={false}
       />
-    </SettingsGroup>
+    </Memo(SettingsGroup)>
     <div
       className="admin-console-save"
     >

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

@@ -15,7 +15,7 @@ exports[`components/MessageExportSettings should match snapshot, disabled, actia
         id="admin.complianceExport.title"
       />
     </AdminHeader>
-    <SettingsGroup>
+    <Memo(SettingsGroup)>
       <BooleanSetting
         disabled={false}
         falseText={
@@ -136,7 +136,7 @@ exports[`components/MessageExportSettings should match snapshot, disabled, actia
         getExtraInfoText={[Function]}
         jobType="message_export"
       />
-    </SettingsGroup>
+    </Memo(SettingsGroup)>
     <div
       className="admin-console-save"
     >
@@ -195,7 +195,7 @@ exports[`components/MessageExportSettings should match snapshot, disabled, globa
         id="admin.complianceExport.title"
       />
     </AdminHeader>
-    <SettingsGroup>
+    <Memo(SettingsGroup)>
       <BooleanSetting
         disabled={false}
         falseText={
@@ -299,7 +299,7 @@ exports[`components/MessageExportSettings should match snapshot, disabled, globa
           ]
         }
       />
-      <SettingsGroup
+      <Memo(SettingsGroup)
         id="globalRelaySettings"
       >
         <Memo(RadioSetting)
@@ -412,7 +412,7 @@ exports[`components/MessageExportSettings should match snapshot, disabled, globa
           setByEnv={false}
           value="globalRelay@mattermost.com"
         />
-      </SettingsGroup>
+      </Memo(SettingsGroup)>
       <Connect(JobTable)
         createJobButtonText={
           <Memo(MemoizedFormattedMessage)
@@ -430,7 +430,7 @@ exports[`components/MessageExportSettings should match snapshot, disabled, globa
         getExtraInfoText={[Function]}
         jobType="message_export"
       />
-    </SettingsGroup>
+    </Memo(SettingsGroup)>
     <div
       className="admin-console-save"
     >
@@ -489,7 +489,7 @@ exports[`components/MessageExportSettings should match snapshot, enabled, actian
         id="admin.complianceExport.title"
       />
     </AdminHeader>
-    <SettingsGroup>
+    <Memo(SettingsGroup)>
       <BooleanSetting
         disabled={false}
         falseText={
@@ -610,7 +610,7 @@ exports[`components/MessageExportSettings should match snapshot, enabled, actian
         getExtraInfoText={[Function]}
         jobType="message_export"
       />
-    </SettingsGroup>
+    </Memo(SettingsGroup)>
     <div
       className="admin-console-save"
     >
@@ -669,7 +669,7 @@ exports[`components/MessageExportSettings should match snapshot, enabled, global
         id="admin.complianceExport.title"
       />
     </AdminHeader>
-    <SettingsGroup>
+    <Memo(SettingsGroup)>
       <BooleanSetting
         disabled={false}
         falseText={
@@ -773,7 +773,7 @@ exports[`components/MessageExportSettings should match snapshot, enabled, global
           ]
         }
       />
-      <SettingsGroup
+      <Memo(SettingsGroup)
         id="globalRelaySettings"
       >
         <Memo(RadioSetting)
@@ -886,7 +886,7 @@ exports[`components/MessageExportSettings should match snapshot, enabled, global
           setByEnv={false}
           value="globalRelay@mattermost.com"
         />
-      </SettingsGroup>
+      </Memo(SettingsGroup)>
       <Connect(JobTable)
         createJobButtonText={
           <Memo(MemoizedFormattedMessage)
@@ -904,7 +904,7 @@ exports[`components/MessageExportSettings should match snapshot, enabled, global
         getExtraInfoText={[Function]}
         jobType="message_export"
       />
-    </SettingsGroup>
+    </Memo(SettingsGroup)>
     <div
       className="admin-console-save"
     >

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

@@ -15,7 +15,7 @@ exports[`components/PushSettings should match snapshot, licensed 1`] = `
         id="admin.environment.pushNotificationServer"
       />
     </AdminHeader>
-    <SettingsGroup>
+    <Memo(SettingsGroup)>
       <Memo(DropdownSetting)
         helpText={null}
         id="pushNotificationServerType"
@@ -156,7 +156,7 @@ exports[`components/PushSettings should match snapshot, licensed 1`] = `
         type="number"
         value={1000}
       />
-    </SettingsGroup>
+    </Memo(SettingsGroup)>
     <div
       className="admin-console-save"
     >
@@ -215,7 +215,7 @@ exports[`components/PushSettings should match snapshot, unlicensed 1`] = `
         id="admin.environment.pushNotificationServer"
       />
     </AdminHeader>
-    <SettingsGroup>
+    <Memo(SettingsGroup)>
       <Memo(DropdownSetting)
         helpText={null}
         id="pushNotificationServerType"
@@ -300,7 +300,7 @@ exports[`components/PushSettings should match snapshot, unlicensed 1`] = `
         type="number"
         value={1000}
       />
-    </SettingsGroup>
+    </Memo(SettingsGroup)>
     <div
       className="admin-console-save"
     >

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

@@ -106,7 +106,7 @@ exports[`components/admin_console/SchemaAdminSettings should match snapshot with
         onSubmit={[Function]}
         role="form"
       >
-        <SettingsGroup
+        <Memo(SettingsGroup)
           container={false}
         >
           <AdminTextSetting
@@ -697,7 +697,7 @@ exports[`components/admin_console/SchemaAdminSettings should match snapshot with
             }
             value={true}
           />
-        </SettingsGroup>
+        </Memo(SettingsGroup)>
       </form>
     </div>
   </div>

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

@@ -18,7 +18,7 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
         onSubmit={[Function]}
         role="form"
       >
-        <SettingsGroup
+        <Memo(SettingsGroup)
           container={false}
         >
           <div
@@ -178,7 +178,7 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
 *This* is the **footer**"
             />
           </div>
-        </SettingsGroup>
+        </Memo(SettingsGroup)>
       </form>
     </div>
   </div>
@@ -318,7 +318,7 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
         onSubmit={[Function]}
         role="form"
       >
-        <SettingsGroup
+        <Memo(SettingsGroup)
           container={false}
         >
           <div
@@ -478,7 +478,7 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
 *This* is the **footer**"
             />
           </div>
-        </SettingsGroup>
+        </Memo(SettingsGroup)>
       </form>
     </div>
   </div>

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

@@ -21,7 +21,7 @@ exports[`components/PluginManagement should match snapshot 1`] = `
       <div
         className="admin-console__content"
       >
-        <SettingsGroup
+        <Memo(SettingsGroup)
           container={false}
           id="PluginSettings"
         >
@@ -302,7 +302,7 @@ exports[`components/PluginManagement should match snapshot 1`] = `
               <br />
             </div>
           </div>
-        </SettingsGroup>
+        </Memo(SettingsGroup)>
       </div>
     </div>
     <div
@@ -369,7 +369,7 @@ exports[`components/PluginManagement should match snapshot when \`Enable Marketp
       <div
         className="admin-console__content"
       >
-        <SettingsGroup
+        <Memo(SettingsGroup)
           container={false}
           id="PluginSettings"
         >
@@ -650,7 +650,7 @@ exports[`components/PluginManagement should match snapshot when \`Enable Marketp
               <br />
             </div>
           </div>
-        </SettingsGroup>
+        </Memo(SettingsGroup)>
       </div>
     </div>
     <div
@@ -717,7 +717,7 @@ exports[`components/PluginManagement should match snapshot when \`Enable Plugins
       <div
         className="admin-console__content"
       >
-        <SettingsGroup
+        <Memo(SettingsGroup)
           container={false}
           id="PluginSettings"
         >
@@ -746,7 +746,7 @@ exports[`components/PluginManagement should match snapshot when \`Enable Plugins
               <br />
             </div>
           </div>
-        </SettingsGroup>
+        </Memo(SettingsGroup)>
       </div>
     </div>
     <div
@@ -813,7 +813,7 @@ exports[`components/PluginManagement should match snapshot when \`Enable Remote
       <div
         className="admin-console__content"
       >
-        <SettingsGroup
+        <Memo(SettingsGroup)
           container={false}
           id="PluginSettings"
         >
@@ -1094,7 +1094,7 @@ exports[`components/PluginManagement should match snapshot when \`Enable Remote
               <br />
             </div>
           </div>
-        </SettingsGroup>
+        </Memo(SettingsGroup)>
       </div>
     </div>
     <div
@@ -1161,7 +1161,7 @@ exports[`components/PluginManagement should match snapshot when \`Require Signat
       <div
         className="admin-console__content"
       >
-        <SettingsGroup
+        <Memo(SettingsGroup)
           container={false}
           id="PluginSettings"
         >
@@ -1444,7 +1444,7 @@ exports[`components/PluginManagement should match snapshot when \`Require Signat
               <br />
             </div>
           </div>
-        </SettingsGroup>
+        </Memo(SettingsGroup)>
       </div>
     </div>
     <div
@@ -1511,7 +1511,7 @@ exports[`components/PluginManagement should match snapshot, No installed plugins
       <div
         className="admin-console__content"
       >
-        <SettingsGroup
+        <Memo(SettingsGroup)
           container={false}
           id="PluginSettings"
         >
@@ -1796,7 +1796,7 @@ exports[`components/PluginManagement should match snapshot, No installed plugins
               />
             </div>
           </div>
-        </SettingsGroup>
+        </Memo(SettingsGroup)>
       </div>
     </div>
     <div
@@ -1863,7 +1863,7 @@ exports[`components/PluginManagement should match snapshot, allow insecure URL e
       <div
         className="admin-console__content"
       >
-        <SettingsGroup
+        <Memo(SettingsGroup)
           container={false}
           id="PluginSettings"
         >
@@ -2144,7 +2144,7 @@ exports[`components/PluginManagement should match snapshot, allow insecure URL e
               <br />
             </div>
           </div>
-        </SettingsGroup>
+        </Memo(SettingsGroup)>
       </div>
     </div>
     <div
@@ -2211,7 +2211,7 @@ exports[`components/PluginManagement should match snapshot, disabled 1`] = `
       <div
         className="admin-console__content"
       >
-        <SettingsGroup
+        <Memo(SettingsGroup)
           container={false}
           id="PluginSettings"
         >
@@ -2469,7 +2469,7 @@ exports[`components/PluginManagement should match snapshot, disabled 1`] = `
             setByEnv={false}
             value="marketplace.example.com"
           />
-        </SettingsGroup>
+        </Memo(SettingsGroup)>
       </div>
     </div>
     <div
@@ -2536,7 +2536,7 @@ exports[`components/PluginManagement should match snapshot, text entered into th
       <div
         className="admin-console__content"
       >
-        <SettingsGroup
+        <Memo(SettingsGroup)
           container={false}
           id="PluginSettings"
         >
@@ -2817,7 +2817,7 @@ exports[`components/PluginManagement should match snapshot, text entered into th
               <br />
             </div>
           </div>
-        </SettingsGroup>
+        </Memo(SettingsGroup)>
       </div>
     </div>
     <div
@@ -2884,7 +2884,7 @@ exports[`components/PluginManagement should match snapshot, upload disabled 1`]
       <div
         className="admin-console__content"
       >
-        <SettingsGroup
+        <Memo(SettingsGroup)
           container={false}
           id="PluginSettings"
         >
@@ -3172,7 +3172,7 @@ exports[`components/PluginManagement should match snapshot, upload disabled 1`]
               <br />
             </div>
           </div>
-        </SettingsGroup>
+        </Memo(SettingsGroup)>
       </div>
     </div>
     <div
@@ -3239,7 +3239,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
       <div
         className="admin-console__content"
       >
-        <SettingsGroup
+        <Memo(SettingsGroup)
           container={false}
           id="PluginSettings"
         >
@@ -3583,7 +3583,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
               </div>
             </div>
           </div>
-        </SettingsGroup>
+        </Memo(SettingsGroup)>
       </div>
     </div>
     <div
@@ -3650,7 +3650,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
       <div
         className="admin-console__content"
       >
-        <SettingsGroup
+        <Memo(SettingsGroup)
           container={false}
           id="PluginSettings"
         >
@@ -3962,7 +3962,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
               </div>
             </div>
           </div>
-        </SettingsGroup>
+        </Memo(SettingsGroup)>
       </div>
     </div>
     <div
@@ -4029,7 +4029,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
       <div
         className="admin-console__content"
       >
-        <SettingsGroup
+        <Memo(SettingsGroup)
           container={false}
           id="PluginSettings"
         >
@@ -4341,7 +4341,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
               </div>
             </div>
           </div>
-        </SettingsGroup>
+        </Memo(SettingsGroup)>
       </div>
     </div>
     <div
@@ -4408,7 +4408,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
       <div
         className="admin-console__content"
       >
-        <SettingsGroup
+        <Memo(SettingsGroup)
           container={false}
           id="PluginSettings"
         >
@@ -4720,7 +4720,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
               </div>
             </div>
           </div>
-        </SettingsGroup>
+        </Memo(SettingsGroup)>
       </div>
     </div>
     <div
@@ -4787,7 +4787,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
       <div
         className="admin-console__content"
       >
-        <SettingsGroup
+        <Memo(SettingsGroup)
           container={false}
           id="PluginSettings"
         >
@@ -5131,7 +5131,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
               </div>
             </div>
           </div>
-        </SettingsGroup>
+        </Memo(SettingsGroup)>
       </div>
     </div>
     <div

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

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {memo} from 'react';
 
 type Props = {
     id?: string;
@@ -13,57 +13,57 @@ type Props = {
     container?: boolean;
 };
 
-export default class SettingsGroup extends React.PureComponent<Props> {
+const SettingsGroup = ({
-    render(): React.ReactNode {
+    show = true,
-        const {show = true, container = true} = this.props;
+    container = true,
+    header,
+    title,
+    subtitle,
+    children,
+}: Props) => {
+    let wrapperClass = '';
+    let contentClass = '';
 
-        let wrapperClass = '';
+    if (!show) {
-        let contentClass = '';
+        return null;
+    }
 
-        if (!show) {
+    if (container) {
-            return null;
+        wrapperClass = 'admin-console__wrapper';
-        }
+        contentClass = 'admin-console__content';
+    }
 
-        if (container) {
+    let sectionTitle = null;
-            wrapperClass = 'admin-console__wrapper';
+    if (!header && title) {
-            contentClass = 'admin-console__content';
+        sectionTitle = <div className={'section-title'}>{title}</div>;
-        }
+    }
 
-        let header = null;
+    let sectionSubtitle = null;
-        if (this.props.header) {
+    if (!header && subtitle) {
-            header = <h4>{this.props.header}</h4>;
+        sectionSubtitle = (
-        }
+            <div className={'section-subtitle'}>{subtitle}</div>
+        );
+    }
 
-        let title = null;
+    let sectionHeader = null;
-        if (!this.props.header && this.props.title) {
+    if (sectionTitle || sectionSubtitle) {
-            title = <div className={'section-title'}>{this.props.title}</div>;
+        sectionHeader = (
-        }
+            <div className={'section-header'}>
-
+                {sectionTitle}
-        let subtitle = null;
+                {sectionSubtitle}
-        if (!this.props.header && this.props.subtitle) {
-            subtitle = (
-                <div className={'section-subtitle'}>{this.props.subtitle}</div>
-            );
-        }
-
-        let sectionHeader = null;
-        if (title || subtitle) {
-            sectionHeader = (
-                <div className={'section-header'}>
-                    {title}
-                    {subtitle}
-                </div>
-            );
-        }
-
-        return (
-            <div className={wrapperClass}>
-                <div className={contentClass}>
-                    {header}
-                    {sectionHeader}
-                    {this.props.children}
-                </div>
             </div>
         );
     }
-}
+
+    return (
+        <div className={wrapperClass}>
+            <div className={contentClass}>
+                {header ? <h4>{header}</h4> : null}
+                {sectionHeader}
+                {children}
+            </div>
+        </div>
+    );
+};
+
+export default memo(SettingsGroup);