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

package/src/components/InfoForm/InfoForm.tsx

@@ -44,7 +44,6 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
 
   useEffect(() => {
     if (values.tags && values.tags.length) {
-      setTableRecords(generateTableRecords(values.tags))
       setTableData(values.tags)
     }
   }, [values.tags])
@@ -133,10 +132,14 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
               <div className={styles.editDescTooltipContent}>
                 <p className={styles.editDescTooltipContent_header}>Description</p>
                 <TextArea
-                  placeholder="Describe parameter..."
+                  placeholder="Describe tag..."
                   value={item.description}
                   disabled={readOnly}
-                  onChange={(value) => onTableChange('description', value, index)}
+                  onChange={(value) => {
+                    if (value === '' || regex.ASCII.test(value))
+                      onTableChange('description', value, index)
+                  }}
+                  maxLength={25}
                 />
                 {!readOnly && (
                   <Button
@@ -144,9 +147,10 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
                     variant="outlined"
                     size="small"
                     onClick={() => {
-                      setFieldValue(`tags[${index}].description`, item.description)
+                      setFieldValue(`tags[${index}].description`, item.description?.trim())
                       tooltipRefs[index]?.hide()
                     }}
+                    disabled={!item.description?.trim()}
                   >
                     Apply
                   </Button>
@@ -178,6 +182,24 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
       ),
       externalDocs: (
         <div className={styles.paramDescContainer}>
+          <a
+            className={styles.externalDocsLink}
+            href={values.tags[index].externalDocs?.url}
+            target="_blank"
+            style={
+              !values.tags[index].externalDocs?.description
+                ? { textDecoration: 'none', pointerEvents: 'none' }
+                : {}
+            }
+          >
+            {values.tags[index].externalDocs?.description
+              ? values.tags[index].externalDocs?.description?.substring(0, 12)
+              : '-'}
+            {values.tags[index].externalDocs?.description &&
+            values.tags[index].externalDocs?.description?.length > 12
+              ? '...'
+              : ''}
+          </a>
           <Tooltip
             arrowWithBorder
             placement="bottom-end"
@@ -197,13 +219,16 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
                   placeholder="Describe External Doc..."
                   value={item.externalDocs?.description}
                   disabled={readOnly}
+                  maxLength={25}
                   onChange={(value) => {
-                    onTableChange(
-                      'externalDocs',
-                      { ...item.externalDocs, description: value },
-                      index
-                    )
-                    setDescription(value)
+                    if (value === '' || regex.ASCII.test(value)) {
+                      onTableChange(
+                        'externalDocs',
+                        { ...item.externalDocs, description: value },
+                        index
+                      )
+                      setDescription(value)
+                    }
                   }}
                 />
                 <p className={styles.editDescTooltipContent_header}>External Docs Link</p>
@@ -211,9 +236,12 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
                   placeholder="External Docs Link..."
                   value={item.externalDocs?.url}
                   disabled={readOnly}
+                  maxLength={200}
                   onChange={(value) => {
-                    onTableChange('externalDocs', { ...item.externalDocs, url: value }, index)
-                    setURL(value)
+                    if (value === '' || regex.ASCII.test(value)) {
+                      onTableChange('externalDocs', { ...item.externalDocs, url: value }, index)
+                      setURL(value)
+                    }
                   }}
                 />
                 {!readOnly && (
@@ -223,13 +251,14 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
                     size="small"
                     onClick={() => {
                       setFieldValue(`tags[${index}].externalDocs`, {
-                        description: description,
-                        url: url,
+                        description: description?.trim(),
+                        url: url?.trim(),
                       })
                       setDescription('')
                       setURL('')
                       externalTooltipRefs[index]?.hide()
                     }}
+                    disabled={!description?.trim() || !url?.trim() || !regex.urlRegex.test(url)}
                   >
                     Apply
                   </Button>
@@ -238,24 +267,18 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
             }
           >
             {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={() => {
-                  setDescription(item.externalDocs?.description)
-                  setURL(item.externalDocs?.url)
-                }}
-              >
-                {values.tags[index].externalDocs?.description
-                  ? values.tags[index].externalDocs?.description?.substring(0, 12)
-                  : '-'}
-                {values.tags[index].externalDocs?.description &&
-                values.tags[index].externalDocs?.description?.length > 12
-                  ? '...'
-                  : ''}
-              </Button>
+              <div className={styles.editExternalDocs}>
+                <SVGLoader
+                  src={EditIcon}
+                  width="1.5rem"
+                  height="1.5rem"
+                  onClick={(e) => {
+                    e?.stopPropagation()
+                    setDescription(item.externalDocs?.description)
+                    setURL(item.externalDocs?.url)
+                  }}
+                />
+              </div>
             ) : (
               <Button
                 className={styles.editDescBtn}
@@ -300,7 +323,7 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
         label="API Name"
         required
         value={values?.info?.title}
-        maxLength={25}
+        maxLength={35}
         onChange={(value) => {
           setFieldValue('info.title', value)
         }}

package/src/components/JsonInput/JsonInput.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import yaml from 'js-yaml'
 import styles from './style.module.scss'
+import regex from '../../constants/regex'
 
 const errorMapping = {
   BOTH: 'Invalid JSON or YAML format',
@@ -93,15 +94,19 @@ const JsonInput = ({
           value={value}
           onChange={(e) => {
             if (fieldIsDisabled) return
-            setIsValid(undefined)
-            setDisabledBeautify(true)
-            onChange(e.target.value)
+            if (regex.ASCII.test(e.target.value)) {
+              setIsValid(undefined)
+              setDisabledBeautify(true)
+              onChange(e.target.value)
+            }
           }}
           onPaste={(e) => {
             if (fieldIsDisabled) return
-            setIsValid(undefined)
-            setDisabledBeautify(true)
-            onChange(e.target.value)
+            if (regex.ASCII.test(e.target.value)) {
+              setIsValid(undefined)
+              setDisabledBeautify(true)
+              onChange(e.target.value)
+            }
           }}
           min="1"
           placeholder={placeholder}

package/src/components/LivePreview/LivePreview.module.scss

@@ -1,5 +1,18 @@
-p.apiName {
-    font-size: 40px;
-    line-height: 30px;
-    font-weight: 500;
-}
+.livePreviewContainer {
+  .titleContainer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    p.apiName {
+      font-size: 40px;
+      line-height: 30px;
+      font-weight: 500;
+    }
+
+    .livePreviewChip {
+      background-color: #ebecf2;
+      color: #12131a;
+    }
+  }
+}

package/src/components/LivePreview/LivePreview.tsx

@@ -6,7 +6,7 @@ import { TransformedOpenApi } from '../../types/transformedOpenApi'
 import { useFormikContext } from 'formik'
 import { methodColorMapping, tagsTableHeaders } from '../../constants/index'
 import TagsTable from '../table/tags-table'
-import { Button } from 'digitinary-ui'
+import { Button, Chip } from 'digitinary-ui'
 import Tooltip from '../../components/Tooltip/Tooltip'
 
 interface LivePreviewProps {
@@ -105,10 +105,13 @@ const LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {
   }
 
   return (
-    <div>
+    <div className={styles.livePreviewContainer}>
       <div className="row">
         <div className="col-md-12">
-          <p className={styles.apiName}>{info?.title}</p>
+          <div className={styles.titleContainer}>
+            <p className={styles.apiName}>{info?.title?.trim() || '-'}</p>
+            <Chip className={styles.livePreviewChip}>Live Preview</Chip>
+          </div>
           <SimpleLabelValue
             key={'APIAuthenticationType'}
             label={'API authentication type: '}
@@ -122,7 +125,7 @@ const LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {
           <SimpleLabelValue
             key={'description'}
             label={'Description: '}
-            value={info?.description || '-'}
+            value={info?.description?.trim() || '-'}
           />
 
           <SimpleLabelValue key={'tags'} label={'Tags: '} />

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,
@@ -115,70 +120,79 @@ const MethodsAccordion = ({
               <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>
-            <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) => onTableChange('description', value, index)}
-                  />
-                  {!readOnly && (
-                    <Button
-                      className={styles.editDescTooltipContent_btn}
-                      variant="outlined"
-                      size="small"
-                      onClick={() => {
-                        setFieldValue(`parameters[${index}].description`, item.description)
-                        tooltipRefs[index]?.hide()
+            {!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)
                       }}
-                    >
-                      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 && (
+                      <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>}
 
@@ -254,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}>
@@ -271,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>
@@ -311,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

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,7 +112,7 @@
       .tippy-arrow {
         top: 1px;
         background-color: white;
-        z-index: 9999;
+        z-index: 2;
         height: 1px;
 
         &:before {
@@ -120,7 +123,7 @@
           border: none;
           border-left: 1px solid #d8dae5 !important;
           border-top: 1px solid #d8dae5 !important;
-          z-index: 20000000000;
+          z-index: 2;
           top: -0.45rem;
           transform-origin: center !important;
         }

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

@@ -33,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)
@@ -126,13 +126,12 @@ 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}
-                      restrictedCharactersRegex={regex.basic}
                     />
                   </div>
                 </td>
@@ -231,6 +230,7 @@ const ParamterTable = ({
                               }}
                               disabled={readOnly}
                               placeholder="Describe parameter..."
+                              maxLength={120}
                             />
                             {!readOnly && (
                               <Button
@@ -238,9 +238,10 @@ const ParamterTable = ({
                                 variant="outlined"
                                 size="small"
                                 onClick={() => {
-                                  setFieldValue('description', text)
+                                  setFieldValue('description', text?.trim())
                                   tooltipRef?.hide()
                                 }}
+                                disabled={text?.trim() === ''}
                               >
                                 Apply
                               </Button>