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

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,40 +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 [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) {
+      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])
 
-  // useEffect(() => {
-  //   if (transformedOpenApis.length === 0) {
-  //     setTransformedOpenApis(
-  //       structuredClone(openApiJson)
-  //         ?.map((o3) => transformOpenApiToDocs(o3))
-  //         .sort((a, b) => a.title.toLowerCase().localeCompare(b.title.toLowerCase()))
-  //     )
-  //   }
-  // }, [openApiJson])
+  const updateFilteredData = (filteredItems, isReset=false) => {
+    if(isReset){
+      setTransformedOpenApis(allData.current)
+      return;
+    }
+    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}
       />
-      <Layout.DocsContent data={activeItemData} />
-      <Layout.DocsAside />
+      {!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

@@ -22,9 +22,13 @@
     .editorSide {
       background-color: #fff;
       padding-bottom: 1.25rem;
-
-      .editorSectionHead {
-
+      .editorSectionHead_title {
+        position: sticky;
+        top: 0;
+        z-index: 1399 !important;
+      }
+      .editorSectionHead,
+      .editorSectionHead_title {
         span {
           width: 100%;
         }
@@ -38,7 +42,6 @@
             width: 6.25rem;
           }
         }
-
       }
     }
 
@@ -59,4 +62,4 @@
   :global(.inputContainer .inputWrapper .innerInputContainer .input) {
     padding-inline-end: 2.5rem;
   }
-}
+}

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 && (
@@ -58,10 +72,10 @@ const Layout = ({ openApiJson, handleSave, setIsFormDirty, openApiErrors }: ILay
       <div className={styles.layoutContainer}>
         <div className={`${styles.editorSide} ${styles.docSide}`}>
           <SectionHead
-            className={styles.editorSectionHead}
+            className={styles.editorSectionHead_title}
             text={
               <div className={styles.editorSectionHead_content}>
-                API Information
+                API Documentation
                 <Button
                   className={styles.methodForm_submitBtn}
                   size="medium"
@@ -99,7 +113,7 @@ const Layout = ({ openApiJson, handleSave, setIsFormDirty, openApiErrors }: ILay
                       }}
                       isOpen={openMethodIndex === methodIndex}
                       setIsOpen={(open) => setOpenMethodIndex(open ? methodIndex : null)}
-                      errors={formik.errors.paths?.[pathIndex]?.methods?.[methodIndex]}
+                      errors={(formik.errors.paths?.[pathIndex] as any)?.methods?.[methodIndex]}
                     />
                   ))}
               </>
@@ -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/utils/index.ts

@@ -0,0 +1,7 @@
+export const copyToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text)
+  } catch (err) {
+    return err
+  }
+}

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(),

package/src/layout/docsComponents/DocsAside/style.scss

@@ -1,3 +0,0 @@
-.api-docs-aside {
-  background-color: #f0f1f2;
-}