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

package/src/components/MethodAccordion/MethodAccordion.tsx

@@ -12,6 +12,7 @@ import CommonDialog from '../../components/dialog'
 import JsonInput from '../../components/JsonInput/JsonInput'
 import styles from './MethodAccordion.module.scss'
 import { Tags } from '@entities/openApi'
+import regex from '../../constants/regex'
 
 const httpStatusCodeOptions = httpStatusCodes.map((code) => ({
   label: (
@@ -32,12 +33,16 @@ const MethodsAccordion = ({
   setFieldValue,
   readOnly,
   tags,
+  isOpen,
+  setIsOpen,
 }: {
   method: TransformedMethod
   path: string
   setFieldValue?: (key: string, value: string | string[]) => void
   readOnly?: boolean
   tags: Tags[]
+  isOpen: boolean
+  setIsOpen: (open: boolean) => void
 }) => {
   const [isExpanded, setIsExpanded] = useState({
     request: false,
@@ -100,68 +105,94 @@ const MethodsAccordion = ({
         description: (
           <div className={styles.paramDescContainer}>
             <Tooltip
+              key={`${index}-description`}
+              allowHTML
+              disabled={method.parameters[index].description?.length <= 12}
+              content={
+                <div style={{ padding: '0.625rem' }}>{method.parameters[index].description}</div>
+              }
               arrowWithBorder
               placement="bottom-end"
               type="function"
-              trigger="click"
               delay={[0, 0]}
-              onCreate={(instance) =>
-                setTooltipRefs((prev) => ({
-                  ...prev,
-                  [index]: instance,
-                }))
-              }
-              content={
-                <div className={styles.editDescTooltipContent}>
-                  <p className={styles.editDescTooltipContent_header}>Description</p>
-                  <TextArea
-                    placeholder="Describe parameter..."
-                    value={item.description}
-                    disabled={readOnly}
-                    onChange={(value) => onTableChange('description', value, index)}
-                  />
-                  {!readOnly && (
-                    <Button
-                      className={styles.editDescTooltipContent_btn}
-                      variant="outlined"
-                      size="small"
-                      onClick={() => {
-                        setFieldValue(`parameters[${index}].description`, item.description)
-                        tooltipRefs[index]?.hide()
-                      }}
-                    >
-                      Apply
-                    </Button>
-                  )}
-                </div>
-              }
+              onShow={() => tooltipRefs[index]?.hide()}
             >
-              {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" />}
-                >
-                  {method.parameters[index].description
-                    ? method.parameters[index].description.substring(0, 12)
-                    : '-'}
-                  {method.parameters[index].description &&
-                  method.parameters[index].description.length > 12
-                    ? '...'
-                    : ''}
-                </Button>
-              ) : (
-                <Button
-                  className={styles.editDescBtn}
-                  variant="link"
-                  color="action"
-                  endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
-                >
-                  {readOnly ? 'View ' : 'Add '} Description
-                </Button>
-              )}
+              <p style={{ alignSelf: 'center' }}>
+                {method.parameters[index].description
+                  ? method.parameters[index].description.substring(0, 12)
+                  : readOnly && '-'}
+                {method.parameters[index].description &&
+                method.parameters[index].description.length > 12
+                  ? '...'
+                  : ''}
+              </p>
             </Tooltip>
+            {!readOnly && (
+              <Tooltip
+                key={`${index}-add-edit-description`}
+                allowHTML
+                arrowWithBorder
+                placement="bottom-end"
+                type="function"
+                trigger="click"
+                delay={[0, 0]}
+                onCreate={(instance) =>
+                  setTooltipRefs((prev) => ({
+                    ...prev,
+                    [index]: instance,
+                  }))
+                }
+                content={
+                  <div className={styles.editDescTooltipContent}>
+                    <p className={styles.editDescTooltipContent_header}>Description</p>
+                    <TextArea
+                      placeholder="Describe parameter..."
+                      value={item.description}
+                      disabled={readOnly}
+                      onChange={(value) => {
+                        if (value === '' || regex.ASCII.test(value))
+                          onTableChange('description', value, index)
+                      }}
+                    />
+                    {!readOnly && (
+                      <Button
+                        className={styles.editDescTooltipContent_btn}
+                        variant="outlined"
+                        size="small"
+                        onClick={() => {
+                          setFieldValue(
+                            `parameters[${index}].description`,
+                            item.description?.trim()
+                          )
+                          tooltipRefs[index]?.hide()
+                        }}
+                        disabled={!item.description?.trim()}
+                      >
+                        Apply
+                      </Button>
+                    )}
+                  </div>
+                }
+              >
+                {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" />}
+                  ></Button>
+                ) : (
+                  <Button
+                    className={styles.editDescBtn}
+                    variant="link"
+                    color="action"
+                    endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
+                  >
+                    {readOnly ? 'View ' : 'Add '} Description
+                  </Button>
+                )}
+              </Tooltip>
+            )}
 
             {!readOnly && <div className={styles.paramDescContainer_separator}></div>}
 
@@ -210,14 +241,13 @@ const MethodsAccordion = ({
 
   useEffect(() => {
     if (method?.parameters) {
-      setTableRecords(generateTableData(method.parameters))
       setTableData(method.parameters)
     }
   }, [method, path])
 
   useEffect(() => {
     // prepare tags selection list
-    if (!selectionTags.length) {
+    if (method?.tags.length || tags.length) {
       const convertedStringArray = (method?.tags || [])?.map((item) => ({
         label: capitalize(item),
         value: item,
@@ -230,6 +260,7 @@ const MethodsAccordion = ({
       const filteredArray = mergedArray.filter(
         (value, index, self) => index === self.findIndex((t) => t.value === value.value)
       )
+
       setSelectionTags(filteredArray)
     }
   }, [tags, method])
@@ -237,8 +268,8 @@ const MethodsAccordion = ({
   return (
     <div>
       <Accordion
-        expanded={isExpanded.method}
-        onChange={() => setIsExpanded((prev) => ({ ...prev, method: !prev.method }))}
+        expanded={isOpen}
+        onChange={() => setIsOpen(!isOpen)}
         className={`${styles.methodAccordion} ${readOnly ? styles.readOnly : ''}`}
         summary={
           <div className={styles.methodSummaryContainer}>
@@ -254,9 +285,7 @@ const MethodsAccordion = ({
               <span className={styles.methodPath}>{path}</span>
             </div>
             <div
-              className={`${styles.methodExpandArrowContainer} ${
-                isExpanded.method ? styles.expanded : ''
-              }`}
+              className={`${styles.methodExpandArrowContainer} ${isOpen ? styles.expanded : ''}`}
             >
               <SVGLoader src={DownArrowIcon} width="2rem" height="2rem" />
             </div>
@@ -294,7 +323,9 @@ const MethodsAccordion = ({
                 label="Description"
                 placeholder="Describe the method's purpose and functionality..."
                 value={method?.description}
-                onChange={(value) => setFieldValue('description', value)}
+                onChange={(value) => {
+                  if (value === '' || regex.ASCII.test(value)) setFieldValue('description', value)
+                }}
               />
             ) : (
               <SimpleLabelValue
@@ -343,6 +374,7 @@ const MethodsAccordion = ({
                 }
                 children={
                   <JsonInput
+                    acceptType="JSON"
                     withFooter={!readOnly}
                     className={'jsonField'}
                     placeholder="Enter your request body as a JSON object...."
@@ -399,6 +431,7 @@ const MethodsAccordion = ({
               }
               children={
                 <JsonInput
+                  acceptType="JSON"
                   withFooter={!readOnly}
                   className={'jsonField'}
                   placeholder="Enter your response as a JSON object..."
@@ -451,17 +484,20 @@ const MethodsAccordion = ({
             className="delete-msg-container"
           >
             Are you sure you want to delete
-            <span className="plan-name">{` Parameter ${selectedParamName} `}</span>?
+            <span className="plan-name">
+              Parameter <strong>{selectedParamName}</strong>
+            </span>
+            ?
           </p>
         }
         onSubmit={{
           onClick: confirmDeleteParameter,
-          text: 'Yes',
+          text: 'Delete',
           color: 'error',
           fullWidth: true,
         }}
         onCancel={{
-          text: 'No',
+          text: 'Cancel',
           color: 'normal',
           fullWidth: true,
         }}

package/src/components/Tooltip/Tooltip.scss

@@ -1,7 +1,9 @@
 .tooltip-custom-wrapper {
   display: flex;
 }
-
+[data-tippy-root] {
+  z-index: 2 !important;
+}
 .tippy-box {
   background-color: #202f5b;
   font-size: 0.875rem;
@@ -12,16 +14,17 @@
   word-break: break-word;
   position: relative;
   border: 1px solid #d8dae5;
+  z-index: 2;
 
   &.function {
     .tippy-content {
       background-color: #fff !important;
       color: #000 !important;
     }
-  }
 
-  &[data-placement] > .tippy-arrow:before {
-    color: #fff !important;
+    &[data-placement] > .tippy-arrow:before {
+      color: #fff !important;
+    }
   }
 
   &.info {
@@ -109,19 +112,19 @@
       .tippy-arrow {
         top: 1px;
         background-color: white;
-        z-index: 9999;
+        z-index: 2;
         height: 1px;
 
         &:before {
-          width: 1rem;
-          height: 1rem;
+          width: 0.625rem;
+          height: 0.625rem;
           background-color: white;
           transform: rotate(45deg);
           border: none;
           border-left: 1px solid #d8dae5 !important;
           border-top: 1px solid #d8dae5 !important;
-          z-index: 20000000000;
-          top: -0.6rem;
+          z-index: 2;
+          top: -0.45rem;
           transform-origin: center !important;
         }
       }

package/src/components/Tooltip/Tooltip.tsx

@@ -1,10 +1,9 @@
 import React, { useState, useEffect, ReactNode } from 'react'
-import Tippy from '@tippyjs/react'
+import Tippy, { TippyProps } from '@tippyjs/react'
 import 'tippy.js/dist/tippy.css'
 import './Tooltip.scss'
 
-interface TooltipProps {
-  children: ReactNode
+interface TooltipProps extends TippyProps {
   content: ReactNode
   success?: boolean
   onMouseEnter?: (event: React.MouseEvent<HTMLDivElement>) => void

package/src/components/table/style.scss

@@ -29,7 +29,7 @@
       .tableHead {
         border: 1px solid var(--Gray-10);
         margin: 0rem !important;
-        background-color: var(--background-color-header);
+        background-color: #f8f9fb;
         width: max-content;
         min-width: 100%;
         color: var(--Gray-50);

package/src/components/table/table.tsx

@@ -8,6 +8,7 @@ import styles from '../MethodAccordion/MethodAccordion.module.scss'
 import { useFormik } from 'formik'
 import * as yup from 'yup'
 import { capitalize } from '../../helpers/methodAccordion.helper'
+import regex from '../../constants/regex'
 
 const ParamterTable = ({
   id,
@@ -32,13 +33,13 @@ const ParamterTable = ({
       description: '',
     },
     validationSchema: yup.object().shape({
-      name: yup.string().required('Parameter name is required'),
+      name: yup.string().trim().required('Parameter name is required'),
       in: yup.string().required('Paramter type is required'),
       schema: yup.object().shape({
         type: yup.string().required('Parameter schema type is required'),
       }),
       required: yup.boolean().optional(),
-      description: yup.string().optional(),
+      description: yup.string().trim().optional(),
     }),
     onSubmit: (values) => {
       saveNewRow(values)
@@ -125,11 +126,11 @@ const ParamterTable = ({
                       placeholder="Parameter name"
                       size="large"
                       type="text"
-                      //   errorMsg={!!errors.name && errors.name}
                       onChange={(value) => {
-                        setFieldValue('name', value)
-                      }} // Pass the value directly
-                      value={values.name} // Bind value to the state
+                        if (value === '' || regex.ASCII.test(value as string))
+                          setFieldValue('name', value)
+                      }}
+                      value={values.name}
                       disabled={readOnly}
                     />
                   </div>
@@ -225,10 +226,11 @@ const ParamterTable = ({
                             <TextArea
                               value={text || values.description}
                               onChange={(value) => {
-                                setText(value)
+                                if (value === '' || regex.ASCII.test(value)) setText(value)
                               }}
                               disabled={readOnly}
                               placeholder="Describe parameter..."
+                              maxLength={120}
                             />
                             {!readOnly && (
                               <Button
@@ -236,9 +238,10 @@ const ParamterTable = ({
                                 variant="outlined"
                                 size="small"
                                 onClick={() => {
-                                  setFieldValue('description', text)
+                                  setFieldValue('description', text?.trim())
                                   tooltipRef?.hide()
                                 }}
+                                disabled={text?.trim() === ''}
                               >
                                 Apply
                               </Button>

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'
@@ -8,6 +8,7 @@ import { AddRow, EditIcon, DeleteIcon } from '../../assets/icons'
 import styles from '../MethodAccordion/MethodAccordion.module.scss'
 import { useFormik } from 'formik'
 import * as yup from 'yup'
+import regex from '../../constants/regex'
 
 const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow, readOnly }) => {
   const [text, setText] = useState('')
@@ -26,19 +27,33 @@ 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().optional(),
+      externalDocs: yup
+        .object()
+        .shape({
+          url: yup
+            .string()
+            .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().trim().optional(),
+        })
+        .optional(),
     }),
     onSubmit: (values) => {
       saveNewRow(values)
       setText('')
-      setExternalDesc('')
-      setExternalUrl('')
       resetForm()
       setIsFormOpen(false)
     },
+    validateOnChange: true,
   })
+
   return (
     <div className="tableSectionContainer">
       <div className="tableContainer">
@@ -106,8 +121,9 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
                       placeholder="Tag name"
                       size="large"
                       type="text"
+                      maxLength={25}
                       onChange={(value) => {
-                        setFieldValue('name', value)
+                        !regex.basic.test(value) && setFieldValue('name', value)
                       }} // Pass the value directly
                       value={values.name} // Bind value to the state
                       disabled={readOnly}
@@ -125,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}
-                              onChange={(value) => {
-                                setText(value)
-                              }}
                               disabled={readOnly}
+                              maxLength={25}
                               placeholder="Describe Tag..."
+                              onChange={(value) => {
+                                if (value === '' || regex.ASCII.test(value)) setText(value)
+                              }}
                             />
                             {!readOnly && (
                               <Button
@@ -142,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>
@@ -175,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}>
@@ -184,7 +209,10 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
                               placeholder="Describe External Doc..."
                               value={externalDesc || values.externalDocs.description}
                               disabled={readOnly}
-                              onChange={(value) => setExternalDesc(value)}
+                              maxLength={25}
+                              onChange={(value) => {
+                                if (value === '' || regex.ASCII.test(value)) setExternalDesc(value)
+                              }}
                             />
                             <p className={_styles.editDescTooltipContent_header}>
                               External Docs Link
@@ -193,7 +221,10 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
                               placeholder="External Docs Link..."
                               value={externalUrl || values.externalDocs.url}
                               disabled={readOnly}
-                              onChange={(value) => setExternalUrl(value)}
+                              maxLength={200}
+                              onChange={(value) => {
+                                if (value === '' || regex.ASCII.test(value)) setExternalUrl(value)
+                              }}
                             />
                             {!readOnly && (
                               <Button
@@ -205,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

@@ -1,5 +1,7 @@
 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;
+  }
 }