[MM-52835]: Migrate "components/admin_console/settings_group.jsx" and tests to Typescript (#23563)

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

@@ -15,10 +15,7 @@ exports[`components/BleveSettings should match snapshot, disabled 1`] = `
         id="admin.bleve.title"
       />
     </AdminHeader>
-    <SettingsGroup
+    <SettingsGroup>
-      container={true}
-      show={true}
-    >
       <BooleanSetting
         disabled={false}
         falseText={
@@ -277,10 +274,7 @@ exports[`components/BleveSettings should match snapshot, enabled 1`] = `
         id="admin.bleve.title"
       />
     </AdminHeader>
-    <SettingsGroup
+    <SettingsGroup>
-      container={true}
-      show={true}
-    >
       <BooleanSetting
         disabled={false}
         falseText={

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

@@ -15,10 +15,7 @@ exports[`components/ClusterSettings should match snapshot, compression disabled
         id="admin.advance.cluster"
       />
     </AdminHeader>
-    <SettingsGroup
+    <SettingsGroup>
-      container={true}
-      show={true}
-    >
       <ClusterTableContainer />
       <div
         className="banner"
@@ -291,10 +288,7 @@ exports[`components/ClusterSettings should match snapshot, compression enabled 1
         id="admin.advance.cluster"
       />
     </AdminHeader>
-    <SettingsGroup
+    <SettingsGroup>
-      container={true}
-      show={true}
-    >
       <ClusterTableContainer />
       <div
         className="banner"
@@ -567,10 +561,7 @@ exports[`components/ClusterSettings should match snapshot, encryption disabled 1
         id="admin.advance.cluster"
       />
     </AdminHeader>
-    <SettingsGroup
+    <SettingsGroup>
-      container={true}
-      show={true}
-    >
       <ClusterTableContainer />
       <div
         className="banner"
@@ -843,10 +834,7 @@ exports[`components/ClusterSettings should match snapshot, encryption enabled 1`
         id="admin.advance.cluster"
       />
     </AdminHeader>
-    <SettingsGroup
+    <SettingsGroup>
-      container={true}
-      show={true}
-    >
       <ClusterTableContainer />
       <div
         className="banner"

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

@@ -15,10 +15,7 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
         id="admin.database.title"
       />
     </AdminHeader>
-    <SettingsGroup
+    <SettingsGroup>
-      container={true}
-      show={true}
-    >
       <div
         className="banner"
       >

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

@@ -15,10 +15,7 @@ exports[`components/ElasticSearchSettings should match snapshot, disabled 1`] =
         id="admin.elasticsearch.title"
       />
     </AdminHeader>
-    <SettingsGroup
+    <SettingsGroup>
-      container={true}
-      show={true}
-    >
       <BooleanSetting
         disabled={false}
         falseText={
@@ -486,10 +483,7 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = `
         id="admin.elasticsearch.title"
       />
     </AdminHeader>
-    <SettingsGroup
+    <SettingsGroup>
-      container={true}
-      show={true}
-    >
       <BooleanSetting
         disabled={false}
         falseText={

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

@@ -15,10 +15,7 @@ exports[`components/MessageExportSettings should match snapshot, disabled, actia
         id="admin.complianceExport.title"
       />
     </AdminHeader>
-    <SettingsGroup
+    <SettingsGroup>
-      container={true}
-      show={true}
-    >
       <BooleanSetting
         disabled={false}
         falseText={
@@ -192,10 +189,7 @@ exports[`components/MessageExportSettings should match snapshot, disabled, globa
         id="admin.complianceExport.title"
       />
     </AdminHeader>
-    <SettingsGroup
+    <SettingsGroup>
-      container={true}
-      show={true}
-    >
       <BooleanSetting
         disabled={false}
         falseText={
@@ -294,9 +288,7 @@ exports[`components/MessageExportSettings should match snapshot, disabled, globa
         }
       />
       <SettingsGroup
-        container={true}
         id="globalRelaySettings"
-        show={true}
       >
         <RadioSetting
           disabled={true}
@@ -466,10 +458,7 @@ exports[`components/MessageExportSettings should match snapshot, enabled, actian
         id="admin.complianceExport.title"
       />
     </AdminHeader>
-    <SettingsGroup
+    <SettingsGroup>
-      container={true}
-      show={true}
-    >
       <BooleanSetting
         disabled={false}
         falseText={
@@ -643,10 +632,7 @@ exports[`components/MessageExportSettings should match snapshot, enabled, global
         id="admin.complianceExport.title"
       />
     </AdminHeader>
-    <SettingsGroup
+    <SettingsGroup>
-      container={true}
-      show={true}
-    >
       <BooleanSetting
         disabled={false}
         falseText={
@@ -745,9 +731,7 @@ exports[`components/MessageExportSettings should match snapshot, enabled, global
         }
       />
       <SettingsGroup
-        container={true}
         id="globalRelaySettings"
-        show={true}
       >
         <RadioSetting
           disabled={false}

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

@@ -63,7 +63,6 @@ exports[`components/admin_console/SchemaAdminSettings should match snapshot with
       >
         <SettingsGroup
           container={false}
-          show={true}
         >
           <AdminTextSetting
             disabled={false}

webapp/channels/src/components/admin_console/bleve_settings.jsx

@@ -15,7 +15,7 @@ import BooleanSetting from './boolean_setting';
 import TextSetting from './text_setting';
 import JobsTable from './jobs';
 import RequestButton from './request_button/request_button';
-import SettingsGroup from './settings_group.jsx';
+import SettingsGroup from './settings_group';
 
 export default class BleveSettings extends AdminSettings {
     getConfigFromState = (config) => {

webapp/channels/src/components/admin_console/cluster_settings.jsx

@@ -15,7 +15,7 @@ import ExternalLink from 'components/external_link';
 import AdminSettings from './admin_settings';
 import BooleanSetting from './boolean_setting';
 import ClusterTableContainer from './cluster_table_container.jsx';
-import SettingsGroup from './settings_group.jsx';
+import SettingsGroup from './settings_group';
 import TextSetting from './text_setting';
 
 export default class ClusterSettings extends AdminSettings {

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

@@ -20,7 +20,6 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
       >
         <SettingsGroup
           container={false}
-          show={true}
         >
           <div
             className="banner"
@@ -332,7 +331,6 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
       >
         <SettingsGroup
           container={false}
-          show={true}
         >
           <div
             className="banner"

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

@@ -8,7 +8,7 @@ import {AdminConfig, ClientLicense} from '@mattermost/types/config';
 import {TermsOfService} from '@mattermost/types/terms_of_service';
 
 import AdminSettings, {BaseProps, BaseState} from 'components/admin_console/admin_settings';
-import SettingsGroup from 'components/admin_console/settings_group.jsx';
+import SettingsGroup from 'components/admin_console/settings_group';
 import BooleanSetting from 'components/admin_console/boolean_setting';
 import TextSetting from 'components/admin_console/text_setting';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';

webapp/channels/src/components/admin_console/database_settings.jsx

@@ -13,7 +13,7 @@ import ExternalLink from 'components/external_link';
 import AdminSettings from './admin_settings';
 import BooleanSetting from './boolean_setting';
 import RequestButton from './request_button/request_button';
-import SettingsGroup from './settings_group.jsx';
+import SettingsGroup from './settings_group';
 import TextSetting from './text_setting';
 
 import MigrationsTable from './database';

webapp/channels/src/components/admin_console/elasticsearch_settings.jsx

@@ -15,7 +15,7 @@ import AdminSettings from './admin_settings';
 import BooleanSetting from './boolean_setting';
 import JobsTable from './jobs';
 import RequestButton from './request_button/request_button';
-import SettingsGroup from './settings_group.jsx';
+import SettingsGroup from './settings_group';
 import TextSetting from './text_setting';
 
 export default class ElasticsearchSettings extends AdminSettings {

webapp/channels/src/components/admin_console/message_export_settings.jsx

@@ -16,7 +16,7 @@ import AdminSettings from './admin_settings';
 import BooleanSetting from './boolean_setting';
 import DropdownSetting from './dropdown_setting.jsx';
 import JobsTable from './jobs';
-import SettingsGroup from './settings_group.jsx';
+import SettingsGroup from './settings_group';
 import TextSetting from './text_setting';
 import RadioSetting from './radio_setting';
 

webapp/channels/src/components/admin_console/password_settings.jsx

@@ -10,7 +10,7 @@ import {t} from 'utils/i18n';
 
 import AdminSettings from './admin_settings';
 import Setting from './setting';
-import SettingsGroup from './settings_group.jsx';
+import SettingsGroup from './settings_group';
 import TextSetting from './text_setting';
 
 export default class PasswordSettings extends AdminSettings {

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

@@ -24,7 +24,6 @@ exports[`components/PluginManagement should match snapshot 1`] = `
         <SettingsGroup
           container={false}
           id="PluginSettings"
-          show={true}
         >
           <BooleanSetting
             disabled={false}
@@ -374,7 +373,6 @@ exports[`components/PluginManagement should match snapshot when \`Enable Marketp
         <SettingsGroup
           container={false}
           id="PluginSettings"
-          show={true}
         >
           <BooleanSetting
             disabled={false}
@@ -724,7 +722,6 @@ exports[`components/PluginManagement should match snapshot when \`Enable Plugins
         <SettingsGroup
           container={false}
           id="PluginSettings"
-          show={true}
         >
           <div
             className="form-group"
@@ -821,7 +818,6 @@ exports[`components/PluginManagement should match snapshot when \`Enable Remote
         <SettingsGroup
           container={false}
           id="PluginSettings"
-          show={true}
         >
           <BooleanSetting
             disabled={false}
@@ -1171,7 +1167,6 @@ exports[`components/PluginManagement should match snapshot when \`Require Signat
         <SettingsGroup
           container={false}
           id="PluginSettings"
-          show={true}
         >
           <BooleanSetting
             disabled={false}
@@ -1523,7 +1518,6 @@ exports[`components/PluginManagement should match snapshot, No installed plugins
         <SettingsGroup
           container={false}
           id="PluginSettings"
-          show={true}
         >
           <BooleanSetting
             disabled={false}
@@ -1877,7 +1871,6 @@ exports[`components/PluginManagement should match snapshot, allow insecure URL e
         <SettingsGroup
           container={false}
           id="PluginSettings"
-          show={true}
         >
           <BooleanSetting
             disabled={false}
@@ -2227,7 +2220,6 @@ exports[`components/PluginManagement should match snapshot, disabled 1`] = `
         <SettingsGroup
           container={false}
           id="PluginSettings"
-          show={true}
         >
           <BooleanSetting
             disabled={false}
@@ -2554,7 +2546,6 @@ exports[`components/PluginManagement should match snapshot, text entered into th
         <SettingsGroup
           container={false}
           id="PluginSettings"
-          show={true}
         >
           <BooleanSetting
             disabled={false}
@@ -2904,7 +2895,6 @@ exports[`components/PluginManagement should match snapshot, upload disabled 1`]
         <SettingsGroup
           container={false}
           id="PluginSettings"
-          show={true}
         >
           <BooleanSetting
             disabled={false}
@@ -3261,7 +3251,6 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         <SettingsGroup
           container={false}
           id="PluginSettings"
-          show={true}
         >
           <BooleanSetting
             disabled={false}
@@ -3674,7 +3663,6 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         <SettingsGroup
           container={false}
           id="PluginSettings"
-          show={true}
         >
           <BooleanSetting
             disabled={false}
@@ -4055,7 +4043,6 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         <SettingsGroup
           container={false}
           id="PluginSettings"
-          show={true}
         >
           <BooleanSetting
             disabled={false}
@@ -4436,7 +4423,6 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         <SettingsGroup
           container={false}
           id="PluginSettings"
-          show={true}
         >
           <BooleanSetting
             disabled={false}
@@ -4817,7 +4803,6 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         <SettingsGroup
           container={false}
           id="PluginSettings"
-          show={true}
         >
           <BooleanSetting
             disabled={false}

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

@@ -17,7 +17,7 @@ import ConfirmModal from 'components/confirm_modal';
 
 import AdminSettings, {BaseProps, BaseState} from '../admin_settings';
 import BooleanSetting from '../boolean_setting';
-import SettingsGroup from '../settings_group.jsx';
+import SettingsGroup from '../settings_group';
 import TextSetting from '../text_setting';
 import {appsPluginID} from 'utils/apps';
 import ExternalLink from 'components/external_link';

webapp/channels/src/components/admin_console/push_settings.jsx

@@ -11,7 +11,7 @@ import * as Utils from 'utils/utils';
 
 import AdminSettings from './admin_settings';
 import DropdownSetting from './dropdown_setting.jsx';
-import SettingsGroup from './settings_group.jsx';
+import SettingsGroup from './settings_group';
 import TextSetting from './text_setting';
 
 const PUSH_NOTIFICATIONS_OFF = 'off';

webapp/channels/src/components/admin_console/schema_admin_settings.jsx

@@ -22,7 +22,7 @@ import RadioSetting from 'components/admin_console/radio_setting';
 import ColorSetting from 'components/admin_console/color_setting';
 import GeneratedSetting from 'components/admin_console/generated_setting';
 import UserAutocompleteSetting from 'components/admin_console/user_autocomplete_setting';
-import SettingsGroup from 'components/admin_console/settings_group.jsx';
+import SettingsGroup from 'components/admin_console/settings_group';
 import JobsTable from 'components/admin_console/jobs';
 import FileUploadSetting from 'components/admin_console/file_upload_setting.jsx';
 import RemoveFileSetting from 'components/admin_console/remove_file_setting';

webapp/channels/src/components/admin_console/session_length_settings.jsx

@@ -9,7 +9,7 @@ import * as Utils from 'utils/utils';
 
 import AdminSettings from './admin_settings';
 import BooleanSetting from './boolean_setting';
-import SettingsGroup from './settings_group.jsx';
+import SettingsGroup from './settings_group';
 import TextSetting from './text_setting';
 
 export default class SessionLengthSettings extends AdminSettings {

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

@@ -1,65 +1,48 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import PropTypes from 'prop-types';
 import React from 'react';
 
-export default class SettingsGroup extends React.PureComponent {
+type Props = {
-    static get propTypes() {
+    id?: string;
-        return {
+    show?: boolean;
-            show: PropTypes.bool.isRequired,
+    header?: React.ReactNode;
-            header: PropTypes.node,
+    title?: React.ReactNode;
-            title: PropTypes.node,
+    subtitle?: React.ReactNode;
-            subtitle: PropTypes.node,
+    children?: React.ReactNode;
-            children: PropTypes.node,
+    container?: boolean;
-            container: PropTypes.bool,
+};
-        };
-    }
 
-    static get defaultProps() {
+export default class SettingsGroup extends React.PureComponent<Props> {
-        return {
+    render(): React.ReactNode {
-            show: true,
+        const {show = true, container = true} = this.props;
-            container: true,
-        };
-    }
 
-    render() {
         let wrapperClass = '';
         let contentClass = '';
 
-        if (!this.props.show) {
+        if (!show) {
             return null;
         }
 
-        if (this.props.container) {
+        if (container) {
             wrapperClass = 'admin-console__wrapper';
             contentClass = 'admin-console__content';
         }
 
         let header = null;
         if (this.props.header) {
-            header = (
+            header = <h4>{this.props.header}</h4>;
-                <h4>
-                    {this.props.header}
-                </h4>
-            );
         }
 
         let title = null;
         if (!this.props.header && this.props.title) {
-            title = (
+            title = <div className={'section-title'}>{this.props.title}</div>;
-                <div className={'section-title'}>
-                    {this.props.title}
-                </div>
-            );
         }
 
         let subtitle = null;
         if (!this.props.header && this.props.subtitle) {
             subtitle = (
-                <div className={'section-subtitle'}>
+                <div className={'section-subtitle'}>{this.props.subtitle}</div>
-                    {this.props.subtitle}
-                </div>
             );
         }