@digi-frontend/dgate-api-documentation 1.0.95 → 1.0.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digi-frontend/dgate-api-documentation",
-  "version": "1.0.95",
+  "version": "1.0.97",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "types": "dist/types/index.d.ts",

package/src/helpers/layout.helper.ts

@@ -190,11 +190,27 @@ export const transformPathsArrayToOrigin = (paths: TransformedPathsArray): OpenA
             return param
           })
         }
+
+        // Get the original responses from the rest object
+        const originalResponses = rest.responses || {}
+
         methodAcc[type] = {
           ...copiedRest,
           tags,
           summary,
           responses: responses.reduce((respAcc, { code, content, headers }) => {
+            // Skip if:
+            // 1. This is a new code (not in original) AND
+            // 2. Both headers and content are empty
+            const isNewCode = !originalResponses[code]
+            const hasHeaders = Object.keys(headers || {}).length > 0
+            const hasContent =
+              Object.keys(validateBodyForResponse(content || {}, type) || {}).length > 0
+
+            if (isNewCode && !hasHeaders && !hasContent) {
+              return respAcc
+            }
+
             const formattedHeaders: Record<string, any> = {}
             if (headers) {
               for (const [key, value] of Object.entries(headers)) {
@@ -216,7 +232,7 @@ export const transformPathsArrayToOrigin = (paths: TransformedPathsArray): OpenA
                       },
                     },
                   }
-                : {},
+                : originalResponses[code]?.content || {},
               headers: formattedHeaders,
             }
             return respAcc

package/src/layout/docsComponents/DocsAside/DocsAside.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { EndpointData } from 'src/layout/docsLayout'
 import Codebox from '../Codebox/Codebox'
 import { Option, SelectGroup } from 'digitinary-ui'
@@ -6,24 +6,43 @@ import { httpStatusCodes } from '../../../constants/index'
 import { handleStatusColor } from '../../../helpers/methodAccordion.helper'
 import styles from './style.module.scss'
 
-const httpStatusCodeOptions: Option[] = httpStatusCodes.map((code) => ({
-  label: (
-    <div className={styles.statusCodeOptionContainer}>
-      <div
-        className={styles.statusCodeOptionCircle}
-        style={{ backgroundColor: handleStatusColor(code) }}
-      ></div>
-      <span>{code}</span>
-    </div>
-  ),
-  value: String(code),
-}))
-
 const DocsAside = ({ data }: { data: EndpointData }) => {
+  // Filter status codes to only include those with non-empty properties
+  const filteredStatusCodes = Object.keys(data?.responses || {}).filter((code) => {
+    const response = data.responses[code]
+    const contentType = Object.keys(response?.content || {})[0]
+    return response?.content?.[contentType]?.schema?.properties
+  })
+
+  // Create options for the select dropdown
+  const httpStatusCodeOptions = filteredStatusCodes.map((code) => ({
+    label: (
+      <div className={styles.statusCodeOptionContainer}>
+        <div
+          className={styles.statusCodeOptionCircle}
+          style={{ backgroundColor: handleStatusColor(code) }}
+        ></div>
+        <span>{code}</span>
+      </div>
+    ),
+    value: String(code),
+  }))
+
+  // Function to get default option
+  const getDefaultOption = () => {
+    const has200 = filteredStatusCodes.includes('200')
+    return has200
+      ? httpStatusCodeOptions.find((opt) => opt.value === '200')
+      : httpStatusCodeOptions[0] || null
+  }
+
+  useEffect(() => {
+    setSelectedResStatusCode(getDefaultOption())
+  }, [data])
   const [selectedResStatusCode, setSelectedResStatusCode] = useState(httpStatusCodeOptions[4])
   const currentResponse = Object.entries(data.responses)
     .map(([code, data]) => ({ code, data }))
-    .find((res) => res.code === selectedResStatusCode.value)
+    .find((res) => res.code === selectedResStatusCode?.value)
 
   const stringifyRequestBody = () => {
     if (data?.requestBody?.content) {

package/src/layout/docsComponents/DocsContent/EndpointPage/index.tsx

@@ -44,11 +44,20 @@ export const EndpointPage = ({
     return `${url}${fullPath}`
   }, [data])
 
-  const httpStatusCodeOptions = httpStatusCodes.map((code) => ({
+  // Filter status codes to only include those
+  const filteredStatusCodes = Object.keys(data?.responses || {}).filter((code) => {
+    const response = data.responses[code]
+    return (
+      response?.content?.['application/json']?.schema?.properties
+    )
+  })
+
+  // Create options for the select dropdown
+  const httpStatusCodeOptions = filteredStatusCodes.map((code) => ({
     label: (
-      <div className={'statusCodeOptionContainer'}>
+      <div className="statusCodeOptionContainer">
         <div
-          className={'statusCodeOptionCircle'}
+          className="statusCodeOptionCircle"
           style={{ backgroundColor: handleStatusColor(code) }}
         ></div>
         <span>{code}</span>
@@ -57,13 +66,25 @@ export const EndpointPage = ({
     value: code,
   }))
 
+  // Function to get default option
+  const getDefaultOption = () => {
+    const has200 = filteredStatusCodes.includes('200')
+    return has200
+      ? httpStatusCodeOptions.find((opt) => opt.value === '200')
+      : httpStatusCodeOptions[0] || null
+  }
+
   const [expanded, setExpanded] = useState(null)
-  const [selectedResStatusCode, setSelectedResStatusCode] = useState(httpStatusCodeOptions[4])
+  const [selectedResStatusCode, setSelectedResStatusCode] = useState(getDefaultOption())
   const [headersList, setHeadersList] = useState({})
   const requestTableData = (data?.parameters || []).filter(
     (param) => param.in?.toLowerCase() === activeTab.toLowerCase()
   )
 
+  useEffect(() => {
+    setSelectedResStatusCode(getDefaultOption())
+  }, [data])
+
   useEffect(() => {
     if (selectedResStatusCode && selectedResStatusCode.value) {
       const headerObj = data?.responses[selectedResStatusCode.value]
@@ -71,8 +92,6 @@ export const EndpointPage = ({
     }
   }, [selectedResStatusCode, data?.responses])
 
-  // ? TODO: 'body' should be returned after discussing with PO
-
   return (
     <div className="api-details-expanded">
       <div className="test-button">
@@ -166,54 +185,52 @@ export const EndpointPage = ({
           ))}
         </div>
 
-        {
-          <div className="table-wrapper">
-            <table className="param-table">
-              <thead>
-                <tr>
-                  <th className="head-table-label">Parameter Name</th>
-                  <th className="head-table-label">Required</th>
-                  <th className="head-table-label">Type</th>
-                  <th className="head-table-label">Enum</th>
-                  <th className="head-table-label">Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                {data.parameters
-                  ?.filter((p) => p.in?.toLowerCase() === activeTab.toLowerCase())
-                  .map((row, index) => (
-                    <tr key={index}>
-                      <td>{row.name}</td>
-                      <td>{row.required ? 'True' : 'False'}</td>
-                      <td style={{ textTransform: 'capitalize' }}>
-                        <span>{row?.schema?.type || '-'}</span>
-                        {row?.schema?.type === 'array' && row?.schema?.items?.type && (
-                          <span style={{ color: '#616874', fontSize: '0.75rem' }}>
-                            _{capitalizeFirstLetter(row.schema?.items?.type)}
-                          </span>
-                        )}
-                      </td>
-                      <td>{Array.isArray(row.schema?.enum) ? row.schema.enum.join(' / ') : '-'}</td>
-                      <td className="desc-cell">
-                        <div className={`desc-text ${expanded === index ? 'expanded' : ''}`}>
-                          {row.description || 'No description'}
-                        </div>
-                        <button
-                          className="desc-toggle"
-                          onClick={() => setExpanded(expanded === index ? null : index)}
-                        >
-                          <SVGLoader
-                            src={DownArrowIcon}
-                            className={expanded === index ? 'rotated' : ''}
-                          />
-                        </button>
-                      </td>
-                    </tr>
-                  ))}
-              </tbody>
-            </table>
-          </div>
-        }
+        <div className="table-wrapper">
+          <table className="param-table">
+            <thead>
+              <tr>
+                <th className="head-table-label">Parameter Name</th>
+                <th className="head-table-label">Required</th>
+                <th className="head-table-label">Type</th>
+                <th className="head-table-label">Enum</th>
+                <th className="head-table-label">Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              {data.parameters
+                ?.filter((p) => p.in?.toLowerCase() === activeTab.toLowerCase())
+                .map((row, index) => (
+                  <tr key={index}>
+                    <td>{row.name}</td>
+                    <td>{row.required ? 'True' : 'False'}</td>
+                    <td style={{ textTransform: 'capitalize' }}>
+                      <span>{row?.schema?.type || '-'}</span>
+                      {row?.schema?.type === 'array' && row?.schema?.items?.type && (
+                        <span style={{ color: '#616874', fontSize: '0.75rem' }}>
+                          _{capitalizeFirstLetter(row.schema?.items?.type)}
+                        </span>
+                      )}
+                    </td>
+                    <td>{Array.isArray(row.schema?.enum) ? row.schema.enum.join(' / ') : '-'}</td>
+                    <td className="desc-cell">
+                      <div className={`desc-text ${expanded === index ? 'expanded' : ''}`}>
+                        {row.description || 'No description'}
+                      </div>
+                      <button
+                        className="desc-toggle"
+                        onClick={() => setExpanded(expanded === index ? null : index)}
+                      >
+                        <SVGLoader
+                          src={DownArrowIcon}
+                          className={expanded === index ? 'rotated' : ''}
+                        />
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+            </tbody>
+          </table>
+        </div>
       </div>
 
       <div className="response-section">

package/src/layout/docsComponents/DocsHeader/DocsHeader.module.scss

@@ -28,7 +28,7 @@
     line-height: 1.25rem;
 
     .btnContentWrapper {
-      .btnContent{
+      .btnContent {
         font-size: 0.918rem !important;
       }
     }
@@ -81,7 +81,7 @@
     height: 2.25rem;
 
     .btnContentWrapper {
-      .btnContent{
+      .btnContent {
         font-size: 0.918rem !important;
       }
     }
@@ -96,15 +96,6 @@
   }
 }
 
-.tippy_box_color {
-  margin-left: 2rem;
-  background-color: #000 !important;
-  border: none;
-  height: 1.875rem;
-  border-radius: 0.75rem;
-  margin-top: -0.5rem;
-}
-
 :global(.tippy-arrow) {
   transform: translateX(12px) !important;
 }
@@ -280,4 +271,27 @@
     backdrop-filter: blur(0.5rem);
     background-color: rgba(0, 0, 0, 0.281) !important;
   }
+
+  // Tooltip overrides
+  .guide-tooltip.guide-tooltip.guide-tooltip.guide-tooltip {
+    background-color: #000;
+    border: none;
+    border-radius: 0.75rem;
+
+    &.tippy-box {
+      .tippy-content.tippy-content {
+        border-radius: 0.75rem;
+        color: #fff;
+        background-color: #000;
+      }
+    }
+
+    .tippy-arrow.tippy-arrow.tippy-arrow.tippy-arrow {
+      color: #000;
+
+      &::before {
+        color: #000;
+      }
+    }
+  }
 }

package/src/layout/docsComponents/DocsHeader/DocsHeader.tsx

@@ -96,8 +96,9 @@ const DocsHeader = ({
           <div className={styles.nav_buttons}>
             <Tooltip
               placement="bottom"
+              offset={[10, 5]}
               delay={[0, 0]}
-              className={`guides-tooltip ${styles.tippy_box_color}`}
+              className="guide-tooltip"
               content={<div>Coming Soon</div>}
             >
               <Button variant="outlined" size="small" className="guide-btn" disabled={true}>

package/variables.txt

@@ -1 +1 @@
-export APP_VERSION=1.0.94
+export APP_VERSION=1.0.96