Permissions statement rendering on automated pages (github#33718)

components/article/ArticlePage.tsx

@@ -12,6 +12,7 @@ import { useTranslation } from 'components/hooks/useTranslation'
 import { LearningTrackNav } from './LearningTrackNav'
 import { MarkdownContent } from 'components/ui/MarkdownContent'
 import { Lead } from 'components/ui/Lead'
+import { PermissionsStatement } from 'components/ui/PermissionsStatement'
 import { ArticleGridLayout } from './ArticleGridLayout'
 import { PlatformPicker } from 'components/article/PlatformPicker'
 import { ToolPicker } from 'components/article/ToolPicker'
@@ -89,12 +90,7 @@ export const ArticlePage = () => {
                 </Lead>
               )}
 
-              {permissions && (
-                <div className="permissions-statement pl-3 my-4">
-                  <div className="text-bold pr-2">{t('permissions_statement')}</div>
-                  <div dangerouslySetInnerHTML={{ __html: permissions }} />
-                </div>
-              )}
+              {permissions && <PermissionsStatement permissions={permissions} />}
 
               {includesPlatformSpecificContent && <PlatformPicker />}
               {includesToolSpecificContent && <ToolPicker />}

components/article/AutomatedPage.tsx

@@ -2,6 +2,7 @@ import { DefaultLayout } from 'components/DefaultLayout'
 import { ArticleTitle } from 'components/article/ArticleTitle'
 import { MarkdownContent } from 'components/ui/MarkdownContent'
 import { Lead } from 'components/ui/Lead'
+import { PermissionsStatement } from 'components/ui/PermissionsStatement'
 import { ArticleGridLayout } from './ArticleGridLayout'
 import { MiniTocs } from 'components/ui/MiniTocs'
 import { useAutomatedPageContext } from 'components/context/AutomatedPageContext'
@@ -13,7 +14,8 @@ type Props = {
 }
 
 export const AutomatedPage = ({ children }: Props) => {
-  const { title, intro, renderedPage, miniTocItems, product } = useAutomatedPageContext()
+  const { title, intro, renderedPage, miniTocItems, product, permissions } =
+    useAutomatedPageContext()
 
   return (
     <DefaultLayout>
@@ -30,6 +32,8 @@ export const AutomatedPage = ({ children }: Props) => {
                 </Lead>
               )}
 
+              {permissions && <PermissionsStatement permissions={permissions} />}
+
               {product && (
                 <Callout
                   variant="success"

components/context/AutomatedPageContext.tsx

@@ -7,6 +7,7 @@ export type AutomatedPageContextT = {
   renderedPage: string | JSX.Element[]
   miniTocItems: Array<MiniTocItem>
   product?: string
+  permissions?: string
 }
 
 export const AutomatedPageContext = createContext<AutomatedPageContextT | null>(null)
@@ -32,5 +33,6 @@ export const getAutomatedPageContextFromRequest = (req: any): AutomatedPageConte
     renderedPage: req.context.renderedPage || '',
     miniTocItems: req.context.miniTocItems || [],
     product: page.product || '',
+    permissions: page.permissions || '',
   }
 }

components/rest/RestReferencePage.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 import cx from 'classnames'
 
 import { DefaultLayout } from 'components/DefaultLayout'
 import { MarkdownContent } from 'components/ui/MarkdownContent'
 import { Lead } from 'components/ui/Lead'
+import { PermissionsStatement } from 'components/ui/PermissionsStatement'
 import { RestOperation } from './RestOperation'
 import { useAutomatedPageContext } from 'components/context/AutomatedPageContext'
 import { Operation } from './types'
@@ -18,7 +19,8 @@ export type StructuredContentT = {
 }
 
 export const RestReferencePage = ({ restOperations }: StructuredContentT) => {
-  const { title, intro, renderedPage } = useAutomatedPageContext()
+  const { title, intro, renderedPage, permissions } = useAutomatedPageContext()
+
   // Scrollable code blocks in our REST API docs and elsewhere aren't accessible
   // via keyboard navigation without setting tabindex="0".  But we don't want to set
   // this attribute on every `<pre>` code block, only the ones where there are scroll
@@ -53,6 +55,9 @@ export const RestReferencePage = ({ restOperations }: StructuredContentT) => {
             {intro}
           </Lead>
         )}
+
+        {permissions && <PermissionsStatement permissions={permissions} />}
+
         {renderedPage && <MarkdownContent className="pt-3 pb-4">{renderedPage}</MarkdownContent>}
         {restOperations.length > 0 && (
           <MarkdownContent className="pt-3 pb-4">

components/ui/PermissionsStatement/PermissionsStatement.module.scss

@@ -0,0 +1,3 @@
+.permissions_statement {
+  border-left: 5px solid var(--color-border-muted);
+}

components/ui/PermissionsStatement/PermissionsStatement.tsx

@@ -0,0 +1,22 @@
+import cx from 'classnames'
+
+import styles from './PermissionsStatement.module.scss'
+import { useTranslation } from 'components/hooks/useTranslation'
+
+type Props = {
+  permissions: string
+}
+
+export function PermissionsStatement({ permissions }: Props) {
+  const { t } = useTranslation('pages')
+  return (
+    <div
+      className={cx(styles.permissions_statement, 'pl-3 my-4')}
+      data-search="hide"
+      data-testid="permissions-statement"
+    >
+      <div className="text-bold pr-2">{t('permissions_statement')}</div>
+      <div dangerouslySetInnerHTML={{ __html: permissions }} />
+    </div>
+  )
+}

components/ui/PermissionsStatement/index.ts

@@ -0,0 +1 @@
+export { PermissionsStatement } from './PermissionsStatement'

stylesheets/extended-markdown.scss

@@ -38,7 +38,3 @@
 .warning {
   font-weight: normal;
 }
-
-.permissions-statement {
-  border-left: 5px solid var(--color-border-muted);
-}

tests/rendering/server.js

@@ -215,7 +215,7 @@ describe('server', () => {
     const $ = await getDOM(
       '/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site'
     )
-    expect($('div.permissions-statement').text()).toContain('GitHub Pages site')
+    expect($('[data-testid="permissions-statement"]').text()).toContain('GitHub Pages site')
   })
 
   // see issue 9678