@digi-frontend/dgate-api-documentation 1.0.25 → 1.0.26

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

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import './style.scss'
 import _styles from '../InfoForm/InfoForm.module.scss'
 import { Button, Input, TextArea } from 'digitinary-ui'
@@ -10,8 +10,6 @@ import { useFormik } from 'formik'
 import * as yup from 'yup'
 import regex from '../../constants/regex'
 
-const urlRegex = /^(https?:\/\/)?(www\.)?([a-zA-Z0-9-]+(\.[a-zA-Z]{2,})+)(\/[^\s]*)?$/
-
 const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow, readOnly }) => {
   const [text, setText] = useState('')
   const [externalDesc, setExternalDesc] = useState('')
@@ -29,28 +27,27 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
       },
     },
     validationSchema: yup.object().shape({
-      name: yup.string().required('Tag name is required'),
+      name: yup.string().trim().required('Tag name is required'),
       description: yup.string().optional(),
       externalDocs: yup
         .object()
         .shape({
           url: yup
             .string()
-            .matches(urlRegex, 'Invalid URL')
+            .trim()
+            .matches(regex.urlRegex, 'Invalid URL')
             .when('description', (description, schema) => {
               return description?.at(0)
                 ? schema.required('URL is required when description is provided')
                 : schema.optional()
             }),
-          description: yup.string().optional(),
+          description: yup.string().trim().optional(),
         })
         .optional(),
     }),
     onSubmit: (values) => {
       saveNewRow(values)
       setText('')
-      setExternalDesc('')
-      setExternalUrl('')
       resetForm()
       setIsFormOpen(false)
     },
@@ -124,6 +121,7 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
                       placeholder="Tag name"
                       size="large"
                       type="text"
+                      maxLength={25}
                       onChange={(value) => {
                         !regex.basic.test(value) && setFieldValue('name', value)
                       }} // Pass the value directly
@@ -143,16 +141,20 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
                         trigger="click"
                         delay={[0, 0]}
                         onCreate={(instance) => setTooltipRef(instance)}
+                        onHidden={() => {
+                          setText(values.description)
+                        }}
                         content={
                           <div className={_styles.editDescTooltipContent}>
                             <p className={_styles.editDescTooltipContent_header}>Description</p>
                             <TextArea
                               value={text || values.description}
+                              disabled={readOnly}
+                              maxLength={25}
+                              placeholder="Describe Tag..."
                               onChange={(value) => {
                                 if (value === '' || regex.ASCII.test(value)) setText(value)
                               }}
-                              disabled={readOnly}
-                              placeholder="Describe Tag..."
                             />
                             {!readOnly && (
                               <Button
@@ -160,9 +162,10 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
                                 variant="outlined"
                                 size="small"
                                 onClick={() => {
-                                  setFieldValue('description', text)
+                                  setFieldValue('description', text?.trim())
                                   tooltipRef?.hide()
                                 }}
+                                disabled={!(text || values.description)?.trim()}
                               >
                                 Apply
                               </Button>
@@ -193,6 +196,10 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
                         trigger="click"
                         delay={[0, 0]}
                         onCreate={(instance) => setExternalTooltipRefs(instance)}
+                        onHidden={() => {
+                          setExternalDesc(values.externalDocs.description)
+                          setExternalUrl(values.externalDocs.url)
+                        }}
                         content={
                           <div className={_styles.editDescTooltipContent}>
                             <p className={_styles.editDescTooltipContent_header}>
@@ -202,6 +209,7 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
                               placeholder="Describe External Doc..."
                               value={externalDesc || values.externalDocs.description}
                               disabled={readOnly}
+                              maxLength={25}
                               onChange={(value) => {
                                 if (value === '' || regex.ASCII.test(value)) setExternalDesc(value)
                               }}
@@ -213,6 +221,7 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
                               placeholder="External Docs Link..."
                               value={externalUrl || values.externalDocs.url}
                               disabled={readOnly}
+                              maxLength={200}
                               onChange={(value) => {
                                 if (value === '' || regex.ASCII.test(value)) setExternalUrl(value)
                               }}
@@ -227,10 +236,14 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
                                     description: externalDesc,
                                     url: externalUrl,
                                   })
-                                  setExternalDesc('')
-                                  setExternalUrl('')
+
                                   externalTooltipRefs?.hide()
                                 }}
+                                disabled={
+                                  !(externalDesc || values.externalDocs.description)?.trim() ||
+                                  !(externalUrl || values.externalDocs.url)?.trim() ||
+                                  !regex.urlRegex.test(externalUrl || values.externalDocs.url)
+                                }
                               >
                                 Apply
                               </Button>

package/src/constants/regex.ts

@@ -2,5 +2,6 @@ const regex = {
   basic: /[^a-zA-Z0-9-_ ]/, // not (alphanumeric + underscore + dash + space)
   restrictNone: /^$/, // restrict nothing
   ASCII: /^[\x00-\x7F]+$/,
+  urlRegex: /^(https?:\/\/)?(www\.)?([a-zA-Z0-9-]+(\.[a-zA-Z]{2,})+)(\/[^\s]*)?$/,
 }
 export default regex

package/src/helpers/layout.helper.ts

@@ -56,7 +56,7 @@ export const transformPathsToArray = (paths: OpenAPIFile['paths']): TransformedP
       const obj: any = {
         ...methodProps,
         type: method,
-        tags: methodProps.tags,
+        tags: methodProps.tags || [],
         responses: Object.entries(methodProps.responses).map(([code, codeProps]) => {
           const contentType = Object.keys(codeProps.content || {})[0]
           return {

package/src/layout/layout.module.css

@@ -7,6 +7,7 @@
 
   .apiDocAlert {
     border-radius: 0;
+    z-index: 3;
   }
 
   .layoutContainer {
@@ -53,4 +54,8 @@
       scroll-behavior: smooth;
     }
   }
+
+  :global(.textArea .inputField) {
+    padding-inline-end: 2.5rem;
+  }
 }

package/src/layout/layout.tsx

@@ -38,6 +38,7 @@ const Layout = ({ openApiJson, handleSave, setIsFormDirty }: ILayoutProps): JSX.
     },
   })
   const [isPublishDialogOpen, setIsPublishDialogOpen] = useState(false)
+  const [openMethodIndex, setOpenMethodIndex] = useState<number | null>(null)
 
   useEffect(() => {
     if (setIsFormDirty) {
@@ -77,7 +78,7 @@ const Layout = ({ openApiJson, handleSave, setIsFormDirty }: ILayoutProps): JSX.
           <FormikProvider value={formik}>
             <InfoForm />
           </FormikProvider>
-          <SectionHead className={styles.editorSectionHead} text="API Methods" />
+          <SectionHead className={styles.editorSectionHead} text="Endpoints" />
           <FormikProvider value={formik}>
             {formik.values.paths.map((path, pathIndex) => (
               <>
@@ -94,6 +95,8 @@ const Layout = ({ openApiJson, handleSave, setIsFormDirty }: ILayoutProps): JSX.
                         const h = `paths[${pathIndex}].methods[${methodIndex}].${key}`
                         formik.setFieldValue(h, value)
                       }}
+                      isOpen={openMethodIndex === methodIndex}
+                      setIsOpen={(open) => setOpenMethodIndex(open ? methodIndex : null)}
                     />
                   ))}
               </>

package/src/validator/form.scheme.ts

@@ -4,7 +4,7 @@ export const schemaValidation = yup.object({
   info: yup
     .object({
       title: yup.string().trim().required('API Name is required.'),
-      description: yup.string().required(),
+      description: yup.string().trim().required(),
       version: yup.string().required('API Version is required'),
     })
     .required(),