REST two-pane layout (github#26954)

adisu2022 · May 2, 2022 · 5f4f858 · 5f4f858
1 parent 50c8da0
commit 5f4f858
Show file tree

Hide file tree

Showing 35 changed files with 2,374,757 additions and 380,312 deletions.
diff --git a/components/lib/get-rest-code-samples.ts b/components/lib/get-rest-code-samples.ts
@@ -83,9 +83,9 @@ export function getGHExample(operation: Operation, codeSample: CodeSample) {
     requestBodyParams = Object.keys(codeSample.request.bodyParameters)
       .map((key) => {
         if (typeof codeSample.request.bodyParameters[key] === 'string') {
-          return `-f ${key}='${codeSample.request.bodyParameters[key]}'`
+          return `-f ${key}='${codeSample.request.bodyParameters[key]}'\n`
         } else {
-          return `-F ${key}=${codeSample.request.bodyParameters[key]}`
+          return `-F ${key}=${codeSample.request.bodyParameters[key]}\n`
         }
       })
       .join(' ')
@@ -97,7 +97,9 @@ export function getGHExample(operation: Operation, codeSample: CodeSample) {
     requestPath,
     requestBodyParams,
   ].filter(Boolean)
-  return `gh api \\\n  ${args.join(' \\\n  ')}`
+  return `# GitHub CLI api\n# https://cli.github.com/manual/gh_api\n\ngh api \\\n  ${args.join(
+    ' \\\n  '
+  )}`
 }
 
 /*
@@ -135,8 +137,14 @@ export function getJSExample(operation: Operation, codeSample: CodeSample) {
       queryParameters = `{?${queryParms.join(',')}}`
     }
   }
-
-  return `await octokit.request('${operation.verb.toUpperCase()} ${
+  const comment = `// Octokit.js\n// https://github.com/octokit/core.js#readme\n`
+  const require = `const octokit = new Octokit(${stringify(
+    { auth: 'personal-access-token123' },
+    null,
+    2
+  )})\n\n`
+
+  return `${comment}${require}await octokit.request('${operation.verb.toUpperCase()} ${
     operation.requestPath
   }${queryParameters}', ${stringify(parameters, null, 2)})`
 }
diff --git a/components/rest/BodyParametersRows.tsx b/components/rest/BodyParametersRows.tsx
diff --git a/components/rest/ChildBodyParametersRows.tsx b/components/rest/ChildBodyParametersRows.tsx
@@ -1,4 +1,5 @@
 import { useTranslation } from 'components/hooks/useTranslation'
+import { ParameterRow } from './ParameterRow'
 import type { ChildParamsGroup } from './types'
 
 type Props = {
@@ -12,50 +13,46 @@ export function ChildBodyParametersRows({ slug, childParamsGroups }: Props) {
   return (
     <tr className="border-none">
       <td colSpan={4} className="has-nested-table">
-        {childParamsGroups?.map((childParamGroup) => {
-          return (
-            <details key={childParamGroup.id}>
-              <summary
-                role="button"
-                aria-expanded="false"
-                className="keyboard-focus color-fg-muted"
-              >
-                <span className="d-inline-block mb-3" id={`${slug}-${childParamGroup.id}`}>
-                  Properties of the
-                  <code>{childParamGroup.parentName}</code>
-                  {childParamGroup.parentType}
-                </span>
-              </summary>
-              <table
-                id={`${childParamGroup.parentName}-object`}
-                className="ml-4 mb-4 mt-2 color-bg-subtle"
-              >
-                <thead>
-                  <tr>
-                    <th>
-                      {t('rest.reference.name')} ({t('rest.reference.type')})
-                    </th>
-                    <th>{t('rest.reference.description')}</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {childParamGroup.params.map((childParam) => {
-                    return (
-                      <tr key={`${childParam.name}-${childParam.description}`}>
-                        <td className="color-bg-subtle">
-                          <code>{childParam.name}</code> ({childParam.type})
-                        </td>
-                        <td className="color-bg-subtle">
-                          <div dangerouslySetInnerHTML={{ __html: childParam.description }} />
-                        </td>
-                      </tr>
-                    )
-                  })}
-                </tbody>
-              </table>
-            </details>
-          )
-        })}
+        {childParamsGroups?.map((childParamGroup) => (
+          <details key={childParamGroup.id}>
+            <summary role="button" aria-expanded="false" className="keyboard-focus color-fg-muted">
+              <span className="d-inline-block mb-3" id={`${slug}-${childParamGroup.id}`}>
+                Properties of the
+                <code>{childParamGroup.parentName}</code>
+                {childParamGroup.parentType}
+              </span>
+            </summary>
+            <table
+              id={`${childParamGroup.parentName}-object`}
+              className="ml-4 mb-4 mt-2 color-bg-subtle"
+            >
+              <thead className="visually-hidden">
+                <tr>
+                  <th>
+                    {`${t('rest.reference.name')}, ${t('rest.reference.type')}, ${t(
+                      'rest.reference.description'
+                    )}`}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {childParamGroup.params.map((childParam, index) => (
+                  <ParameterRow
+                    name={childParam.name}
+                    description={childParam.description}
+                    type={childParam.type}
+                    isRequired={childParam.isRequired}
+                    defaultValue={childParam.default}
+                    enumValues={childParam.enum}
+                    slug={slug}
+                    isChild={true}
+                    key={`${index}-${childParam}`}
+                  />
+                ))}
+              </tbody>
+            </table>
+          </details>
+        ))}
       </td>
     </tr>
   )

diff --git a/components/rest/CodeBlock.module.scss b/components/rest/CodeBlock.module.scss
diff --git a/components/rest/CodeBlock.tsx b/components/rest/CodeBlock.tsx
diff --git a/components/rest/ParameterRow.tsx b/components/rest/ParameterRow.tsx
@@ -0,0 +1,91 @@
+import { useTranslation } from 'components/hooks/useTranslation'
+import { ChildBodyParametersRows } from './ChildBodyParametersRows'
+import type { ChildParamsGroup } from './types'
+
+type Props = {
+  name: string
+  type: string | string[]
+  description: string
+  isRequired?: boolean
+  defaultValue?: string
+  enumValues?: string[]
+  slug: string
+  childParamsGroups?: ChildParamsGroup[] | null
+  numPreviews?: number
+  isChild?: boolean
+}
+
+export function ParameterRow({
+  name,
+  type,
+  description,
+  isRequired,
+  defaultValue,
+  // enumValues, //waiting on github #218747 to merge before adding enum support
+  slug,
+  childParamsGroups = null,
+  numPreviews = 0,
+  isChild = false,
+}: Props) {
+  const { t } = useTranslation('products')
+
+  return (
+    <>
+      <tr className={`${isChild ? 'color-bg-subtle' : ''}`}>
+        <td className={`${isChild ? 'pl-2' : ''}`}>
+          <div>
+            <code className={`text-bold ${isChild ? 'f6' : 'f5'}`}>{name}</code>
+            <span className="color-fg-muted pl-2 f5">
+              {Array.isArray(type) ? type.join(' or ') : type}
+            </span>
+            {isRequired ? (
+              <span className={`color-fg-attention f5 ${isChild ? 'pl-3' : 'float-right'}`}>
+                {t('rest.reference.required')}
+              </span>
+            ) : null}
+          </div>
+
+          <div className="pl-1 pt-2 color-fg-muted f5">
+            <div dangerouslySetInnerHTML={{ __html: description }} />
+            {numPreviews > 0 && (
+              <a href={`#${slug}-preview-notices`} className="d-inline">
+                {numPreviews > 1
+                  ? ` ${t('rest.reference.see_preview_notices')}`
+                  : ` ${t('rest.reference.see_preview_notice')}`}
+              </a>
+            )}
+            <div className="pt-2">
+              {defaultValue && (
+                <p>
+                  <span>{t('rest.reference.default')}: </span>
+                  <code>{defaultValue.toString()}</code>
+                </p>
+              )}
+              {/* waiting on github #218747 to merge before adding enum support */}
+              {/* {enumValues && (
+                <p>
+                  <span>{t('rest.reference.enum_description_title')}: </span>
+
+                  {enumValues.map((item, index) => {
+                    return index !== enumValues.length - 1 ? (
+                      <span key={item + index}>
+                        <code>{item}</code>,{' '}
+                      </span>
+                    ) : (
+                      <span key={item + index}>
+                        <code>{item}</code>
+                      </span>
+                    )
+                  })}
+                </p>
+              )} */}
+            </div>
+          </div>
+        </td>
+      </tr>
+      {childParamsGroups && childParamsGroups.length > 0 && (
+        <ChildBodyParametersRows slug={slug} childParamsGroups={childParamsGroups} />
+      )}
+    </>
+  )
+}
diff --git a/components/rest/ParameterRows.tsx b/components/rest/ParameterRows.tsx