Simplify navigation and header by introducing loader functions

src/js/App/Header/Header.js

@@ -0,0 +1,26 @@
+import React, { Fragment } from 'react';
+import Brand from './Brand';
+import Tools from './Tools';
+import UnAuthtedHeader from './UnAuthtedHeader';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+const Header = ({ user }) => {
+    return user ? (
+        <Fragment>
+            <Brand />
+            <Tools />
+        </Fragment>
+    ) : <UnAuthtedHeader />;
+};
+
+Header.propTypes = {
+    user: PropTypes.oneOfType([
+        PropTypes.bool,
+        PropTypes.shape({
+            [PropTypes.string]: PropTypes.any
+        })
+    ])
+};
+
+export default connect(({ chrome: { user } }) => ({ user }))(Header);

src/js/App/Header/HeaderTests/Header.test.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import toJson from 'enzyme-to-json';
+import { shallow, mount } from 'enzyme';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
+import Header from '../Header';
+import UnauthedHeader from '../UnAuthtedHeader';
+
+describe('Header', () => {
+    let initialState;
+    let mockStore;
+
+    beforeEach(() =>{
+        mockStore = configureStore();
+        initialState = ({ chrome: {
+            activeTechnology: 'someTechnology',
+            activeLocation: 'someLocation'
+        } });
+    });
+    it('should render correctly', () => {
+        const store = mockStore(initialState);
+        const wrapper = mount(<Provider store={store}>
+            <Header currentApp='Red Hat Insights'/>
+        </Provider>);
+        expect(toJson(wrapper, { mode: 'deep' })).toMatchSnapshot();
+    });
+});
+
+describe('unauthed', () => {
+    it('should render correctly', () => {
+        const wrapper = shallow(<UnauthedHeader/>);
+        expect(toJson(wrapper)).toMatchSnapshot();
+    });
+});

src/js/App/Header/HeaderTests/__snapshots__/Header.test.js.snap

@@ -0,0 +1,88 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header should render correctly 1`] = `
+<Connect(Header)
+  currentApp="Red Hat Insights"
+>
+  Array [
+    <Connect(Brand)>
+      <div
+        className="pf-c-page__header-brand"
+      >
+        <div
+          className="pf-c-page__header-brand-toggle"
+        >
+          <button
+            aria-disabled={false}
+            aria-label="Toggle primary navigation"
+            className="pf-c-button pf-m-plain"
+            data-ouia-component-id={0}
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe={true}
+            disabled={false}
+            onClick={[Function]}
+            type="button"
+            widget-type="InsightsNavToggle"
+          >
+            <svg
+              aria-hidden={true}
+              aria-labelledby={null}
+              fill="currentColor"
+              height="1.5em"
+              role="img"
+              style={
+                Object {
+                  "verticalAlign": "-0.1875em",
+                }
+              }
+              viewBox="0 0 448 512"
+              width="1.5em"
+            >
+              <path
+                d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
+                transform=""
+              />
+            </svg>
+          </button>
+        </div>
+        <a
+          className="pf-c-page__header-brand-link"
+          href="./"
+        >
+          <img
+            alt="Red Hat Logo"
+            src="test-file-stub"
+          />
+        </a>
+      </div>
+    </Connect(Brand)>,
+    <div
+      className="pf-c-page__header-tools"
+    >
+      <button
+        aria-disabled={false}
+        aria-label="Toggle primary navigation"
+        className="pf-c-button pf-m-tertiary"
+        data-ouia-component-id={1}
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe={true}
+        disabled={false}
+        onClick={[Function]}
+        type="button"
+        widget-type="InsightsNavToggle"
+      >
+        Log in
+      </button>
+    </div>,
+    "",
+  ]
+</Connect(Header)>
+`;
+
+exports[`unauthed should render correctly 1`] = `
+<Fragment>
+  <Connect(Brand) />
+  <Login />
+  <LogoutAlert />
+</Fragment>
+`;

src/js/App/Header/Loader.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const HeaderLoader = () => <React.Fragment />;
+
+export default HeaderLoader;

src/js/App/Header/index.js

@@ -1,13 +1,25 @@
-import React, { Fragment } from 'react';
-import Brand from './Brand';
-import Tools from './Tools';
+import React, { lazy, Suspense } from 'react';
+import { Provider } from 'react-redux';
+import { render } from 'react-dom';
+import HeaderLoader from './Loader';
+import { spinUpStore } from '../../redux-config';
 
-const Header = () => {
-    return (
-        <Fragment>
-            <Brand />
-            <Tools />
-        </Fragment>
-    );};
+const Header = lazy(() => import(/* webpackChunkName: "Sidenav" */ './Header'));
 
-export default Header;
+export const headerLoader = () => {
+    const { store } = spinUpStore();
+    if (document.querySelector('header')) {
+        render(
+            <Provider store={store}>
+                <Suspense fallback={<HeaderLoader />}>
+                    <Header />
+                </Suspense>
+            </Provider>,
+            document.querySelector('header')
+        );
+    }
+
+    if (window.insights.chrome.isPenTest()) {
+        document.querySelector('header').classList.add('ins-c-pen-test');
+    }
+};

src/js/App/Sidenav/AppSwitcher.js

@@ -6,12 +6,10 @@ import { Dropdown } from '@patternfly/react-core/dist/js/components/Dropdown/Dro
 import { DropdownItem } from '@patternfly/react-core/dist/js/components/Dropdown/DropdownItem';
 import { DropdownToggle } from '@patternfly/react-core/dist/js/components/Dropdown/DropdownToggle';
 import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
-import { Skeleton, SkeletonSize } from '@redhat-cloud-services/frontend-components/components/cjs/Skeleton';
-import { connect } from 'react-redux';
 
 import './AppSwitcher.scss';
 
-const AppSwitcher = ({ currentApp, globalNav }) => {
+const AppSwitcher = ({ currentApp }) => {
 
     const [isOpen, setIsOpen] = useState(false);
 
@@ -41,32 +39,25 @@ const AppSwitcher = ({ currentApp, globalNav }) => {
     };
 
     return (
-        <section className={`ins-c-app-switcher${globalNav ? '' : '--loading'}`}>
-            {
-                globalNav ? (
-                    <Dropdown
-                        isPlain
-                        className='ins-c-app-switcher__dropdown'
-                        onSelect={() => setIsOpen(!isOpen)}
-                        toggle={
-                            <DropdownToggle id="toggle-id" onToggle={() => setIsOpen(!isOpen)} toggleIndicator={CaretDownIcon}>
-                                { currentApp }
-                            </DropdownToggle>
-                        }
-                        isOpen={isOpen}
-                        dropdownItems={dropdownItems(currentApp)}
-                    />
-                ) : <Skeleton size={SkeletonSize.lg} className="ins-m-dark"/>
-            }
+        <section className="ins-c-app-switcher">
+            <Dropdown
+                isPlain
+                className='ins-c-app-switcher__dropdown'
+                onSelect={() => setIsOpen(!isOpen)}
+                toggle={
+                    <DropdownToggle id="toggle-id" onToggle={() => setIsOpen(!isOpen)} toggleIndicator={CaretDownIcon}>
+                        { currentApp }
+                    </DropdownToggle>
+                }
+                isOpen={isOpen}
+                dropdownItems={dropdownItems(currentApp)}
+            />
         </section>
     );
 };
 
-export default connect(({ chrome: { globalNav } }) => ({ globalNav }))(AppSwitcher);
+export default AppSwitcher;
 
 AppSwitcher.propTypes = {
-    currentApp: PropTypes.string,
-    globalNav: PropTypes.shape({
-        [PropTypes.string]: PropTypes.any
-    })
+    currentApp: PropTypes.string
 };

src/js/App/Sidenav/AppSwitcher.test.js

@@ -1,12 +1,25 @@
 import React from 'react';
 import toJson from 'enzyme-to-json';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
 import AppSwitcher from './AppSwitcher';
 
 describe('AppSwitcher', () => {
-
+    let initialState;
+    let mockStore;
+    beforeEach(() =>{
+        mockStore = configureStore();
+        initialState = ({ chrome: {
+            activeTechnology: 'someTechnology',
+            activeLocation: 'someLocation'
+        } });
+    });
     it('should render correctly', () =>{
-        const wrapper = shallow(<AppSwitcher currentApp='Red Hat Insights'/>);
-        expect(toJson(wrapper)).toMatchSnapshot();
+        const store = mockStore(initialState);
+        const wrapper = mount(<Provider store={store}>
+            <AppSwitcher currentApp='Red Hat Insights'/>
+        </Provider>);
+        expect(toJson(wrapper, { mode: 'deep' })).toMatchSnapshot();
     });
 });

src/js/App/Sidenav/Loader.js

@@ -0,0 +1,26 @@
+import React, { Fragment } from 'react';
+import { Skeleton, SkeletonSize } from '@redhat-cloud-services/frontend-components/components/cjs/Skeleton';
+import { Nav } from '@patternfly/react-core/dist/js/components/Nav/Nav';
+import  { NavList } from '@patternfly/react-core/dist/js/components/Nav/NavList';
+import NavigationItem from './NavigationItem';
+
+const NavLoader = () => (
+    <Fragment>
+        <section className={'ins-c-app-switcher--loading'}>
+            <Skeleton size={SkeletonSize.lg} className="ins-m-dark"/>
+        </section>
+        <Nav aria-label="Insights Global Navigation" data-ouia-safe="false">
+            <NavList>
+                {[...new Array(4)].map((_i, key) => (
+                    <NavigationItem
+                        key={key}
+                        title={<a className="ins-c-skeleton__link">
+                            <Skeleton size={SkeletonSize.lg} className="ins-m-dark"/>
+                        </a>}
+                    />))}
+            </NavList>
+        </Nav>
+    </Fragment>
+);
+
+export default NavLoader;

src/js/App/Sidenav/Navigation.js

@@ -7,7 +7,6 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { appNavClick, clearActive } from '../../redux/actions';
 import NavigationItem from './NavigationItem';
-import { Skeleton, SkeletonSize } from '@redhat-cloud-services/frontend-components/components/cjs/Skeleton';
 
 import './Navigation.scss';
 
@@ -94,7 +93,7 @@ export class Navigation extends Component {
             <Nav onSelect={this.onSelect} aria-label="Insights Global Navigation" data-ouia-safe="true">
                 <NavList>
                     {
-                        settings ? settings.map((item, key) => {
+                        settings?.map((item, key) => {
                             if (!(item.disabled_on_stable && window.location.pathname.indexOf('/beta') === -1)) {
                                 if (item.subItems) {
                                     return <NavExpandable
@@ -135,14 +134,7 @@ export class Navigation extends Component {
                                     />;
                                 }
                             }
-                        }) : [...new Array(4)].map((_i, key) => (
-                            <NavigationItem
-                                key={key}
-                                title={<a className="ins-c-skeleton__link">
-                                    <Skeleton size={SkeletonSize.lg} className="ins-m-dark"/>
-                                </a>}
-                            />
-                        ))
+                        })
                     }
                     { activeLocation === 'insights' &&
                         Object.entries(insightsLinks).map(