Merge branch 'main' into patch-1

.github/workflows/test.yml

@@ -46,6 +46,8 @@ jobs:
               { name: 'graphql', path: 'tests/graphql', },
               { name: 'events', path: 'src/events/tests', },
               { name: 'automated-pipelines', path: 'src/automated-pipelines/tests', },
+              { name: 'rest', path: 'src/rest/tests', },
+              { name: 'webhooks', path: 'src/webhooks/tests', },
               { name: 'linting', path: 'tests/linting', },
               { name: 'meta', path: 'tests/meta', },
               { name: 'routing', path: 'tests/routing', },

components/article/ArticlePage.tsx

@@ -23,6 +23,7 @@ import { Breadcrumbs } from 'components/page-header/Breadcrumbs'
 import { Link } from 'components/Link'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { LinkPreviewPopover } from 'components/LinkPreviewPopover'
+import { SupportPortalVaIframe } from 'components/article/SupportPortalVaIframe'
 
 const ClientSideRefresh = dynamic(() => import('components/ClientSideRefresh'), {
   ssr: false,
@@ -43,12 +44,17 @@ export const ArticlePage = () => {
     productVideoUrl,
     miniTocItems,
     currentLearningTrack,
+    supportPortalVaIframeProps,
   } = useArticleContext()
   const isLearningPath = !!currentLearningTrack?.trackName
   const { t } = useTranslation(['pages'])
 
   return (
     <DefaultLayout>
+      {supportPortalVaIframeProps.supportPortalUrl &&
+        supportPortalVaIframeProps.vaFlowUrlParameter && (
+          <SupportPortalVaIframe supportPortalVaIframeProps={supportPortalVaIframeProps} />
+        )}
       <LinkPreviewPopover />
       {isDev && <ClientSideRefresh />}
       <ClientSideHighlight />

components/article/SupportPortalVaIframe.module.scss

@@ -0,0 +1,7 @@
+.supportPortalIframe {
+  height: 0;
+  width: 100%;
+  overflow: hidden;
+  border: none;
+  display: none;
+}

components/article/SupportPortalVaIframe.tsx

@@ -0,0 +1,89 @@
+import { useRouter } from 'next/router'
+import { useState, useRef, useEffect } from 'react'
+import styles from './SupportPortalVaIframe.module.scss'
+export interface SupportPortalVaIframeProps {
+  supportPortalUrl: string
+  vaFlowUrlParameter: string
+}
+
+const PREVIEW_BUTTON_HEIGHT = 95
+const FULL_HEIGHT = 750
+
+// The Support Portal iframe starts as `height 0` and `display none` to prevent the iframe from visibly rendering
+// When the iframe loads and the Support Portal has the iframe feature flag set to on, a message is sent to the parent of the iframe indicating it is ready
+// The iframe height is then set to 95px and the display to inline to show a button the user can click on to log in / start the VA
+// The full height is used to show the entire interactive Virtual Assistant
+export function SupportPortalVaIframe({
+  supportPortalVaIframeProps,
+}: {
+  supportPortalVaIframeProps: SupportPortalVaIframeProps
+}) {
+  const router = useRouter()
+  const autoStartVa = router.query.autoStartVa === 'true'
+  enum vaIframeMessageType {
+    OPEN = 'open',
+    START = 'start',
+    STOP = 'stop',
+  }
+
+  const [showIframe, setIframe] = useState(false)
+  const iframeRef = useRef<HTMLIFrameElement>(null)
+
+  useEffect(() => {
+    function eventHandler(event: MessageEvent<{ type: vaIframeMessageType }>) {
+      // An extra security measure which double checks that the events originate from the Support Portal domain
+      if (event.origin !== supportPortalVaIframeProps.supportPortalUrl) return
+      const message = event.data
+      switch (message.type) {
+        case vaIframeMessageType.OPEN:
+          // We need to set the display to inline from a ref explicitly to prevent the component from rerendering
+          // The iframe is hidden by default to allow Support Portal to disable the iframe remotely
+          if (iframeRef.current) {
+            iframeRef.current.style.display = 'inline'
+            iframeRef.current.style.height = autoStartVa
+              ? `${FULL_HEIGHT}px`
+              : `${PREVIEW_BUTTON_HEIGHT}px`
+          }
+          break
+        case vaIframeMessageType.START:
+          // We need to set the height explicitly from a ref to prevent the component from rerendering
+          if (iframeRef.current) {
+            iframeRef.current.style.height = `${FULL_HEIGHT}px`
+          }
+          break
+        case vaIframeMessageType.STOP:
+          // Effectively hide iframe. If preferred the element can also be deleted or display set to hidden.
+          setIframe(false)
+          break
+        default:
+      }
+    }
+    window.addEventListener('message', eventHandler)
+    setIframe(true)
+    return () => {
+      window.removeEventListener('message', eventHandler)
+    }
+  }, [])
+
+  if (!showIframe) {
+    return null
+  }
+
+  const usp = new URLSearchParams({ flow: supportPortalVaIframeProps.vaFlowUrlParameter })
+  usp.set('flow', supportPortalVaIframeProps.vaFlowUrlParameter)
+  if (autoStartVa) {
+    usp.set('autoStartVa', 'true')
+  }
+
+  const src = `${supportPortalVaIframeProps.supportPortalUrl}/iframe/docs_va?${usp}`
+
+  return (
+    <iframe
+      className={styles.supportPortalIframe}
+      ref={iframeRef}
+      title="support-portal-va"
+      id="support-portal-iframe"
+      src={src}
+    />
+  )
+}

components/context/ArticleContext.tsx

@@ -1,3 +1,4 @@
+import { SupportPortalVaIframeProps } from 'components/article/SupportPortalVaIframe'
 import { createContext, useContext } from 'react'
 
 export type LearningTrack = {
@@ -36,6 +37,7 @@ export type ArticleContextT = {
   detectedPlatforms: Array<string>
   detectedTools: Array<string>
   allTools: Record<string, string>
+  supportPortalVaIframeProps: SupportPortalVaIframeProps
 }
 
 export const ArticleContext = createContext<ArticleContextT | null>(null)
@@ -50,6 +52,11 @@ export const useArticleContext = (): ArticleContextT => {
   return context
 }
 
+const PagePathToVaFlowMapping: Record<string, string> = {
+  'content/account-and-profile/setting-up-and-managing-your-github-profile/managing-contribution-settings-on-your-profile/why-are-my-contributions-not-showing-up-on-my-profile.md':
+    'contribution_troubleshooting',
+}
+
 export const getArticleContextFromRequest = (req: any): ArticleContextT => {
   const page = req.context.page
 
@@ -61,6 +68,17 @@ export const getArticleContextFromRequest = (req: any): ArticleContextT => {
     }
   }
 
+  const supportPortalUrl =
+    process.env.NODE_ENV === 'production'
+      ? 'https://support.github.com'
+      : // Assume that a developer is not testing the VA iframe locally if this env var is not set
+        process.env.SUPPORT_PORTAL_URL || ''
+
+  const supportPortalVaIframeProps = {
+    supportPortalUrl,
+    vaFlowUrlParameter: PagePathToVaFlowMapping[req.context.page.fullPath] || '',
+  }
+
   return {
     title: page.title,
     intro: page.intro,
@@ -78,5 +96,6 @@ export const getArticleContextFromRequest = (req: any): ArticleContextT => {
     detectedPlatforms: page.detectedPlatforms || [],
     detectedTools: page.detectedTools || [],
     allTools: page.allToolsParsed || [], // this is set at the page level, see lib/page.js
+    supportPortalVaIframeProps,
   }
 }

components/sidebar/ProductCollapsibleSection.tsx

@@ -1,122 +1,77 @@
 import cx from 'classnames'
-import { useState, SyntheticEvent } from 'react'
-import { ChevronDownIcon } from '@primer/octicons-react'
-import { ActionList } from '@primer/react'
+import { TreeView } from '@primer/react'
 
 import { Link } from 'components/Link'
 import { ProductTreeNode } from 'components/context/MainContext'
 import { EventType, sendEvent } from 'src/events/browser'
-import styles from './SidebarProduct.module.scss'
 
 type SectionProps = {
   routePath: string
   page: ProductTreeNode
   title: string
-  defaultOpen: boolean
 }
 export const ProductCollapsibleSection = (props: SectionProps) => {
-  const { routePath, defaultOpen, title, page } = props
-  const [isOpen, setIsOpen] = useState(defaultOpen)
-
-  const onToggle = (e: SyntheticEvent) => {
-    const newIsOpen = (e.target as HTMLDetailsElement).open
-    setIsOpen(newIsOpen)
-    sendEvent({
-      type: EventType.navigate,
-      navigate_label: `details ${newIsOpen ? 'open' : 'close'}: ${title}`,
-    })
-  }
-
+  const { routePath, page } = props
   // The lowest level page link displayed in the tree
   const renderTerminalPageLink = (page: ProductTreeNode) => {
     const title = page.shortTitle || page.title
-
     const isCurrent = routePath === page.href
+
     return (
-      <ActionList.Item
+      <Link
+        href={page.href}
         key={page.href}
-        data-testid="sidebar-article"
-        data-is-current-page={isCurrent}
-        className={cx(
-          'width-full position-relative',
-          styles.sidebarArticle,
-          isCurrent && ['text-bold', styles.sidebarArticleActive]
-        )}
-        sx={{
-          padding: '2px 0',
-          ':hover': {
-            borderRadius: 0,
-          },
-        }}
+        className={cx('color-fg-default no-underline', isCurrent ? 'text-bold' : '')}
       >
-        <Link
-          href={page.href}
-          className={cx(
-            'd-block pl-6 pr-5 py-1 no-underline width-full',
-            isCurrent ? 'color-fg-accent' : 'color-fg-default'
-          )}
+        <TreeView.Item
+          id={page.href}
+          data-testid="sidebar-article"
+          current={isCurrent}
+          defaultExpanded={isCurrent}
+          onSelect={() => {
+            sendEvent({
+              type: EventType.navigate,
+              navigate_label: `product page navigate to: ${page.href}`,
+            })
+          }}
         >
           {title}
-        </Link>
-      </ActionList.Item>
+        </TreeView.Item>
+      </Link>
     )
   }
 
   return (
-    <details open={defaultOpen} onToggle={onToggle} className="details-reset">
-      <summary className="outline-none">
-        <div className="d-flex flex-justify-between">
-          <div className="pl-4 pr-1 py-2 f5 d-block flex-auto mr-3 color-fg-default no-underline text-bold">
-            {title}
-          </div>
-          <span style={{ marginTop: 7 }} className="flex-shrink-0 pr-3">
-            <ChevronDownIcon className={cx('opacity-60', isOpen && 'rotate-180')} />
-          </span>
-        </div>
-      </summary>
-
-      {
+    <>
+      {/* <!-- some pages have nested child pages (formerly known as a mapTopic) --> */}
+      {page.childPages[0]?.documentType === 'mapTopic' ? (
         <>
-          {/* <!-- some pages have nested child pages (formerly known as a mapTopic) --> */}
-          {page.childPages[0]?.documentType === 'mapTopic' ? (
-            <ul className="list-style-none position-relative">
-              {page.childPages.map((childPage, i) => {
-                const childTitle = childPage.shortTitle || childPage.title
+          {page.childPages.map((childPage, i) => {
+            const childTitle = childPage.shortTitle || childPage.title
+            const isActive = routePath.includes(childPage.href)
+            const isCurrent = routePath === childPage.href
 
-                const isActive = routePath.includes(childPage.href)
-                const isCurrent = routePath === childPage.href
-
-                return (
-                  <li key={childPage.href + i} data-is-current-page={isCurrent}>
-                    <details
-                      open={isActive}
-                      onToggle={(e) => e.stopPropagation()}
-                      className="details-reset"
-                    >
-                      <summary>
-                        <div className={cx('pl-4 pr-5 py-2 no-underline')}>{childTitle}</div>
-                      </summary>
-                      <div data-testid="sidebar-article-group" className="pb-0">
-                        <ActionList variant="full" className="my-2">
-                          {childPage.childPages.map((cp) => {
-                            return renderTerminalPageLink(cp)
-                          })}
-                        </ActionList>
-                      </div>
-                    </details>
-                  </li>
-                )
-              })}
-            </ul>
-          ) : page.childPages[0]?.documentType === 'article' ? (
-            <div data-testid="sidebar-article-group" className="pb-0">
-              <ActionList variant="full" className="my-2">
-                {page.childPages.map(renderTerminalPageLink)}
-              </ActionList>
-            </div>
-          ) : null}
+            return (
+              <div key={childPage.href + i}>
+                <TreeView.Item defaultExpanded={isActive} id={childTitle} current={isCurrent}>
+                  {childTitle}
+                  <TreeView.SubTree data-testid="sidebar-article-group">
+                    {childPage.childPages.map((cp) => {
+                      return renderTerminalPageLink(cp)
+                    })}
+                  </TreeView.SubTree>
+                </TreeView.Item>
+              </div>
+            )
+          })}
         </>
-      }
-    </details>
+      ) : page.childPages[0]?.documentType === 'article' ? (
+        <div data-testid="sidebar-article-group">
+          {page.childPages.map((cp) => {
+            return renderTerminalPageLink(cp)
+          })}
+        </div>
+      ) : null}
+    </>
   )
 }

components/sidebar/RestCollapsibleSection.module.scss

@@ -0,0 +1,14 @@
+.operationWidth {
+  li div div span {
+    white-space: normal !important;
+    padding: 2px;
+  }
+}
+
+.toggleHover {
+  li div div {
+    &:hover {
+      background-color: transparent !important;
+    }
+  }
+}