MM-54004 migrate HeaderFooterNotLoggedIn as functional component (#24244)

* chore: MM-54004 migrate HeaderFooterNotLoggedIn as functional component

* fix about and HA links

server/public/model/config.go

@@ -133,7 +133,7 @@ const (
 
 	SupportSettingsDefaultTermsOfServiceLink = "https://mattermost.com/pl/terms-of-use/"
 	SupportSettingsDefaultPrivacyPolicyLink  = "https://mattermost.com/pl/privacy-policy/"
-	SupportSettingsDefaultAboutLink          = "https://mattermost.com/pl/about-mattermomst"
+	SupportSettingsDefaultAboutLink          = "https://mattermost.com/pl/about-mattermost"
 	SupportSettingsDefaultHelpLink           = "https://mattermost.com/pl/help/"
 	SupportSettingsDefaultReportAProblemLink = "https://mattermost.com/pl/report-a-bug"
 	SupportSettingsDefaultSupportEmail       = ""

webapp/channels/src/components/header_footer_template/__snapshots__/header_footer_template.test.tsx.snap

@@ -2,50 +2,56 @@
 
 exports[`components/HeaderFooterTemplate should match snapshot with about link 1`] = `
 <div
-  className="inner-wrap"
+  data-testid="root-testid"
+  id="root"
 >
   <div
-    className="row content"
+    class="inner-wrap"
-  />
-  <div
-    className="row footer"
   >
     <div
-      className="footer-pane col-xs-12"
+      class="row content"
-      id="footer_section"
+    />
+    <div
+      class="row footer"
     >
       <div
-        className="col-xs-12"
+        class="footer-pane col-xs-12"
+        id="footer_section"
       >
-        <span
+        <div
-          className="pull-right footer-site-name"
+          class="col-xs-12"
-          id="company_name"
         >
-          Mattermost
+          <span
-        </span>
+            class="pull-right footer-site-name"
-      </div>
+            id="company_name"
-      <div
-        className="col-xs-12"
-      >
-        <span
-          className="pull-right footer-link copyright"
-          id="copyright"
-        >
-          © 2015-2017 Mattermost, Inc.
-        </span>
-        <span
-          className="pull-right"
-        >
-          <ExternalLink
-            className="footer-link"
-            href="http://testaboutlink"
-            id="about_link"
-            key="about_link"
-            location="header_footer_template"
           >
-            About
+            Mattermost
-          </ExternalLink>
+          </span>
-        </span>
+        </div>
+        <div
+          class="col-xs-12"
+        >
+          <span
+            class="pull-right footer-link copyright"
+            id="copyright"
+          >
+            © 2015-2017 Mattermost, Inc.
+          </span>
+          <span
+            class="pull-right"
+          >
+            <a
+              class="footer-link"
+              href="http://testaboutlink"
+              id="about_link"
+              location="header_footer_template"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              About
+            </a>
+          </span>
+        </div>
       </div>
     </div>
   </div>
@@ -54,77 +60,86 @@ exports[`components/HeaderFooterTemplate should match snapshot with about link 1
 
 exports[`components/HeaderFooterTemplate should match snapshot with all links 1`] = `
 <div
-  className="inner-wrap"
+  data-testid="root-testid"
+  id="root"
 >
   <div
-    className="row content"
+    class="inner-wrap"
-  />
-  <div
-    className="row footer"
   >
     <div
-      className="footer-pane col-xs-12"
+      class="row content"
-      id="footer_section"
+    />
+    <div
+      class="row footer"
     >
       <div
-        className="col-xs-12"
+        class="footer-pane col-xs-12"
+        id="footer_section"
       >
-        <span
+        <div
-          className="pull-right footer-site-name"
+          class="col-xs-12"
-          id="company_name"
         >
-          Mattermost
+          <span
-        </span>
+            class="pull-right footer-site-name"
-      </div>
+            id="company_name"
-      <div
+          >
-        className="col-xs-12"
+            Mattermost
-      >
+          </span>
-        <span
+        </div>
-          className="pull-right footer-link copyright"
+        <div
-          id="copyright"
+          class="col-xs-12"
         >
-          © 2015-2017 Mattermost, Inc.
+          <span
-        </span>
+            class="pull-right footer-link copyright"
-        <span
+            id="copyright"
-          className="pull-right"
-        >
-          <ExternalLink
-            className="footer-link"
-            href="http://testaboutlink"
-            id="about_link"
-            key="about_link"
-            location="header_footer_template"
           >
-            About
+            © 2015-2017 Mattermost, Inc.
-          </ExternalLink>
+          </span>
-          <ExternalLink
+          <span
-            className="footer-link"
+            class="pull-right"
-            href="http://testprivacypolicylink"
-            id="privacy_link"
-            key="privacy_link"
-            location="header_footer_template"
           >
-            Privacy Policy
+            <a
-          </ExternalLink>
+              class="footer-link"
-          <ExternalLink
+              href="http://testaboutlink"
-            className="footer-link"
+              id="about_link"
-            href="http://testtermsofservicelink"
+              location="header_footer_template"
-            id="terms_link"
+              rel="noopener noreferrer"
-            key="terms_link"
+              target="_blank"
-            location="header_footer_template"
+            >
-          >
+              About
-            Terms
+            </a>
-          </ExternalLink>
+            <a
-          <ExternalLink
+              class="footer-link"
-            className="footer-link"
+              href="http://testprivacypolicylink"
-            href="http://testhelplink"
+              id="privacy_link"
-            id="help_link"
+              location="header_footer_template"
-            key="help_link"
+              rel="noopener noreferrer"
-            location="header_footer_template"
+              target="_blank"
-          >
+            >
-            Help
+              Privacy Policy
-          </ExternalLink>
+            </a>
-        </span>
+            <a
+              class="footer-link"
+              href="http://testtermsofservicelink"
+              id="terms_link"
+              location="header_footer_template"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Terms
+            </a>
+            <a
+              class="footer-link"
+              href="http://testhelplink"
+              id="help_link"
+              location="header_footer_template"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Help
+            </a>
+          </span>
+        </div>
       </div>
     </div>
   </div>
@@ -133,44 +148,49 @@ exports[`components/HeaderFooterTemplate should match snapshot with all links 1`
 
 exports[`components/HeaderFooterTemplate should match snapshot with children 1`] = `
 <div
-  className="inner-wrap"
+  data-testid="root-testid"
+  id="root"
 >
   <div
-    className="row content"
+    class="inner-wrap"
-  >
-    <p>
-      test
-    </p>
-  </div>
-  <div
-    className="row footer"
   >
     <div
-      className="footer-pane col-xs-12"
+      class="row content"
-      id="footer_section"
+    >
+      <p>
+        test
+      </p>
+    </div>
+    <div
+      class="row footer"
     >
       <div
-        className="col-xs-12"
+        class="footer-pane col-xs-12"
+        id="footer_section"
       >
-        <span
+        <div
-          className="pull-right footer-site-name"
+          class="col-xs-12"
-          id="company_name"
         >
-          Mattermost
+          <span
-        </span>
+            class="pull-right footer-site-name"
-      </div>
+            id="company_name"
-      <div
+          >
-        className="col-xs-12"
+            Mattermost
-      >
+          </span>
-        <span
+        </div>
-          className="pull-right footer-link copyright"
+        <div
-          id="copyright"
+          class="col-xs-12"
         >
-          © 2015-2017 Mattermost, Inc.
+          <span
-        </span>
+            class="pull-right footer-link copyright"
-        <span
+            id="copyright"
-          className="pull-right"
+          >
-        />
+            © 2015-2017 Mattermost, Inc.
+          </span>
+          <span
+            class="pull-right"
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -179,50 +199,56 @@ exports[`components/HeaderFooterTemplate should match snapshot with children 1`]
 
 exports[`components/HeaderFooterTemplate should match snapshot with help link 1`] = `
 <div
-  className="inner-wrap"
+  data-testid="root-testid"
+  id="root"
 >
   <div
-    className="row content"
+    class="inner-wrap"
-  />
-  <div
-    className="row footer"
   >
     <div
-      className="footer-pane col-xs-12"
+      class="row content"
-      id="footer_section"
+    />
+    <div
+      class="row footer"
     >
       <div
-        className="col-xs-12"
+        class="footer-pane col-xs-12"
+        id="footer_section"
       >
-        <span
+        <div
-          className="pull-right footer-site-name"
+          class="col-xs-12"
-          id="company_name"
         >
-          Mattermost
+          <span
-        </span>
+            class="pull-right footer-site-name"
-      </div>
+            id="company_name"
-      <div
-        className="col-xs-12"
-      >
-        <span
-          className="pull-right footer-link copyright"
-          id="copyright"
-        >
-          © 2015-2017 Mattermost, Inc.
-        </span>
-        <span
-          className="pull-right"
-        >
-          <ExternalLink
-            className="footer-link"
-            href="http://testhelplink"
-            id="help_link"
-            key="help_link"
-            location="header_footer_template"
           >
-            Help
+            Mattermost
-          </ExternalLink>
+          </span>
-        </span>
+        </div>
+        <div
+          class="col-xs-12"
+        >
+          <span
+            class="pull-right footer-link copyright"
+            id="copyright"
+          >
+            © 2015-2017 Mattermost, Inc.
+          </span>
+          <span
+            class="pull-right"
+          >
+            <a
+              class="footer-link"
+              href="http://testhelplink"
+              id="help_link"
+              location="header_footer_template"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Help
+            </a>
+          </span>
+        </div>
       </div>
     </div>
   </div>
@@ -231,50 +257,56 @@ exports[`components/HeaderFooterTemplate should match snapshot with help link 1`
 
 exports[`components/HeaderFooterTemplate should match snapshot with privacy policy link 1`] = `
 <div
-  className="inner-wrap"
+  data-testid="root-testid"
+  id="root"
 >
   <div
-    className="row content"
+    class="inner-wrap"
-  />
-  <div
-    className="row footer"
   >
     <div
-      className="footer-pane col-xs-12"
+      class="row content"
-      id="footer_section"
+    />
+    <div
+      class="row footer"
     >
       <div
-        className="col-xs-12"
+        class="footer-pane col-xs-12"
+        id="footer_section"
       >
-        <span
+        <div
-          className="pull-right footer-site-name"
+          class="col-xs-12"
-          id="company_name"
         >
-          Mattermost
+          <span
-        </span>
+            class="pull-right footer-site-name"
-      </div>
+            id="company_name"
-      <div
-        className="col-xs-12"
-      >
-        <span
-          className="pull-right footer-link copyright"
-          id="copyright"
-        >
-          © 2015-2017 Mattermost, Inc.
-        </span>
-        <span
-          className="pull-right"
-        >
-          <ExternalLink
-            className="footer-link"
-            href="http://testprivacypolicylink"
-            id="privacy_link"
-            key="privacy_link"
-            location="header_footer_template"
           >
-            Privacy Policy
+            Mattermost
-          </ExternalLink>
+          </span>
-        </span>
+        </div>
+        <div
+          class="col-xs-12"
+        >
+          <span
+            class="pull-right footer-link copyright"
+            id="copyright"
+          >
+            © 2015-2017 Mattermost, Inc.
+          </span>
+          <span
+            class="pull-right"
+          >
+            <a
+              class="footer-link"
+              href="http://testprivacypolicylink"
+              id="privacy_link"
+              location="header_footer_template"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Privacy Policy
+            </a>
+          </span>
+        </div>
       </div>
     </div>
   </div>
@@ -283,50 +315,56 @@ exports[`components/HeaderFooterTemplate should match snapshot with privacy poli
 
 exports[`components/HeaderFooterTemplate should match snapshot with term of service link 1`] = `
 <div
-  className="inner-wrap"
+  data-testid="root-testid"
+  id="root"
 >
   <div
-    className="row content"
+    class="inner-wrap"
-  />
-  <div
-    className="row footer"
   >
     <div
-      className="footer-pane col-xs-12"
+      class="row content"
-      id="footer_section"
+    />
+    <div
+      class="row footer"
     >
       <div
-        className="col-xs-12"
+        class="footer-pane col-xs-12"
+        id="footer_section"
       >
-        <span
+        <div
-          className="pull-right footer-site-name"
+          class="col-xs-12"
-          id="company_name"
         >
-          Mattermost
+          <span
-        </span>
+            class="pull-right footer-site-name"
-      </div>
+            id="company_name"
-      <div
-        className="col-xs-12"
-      >
-        <span
-          className="pull-right footer-link copyright"
-          id="copyright"
-        >
-          © 2015-2017 Mattermost, Inc.
-        </span>
-        <span
-          className="pull-right"
-        >
-          <ExternalLink
-            className="footer-link"
-            href="http://testtermsofservicelink"
-            id="terms_link"
-            key="terms_link"
-            location="header_footer_template"
           >
-            Terms
+            Mattermost
-          </ExternalLink>
+          </span>
-        </span>
+        </div>
+        <div
+          class="col-xs-12"
+        >
+          <span
+            class="pull-right footer-link copyright"
+            id="copyright"
+          >
+            © 2015-2017 Mattermost, Inc.
+          </span>
+          <span
+            class="pull-right"
+          >
+            <a
+              class="footer-link"
+              href="http://testtermsofservicelink"
+              id="terms_link"
+              location="header_footer_template"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Terms
+            </a>
+          </span>
+        </div>
       </div>
     </div>
   </div>
@@ -335,42 +373,142 @@ exports[`components/HeaderFooterTemplate should match snapshot with term of serv
 
 exports[`components/HeaderFooterTemplate should match snapshot without children 1`] = `
 <div
-  className="inner-wrap"
+  data-testid="root-testid"
+  id="root"
 >
   <div
-    className="row content"
+    class="inner-wrap"
-  />
-  <div
-    className="row footer"
   >
     <div
-      className="footer-pane col-xs-12"
+      class="row content"
-      id="footer_section"
+    />
+    <div
+      class="row footer"
     >
       <div
-        className="col-xs-12"
+        class="footer-pane col-xs-12"
+        id="footer_section"
       >
-        <span
+        <div
-          className="pull-right footer-site-name"
+          class="col-xs-12"
-          id="company_name"
         >
-          Mattermost
+          <span
-        </span>
+            class="pull-right footer-site-name"
-      </div>
+            id="company_name"
-      <div
+          >
-        className="col-xs-12"
+            Mattermost
-      >
+          </span>
-        <span
+        </div>
-          className="pull-right footer-link copyright"
+        <div
-          id="copyright"
+          class="col-xs-12"
         >
-          © 2015-2017 Mattermost, Inc.
+          <span
-        </span>
+            class="pull-right footer-link copyright"
-        <span
+            id="copyright"
-          className="pull-right"
+          >
-        />
+            © 2015-2017 Mattermost, Inc.
+          </span>
+          <span
+            class="pull-right"
+          />
+        </div>
       </div>
     </div>
   </div>
 </div>
 `;
+
+exports[`components/HeaderFooterTemplate should set classes on body and #root on mount and unset on unmount 1`] = `
+<div
+  data-testid="root-testid"
+  id="root"
+>
+  <div
+    class="inner-wrap"
+  >
+    <div
+      class="row content"
+    />
+    <div
+      class="row footer"
+    >
+      <div
+        class="footer-pane col-xs-12"
+        id="footer_section"
+      >
+        <div
+          class="col-xs-12"
+        >
+          <span
+            class="pull-right footer-site-name"
+            id="company_name"
+          >
+            Mattermost
+          </span>
+        </div>
+        <div
+          class="col-xs-12"
+        >
+          <span
+            class="pull-right footer-link copyright"
+            id="copyright"
+          >
+            © 2015-2017 Mattermost, Inc.
+          </span>
+          <span
+            class="pull-right"
+          >
+            <a
+              class="footer-link"
+              href="http://testaboutlink"
+              id="about_link"
+              location="header_footer_template"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              About
+            </a>
+            <a
+              class="footer-link"
+              href="http://testprivacypolicylink"
+              id="privacy_link"
+              location="header_footer_template"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Privacy Policy
+            </a>
+            <a
+              class="footer-link"
+              href="http://testtermsofservicelink"
+              id="terms_link"
+              location="header_footer_template"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Terms
+            </a>
+            <a
+              class="footer-link"
+              href="http://testhelplink"
+              id="help_link"
+              location="header_footer_template"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Help
+            </a>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`components/HeaderFooterTemplate should set classes on body and #root on mount and unset on unmount 2`] = `
+<div
+  data-testid="root-testid"
+  id="root"
+/>
+`;

webapp/channels/src/components/header_footer_template/header_footer_template.test.tsx

@@ -2,9 +2,13 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {shallow} from 'enzyme';
 
-import NotLoggedIn from 'components/header_footer_template/header_footer_template';
+import {DeepPartial} from '@mattermost/types/utilities';
+
+import {renderWithIntlAndStore} from 'tests/react_testing_utils';
+import {GlobalState} from 'types/store';
+
+import HeaderFooterNotLoggedIn from './header_footer_template';
 
 describe('components/HeaderFooterTemplate', () => {
     const RealDate: DateConstructor = Date;
@@ -17,13 +21,54 @@ describe('components/HeaderFooterTemplate', () => {
         global.Date = mock as any;
     }
 
+    const state = {
+        entities: {
+            general: {
+                config: {},
+            },
+            users: {
+                currentUserId: '',
+                profiles: {
+                    user1: {
+                        id: 'user1',
+                        roles: '',
+                    },
+                },
+            },
+            teams: {
+                currentTeamId: 'team1',
+                teams: {
+                    team1: {
+                        id: 'team1',
+                        name: 'team-1',
+                        displayName: 'Team 1',
+                    },
+                },
+                myMembers: {
+                    team1: {roles: 'team_role'},
+                },
+            },
+        },
+        storage: {
+            initialized: true,
+        },
+    } as unknown as GlobalState;
+
+    const renderComponent = (component: React.ReactNode, state: DeepPartial<GlobalState>) => {
+        const rootDiv = document.createElement('div');
+        rootDiv.id = 'root';
+        rootDiv.setAttribute('data-testid', 'root-testid');
+
+        return renderWithIntlAndStore(
+            component,
+            state,
+            'en',
+            rootDiv,
+        );
+    };
+
     beforeEach(() => {
         mockDate(new Date(2017, 6, 1));
-
-        const elm = document.createElement('div');
-        elm.setAttribute('id', 'root');
-        document.body.appendChild(elm);
-        document.body.classList.remove('sticky');
     });
 
     afterEach(() => {
@@ -31,83 +76,74 @@ describe('components/HeaderFooterTemplate', () => {
     });
 
     test('should match snapshot without children', () => {
-        const wrapper = shallow(
+        const {container} = renderComponent(<HeaderFooterNotLoggedIn/>, state as DeepPartial<GlobalState>);
-            <NotLoggedIn config={{}}/>,
+        expect(container).toMatchSnapshot();
-        );
-        expect(wrapper).toMatchSnapshot();
     });
 
     test('should match snapshot with children', () => {
-        const wrapper = shallow(
+        const {container} = renderComponent(
-            <NotLoggedIn config={{}}>
+            <HeaderFooterNotLoggedIn>
                 <p>{'test'}</p>
-            </NotLoggedIn>,
+            </HeaderFooterNotLoggedIn>,
+            state as DeepPartial<GlobalState>,
         );
-        expect(wrapper).toMatchSnapshot();
+        expect(container).toMatchSnapshot();
     });
 
     test('should match snapshot with help link', () => {
-        const wrapper = shallow(
+        state.entities.general.config = {HelpLink: 'http://testhelplink'};
-            <NotLoggedIn config={{HelpLink: 'http://testhelplink'}}/>,
+
-        );
+        const {container} = renderComponent(<HeaderFooterNotLoggedIn/>, state as DeepPartial<GlobalState>);
-        expect(wrapper).toMatchSnapshot();
+        expect(container).toMatchSnapshot();
     });
 
     test('should match snapshot with term of service link', () => {
-        const wrapper = shallow(
+        state.entities.general.config = {TermsOfServiceLink: 'http://testtermsofservicelink'};
-            <NotLoggedIn config={{TermsOfServiceLink: 'http://testtermsofservicelink'}}/>,
+
-        );
+        const {container} = renderComponent(<HeaderFooterNotLoggedIn/>, state as DeepPartial<GlobalState>);
-        expect(wrapper).toMatchSnapshot();
+        expect(container).toMatchSnapshot();
     });
 
     test('should match snapshot with privacy policy link', () => {
-        const wrapper = shallow(
+        state.entities.general.config = {PrivacyPolicyLink: 'http://testprivacypolicylink'};
-            <NotLoggedIn config={{PrivacyPolicyLink: 'http://testprivacypolicylink'}}/>,
+
-        );
+        const {container} = renderComponent(<HeaderFooterNotLoggedIn/>, state as DeepPartial<GlobalState>);
-        expect(wrapper).toMatchSnapshot();
+        expect(container).toMatchSnapshot();
     });
 
     test('should match snapshot with about link', () => {
-        const wrapper = shallow(
+        state.entities.general.config = {AboutLink: 'http://testaboutlink'};
-            <NotLoggedIn config={{AboutLink: 'http://testaboutlink'}}/>,
+
-        );
+        const {container} = renderComponent(<HeaderFooterNotLoggedIn/>, state as DeepPartial<GlobalState>);
-        expect(wrapper).toMatchSnapshot();
+        expect(container).toMatchSnapshot();
     });
 
     test('should match snapshot with all links', () => {
-        const wrapper = shallow(
+        state.entities.general.config = {
-            <NotLoggedIn
+            HelpLink: 'http://testhelplink',
-                config={{
+            TermsOfServiceLink: 'http://testtermsofservicelink',
-                    HelpLink: 'http://testhelplink',
+            PrivacyPolicyLink: 'http://testprivacypolicylink',
-                    TermsOfServiceLink: 'http://testtermsofservicelink',
+            AboutLink: 'http://testaboutlink',
-                    PrivacyPolicyLink: 'http://testprivacypolicylink',
+        };
-                    AboutLink: 'http://testaboutlink',
+
-                }}
+        const {container} = renderComponent(<HeaderFooterNotLoggedIn/>, state as DeepPartial<GlobalState>);
-            />,
+        expect(container).toMatchSnapshot();
-        );
-        expect(wrapper).toMatchSnapshot();
     });
 
-    test('should set classes on body and #root on mount', () => {
+    test('should set classes on body and #root on mount and unset on unmount', () => {
+        state.entities.general.config = {
+            HelpLink: 'http://testhelplink',
+            TermsOfServiceLink: 'http://testtermsofservicelink',
+            PrivacyPolicyLink: 'http://testprivacypolicylink',
+            AboutLink: 'http://testaboutlink',
+        };
         expect(document.body.classList.contains('sticky')).toBe(false);
-        const rootElement: HTMLElement | null = document.getElementById('root');
+        const {container, unmount} = renderComponent(<HeaderFooterNotLoggedIn/>, state as DeepPartial<GlobalState>);
-        expect(rootElement?.classList?.contains('container-fluid')).toBe(true);
+        expect(container).toMatchSnapshot();
-        shallow(<NotLoggedIn config={{AboutLink: 'http://testaboutlink'}}/>);
         expect(document.body.classList.contains('sticky')).toBe(true);
-        expect(rootElement?.classList?.contains('container-fluid')).toBe(true);
-    });
 
-    test('should unset classes on body and #root on unmount', () => {
+        unmount();
         expect(document.body.classList.contains('sticky')).toBe(false);
-        const rootElement: HTMLElement | null = document.getElementById('root');
+        expect(container).toMatchSnapshot();
-        expect(rootElement?.classList?.contains('container-fluid')).toBe(true);
-        const wrapper = shallow(
-            <NotLoggedIn config={{AboutLink: 'http://testaboutlink'}}/>,
-        );
-        expect(document.body.classList.contains('sticky')).toBe(true);
-        expect(rootElement?.classList?.contains('container-fluid')).toBe(true);
-        wrapper.unmount();
-        expect(document.body.classList.contains('sticky')).toBe(false);
-        expect(rootElement?.classList?.contains('container-fluid')).toBe(false);
     });
 });

webapp/channels/src/components/header_footer_template/header_footer_template.tsx

@@ -1,142 +1,133 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import PropTypes from 'prop-types';
+import React, {useEffect} from 'react';
-import React from 'react';
+import {useIntl} from 'react-intl';
+import {useSelector} from 'react-redux';
 
-import {ClientConfig} from '@mattermost/types/config';
+import {getConfig} from 'mattermost-redux/selectors/entities/general';
 import ExternalLink from 'components/external_link';
-import {localizeMessage} from 'utils/utils';
 
 type Props = {
-    config: Partial<ClientConfig> | undefined;
+    children?: React.ReactNode | React.ReactNodeArray;
 }
 
-export default class NotLoggedIn extends React.PureComponent<Props> {
+const HeaderFooterNotLoggedIn = (props: Props) => {
-    static propTypes = {
+    const intl = useIntl();
+    const {formatMessage} = intl;
+    const config = useSelector(getConfig);
 
-        /*
+    useEffect(() => {
-         * Content of the page
-         */
-        children: PropTypes.object,
-
-        /*
-         * Mattermost configuration
-         */
-        config: PropTypes.object,
-    };
-
-    componentDidMount() {
         document.body.classList.add('sticky');
         const rootElement: HTMLElement | null = document.getElementById('root');
         if (rootElement) {
             rootElement.classList.add('container-fluid');
         }
-    }
+
-    componentWillUnmount() {
+        return () => {
-        document.body.classList.remove('sticky');
+            document.body.classList.remove('sticky');
-        const rootElement: HTMLElement | null = document.getElementById('root');
+            const rootElement: HTMLElement | null = document.getElementById('root');
-        if (rootElement) {
+            if (rootElement) {
-            rootElement.classList.remove('container-fluid');
+                rootElement.classList.remove('container-fluid');
-        }
+            }
+        };
+    }, []);
+
+    if (!config) {
+        return null;
     }
 
-    render() {
+    const content = [];
-        const content = [];
 
-        if (!this.props.config) {
+    if (config.AboutLink) {
-            return null;
+        content.push(
-        }
+            <ExternalLink
+                key='about_link'
+                id='about_link'
+                className='footer-link'
+                location='header_footer_template'
+                href={config.AboutLink}
+            >
+                {formatMessage({id: 'web.footer.about', defaultMessage: 'About'})}
+            </ExternalLink>,
+        );
+    }
 
-        if (this.props.config.AboutLink) {
+    if (config.PrivacyPolicyLink) {
-            content.push(
+        content.push(
-                <ExternalLink
+            <ExternalLink
-                    key='about_link'
+                key='privacy_link'
-                    id='about_link'
+                id='privacy_link'
-                    className='footer-link'
+                className='footer-link'
-                    location='header_footer_template'
+                location='header_footer_template'
-                    href={this.props.config.AboutLink}
+                href={config.PrivacyPolicyLink}
+            >
+                {formatMessage({id: 'web.footer.privacy', defaultMessage: 'Privacy Policy'})}
+            </ExternalLink>,
+        );
+    }
+
+    if (config.TermsOfServiceLink) {
+        content.push(
+            <ExternalLink
+                key='terms_link'
+                id='terms_link'
+                className='footer-link'
+                location='header_footer_template'
+                href={config.TermsOfServiceLink}
+            >
+                {formatMessage({id: 'web.footer.terms', defaultMessage: 'Terms'})}
+            </ExternalLink>,
+        );
+    }
+
+    if (config.HelpLink) {
+        content.push(
+            <ExternalLink
+                key='help_link'
+                id='help_link'
+                className='footer-link'
+                location='header_footer_template'
+                href={config.HelpLink}
+            >
+                {formatMessage({id: 'web.footer.help', defaultMessage: 'Help'})}
+            </ExternalLink>,
+        );
+    }
+
+    return (
+        <div className='inner-wrap'>
+            <div className='row content'>
+                {props.children}
+            </div>
+            <div className='row footer'>
+                <div
+                    id='footer_section'
+                    className='footer-pane col-xs-12'
                 >
-                    {localizeMessage('web.footer.about', 'About')}
+                    <div className='col-xs-12'>
-                </ExternalLink>,
+                        <span
-            );
+                            id='company_name'
-        }
+                            className='pull-right footer-site-name'
-
+                        >
-        if (this.props.config.PrivacyPolicyLink) {
+                            {'Mattermost'}
-            content.push(
+                        </span>
-                <ExternalLink
+                    </div>
-                    key='privacy_link'
+                    <div className='col-xs-12'>
-                    id='privacy_link'
+                        <span
-                    className='footer-link'
+                            id='copyright'
-                    location='header_footer_template'
+                            className='pull-right footer-link copyright'
-                    href={this.props.config.PrivacyPolicyLink}
+                        >
-                >
+                            {`© 2015-${new Date().getFullYear()} Mattermost, Inc.`}
-                    {localizeMessage('web.footer.privacy', 'Privacy Policy')}
+                        </span>
-                </ExternalLink>,
+                        <span className='pull-right'>
-            );
+                            {content}
-        }
+                        </span>
-
-        if (this.props.config.TermsOfServiceLink) {
-            content.push(
-                <ExternalLink
-                    key='terms_link'
-                    id='terms_link'
-                    className='footer-link'
-                    location='header_footer_template'
-                    href={this.props.config.TermsOfServiceLink}
-                >
-                    {localizeMessage('web.footer.terms', 'Terms')}
-                </ExternalLink>,
-            );
-        }
-
-        if (this.props.config.HelpLink) {
-            content.push(
-                <ExternalLink
-                    key='help_link'
-                    id='help_link'
-                    className='footer-link'
-                    location='header_footer_template'
-                    href={this.props.config.HelpLink}
-                >
-                    {localizeMessage('web.footer.help', 'Help')}
-                </ExternalLink>,
-            );
-        }
-
-        return (
-            <div className='inner-wrap'>
-                <div className='row content'>
-                    {this.props.children}
-                </div>
-                <div className='row footer'>
-                    <div
-                        id='footer_section'
-                        className='footer-pane col-xs-12'
-                    >
-                        <div className='col-xs-12'>
-                            <span
-                                id='company_name'
-                                className='pull-right footer-site-name'
-                            >
-                                {'Mattermost'}
-                            </span>
-                        </div>
-                        <div className='col-xs-12'>
-                            <span
-                                id='copyright'
-                                className='pull-right footer-link copyright'
-                            >
-                                {`© 2015-${new Date().getFullYear()} Mattermost, Inc.`}
-                            </span>
-                            <span className='pull-right'>
-                                {content}
-                            </span>
-                        </div>
                     </div>
                 </div>
             </div>
-        );
+        </div>
-    }
+    );
-}
+};
 
+export default HeaderFooterNotLoggedIn;

webapp/channels/src/components/header_footer_template/index.ts

@@ -1,18 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {connect} from 'react-redux';
-
-import {getConfig} from 'mattermost-redux/selectors/entities/general';
-
-import {GlobalState} from 'types/store';
-
-import NotLoggedIn from './header_footer_template';
-
-function mapStateToProps(state: GlobalState) {
-    return {
-        config: getConfig(state),
-    };
-}
-
-export default connect(mapStateToProps)(NotLoggedIn);

webapp/channels/src/components/header_footer_template_route.tsx

@@ -4,7 +4,7 @@
 import React, {ComponentType} from 'react';
 import {Route, RouteProps} from 'react-router-dom';
 
-const HeaderFooterTemplate = React.lazy(() => import('components/header_footer_template'));
+const HeaderFooterTemplate = React.lazy(() => import('components/header_footer_template/header_footer_template'));
 const LoggedIn = React.lazy(() => import('components/logged_in'));
 
 interface Props extends RouteProps {

webapp/channels/src/tests/react_testing_utils.tsx

@@ -26,7 +26,7 @@ export const renderWithIntl = (component: React.ReactNode | React.ReactNodeArray
     return render(<IntlProvider locale={locale}>{component}</IntlProvider>);
 };
 
-export const renderWithIntlAndStore = (component: React.ReactNode | React.ReactNodeArray, initialState: DeepPartial<GlobalState> = {}, locale = 'en') => {
+export const renderWithIntlAndStore = (component: React.ReactNode | React.ReactNodeArray, initialState: DeepPartial<GlobalState> = {}, locale = 'en', divContainer?: HTMLDivElement) => {
     // We use a redux-mock-store store for testing, but we set up a real store to ensure the initial state is complete
     const realStore = configureStore(initialState);
 
@@ -38,6 +38,7 @@ export const renderWithIntlAndStore = (component: React.ReactNode | React.ReactN
                 {component}
             </Provider>
         </IntlProvider>,
+        {container: divContainer},
     );
 };
 

webapp/channels/src/utils/constants.tsx

@@ -1101,7 +1101,7 @@ export const DocLinks = {
     ENABLE_HARDENED_MODE: 'https://mattermost.com/pl/enable-hardened-mode',
     FORMAT_MESSAGES: 'https://mattermost.com/pl/format-messages',
     GUEST_ACCOUNTS: 'https://docs.mattermost.com/onboard/guest-accounts.html',
-    HIGH_AVAILABILITY_CLUSTER: 'https://mattermomst.com/pl/high-availability-cluster',
+    HIGH_AVAILABILITY_CLUSTER: 'https://mattermost.com/pl/high-availability-cluster',
     IN_PRODUCT_NOTICES: 'https://mattermost.com/pl/in-product-notices',
     MULTI_FACTOR_AUTH: 'https://mattermost.com/pl/multi-factor-authentication',
     ONBOARD_ADVANCED_PERMISSIONS: 'https://mattermost.com/pl/advanced-permissions',