@digi-frontend/dgate-api-documentation 1.0.50 → 1.0.52

package/src/helpers/layout.helper.ts

@@ -61,8 +61,10 @@ export const transformPathsToArray = (paths: OpenAPIFile['paths']): TransformedP
         summary: methodProps.summary || '',
         responses: Object.entries(methodProps.responses).map(([code, codeProps]) => {
           const contentType = Object.keys(codeProps.content || {})[0]
+          const headers = !codeProps?.headers ? {} : codeProps.headers
           return {
             code,
+            headers,
             content: {
               contentType,
               schema: {
@@ -78,6 +80,8 @@ export const transformPathsToArray = (paths: OpenAPIFile['paths']): TransformedP
         obj.parameters = []
       }
 
+      // load response headers parameters
+
       if (method.toLowerCase() != 'get') {
         const contentType = Object.keys(methodProps?.requestBody?.content || {})[0]
         const reqSchema = methodProps?.requestBody?.content?.schema
@@ -103,7 +107,6 @@ export const transformPathsToArray = (paths: OpenAPIFile['paths']): TransformedP
 
         obj['requestBody'] = requestBodyData
       }
-
       return obj
     }),
   }))
@@ -112,6 +115,9 @@ export const transformPathsToArray = (paths: OpenAPIFile['paths']): TransformedP
 }
 
 const validateBodyForResponse = (content, method) => {
+  if (!(content?.schema as any) || !(content?.schema as any)?.properties) {
+    return {}
+  }
   let _content = JSON.parse((content?.schema as any)?.properties as string)
   // if (method == 'get') {
   //   if (!_content?.body) {
@@ -132,7 +138,17 @@ export const transformPathsArrayToOrigin = (paths: TransformedPathsArray): OpenA
           ...rest,
           tags,
           summary,
-          responses: responses.reduce((respAcc, { code, content }) => {
+          responses: responses.reduce((respAcc, { code, content, headers }) => {
+            const formattedHeaders: Record<string, any> = {}
+            if (headers) {
+              for (const [key, value] of Object.entries(headers)) {
+                formattedHeaders[key] = {
+                  description: value.description || '',
+                  required: value.required || false,
+                  schema: value.schema || {},
+                }
+              }
+            }
             respAcc[code] = {
               description: 'Success', // Assuming this is static from the original data
               content: content.contentType
@@ -145,6 +161,7 @@ export const transformPathsArrayToOrigin = (paths: TransformedPathsArray): OpenA
                     },
                   }
                 : {},
+              headers: formattedHeaders,
             }
             return respAcc
           }, {} as Record<string, any>),

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

@@ -1,12 +1,12 @@
 import React, { useState } from 'react'
 import { EndpointData } from 'src/layout/docsLayout'
 import Codebox from '../Codebox/Codebox'
-import { SelectGroup } from 'digitinary-ui'
+import { Option, SelectGroup } from 'digitinary-ui'
 import { httpStatusCodes } from '../../../constants/index'
 import { handleStatusColor } from '../../../helpers/methodAccordion.helper'
 import styles from './style.module.scss'
 
-const httpStatusCodeOptions = httpStatusCodes.map((code) => ({
+const httpStatusCodeOptions: Option[] = httpStatusCodes.map((code) => ({
   label: (
     <div className={styles.statusCodeOptionContainer}>
       <div
@@ -16,15 +16,14 @@ const httpStatusCodeOptions = httpStatusCodes.map((code) => ({
       <span>{code}</span>
     </div>
   ),
-  value: code,
+  value: String(code),
 }))
 
 const DocsAside = ({ data }: { data: EndpointData }) => {
   const [selectedResStatusCode, setSelectedResStatusCode] = useState(httpStatusCodeOptions[4])
-  const currentResponse =
-    Object.entries(data.responses)
-      .map(([code, data]) => ({ code, data }))
-      .find((res) => Number(res.code) === selectedResStatusCode.value) || '{}'
+  const currentResponse = Object.entries(data.responses)
+    .map(([code, data]) => ({ code, data }))
+    .find((res) => res.code === selectedResStatusCode.value)
 
   const stringifyRequestBody = () => {
     if (data?.requestBody?.content) {

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

@@ -6,9 +6,30 @@ import { TagPage } from './TagPage'
 import { EndpointPage } from './EndpointPage'
 import { EndpointData, OverviewData } from 'src/layout/docsLayout'
 
-const DocsContent = ({ data }: { data: OverviewData | EndpointData }) => {
-  const isTagPage = false
-  return <main>{!isTagPage ? <TagPage data={data} /> : <EndpointPage data={data} />}</main>
+const DocsContent = ({
+  data,
+  activeType,
+  setActiveItemData,
+  setActiveType,
+  setExpandedSections,
+}: {
+  data: OverviewData | EndpointData
+  activeType: 'OVERVIEW' | 'ENDPOINT'
+}) => {
+  return (
+    <main>
+      {activeType === 'OVERVIEW' ? (
+        <TagPage
+          data={data}
+          setActiveItemData={setActiveItemData}
+          setActiveType={setActiveType}
+          setExpandedSections={setExpandedSections}
+        />
+      ) : (
+        <EndpointPage data={data} />
+      )}
+    </main>
+  )
 }
 
 export default DocsContent

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

@@ -7,43 +7,42 @@ import {
   RequestOption,
 } from '../../../../assets/icons/index'
 import { ArrowIcon, SelectGroup } from 'digitinary-ui'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { EndpointData } from 'src/layout/docsLayout'
+import { handleStatusColor } from '../../../../helpers/methodAccordion.helper'
+import { httpStatusCodes } from '../../../../constants/index'
+import styles from '../../Codebox/style.module.scss'
+import Tooltip from '../../../../components/Tooltip/Tooltip'
 
 export const EndpointPage = ({ data }) => {
+  const [activeTab, setActiveTab] = useState('header')
+
+  const httpStatusCodeOptions = httpStatusCodes.map((code) => ({
+    label: (
+      <div className={'statusCodeOptionContainer'}>
+        <div
+          className={'statusCodeOptionCircle'}
+          style={{ backgroundColor: handleStatusColor(code) }}
+        ></div>
+        <span>{code}</span>
+      </div>
+    ),
+    value: code,
+  }))
+
   const [expanded, setExpanded] = useState(null)
+  const [selectedResStatusCode, setSelectedResStatusCode] = useState(httpStatusCodeOptions[4])
+  const [headersList, setHeadersList] = useState({})
+  const requestTableData = (data?.parameters || []).filter(
+    (param) => param.in?.toLowerCase() === activeTab.toLowerCase()
+  )
 
-  const requestTableData = [
-    {
-      name: 'Parameter Name',
-      required: 'True',
-      type: 'String',
-      enum: 'Active/Expired/Cancelled',
-      description:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    },
-    {
-      name: 'Parameter Name',
-      required: 'False',
-      type: 'Boolean',
-      enum: 'Active/Expired/Cancelled',
-      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.sssssss',
-    },
-    {
-      name: 'Parameter Name',
-      required: 'True',
-      type: 'Object',
-      enum: '-',
-      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.sssssss',
-    },
-    {
-      name: 'Parameter Name',
-      required: 'True',
-      type: 'Array_String',
-      enum: '-',
-      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.sssssss',
-    },
-  ]
+  useEffect(() => {
+    if (selectedResStatusCode && selectedResStatusCode.value) {
+      const headerObj = data?.responses[selectedResStatusCode.value]
+      setHeadersList(headerObj?.headers)
+    }
+  }, [selectedResStatusCode])
 
   return (
     <div className="api-details-expanded">
@@ -52,99 +51,116 @@ export const EndpointPage = ({ data }) => {
           <SVGLoader src={ArrowBack} />
         </button>
 
-        <button className="disabled">Test</button>
+        <Tooltip content="Comming soon">
+          <button className="disabled">Test</button>
+        </Tooltip>
       </div>
       <h3> Api Name</h3>
-      <h1 className="api-title">Endpoint Name</h1>
+      <h1 className="api-title">{data?.api?.title}</h1>
       <div className="url-box">
         <div style={{ textAlign: 'center' }}>
-          <span className="method-label post">Post</span>
-          <span className="url-text">https://apigw sdb-1.test.dgate.digitinary.net/test</span>
+          <span className={`method-label ${data?.method?.toLowerCase()}`}>{data.method}</span>
+          <span className="url-text">{data?.path}</span>
         </div>
-
-        <SVGLoader src={CopySticker} className="copy-icon" />
+        <span className="icon" onClick={() => navigator.clipboard.writeText(data?.path)}>
+          <SVGLoader src={CopySticker} />
+        </span>
       </div>
 
-      <p className="api-desc">Endpoint Description</p>
+      <p className="api-desc">{data?.api?.description || 'No Description'}</p>
 
       <h3>Request</h3>
 
       <div className="request-section">
         <div className="request-tabs">
-          <button className="tab">
-            <SVGLoader src={RequestOption} className="icon-left" />
-            Header
-          </button>
-          <button className="tab">
-            <SVGLoader src={RequestOption} className="icon-left" />
-            Path
-          </button>
-          <button className="tab">
-            <SVGLoader src={RequestOption} className="icon-left" />
-            Query
-          </button>
-          <button className="tab">
-            <SVGLoader src={RequestOption} className="icon-left" />
-            Request Body
-          </button>
+          {['header', 'path', 'query', 'Body'].map((tab) => (
+            <button
+              key={tab}
+              className={`tab ${activeTab === tab ? 'active' : ''}`}
+              onClick={() => setActiveTab(tab)}
+            >
+              <SVGLoader src={RequestOption} className="icon-left" />
+              <span className="tab-label">
+                {tab === 'requestBody'
+                  ? 'Request Body'
+                  : tab.charAt(0).toUpperCase() + tab.slice(1)}
+              </span>
+            </button>
+          ))}
         </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>
-              {requestTableData.map((row, index) => (
-                <tr key={index}>
-                  <td>{row.name}</td>
-                  <td>{row.required}</td>
-                  <td>{row.type}</td>
-                  <td>{row.enum}</td>
-                  <td className="desc-cell">
-                    <div className={`desc-text ${expanded === index ? 'expanded' : ''}`}>
-                      {row.description}
-                    </div>
-                    <button
-                      className="desc-toggle"
-                      onClick={() => setExpanded(expanded === index ? null : index)}
-                    >
-                      <SVGLoader
-                        src={DownArrowIcon}
-                        className={expanded === index ? 'rotated' : ''}
-                      />
-                    </button>
-                  </td>
+
+        {
+          <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>
-              ))}
-            </tbody>
-          </table>
-        </div>
+              </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>{row.schema?.type || '-'}</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">
-        <div className="response-drop-test">
-          <SelectGroup
-            className="response-drop"
-            withSearch={false}
-            isMultiple={false}
-            clearable={false}
-            placeholder="200"
-            options={[]}
-            //value={selectedStatusCode}
-            onChange={(value) => {
-              // setSelectedStatusCode(value)
-            }}
-          />
+        <h3>Response</h3>
+
+        <div style={{ width: '7.5rem', marginLeft: 'auto' }}>
+          {Object.keys(data?.responses || {})?.length > 0 && (
+            <div className={styles.codeboxSection}>
+              <div className={`${styles.codeboxHeader}`}>
+                <SelectGroup
+                  size="small"
+                  withSearch={false}
+                  isMultiple={false}
+                  clearable={false}
+                  placeholder="200"
+                  options={[
+                    {
+                      list: httpStatusCodeOptions,
+                    },
+                  ]}
+                  value={selectedResStatusCode}
+                  onChange={(value) => {
+                    setSelectedResStatusCode(value)
+                  }}
+                />
+              </div>
+            </div>
+          )}
         </div>
 
-        <h3>Response</h3>
-        <button className="tab">
+        <button className="tab active ">
           <SVGLoader src={RequestOption} className="icon-left" />
           Header
         </button>
@@ -153,7 +169,7 @@ export const EndpointPage = ({ data }) => {
           <table className="param-table">
             <thead>
               <tr>
-                <th className="head-table-label">Parameter Name</th>
+                <th className="head-table-label">Header Name</th>
                 <th className="head-table-label">Required</th>
                 <th className="head-table-label">Type</th>
                 <th className="head-table-label">Enum</th>
@@ -161,20 +177,15 @@ export const EndpointPage = ({ data }) => {
               </tr>
             </thead>
             <tbody>
-              <tr>
-                <td>Parameter Name</td>
-                <td>True</td>
-                <td>String</td>
-                <td>Active/Expired/Cancelled</td>
-                <td>Borem taciti dolor ...</td>
-              </tr>
-              <tr>
-                <td>Parameter Name</td>
-                <td>True</td>
-                <td>Array_Object</td>
-                <td>-</td>
-                <td>Borem taciti dolor ...</td>
-              </tr>
+              {Object.keys(headersList).map((key, index) => (
+                <tr>
+                  <td>{key}</td>
+                  <td>{headersList[key]?.required.toString()}</td>
+                  <td>{headersList[key]?.schema?.type}</td>
+                  <td>{headersList[key]?.schema?.enum?.join('/')}</td>
+                  <td>{headersList[key]?.description}</td>
+                </tr>
+              ))}
             </tbody>
           </table>
         </div>

package/src/layout/docsComponents/DocsContent/EndpointPage/style.scss

@@ -62,6 +62,7 @@ main {
       font-weight: 400;
       letter-spacing: 0px;
       line-height: 1.5rem;
+      margin-top: 1.5rem;
       margin-bottom: 0.5rem;
     }
 
@@ -86,6 +87,31 @@ main {
       text-transform: uppercase;
       color: #3aaa35;
       text-decoration: underline;
+
+      &.get {
+        color: #3a6cd1;
+      }
+      &.post {
+        color: #3aaa35;
+      }
+      &.put {
+        color: #faad14;
+      }
+      &.patch {
+        color: #58e2c2;
+      }
+      &.delete {
+        color: #da3f3f;
+      }
+      &.head {
+        color: #9461c9;
+      }
+      &.trace {
+        color: #ffa28f;
+      }
+      &.options {
+        color: #495d97;
+      }
     }
 
     .url-box {
@@ -127,13 +153,31 @@ main {
       cursor: pointer;
       font-size: 0.875rem;
       color: #000000;
+      display: flex;
+      align-items: center;
+      gap: 0.375rem;
     }
 
     .tab {
+      background: white;
+      border: 1px solid #d1d3d8;
+      padding: 0.375rem 0.75rem;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 0.875rem;
+      color: #000000;
       display: flex;
       align-items: center;
       gap: 0.375rem;
+
+      &.active {
+        background-color: #e5edff;
+        border-color: #4d75d9;
+        color: #000000;
+        font-weight: 400;
+      }
     }
+
     .icon-left {
       width: 0.875rem;
       height: 0.875rem;
@@ -145,6 +189,7 @@ main {
       border-radius: 0.8rem;
       background: white;
       border: 1px #bbbec5 solid;
+      margin-bottom: 2rem;
     }
 
     .param-table {

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

@@ -3,23 +3,49 @@ import SVGLoader from '../../../../components/SVGLoader/SVGLoader'
 import { arrowRightGray, CopySticker } from '../../../../assets/icons/index'
 import { OverviewData } from 'src/layout/docsLayout'
 
-export const TagPage = ({ data }) => {
+export const TagPage = ({ data, setActiveItemData, setActiveType, setExpandedSections }) => {
+  const handleClick = (endpoint) => {
+    setActiveItemData({
+      ...endpoint,
+      api: {
+        id: data.apiSpecId,
+        title: data.title,
+        description: data.description,
+        version: data.version,
+        ...data,
+      },
+    })
+    setActiveType('ENDPOINT')
+
+    setExpandedSections((prev) => ({
+      ...prev,
+      [`api-${data.apiSpecId}-section`]: true,
+      [`api-${data.apiSpecId}-endpoints`]: true,
+      [`api-${data.apiSpecId}-resource-${endpoint.id}`]: true,
+    }))
+  }
   return (
     <div className="api-details-page">
       <h2 className="welcome">Welcome to</h2>
-      <h1 className="api-title">{data.title}</h1>
+      <h1 className="api-title">{data?.title}</h1>
       <p className="api-version">
-        API Version: <span>{data.version}</span>
+        API Version: <span>{data?.version}</span>
       </p>
 
       <div className="custom-url-input">
         <label className="input-label">API Base URL</label>
         <div className="input-wrapper">
-          <input type="text" value="https://apigw-sdb-1.test.dgate.digitinary.net/test" readOnly />
+          <input
+            type="text"
+            value={!!data && !!data.servers && data.servers.length > 0 ? data.servers[0]?.url : '-'}
+            readOnly
+          />
           <span
             className="icon"
             onClick={() =>
-              navigator.clipboard.writeText('https://apigw-sdb-1.test.dgate.digitinary.net/test')
+              navigator.clipboard.writeText(
+                `${!!data && !!data.servers && data.servers.length > 0 ? data.servers[0]?.url : '-'}`
+              )
             }
           >
             <SVGLoader src={CopySticker} />
@@ -29,17 +55,21 @@ export const TagPage = ({ data }) => {
 
       <p className="api-desc">API Description</p>
       <div className="api-product-tag">
-        Product with this API <span className="product-tag">Product 01</span>
+        Product with this API <span className="product-tag">{data.associatedProduct.name}</span>
       </div>
 
       <h3 className="section-title">Endpoints</h3>
 
-      {Object.entries(data.tags).map(([tag, endpoints]) => (
+      {Object.entries(data?.tags).map(([tag, endpoints]) => (
         <div className="endpoint-group" key={tag}>
           <h4 className="tag-title">{tag}</h4>
           <div className="endpoint-list">
             {endpoints.map((endpoint, idx) => (
-              <div className="endpoint-card" key={`${tag}-${idx}`}>
+              <div
+                className="endpoint-card"
+                onClick={() => handleClick(endpoint)}
+                key={`${tag}-${idx}`}
+              >
                 <div>
                   <div className="endpoint-card-header">
                     <span className={`method-label ${endpoint.method.toLowerCase()}`}>
@@ -67,16 +97,18 @@ export const TagPage = ({ data }) => {
         </div>
       ))}
 
-      <div className="versions-section">
-        <h4>API Versions</h4>
-        <div className="version-list">
-          {['1.2.0', '1.3.0', '1.4.0', '1.5.0', '2.2.0'].map((ver) => (
-            <button key={ver} className="version-btn">
-              {ver}
-            </button>
-          ))}
+      {data.apiVersions?.length > 0 && (
+        <div className="versions-section">
+          <h4>API Versions</h4>
+          <div className="version-list">
+            {data.apiVersions.map((verObj, index) => (
+              <button key={index} className="version-btn">
+                {verObj.metaData?.version || 'N/A'}
+              </button>
+            ))}
+          </div>
         </div>
-      </div>
+      )}
     </div>
   )
 }

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

@@ -15,7 +15,13 @@ import CommonDialog from '../../../components/dialog/index'
 import { METHOD_OPTIONS } from '../../../constants/methods.constant'
 import styles from './DocsHeader.module.scss'
 
-const DocsHeader: React.FC = () => {
+const DocsHeader: React.FC = ({
+  transformedOpenApis,
+  updateFilteredData,
+}: {
+  transformedOpenApis: any[]
+  updateFilteredData: any
+}) => {
   const [showSearchFilter, setShowSearchFilter] = useState<boolean>(false)
   const [apiName, setApiName] = useState<string>('')
   const [selectedMethods, setSelectedMethods] = useState<any[]>([])
@@ -33,6 +39,33 @@ const DocsHeader: React.FC = () => {
   }
 
   const handleApplyFilters = (): void => {
+    // Reset: no filters applied
+    if (!apiName?.trim() && (!selectedMethods || selectedMethods.length === 0)) {
+      updateFilteredData(transformedOpenApis, true)
+      setShowSearchFilter(false)
+      return
+    }
+
+    let filteredItems = [...transformedOpenApis]
+
+    // Filter by API name
+    if (apiName?.trim()) {
+      const lowerApiName = apiName.toLowerCase()
+      filteredItems = filteredItems.filter((api) => api.title.toLowerCase().includes(lowerApiName))
+    }
+
+    // Filter by selected HTTP methods
+    if (selectedMethods?.length) {
+      filteredItems = filteredItems.filter((api) => {
+        const allMethods = Object.values(api.tags || {})
+          .flat()
+          .map((endpoint: any) => endpoint.method?.toLowerCase())
+
+        return selectedMethods.some((method) => allMethods.includes(method.toLowerCase()))
+      })
+    }
+
+    updateFilteredData(filteredItems)
     setShowSearchFilter(false)
   }