fix: added IE11 redirect (#558)

* Add header no nav, start update browser page

* Add user agent redirect, static version of page

* Only redirect root URL, add styling

* Cleanup

* Add tests

* Add axe test

next.config.js

@@ -42,6 +42,22 @@ module.exports = withKeystone(
         },
       ]
     },
+    async redirects() {
+      return [
+        {
+          source: '/',
+          has: [
+            {
+              type: 'header',
+              key: 'User-Agent',
+              value: '(.*Trident.*)',
+            },
+          ],
+          permanent: false,
+          destination: '/update-browser',
+        },
+      ]
+    },
     async rewrites() {
       return {
         beforeFiles: [

src/__tests__/pages/update-browser.test.tsx

@@ -0,0 +1,45 @@
+/**
+ * @jest-environment jsdom
+ */
+import { render, screen, act } from '@testing-library/react'
+import { axe } from 'jest-axe'
+
+import UpdateBrowser from 'pages/update-browser'
+
+describe('Update browser page', () => {
+  const MS_EDGE_DOWNLOAD = 'https://www.microsoft.com/edge'
+  const GOOGLE_CHROME_DOWNLOAD = 'https://www.google.com/chrome'
+  const FIREFOX_DOWNLOAD = 'https://www.mozilla.org/firefox'
+
+  beforeEach(() => {
+    render(<UpdateBrowser />)
+  })
+
+  it('renders the update browser page,', () => {
+    expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent(
+      'I’m sorry, Dave. I’m afraid you can’t use that outdated browser.'
+    )
+    expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent(
+      'For a better experience, please keep your internet browser up to date or choose from one of the options below:'
+    )
+
+    expect(
+      screen.getByRole('link', { name: 'Download MS Edge' })
+    ).toHaveAttribute('href', MS_EDGE_DOWNLOAD)
+    expect(
+      screen.getByRole('link', { name: 'Download Google Chrome' })
+    ).toHaveAttribute('href', GOOGLE_CHROME_DOWNLOAD)
+    expect(
+      screen.getByRole('link', { name: 'Download Firefox' })
+    ).toHaveAttribute('href', FIREFOX_DOWNLOAD)
+  })
+
+  it('has no a11y violations', async () => {
+    // Bug with NextJS Link + axe :(
+    // https://github.com/nickcolley/jest-axe/issues/95#issuecomment-758921334
+    await act(async () => {
+      const { container } = render(<UpdateBrowser />)
+      expect(await axe(container)).toHaveNoViolations()
+    })
+  })
+})

src/components/Header/Header.stories.tsx

@@ -1,10 +1,13 @@
 import React from 'react'
 import { Meta } from '@storybook/react'
 import Header from './Header'
+import HeaderWithoutNav from './HeaderWithoutNav'
 
 export default {
   title: 'Layout/Header',
   component: Header,
 } as Meta
 
 export const DefaultHeader = () => <Header />
+
+export const NoNavHeader = () => <HeaderWithoutNav />

src/components/Header/HeaderWithoutNav.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Header as USWDSHeader, Title } from '@trussworks/react-uswds'
+
+import styles from './Header.module.scss'
+
+import Logo from 'components/Logo/Logo'
+import LinkTo from 'components/util/LinkTo/LinkTo'
+
+const HeaderWithoutNav = () => {
+  return (
+    <div>
+      <USWDSHeader basic className={styles.header}>
+        <div className="usa-nav-container">
+          <div className="usa-navbar">
+            <Title>
+              <LinkTo href="/" title="USSF Portal Home">
+                <Logo darkBg />
+              </LinkTo>
+            </Title>
+          </div>
+        </div>
+      </USWDSHeader>
+    </div>
+  )
+}
+
+export default HeaderWithoutNav

src/layout/Beta/ErrorLayout/ErrorLayout.module.scss

@@ -86,4 +86,16 @@ $hero-image: url('/assets/images/hero.jpeg');
       margin: 21px 0;
     }
   }
+
+  &.errorContainerIECompat {
+    display: block;
+
+    main {
+      display: block;
+    }
+
+    footer :global(.grid-row .grid-row) {
+      display: block;
+    }
+  }
 }

src/layout/Beta/ErrorLayout/ErrorLayout.test.tsx

@@ -0,0 +1,75 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+
+import ErrorLayout, { withErrorLayout } from './ErrorLayout'
+
+jest.mock('next/router', () => ({
+  useRouter: jest.fn().mockReturnValue({
+    route: '',
+    pathname: '',
+    query: '',
+    asPath: '',
+  }),
+}))
+
+describe('ErrorLayout component', () => {
+  describe('default props', () => {
+    beforeEach(() => {
+      render(
+        <ErrorLayout>
+          <h2>Beta Test Page</h2>
+        </ErrorLayout>
+      )
+    })
+
+    it('renders the children', () => {
+      expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument()
+    })
+
+    it('renders a skip nav link', () => {
+      expect(
+        screen.getByRole('link', { name: 'Skip to main content' })
+      ).toHaveAttribute('href', '#main-content')
+
+      expect(screen.getByRole('main')).toHaveAttribute('id', 'main-content')
+    })
+
+    it('renders common layout elements', () => {
+      expect(screen.getAllByRole('banner')).toHaveLength(2) // Gov banner & site header
+      expect(screen.getAllByRole('navigation')).toHaveLength(2) // header, footer
+    })
+  })
+
+  describe('if hideNav is true', () => {
+    beforeEach(() => {
+      render(
+        <ErrorLayout hideNav={true}>
+          <h2>Beta Test Page</h2>
+        </ErrorLayout>
+      )
+    })
+
+    it('renders the header without navigation', () => {
+      expect(screen.getAllByRole('navigation')).toHaveLength(1) // footer
+    })
+  })
+})
+
+describe('withErrorLayout HOC', () => {
+  it('renders children inside of the error layout', () => {
+    const TestPage = () => <div>My page</div>
+    render(withErrorLayout(<TestPage />))
+    expect(screen.getByText('My page')).toBeInTheDocument()
+    expect(screen.getAllByRole('navigation')).toHaveLength(2) // header, footer
+  })
+
+  it('renders children inside of the error layout with no header nav', () => {
+    const TestPage = () => <div>My page</div>
+    render(withErrorLayout(<TestPage />, true))
+    expect(screen.getByText('My page')).toBeInTheDocument()
+    expect(screen.getAllByRole('navigation')).toHaveLength(1) // footer
+  })
+})

src/layout/Beta/ErrorLayout/ErrorLayout.tsx

@@ -1,20 +1,35 @@
 import React from 'react'
 import { GovBanner } from '@trussworks/react-uswds'
+import classnames from 'classnames'
 
 import styles from './ErrorLayout.module.scss'
 
 import Header from 'components/Header/Header'
+import HeaderWithoutNav from 'components/Header/HeaderWithoutNav'
 import Footer from 'components/Footer/Footer'
 
-const ErrorLayout = ({ children }: { children: React.ReactNode }) => {
+const ErrorLayout = ({
+  hideNav = false,
+  ieCompat = false,
+  children,
+}: {
+  hideNav?: boolean
+  ieCompat?: boolean
+  children: React.ReactNode
+}) => {
+  const containerClasses = classnames(styles.errorContainer, 'sfds', {
+    [styles.errorContainerIECompat]: ieCompat,
+  })
+
   return (
     <>
       <a className="usa-skipnav" href="#main-content">
         Skip to main content
       </a>
-      <div className={`${styles.errorContainer} sfds`}>
+      <div className={containerClasses}>
         <GovBanner tld=".mil" />
-        <Header />
+        {hideNav ? <HeaderWithoutNav /> : <Header />}
+
         <main id="main-content">
           {/* PAGE CONTENT */}
           {children}
@@ -27,6 +42,12 @@ const ErrorLayout = ({ children }: { children: React.ReactNode }) => {
 
 export default ErrorLayout
 
-export const withErrorLayout = (page: React.ReactNode) => (
-  <ErrorLayout>{page}</ErrorLayout>
+export const withErrorLayout = (
+  page: React.ReactNode,
+  hideNav?: boolean,
+  ieCompat?: boolean
+) => (
+  <ErrorLayout hideNav={hideNav} ieCompat={ieCompat}>
+    {page}
+  </ErrorLayout>
 )

src/pages/update-browser.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import { GridContainer } from '@trussworks/react-uswds'
+
+import { withErrorLayout } from 'layout/Beta/ErrorLayout/ErrorLayout'
+import Logo from 'components/Logo/Logo'
+import LinkTo from 'components/util/LinkTo/LinkTo'
+
+import styles from 'styles/pages/updateBrowser.module.scss'
+
+export default function UpdateBrowser() {
+  const MS_EDGE_DOWNLOAD = 'https://www.microsoft.com/edge'
+  const GOOGLE_CHROME_DOWNLOAD = 'https://www.google.com/chrome'
+  const FIREFOX_DOWNLOAD = 'https://www.mozilla.org/firefox'
+
+  return (
+    <>
+      <GridContainer containerSize="widescreen">
+        <section className={styles.updateBrowser}>
+          <Logo noText />
+
+          <h2>
+            I’m sorry, Dave. I’m afraid you can’t use that outdated browser.
+          </h2>
+
+          <h3>
+            For a better experience, please keep your internet browser up to
+            date or choose from one of the options below:
+          </h3>
+
+          <ul className={styles.browserList}>
+            <li>
+              <img
+                src="/assets/images/logo_msedge.png"
+                alt="Microsoft Edge logo"
+                width={150}
+              />
+              <LinkTo
+                href={MS_EDGE_DOWNLOAD}
+                className="usa-button usa-button--accent-cool">
+                Download MS Edge
+              </LinkTo>
+            </li>
+            <li>
+              <img
+                src="/assets/images/logo_googlechrome.png"
+                alt="Google Chrome logo"
+                width={150}
+              />
+              <LinkTo
+                href={GOOGLE_CHROME_DOWNLOAD}
+                className="usa-button usa-button--accent-cool">
+                Download Google Chrome
+              </LinkTo>
+            </li>
+            <li>
+              <img
+                src="/assets/images/logo_firefox.png"
+                alt="Firefox logo"
+                width={150}
+              />
+              <LinkTo
+                href={FIREFOX_DOWNLOAD}
+                className="usa-button usa-button--accent-cool">
+                Download Firefox
+              </LinkTo>
+            </li>
+          </ul>
+        </section>
+      </GridContainer>
+    </>
+  )
+}
+
+UpdateBrowser.getLayout = (page: React.ReactNode) =>
+  withErrorLayout(page, true, true)
+
+export async function getStaticProps() {
+  // no op, forces the page to be static generated
+  return {
+    props: {},
+  }
+}

src/styles/pages/updateBrowser.module.scss

@@ -0,0 +1,19 @@
+.browserList {
+  list-style: none;
+  padding: 0;
+  margin-top: 68px;
+
+  > li {
+    display: inline-block;
+
+    img {
+      display: block;
+      margin: 0 auto 20px;
+      width: 150px;
+    }
+  }
+
+  > li + li {
+    margin-left: 4rem;
+  }
+}