Separate REST error responses (github#26082)

* Add error response variant

* Add response table styles

* Already filtered

* Don't need these styles

* Fallback to http code status messsage

* Add translation strings

* Proper heading level

Co-authored-by: Grace Park <[email protected]>

* Match table styling with params table

* Typing unnecessary

Co-authored-by: Peter Bengtsson <[email protected]>

* Typing unnecessary

Co-authored-by: Peter Bengtsson <[email protected]>

* Work with the status code as a number

* Move error responses to operation end

* Make RestResponseTable a standalone component

Co-authored-by: Grace Park <[email protected]>
Co-authored-by: Peter Bengtsson <[email protected]>

Author: 3 people

components/rest/RestOperation.tsx

@@ -48,6 +48,7 @@ export function RestOperation({ operation }: Props) {
       {previews && (
         <RestPreviewNotice slug={operation.slug} previews={operation['x-github'].previews} />
       )}
+      <RestResponse responses={operation.responses} variant="error" />
     </div>
   )
 }

components/rest/RestResponse.tsx

@@ -1,14 +1,44 @@
 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({ responses }: Props) {
+export function RestResponse(props: Props) {
+  const { responses, variant = 'non-error' } = props
+  const { t } = useTranslation('products')
+
+  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 (
     <>
-      {responses.map((response: CodeResponse, index: number) => {
+      {filteredResponses.map((response, index) => {
         return (
           <div key={`${response.httpStatusMessage}-${index}}`}>
             <h4 dangerouslySetInnerHTML={{ __html: response.description }} />

components/rest/RestResponseTable.module.scss

@@ -0,0 +1,48 @@
+.restResponseTable {
+  table-layout: fixed !important;
+
+  thead {
+    tr {
+      border-top: none;
+
+      th {
+        border: 0;
+        font-weight: normal;
+      }
+
+      th:first-child {
+        width: 25%;
+      }
+
+      th:nth-child(2) {
+        width: 75%;
+      }
+    }
+  }
+
+  tr:nth-child(2n) {
+    background: none !important;
+  }
+
+  td {
+    padding: 0.75rem 0.5rem !important;
+    border: 0 !important;
+    vertical-align: top;
+    width: 100%;
+  }
+
+  tbody {
+    tr td:first-child {
+      width: 30%;
+      font-weight: bold;
+    }
+
+    tr td:nth-child(2) {
+      width: 70%;
+    }
+
+    table tr td:not(:first-child) {
+      font-weight: normal;
+    }
+  }
+}

components/rest/RestResponseTable.tsx

@@ -0,0 +1,45 @@
+import cx from 'classnames'
+import { CodeResponse } from './types'
+import { useTranslation } from 'components/hooks/useTranslation'
+import styles from './RestResponseTable.module.scss'
+
+type Props = {
+  heading: string
+  responses: Array<CodeResponse>
+}
+
+export function RestResponseTable({ heading, responses }: Props) {
+  const { t } = useTranslation('products')
+
+  return (
+    <>
+      <h4>{heading}</h4>
+      <table className={cx(styles.restResponseTable)}>
+        <thead>
+          <tr className="text-left">
+            <th>{t('rest.reference.http_status_code')}</th>
+            <th>{t('rest.reference.description')}</th>
+          </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>
+            )
+          })}
+        </tbody>
+      </table>
+    </>
+  )
+}

data/ui.yml

@@ -113,6 +113,8 @@ products:
       notes: Notes
       parameters: Parameters
       response: Response
+      error_codes: Error Codes
+      http_status_code: HTTP Status Code
       code_sample: Code sample
       code_samples: Code samples
       preview_notice: Preview notice