Merge branch 'aws-amplify:main' into main

.github/workflows/check_for_new_fragments.yml

@@ -0,0 +1,35 @@
+name: Block PRs with New Fragments
+on:
+  pull_request:
+    branches: [main]
+jobs:
+  checkForNewFragments:
+    name: Check for new fragments
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0 https://github.com/actions/checkout/commit/f43a0e5ff2bd294095638e18286ca9a3d1956744
+      - name: Check if there are new fragments
+        uses: actions/github-script@d7906e4ad0b1822421a7e6a35d5ca353c962f410 # v6.4.1 https://github.com/actions/github-script/commit/d7906e4ad0b1822421a7e6a35d5ca353c962f410
+        id: new-fragments-boolean
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          result-encoding: string
+          script: |
+            const { getAddedFragments } = require('./.github/workflows/scripts/check_for_new_fragments.js');
+            return getAddedFragments({github, context, core});
+      - name: Add Comment to PR if new fragments have been added
+        if: ${{ steps.new-fragments-boolean.outputs.result > 0 }}
+        uses: actions/github-script@d7906e4ad0b1822421a7e6a35d5ca353c962f410 # v6.4.1 https://github.com/actions/github-script/commit/d7906e4ad0b1822421a7e6a35d5ca353c962f410
+        env:
+          CURRENT_BRANCH: ${{ github.head_ref }}
+          CURRENT_REPO: ${{ github.repository }}
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const { addComment } = require('./.github/workflows/scripts/check_for_new_fragments.js');
+            addComment({github, context});
+      - name: Fail if new fragments have been added
+        if: ${{ steps.new-fragments-boolean.outputs.result > 0 }}
+        run: exit 1
+

.github/workflows/scripts/check_for_new_fragments.js

@@ -0,0 +1,42 @@
+module.exports = {
+  getAddedFragments: ({ github, context, core }) => {
+    const {
+      issue: { number: issue_number },
+      repo: { owner, repo }
+    } = context;
+
+    // Use the Github API to query for the list of files from the PR
+    return github.paginate(
+      'GET /repos/{owner}/{repo}/pulls/{pull_number}/files',
+      { owner, repo, pull_number: issue_number },
+      (response) => {
+        const newFragments = [];
+        response.data.forEach((file) => {
+          if (
+            file.status === 'added' &&
+            file.filename.startsWith('src/fragments')
+          ) {
+            newFragments.push(file);
+          }
+        });
+        return newFragments.length;
+      }
+    );
+  },
+
+  addComment: async ({ github, context }) => {
+    const {
+      issue: { number: issue_number },
+      repo: { owner, repo }
+    } = context;
+
+    const useInlineFiltersComment =
+      'Amplify Docs is moving away from the use of Fragments. Please instead use InlineFilter. See our [README](https://github.com/aws-amplify/docs/blob/main/Readme.md#inline-filters) for more information.';
+    github.rest.issues.createComment({
+      owner,
+      repo,
+      issue_number,
+      body: useInlineFiltersComment
+    });
+  }
+};

Readme.md

@@ -57,6 +57,18 @@ import js from "/src/fragments/lib/datastore/js/conflict.mdx";
 
 This fragment would exist in: `pages/src/fragments/lib/datastore/js/conflict.mdx`
 
+### Inline Filters 
+
+We are incorporating the use of `<InlineFilters>` to add platform-specific content within the context of one page rather than in fragments. These filters allow you to still specify content by platform and they reference platforms using the same naming convention as our fragments. You can enclose your platform-specific content by updating the opening tag:
+
+````md
+<InlineFilter filters={["js", "react-native", "android", "ios", "flutter"]}>
+
+</InlineFilter>
+````
+
+If you are updating content on a page, please note any inline filter tags which may be indicating a specific platform as you make your edits.
+
 ### Accordion 
 
 `Accordion` This single-use accordion hides peripheral content until the reader selects to expand the section. This helps you keep your pages focused on the need-to-know information upfront, while also providing readers an option to dive deeper when they choose. These accordions can provide peripheral content such as additional context for beginners, advanced deep dives for those who want to off-road, and troubleshooting guidance for errors users may encounter.

generatePathMap.cjs.js

@@ -61,6 +61,9 @@ function generatePathMap(
     '/lib-v1/q/platform/ios': {
       page: '/lib-v1/q/platform/[platform]'
     },
+    '/lib-v1/q/platform/flutter': {
+      page: '/lib-v1/q/platform/[platform]'
+    },
     '/sdk/q/platform/js': {
       page: '/sdk/q/platform/[platform]'
     },
@@ -114,6 +117,19 @@ 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) {
@@ -183,6 +199,17 @@ 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,11 +68,9 @@ 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,11 +128,7 @@
     ],
     "setupFilesAfterEnv": [
       "<rootDir>/jest.setup.js"
-    ],
-    "moduleNameMapper": {
-      "\\.(css|less|scss)$": "<rootDir>/src/__mocks__/styleMock.js"
-    },
-    "transformIgnorePatterns": []
+    ]
   },
   "scripts": {
     "clean": "rm -rf node_modules yarn.lock",

src/components/Accordion/index.tsx

@@ -20,11 +20,6 @@ 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;
 
@@ -67,7 +62,7 @@ const Accordion: React.FC<AccordionProps> = ({
 
   const anchor = createElement(
     'a',
-    { href: pathName + '#' + headingId },
+    { href: window.location.pathname + '#' + headingId },
     expanderTitle
   );
 

src/components/Card/styles.tsx

@@ -28,7 +28,7 @@ const docsCard: React.FC<CardProps> = ({
   href,
   external
 }) => {
-  const target = external ? '_blank' : 'self';
+  const target = external ? '_blank' : undefined;
   if (!href) return <div className={className}>{children}</div>;
   return (
     <InternalLink href={href} passHref={true} legacyBehavior>

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

@@ -2,17 +2,6 @@ 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,8 +1,9 @@
 import { useRouter } from 'next/router';
 
-export default function FilterChildren({ children, filterKey = '' }) {
+export default function FilterChildren({ children }) {
   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,10 +7,8 @@ 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;
 
@@ -31,5 +29,5 @@ export default function Fragments({ fragments }) {
     children.push(<div key={key}>{fragment}</div>);
   }
 
-  return <FilterChildren filterKey={filterKey}>{children}</FilterChildren>;
+  return <FilterChildren>{children}</FilterChildren>;
 }

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

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

src/components/InternalLink/index.tsx

@@ -1,12 +1,8 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useContext } from 'react';
-import { PageContext } from '../Page';
+import { parseLocalStorage } from '../../utils/parseLocalStorage';
 
 export default function InternalLink({ href, children }) {
-  const router = useRouter();
-  const filterKeys = useContext(PageContext);
-
   let filterKind = '';
   if (href.startsWith('/cli') || href.startsWith('/console')) {
     filterKind = '';
@@ -24,6 +20,7 @@ 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('#')) {
@@ -37,6 +34,7 @@ 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,6 +3,7 @@ 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,
@@ -25,6 +26,9 @@ const Layout = forwardRef(function Layout(
   },
   footerRef
 ) {
+  const router = useRouter();
+  if (!router.isReady) return <></>;
+
   const filterMetadata = filterKey
     ? filterMetadataByOption[filterKey].label
     : '';