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

package/src/layout/docsComponents/DocsSideMenuTree/DocsSideMenuTree.tsx

@@ -1,29 +1,60 @@
 import './style.scss'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import SVGLoader from '../../../components/SVGLoader/SVGLoader'
 import { arrowDownGray, arrowRightGray, document, eye } from '../../../assets/icons'
+import { EndpointData, OverviewData } from 'src/layout/docsLayout'
 
 const DocsSideMenuTree = ({
   apis,
   setActiveItemData,
+  activeItemData,
+  activeType,
+  expandedSections,
+  setExpandedSections,
   isFirstApiExpanded,
   setIsFirstApiExpanded,
   setActiveType,
+}: {
+  apis: OverviewData[]
+  setActiveItemData: React.Dispatch<React.SetStateAction<OverviewData | EndpointData>>
+  activeItemData: OverviewData | EndpointData
+  expandedSections: Record<string, boolean>
+  setExpandedSections: React.Dispatch<React.SetStateAction<Record<string, boolean>>>
+  isFirstApiExpanded: boolean
+  setIsFirstApiExpanded: React.Dispatch<React.SetStateAction<boolean>>
+  setActiveType: React.Dispatch<React.SetStateAction<'OVERVIEW' | 'ENDPOINT'>>
+  activeType: 'OVERVIEW' | 'ENDPOINT'
 }) => {
-  const [expandedSections, setExpandedSections] = useState({})
+  // Auto-expand first API only once
+  useEffect(() => {
+    if (!apis?.length || !isFirstApiExpanded) return
+
+    const firstApi = apis[0]
+    const sectionKey = `api-${firstApi.apiSpecId}-section`
+    const overviewKey = `api-${firstApi.apiSpecId}-overview`
+
+    setExpandedSections((prev) => ({
+      ...prev,
+      [sectionKey]: true,
+      [overviewKey]: true,
+    }))
+
+    setActiveItemData(firstApi)
+    setActiveType('OVERVIEW')
+    setIsFirstApiExpanded(false)
+  }, [apis, isFirstApiExpanded])
 
   const toggleSection = (apiId, sectionId: string, resetOthers?: boolean, key?: string[]) => {
-    isFirstApiExpanded && setIsFirstApiExpanded(false)
     if (resetOthers && key) {
       const filteredExpandedSections = Object.fromEntries(
-        Object.entries({ ...expandedSections }).filter(([expandKey, _]) => {
+        Object.entries({ ...expandedSections }).filter(([expandKey]) => {
           // Close other APIs sections
           if (!expandKey.includes(apiId)) return false
           // always return the clicked on section
-          else if (expandKey === sectionId) return true
+          if (expandKey === sectionId) return true
           // filter all sections containing the key
-          else if (key.some((k) => expandKey.includes(k))) return false
-          else return true
+          if (key.some((k) => expandKey.includes(k))) return false
+          return true
         })
       )
 
@@ -39,65 +70,94 @@ const DocsSideMenuTree = ({
     }
   }
 
-  const renderEndpoints = (endpoints, api) => {
-    return endpoints.map((endpoint, index) => {
-      const isResourceExpanded = expandedSections[`api-${api.id}-resource-${endpoint.id}`]
+  const renderEndpoints = (endpoints: EndpointData[], api: OverviewData) =>
+    endpoints.map((endpoint, index) => {
+      const key = `api-${api.apiSpecId}-resource-${endpoint.id}`
+      const isExpanded = expandedSections[key]
 
       return (
         <div
           key={index}
           className={`api-docs-api-tree__endpoint api-docs-api-tree__endpoint--${endpoint.method.toLowerCase()}`}
           onClick={() => {
-            if (!isResourceExpanded) {
+            if (!isExpanded) {
               setActiveItemData({
                 ...endpoint,
                 api: {
-                  id: api.id,
+                  id: api.apiSpecId,
                   title: api.title,
                   description: api.description,
                   version: api.version,
+                  ...api,
                 },
               })
               setActiveType('ENDPOINT')
-              toggleSection(api.id, `api-${api.id}-resource-${endpoint.id}`, true, [
-                'resource',
-                'overview',
-              ])
+              toggleSection(api.apiSpecId, key, true, ['resource', 'overview'])
             }
           }}
-          data-active={isResourceExpanded}
+          data-active={isExpanded}
         >
           <span className="api-docs-api-tree__endpoint-method">{endpoint.method}</span>
           <span className="api-docs-api-tree__endpoint-name">{endpoint.path}</span>
         </div>
       )
     })
-  }
 
-  const renderApiSection = (api, index) => {
-    const isApiExpanded = expandedSections[`api-${api.id}-section`]
-    const isEndpointActive = Object.keys(expandedSections).some((k) =>
-      k.includes(`api-${api.id}-resource`)
+  const renderSubSection = (
+    tagName: string,
+    data: EndpointData[],
+    api: OverviewData,
+    sectionIndex: number
+  ) => {
+    const sectionKey = `api-${api.apiSpecId}-section-${sectionIndex}`
+    const isSectionExpanded = expandedSections[sectionKey]
+
+    return (
+      <div key={sectionKey} className="api-docs-api-tree__subsection">
+        <div
+          className="api-docs-api-tree__subsection-header"
+          onClick={() => toggleSection(api.apiSpecId, sectionKey)}
+        >
+          {isSectionExpanded ? (
+            <SVGLoader src={arrowDownGray} />
+          ) : (
+            <SVGLoader src={arrowRightGray} />
+          )}
+          <span className="api-docs-api-tree__subsection-title">{tagName}</span>
+        </div>
+
+        {isSectionExpanded && (
+          <div className="api-docs-api-tree__endpoints">{renderEndpoints(data, api)}</div>
+        )}
+      </div>
     )
-    const isEndpointsExpanded = expandedSections[`api-${api.id}-endpoints`]
-    const isOverviewExpanded = expandedSections[`api-${api.id}-overview`]
-
-    if (isFirstApiExpanded && index === 0 && !isApiExpanded) {
-      toggleSection(api.id, `api-${api.id}-section`)
-      toggleSection(api.id, `api-${api.id}-overview`)
-      setActiveItemData(api)
-      setActiveType('OVERVIEW')
-    }
+  }
+
+  const renderApiSection = (api: OverviewData) => {
+    const sectionKey = `api-${api.apiSpecId}-section`
+    const endpointsKey = `api-${api.apiSpecId}-endpoints`
+    const overviewKey = `api-${api.apiSpecId}-overview`
+
+    const isApiExpanded = expandedSections[sectionKey]
+    const isOverviewExpanded =
+      'apiSpecId' in activeItemData &&
+      activeItemData.apiSpecId === api.apiSpecId &&
+      activeType === 'OVERVIEW'
+    const isEndpointActive =
+      'api' in activeItemData &&
+      activeItemData.api.id === api.apiSpecId &&
+      'path' in activeItemData &&
+      'method' in activeItemData
 
     return (
       <div
-        key={api.id}
+        key={api.apiSpecId}
         className="api-docs-api-tree__section"
         data-active={isEndpointActive || isOverviewExpanded}
       >
         <div
           className="api-docs-api-tree__section-header"
-          onClick={() => toggleSection(api.id, `api-${api.id}-section`)}
+          onClick={() => toggleSection(api.apiSpecId, sectionKey)}
         >
           {isApiExpanded ? <SVGLoader src={arrowDownGray} /> : <SVGLoader src={arrowRightGray} />}
           <SVGLoader src={document} />
@@ -107,42 +167,40 @@ const DocsSideMenuTree = ({
         {isApiExpanded && (
           <>
             <div
-              className={`api-docs-api-tree__section__overview`}
+              className="api-docs-api-tree__section__overview"
               onClick={() => {
                 if (!isOverviewExpanded) {
-                  toggleSection(api.id, `api-${api.id}-overview`, true, ['resource'])
+                  toggleSection(api.apiSpecId, overviewKey, true, ['resource'])
                   setActiveItemData(api)
                   setActiveType('OVERVIEW')
                 }
               }}
               data-active={isOverviewExpanded}
             >
-              {<SVGLoader src={eye} />}
+              <SVGLoader src={eye} />
               <span>Overview</span>
             </div>
+
             <div
               className="api-docs-api-tree__section__endpoints"
-              onClick={() => {
-                toggleSection(api.id, `api-${api.id}-endpoints`)
-              }}
+              onClick={() => toggleSection(api.apiSpecId, endpointsKey)}
               data-active={isEndpointActive && !isOverviewExpanded}
             >
-              {isEndpointsExpanded ? (
+              {expandedSections[endpointsKey] ? (
                 <SVGLoader src={arrowDownGray} />
               ) : (
                 <SVGLoader src={arrowRightGray} />
               )}
               <span>Endpoints</span>
             </div>
-            {isEndpointsExpanded && (
+
+            {expandedSections[endpointsKey] && (
               <div className="api-docs-api-tree__subsections">
                 {Object.entries(api.tags)
-                  .sort(([a], [b]) => {
-                    if (a === 'default') return 1
-                    if (b === 'default') return -1
-                    return a.localeCompare(b)
-                  })
-                  .map(([tagName, data], index) => renderSubSection(tagName, data, api, index))}
+                  .sort(([a], [b]) =>
+                    a === 'default' ? 1 : b === 'default' ? -1 : a.localeCompare(b)
+                  )
+                  .map(([tagName, data], i) => renderSubSection(tagName, data, api, i))}
               </div>
             )}
           </>
@@ -151,38 +209,7 @@ const DocsSideMenuTree = ({
     )
   }
 
-  const renderSubSection = (tagName, data, api, sectionIndex) => {
-    const sectionKey = `api-${api.id}-section-${sectionIndex}`
-    const isSectionExpanded = expandedSections[sectionKey]
-
-    return (
-      <div key={sectionKey} className="api-docs-api-tree__subsection">
-        <>
-          <div
-            className="api-docs-api-tree__subsection-header"
-            onClick={() => toggleSection(api.id, sectionKey)}
-          >
-            {isSectionExpanded ? (
-              <SVGLoader src={arrowDownGray} />
-            ) : (
-              <SVGLoader src={arrowRightGray} />
-            )}
-            <span className="api-docs-api-tree__subsection-title">{tagName}</span>
-          </div>
-
-          {isSectionExpanded && (
-            <div className="api-docs-api-tree__endpoints">{renderEndpoints(data, api)}</div>
-          )}
-        </>
-      </div>
-    )
-  }
-
-  return (
-    <aside className="api-docs-api-tree">
-      {apis.map((api, index) => renderApiSection(api, index))}
-    </aside>
-  )
+  return <aside className="api-docs-api-tree">{apis.map((api) => renderApiSection(api))}</aside>
 }
 
 export default DocsSideMenuTree

package/src/layout/docsLayout.tsx

@@ -1,10 +1,11 @@
-import React, { JSX, useEffect, useState } from 'react'
+import React, { JSX, useEffect, useRef, useState } from 'react'
 import Layout from './docsComponents'
 import { HTTPMethod, OpenAPIFile, Parameter, RequestBody, Responses } from '@entities/openApi'
 import { transformOpenApiToDocs } from '../helpers/docs.helper'
+import { ApiSpecModel } from '@entities/index'
 
 interface ILayoutProps {
-  openApiJson?: OpenAPIFile[]
+  apis?: ApiSpecModel[]
 }
 
 export interface TagData {
@@ -28,43 +29,68 @@ export interface EndpointData extends TagData {
   }
 }
 
-export interface OverviewData {
-  id: string
+export interface OverviewData extends Omit<ApiSpecModel, 'metaData'> {
   description: string
   title: string
   version: string
   tags: Record<string, TagData[]>
+  servers: OpenAPIFile['servers']
 }
 
-const DocsLayout = ({ openApiJson }: ILayoutProps): JSX.Element => {
+const DocsLayout = ({ apis }: ILayoutProps): JSX.Element => {
   const [transformedOpenApis, setTransformedOpenApis] = useState([])
   const [isFirstApiExpanded, setIsFirstApiExpanded] = useState(true)
-  const [activeItemData, setActiveItemData] = useState<OverviewData | EndpointData>()
-  const [activeType, setActiveType] = useState<'OVERVIEW' | 'ENDPOINT'>()
+  const [activeItemData, setActiveItemData] = useState<OverviewData | EndpointData | {}>({})
+  const [activeType, setActiveType] = useState<'OVERVIEW' | 'ENDPOINT'>('OVERVIEW')
+  const [expandedSections, setExpandedSections] = useState({})
+  const allData = useRef([]);
   const [pending, setPending] = useState(true)
+  console.log({ apis, transformedOpenApis, activeItemData })
   useEffect(() => {
     if (transformedOpenApis.length === 0) {
-      setTransformedOpenApis(
-        structuredClone(openApiJson)
-          ?.map((o3) => transformOpenApiToDocs(o3))
-          .sort((a, b) => a.title.toLowerCase().localeCompare(b.title.toLowerCase()))
-      )
-      setPending(false)
+      const t = structuredClone(apis)
+        ?.map((o3) => transformOpenApiToDocs(o3))
+        .sort((a, b) => a.title.toLowerCase().localeCompare(b.title.toLowerCase()))
+      setTransformedOpenApis(t)
+      allData.current = t
+      if (t.length > 0) {
+        setPending(false)
+      }
+    }
+  }, [apis])
+
+  const updateFilteredData = (filteredItems, isReset=false) => {
+    if(isReset){
+      setTransformedOpenApis(allData.current)
+      return;
     }
-  }, [openApiJson])
+    setTransformedOpenApis(filteredItems)
+  }
 
   return (
     <Layout>
-      <Layout.DocsHeader />
+      <Layout.DocsHeader transformedOpenApis={transformedOpenApis} updateFilteredData={updateFilteredData}/>
       <Layout.DocsSideMenuTree
         apis={transformedOpenApis}
         setActiveItemData={setActiveItemData}
+        activeItemData={activeItemData}
+        expandedSections={expandedSections}
+        setExpandedSections={setExpandedSections}
         isFirstApiExpanded={isFirstApiExpanded}
+        activeType={activeType}
         setIsFirstApiExpanded={setIsFirstApiExpanded}
         setActiveType={setActiveType}
       />
-      {!pending && <Layout.DocsContent data={activeItemData} />}
-      {activeType === 'ENDPOINT' && <Layout.DocsAside data={activeItemData} />}
+      {!pending && Object.keys(activeItemData).length > 0 && (
+        <Layout.DocsContent
+          data={activeItemData}
+          activeType={activeType}
+          setActiveItemData={setActiveItemData}
+          setActiveType={setActiveType}
+          setExpandedSections={setExpandedSections}
+        />
+      )}
+      {activeType === 'ENDPOINT' && <Layout.DocsAside data={activeItemData as EndpointData} />}
     </Layout>
   )
 }

package/src/layout/layout.module.css

@@ -25,7 +25,7 @@
       .editorSectionHead_title {
         position: sticky;
         top: 0;
-        z-index: 99999 !important;
+        z-index: 1399 !important;
       }
       .editorSectionHead,
       .editorSectionHead_title {

package/src/layout/layout.tsx

@@ -20,25 +20,34 @@ interface ILayoutProps {
   openApiErrors?: any
 }
 
-const Layout = ({ openApiJson, handleSave, setIsFormDirty, openApiErrors }: ILayoutProps): JSX.Element => {
+const Layout = ({
+  openApiJson,
+  handleSave,
+  setIsFormDirty,
+  openApiErrors,
+}: ILayoutProps): JSX.Element => {
   const clonedOpenApiJson = structuredClone(openApiJson)
   const transformedOpenApi = transformOpenApiObject(clonedOpenApiJson)
   const formik = useFormik<TransformedOpenApi>({
     initialValues: structuredClone(transformedOpenApi),
     validationSchema: schemaValidation,
     validateOnMount: true,
-    onSubmit: (values, { validateForm, resetForm }) => {
+    onSubmit: (values, { validateForm, resetForm, setSubmitting }) => {
       // Handle save logic
-      const originalOpenApiForm = transformOpenApiObjectToOrigin(values)
-      handleSave(originalOpenApiForm)
-      resetForm({
-        values: values, // You can reset it to the same values if you want
-      })
+      try {
+        const originalOpenApiForm = transformOpenApiObjectToOrigin(values)
+        handleSave(originalOpenApiForm)
+        resetForm({
+          values: values, // You can reset it to the same values if you want
+        })
 
-      validateForm(values)
+        validateForm(values)
+      } catch (err) {
+        setSubmitting(false)
+      }
     },
   })
-  const { dirty, isValid, isSubmitting, values, setFieldValue, handleSubmit } = formik
+  const { dirty, isValid, isSubmitting, values, setFieldValue, handleSubmit, errors } = formik
   const [isPublishDialogOpen, setIsPublishDialogOpen] = useState(false)
   const [openMethodIndex, setOpenMethodIndex] = useState<number | null>(null)
 
@@ -48,6 +57,11 @@ const Layout = ({ openApiJson, handleSave, setIsFormDirty, openApiErrors }: ILay
     }
   }, [dirty])
 
+  // keep it here until production
+  useEffect(() => {
+    console.log({ values, errors })
+  }, [values])
+
   return (
     <div className={styles.docsLayout}>
       {dirty && (
@@ -109,7 +123,7 @@ const Layout = ({ openApiJson, handleSave, setIsFormDirty, openApiErrors }: ILay
         <div className={`${styles.livePreviewSide} ${styles.docSide}`}>
           {transformedOpenApi && (
             <FormikProvider value={formik}>
-              <LivePreview transformedData={transformedOpenApi} openApiErrors={openApiErrors}/>
+              <LivePreview transformedData={transformedOpenApi} openApiErrors={openApiErrors} />
             </FormikProvider>
           )}
         </div>
@@ -118,14 +132,18 @@ const Layout = ({ openApiJson, handleSave, setIsFormDirty, openApiErrors }: ILay
         status="warning"
         content={
           <>
-          <h5 style={{
-            fontWeight: 600,
-            fontSize: '1.5rem',
-            lineHeight: '1.875rem',
-            color: '#FAAD14',
-            textAlign: 'center',
-            margin: 0
-          }}>Publish Changes</h5>
+            <h5
+              style={{
+                fontWeight: 600,
+                fontSize: '1.5rem',
+                lineHeight: '1.875rem',
+                color: '#FAAD14',
+                textAlign: 'center',
+                margin: 0,
+              }}
+            >
+              Publish Changes
+            </h5>
             <p
               style={{
                 textAlign: 'center',

package/src/types/index.ts

@@ -0,0 +1,28 @@
+import { OpenAPIFile } from './openApi'
+
+export interface ApiSpecModel {
+  apiSpecId: string
+  contextPath: string
+  apiVersions: {
+    addVersionToContextPath: boolean
+    apiSpecId: string
+    name: string
+    metaData: {
+      version: string
+    }
+  }[]
+  associatedProduct: {
+    availableOnDevPortal: boolean
+    name: string
+    premium: boolean
+    productId: number
+  }
+  metaData: {
+    version: string
+    apiVersionOf: string
+    openApiJson: OpenAPIFile
+    tags: string[]
+    createdDateTime: string
+    lastUpdatedDateTime: string
+  }
+}

package/src/types/layout.type.ts

@@ -20,6 +20,7 @@ export type TransformedMethod = {
       contentType?: string
       schema?: unknown
     }
+    headers: any
   }[]
 }
 

package/src/types/openApi.ts

@@ -75,6 +75,7 @@ export interface RequestBody {
 export interface Responses {
   [statusCode: string]: {
     description: string
+    headers?: any
     content?: {
       [contentType: string]: {
         schema: Schema

package/src/validator/form.scheme.ts

@@ -11,7 +11,14 @@ export const schemaValidation = yup.object({
   servers: yup
     .array(
       yup.object({
-        url: yup.string().url().required(),
+        url: yup
+          .string()
+          .required()
+          .test(
+            'is-url-or-slash',
+            'Must be a valid URL or "/"',
+            (value) => value === '/' || yup.string().url().isValidSync(value)
+          ),
         description: yup.string().optional(),
       })
     )
@@ -29,6 +36,7 @@ export const schemaValidation = yup.object({
               description: yup.string().trim().optional(),
               type: yup.string().optional(),
               tags: yup.array().of(yup.string()).optional(),
+              requestBody: yup.mixed().optional(),
             })
           )
           .required(),