@digi-frontend/dgate-api-documentation 1.0.18 → 1.0.21

package/src/components/InfoForm/InfoForm.tsx

@@ -30,18 +30,21 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
     if (values && values.components && values.components.securitySchemes) {
       const authenticatorKeys = Object.keys(values.components.securitySchemes)
       if (authenticatorKeys.length) {
-        setAuthType(values.components.securitySchemes[authenticatorKeys[0]].scheme)
+        setAuthType(
+          values.components.securitySchemes[authenticatorKeys[0]].scheme ||
+            values.components.securitySchemes[authenticatorKeys[0]].type
+        )
       }
     }
   }, [])
 
   useEffect(() => {
-    setTableRecords(generateTableData(tableData))
+    setTableRecords(generateTableRecords(tableData))
   }, [tableData])
 
   useEffect(() => {
     if (values.tags && values.tags.length) {
-      setTableRecords(generateTableData(values.tags))
+      setTableRecords(generateTableRecords(values.tags))
       setTableData(values.tags)
     }
   }, [values.tags])
@@ -77,7 +80,7 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
 
   const saveNewRow = (tag) => {
     setTableData([...tableData, tag])
-    const oldTags = values.tags || [];
+    const oldTags = values.tags || []
     setFieldValue(`tags`, [...oldTags, tag])
   }
 
@@ -88,7 +91,7 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
     setOpenDeleteDialog(true)
   }
 
-  const generateTableData = (items) => {
+  const generateTableRecords = (items) => {
     return items.map((item, index) => ({
       id: index,
       tagName: item.name,
@@ -131,10 +134,19 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
               </div>
             }
           >
-            {readOnly ? (
-              <Button className={styles.editDescBtn} variant="link" color="action">
-                {item.description ? item.description.substring(0, 12) : '-'}
-                {item.description && item.description.length > 12 ? '...' : ''}
+            {readOnly || values.tags[index].description ? (
+              <Button
+                className={styles.editDescBtn}
+                variant="link"
+                color="action"
+                endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
+              >
+                {values.tags[index].description
+                  ? values.tags[index].description.substring(0, 12)
+                  : '-'}
+                {values.tags[index].description && values.tags[index].description.length > 12
+                  ? '...'
+                  : ''}
               </Button>
             ) : (
               <Button
@@ -143,7 +155,9 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
                 color="action"
                 endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
               >
-                {readOnly || item.description ? 'View Description' : 'Add Description'}
+                {readOnly || values.tags[index].description
+                  ? 'View Description'
+                  : 'Add Description'}
               </Button>
             )}
           </Tooltip>
@@ -210,22 +224,22 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
               </div>
             }
           >
-            {readOnly ? (
+            {readOnly || values.tags[index].externalDocs?.description ? (
               <Button
                 className={styles.editDescBtn}
                 variant="link"
                 color="action"
+                endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
                 onClick={() => {
-                  const a = document.createElement('a')
-                  a.href = item.externalDocs?.url
-                  a.target="_blank"
-                  a.click()
+                  setDescription(item.externalDocs?.description)
+                  setURL(item.externalDocs?.url)
                 }}
               >
-                {item?.externalDocs?.description
-                  ? item?.externalDocs?.description?.substring(0, 12)
+                {values.tags[index].externalDocs?.description
+                  ? values.tags[index].externalDocs?.description?.substring(0, 12)
                   : '-'}
-                {item?.externalDocs?.description && item?.externalDocs?.description?.length > 12
+                {values.tags[index].externalDocs?.description &&
+                values.tags[index].externalDocs?.description?.length > 12
                   ? '...'
                   : ''}
               </Button>

package/src/components/LivePreview/LivePreview.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import styles from './LivePreview.module.scss'
 import SimpleLabelValue from '../../components/SimpleLabelValue'
-
 import MethodsAccordion from '../../components/MethodAccordion/MethodAccordion'
 import { TransformedOpenApi } from '../../types/transformedOpenApi'
 import { useFormikContext } from 'formik'
@@ -122,12 +121,36 @@ const LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {
 
           <SimpleLabelValue key={'endpoints'} label={'Endpoints '} />
           {values.paths.map((path) => (
-            <div className={styles.methodsContainer}>
-              {path.methods
+            <div className={styles.methodsContainer} key={path.path}>
+              {Object.entries(
+                path.methods
                 .sort((a, b) => methodColorMapping[a.type].order + methodColorMapping[b.type].order)
-                .map((method, methodIndex) => (
-                  <MethodsAccordion readOnly method={method} path={path.path} />
-                ))}
+                .reduce((groupedMethods, method) => {
+                  // Handle methods without tags
+                  const tags = method.tags?.length ? method?.tags : ['default'];
+                  
+                  tags.forEach((tag) => {
+                    if (!groupedMethods[tag]) {
+                      groupedMethods[tag] = [];
+                    }
+                    groupedMethods[tag].push(method);
+                  });
+                  
+                  return groupedMethods;
+                }, {})
+              ).map(([tag, methods]) => (
+                <div key={tag}>
+                  <h3>{tag}</h3>
+                  {methods?.map((method, methodIndex) => (
+                    <MethodsAccordion
+                      readOnly
+                      method={method}
+                      path={path.path}
+                      tags={values.tags}
+                    />
+                  ))}
+                </div>
+              ))}
             </div>
           ))}
         </div>

package/src/components/MethodAccordion/MethodAccordion.module.scss

@@ -134,6 +134,19 @@
                 }
               }
             }
+
+            &:not(:global(.disabled)):global(.success) {
+              :global(.endBtnIcon) {
+                margin-block: auto;
+
+                svg {
+                  width: 1.125rem;
+                  path {
+                    fill: #3aaa35;
+                  }
+                }
+              }
+            }
           }
         }
       }

package/src/components/MethodAccordion/MethodAccordion.tsx

@@ -1,13 +1,7 @@
-import React, { useEffect, useState } from 'react'
-import { Accordion, Button, SelectGroup, Switch, TextArea } from 'digitinary-ui'
+import { useEffect, useState } from 'react'
+import { Accordion, Button, SelectGroup, SelectGroupV2, Switch, TextArea } from 'digitinary-ui'
 import SVGLoader from '../../components/SVGLoader/SVGLoader'
-import {
-  CheckMarkSquare,
-  DeleteIcon,
-  DownArrowIcon,
-  EditIcon,
-  deleteOutlinedIcon,
-} from '../../assets/icons'
+import { DeleteIcon, DownArrowIcon, EditIcon, deleteOutlinedIcon } from '../../assets/icons'
 import { httpStatusCodes, methodColorMapping, paramsTableHeaders } from '../../constants/index'
 import Tooltip from '../../components/Tooltip/Tooltip'
 import { TransformedMethod } from '../../types/layout.type'
@@ -17,6 +11,7 @@ import ParamterTable from '../table/table'
 import CommonDialog from '../../components/dialog'
 import JsonInput from '../../components/JsonInput/JsonInput'
 import styles from './MethodAccordion.module.scss'
+import { Tags } from '@entities/openApi'
 
 const httpStatusCodeOptions = httpStatusCodes.map((code) => ({
   label: (
@@ -36,12 +31,13 @@ const MethodsAccordion = ({
   path,
   setFieldValue,
   readOnly,
+  tags,
 }: {
   method: TransformedMethod
   path: string
-  setFieldValue?: (key: string, value: string) => void
+  setFieldValue?: (key: string, value: string | string[]) => void
   readOnly?: boolean
-  handleSave: () => void
+  tags: Tags[]
 }) => {
   const [isExpanded, setIsExpanded] = useState({
     request: false,
@@ -55,7 +51,7 @@ const MethodsAccordion = ({
   const [selectedParamIndex, setSelectedParamIndex] = useState<number | null>(null)
   const [selectedParamName, setSelectedParamName] = useState<string | null>(null)
   const [tableRecords, setTableRecords] = useState()
-
+  const [selectionTags, setSelectionTags] = useState([])
   const [selectedStatusCode, setSelectedStatusCode] = useState(httpStatusCodeOptions[4])
   const currentResponse =
     method.responses.find((res) => Number(res.code) === selectedStatusCode.value) || '{}'
@@ -140,15 +136,20 @@ const MethodsAccordion = ({
                 </div>
               }
             >
-              {readOnly ? (
+              {readOnly || method.parameters[index].description?.length > 0 ? (
                 <Button
                   className={styles.editDescBtn}
                   variant="link"
                   color="action"
-                  // endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
+                  endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
                 >
-                  {item.description ? item.description.substring(0, 12) : '-'}
-                  {item.description && item.description.length > 12 ? '...' : ''}
+                  {method.parameters[index].description
+                    ? method.parameters[index].description.substring(0, 12)
+                    : '-'}
+                  {method.parameters[index].description &&
+                  method.parameters[index].description.length > 12
+                    ? '...'
+                    : ''}
                 </Button>
               ) : (
                 <Button
@@ -214,6 +215,25 @@ const MethodsAccordion = ({
     }
   }, [method, path])
 
+  useEffect(() => {
+    // prepare tags selection list
+    if (!selectionTags.length) {
+      const convertedStringArray = (method?.tags || [])?.map((item) => ({
+        label: capitalize(item),
+        value: item,
+      }))
+      const mergedArray = [
+        ...convertedStringArray,
+        ...(tags || []).map((item) => ({ label: capitalize(item.name), value: item.name })),
+      ]
+
+      const filteredArray = mergedArray.filter(
+        (value, index, self) => index === self.findIndex((t) => t.value === value.value)
+      )
+      setSelectionTags(filteredArray)
+    }
+  }, [tags, method])
+
   return (
     <div>
       <Accordion
@@ -244,6 +264,30 @@ const MethodsAccordion = ({
         }
         children={
           <div className={styles.methodAccordionContent}>
+            <SelectGroup
+              className={styles.methodDesc}
+              disabled={readOnly}
+              placeholder="Select Tags"
+              label="Tags"
+              value={method.tags?.map((t) => ({
+                label: capitalize(t),
+                value: t,
+              }))}
+              onChange={(item) => {
+                setFieldValue(
+                  'tags',
+                  item.map((i) => i.value)
+                )
+              }}
+              options={[
+                {
+                  list: selectionTags,
+                },
+              ]}
+              isMultiple={true}
+              withSearch={false}
+              clearable={false}
+            />
             {!readOnly ? (
               <TextArea
                 className={styles.methodDesc}
@@ -270,7 +314,6 @@ const MethodsAccordion = ({
                 readOnly={readOnly}
               />
             </div>
-
             {method?.type !== 'get' && (
               <Accordion
                 expanded={isExpanded.request}
@@ -313,7 +356,6 @@ const MethodsAccordion = ({
                 }
               />
             )}
-
             <Accordion
               expanded={isExpanded.response}
               onChange={() => null}

package/src/components/table/table.tsx

@@ -21,6 +21,7 @@ const ParamterTable = ({
   const [text, setText] = useState('')
   const [tooltipRef, setTooltipRef] = useState(null)
   const { values, errors, setFieldValue, isValid, submitForm, resetForm } = useFormik({
+    validateOnMount: true,
     initialValues: {
       name: '',
       in: 'Query',

package/src/components/table/tags-table.tsx

@@ -16,6 +16,7 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
   const [tooltipRef, setTooltipRef] = useState(null)
   const [externalTooltipRefs, setExternalTooltipRefs] = useState(null)
   const { values, errors, setFieldValue, isValid, submitForm, resetForm } = useFormik({
+    validateOnMount: true,
     initialValues: {
       name: '',
       description: '',
@@ -221,8 +222,7 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
                             variant="link"
                             color="action"
                             href={values.externalDocs?.url}
-                            target='_blank'
-                         
+                            target="_blank"
                           >
                             {values?.externalDocs?.description
                               ? values?.externalDocs?.description?.substring(0, 12)

package/src/layout/layout.tsx

@@ -1,4 +1,4 @@
-import { JSX } from 'react'
+import { JSX, useEffect } from 'react'
 import { Alert, Button } from 'digitinary-ui'
 import MethodsAccordion from '../components/MethodAccordion/MethodAccordion'
 import styles from './layout.module.css'
@@ -15,23 +15,34 @@ import { methodColorMapping } from '../constants/index'
 interface ILayoutProps {
   openApiJson?: OpenAPIFile
   handleSave?: (values: unknown) => unknown
+  setIsFormDirty?: any
 }
 
-const Layout = ({ openApiJson, handleSave }: ILayoutProps): JSX.Element => {
+const Layout = ({ openApiJson, handleSave, setIsFormDirty }: 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 }) => {
+    onSubmit: (values, { validateForm, resetForm }) => {
       // Handle save logic
       const originalOpenApiForm = transformOpenApiObjectToOrigin(values)
       handleSave(originalOpenApiForm)
+      resetForm({
+        values: values, // You can reset it to the same values if you want
+      })
+
       validateForm(values)
     },
   })
 
+  useEffect(() => {
+    if (setIsFormDirty) {
+      setIsFormDirty(formik.dirty)
+    }
+  }, [formik.dirty])
+
   return (
     <div className={styles.docsLayout}>
       <Alert className={styles.apiDocAlert} color="info">
@@ -72,6 +83,7 @@ const Layout = ({ openApiJson, handleSave }: ILayoutProps): JSX.Element => {
                   )
                   .map((method, methodIndex) => (
                     <MethodsAccordion
+                      tags={formik.values.tags}
                       method={method}
                       path={path.path}
                       setFieldValue={(key, value) => {