change error codes table to all status codes table (github#26518)

Author: rachmari

components/rest/RestOperation.tsx

@@ -6,14 +6,20 @@ import { RestResponse } from './RestResponse'
 import { Operation } from './types'
 import { RestNotes } from './RestNotes'
 import { RestPreviewNotice } from './RestPreviewNotice'
+import { useTranslation } from 'components/hooks/useTranslation'
+import { RestStatusCodes } from './RestStatusCodes'
 
 type Props = {
   operation: Operation
   index: number
 }
 
 export function RestOperation({ operation }: Props) {
+  const { t } = useTranslation('products')
   const previews = operation['x-github'].previews
+  const nonErrorResponses = operation.responses.filter(
+    (response) => parseInt(response.httpStatusCode) < 400
+  )
 
   return (
     <div>
@@ -34,7 +40,7 @@ export function RestOperation({ operation }: Props) {
       {operation['x-codeSamples'] && operation['x-codeSamples'].length > 0 && (
         <RestCodeSamples slug={operation.slug} xCodeSamples={operation['x-codeSamples']} />
       )}
-      <RestResponse responses={operation.responses} />
+      <RestResponse responses={nonErrorResponses} />
       {(operation.notes.length > 0 || operation['x-github'].enabledForGitHubApps) && (
         <RestNotes
           notes={operation.notes}
@@ -44,7 +50,7 @@ export function RestOperation({ operation }: Props) {
       {previews && (
         <RestPreviewNotice slug={operation.slug} previews={operation['x-github'].previews} />
       )}
-      <RestResponse responses={operation.responses} variant="error" />
+      <RestStatusCodes heading={t('rest.reference.status_codes')} responses={operation.responses} />
     </div>
   )
 }

components/rest/RestResponse.tsx

@@ -1,44 +1,20 @@
 import { CodeResponse } from './types'
 import { CodeBlock } from './CodeBlock'
-import { useTranslation } from 'components/hooks/useTranslation'
-import { RestResponseTable } from './RestResponseTable'
 
 type Props = {
   responses: Array<CodeResponse>
-  variant?: 'non-error' | 'error'
 }
 
 export function RestResponse(props: Props) {
-  const { responses, variant = 'non-error' } = props
-  const { t } = useTranslation('products')
+  const { responses } = props
 
   if (!responses || responses.length === 0) {
     return null
   }
 
-  const filteredResponses = responses.filter((response) => {
-    const responseCode = parseInt(response.httpStatusCode)
-
-    if (variant === 'error') {
-      return responseCode >= 400
-    } else {
-      return responseCode < 400
-    }
-  })
-
-  if (filteredResponses.length === 0) {
-    return null
-  }
-
-  if (variant === 'error') {
-    return (
-      <RestResponseTable heading={t('rest.reference.error_codes')} responses={filteredResponses} />
-    )
-  }
-
   return (
     <>
-      {filteredResponses.map((response, index) => {
+      {responses.map((response, index) => {
         return (
           <div key={`${response.httpStatusMessage}-${index}}`}>
             <h4 dangerouslySetInnerHTML={{ __html: response.description }} />

components/rest/RestResponseTable.module.scss

@@ -8,6 +8,7 @@
       th {
         border: 0;
         font-weight: normal;
+        background-color: transparent;
       }
 
       th:first-child {

components/rest/RestResponseTable.tsx renamed to components/rest/RestStatusCodes.tsx

@@ -8,7 +8,7 @@ type Props = {
   responses: Array<CodeResponse>
 }
 
-export function RestResponseTable({ heading, responses }: Props) {
+export function RestStatusCodes({ heading, responses }: Props) {
   const { t } = useTranslation('products')
 
   return (
@@ -22,22 +22,21 @@ export function RestResponseTable({ heading, responses }: Props) {
           </tr>
         </thead>
         <tbody>
-          {responses.map((response, index) => {
-            return (
-              <tr key={`${response.description}-${index}}`}>
-                <td>
-                  <code>{response.httpStatusCode}</code>
-                </td>
-                <td>
-                  {response.description ? (
-                    <div dangerouslySetInnerHTML={{ __html: response.description }} />
-                  ) : (
-                    response.httpStatusMessage
-                  )}
-                </td>
-              </tr>
-            )
-          })}
+          {responses.map((response, index) => (
+            <tr key={`${response.description}-${index}}`}>
+              <td>
+                <code>{response.httpStatusCode}</code>
+              </td>
+              <td>
+                {response.description &&
+                response.description.toLowerCase() !== '<p>response</p>' ? (
+                  <div dangerouslySetInnerHTML={{ __html: response.description }} />
+                ) : (
+                  response.httpStatusMessage
+                )}
+              </td>
+            </tr>
+          ))}
         </tbody>
       </table>
     </>

data/ui.yml

@@ -113,7 +113,7 @@ products:
       notes: Notes
       parameters: Parameters
       response: Response
-      error_codes: Error Codes
+      status_codes: Status codes
       http_status_code: HTTP Status Code
       code_sample: Code sample
       code_samples: Code samples