Merge branch 'aws-amplify:main' into main

generatePathMap.cjs.js

@@ -114,19 +114,6 @@ function generatePathMap(
       } else if (route.startsWith('/start')) {
         filterKind = 'integration';
       }
-
-      if (filterKind !== '') {
-        const aOrAn = 'aeiou'.includes(filterKind[0]) ? 'an' : 'a';
-        pathMap[route] = {
-          page: '/ChooseFilterPage',
-          query: {
-            address: route,
-            directoryPath: '/ChooseFilterPage',
-            filterKind: filterKind,
-            message: `Choose ${aOrAn} ${filterKind}:`
-          }
-        };
-      }
     }
 
     if (items) {
@@ -196,17 +183,6 @@ function generatePathMap(
         page: `${route}/q/${routeType}/[${routeType}]`
       };
     });
-    const aOrAn = 'aeiou'.includes(routeType[0]) ? 'an' : 'a';
-    pathMap[route] = {
-      page: '/ChooseFilterPage',
-      query: {
-        address: route,
-        directoryPath: '/ChooseFilterPage',
-        filterKind: routeType,
-        filters: filters,
-        message: `Choose ${aOrAn} ${routeType}:`
-      }
-    };
   }
   return pathMap;
 }

next.config.mjs

@@ -68,9 +68,11 @@ export default async (phase, { defaultConfig }) => {
       // !! WARN !!
       ignoreBuildErrors: true
     },
-    exportPathMap,
     trailingSlash: true,
-    transpilePackages: ['@algolia/autocomplete-shared', 'next-image-export-optimizer'],
+    transpilePackages: [
+      '@algolia/autocomplete-shared',
+      'next-image-export-optimizer'
+    ],
     // eslint-disable-next-line @typescript-eslint/require-await
     async headers() {
       return [

package.json

@@ -128,7 +128,11 @@
     ],
     "setupFilesAfterEnv": [
       "<rootDir>/jest.setup.js"
-    ]
+    ],
+    "moduleNameMapper": {
+      "\\.(css|less|scss)$": "<rootDir>/src/__mocks__/styleMock.js"
+    },
+    "transformIgnorePatterns": []
   },
   "scripts": {
     "clean": "rm -rf node_modules yarn.lock",

src/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

src/components/Accordion/index.tsx

@@ -20,6 +20,11 @@ const Accordion: React.FC<AccordionProps> = ({
   const [expandedHeight, setExpandedHeight] = useState(0);
   const docsExpander = useRef<HTMLElement>(null);
 
+  let pathName = '';
+  if (typeof window !== 'undefined') {
+    pathName = window.location.pathname;
+  }
+
   useEffect(() => {
     const expander = docsExpander.current;
 
@@ -62,7 +67,7 @@ const Accordion: React.FC<AccordionProps> = ({
 
   const anchor = createElement(
     'a',
-    { href: window.location.pathname + '#' + headingId },
+    { href: pathName + '#' + headingId },
     expanderTitle
   );
 

src/pages/ChooseFilterPage.tsx → src/components/ChooseFilterPage/index.tsx

@@ -1,19 +1,19 @@
-import Layout from '../components/Layout';
+import Layout from '../Layout';
 import styled from '@emotion/styled';
 import { Grid } from '@theme-ui/components';
 import { useEffect, useRef, useState } from 'react';
-import MetaContent from '../components/Page/metaContent';
-import { Container } from '../components/Container';
-import { Card, CardDetail, CardGraphic } from '../components/Card';
+import MetaContent from '../Page/metaContent';
+import { Container } from '../Container';
+import { Card, CardDetail, CardGraphic } from '../Card';
 import {
   filterOptionsByName,
   filterMetadataByOption
-} from '../utils/filter-data';
+} from '../../utils/filter-data';
 import {
   getChapterDirectory,
   getProductDirectory,
   isProductRoot
-} from '../utils/getLocalDirectory';
+} from '../../utils/getLocalDirectory';
 
 const H3 = styled.h3`
   margin-top: 0.375rem;
@@ -34,7 +34,6 @@ function ChooseFilterPage({
   // "url" cannot be a CFP prop for legacy reasons
   let url = address;
   const [_, setHref] = useState('https://docs.amplify.aws');
-  const [menuIsOpen, setMenuIsOpen] = useState(false);
   const footerRef = useRef(null);
 
   useEffect(() => {
@@ -125,7 +124,4 @@ function ChooseFilterPage({
   );
 }
 
-ChooseFilterPage.getInitialProps = (initialProps) => {
-  return initialProps.query;
-};
 export default ChooseFilterPage;

src/components/FeaturesGrid/__tests__/FeaturesGrid.test.tsx

@@ -2,6 +2,17 @@ import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import FeaturesGrid from '../index';
 
+jest.mock('next/router', () => ({
+  useRouter() {
+    return {
+      route: '/',
+      pathname: '',
+      query: '',
+      asPath: ''
+    };
+  }
+}));
+
 describe('FeaturesGrid', () => {
   const featureSections = [
     'Authentication',

src/components/FilterChildren/index.tsx

@@ -1,9 +1,8 @@
 import { useRouter } from 'next/router';
 
-export default function FilterChildren({ children }) {
+export default function FilterChildren({ children, filterKey = '' }) {
   const router = useRouter();
 
-  let filterKey = '';
   if ('platform' in router.query) {
     filterKey = router.query.platform as string;
   } else if ('integration' in router.query) {

src/components/Fragments/index.tsx

@@ -7,8 +7,10 @@ export default function Fragments({ fragments }) {
   let frontmatter: MdxFrontmatterType;
 
   const { state, dispatch } = useLastUpdatedDatesContext();
+  let filterKey = '';
 
   for (const key in fragments) {
+    if (!filterKey) filterKey = key;
     const fragment = fragments[key]([]);
     frontmatter = fragment.props.frontmatter;
 
@@ -29,5 +31,5 @@ export default function Fragments({ fragments }) {
     children.push(<div key={key}>{fragment}</div>);
   }
 
-  return <FilterChildren>{children}</FilterChildren>;
+  return <FilterChildren filterKey={filterKey}>{children}</FilterChildren>;
 }

src/components/InternalLink/__tests__/InternalLink.test.tsx

@@ -1,28 +1,43 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import InternalLink from '../index';
+import { PageContext } from '../../Page';
 
-const localStorageMock = jest.spyOn(
-  require('../../../utils/parseLocalStorage'),
-  'parseLocalStorage'
-);
-localStorageMock.mockReturnValue({
+const pageContext = {
   platform: 'js',
   integration: 'js',
   framework: 'js'
-});
+};
 
+jest.mock('next/router', () => ({
+  useRouter() {
+    return {
+      route: '/',
+      pathname: '',
+      query: '',
+      asPath: ''
+    };
+  }
+}));
 describe('InternalLink', () => {
   it('should render the InternalLink component', async () => {
-    render(<InternalLink href="/lib/auth">Internal Link</InternalLink>);
+    render(
+      <PageContext.Provider value={pageContext}>
+        <InternalLink href="/lib/auth">Internal Link</InternalLink>
+      </PageContext.Provider>
+    );
 
     const linkNode = await screen.findByText('Internal Link');
     expect(linkNode).toBeInTheDocument();
   });
 
   it('should add the platform to the link', async () => {
     const href = '/lib/libFile';
-    render(<InternalLink href={href}>Internal Link</InternalLink>);
+    render(
+      <PageContext.Provider value={pageContext}>
+        <InternalLink href={href}>Internal Link</InternalLink>
+      </PageContext.Provider>
+    );
 
     const linkNode = await screen.findByText('Internal Link');
     const linkHref = linkNode.href;
@@ -31,7 +46,11 @@ describe('InternalLink', () => {
 
   it('should add the integration to the link', async () => {
     const href = '/start/startFile';
-    render(<InternalLink href={href}>Internal Link</InternalLink>);
+    render(
+      <PageContext.Provider value={pageContext}>
+        <InternalLink href={href}>Internal Link</InternalLink>
+      </PageContext.Provider>
+    );
 
     const linkNode = await screen.findByText('Internal Link');
     const linkHref = linkNode.href;
@@ -40,7 +59,11 @@ describe('InternalLink', () => {
 
   it('should add the framework to the link', async () => {
     const href = '/ui/uiFile';
-    render(<InternalLink href={href}>Internal Link</InternalLink>);
+    render(
+      <PageContext.Provider value={pageContext}>
+        <InternalLink href={href}>Internal Link</InternalLink>
+      </PageContext.Provider>
+    );
 
     const linkNode = await screen.findByText('Internal Link');
     const linkHref = linkNode.href;
@@ -49,7 +72,11 @@ describe('InternalLink', () => {
 
   it('should not change the href if the platform already exists', async () => {
     const href = '/lib/libFile/q/platform/js';
-    render(<InternalLink href={href}>Internal Link</InternalLink>);
+    render(
+      <PageContext.Provider value={pageContext}>
+        <InternalLink href={href}>Internal Link</InternalLink>
+      </PageContext.Provider>
+    );
 
     const expectedHref = `http://localhost${href}`;
     const linkNode = await screen.findByText('Internal Link');

src/components/InternalLink/index.tsx

@@ -1,8 +1,12 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { parseLocalStorage } from '../../utils/parseLocalStorage';
+import { useContext } from 'react';
+import { PageContext } from '../Page';
 
 export default function InternalLink({ href, children }) {
+  const router = useRouter();
+  const filterKeys = useContext(PageContext);
+
   let filterKind = '';
   if (href.startsWith('/cli') || href.startsWith('/console')) {
     filterKind = '';
@@ -20,7 +24,6 @@ export default function InternalLink({ href, children }) {
 
   if (filterKind != '') {
     if (!href.includes(`/q/${filterKind}/`)) {
-      const filterKeys = parseLocalStorage('filterKeys', {});
       if (filterKind in filterKeys) {
         const filterKey = filterKeys[filterKind];
         if (href.includes('#')) {
@@ -34,7 +37,6 @@ export default function InternalLink({ href, children }) {
   }
 
   if (href[0] === '#') {
-    const router = useRouter();
     const prevPath = router.asPath.split('#')[0];
     href = prevPath + href;
   }

src/components/Layout/index.tsx

@@ -3,7 +3,6 @@ import SecondaryNav from '../SecondaryNav/index';
 import Footer from '../Footer/index';
 import { LayoutStyle } from './styles';
 import { Container } from '../Container';
-import { useRouter } from 'next/router';
 import { GlobalNav, NavMenuItem } from '../GlobalNav/GlobalNav';
 import {
   LEFT_NAV_LINKS,
@@ -26,9 +25,6 @@ const Layout = forwardRef(function Layout(
   },
   footerRef
 ) {
-  const router = useRouter();
-  if (!router.isReady) return <></>;
-
   const filterMetadata = filterKey
     ? filterMetadataByOption[filterKey].label
     : '';

src/components/Menu/Directory/__tests__/Directory.test.tsx

@@ -3,6 +3,17 @@ import { render, screen } from '@testing-library/react';
 import Directory from '../index';
 import directory from '../../../../directory/directory.mjs';
 
+jest.mock('next/router', () => ({
+  useRouter() {
+    return {
+      route: '/',
+      pathname: '',
+      query: '',
+      asPath: ''
+    };
+  }
+}));
+
 describe('Directory', () => {
   const directoryKeys = Object.keys(directory);
 

src/components/Menu/FilterSelect/__tests__/FilterSelect.test.tsx

@@ -6,6 +6,17 @@ import {
   filterMetadataByOption
 } from '../../../../utils/filter-data';
 
+jest.mock('next/router', () => ({
+  useRouter() {
+    return {
+      route: '/',
+      pathname: '',
+      query: '',
+      asPath: ''
+    };
+  }
+}));
+
 describe('FilterSelect', () => {
   describe('General Behavior', () => {
     const filterKind = 'platform';

src/components/Menu/FilterSelect/index.tsx

@@ -118,7 +118,7 @@ export default class FilterSelect extends React.Component<
     }
 
     return (
-      <div className="filter-row">
+      <div className="filter-row" key={name}>
         <img
           alt=""
           src={filterMetadataByOption[name]?.graphicURI}

src/components/Menu/__tests__/Menu.test.tsx

@@ -20,6 +20,17 @@ Object.defineProperty(window, 'matchMedia', {
 
 const directoryKeys = Object.keys(directory);
 
+jest.mock('next/router', () => ({
+  useRouter() {
+    return {
+      route: '/',
+      pathname: '',
+      query: '',
+      asPath: ''
+    };
+  }
+}));
+
 describe('Menu', () => {
   directoryKeys.forEach((directoryKey) => {
     it(`should render the Menu component with the ${directoryKey} key`, async () => {

src/components/Menu/index.tsx

@@ -36,7 +36,7 @@ function Menu(props: MenuProps, ref) {
   const [isOpen, setIsOpen] = useState(true);
   const { state } = useLastUpdatedDatesContext();
   const menuRef = useRef<HTMLElement>(null);
-  const [onDesktop, setOnDesktop] = useState(false);
+  const [onDesktop, setOnDesktop] = useState(true);
 
   useEffect(() => {
     const MQDesktopJS = MQDesktop.substring(6);

src/components/NextPrevious/styles.tsx

@@ -40,7 +40,7 @@ export const NextPreviousLinkStyle = styled.a`
     width: 0.5rem;
   }
 
-  &:first-child {
+  &:first-of-type {
     img {
       margin-left: 0;
       margin-right: 1rem;