diff --git a/components/rest/BodyParametersRows.tsx b/components/rest/BodyParametersRows.tsx new file mode 100644 index 000000000000..4865c4c802d7 --- /dev/null +++ b/components/rest/BodyParametersRows.tsx @@ -0,0 +1,45 @@ +import { Fragment } from 'react' +import type { BodyParameter } from './types' +import { useTranslation } from 'components/hooks/useTranslation' +import { ChildBodyParametersRows } from './ChildBodyParametersRows' + +type Props = { + slug: string + bodyParameters: BodyParameter[] +} + +export function BodyParameterRows({ slug, bodyParameters }: Props) { + const { t } = useTranslation('products') + + return ( + <> + {bodyParameters.map((bodyParam) => { + return ( + + + + {bodyParam.name} + + {bodyParam.type} + {bodyParam.in} + +
+ {bodyParam.default && ( +

+ {t('rest.reference.default')}: {bodyParam.default} +

+ )} + + + {bodyParam.childParamsGroups && bodyParam.childParamsGroups.length > 0 && ( + + )} + + ) + })} + + ) +} diff --git a/components/rest/ChildBodyParametersRows.tsx b/components/rest/ChildBodyParametersRows.tsx new file mode 100644 index 000000000000..8ba7d8fa18b6 --- /dev/null +++ b/components/rest/ChildBodyParametersRows.tsx @@ -0,0 +1,62 @@ +import { useTranslation } from 'components/hooks/useTranslation' +import type { ChildParamsGroup } from './types' + +type Props = { + slug: string + childParamsGroups: ChildParamsGroup[] +} + +export function ChildBodyParametersRows({ slug, childParamsGroups }: Props) { + const { t } = useTranslation('products') + + return ( + + + {childParamsGroups?.map((childParamGroup) => { + return ( +
+ + + + + + + + + + {childParamGroup.params.map((childParam) => { + return ( + + + + + ) + })} + +
+ {t('rest.reference.name')} ({t('rest.reference.type')}) + {t('rest.reference.description')}
+ {childParam.name} ({childParam.type}) + +
+
+
+ ) + })} + + + ) +} diff --git a/components/rest/CodeBlock.tsx b/components/rest/CodeBlock.tsx index 1b9d62ac536c..2ef6e52c8994 100644 --- a/components/rest/CodeBlock.tsx +++ b/components/rest/CodeBlock.tsx @@ -15,10 +15,10 @@ export function CodeBlock({ verb, codeBlock, setHTML = false }: Props) { dangerouslySetInnerHTML={{ __html: codeBlock }} /> ) : ( - 
+    
       
         {verb && (
-          
+          
             {verb}
           
         )}{' '}
diff --git a/components/rest/ParameterRows.tsx b/components/rest/ParameterRows.tsx
new file mode 100644
index 000000000000..993b837b84b6
--- /dev/null
+++ b/components/rest/ParameterRows.tsx
@@ -0,0 +1,34 @@
+import { Parameter } from './types'
+import { useTranslation } from 'components/hooks/useTranslation'
+
+type Props = {
+  parameters: Parameter[]
+}
+
+export function ParameterRows({ parameters }: Props) {
+  const { t } = useTranslation('products')
+
+  return (
+    <>
+      {parameters.map((param) => (
+        
+          
+            {param.name}
+          
+          {param.schema.type}
+          {param.in}
+          
+            {param.descriptionHTML && (
+              

+            )}
+            {param.schema.default && (
+              

+                {t('rest.reference.default')}: {param.schema.default}
+              

+            )}
+          
+        
+      ))}
+    
+  )
+}
diff --git a/components/rest/PreviewsRow.tsx b/components/rest/PreviewsRow.tsx
new file mode 100644
index 000000000000..aa338a8f1689
--- /dev/null
+++ b/components/rest/PreviewsRow.tsx
@@ -0,0 +1,39 @@
+import { xGitHub } from './types'
+import { useTranslation } from 'components/hooks/useTranslation'
+
+type Props = {
+  slug: string
+  hasRequiredPreviews: boolean
+  xGitHub: xGitHub
+}
+
+export function PreviewsRow({ slug, hasRequiredPreviews, xGitHub }: Props) {
+  const { t } = useTranslation('products')
+
+  return (
+    
+      
+        accept
+      
+      string
+      header
+      
+        {hasRequiredPreviews ? (
+          
{t('rest.reference.preview_notice_to_change')}.

+        ) : (
+          

+            Setting to
+            application/vnd.github.v3+json is recommended.
+            {xGitHub.previews && (
+              
+                {xGitHub.previews.length > 1
+                  ? ` ${t('rest.reference.see_preview_notices')}`
+                  : ` ${t('rest.reference.see_preview_notice')}`}
+              
+            )}
+          

+        )}
+      
+    
+  )
+}
diff --git a/components/rest/RestCodeSamples.tsx b/components/rest/RestCodeSamples.tsx
index de82b416923a..f3ce37530802 100644
--- a/components/rest/RestCodeSamples.tsx
+++ b/components/rest/RestCodeSamples.tsx
@@ -12,15 +12,15 @@ export function RestCodeSamples({ slug, xCodeSamples }: Props) {
 
   return (
     <>
-      

+      

         {`${t('rest.reference.code_samples')}`}
       

-      {xCodeSamples.map((sample: xCodeSample, index: number) => {
+      {xCodeSamples.map((sample, index) => {
         const sampleElements: JSX.Element[] = []
         if (sample.lang !== 'Ruby') {
           sampleElements.push(
             sample.lang === 'JavaScript' ? (
-              

+              

                 {sample.lang} (
                 
                   @octokit/core.js
@@ -28,9 +28,7 @@ export function RestCodeSamples({ slug, xCodeSamples }: Props) {
                 )
               

             ) : (
-              

-                {sample.lang}
-              

+              
{sample.lang}

             )
           )
           sampleElements.push(
diff --git a/components/rest/RestParameterTable.module.scss b/components/rest/RestParameterTable.module.scss
index 45531a566521..4796e0d9edac 100644
--- a/components/rest/RestParameterTable.module.scss
+++ b/components/rest/RestParameterTable.module.scss
@@ -1,10 +1,5 @@
 .parameterTable {
-  display: table;
-  border-collapse: collapse;
-  position: relative;
-  width: 100%;
-  line-height: 1.5;
-  table-layout: auto;
+  table-layout: fixed !important;
 
   thead {
     tr {
@@ -25,6 +20,7 @@
     padding: 0.75rem 0.5rem !important;
     border: 0 !important;
     vertical-align: top;
+    width: 100%;
   }
 
   tbody {
diff --git a/components/rest/RestParameterTable.tsx b/components/rest/RestParameterTable.tsx
index 74c9acc02190..2732588beb66 100644
--- a/components/rest/RestParameterTable.tsx
+++ b/components/rest/RestParameterTable.tsx
@@ -1,7 +1,10 @@
 import cx from 'classnames'
 import { useTranslation } from 'components/hooks/useTranslation'
-import { BodyParameter, ChildParameter, ChildParamsGroup, Parameter, xGitHub } from './types'
+import { BodyParameter, Parameter, xGitHub } from './types'
 import styles from './RestParameterTable.module.scss'
+import { PreviewsRow } from './PreviewsRow'
+import { ParameterRows } from './ParameterRows'
+import { BodyParameterRows } from './BodyParametersRows'
 
 type Props = {
   slug: string
@@ -11,8 +14,6 @@ type Props = {
   bodyParameters: Array
 }
 
-let nestedChildParamsRowIndex = 0
-
 export function RestParameterTable({
   slug,
   hasRequiredPreviews,
@@ -21,146 +22,6 @@ export function RestParameterTable({
   bodyParameters,
 }: Props) {
   const { t } = useTranslation('products')
-  const tableRows: JSX.Element[] = []
-
-  function addPreviewsRow() {
-    tableRows.push(
-      /* Previews require an `accept` header. These used to be documented
-      as `operation.parameters` but have moved to `operation.x-github.previews` */
-      
-        
-          accept
-        
-        string
-        header
-        
-          {hasRequiredPreviews ? (
-            
This API is under preview and subject to change.

-          ) : (
-            

-              Setting to
-              application/vnd.github.v3+json is recommended.
-              {xGitHub.previews && (
-                
-                  {xGitHub.previews.length > 1
-                    ? ` ${t('rest.reference.see_preview_notices')}`
-                    : ` ${t('rest.reference.see_preview_notice')}`}
-                
-              )}
-            

-          )}
-        
-      
-    )
-  }
-
-  function addParametersRows(parameters: Parameter[]) {
-    parameters.forEach((param: Parameter, index: number) => {
-      tableRows.push(
-        
-          
-            {param.name}
-          
-          {param.schema.type}
-          {param.in}
-          
-            

-            {param.schema.default && (
-              

-                Default: {param.schema.default}
-              

-            )}
-          
-        
-      )
-    })
-  }
-
-  function addBodyParametersRows(bodyParameters: BodyParameter[]) {
-    bodyParameters.forEach((bodyParam: BodyParameter, index: number) => {
-      tableRows.push(
-        
-          
-            {bodyParam.name}
-          
-          {bodyParam.type}
-          {bodyParam.in}
-          
-            

-            {bodyParam.default && (
-              

-                Default: {bodyParam.default}
-              

-            )}
-          
-        
-      )
-
-      // Adding the nested rows
-      if (bodyParam.childParamsGroups && bodyParam.childParamsGroups.length > 0) {
-        tableRows.push(
-          
-            
-              {bodyParam.childParamsGroups.map(
-                (childParamGroup: ChildParamsGroup, index: number) => {
-                  return (
-                    

-                      
-                      

-                      
-                        
-                          
-                            
-                            
-                          
-                        
-                        
-                          {childParamGroup.params.map(
-                            (childParam: ChildParameter, index: number) => {
-                              return (
-                                
-                                  
-                                  
-                                
-                              )
-                            }
-                          )}
-                        
-                      
Name (Type)Description

-                                    {childParam.name} ({childParam.type})
-                                  
-                                    

-                                  

-                    

-                  )
-                }
-              )}
-            
-          
-        )
-        nestedChildParamsRowIndex++
-      }
-    })
-  }
-
-  function renderTableRows() {
-    addPreviewsRow()
-    addParametersRows(parameters)
-    addBodyParametersRows(bodyParameters)
-    return tableRows
-  }
 
   return (
     <>
@@ -170,13 +31,17 @@ export function RestParameterTable({
       
-            
-            
-            
-            
+            
+            
+            
+            
-        {renderTableRows()}
+        
+          
+          
+          
+        

         
           
NameTypeInDescription{t('rest.reference.name')}{t('rest.reference.type')}{t('rest.reference.in')}{t('rest.reference.description')}
           

         
       

     
   )
diff --git a/data/ui.yml b/data/ui.yml
index 275a14a82939..98fff7d844e8 100644
--- a/data/ui.yml
+++ b/data/ui.yml
@@ -104,6 +104,11 @@ products:
       deprecation_notice: Deprecation notice
   rest:
     reference:
+      default: Default
+      name: Name
+      in: In
+      type: Type
+      description: Description
       notes: Notes
       parameters: Parameters
       response: Response
@@ -114,6 +119,7 @@ products:
       see_preview_notice: See preview notice
       see_preview_notices: See preview notices
       preview_header_is_required: This header is required
+      preview_notice_to_change: This API is under preview and subject to change
       works_with_github_apps: Works with GitHub Apps
 footer:
   all_rights_reserved: All rights reserved