[MM-52708] webapp/channels : Remove "FormattedAdminHeader" component (#23344)

webapp/channels/package.json

@@ -178,7 +178,7 @@
     "jest-junit": "12.2.0",
     "jest-styled-components": "7.1.1",
     "jest-watch-typeahead": "0.6.4",
-    "mmjstool": "github:mattermost/mattermost-utilities#1d21e35ca6296ef7b6379b0f214b86ffa6404213",
+    "mmjstool": "github:mattermost/mattermost-utilities#e65ab00f22628cbdee736fd2e4f192f07225e82d",
     "nock": "13.2.8",
     "prettier": "2.3.2",
     "react-router-enzyme-context": "1.2.0",

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

@@ -44,11 +44,12 @@ exports[`components/admin_console/SchemaAdminSettings should match snapshot with
 <div
   className="wrapper--fixed "
 >
-  <FormattedAdminHeader
-    defaultMessage="Configuration"
-    id="config"
-    values={Object {}}
-  />
+  <AdminHeader>
+    <MemoizedFormattedMessage
+      defaultMessage="Configuration"
+      id="config"
+    />
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >

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

@@ -8,10 +8,10 @@ import {AdminConfig, EnvironmentConfig} from '@mattermost/types/config';
 import {DeepPartial} from '@mattermost/types/utilities';
 
 import {localizeMessage} from 'utils/utils';
+
 import SaveButton from 'components/save_button';
 import Tooltip from 'components/tooltip';
 import FormError from 'components/form_error';
-
 import AdminHeader from 'components/widgets/admin_console/admin_header';
 
 export type BaseProps = {

webapp/channels/src/components/admin_console/billing/billing_history.tsx

@@ -13,8 +13,8 @@ import {pageVisited, trackEvent} from 'actions/telemetry_actions';
 
 import CloudFetchError from 'components/cloud_fetch_error';
 import LoadingSpinner from 'components/widgets/loading/loading_spinner';
-import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
 import EmptyBillingHistorySvg from 'components/common/svg_images_components/empty_billing_history_svg';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
 
 import {CloudLinks, HostedCustomerLinks} from 'utils/constants';
 import ExternalLink from 'components/external_link';
@@ -67,12 +67,15 @@ const BillingHistory = () => {
     }, [isCloud]);
     const billingHistoryTable = invoices && <BillingHistoryTable invoices={invoices}/>;
     const areInvoicesEmpty = Object.keys(invoices || {}).length === 0;
+
     return (
         <div className='wrapper--fixed BillingHistory'>
-            <FormattedAdminHeader
-                id='admin.billing.history.title'
-                defaultMessage='Billing History'
-            />
+            <AdminHeader>
+                <FormattedMessage
+                    id='admin.billing.history.title'
+                    defaultMessage='Billing History'
+                />
+            </AdminHeader>
             <div className='admin-console__wrapper'>
                 <div className='admin-console__content'>
                     {invoicesError && <CloudFetchError/>}

webapp/channels/src/components/admin_console/billing/billing_subscriptions/index.tsx

@@ -3,22 +3,21 @@
 
 import React, {useEffect, useState} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
+import {FormattedMessage} from 'react-intl';
+
+import {GlobalState} from '@mattermost/types/store';
 
 import {getCloudSubscription, getCloudProducts, getCloudCustomer} from 'mattermost-redux/actions/cloud';
 import {DispatchFunc} from 'mattermost-redux/types/actions';
-
-import {pageVisited} from 'actions/telemetry_actions';
-
-import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
-import CloudTrialBanner from 'components/admin_console/billing/billing_subscriptions/cloud_trial_banner';
-import CloudFetchError from 'components/cloud_fetch_error';
-
 import {
     getSubscriptionProduct,
     getCloudSubscription as selectCloudSubscription,
     getCloudCustomer as selectCloudCustomer,
     getCloudErrors,
 } from 'mattermost-redux/selectors/entities/cloud';
+
+import {pageVisited} from 'actions/telemetry_actions';
+
 import {
     CloudProducts,
     RecurringIntervals,
@@ -29,18 +28,18 @@ import {hasSomeLimits} from 'utils/limits';
 import {getRemainingDaysFromFutureTimestamp} from 'utils/utils';
 import {useQuery} from 'utils/http_utils';
 
+import CloudTrialBanner from 'components/admin_console/billing/billing_subscriptions/cloud_trial_banner';
+import CloudFetchError from 'components/cloud_fetch_error';
 import useOpenPricingModal from 'components/common/hooks/useOpenPricingModal';
 import useOpenCloudPurchaseModal from 'components/common/hooks/useOpenCloudPurchaseModal';
 import useGetLimits from 'components/common/hooks/useGetLimits';
 import DeleteWorkspaceCTA from 'components/admin_console/billing//delete_workspace/delete_workspace_cta';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
 
 import PlanDetails from '../plan_details';
 import BillingSummary from '../billing_summary';
-import {GlobalState} from '@mattermost/types/store';
-
 import ContactSalesCard from './contact_sales_card';
 import Limits from './limits';
-
 import {
     creditCardExpiredBanner,
     paymentFailedBanner,
@@ -124,10 +123,12 @@ const BillingSubscriptions = () => {
 
     return (
         <div className='wrapper--fixed BillingSubscriptions'>
-            <FormattedAdminHeader
-                id='admin.billing.subscription.title'
-                defaultMessage='Subscription'
-            />
+            <AdminHeader>
+                <FormattedMessage
+                    id='admin.billing.subscription.title'
+                    defaultMessage='Subscription'
+                />
+            </AdminHeader>
             <div className='admin-console__wrapper'>
                 <div className='admin-console__content'>
                     {errorLoadingData && <CloudFetchError/>}

webapp/channels/src/components/admin_console/billing/company_info.tsx

@@ -3,14 +3,16 @@
 
 import React, {useEffect} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
+import {FormattedMessage} from 'react-intl';
 
 import {DispatchFunc} from 'mattermost-redux/types/actions';
 import {getCloudCustomer} from 'mattermost-redux/actions/cloud';
 import {getCloudErrors} from 'mattermost-redux/selectors/entities/cloud';
 
 import {pageVisited} from 'actions/telemetry_actions';
-import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
+
 import CloudFetchError from 'components/cloud_fetch_error';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
 
 import CompanyInfoDisplay from './company_info_display';
 
@@ -28,18 +30,15 @@ const CompanyInfo: React.FC<Props> = () => {
 
     return (
         <div className='wrapper--fixed CompanyInfo'>
-            <FormattedAdminHeader
-                id='admin.billing.company_info.title'
-                defaultMessage='Company Information'
-            />
+            <AdminHeader>
+                <FormattedMessage
+                    id='admin.billing.company_info.title'
+                    defaultMessage='Company Information'
+                />
+            </AdminHeader>
             <div className='admin-console__wrapper'>
                 <div className='admin-console__content'>
                     {customerError ? <CloudFetchError/> : <CompanyInfoDisplay/>}
-                    { /* Billing Admins section
-                        <div style={{border: '1px solid #000', width: '100%', height: '194px', marginTop: '20px'}}>
-                        {'Billing Admins Card'}
-                        </div>
-                    */}
                 </div>
             </div>
         </div>

webapp/channels/src/components/admin_console/billing/company_info_edit.tsx

@@ -9,14 +9,17 @@ import {useHistory} from 'react-router-dom';
 
 import {getCloudCustomer, updateCloudCustomer, updateCloudCustomerAddress} from 'mattermost-redux/actions/cloud';
 
+import {GlobalState} from 'types/store';
+
+import {COUNTRIES} from 'utils/countries';
+import * as Utils from 'utils/utils';
+
 import BlockableLink from 'components/admin_console/blockable_link';
 import DropdownInput from 'components/dropdown_input';
 import StateSelector from 'components/payment_form/state_selector';
 import Input from 'components/widgets/inputs/input/input';
 import SaveButton from 'components/save_button';
-import {GlobalState} from 'types/store';
-import {COUNTRIES} from 'utils/countries';
-import * as Utils from 'utils/utils';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
 
 import {setNavigationBlocked} from 'actions/admin_actions.jsx';
 
@@ -202,7 +205,7 @@ const CompanyInfoEdit: React.FC<Props> = () => {
 
     return (
         <div className='wrapper--fixed CompanyInfoEdit'>
-            <div className='admin-console__header with-back'>
+            <AdminHeader withBackButton={true}>
                 <div>
                     <BlockableLink
                         to='/admin_console/billing/company_info'
@@ -213,7 +216,7 @@ const CompanyInfoEdit: React.FC<Props> = () => {
                         defaultMessage='Edit Company Information'
                     />
                 </div>
-            </div>
+            </AdminHeader>
             <div className='admin-console__wrapper'>
                 <div className='admin-console__content'>
                     <div className='CompanyInfoEdit__card'>

webapp/channels/src/components/admin_console/billing/payment_info.tsx

@@ -5,15 +5,17 @@ import React, {useEffect, useState} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import {FormattedMessage} from 'react-intl';
 
+import {GlobalState} from '@mattermost/types/store';
+
 import {DispatchFunc} from 'mattermost-redux/types/actions';
 import {getCloudCustomer} from 'mattermost-redux/actions/cloud';
 import {getCloudErrors} from 'mattermost-redux/selectors/entities/cloud';
-import {GlobalState} from '@mattermost/types/store';
 
 import {pageVisited} from 'actions/telemetry_actions';
-import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
+
 import AlertBanner from 'components/alert_banner';
 import CloudFetchError from 'components/cloud_fetch_error';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
 
 import PaymentInfoDisplay from './payment_info_display';
 
@@ -56,10 +58,12 @@ const PaymentInfo: React.FC<Props> = () => {
 
     return (
         <div className='wrapper--fixed PaymentInfo'>
-            <FormattedAdminHeader
-                id='admin.billing.payment_info.title'
-                defaultMessage='Payment Information'
-            />
+            <AdminHeader>
+                <FormattedMessage
+                    id='admin.billing.payment_info.title'
+                    defaultMessage='Payment Information'
+                />
+            </AdminHeader>
             <div className='admin-console__wrapper'>
                 <div className='admin-console__content'>
                     {showCreditCardBanner && isCardAboutToExpire && (

webapp/channels/src/components/admin_console/billing/payment_info_edit.tsx

@@ -21,15 +21,17 @@ import {areBillingDetailsValid, BillingDetails} from 'types/cloud/sku';
 import {GlobalState} from 'types/store';
 
 import {CloudLinks} from 'utils/constants';
+
 import BlockableLink from 'components/admin_console/blockable_link';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 import PaymentForm from 'components/payment_form/payment_form';
 import {STRIPE_CSS_SRC, STRIPE_PUBLIC_KEY} from 'components/payment_form/stripe';
 import SaveButton from 'components/save_button';
 import AlertBanner from 'components/alert_banner';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
+import ExternalLink from 'components/external_link';
 
 import './payment_info_edit.scss';
-import ExternalLink from 'components/external_link';
 
 let stripePromise: Promise<Stripe | null>;
 
@@ -86,7 +88,7 @@ const PaymentInfoEdit: React.FC = () => {
 
     return (
         <div className='wrapper--fixed PaymentInfoEdit'>
-            <div className='admin-console__header with-back'>
+            <AdminHeader withBackButton={true}>
                 <div>
                     <BlockableLink
                         to='/admin_console/billing/payment_info'
@@ -97,7 +99,7 @@ const PaymentInfoEdit: React.FC = () => {
                         defaultMessage='Edit Payment Information'
                     />
                 </div>
-            </div>
+            </AdminHeader>
             <div className='admin-console__wrapper'>
                 <div className='admin-console__content'>
                     {showCreditCardWarning &&

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

@@ -4,14 +4,12 @@ exports[`components/admin_console/data_retention_settings/data_retention_setting
 <div
   className="wrapper--fixed DataRetentionSettings"
 >
-  <div
-    className="admin-console__header"
-  >
+  <AdminHeader>
     <MemoizedFormattedMessage
       defaultMessage="Data Retention Policies"
       id="admin.data_retention.settings.title"
     />
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -384,14 +382,12 @@ exports[`components/admin_console/data_retention_settings/data_retention_setting
 <div
   className="wrapper--fixed DataRetentionSettings"
 >
-  <div
-    className="admin-console__header"
-  >
+  <AdminHeader>
     <MemoizedFormattedMessage
       defaultMessage="Data Retention Policies"
       id="admin.data_retention.settings.title"
     />
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -784,14 +780,12 @@ exports[`components/admin_console/data_retention_settings/data_retention_setting
 <div
   className="wrapper--fixed DataRetentionSettings"
 >
-  <div
-    className="admin-console__header"
-  >
+  <AdminHeader>
     <MemoizedFormattedMessage
       defaultMessage="Data Retention Policies"
       id="admin.data_retention.settings.title"
     />
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -1179,14 +1173,12 @@ exports[`components/admin_console/data_retention_settings/data_retention_setting
 <div
   className="wrapper--fixed DataRetentionSettings"
 >
-  <div
-    className="admin-console__header"
-  >
+  <AdminHeader>
     <MemoizedFormattedMessage
       defaultMessage="Data Retention Policies"
       id="admin.data_retention.settings.title"
     />
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >

webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/__snapshots__/custom_policy_form.test.tsx.snap

@@ -4,8 +4,8 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
 <div
   className="wrapper--fixed DataRetentionSettings"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -17,7 +17,7 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
         id="admin.data_retention.customTitle"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -264,8 +264,8 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
 <div
   className="wrapper--fixed DataRetentionSettings"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -277,7 +277,7 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
         id="admin.data_retention.customTitle"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >

webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/custom_policy_form.tsx

@@ -14,6 +14,8 @@ import {IDMappedObjects} from '@mattermost/types/utilities';
 import {ChannelWithTeamData} from '@mattermost/types/channels';
 
 import * as Utils from 'utils/utils';
+import {getHistory} from 'utils/browser_history';
+import {ItemStatus} from 'utils/constants';
 
 import TitleAndButtonCardHeader from 'components/card/title_and_button_card_header/title_and_button_card_header';
 import Card from 'components/card/card';
@@ -26,9 +28,7 @@ import SaveButton from 'components/save_button';
 import TeamList from 'components/admin_console/data_retention_settings/team_list';
 import ChannelList from 'components/admin_console/data_retention_settings/channel_list';
 import {keepForeverOption, yearsOption, daysOption, FOREVER, YEARS} from 'components/admin_console/data_retention_settings/dropdown_options/dropdown_options';
-
-import {getHistory} from 'utils/browser_history';
-import {ItemStatus} from 'utils/constants';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
 
 import './custom_policy_form.scss';
 
@@ -308,7 +308,7 @@ export default class CustomPolicyForm extends React.PureComponent<Props, State>
         const {serverError, formErrorText} = this.state;
         return (
             <div className='wrapper--fixed DataRetentionSettings'>
-                <div className='admin-console__header with-back'>
+                <AdminHeader withBackButton={true}>
                     <div>
                         <BlockableLink
                             to='/admin_console/compliance/data_retention_settings'
@@ -319,7 +319,7 @@ export default class CustomPolicyForm extends React.PureComponent<Props, State>
                             defaultMessage='Custom Retention Policy'
                         />
                     </div>
-                </div>
+                </AdminHeader>
                 <div className='admin-console__wrapper'>
                     <div className='admin-console__content'>
                         <Card

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

@@ -8,20 +8,22 @@ import ReactSelect from 'react-select';
 import {AdminConfig} from '@mattermost/types/config';
 import {DataRetentionCustomPolicies, DataRetentionCustomPolicy} from '@mattermost/types/data_retention';
 import {DeepPartial} from '@mattermost/types/utilities';
-
-import {JobTypes} from 'utils/constants';
-import * as Utils from 'utils/utils';
-import DataGrid, {Row, Column} from 'components/admin_console/data_grid/data_grid';
-import Card from 'components/card/card';
-import TitleAndButtonCardHeader from 'components/card/title_and_button_card_header/title_and_button_card_header';
-
-import JobsTable from 'components/admin_console/jobs';
-import MenuWrapper from 'components/widgets/menu/menu_wrapper';
-import Menu from 'components/widgets/menu/menu';
-import {getHistory} from 'utils/browser_history';
 import {JobTypeBase, JobType} from '@mattermost/types/jobs';
 
 import {ActionResult} from 'mattermost-redux/types/actions';
+
+import {JobTypes} from 'utils/constants';
+import * as Utils from 'utils/utils';
+import {getHistory} from 'utils/browser_history';
+
+import DataGrid, {Row, Column} from 'components/admin_console/data_grid/data_grid';
+import Card from 'components/card/card';
+import TitleAndButtonCardHeader from 'components/card/title_and_button_card_header/title_and_button_card_header';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
+import JobsTable from 'components/admin_console/jobs';
+import MenuWrapper from 'components/widgets/menu/menu_wrapper';
+import Menu from 'components/widgets/menu/menu';
+
 import './data_retention_settings.scss';
 
 type OptionType = {
@@ -454,12 +456,12 @@ export default class DataRetentionSettings extends React.PureComponent<Props, St
 
         return (
             <div className='wrapper--fixed DataRetentionSettings'>
-                <div className='admin-console__header'>
+                <AdminHeader>
                     <FormattedMessage
                         id='admin.data_retention.settings.title'
                         defaultMessage='Data Retention Policies'
                     />
-                </div>
+                </AdminHeader>
                 <div className='admin-console__wrapper'>
                     <div className='admin-console__content'>
                         <Card

webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/__snapshots__/global_policy_form.test.tsx.snap

@@ -4,8 +4,8 @@ exports[`components/PluginManagement should match snapshot 1`] = `
 <div
   className="wrapper--fixed DataRetentionSettings"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -17,7 +17,7 @@ exports[`components/PluginManagement should match snapshot 1`] = `
         id="admin.data_retention.globalPolicyTitle"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >

webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/global_policy_form.tsx

@@ -6,17 +6,19 @@ import {FormattedMessage} from 'react-intl';
 
 import {AdminConfig} from '@mattermost/types/config';
 import {DeepPartial} from '@mattermost/types/utilities';
+import {ServerError} from '@mattermost/types/errors';
 
 import * as Utils from 'utils/utils';
+import {getHistory} from 'utils/browser_history';
+
 import Card from 'components/card/card';
 import BlockableLink from 'components/admin_console/blockable_link';
-import {getHistory} from 'utils/browser_history';
 import DropdownInputHybrid from 'components/widgets/inputs/dropdown_input_hybrid';
 import {keepForeverOption, yearsOption, daysOption, FOREVER, YEARS, DAYS} from 'components/admin_console/data_retention_settings/dropdown_options/dropdown_options';
+import SaveButton from 'components/save_button';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
 
 import './global_policy_form.scss';
-import SaveButton from 'components/save_button';
-import {ServerError} from '@mattermost/types/errors';
 
 type ValueType = {
     label: string | JSX.Element;
@@ -145,7 +147,7 @@ export default class GlobalPolicyForm extends React.PureComponent<Props, State>
     render = () => {
         return (
             <div className='wrapper--fixed DataRetentionSettings'>
-                <div className='admin-console__header with-back'>
+                <AdminHeader withBackButton={true}>
                     <div>
                         <BlockableLink
                             to='/admin_console/compliance/data_retention_settings'
@@ -156,7 +158,7 @@ export default class GlobalPolicyForm extends React.PureComponent<Props, State>
                             defaultMessage='Global Retention Policy'
                         />
                     </div>
-                </div>
+                </AdminHeader>
                 <div className='admin-console__wrapper'>
                     <div className='admin-console__content'>
                         <Card

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

@@ -6,7 +6,7 @@ import {FormattedMessage} from 'react-intl';
 
 import {AdminConfig} from '@mattermost/types/config';
 
-import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
 
 type Props = {
     config: AdminConfig;
@@ -27,10 +27,12 @@ const FeatureFlags: React.FC<Props> = (props: Props) => {
 
     return (
         <div className='wrapper--admin'>
-            <FormattedAdminHeader
-                id='admin.feature_flags.title'
-                defaultMessage='Feature Flags'
-            />
+            <AdminHeader>
+                <FormattedMessage
+                    id='admin.feature_flags.title'
+                    defaultMessage='Features Flags'
+                />
+            </AdminHeader>
             <div className='admin-console__wrapper'>
                 <div className='admin-logs-content admin-console__content'>
                     <div className={'banner info'}>

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

@@ -4,14 +4,12 @@ exports[`components/admin_console/group_settings/GroupSettings should match snap
 <div
   className="wrapper--fixed"
 >
-  <div
-    className="admin-console__header"
-  >
+  <AdminHeader>
     <MemoizedFormattedMessage
       defaultMessage="Groups"
       id="admin.group_settings.groupsPageTitle"
     />
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >

webapp/channels/src/components/admin_console/group_settings/group_details/__snapshots__/group_details.test.tsx.snap

@@ -4,8 +4,8 @@ exports[`components/admin_console/group_settings/group_details/GroupDetails shou
 <div
   className="wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -17,7 +17,7 @@ exports[`components/admin_console/group_settings/group_details/GroupDetails shou
         id="admin.group_settings.group_detail.group_configuration"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -154,8 +154,8 @@ exports[`components/admin_console/group_settings/group_details/GroupDetails shou
 <div
   className="wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -167,7 +167,7 @@ exports[`components/admin_console/group_settings/group_details/GroupDetails shou
         id="admin.group_settings.group_detail.group_configuration"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -303,8 +303,8 @@ exports[`components/admin_console/group_settings/group_details/GroupDetails shou
 <div
   className="wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -316,7 +316,7 @@ exports[`components/admin_console/group_settings/group_details/GroupDetails shou
         id="admin.group_settings.group_detail.group_configuration"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -441,8 +441,8 @@ exports[`components/admin_console/group_settings/group_details/GroupDetails shou
 <div
   className="wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -454,7 +454,7 @@ exports[`components/admin_console/group_settings/group_details/GroupDetails shou
         id="admin.group_settings.group_detail.group_configuration"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >

webapp/channels/src/components/admin_console/group_settings/group_details/group_details.tsx

@@ -2,21 +2,8 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-
 import {FormattedMessage} from 'react-intl';
 
-import BlockableLink from 'components/admin_console/blockable_link';
-import {GroupProfileAndSettings} from 'components/admin_console/group_settings/group_details/group_profile_and_settings';
-import GroupTeamsAndChannels from 'components/admin_console/group_settings/group_details/group_teams_and_channels';
-import GroupUsers from 'components/admin_console/group_settings/group_details/group_users';
-import SaveChangesPanel from 'components/admin_console/team_channel_settings/save_changes_panel';
-import ChannelSelectorModal from 'components/channel_selector_modal';
-import FormError from 'components/form_error';
-import TeamSelectorModal from 'components/team_selector_modal';
-import AdminPanel from 'components/widgets/admin_console/admin_panel';
-import Menu from 'components/widgets/menu/menu';
-import MenuWrapper from 'components/widgets/menu/menu_wrapper';
-import {ActionResult} from 'mattermost-redux/types/actions';
 import {ChannelWithTeamData} from '@mattermost/types/channels';
 import {
     Group,
@@ -28,10 +15,24 @@ import {
 } from '@mattermost/types/groups';
 import {Team} from '@mattermost/types/teams';
 import {UserProfile} from '@mattermost/types/users';
+import BlockableLink from 'components/admin_console/blockable_link';
 
 import {t} from 'utils/i18n';
 import {localizeMessage} from 'utils/utils';
 
+import {GroupProfileAndSettings} from 'components/admin_console/group_settings/group_details/group_profile_and_settings';
+import GroupTeamsAndChannels from 'components/admin_console/group_settings/group_details/group_teams_and_channels';
+import GroupUsers from 'components/admin_console/group_settings/group_details/group_users';
+import SaveChangesPanel from 'components/admin_console/team_channel_settings/save_changes_panel';
+import ChannelSelectorModal from 'components/channel_selector_modal';
+import FormError from 'components/form_error';
+import TeamSelectorModal from 'components/team_selector_modal';
+import AdminPanel from 'components/widgets/admin_console/admin_panel';
+import Menu from 'components/widgets/menu/menu';
+import MenuWrapper from 'components/widgets/menu/menu_wrapper';
+import {ActionResult} from 'mattermost-redux/types/actions';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
+
 export type Props = {
     groupID: string;
     group: Group;
@@ -646,7 +647,7 @@ export default class GroupDetails extends React.PureComponent<Props, State> {
 
         return (
             <div className='wrapper--fixed'>
-                <div className='admin-console__header with-back'>
+                <AdminHeader withBackButton={true}>
                     <div>
                         <BlockableLink
                             to='/admin_console/user_management/groups'
@@ -657,7 +658,7 @@ export default class GroupDetails extends React.PureComponent<Props, State> {
                             defaultMessage='Group Configuration'
                         />
                     </div>
-                </div>
+                </AdminHeader>
 
                 <div className='admin-console__wrapper'>
                     <div className='admin-console__content'>

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

@@ -10,6 +10,7 @@ import {getSiteURL} from 'utils/url';
 import GroupsList from 'components/admin_console/group_settings/groups_list';
 import AdminPanel from 'components/widgets/admin_console/admin_panel';
 import ExternalLink from 'components/external_link';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
 
 type Props = {
     isDisabled?: boolean;
@@ -19,13 +20,12 @@ const GroupSettings = ({isDisabled}: Props) => {
     const siteURL = getSiteURL();
     return (
         <div className='wrapper--fixed'>
-            <div className='admin-console__header'>
+            <AdminHeader>
                 <FormattedMessage
                     id='admin.group_settings.groupsPageTitle'
                     defaultMessage='Groups'
                 />
-            </div>
-
+            </AdminHeader>
             <div className='admin-console__wrapper'>
                 <div className='admin-console__content'>
                     <div className={'banner info'}>

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

@@ -4,11 +4,12 @@ exports[`components/admin_console/license_settings/LicenseSettings load screen a
 <div
   className="wrapper--fixed"
 >
-  <FormattedAdminHeader
-    defaultMessage="Edition and License"
-    id="admin.license.title"
-    values={Object {}}
-  />
+  <AdminHeader>
+    <MemoizedFormattedMessage
+      defaultMessage="Edition and License"
+      id="admin.license.title"
+    />
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -108,11 +109,12 @@ exports[`components/admin_console/license_settings/LicenseSettings load screen w
 <div
   className="wrapper--fixed"
 >
-  <FormattedAdminHeader
-    defaultMessage="Edition and License"
-    id="admin.license.title"
-    values={Object {}}
-  />
+  <AdminHeader>
+    <MemoizedFormattedMessage
+      defaultMessage="Edition and License"
+      id="admin.license.title"
+    />
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -212,11 +214,12 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
 <div
   className="wrapper--fixed"
 >
-  <FormattedAdminHeader
-    defaultMessage="Edition and License"
-    id="admin.license.title"
-    values={Object {}}
-  />
+  <AdminHeader>
+    <MemoizedFormattedMessage
+      defaultMessage="Edition and License"
+      id="admin.license.title"
+    />
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -347,11 +350,12 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
 <div
   className="wrapper--fixed"
 >
-  <FormattedAdminHeader
-    defaultMessage="Edition and License"
-    id="admin.license.title"
-    values={Object {}}
-  />
+  <AdminHeader>
+    <MemoizedFormattedMessage
+      defaultMessage="Edition and License"
+      id="admin.license.title"
+    />
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -470,11 +474,12 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
 <div
   className="wrapper--fixed"
 >
-  <FormattedAdminHeader
-    defaultMessage="Edition and License"
-    id="admin.license.title"
-    values={Object {}}
-  />
+  <AdminHeader>
+    <MemoizedFormattedMessage
+      defaultMessage="Edition and License"
+      id="admin.license.title"
+    />
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -593,11 +598,12 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
 <div
   className="wrapper--fixed"
 >
-  <FormattedAdminHeader
-    defaultMessage="Edition and License"
-    id="admin.license.title"
-    values={Object {}}
-  />
+  <AdminHeader>
+    <MemoizedFormattedMessage
+      defaultMessage="Edition and License"
+      id="admin.license.title"
+    />
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -716,11 +722,12 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
 <div
   className="wrapper--fixed"
 >
-  <FormattedAdminHeader
-    defaultMessage="Edition and License"
-    id="admin.license.title"
-    values={Object {}}
-  />
+  <AdminHeader>
+    <MemoizedFormattedMessage
+      defaultMessage="Edition and License"
+      id="admin.license.title"
+    />
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -839,11 +846,12 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
 <div
   className="wrapper--fixed"
 >
-  <FormattedAdminHeader
-    defaultMessage="Edition and License"
-    id="admin.license.title"
-    values={Object {}}
-  />
+  <AdminHeader>
+    <MemoizedFormattedMessage
+      defaultMessage="Edition and License"
+      id="admin.license.title"
+    />
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -962,11 +970,12 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
 <div
   className="wrapper--fixed"
 >
-  <FormattedAdminHeader
-    defaultMessage="Edition and License"
-    id="admin.license.title"
-    values={Object {}}
-  />
+  <AdminHeader>
+    <MemoizedFormattedMessage
+      defaultMessage="Edition and License"
+      id="admin.license.title"
+    />
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -1062,11 +1071,12 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
 <div
   className="wrapper--fixed"
 >
-  <FormattedAdminHeader
-    defaultMessage="Edition and License"
-    id="admin.license.title"
-    values={Object {}}
-  />
+  <AdminHeader>
+    <MemoizedFormattedMessage
+      defaultMessage="Edition and License"
+      id="admin.license.title"
+    />
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -1173,11 +1183,12 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
 <div
   className="wrapper--fixed"
 >
-  <FormattedAdminHeader
-    defaultMessage="Edition and License"
-    id="admin.license.title"
-    values={Object {}}
-  />
+  <AdminHeader>
+    <MemoizedFormattedMessage
+      defaultMessage="Edition and License"
+      id="admin.license.title"
+    />
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -1284,11 +1295,12 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
 <div
   className="wrapper--fixed"
 >
-  <FormattedAdminHeader
-    defaultMessage="Edition and License"
-    id="admin.license.title"
-    values={Object {}}
-  />
+  <AdminHeader>
+    <MemoizedFormattedMessage
+      defaultMessage="Edition and License"
+      id="admin.license.title"
+    />
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -1388,11 +1400,12 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
 <div
   className="wrapper--fixed"
 >
-  <FormattedAdminHeader
-    defaultMessage="Edition and License"
-    id="admin.license.title"
-    values={Object {}}
-  />
+  <AdminHeader>
+    <MemoizedFormattedMessage
+      defaultMessage="Edition and License"
+      id="admin.license.title"
+    />
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -1501,11 +1514,12 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
 <div
   className="wrapper--fixed"
 >
-  <FormattedAdminHeader
-    defaultMessage="Edition and License"
-    id="admin.license.title"
-    values={Object {}}
-  />
+  <AdminHeader>
+    <MemoizedFormattedMessage
+      defaultMessage="Edition and License"
+      id="admin.license.title"
+    />
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -1597,11 +1611,12 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
 <div
   className="wrapper--fixed"
 >
-  <FormattedAdminHeader
-    defaultMessage="Edition and License"
-    id="admin.license.title"
-    values={Object {}}
-  />
+  <AdminHeader>
+    <MemoizedFormattedMessage
+      defaultMessage="Edition and License"
+      id="admin.license.title"
+    />
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -1704,11 +1719,12 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
 <div
   className="wrapper--fixed"
 >
-  <FormattedAdminHeader
-    defaultMessage="Edition and License"
-    id="admin.license.title"
-    values={Object {}}
-  />
+  <AdminHeader>
+    <MemoizedFormattedMessage
+      defaultMessage="Edition and License"
+      id="admin.license.title"
+    />
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >

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

@@ -2,28 +2,27 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import {ActionResult} from 'mattermost-redux/types/actions';
 
 import {ClientLicense} from '@mattermost/types/config';
-import {ActionResult} from 'mattermost-redux/types/actions';
 import {StatusOK} from '@mattermost/types/client4';
-
-import {isLicenseExpired, isLicenseExpiring, isTrialLicense, isEnterpriseOrE20License, licenseSKUWithFirstLetterCapitalized} from 'utils/license_utils';
-
-import {trackEvent} from 'actions/telemetry_actions';
-
 import {GetFilteredUsersStatsOpts, UsersStats} from '@mattermost/types/users';
 import {ServerError} from '@mattermost/types/errors';
 
-import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
-import ExternalLink from 'components/external_link';
-
+import {isLicenseExpired, isLicenseExpiring, isTrialLicense, isEnterpriseOrE20License, licenseSKUWithFirstLetterCapitalized} from 'utils/license_utils';
 import {AboutLinks, CloudLinks, ModalIdentifiers} from 'utils/constants';
 
 import {ModalData} from 'types/actions';
 
+import {trackEvent} from 'actions/telemetry_actions';
+
+import ExternalLink from 'components/external_link';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
+
 import RenewLinkCard from './renew_license_card/renew_license_card';
 import TrialLicenseCard from './trial_license_card/trial_license_card';
-
 import TeamEditionLeftPanel from './team_edition/team_edition_left_panel';
 import TeamEditionRightPanel from './team_edition/team_edition_right_panel';
 import StarterLeftPanel from './starter_edition/starter_left_panel';
@@ -332,11 +331,12 @@ export default class LicenseSettings extends React.PureComponent<Props, State> {
 
         return (
             <div className='wrapper--fixed'>
-                <FormattedAdminHeader
-                    id='admin.license.title'
-                    defaultMessage='Edition and License'
-                />
-
+                <AdminHeader>
+                    <FormattedMessage
+                        id='admin.license.title'
+                        defaultMessage='Edition and License'
+                    />
+                </AdminHeader>
                 <div className='admin-console__wrapper'>
                     <div className='admin-console__content'>
                         <div className='admin-console__banner_section'>

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

@@ -6,11 +6,12 @@ exports[`components/admin_console/permission_schemes_settings/permission_schemes
 <div
   className="wrapper--fixed"
 >
-  <FormattedAdminHeader
-    defaultMessage="Permission Schemes"
-    id="admin.permissions.permissionSchemes"
-    values={Object {}}
-  />
+  <AdminHeader>
+    <MemoizedFormattedMessage
+      defaultMessage="Permission Schemes"
+      id="admin.permissions.permissionSchemes"
+    />
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -109,11 +110,12 @@ exports[`components/admin_console/permission_schemes_settings/permission_schemes
 <div
   className="wrapper--fixed"
 >
-  <FormattedAdminHeader
-    defaultMessage="Permission Schemes"
-    id="admin.permissions.permissionSchemes"
-    values={Object {}}
-  />
+  <AdminHeader>
+    <MemoizedFormattedMessage
+      defaultMessage="Permission Schemes"
+      id="admin.permissions.permissionSchemes"
+    />
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -190,11 +192,12 @@ exports[`components/admin_console/permission_schemes_settings/permission_schemes
 <div
   className="wrapper--fixed"
 >
-  <FormattedAdminHeader
-    defaultMessage="Permission Schemes"
-    id="admin.permissions.permissionSchemes"
-    values={Object {}}
-  />
+  <AdminHeader>
+    <MemoizedFormattedMessage
+      defaultMessage="Permission Schemes"
+      id="admin.permissions.permissionSchemes"
+    />
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -319,11 +322,12 @@ exports[`components/admin_console/permission_schemes_settings/permission_schemes
 <div
   className="wrapper--fixed"
 >
-  <FormattedAdminHeader
-    defaultMessage="Permission Schemes"
-    id="admin.permissions.permissionSchemes"
-    values={Object {}}
-  />
+  <AdminHeader>
+    <MemoizedFormattedMessage
+      defaultMessage="Permission Schemes"
+      id="admin.permissions.permissionSchemes"
+    />
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -448,11 +452,12 @@ exports[`components/admin_console/permission_schemes_settings/permission_schemes
 <div
   className="wrapper--fixed"
 >
-  <FormattedAdminHeader
-    defaultMessage="Permission Schemes"
-    id="admin.permissions.permissionSchemes"
-    values={Object {}}
-  />
+  <AdminHeader>
+    <MemoizedFormattedMessage
+      defaultMessage="Permission Schemes"
+      id="admin.permissions.permissionSchemes"
+    />
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >

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

@@ -3,25 +3,21 @@
 
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
-
 import {RouteComponentProps} from 'react-router-dom';
 
-import {t} from 'utils/i18n';
-import * as Utils from 'utils/utils';
-
-import LoadingScreen from 'components/loading_screen';
-import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
-
-import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
-import AdminPanelWithLink from 'components/widgets/admin_console/admin_panel_with_link';
-
-import {ActionResult} from 'mattermost-redux/types/actions';
-
 import {Scheme, SchemeScope, SchemesState} from '@mattermost/types/schemes';
 
-import {LicenseSkus} from 'utils/constants';
+import {ActionResult} from 'mattermost-redux/types/actions';
 
+import LoadingScreen from 'components/loading_screen';
+import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
+import AdminPanelWithLink from 'components/widgets/admin_console/admin_panel_with_link';
 import ExternalLink from 'components/external_link';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
+
+import {t} from 'utils/i18n';
+import {LicenseSkus} from 'utils/constants';
+import * as Utils from 'utils/utils';
 
 import PermissionsSchemeSummary from './permissions_scheme_summary';
 
@@ -222,11 +218,12 @@ export default class PermissionSchemesSettings extends React.PureComponent<Props
 
         return (
             <div className='wrapper--fixed'>
-                <FormattedAdminHeader
-                    id='admin.permissions.permissionSchemes'
-                    defaultMessage='Permission Schemes'
-                />
-
+                <AdminHeader>
+                    <FormattedMessage
+                        id='admin.permissions.permissionSchemes'
+                        defaultMessage='Permission Schemes'
+                    />
+                </AdminHeader>
                 <div className='admin-console__wrapper'>
                     <div className='admin-console__content'>
                         <div className='banner info'>

webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/__snapshots__/permission_system_scheme_settings.test.tsx.snap

@@ -147,8 +147,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
 <div
   className="wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -160,7 +160,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
         id="admin.permissions.systemScheme"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -457,8 +457,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
 <div
   className="wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -470,7 +470,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
         id="admin.permissions.systemScheme"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -768,8 +768,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
 <div
   className="wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -781,7 +781,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
         id="admin.permissions.systemScheme"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -1079,8 +1079,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
 <div
   className="wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -1092,7 +1092,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
         id="admin.permissions.systemScheme"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >

webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/permission_system_scheme_settings.tsx

@@ -4,9 +4,10 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import GeneralConstants from 'mattermost-redux/constants/general';
 import {ClientConfig, ClientLicense} from '@mattermost/types/config';
 import {Role} from '@mattermost/types/roles';
+
+import GeneralConstants from 'mattermost-redux/constants/general';
 import {ActionResult} from 'mattermost-redux/types/actions';
 
 import {PermissionsScope, DefaultRolePermissions} from 'utils/constants';
@@ -19,11 +20,12 @@ import LoadingScreen from 'components/loading_screen';
 import FormError from 'components/form_error';
 import BlockableLink from 'components/admin_console/blockable_link';
 import AdminPanelTogglable from 'components/widgets/admin_console/admin_panel_togglable';
+import ExternalLink from 'components/external_link';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
 
 import PermissionsTree, {EXCLUDED_PERMISSIONS} from '../permissions_tree';
 import GuestPermissionsTree, {GUEST_INCLUDED_PERMISSIONS} from '../guest_permissions_tree';
 import PermissionsTreePlaybooks from '../permissions_tree_playbooks';
-import ExternalLink from 'components/external_link';
 
 type Props = {
     config: Partial<ClientConfig>;
@@ -351,7 +353,7 @@ export default class PermissionSystemSchemeSettings extends React.PureComponent<
         const isLicensed = this.props.license?.IsLicensed === 'true';
         return (
             <div className='wrapper--fixed'>
-                <div className='admin-console__header with-back'>
+                <AdminHeader withBackButton={true}>
                     <div>
                         <BlockableLink
                             to='/admin_console/user_management/permissions'
@@ -362,7 +364,7 @@ export default class PermissionSystemSchemeSettings extends React.PureComponent<
                             defaultMessage='System Scheme'
                         />
                     </div>
-                </div>
+                </AdminHeader>
 
                 <div className='admin-console__wrapper'>
                     <div className='admin-console__content'>

webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/__snapshots__/permission_team_scheme_settings.test.tsx.snap

@@ -30,8 +30,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
 <div
   className="wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -43,7 +43,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
         id="admin.permissions.teamScheme"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -360,8 +360,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
 <div
   className="wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -373,7 +373,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
         id="admin.permissions.teamScheme"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -713,8 +713,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
 <div
   className="wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -726,7 +726,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
         id="admin.permissions.teamScheme"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -1134,8 +1134,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
 <div
   className="wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -1147,7 +1147,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
         id="admin.permissions.teamScheme"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >

webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/permission_team_scheme_settings.tsx

@@ -5,6 +5,15 @@ import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import {RouteComponentProps} from 'react-router-dom';
 
+import {Scheme, SchemePatch} from '@mattermost/types/schemes';
+import {Role} from '@mattermost/types/roles';
+import {ClientConfig, ClientLicense} from '@mattermost/types/config';
+import {Team} from '@mattermost/types/teams';
+import {ServerError} from '@mattermost/types/errors';
+
+import {ActionFunc, ActionResult} from 'mattermost-redux/types/actions';
+import GeneralConstants from 'mattermost-redux/constants/general';
+
 import {PermissionsScope, ModalIdentifiers} from 'utils/constants';
 import {localizeMessage} from 'utils/utils';
 import {t} from 'utils/i18n';
@@ -17,25 +26,13 @@ import BlockableLink from 'components/admin_console/blockable_link';
 import AdminPanel from 'components/widgets/admin_console/admin_panel';
 import AdminPanelTogglable from 'components/widgets/admin_console/admin_panel_togglable';
 import AdminPanelWithButton from 'components/widgets/admin_console/admin_panel_with_button';
+import LocalizedInput from 'components/localized_input/localized_input';
+import ExternalLink from 'components/external_link';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
 
 import PermissionsTree, {EXCLUDED_PERMISSIONS} from '../permissions_tree';
 import GuestPermissionsTree, {GUEST_INCLUDED_PERMISSIONS} from '../guest_permissions_tree';
-
-import LocalizedInput from 'components/localized_input/localized_input';
-
-import {Scheme, SchemePatch} from '@mattermost/types/schemes';
-import {Role} from '@mattermost/types/roles';
-import {ClientConfig, ClientLicense} from '@mattermost/types/config';
-import {Team} from '@mattermost/types/teams';
-import {ActionFunc, ActionResult} from 'mattermost-redux/types/actions';
-import {ServerError} from '@mattermost/types/errors';
-
 import PermissionsTreePlaybooks from '../permissions_tree_playbooks';
-
-import GeneralConstants from 'mattermost-redux/constants/general';
-
-import ExternalLink from 'components/external_link';
-
 import TeamInList from './team_in_list';
 
 type RolesMap = {
@@ -591,7 +588,7 @@ export default class PermissionTeamSchemeSettings extends React.PureComponent<Pr
                         alreadySelected={teams.map((team) => team.id)}
                     />
                 }
-                <div className='admin-console__header with-back'>
+                <AdminHeader withBackButton={true}>
                     <div>
                         <BlockableLink
                             to='/admin_console/user_management/permissions'
@@ -602,7 +599,7 @@ export default class PermissionTeamSchemeSettings extends React.PureComponent<Pr
                             defaultMessage='Team Scheme'
                         />
                     </div>
-                </div>
+                </AdminHeader>
 
                 <div className='admin-console__wrapper'>
                     <div className='admin-console__content'>

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

@@ -12,6 +12,7 @@ import * as I18n from 'i18n/i18n.jsx';
 import Constants from 'utils/constants';
 import {rolesFromMapping, mappingValueFromRoles} from 'utils/policy_roles_adapter';
 import * as Utils from 'utils/utils';
+
 import RequestButton from 'components/admin_console/request_button/request_button';
 import BooleanSetting from 'components/admin_console/boolean_setting';
 import TextSetting from 'components/admin_console/text_setting';
@@ -30,11 +31,8 @@ import SaveButton from 'components/save_button';
 import FormError from 'components/form_error';
 import Tooltip from 'components/tooltip';
 import WarningIcon from 'components/widgets/icons/fa_warning_icon';
-
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
-
 import AdminHeader from 'components/widgets/admin_console/admin_header';
-import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
 
 import Setting from './setting';
 
@@ -282,10 +280,12 @@ export default class SchemaAdminSettings extends React.PureComponent {
             );
         }
         return (
-            <FormattedAdminHeader
-                id={this.props.schema.name || this.props.schema.id}
-                defaultMessage={this.props.schema.name_default || this.props.schema.id}
-            />
+            <AdminHeader>
+                <FormattedMessage
+                    id={this.props.schema.name || this.props.schema.id}
+                    defaultMessage={this.props.schema.name_default || this.props.schema.id}
+                />
+            </AdminHeader>
         );
     };
 

webapp/channels/src/components/admin_console/server_logs/logs.tsx

@@ -7,8 +7,6 @@ import {debounce} from 'lodash';
 
 import {ActionFunc} from 'mattermost-redux/types/actions';
 
-import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
-
 import {
     LogFilter,
     LogLevels,
@@ -16,6 +14,8 @@ import {
     LogServerNames,
 } from '@mattermost/types/admin';
 
+import AdminHeader from 'components/widgets/admin_console/admin_header';
+
 import LogList from './log_list';
 import PlainLogList from './plain_log_list';
 
@@ -196,11 +196,12 @@ export default class Logs extends React.PureComponent<Props, State> {
         );
         return (
             <div className='wrapper--admin'>
-                <FormattedAdminHeader
-                    id='admin.logs.title'
-                    defaultMessage='Server Logs'
-                />
-
+                <AdminHeader>
+                    <FormattedMessage
+                        id='admin.logs.title'
+                        defaultMessage='Server Logs'
+                    />
+                </AdminHeader>
                 <div className='admin-console__wrapper'>
                     <div className='admin-logs-content admin-console__content'>
                         {content}

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

@@ -4,11 +4,12 @@ exports[`admin_console/system_roles should match snapshot 1`] = `
 <div
   className="wrapper--fixed"
 >
-  <FormattedAdminHeader
-    defaultMessage="System Roles"
-    id="admin.permissions.systemRoles"
-    values={Object {}}
-  />
+  <AdminHeader>
+    <MemoizedFormattedMessage
+      defaultMessage="System Roles"
+      id="admin.permissions.systemRoles"
+    />
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >

webapp/channels/src/components/admin_console/system_roles/system_role/__snapshots__/system_role.test.tsx.snap

@@ -4,8 +4,8 @@ exports[`admin_console/system_role should match snapshot 1`] = `
 <div
   className="wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -17,7 +17,7 @@ exports[`admin_console/system_role should match snapshot 1`] = `
         id="admin.permissions.roles.role_name.name"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -69,8 +69,8 @@ exports[`admin_console/system_role should match snapshot with isLicensedForCloud
 <div
   className="wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -82,7 +82,7 @@ exports[`admin_console/system_role should match snapshot with isLicensedForCloud
         id="admin.permissions.roles.role_name.name"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >

webapp/channels/src/components/admin_console/system_roles/system_role/system_role.tsx

@@ -6,21 +6,21 @@ import {FormattedMessage} from 'react-intl';
 import {uniq, difference} from 'lodash';
 
 import {Role} from '@mattermost/types/roles';
-import {Client4} from 'mattermost-redux/client';
-
 import {UserProfile} from '@mattermost/types/users';
-import {ActionResult} from 'mattermost-redux/types/actions';
 
+import {Client4} from 'mattermost-redux/client';
+import {ActionResult} from 'mattermost-redux/types/actions';
 import Permissions from 'mattermost-redux/constants/permissions';
 
+import {isError} from 'types/actions';
+
 import Constants from 'utils/constants';
 import {getHistory} from 'utils/browser_history';
 
 import FormError from 'components/form_error';
 import BlockableLink from 'components/admin_console/blockable_link';
 import SaveChangesPanel from 'components/admin_console/team_channel_settings/save_changes_panel';
-
-import {isError} from 'types/actions';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
 
 import SystemRoleUsers from './system_role_users';
 import SystemRolePermissions from './system_role_permissions';
@@ -243,7 +243,7 @@ export default class SystemRole extends React.PureComponent<Props, State> {
         const defaultName = role.name.split('').map((r) => r.charAt(0).toUpperCase() + r.slice(1)).join(' ');
         return (
             <div className='wrapper--fixed'>
-                <div className='admin-console__header with-back'>
+                <AdminHeader withBackButton={true}>
                     <div>
                         <BlockableLink
                             to='/admin_console/user_management/system_roles'
@@ -254,7 +254,7 @@ export default class SystemRole extends React.PureComponent<Props, State> {
                             defaultMessage={defaultName}
                         />
                     </div>
-                </div>
+                </AdminHeader>
                 <div className='admin-console__wrapper'>
                     <div className='admin-console__content'>
                         <SystemRolePermissions

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

@@ -10,9 +10,11 @@ import {Role} from '@mattermost/types/roles';
 import {t} from 'utils/i18n';
 import {getHistory} from 'utils/browser_history';
 
-import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
 import AdminPanel from 'components/widgets/admin_console/admin_panel';
 import DataGrid, {Row, Column} from 'components/admin_console/data_grid/data_grid';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
+
+import './system_roles.scss';
 
 type Props = {
     roles: Record<string, Role>;
@@ -42,8 +44,6 @@ const columns: Column[] = [
     },
 ];
 
-import './system_roles.scss';
-
 export default class SystemRoles extends React.PureComponent<Props> {
     render() {
         const {roles} = this.props;
@@ -78,11 +78,12 @@ export default class SystemRoles extends React.PureComponent<Props> {
 
         return (
             <div className='wrapper--fixed'>
-                <FormattedAdminHeader
-                    id='admin.permissions.systemRoles'
-                    defaultMessage='System Roles'
-                />
-
+                <AdminHeader>
+                    <FormattedMessage
+                        id='admin.permissions.systemRoles'
+                        defaultMessage='System Roles'
+                    />
+                </AdminHeader>
                 <div className='admin-console__wrapper'>
                     <div className='admin-console__content'>
                         <AdminPanel

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

@@ -4,8 +4,8 @@ exports[`components/admin_console/system_user_detail should match default snapsh
 <div
   className="SystemUserDetail wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -17,7 +17,7 @@ exports[`components/admin_console/system_user_detail should match default snapsh
         id="admin.systemUserDetail.title"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -240,8 +240,8 @@ exports[`components/admin_console/system_user_detail should match snapshot if LD
 <div
   className="SystemUserDetail wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -253,7 +253,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if LD
         id="admin.systemUserDetail.title"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -478,8 +478,8 @@ exports[`components/admin_console/system_user_detail should match snapshot if MF
 <div
   className="SystemUserDetail wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -491,7 +491,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if MF
         id="admin.systemUserDetail.title"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -722,8 +722,8 @@ exports[`components/admin_console/system_user_detail should match snapshot if SA
 <div
   className="SystemUserDetail wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -735,7 +735,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if SA
         id="admin.systemUserDetail.title"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -960,8 +960,8 @@ exports[`components/admin_console/system_user_detail should match snapshot if no
 <div
   className="SystemUserDetail wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -973,7 +973,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if no
         id="admin.systemUserDetail.title"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -1196,8 +1196,8 @@ exports[`components/admin_console/system_user_detail should match snapshot if us
 <div
   className="SystemUserDetail wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -1209,7 +1209,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if us
         id="admin.systemUserDetail.title"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >

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

@@ -9,9 +9,7 @@ import {Overlay} from 'react-bootstrap';
 import {isEmail} from 'mattermost-redux/utils/helpers';
 
 import {Team, TeamMembership} from '@mattermost/types/teams';
-
 import {UserProfile} from '@mattermost/types/users';
-
 import {ServerError} from '@mattermost/types/errors';
 
 import {adminResetMfa, adminResetEmail} from 'actions/admin_actions.jsx';
@@ -30,11 +28,11 @@ import SaveButton from 'components/save_button';
 import FormError from 'components/form_error';
 import TeamSelectorModal from 'components/team_selector_modal';
 import Tooltip from 'components/tooltip';
-
 import TeamList from 'components/admin_console/system_user_detail/team_list';
 import EmailIcon from 'components/widgets/icons/email_icon';
 import AtIcon from 'components/widgets/icons/at_icon';
 import SheidOutlineIcon from 'components/widgets/icons/shield_outline_icon';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
 
 import './system_user_detail.scss';
 
@@ -365,7 +363,7 @@ export default class SystemUserDetail extends React.PureComponent<Props & RouteC
 
         return (
             <div className='SystemUserDetail wrapper--fixed'>
-                <div className='admin-console__header with-back'>
+                <AdminHeader withBackButton={true}>
                     <div>
                         <BlockableLink
                             to='/admin_console/user_management/users'
@@ -376,7 +374,7 @@ export default class SystemUserDetail extends React.PureComponent<Props & RouteC
                             defaultMessage='User Configuration'
                         />
                     </div>
-                </div>
+                </AdminHeader>
                 <div className='admin-console__wrapper'>
                     <div className='admin-console__content'>
                         <AdminUserCard

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

@@ -4,15 +4,17 @@ exports[`components/admin_console/system_users should match default snapshot 1`]
 <div
   className="wrapper--fixed"
 >
-  <FormattedAdminHeader
-    defaultMessage="{siteName} Users"
-    id="admin.system_users.title"
-    values={
-      Object {
-        "siteName": "Site name",
+  <AdminHeader>
+    <MemoizedFormattedMessage
+      defaultMessage="{siteName} Users"
+      id="admin.system_users.title"
+      values={
+        Object {
+          "siteName": "Site name",
+        }
       }
-    }
-  />
+    />
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >

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

@@ -6,24 +6,24 @@ import {FormattedMessage} from 'react-intl';
 
 import {debounce} from 'mattermost-redux/actions/helpers';
 import {Permissions} from 'mattermost-redux/constants';
-
 import {ActionFunc} from 'mattermost-redux/types/actions';
+
 import {ServerError} from '@mattermost/types/errors';
 import {Team} from '@mattermost/types/teams';
-
 import {GetFilteredUsersStatsOpts, UserProfile, UsersStats} from '@mattermost/types/users';
 
+import {emitUserLoggedOutEvent} from 'actions/global_actions';
+
 import {Constants, UserSearchOptions, SearchUserTeamFilter, UserFilters} from 'utils/constants';
 import * as Utils from 'utils/utils';
 import {t} from 'utils/i18n';
 import {getUserOptionsFromFilter, searchUserOptionsFromFilter} from 'utils/filter_users';
 
 import LocalizedInput from 'components/localized_input/localized_input';
-import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 import SystemPermissionGate from 'components/permissions_gates/system_permission_gate';
 import ConfirmModal from 'components/confirm_modal';
-import {emitUserLoggedOutEvent} from 'actions/global_actions';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
 
 import SystemUsersList from './list';
 
@@ -370,14 +370,15 @@ export default class SystemUsers extends React.PureComponent<Props, State> {
 
         return (
             <div className='wrapper--fixed'>
-                <FormattedAdminHeader
-                    id='admin.system_users.title'
-                    defaultMessage='{siteName} Users'
-                    values={{
-                        siteName: this.props.siteName,
-                    }}
-                />
-
+                <AdminHeader>
+                    <FormattedMessage
+                        id='admin.system_users.title'
+                        defaultMessage='{siteName} Users'
+                        values={{
+                            siteName: this.props.siteName,
+                        }}
+                    />
+                </AdminHeader>
                 <div className='admin-console__wrapper'>
                     <div className='admin-console__content'>
                         <div className='more-modal__list member-list-holder'>

webapp/channels/src/components/admin_console/team_channel_settings/channel/__snapshots__/channel_settings.test.tsx.snap

@@ -4,9 +4,7 @@ exports[`admin_console/team_channel_settings/channel/ChannelSettings should matc
 <div
   className="wrapper--fixed"
 >
-  <div
-    className="admin-console__header"
-  >
+  <AdminHeader>
     <MemoizedFormattedMessage
       defaultMessage="{siteName} Channels"
       id="admin.channel_settings.groupsPageTitle"
@@ -16,7 +14,7 @@ exports[`admin_console/team_channel_settings/channel/ChannelSettings should matc
         }
       }
     />
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >

webapp/channels/src/components/admin_console/team_channel_settings/channel/channel_settings.tsx

@@ -7,6 +7,7 @@ import {FormattedMessage} from 'react-intl';
 import {t} from 'utils/i18n';
 import ChannelsList from 'components/admin_console/team_channel_settings/channel/list';
 import AdminPanel from 'components/widgets/admin_console/admin_panel';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
 
 interface Props {
     siteName?: string;
@@ -31,13 +32,13 @@ export class ChannelsSettings extends React.PureComponent<Props> {
     render = () => {
         return (
             <div className='wrapper--fixed'>
-                <div className='admin-console__header'>
+                <AdminHeader>
                     <FormattedMessage
                         id='admin.channel_settings.groupsPageTitle'
                         defaultMessage='{siteName} Channels'
                         values={{siteName: this.props.siteName}}
                     />
-                </div>
+                </AdminHeader>
 
                 <div className='admin-console__wrapper'>
                     <div className='admin-console__content'>

webapp/channels/src/components/admin_console/team_channel_settings/channel/details/__snapshots__/channel_details.test.tsx.snap

@@ -4,8 +4,8 @@ exports[`admin_console/team_channel_settings/channel/ChannelDetails should match
 <div
   className="wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -17,7 +17,7 @@ exports[`admin_console/team_channel_settings/channel/ChannelDetails should match
         id="admin.channel_settings.channel_detail.channel_configuration"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -191,8 +191,8 @@ exports[`admin_console/team_channel_settings/channel/ChannelDetails should match
 <div
   className="wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -204,7 +204,7 @@ exports[`admin_console/team_channel_settings/channel/ChannelDetails should match
         id="admin.channel_settings.channel_detail.channel_configuration"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -374,8 +374,8 @@ exports[`admin_console/team_channel_settings/channel/ChannelDetails should match
 <div
   className="wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -387,7 +387,7 @@ exports[`admin_console/team_channel_settings/channel/ChannelDetails should match
         id="admin.channel_settings.channel_detail.channel_configuration"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -513,8 +513,8 @@ exports[`admin_console/team_channel_settings/channel/ChannelDetails should match
 <div
   className="wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -526,7 +526,7 @@ exports[`admin_console/team_channel_settings/channel/ChannelDetails should match
         id="admin.channel_settings.channel_detail.channel_configuration"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -648,8 +648,8 @@ exports[`admin_console/team_channel_settings/channel/ChannelDetails should match
 <div
   className="wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -661,7 +661,7 @@ exports[`admin_console/team_channel_settings/channel/ChannelDetails should match
         id="admin.channel_settings.channel_detail.channel_configuration"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -787,8 +787,8 @@ exports[`admin_console/team_channel_settings/channel/ChannelDetails should match
 <div
   className="wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -800,7 +800,7 @@ exports[`admin_console/team_channel_settings/channel/ChannelDetails should match
         id="admin.channel_settings.channel_detail.channel_configuration"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >

webapp/channels/src/components/admin_console/team_channel_settings/channel/details/channel_details.tsx

@@ -7,20 +7,23 @@ import {cloneDeep} from 'lodash';
 
 import {Permissions} from 'mattermost-redux/constants';
 import {ActionFunc, ActionResult} from 'mattermost-redux/types/actions';
+
 import {UserProfile} from '@mattermost/types/users';
 import {Scheme} from '@mattermost/types/schemes';
 import {SyncablePatch, Group, SyncableType} from '@mattermost/types/groups';
 import {Channel, ChannelModeration as ChannelPermissions, ChannelModerationPatch} from '@mattermost/types/channels';
 import {Team} from '@mattermost/types/teams';
-
 import {ServerError} from '@mattermost/types/errors';
 
+import {trackEvent} from 'actions/telemetry_actions.jsx';
+
 import ConfirmModal from 'components/confirm_modal';
 import BlockableLink from 'components/admin_console/blockable_link';
 import FormError from 'components/form_error';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
+
 import Constants from 'utils/constants';
 import {getHistory} from 'utils/browser_history';
-import {trackEvent} from 'actions/telemetry_actions.jsx';
 
 import {NeedGroupsError, UsersWillBeRemovedError} from '../../errors';
 import ConvertConfirmModal from '../../convert_confirm_modal';
@@ -779,7 +782,7 @@ export default class ChannelDetails extends React.PureComponent<ChannelDetailsPr
         );
         return (
             <div className='wrapper--fixed'>
-                <div className='admin-console__header with-back'>
+                <AdminHeader withBackButton={true}>
                     <div>
                         <BlockableLink
                             to='/admin_console/user_management/channels'
@@ -790,7 +793,7 @@ export default class ChannelDetails extends React.PureComponent<ChannelDetailsPr
                             defaultMessage='Channel Configuration'
                         />
                     </div>
-                </div>
+                </AdminHeader>
                 <div className='admin-console__wrapper'>
                     <div className='admin-console__content'>
                         <ChannelProfile

webapp/channels/src/components/admin_console/team_channel_settings/team/__snapshots__/team_settings.test.tsx.snap

@@ -4,9 +4,7 @@ exports[`admin_console/team_channel_settings/team/TeamSettings should match snap
 <div
   className="wrapper--fixed"
 >
-  <div
-    className="admin-console__header"
-  >
+  <AdminHeader>
     <MemoizedFormattedMessage
       defaultMessage="{siteName} Teams"
       id="admin.team_settings.groupsPageTitle"
@@ -16,7 +14,7 @@ exports[`admin_console/team_channel_settings/team/TeamSettings should match snap
         }
       }
     />
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >

webapp/channels/src/components/admin_console/team_channel_settings/team/details/__snapshots__/team_details.test.tsx.snap

@@ -4,8 +4,8 @@ exports[`admin_console/team_channel_settings/team/TeamDetails should match snaps
 <div
   className="wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -17,7 +17,7 @@ exports[`admin_console/team_channel_settings/team/TeamDetails should match snaps
         id="admin.team_settings.team_detail.group_configuration"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >
@@ -110,8 +110,8 @@ exports[`admin_console/team_channel_settings/team/TeamDetails should match snaps
 <div
   className="wrapper--fixed"
 >
-  <div
-    className="admin-console__header with-back"
+  <AdminHeader
+    withBackButton={true}
   >
     <div>
       <Connect(BlockableLink)
@@ -123,7 +123,7 @@ exports[`admin_console/team_channel_settings/team/TeamDetails should match snaps
         id="admin.team_settings.team_detail.group_configuration"
       />
     </div>
-  </div>
+  </AdminHeader>
   <div
     className="admin-console__wrapper"
   >

webapp/channels/src/components/admin_console/team_channel_settings/team/details/team_details.tsx

@@ -14,9 +14,11 @@ import {ActionResult} from 'mattermost-redux/types/actions';
 import {getHistory} from 'utils/browser_history';
 
 import {trackEvent} from 'actions/telemetry_actions.jsx';
+
 import BlockableLink from 'components/admin_console/blockable_link';
 import ConfirmModal from 'components/confirm_modal';
 import FormError from 'components/form_error';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
 
 import RemoveConfirmModal from '../../remove_confirm_modal';
 import {NeedDomainsError, NeedGroupsError, UsersWillBeRemovedError} from '../../errors';
@@ -494,7 +496,7 @@ export default class TeamDetails extends React.PureComponent<Props, State> {
 
         return (
             <div className='wrapper--fixed'>
-                <div className='admin-console__header with-back'>
+                <AdminHeader withBackButton={true}>
                     <div>
                         <BlockableLink
                             to='/admin_console/user_management/teams'
@@ -505,7 +507,7 @@ export default class TeamDetails extends React.PureComponent<Props, State> {
                             defaultMessage='Team Configuration'
                         />
                     </div>
-                </div>
+                </AdminHeader>
 
                 <div className='admin-console__wrapper'>
                     <div className='admin-console__content'>

webapp/channels/src/components/admin_console/team_channel_settings/team/team_settings.tsx

@@ -7,6 +7,7 @@ import {FormattedMessage} from 'react-intl';
 import {t} from 'utils/i18n';
 import TeamList from 'components/admin_console/team_channel_settings/team/list';
 import AdminPanel from 'components/widgets/admin_console/admin_panel';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
 
 type Props = {
     siteName: string;
@@ -15,13 +16,13 @@ type Props = {
 export function TeamsSettings(props: Props) {
     return (
         <div className='wrapper--fixed'>
-            <div className='admin-console__header'>
+            <AdminHeader>
                 <FormattedMessage
                     id='admin.team_settings.groupsPageTitle'
                     defaultMessage='{siteName} Teams'
                     values={{siteName: props.siteName}}
                 />
-            </div>
+            </AdminHeader>
 
             <div className='admin-console__wrapper'>
                 <div className='admin-console__content'>

webapp/channels/src/components/admin_console/workspace-optimization/dashboard.tsx

@@ -1,17 +1,18 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {CheckIcon} from '@mattermost/compass-icons/components';
-import classNames from 'classnames';
-
 import React from 'react';
 import styled from 'styled-components';
+import classNames from 'classnames';
+import {FormattedMessage} from 'react-intl';
+
+import {CheckIcon} from '@mattermost/compass-icons/components';
 
 import Accordion, {AccordionItemType} from 'components/common/accordion/accordion';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
 
 import LoadingScreen from '../../loading_screen';
-import FormattedAdminHeader from '../../widgets/admin_console/formatted_admin_header';
-import {Props} from '../admin_console';
+import type {Props} from '../admin_console';
 
 import ChipsList, {ChipsInfoType} from './chips_list';
 import CtaButtons from './cta_buttons';
@@ -121,10 +122,12 @@ const WorkspaceOptimizationDashboard = (props: Props) => {
 
     return loading || !accordionItemsData ? <LoadingScreen/> : (
         <div className='WorkspaceOptimizationDashboard wrapper--fixed'>
-            <FormattedAdminHeader
-                id={'admin.reporting.workspace_optimization.title'}
-                defaultMessage='Workspace Optimization'
-            />
+            <AdminHeader>
+                <FormattedMessage
+                    id={'admin.reporting.workspace_optimization.title'}
+                    defaultMessage='Workspace Optimization'
+                />
+            </AdminHeader>
             <div className='admin-console__wrapper'>
                 <OverallScore
                     chips={

webapp/channels/src/components/analytics/system_analytics/system_analytics.tsx

@@ -8,11 +8,13 @@ import {AnalyticsRow, PluginAnalyticsRow, IndexedPluginAnalyticsRow} from '@matt
 import {ClientLicense} from '@mattermost/types/config';
 
 import * as AdminActions from 'actions/admin_actions.jsx';
+
 import Constants from 'utils/constants';
 
-import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
 import {ActivatedUserCard} from 'components/analytics/activated_users_card';
 import TrueUpReview from 'components/analytics/true_up_review';
+import ExternalLink from 'components/external_link';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
 
 import {GlobalState} from 'types/store';
 
@@ -27,7 +29,6 @@ import {
     formatPostDoughtnutData,
     synchronizeChartLabels,
 } from '../format';
-import ExternalLink from 'components/external_link';
 
 const StatTypes = Constants.StatTypes;
 
@@ -469,10 +470,12 @@ export default class SystemAnalytics extends React.PureComponent<Props, State> {
 
         return (
             <div className='wrapper--fixed team_statistics'>
-                <FormattedAdminHeader
-                    id='analytics.system.title'
-                    defaultMessage='System Statistics'
-                />
+                <AdminHeader>
+                    <FormattedMessage
+                        id='analytics.system.title'
+                        defaultMessage='System Statistics'
+                    />
+                </AdminHeader>
                 <div className='admin-console__wrapper'>
                     <div className='admin-console__content'>
                         {banner}

webapp/channels/src/components/analytics/team_analytics/team_analytics.tsx

@@ -12,9 +12,7 @@ import {UserProfile} from '@mattermost/types/users';
 import {ClientLicense} from '@mattermost/types/config';
 
 import LoadingScreen from 'components/loading_screen';
-
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
-
 import * as AdminActions from 'actions/admin_actions';
 import {StatTypes} from 'utils/constants';
 import Banner from 'components/admin_console/banner';
@@ -23,11 +21,12 @@ import StatisticCount from 'components/analytics/statistic_count';
 import TableChart from 'components/analytics/table_chart';
 import {ActivatedUserCard} from 'components/analytics/activated_users_card';
 import TrueUpReview from 'components/analytics/true_up_review';
+import ExternalLink from 'components/external_link';
+import AdminHeader from 'components/widgets/admin_console/admin_header';
 
 import {getMonthLong} from 'utils/i18n';
 
 import {formatPostsPerDayData, formatUsersWithPostsPerDayData, synchronizeChartLabels} from '../format';
-import ExternalLink from 'components/external_link';
 
 const LAST_ANALYTICS_TEAM = 'last_analytics_team';
 
@@ -286,7 +285,7 @@ export default class TeamAnalytics extends React.PureComponent<Props, State> {
 
         return (
             <div className='wrapper--fixed team_statistics'>
-                <div className='admin-console__header team-statistics__header-row'>
+                <AdminHeader>
                     <div className='team-statistics__header'>
                         <FormattedMarkdownMessage
                             id='analytics.team.title'
@@ -306,7 +305,7 @@ export default class TeamAnalytics extends React.PureComponent<Props, State> {
                             {teams}
                         </select>
                     </div>
-                </div>
+                </AdminHeader>
 
                 <div className='admin-console__wrapper'>
                     <div className='admin-console__content'>

webapp/channels/src/components/widgets/admin_console/admin_header.test.tsx

@@ -1,23 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-/* eslint no-console: 0 */
-
-import React from 'react';
-import {shallow} from 'enzyme';
-
-import AdminHeader from './admin_header';
-
-describe('components/widgets/admin_console/AdminHeader', () => {
-    test('render component with child', () => {
-        const wrapper = shallow(<AdminHeader>{'Test'}</AdminHeader>);
-        expect(wrapper).toMatchInlineSnapshot(`
-<div
-  className="admin-console__header"
->
-  Test
-</div>
-`,
-        );
-    });
-});

webapp/channels/src/components/widgets/admin_console/admin_header.tsx

@@ -1,18 +1,27 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {ReactNode} from 'react';
+import classNames from 'classnames';
 
 type Props = {
-    children: JSX.Element[] | JSX.Element | string;
+    withBackButton?: boolean;
+    children: ReactNode;
 };
 
-export default class AdminHeader extends React.PureComponent<Props> {
-    public render() {
-        return (
-            <div className={'admin-console__header'}>
-                {this.props.children}
-            </div>
-        );
-    }
-}
+const AdminHeader = (props: Props) => {
+    return (
+        <div
+            className={
+                classNames(
+                    'admin-console__header',
+                    {'with-back': props.withBackButton},
+                )
+            }
+        >
+            {props.children}
+        </div>
+    );
+};
+
+export default AdminHeader;

webapp/channels/src/components/widgets/admin_console/formatted_admin_header.test.tsx

@@ -1,52 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {shallow} from 'enzyme';
-
-import FormattedAdminHeader from './formatted_admin_header';
-
-describe('components/widgets/admin_console/FormattedAdminHeader', () => {
-    test('render component with required props', () => {
-        const wrapper = shallow(
-            <FormattedAdminHeader
-                id='string.id'
-                defaultMessage='default message'
-            />,
-        );
-        expect(wrapper).toMatchInlineSnapshot(`
-            <AdminHeader>
-              <FormattedMarkdownMessage
-                defaultMessage="default message"
-                id="string.id"
-                values={Object {}}
-              />
-            </AdminHeader>
-        `);
-    });
-
-    test('render component with all props', () => {
-        const wrapper = shallow(
-            <FormattedAdminHeader
-                id='string.id'
-                defaultMessage='default message'
-                values={{
-                    a_key: 'a_value',
-                }}
-            />,
-        );
-        expect(wrapper).toMatchInlineSnapshot(`
-            <AdminHeader>
-              <FormattedMarkdownMessage
-                defaultMessage="default message"
-                id="string.id"
-                values={
-                  Object {
-                    "a_key": "a_value",
-                  }
-                }
-              />
-            </AdminHeader>
-        `);
-    });
-});

webapp/channels/src/components/widgets/admin_console/formatted_admin_header.tsx

@@ -1,30 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-
-import FormattedMarkdownMessage from 'components/formatted_markdown_message';
-
-import AdminHeader from './admin_header';
-
-type Props = {
-    id: string;
-    defaultMessage: string;
-    values?: any;
-};
-
-const FormattedAdminHeader: React.FC<Props> = (props: Props) => (
-    <AdminHeader>
-        <FormattedMarkdownMessage
-            id={props.id}
-            defaultMessage={props.defaultMessage}
-            values={props.values}
-        />
-    </AdminHeader>
-);
-
-FormattedAdminHeader.defaultProps = {
-    values: {},
-};
-
-export default FormattedAdminHeader;

webapp/channels/src/i18n/en.json

@@ -4991,7 +4991,6 @@
   "status_dropdown.set_online": "Online",
   "status_dropdown.set_ooo": "Out of Office",
   "status_dropdown.set_ooo.extra": "Automatic Replies are enabled",
-  "string.id": "default message",
   "success_modal.return_to_workspace": "Return to workspace",
   "success_modal.subtitle": "Your final bill will be prorated. Your workspace now has {plan} limits.",
   "suggestion_list.no_matches": "No items match __{value}__",

webapp/channels/src/sass/routes/_statistics.scss

@@ -142,6 +142,11 @@
         }
     }
 
+    .admin-console__header {
+        align-items: center;
+        justify-content: space-between;
+    }
+
     .team-statistics__header-row {
         align-items: center;
         justify-content: space-between;

webapp/package-lock.json

@@ -3552,7 +3552,7 @@
         "jest-junit": "12.2.0",
         "jest-styled-components": "7.1.1",
         "jest-watch-typeahead": "0.6.4",
-        "mmjstool": "github:mattermost/mattermost-utilities#1d21e35ca6296ef7b6379b0f214b86ffa6404213",
+        "mmjstool": "github:mattermost/mattermost-utilities#e65ab00f22628cbdee736fd2e4f192f07225e82d",
         "nock": "13.2.8",
         "prettier": "2.3.2",
         "react-router-enzyme-context": "1.2.0",
@@ -24467,14 +24467,12 @@
     },
     "node_modules/mmjstool": {
       "version": "1.0.0",
-      "resolved": "git+ssh://git@github.com/mattermost/mattermost-utilities.git#1d21e35ca6296ef7b6379b0f214b86ffa6404213",
+      "resolved": "git+ssh://git@github.com/mattermost/mattermost-utilities.git#e65ab00f22628cbdee736fd2e4f192f07225e82d",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "^5.44.0",
         "estree-walk": "^2.2.0",
         "filehound": "^1.17.5",
         "sort-json": "^2.0.0",
-        "typescript": "^4.7.4",
         "webpack-cli": "^4.9.1",
         "yargs": "^17.3.1"
       },
@@ -53427,7 +53425,7 @@
         "mark.js": "8.11.1",
         "marked": "github:mattermost/marked#2ef7f28cc7718e3f551c4ce9ea75fdd7580c2008",
         "memoize-one": "6.0.0",
-        "mmjstool": "github:mattermost/mattermost-utilities#1d21e35ca6296ef7b6379b0f214b86ffa6404213",
+        "mmjstool": "github:mattermost/mattermost-utilities#e65ab00f22628cbdee736fd2e4f192f07225e82d",
         "moment-timezone": "0.5.38",
         "nock": "13.2.8",
         "p-queue": "7.3.0",
@@ -54337,15 +54335,13 @@
       "dev": true
     },
     "mmjstool": {
-      "version": "git+ssh://git@github.com/mattermost/mattermost-utilities.git#1d21e35ca6296ef7b6379b0f214b86ffa6404213",
+      "version": "git+ssh://git@github.com/mattermost/mattermost-utilities.git#e65ab00f22628cbdee736fd2e4f192f07225e82d",
       "dev": true,
-      "from": "mmjstool@github:mattermost/mattermost-utilities#1d21e35ca6296ef7b6379b0f214b86ffa6404213",
+      "from": "mmjstool@github:mattermost/mattermost-utilities#e65ab00f22628cbdee736fd2e4f192f07225e82d",
       "requires": {
-        "@typescript-eslint/typescript-estree": "^5.44.0",
         "estree-walk": "^2.2.0",
         "filehound": "^1.17.5",
         "sort-json": "^2.0.0",
-        "typescript": "^4.7.4",
         "webpack-cli": "^4.9.1",
         "yargs": "^17.3.1"
       },