From 9b39fcbce37155dc98362b07ef329742ab708c32 Mon Sep 17 00:00:00 2001 From: Grace Park Date: Tue, 1 Mar 2022 09:39:00 -0800 Subject: [PATCH] Refactor parameter tables (#25676) * reactify rest pages * add space * speed up pages by only sending applicable rest operations * reactify rest operation part 1 * remove restpage * sync translations directory with origin/main * remove translation file * clean up * fix openapi tests * fix tests * remove unused variables * add apps available page component (#25086) * simplify getRest module * add code sample component * revert translation files * revert translation files * update tests * add rest response and notes * refactor and create codeblock and add styling changes from design systems * nested all returned jsx into one single fragment * update style name * remove unnecessary div * update title and add response max height and overflow * refactor entry to RestOperation component * cleanup types and unique keys * update decorated files * Rest page data (#25346) * update endpoints for apps layout * remove null type * Update components/rest/CodeBlock.tsx Co-authored-by: Peter Bengtsson * updating renderTableRows * cannot set p tag - should be div * Ashs new feedback on the code blocks * remove rest html pages * Removing and updating decorated files (#25484) * removing and updating decorated files * bring back default tool * fix tests * add types * fix styling in nested tables * semantic changes * adding unique key index * remove unnecessary styling * update styling for categories * place app file in own directory * update types * update function in code samples * fix some bad conflict resolution * add rest banner back to rest pages * Move all rest Markdown to data directory (#25598) * Update components/rest/RestNotes.tsx Co-authored-by: Peter Bengtsson * adding translation (#25673) * revert change to Dockerfile * refactor parameter tables * move toc to server side * adding missing files * updating spacing * update body table * Update components/rest/BodyParametersRows.tsx Co-authored-by: Peter Bengtsson * adding Fragment * remove key from tr since it is on Fragment * move around imports * Update components/rest/BodyParametersRows.tsx Co-authored-by: Peter Bengtsson * Update components/rest/BodyParametersRows.tsx Co-authored-by: Peter Bengtsson * Update components/rest/ParameterRows.tsx Co-authored-by: Peter Bengtsson * Update components/rest/ParameterRows.tsx Co-authored-by: Peter Bengtsson * Update components/rest/BodyParametersRows.tsx Co-authored-by: Peter Bengtsson * Update components/rest/BodyParametersRows.tsx Co-authored-by: Peter Bengtsson * Update components/rest/BodyParametersRows.tsx Co-authored-by: Peter Bengtsson * small changes and adding anchor link to table instead of empty div * adding name type and description to translation * adding more translation * refactor and break out ChildBodyParameterRows * fix table css * check * change the rest parameters table to fixed to show all description * update name to match * run prettier * Update components/rest/RestCodeSamples.tsx Co-authored-by: Peter Bengtsson * Update components/rest/ChildBodyParametersRows.tsx Co-authored-by: Peter Bengtsson * Update components/rest/ChildBodyParametersRows.tsx Co-authored-by: Peter Bengtsson * Update components/rest/BodyParametersRows.tsx Co-authored-by: Peter Bengtsson * updating CHildBodyParameterRows * run prettier Co-authored-by: Rachael Sewell Co-authored-by: Peter Bengtsson --- components/rest/BodyParametersRows.tsx | 45 +++++ components/rest/ChildBodyParametersRows.tsx | 62 +++++++ components/rest/CodeBlock.tsx | 4 +- components/rest/ParameterRows.tsx | 34 ++++ components/rest/PreviewsRow.tsx | 39 +++++ components/rest/RestCodeSamples.tsx | 10 +- .../rest/RestParameterTable.module.scss | 8 +- components/rest/RestParameterTable.tsx | 161 ++---------------- data/ui.yml | 6 + 9 files changed, 207 insertions(+), 162 deletions(-) create mode 100644 components/rest/BodyParametersRows.tsx create mode 100644 components/rest/ChildBodyParametersRows.tsx create mode 100644 components/rest/ParameterRows.tsx create mode 100644 components/rest/PreviewsRow.tsx 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