Focus new content on route changes

package.json

@@ -18,22 +18,22 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@types/enzyme": "^3.9.0",
+    "@types/enzyme": "^3.10.2",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/jest": "^24.0.9",
-    "@types/node": "^12.0.4",
-    "@types/react": "^16.8.6",
+    "@types/node": "^12.6.2",
+    "@types/react": "^16.8.23",
     "@types/react-dom": "^16.8.2",
     "@types/react-router-dom": "^4.3.4",
     "@types/victory": "^31.0.14",
-    "@types/webpack": "^4.4.34",
-    "css-loader": "^2.1.1",
+    "@types/webpack": "^4.4.35",
+    "css-loader": "^3.0.0",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.7.0",
     "enzyme-to-json": "^3.3.5",
     "file-loader": "^4.0.0",
     "html-webpack-plugin": "^3.2.0",
-    "imagemin": "^6.0.0",
+    "imagemin": "^7.0.0",
     "jest": "^24.1.0",
     "mini-css-extract-plugin": "^0.7.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
@@ -46,25 +46,27 @@
     "regenerator-runtime": "^0.13.1",
     "rimraf": "^2.6.2",
     "style-loader": "^0.23.1",
-    "svg-url-loader": "^2.3.2",
+    "svg-url-loader": "^3.0.0",
     "ts-jest": "^24.0.0",
     "ts-loader": "^6.0.2",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
     "tslint": "^5.13.1",
     "tslint-config-prettier": "^1.18.0",
     "tslint-eslint-rules": "^5.4.0",
     "tslint-react": "^4.0.0",
-    "typescript": "^3.3.3333",
+    "typescript": "^3.5.3",
     "url-loader": "^2.0.0",
-    "webpack": "^4.35.2",
+    "webpack": "^4.35.3",
     "webpack-bundle-analyzer": "^3.0.3",
-    "webpack-cli": "^3.3.5",
+    "webpack-cli": "^3.3.6",
     "webpack-dev-server": "^3.7.2",
     "webpack-merge": "^4.1.4"
   },
   "dependencies": {
-    "@patternfly/react-core": "^3.58.1",
-    "@patternfly/react-icons": "^3.10.9",
+    "@patternfly/react-core": "^3.77.2",
+    "@patternfly/react-icons": "^3.10.10",
+    "@patternfly/react-styles": "^3.4.6",
+    "react-document-title": "^2.0.3",
     "react-router-dom": "^5.0.1"
   }
 }

src/app/AppLayout/AppLayout.tsx

@@ -12,6 +12,7 @@ import {
   PageSidebar,
   SkipToContent
 } from '@patternfly/react-core';
+import { routes } from '@app/routes';
 import '@app/app.css';
 
 interface IAppLayout {
@@ -49,28 +50,13 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({children}) => {
   const Navigation = (
     <Nav id="nav-primary-simple">
       <NavList id="nav-list-simple" variant={NavVariants.simple}>
-        <NavItem
-          id="dashboard-link"
-          itemId={'dashboard'}>
-          <NavLink
-            to="/dashboard"
-            activeClassName="pf-m-current">Dashboard</NavLink>
-        </NavItem>
-        <NavItem
-          id="support-link"
-          itemId={'support'}>
-          <NavLink
-            to="/support"
-            activeClassName="pf-m-current">Support</NavLink>
-        </NavItem>
-        <NavItemSeparator />
-        <NavItem
-          id="404-link"
-          itemId={'404'}>
-          <NavLink
-            to="/asdf"
-            activeClassName="pf-m-current">Bad Route</NavLink>
-        </NavItem>
+        {routes.map((route, idx) => {
+          return (
+            <NavItem key={`${route.label}-${idx}`} id={`${route.label}-${idx}`}>
+              <NavLink to={route.path} activeClassName="pf-m-current">{route.label}</NavLink>
+            </NavItem>
+          );
+        })}
       </NavList>
     </Nav>
   );
@@ -80,12 +66,13 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({children}) => {
       isNavOpen={isMobileView ? isNavOpenMobile : isNavOpen} />
   );
   const PageSkipToContent = (
-    <SkipToContent href="#main-content-page-layout-default-nav">
+    <SkipToContent href="#primary-app-container">
       Skip to Content
     </SkipToContent>
   );
   return (
     <Page
+      mainContainerId="primary-app-container"
       header={Header}
       sidebar={Sidebar}
       onPageResize={onPageResize}

src/app/Dashboard/Dashboard.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { PageSection, Title } from '@patternfly/react-core';
 
-const Dashboard: React.FunctionComponent = () => {
+const Dashboard: React.FunctionComponent<any> = (props) => {
   return (
     <PageSection>
-      <Title size="lg">Dashboard</Title>
+      <Title size="lg">Dashboard Page Title</Title>
     </PageSection>
   );
 }

src/app/DynamicImport.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { accessibleRouteChangeHandler } from '@app/utils/utils';
 
 interface IDynamicImport {
   load: () => Promise<any>;
@@ -11,9 +12,14 @@ class DynamicImport extends React.Component<IDynamicImport> {
   };
   public componentDidMount() {
     this.props.load().then(component => {
-      this.setState({
-        component: component.default ? component.default : component
-      });
+      if (component) {
+        this.setState({
+          component: component.default ? component.default : component
+        });
+      }
+    })
+    .then(() => {
+      accessibleRouteChangeHandler();
     });
   }
   public render() {

src/app/Support/Support.tsx

@@ -11,7 +11,7 @@ import {
   EmptyStateSecondaryActions
 } from '@patternfly/react-core';
 
-const Support: React.FunctionComponent = () => {
+const Support: React.FunctionComponent<any> = (props) => {
   return (
     <PageSection>
       <EmptyState variant={EmptyStateVariant.full}>

src/app/__snapshots__/app.test.tsx.snap

@@ -1,9 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`App tests should render default App component 1`] = `
-<BrowserRouter>
-  <AppLayout>
-    <AppRoutes />
-  </AppLayout>
-</BrowserRouter>
+<SideEffect(DocumentTitle)
+  title="Patternfly React Seed | App Title"
+>
+  <BrowserRouter>
+    <AppLayout>
+      <AppRoutes />
+    </AppLayout>
+  </BrowserRouter>
+</SideEffect(DocumentTitle)>
 `;

src/app/index.tsx

@@ -3,15 +3,18 @@ import '@patternfly/react-core/dist/styles/base.css';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { AppLayout } from '@app/AppLayout/AppLayout';
 import { AppRoutes } from '@app/routes';
+import DocumentTitle from 'react-document-title';
 import '@app/app.css';
 
 const App: React.FunctionComponent = () => {
   return (
-    <Router>
-      <AppLayout>
-        <AppRoutes />
-      </AppLayout>
-    </Router>
+    <DocumentTitle title="Patternfly React Seed | App Title">
+      <Router>
+        <AppLayout>
+          <AppRoutes />
+        </AppLayout>
+      </Router>
+    </DocumentTitle>
   );
 };
 

src/app/routes.tsx

@@ -1,28 +1,71 @@
 import * as React from 'react';
 import { Redirect, Route, RouteComponentProps, Switch } from 'react-router-dom';
+import { Alert, PageSection } from '@patternfly/react-core';
 import { DynamicImport } from '@app/DynamicImport';
+import { accessibleRouteChangeHandler } from '@app/utils/utils';
 import { Dashboard } from '@app/Dashboard/Dashboard';
 import { NotFound } from '@app/NotFound/NotFound';
+import DocumentTitle from 'react-document-title';
 
 const getSupportModuleAsync = () => {
   return () => import(/* webpackChunkName: 'support' */ '@app/Support/Support');
 };
-const Support = () => {
+
+const Support = (routeProps: RouteComponentProps) => {
   return (
     <DynamicImport load={getSupportModuleAsync()}>
       {(Component: any) => {
-        return Component === null ? <p>loading</p> : <Component.Support />;
+          let loadedComponent: any;
+          if (Component === null) {
+            loadedComponent = (
+              <PageSection aria-label="Loading Content Container">
+                <div className="pf-l-bullseye">
+                  <Alert title="Loading" className="pf-l-bullseye__item" />
+                </div>
+              </PageSection>
+            );
+          } else {
+            loadedComponent = <Component.Support {...routeProps} />;
+          }
+          return loadedComponent
       }}
     </DynamicImport>
   );
 };
 
+const RouteWithTitleUpdates = ({
+  component: Component,
+  isAsync = false,
+  title,
+  ...rest
+}) => {
+  function routeWithTitle(routeProps: RouteComponentProps) {
+    return (
+      <DocumentTitle title={title}>
+        <Component {...routeProps} />
+      </DocumentTitle>
+    )
+  }
+
+  React.useEffect(() => {
+    if (!isAsync) {
+      accessibleRouteChangeHandler()
+    }
+  }, []);
+
+  return (
+    <Route {...rest} render={routeWithTitle} />
+  );
+}
+
 export interface IAppRoute {
   label: string;
   component: React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>;
   icon: any;
   exact?: boolean;
   path: string;
+  title: string;
+  isAsync?: boolean;
 }
 
 const routes: IAppRoute[] = [
@@ -31,24 +74,33 @@ const routes: IAppRoute[] = [
     exact: true,
     icon: null,
     label: 'Dashboard',
-    path: '/dashboard'
+    path: '/dashboard',
+    title: 'Main Dashboard Title'
   },
   {
     component: Support,
     exact: true,
     icon: null,
+    isAsync: true,
     label: 'Support',
-    path: '/support'
+    path: '/support',
+    title: 'Support Page Title'
   }
 ];
 
 const AppRoutes = () => (
   <Switch>
-    {routes.map(({ path, exact, component }, idx) => (
-      <Route path={path} exact={exact} component={component} key={idx} />
+    {routes.map(({ path, exact, component, title, isAsync }, idx) => (
+      <RouteWithTitleUpdates
+        path={path}
+        exact={exact}
+        component={component}
+        key={idx}
+        title={title}
+        isAsync={isAsync} />
     ))}
     <Redirect exact={true} from="/" to="/dashboard" />
-    <Route component={NotFound} />
+    <RouteWithTitleUpdates component={NotFound} title={'404 Page Not Found'} />
   </Switch>
 );
 

src/app/utils/utils.ts

@@ -0,0 +1,6 @@
+export function accessibleRouteChangeHandler() {
+  const mainContainer = document.getElementById('primary-app-container');
+  if (mainContainer) {
+    mainContainer.focus();
+  }
+}

src/typings.d.ts

@@ -10,3 +10,4 @@ declare module '*.m4a';
 declare module '*.rdf';
 declare module '*.ttl';
 declare module '*.pdf';
+declare module 'react-document-title';

webpack.common.js

@@ -93,7 +93,8 @@ module.exports = {
           path.resolve(__dirname, 'node_modules/patternfly'),
           path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets'),
           path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/assets/images'),
-          path.resolve(__dirname, 'node_modules/@patternfly/react-styles/css/assets/images')
+          path.resolve(__dirname, 'node_modules/@patternfly/react-styles/css/assets/images'),
+          path.resolve(__dirname, 'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css/assets/images')
         ],
         use: [
           {

webpack.dev.js

@@ -29,7 +29,8 @@ module.exports = merge(common, {
           path.resolve(__dirname, 'node_modules/@patternfly/patternfly'),
           path.resolve(__dirname, 'node_modules/@patternfly/react-styles/css'),
           path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/base.css'),
-          path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/esm/@patternfly/patternfly')
+          path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/esm/@patternfly/patternfly'),
+          path.resolve(__dirname, 'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css')
         ],
         use: ["style-loader", "css-loader"]
       }

webpack.prod.js

@@ -28,6 +28,7 @@ module.exports = merge(common, {
           path.resolve(__dirname, 'node_modules/@patternfly/patternfly'),
           path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/base.css'),
           path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/esm/@patternfly/patternfly'),
+          path.resolve(__dirname, 'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css'),
           path.resolve(__dirname, 'node_modules/@patternfly/react-styles/css')
         ],
         use: [MiniCssExtractPlugin.loader, 'css-loader']