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

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'
@@ -24,10 +24,14 @@ const Layout = ({ openApiJson, handleSave }: ILayoutProps): JSX.Element => {
     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)
     },
   })
@@ -72,6 +76,7 @@ const Layout = ({ openApiJson, handleSave }: ILayoutProps): JSX.Element => {
                   )
                   .map((method, methodIndex) => (
                     <MethodsAccordion
+                      tags={formik.values.tags}
                       method={method}
                       path={path.path}
                       setFieldValue={(key, value) => {