From bf4bfb69d1e6827e0f922bc0734d41340a204fd9 Mon Sep 17 00:00:00 2001
From: Pantheon Bot <bot@getpantheon.com>
Date: Fri, 11 Oct 2024 21:08:06 +0000
Subject: [PATCH 1/2] Apply Prettier formatting

---
 .../omniSidebarNav/allGuidesQuery.js          | 44 +++++-----
 src/components/omniSidebarNav/helpers.js      |  7 +-
 src/components/omniSidebarNav/index.js        |  9 +-
 src/templates/certificationpage.js            | 83 +++++++++---------
 src/templates/guide.js                        | 84 +++++++++----------
 tests/playwright-tests/visuals.spec.ts        | 36 +++++---
 vite.config.ts                                |  2 +-
 7 files changed, 138 insertions(+), 127 deletions(-)

diff --git a/src/components/omniSidebarNav/allGuidesQuery.js b/src/components/omniSidebarNav/allGuidesQuery.js
index 463d1ceb9a..f702e0e4a3 100644
--- a/src/components/omniSidebarNav/allGuidesQuery.js
+++ b/src/components/omniSidebarNav/allGuidesQuery.js
@@ -5,33 +5,31 @@ import { useStaticQuery, graphql } from 'gatsby';
  * @returns {Object} The result of the GraphQL query containing all the guides.
  */
 const allGuides = () => {
-  const AllTheGuides = useStaticQuery(
-    graphql`
-      {
-        allGuides: allMdx(
-          filter: {
-            fileAbsolutePath: { ne: null }
-            fields: { guide_directory: { ne: null } }
-            frontmatter: { draft: { ne: true } }
-          }
-          sort: { fields: [fileAbsolutePath], order: ASC }
-        ) {
-          edges {
-            node {
-              fields {
-                slug
-                guide_directory
-              }
-              frontmatter {
-                title
-                subtitle
-              }
+  const AllTheGuides = useStaticQuery(graphql`
+    {
+      allGuides: allMdx(
+        filter: {
+          fileAbsolutePath: { ne: null }
+          fields: { guide_directory: { ne: null } }
+          frontmatter: { draft: { ne: true } }
+        }
+        sort: { fields: [fileAbsolutePath], order: ASC }
+      ) {
+        edges {
+          node {
+            fields {
+              slug
+              guide_directory
+            }
+            frontmatter {
+              title
+              subtitle
             }
           }
         }
       }
-    `,
-  );
+    }
+  `);
 
   return AllTheGuides;
 };
diff --git a/src/components/omniSidebarNav/helpers.js b/src/components/omniSidebarNav/helpers.js
index 7c13c796dd..e937d48125 100644
--- a/src/components/omniSidebarNav/helpers.js
+++ b/src/components/omniSidebarNav/helpers.js
@@ -1,7 +1,7 @@
 import allGuides from './allGuidesQuery';
 import React from 'react';
 import { Link } from 'gatsby';
- import { Icon } from '@pantheon-systems/pds-toolkit-react';
+import { Icon } from '@pantheon-systems/pds-toolkit-react';
 
 /**
  * Converts items into links recursively.
@@ -11,7 +11,6 @@ import { Link } from 'gatsby';
  * @returns {Object} - The converted item with link properties.
  */
 const turnItemsIntoLinks = (item, activePage) => {
-
   var linkText = item.title;
   // If the link is external, add an icon to indicate that.
   // Internal links will start with a slash.
@@ -20,8 +19,8 @@ const turnItemsIntoLinks = (item, activePage) => {
       React.Fragment,
       null,
       item.title,
-      " ",
-      React.createElement(Icon, { iconName: "externalLink", iconSize: "sm" }),
+      ' ',
+      React.createElement(Icon, { iconName: 'externalLink', iconSize: 'sm' }),
     );
   }
 
diff --git a/src/components/omniSidebarNav/index.js b/src/components/omniSidebarNav/index.js
index 01b3b149d6..386b768c3d 100644
--- a/src/components/omniSidebarNav/index.js
+++ b/src/components/omniSidebarNav/index.js
@@ -8,8 +8,7 @@ import {
   turnItemsIntoLinks,
 } from './helpers.js';
 
-import "./style.css"
-
+import './style.css';
 
 // @todo, run prettier one more time on this directory before removing it from the PR.
 
@@ -27,7 +26,8 @@ const OmniSidebarNav = ({
     const submenuItems = findSubMenuItemsToUse(submenuPathToUse, OmniItems);
     const submenuLinks = turnItemsIntoLinks(submenuItems, activePage);
     return (
-      <SideNavCompact className="sidenav-compact"
+      <SideNavCompact
+        className="sidenav-compact"
         headingText={submenuLinks.linkContent}
         menuItems={submenuLinks.links}
       />
@@ -35,7 +35,8 @@ const OmniSidebarNav = ({
   } else if (menuItems) {
     const OmniLinks = turnItemsIntoLinks(menuItems, activePage);
     return (
-      <SideNavCompact className="sidenav-compact"
+      <SideNavCompact
+        className="sidenav-compact"
         headingText={OmniLinks.linkContent}
         menuItems={OmniLinks.links}
       />
diff --git a/src/templates/certificationpage.js b/src/templates/certificationpage.js
index 5ea01f6bd9..71f9e1b30b 100644
--- a/src/templates/certificationpage.js
+++ b/src/templates/certificationpage.js
@@ -1,77 +1,78 @@
-import React from "react"
-import { graphql } from "gatsby"
-import { SidebarLayout } from "@pantheon-systems/pds-toolkit-react"
-import GuideLayout from "../layout/GuideLayout"
-import SEO from "../layout/seo"
-import SearchBar from "../layout/SearchBar"
-import HeaderBody from "../components/headerBody"
-import OmniSidebarNav from "../components/omniSidebarNav";
-import GetFeedback from "../components/getFeedback"
-import NavButtons from "../components/navButtons"
-import TOC from "../components/toc"
-import MdxWrapper from "../components/mdxWrapper"
+import React from 'react';
+import { graphql } from 'gatsby';
+import { SidebarLayout } from '@pantheon-systems/pds-toolkit-react';
+import GuideLayout from '../layout/GuideLayout';
+import SEO from '../layout/seo';
+import SearchBar from '../layout/SearchBar';
+import HeaderBody from '../components/headerBody';
+import OmniSidebarNav from '../components/omniSidebarNav';
+import GetFeedback from '../components/getFeedback';
+import NavButtons from '../components/navButtons';
+import TOC from '../components/toc';
+import MdxWrapper from '../components/mdxWrapper';
 
 class CertificationTemplate extends React.Component {
   componentDidMount() {
-    $("[data-toggle=popover]").popover({
-      trigger: "click",
-    })
+    $('[data-toggle=popover]').popover({
+      trigger: 'click',
+    });
 
-    $("body").on("click", function (e) {
+    $('body').on('click', function (e) {
       $('[data-toggle="popover"]').each(function () {
         if (
           !$(this).is(e.target) &&
           $(this).has(e.target).length === 0 &&
-          $(".popover").has(e.target).length === 0
+          $('.popover').has(e.target).length === 0
         ) {
-          $(this).popover("hide")
+          $(this).popover('hide');
         }
-      })
-    })
+      });
+    });
 
-    $("body").keyup(function (e) {
+    $('body').keyup(function (e) {
       $('[data-toggle="popover"]').each(function () {
         if (event.which === 27) {
-          $(this).popover("hide")
+          $(this).popover('hide');
         }
-      })
-    })
+      });
+    });
   }
 
   render() {
-    const node = this.props.data.mdx
-    const isoDate = this.props.data.date
+    const node = this.props.data.mdx;
+    const isoDate = this.props.data.date;
     const ifCommandsDate =
-      node.fields.slug == "/terminus/commands"
+      node.fields.slug == '/terminus/commands'
         ? this.props.data.terminusReleasesJson.published_at
-        : node.frontmatter.reviewed
+        : node.frontmatter.reviewed;
     const ifCommandsISO =
-      node.fields.slug == "/terminus/commands"
+      node.fields.slug == '/terminus/commands'
         ? this.props.data.jsonISO.published_at
-        : isoDate.frontmatter.reviewed
+        : isoDate.frontmatter.reviewed;
 
     // Preprocess content region layout if has TOC or not.
-    const hasTOC = node.frontmatter.showtoc
+    const hasTOC = node.frontmatter.showtoc;
     const ContainerDiv = ({ children }) => (
       <div className="content-wrapper">{children}</div>
-    )
-    const ContentLayoutType = hasTOC ? SidebarLayout : ContainerDiv
+    );
+    const ContentLayoutType = hasTOC ? SidebarLayout : ContainerDiv;
 
     return (
       <GuideLayout>
         <SEO
           slot="seo"
-          title={node.frontmatter.subtitle + " | " + node.frontmatter.title}
+          title={node.frontmatter.subtitle + ' | ' + node.frontmatter.title}
           description={node.frontmatter.description || node.excerpt}
           authors={node.frontmatter.contributors}
-          image={"/images/assets/terminus-thumbLarge.png"}
+          image={'/images/assets/terminus-thumbLarge.png'}
           reviewed={ifCommandsISO}
           type={node.frontmatter.type}
         />
-          <OmniSidebarNav
+        <OmniSidebarNav
           slot="guide-menu"
           activePage={node.fields.slug}
-          submenuPathToUse="/certification"/>
+          submenuPathToUse="/certification"
+        />
 
         <ContentLayoutType slot="guide-content">
           <SearchBar slot="content" page="default" />
@@ -105,13 +106,13 @@ class CertificationTemplate extends React.Component {
           {hasTOC && <TOC slot="sidebar" title="Contents" />}
         </ContentLayoutType>
 
-        <GetFeedback formId="tfYOGoE7" page={"/" + node.fields.slug} />
+        <GetFeedback formId="tfYOGoE7" page={'/' + node.fields.slug} />
       </GuideLayout>
-    )
+    );
   }
 }
 
-export default CertificationTemplate
+export default CertificationTemplate;
 
 export const pageQuery = graphql`
   query TerminusPageBySlug($slug: String!) {
@@ -151,4 +152,4 @@ export const pageQuery = graphql`
       published_at(formatString: "YYYY-MM-DD")
     }
   }
-`
+`;
diff --git a/src/templates/guide.js b/src/templates/guide.js
index 1518243428..109b207318 100644
--- a/src/templates/guide.js
+++ b/src/templates/guide.js
@@ -1,81 +1,79 @@
-import React from "react"
-import { graphql } from "gatsby"
-import GuideLayout from "../layout/GuideLayout"
-import SEO from "../layout/seo"
-import SearchBar from "../layout/SearchBar"
-import HeaderBody from "../components/headerBody"
-import OmniSidebarNav from "../components/omniSidebarNav";
-import { SidebarLayout } from "@pantheon-systems/pds-toolkit-react"
-import NavButtons from "../components/navButtons"
-import TOC from "../components/toc"
-import MdxWrapper from "../components/mdxWrapper"
-
-
+import React from 'react';
+import { graphql } from 'gatsby';
+import GuideLayout from '../layout/GuideLayout';
+import SEO from '../layout/seo';
+import SearchBar from '../layout/SearchBar';
+import HeaderBody from '../components/headerBody';
+import OmniSidebarNav from '../components/omniSidebarNav';
+import { SidebarLayout } from '@pantheon-systems/pds-toolkit-react';
+import NavButtons from '../components/navButtons';
+import TOC from '../components/toc';
+import MdxWrapper from '../components/mdxWrapper';
 
 class GuideTemplate extends React.Component {
   componentDidMount() {
-    $("[data-toggle=popover]").popover({
-      trigger: "click",
-    })
+    $('[data-toggle=popover]').popover({
+      trigger: 'click',
+    });
 
-    $("body").on("click", function (e) {
+    $('body').on('click', function (e) {
       $('[data-toggle="popover"]').each(function () {
         if (
           !$(this).is(e.target) &&
           $(this).has(e.target).length === 0 &&
-          $(".popover").has(e.target).length === 0
+          $('.popover').has(e.target).length === 0
         ) {
-          $(this).popover("hide")
+          $(this).popover('hide');
         }
-      })
-    })
+      });
+    });
 
-    $("body").keyup(function (e) {
+    $('body').keyup(function (e) {
       $('[data-toggle="popover"]').each(function () {
         if (event.which === 27) {
-          $(this).popover("hide")
+          $(this).popover('hide');
         }
-      })
-    })
+      });
+    });
   }
 
   render() {
-    const node = this.props.data.mdx
-    const isoDate = this.props.data.date
+    const node = this.props.data.mdx;
+    const isoDate = this.props.data.date;
     const items = this.props.data.allMdx.edges.map((item) => {
       return {
         id: item.node.id,
         link: item.node.fields.slug,
         title: item.node.frontmatter.subtitle,
-      }
-    })
+      };
+    });
 
     // Preprocess content region layout if has TOC or not.
-    const hasTOC = node.frontmatter.showtoc
+    const hasTOC = node.frontmatter.showtoc;
     const ContainerDiv = ({ children }) => (
       <div className="content-wrapper">{children}</div>
-    )
-    const ContentLayoutType = hasTOC ? SidebarLayout : ContainerDiv
+    );
+    const ContentLayoutType = hasTOC ? SidebarLayout : ContainerDiv;
 
     return (
       <GuideLayout>
         <SEO
           slot="seo"
-          title={node.frontmatter.subtitle + " | " + node.frontmatter.title}
+          title={node.frontmatter.subtitle + ' | ' + node.frontmatter.title}
           description={node.frontmatter.description || node.excerpt}
           keywords={node.frontmatter.tags}
           authors={node.frontmatter.contributors}
-          image={"/images/assets/terminus-thumbLarge.png"}
+          image={'/images/assets/terminus-thumbLarge.png'}
           reviewed={isoDate.frontmatter.reviewed}
           type={node.frontmatter.type}
         />
 
-          <OmniSidebarNav
-            slot="guide-menu"
-            activePage={node.fields.slug}
-            fallbackTitle={node.frontmatter.title}
-            fallbackItems={items}
-          />
+        <OmniSidebarNav
+          slot="guide-menu"
+          activePage={node.fields.slug}
+          fallbackTitle={node.frontmatter.title}
+          fallbackItems={items}
+        />
 
         <ContentLayoutType slot="guide-content">
           <SearchBar slot="content" page="default" />
@@ -103,11 +101,11 @@ class GuideTemplate extends React.Component {
           {hasTOC && <TOC slot="sidebar" title="Contents" />}
         </ContentLayoutType>
       </GuideLayout>
-    )
+    );
   }
 }
 
-export default GuideTemplate
+export default GuideTemplate;
 
 export const pageQuery = graphql`
   query GuidePageBySlug($slug: String!, $guide_directory: String!) {
@@ -167,4 +165,4 @@ export const pageQuery = graphql`
       }
     }
   }
-`
+`;
diff --git a/tests/playwright-tests/visuals.spec.ts b/tests/playwright-tests/visuals.spec.ts
index e0fa4a3d1b..ad283f5843 100644
--- a/tests/playwright-tests/visuals.spec.ts
+++ b/tests/playwright-tests/visuals.spec.ts
@@ -6,43 +6,51 @@ test('home page', async ({ page }) => {
   await expect(page).toHaveScreenshot('homepage.png', { fullPage: true });
 });
 
-
 test('Get Started - Landing Page', async ({ page }) => {
   await page.goto('/get-started/');
   await page.getByText('Accept Cookies').click();
   await expect(page).toHaveScreenshot('get-started.png', { fullPage: true });
 });
 
-
 test('Release Notes - Category Listing', async ({ page }) => {
   await page.goto('/release-notes/1/?category=policy');
   await page.getByText('Accept Cookies').click();
   await page.waitForLoadState('networkidle');
-  await expect(page).toHaveScreenshot('release-notes--category.png', { fullPage: true });
+  await expect(page).toHaveScreenshot('release-notes--category.png', {
+    fullPage: true,
+  });
 });
 
 test('Release Notes - Single Entry', async ({ page }) => {
   await page.goto('/release-notes/2024/05/new-relic-agent-update-released');
   await page.getByText('Accept Cookies').click();
-  await expect(page).toHaveScreenshot('release-notes--single-entry.png', { fullPage: true });
+  await expect(page).toHaveScreenshot('release-notes--single-entry.png', {
+    fullPage: true,
+  });
 });
 
 test('Terminus Manual - Single Page', async ({ page }) => {
   await page.goto('/terminus/install');
   await page.getByText('Accept Cookies').click();
-  await expect(page).toHaveScreenshot('terminus-install.png', { fullPage: true });
+  await expect(page).toHaveScreenshot('terminus-install.png', {
+    fullPage: true,
+  });
 });
 
 test('Terminus Manual - Single Command', async ({ page }) => {
   await page.goto('/terminus/commands/completion');
   await page.getByText('Accept Cookies').click();
-  await expect(page).toHaveScreenshot('terminus-single-command.png', { fullPage: true });
+  await expect(page).toHaveScreenshot('terminus-single-command.png', {
+    fullPage: true,
+  });
 });
 
 test('Certification Landing Page', async ({ page }) => {
   await page.goto('/certification');
   await page.getByText('Accept Cookies').click();
-  await expect(page).toHaveScreenshot('certification-landing-page.png', { fullPage: true });
+  await expect(page).toHaveScreenshot('certification-landing-page.png', {
+    fullPage: true,
+  });
 });
 
 test('Glossary', async ({ page }) => {
@@ -51,19 +59,23 @@ test('Glossary', async ({ page }) => {
   await expect(page).toHaveScreenshot('glossary.png', { fullPage: true });
 });
 
-
 test('certification---study-guide', async ({ page }) => {
   await page.goto('/certification/study-guide');
   await page.getByText('Accept Cookies').click();
   await expect(page.locator('#toc')).toBeVisible();
-  await expect(page).toHaveScreenshot('certification---study-guide.png', { fullPage: true } );
+  await expect(page).toHaveScreenshot('certification---study-guide.png', {
+    fullPage: true,
+  });
 });
 
 test('certification---study-guide--webops', async ({ page }) => {
   await page.goto('/certification/study-guide/webops');
   await page.getByText('Accept Cookies').click();
   await expect(page.locator('#toc')).toBeVisible();
-  await expect(page).toHaveScreenshot('certification---study-guide--webops.png', { fullPage: true });
+  await expect(page).toHaveScreenshot(
+    'certification---study-guide--webops.png',
+    { fullPage: true },
+  );
 });
 
 // This page is one of the first to use the nest sidebar nav.
@@ -71,7 +83,9 @@ test('wp-nextjs--create', async ({ page }) => {
   await page.goto('/guides/decoupled/wp-nextjs-frontend-starters/create/');
   await page.getByText('Accept Cookies').click();
   await expect(page.locator('#toc')).toBeVisible();
-  await expect(page).toHaveScreenshot('wp-nextjs--create.png', { fullPage: true });
+  await expect(page).toHaveScreenshot('wp-nextjs--create.png', {
+    fullPage: true,
+  });
 });
 
 // As the nested nav is implemented, check that the non-nested nav is still working.
diff --git a/vite.config.ts b/vite.config.ts
index 7b08050e61..79580748c0 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -9,7 +9,7 @@ export default defineConfig({
         // Unknown file extension ".css" for /Users/xxxxxxxxxxx/Sites/documentation/node_modules/@pantheon-systems/pds-toolkit-react/_dist/index.css
         //similar to:
         // https://github.com/vitest-dev/vitest/issues/5283
-        inline: [/@pantheon-systems\/.*/,],
+        inline: [/@pantheon-systems\/.*/],
       },
     },
   },

From 095d69220e4b35ffe2d8e70ae465029a99ec3f9c Mon Sep 17 00:00:00 2001
From: Steve Persch <stevector@users.noreply.github.com>
Date: Fri, 11 Oct 2024 16:19:08 -0500
Subject: [PATCH 2/2] removing comment

---
 src/components/omniSidebarNav/index.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/omniSidebarNav/index.js b/src/components/omniSidebarNav/index.js
index 386b768c3d..6b7811091c 100644
--- a/src/components/omniSidebarNav/index.js
+++ b/src/components/omniSidebarNav/index.js
@@ -7,11 +7,8 @@ import {
   getOmniSidebarActiveSection,
   turnItemsIntoLinks,
 } from './helpers.js';
-
 import './style.css';
 
-// @todo, run prettier one more time on this directory before removing it from the PR.
-
 const OmniSidebarNav = ({
   activePage,
   fallbackItems = null,