Refactor openapi table func (#29924)

components/rest/ChildBodyParametersRows.tsx

@@ -1,58 +1,57 @@
 import { useTranslation } from 'components/hooks/useTranslation'
 import { ParameterRow } from './ParameterRow'
-import type { ChildParamsGroup } from './types'
+import type { ChildParameter } from './types'
 
 type Props = {
   slug: string
-  childParamsGroups?: ChildParamsGroup[]
+  childParamsGroups: ChildParameter[]
+  parentName: string
+  parentType: string
 }
 
-export function ChildBodyParametersRows({ slug, childParamsGroups }: Props) {
+export function ChildBodyParametersRows({
+  slug,
+  parentName,
+  parentType,
+  childParamsGroups,
+}: Props) {
   const { t } = useTranslation('products')
 
   return (
-    <tr className="border-none">
+    <tr className="border-top-0">
       <td colSpan={4} className="has-nested-table">
-        {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) => (
+        <details className="ml-1">
+          <summary role="button" aria-expanded="false" className="keyboard-focus color-fg-muted">
+            <span className="d-inline-block mb-3" id={`${slug}-${parentName}-${parentType}`}>
+              Properties of the
+              <code>{parentName}</code>
+              {parentType}
+            </span>
+          </summary>
+          <table id={`${parentName}-object`} className="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>
+              {childParamsGroups.map((childParam) => {
+                return (
                   <ParameterRow
-                    name={childParam.name}
-                    description={childParam.description}
-                    type={childParam.type}
-                    isRequired={childParam.isRequired}
-                    defaultValue={childParam.default}
-                    enumValues={childParam.enum}
+                    rowParams={childParam}
                     slug={slug}
                     isChild={true}
-                    key={`${index}-${childParam}`}
+                    key={childParam.name}
                   />
-                ))}
-              </tbody>
-            </table>
-          </details>
-        ))}
+                )
+              })}
+            </tbody>
+          </table>
+        </details>
       </td>
     </tr>
   )

components/rest/ParameterRow.tsx

@@ -1,44 +1,24 @@
 import { useTranslation } from 'components/hooks/useTranslation'
 import { ChildBodyParametersRows } from './ChildBodyParametersRows'
-import type { ChildParamsGroup } from './types'
+import type { ChildParameter } from './types'
 
 type Props = {
-  name: string
-  type: string | string[]
-  description: string
-  isRequired?: boolean
-  defaultValue?: string
-  enumValues?: string[]
+  rowParams: ChildParameter
   slug: string
-  childParamsGroups?: ChildParamsGroup[] | null
   numPreviews?: number
   isChild?: boolean
 }
 
-export function ParameterRow({
-  name,
-  type,
-  description,
-  isRequired,
-  defaultValue,
-  enumValues,
-  slug,
-  childParamsGroups = null,
-  numPreviews = 0,
-  isChild = false,
-}: Props) {
+export function ParameterRow({ rowParams, slug, numPreviews = 0, isChild = false }: Props) {
   const { t } = useTranslation('products')
-
   return (
     <>
       <tr className={`${isChild ? 'color-bg-subtle' : ''}`}>
-        <td className={`${isChild ? 'pl-2' : ''}`}>
+        <td className={`${isChild ? 'px-3' : ''}`}>
           <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 ? (
+            <code className={`text-bold ${isChild ? 'f6' : 'f5'}`}>{rowParams.name}</code>
+            <span className="color-fg-muted pl-2 f5">{rowParams.type}</span>
+            {rowParams.isRequired ? (
               <span className={`color-fg-attention f5 ${isChild ? 'pl-3' : 'float-right'}`}>
                 {t('rest.reference.required')}
               </span>
@@ -46,7 +26,7 @@ export function ParameterRow({
           </div>
 
           <div className="pl-1 pt-2 color-fg-muted f5">
-            <div dangerouslySetInnerHTML={{ __html: description }} />
+            <div dangerouslySetInnerHTML={{ __html: rowParams.description }} />
             {numPreviews > 0 && (
               <a href={`#${slug}-preview-notices`} className="d-inline">
                 {numPreviews > 1
@@ -55,18 +35,18 @@ export function ParameterRow({
               </a>
             )}
             <div className="pt-2">
-              {defaultValue !== undefined && (
+              {rowParams.default && (
                 <p>
                   <span>{t('rest.reference.default')}: </span>
-                  <code>{defaultValue.toString()}</code>
+                  <code>{rowParams.default}</code>
                 </p>
               )}
-              {enumValues && (
+              {rowParams.enum && rowParams.enum.length && (
                 <p>
                   <span>{t('rest.reference.enum_description_title')}: </span>
 
-                  {enumValues.map((item, index) => {
-                    return index !== enumValues.length - 1 ? (
+                  {rowParams.enum.map((item, index, array) => {
+                    return index !== array.length - 1 ? (
                       <span key={item + index}>
                         <code>{item}</code>,{' '}
                       </span>
@@ -82,8 +62,13 @@ export function ParameterRow({
           </div>
         </td>
       </tr>
-      {childParamsGroups && childParamsGroups.length > 0 && (
-        <ChildBodyParametersRows slug={slug} childParamsGroups={childParamsGroups} />
+      {rowParams.childParamsGroups && rowParams.childParamsGroups.length > 0 && (
+        <ChildBodyParametersRows
+          slug={slug}
+          parentName={rowParams.name}
+          parentType={rowParams.type}
+          childParamsGroups={rowParams.childParamsGroups}
+        />
       )}
     </>
   )

components/rest/RestParameterTable.tsx

@@ -42,10 +42,12 @@ export function RestParameterTable({ slug, numPreviews, parameters, bodyParamete
 
         <tbody>
           <ParameterRow
-            name={'accept'}
-            type={'string'}
-            description={`<p>Setting to <code>application/vnd.github+json</code> is recommended.</p>`}
-            isRequired={false}
+            rowParams={{
+              name: 'accept',
+              type: 'string',
+              description: `<p>Setting to <code>application/vnd.github+json</code> is recommended.</p>`,
+              isRequired: false,
+            }}
             slug={slug}
             numPreviews={numPreviews}
           />
@@ -65,12 +67,14 @@ export function RestParameterTable({ slug, numPreviews, parameters, bodyParamete
               </tr>
               {pathParams.map((param, index) => (
                 <ParameterRow
-                  name={param.name}
-                  type={param.schema.type}
-                  description={param.description}
-                  isRequired={param.required}
-                  defaultValue={param.schema.default}
-                  enumValues={param.schema.enum}
+                  rowParams={{
+                    name: param.name,
+                    type: param.schema.type,
+                    description: param.description,
+                    isRequired: param.required,
+                    default: param.schema.default,
+                    enum: param.schema.enum,
+                  }}
                   slug={slug}
                   key={`${index}-${param}`}
                 />
@@ -95,12 +99,14 @@ export function RestParameterTable({ slug, numPreviews, parameters, bodyParamete
 
               {queryParams.map((param, index) => (
                 <ParameterRow
-                  name={param.name}
-                  type={param.schema.type}
-                  description={param.description}
-                  isRequired={param.required}
-                  defaultValue={param.schema.default}
-                  enumValues={param.schema.enum}
+                  rowParams={{
+                    name: param.name,
+                    type: param.schema.type,
+                    description: param.description,
+                    isRequired: param.required,
+                    default: param.schema.default,
+                    enum: param.schema.enum,
+                  }}
                   slug={slug}
                   key={`${index}-${param}`}
                 />
@@ -124,17 +130,7 @@ export function RestParameterTable({ slug, numPreviews, parameters, bodyParamete
               </tr>
 
               {bodyParameters.map((param, index) => (
-                <ParameterRow
-                  name={param.name}
-                  type={param.type}
-                  description={param.description}
-                  isRequired={param.isRequired}
-                  defaultValue={param.default}
-                  enumValues={param.enum}
-                  slug={slug}
-                  childParamsGroups={param.childParamsGroups}
-                  key={`${index}-${param}`}
-                />
+                <ParameterRow rowParams={param} slug={slug} key={`${index}-${param}`} />
               ))}
             </>
           )}

components/rest/types.ts

@@ -54,26 +54,20 @@ export interface BodyParameter {
   name: string
   description: string
   type: string
-  isRequired: boolean
+  isRequired?: boolean
   default?: string
   enum?: Array<string>
-  childParamsGroups?: Array<ChildParamsGroup>
-}
-
-export interface ChildParamsGroup {
-  id: string
-  params: Array<ChildParameter>
-  parentName: string
-  parentType: string
+  childParamsGroups?: Array<ChildParameter>
 }
 
 export interface ChildParameter {
   name: string
   description: string
   type: string
-  isRequired: boolean
+  isRequired?: boolean
   enum?: Array<string>
   default?: string
+  childParamsGroups?: ChildParameter[]
 }
 
 export type ExampleT = {