@digi-frontend/dgate-api-documentation 1.0.47 → 1.0.52

package/src/components/MethodAccordion/MethodAccordion.tsx

@@ -64,18 +64,22 @@ const MethodsAccordion = ({
   const [isFormOpen, setIsFormOpen] = useState<'Req' | 'Res'>(undefined)
   const [tooltipRefs, setTooltipRefs] = useState<{ [key: number]: any }>({})
   const [tableData, setTableData] = useState([])
+  const [tableResponseData, setTableResponseData] = useState([])
   const [openDeleteDialog, setOpenDeleteDialog] = useState(false)
+  const [openHeaderDeleteDialog, setOpenHeaderDeleteDialog] = useState(false)
   const [selectedParamIndex, setSelectedParamIndex] = useState<number | null>(null)
+  const [selectedHeaderIndex, setSelectedHeaderIndex] = useState<number | null>(null)
   const [selectedParamName, setSelectedParamName] = useState<string | null>(null)
   const [tableRecords, setTableRecords] = useState()
-  const [tableResponseRecords, setTableResponseRecords] = useState()
+  const [tableResponseRecords, setTableResponseRecords] = useState([])
   const [selectionTags, setSelectionTags] = useState([])
   const [selectedStatusCode, setSelectedStatusCode] = useState(httpStatusCodeOptions[4])
   const [enumFields, setEnumFields] = useState([])
   const [tooltipEnumRef, setTooltipEnumRef] = useState(null)
+  const [currentResponseIndex, setCurrentResponseIndex] = useState<number>(-1)
   const currentResponse =
     method.responses.find((res) => Number(res.code) === selectedStatusCode.value) || '{}'
-
+  const indexRef = useRef(-1)
   const onTableChange = (key, value, index) => {
     const newTableData = tableData.map((item, tIndex) => {
       if (tIndex === index) {
@@ -88,6 +92,275 @@ const MethodsAccordion = ({
     setTableData(newTableData)
   }
 
+  const generateResponseTableData = (headersObj: any, responseIndex: number) => {
+    const headersByName = Object.keys(headersObj)
+    return headersByName.map((item, index) => {
+      const data = headersObj[item]
+      return {
+        id: `header_${index}`,
+        paramName: item,
+        paramType: capitalize('header'),
+        schemaType: capitalize(data?.schema?.type) || '',
+        required: (
+          <>
+            {readOnly ? (
+              data.required ? (
+                'True'
+              ) : (
+                'False'
+              )
+            ) : (
+              <Switch
+                checked={data.required}
+                onClick={() => {
+                  if (readOnly) {
+                    return null
+                  }
+                  setFieldValue(
+                    `responses[${responseIndex}].headers[${item}].required`,
+                    !data.required
+                  )
+                }}
+              />
+            )}
+          </>
+        ),
+        description: (
+          <div className={styles.paramDescContainer}>
+            <Tooltip
+              key={`${index}-description`}
+              allowHTML
+              disabled={method.responses[responseIndex].headers[item].description?.length <= 12}
+              content={
+                <div style={{ padding: '0.625rem' }}>
+                  {method.responses[responseIndex].headers[item].description}
+                </div>
+              }
+              arrowWithBorder
+              placement="bottom-end"
+              type="function"
+              delay={[0, 0]}
+              onShow={() => tooltipRefs[index]?.hide()}
+            >
+              <p style={{ alignSelf: 'center' }}>
+                {method.responses[responseIndex].headers[item].description
+                  ? method.responses[responseIndex].headers[item].description.substring(0, 12)
+                  : readOnly && '-'}
+                {method.responses[responseIndex].headers[item].description &&
+                method.responses[responseIndex].headers[item].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={data.description}
+                      disabled={readOnly}
+                      maxLength={120}
+                      onChange={(value) => {
+                        if (value === '' || regex.ASCII.test(value)) {
+                          // onResponseTableChange('description', value, item, indexRef.current)
+                          setFieldValue(
+                            `responses[${indexRef.current}].headers[${item}].description`,
+                            value
+                          )
+                        }
+                      }}
+                    />
+                    {!readOnly && (
+                      <Button
+                        className={styles.editDescTooltipContent_btn}
+                        variant="outlined"
+                        size="small"
+                        onClick={() => {
+                          setFieldValue(
+                            `responses[${responseIndex}].headers[${item}].description`,
+                            data.description?.trim()
+                          )
+                          tooltipRefs[index]?.hide()
+                        }}
+                        disabled={!data.description?.trim()}
+                      >
+                        Apply
+                      </Button>
+                    )}
+                  </div>
+                }
+              >
+                {readOnly ||
+                method.responses[responseIndex].headers[item].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>}
+
+            {!readOnly && (
+              <Button
+                className={styles.deleteParamBtn}
+                variant="link"
+                color="error"
+                endIcon={<SVGLoader src={DeleteIcon} width="1.125rem" height="1.125rem" />}
+                onClick={() => handleDeleteResponseHeader(index, item)}
+              ></Button>
+            )}
+          </div>
+        ),
+        enum: (
+          <>
+            {readOnly ? (
+              <span className="enumText">{data?.schema?.enum?.join('/\u200B')}</span>
+            ) : (
+              <div data-id="TEXT_DESCRIPTION" className="tableData">
+                {method.responses[responseIndex]?.headers[index]?.schema &&
+                method.responses[responseIndex]?.headers[index]?.schema?.type?.toLowerCase() !=
+                  'array' &&
+                method.responses[responseIndex]?.headers[index]?.schema?.type?.toLowerCase() !=
+                  'object' ? (
+                  <Tooltip
+                    disabled={
+                      method.responses[responseIndex]?.headers[
+                        index
+                      ]?.schema?.type?.toLowerCase() == 'array' ||
+                      method.responses[responseIndex]?.headers[
+                        index
+                      ]?.schema?.type?.toLowerCase() == 'object'
+                    }
+                    arrowWithBorder
+                    placement="bottom-end"
+                    type="function"
+                    trigger="click"
+                    delay={[0, 0]}
+                    onCreate={(instance) => setTooltipEnumRef(instance)}
+                    content={
+                      <div className={styles.editDescTooltipContent}>
+                        <p className={styles.editDescTooltipContent_header}>Enum</p>
+                        {!!method.responses[responseIndex]?.headers[index]?.schema?.enum &&
+                          !!method.responses[responseIndex]?.headers[index]?.schema?.enum.length &&
+                          method.responses[responseIndex]?.headers[index]?.schema?.enum?.map(
+                            (item, _index) => (
+                              <Input
+                                key={index}
+                                className={'methodDescForEnum'}
+                                required
+                                clearable={false}
+                                placeholder="Enter Enum value..."
+                                value={item}
+                                onChange={(value) => {
+                                  setFieldValue(
+                                    `responses[${currentResponse}].headers[${index}].schema.enum[${_index}]`,
+                                    value.toString()
+                                  )
+                                }}
+                              />
+                            )
+                          )}
+                        <p
+                          className={'addEnumButton'}
+                          onClick={() => {
+                            setFieldValue(
+                              `responses[${currentResponse}].headers[${index}].schema.enum`,
+                              [...method.responses[responseIndex]?.headers[index]?.schema?.enum, '']
+                            )
+                          }}
+                        >
+                          <SVGLoader src={PlusSquare} />
+                          Add New Enum
+                        </p>
+                        {!readOnly && (
+                          <Button
+                            className={styles.editDescTooltipContent_btn}
+                            variant="outlined"
+                            size="small"
+                            type="button"
+                            onClick={() => {
+                              setFieldValue(
+                                `responses[${currentResponse}].headers[${index}].schema.enum`,
+                                [...method.parameters[index].schema.enum]
+                              )
+                              setEnumFields([])
+                              tooltipEnumRef?.hide()
+                            }}
+                            disabled={
+                              (enumFields.length > 0 &&
+                                enumFields?.filter((item) => !item).length) ||
+                              (method?.parameters[index]?.schema?.enum &&
+                                method?.parameters[index]?.schema?.enum?.length > 0 &&
+                                method?.parameters[index]?.schema?.enum?.filter((item) => !item)
+                                  .length)
+                            }
+                          >
+                            Apply
+                          </Button>
+                        )}
+                      </div>
+                    }
+                  >
+                    {method.responses[responseIndex]?.headers[index]?.schema?.enum &&
+                    method.responses[responseIndex]?.headers[index]?.schema?.enum?.length > 0 ? (
+                      <span className={'enumText'}>
+                        {method.responses[responseIndex]?.headers[index]?.schema?.enum?.join(
+                          '/\u200B'
+                        )}
+                      </span>
+                    ) : (
+                      <Button
+                        className={styles.editDescBtn}
+                        id="EnumButton"
+                        variant="link"
+                        color="action"
+                        endIcon={
+                          <SVGLoader id="enumIcon" src={PlusIcon} width="1.5rem" height="1.5rem" />
+                        }
+                      >
+                        Add
+                      </Button>
+                    )}
+                  </Tooltip>
+                ) : (
+                  '-'
+                )}{' '}
+              </div>
+            )}
+          </>
+        ),
+      }
+    })
+  }
+
   const generateTableData = (items, isForRequest?: boolean) => {
     const data = isForRequest
       ? items.filter((item) => item.in && item.in.toLowerCase() != 'header')
@@ -229,7 +502,7 @@ const MethodsAccordion = ({
         enum: (
           <>
             {readOnly ? (
-              item?.schema?.enum?.join(' / ')
+              <span className="enumText">{item?.schema?.enum?.join('/\u200B')}</span>
             ) : (
               <div data-id="TEXT_DESCRIPTION" className="tableData">
                 {method.parameters[index]?.schema &&
@@ -294,7 +567,8 @@ const MethodsAccordion = ({
                                 enumFields?.filter((item) => !item).length) ||
                               (method?.parameters[index]?.schema?.enum &&
                                 method?.parameters[index]?.schema?.enum?.length > 0 &&
-                                method?.parameters[index]?.schema?.enum?.filter((item) => !item).length)
+                                method?.parameters[index]?.schema?.enum?.filter((item) => !item)
+                                  .length)
                             }
                           >
                             Apply
@@ -303,17 +577,24 @@ const MethodsAccordion = ({
                       </div>
                     }
                   >
-                    <Button
-                      className={styles.editDescBtn}
-                      id="EnumButton"
-                      variant="link"
-                      color="action"
-                      endIcon={
-                        <SVGLoader id="enumIcon" src={PlusIcon} width="1.5rem" height="1.5rem" />
-                      }
-                    >
-                      Add
-                    </Button>
+                    {method.parameters[index]?.schema?.enum &&
+                    method.parameters[index]?.schema?.enum?.length > 0 ? (
+                      <span className={'enumText'}>
+                        {method.parameters[index]?.schema?.enum?.join('/\u200B')}
+                      </span>
+                    ) : (
+                      <Button
+                        className={styles.editDescBtn}
+                        id="EnumButton"
+                        variant="link"
+                        color="action"
+                        endIcon={
+                          <SVGLoader id="enumIcon" src={PlusIcon} width="1.5rem" height="1.5rem" />
+                        }
+                      >
+                        Add
+                      </Button>
+                    )}
                   </Tooltip>
                 ) : (
                   '-'
@@ -338,6 +619,19 @@ const MethodsAccordion = ({
     setSelectedParamIndex(null)
   }
 
+  const confirmDeleteHeader = () => {
+    if (setSelectedHeaderIndex !== null) {
+      let headers = Object.fromEntries(
+        Object.entries(method.responses[indexRef.current].headers).filter(
+          ([key]) => key != selectedParamName
+        )
+      )
+      setFieldValue(`responses[${indexRef.current}].headers`, headers)
+    }
+    setOpenHeaderDeleteDialog(false)
+    setSelectedHeaderIndex(null)
+  }
+
   const handleDeleteClick = (id: number, name: string) => {
     setSelectedParamIndex(id)
     setSelectedParamName(name)
@@ -345,14 +639,25 @@ const MethodsAccordion = ({
     setOpenDeleteDialog(true)
   }
 
+  const handleDeleteResponseHeader = (index, name) => {
+    setSelectedHeaderIndex(index)
+    setSelectedParamName(name)
+
+    setOpenHeaderDeleteDialog(true)
+  }
+
   const saveNewRow = (values) => {
     setTableData([...tableData, values])
     setFieldValue(`parameters`, [...method.parameters, values])
   }
 
+  const saveNewResponseRow = (value) => {
+    // setTableResponseData([...tableResponseData, values])
+    setFieldValue(`responses[${indexRef.current}].headers[${value.name}]`, value)
+  }
+
   useEffect(() => {
     setTableRecords(generateTableData(tableData, true))
-    setTableResponseRecords(generateTableData(tableData, false))
   }, [tableData])
 
   useEffect(() => {
@@ -361,6 +666,42 @@ const MethodsAccordion = ({
     }
   }, [method, path])
 
+  useEffect(() => {
+    if (selectedStatusCode && method.responses) {
+      let responseIndex = method.responses.findIndex(
+        (_r) => _r.code.toString() == selectedStatusCode.value.toString()
+      )
+      if (responseIndex < 0) {
+        const clonedResponses = structuredClone(method.responses)
+
+        clonedResponses.push({
+          code: selectedStatusCode.value.toString(),
+          content: {
+            contentType: 'application/json',
+            schema: {},
+          },
+          headers: {},
+        })
+
+        setFieldValue('responses', clonedResponses)
+        responseIndex = 0
+      }
+      setCurrentResponseIndex(responseIndex)
+      indexRef.current = responseIndex
+      setTableResponseRecords(
+        generateResponseTableData(method.responses[responseIndex].headers, responseIndex)
+      )
+    }
+  }, [selectedStatusCode, method.responses])
+
+  useEffect(() => {
+    if (indexRef.current && indexRef.current > -1) {
+      setTableResponseRecords(
+        generateResponseTableData(method.responses[indexRef.current].headers, indexRef.current)
+      )
+    }
+  }, [method.responses, indexRef.current])
+
   useEffect(() => {
     // prepare tags selection list
     if (method?.tags.length || tags?.length) {
@@ -557,7 +898,7 @@ const MethodsAccordion = ({
                 headCells={paramsTableHeaders}
                 isFormOpen={isFormOpen && isFormOpen == 'Res'}
                 setIsFormOpen={setIsFormOpen}
-                saveNewRow={saveNewRow}
+                saveNewRow={saveNewResponseRow}
                 readOnly={readOnly}
                 isRequest={false}
               />
@@ -663,6 +1004,41 @@ const MethodsAccordion = ({
         open={openDeleteDialog}
         icon={<SVGLoader src={DeleteOutlinedIcon} width="4.0625rem" height="4.0625rem" />}
       />
+      <CommonDialog
+        status="error"
+        content={
+          <p
+            style={{
+              textAlign: 'center',
+              fontWeight: 400,
+              fontSize: '1rem',
+              lineHeight: '1.4375rem',
+            }}
+            className="delete-msg-container"
+          >
+            Are you sure you want to delete
+            <span className="plan-name">
+              {' '}
+              Header <strong>{selectedParamName}</strong>
+            </span>
+            ?
+          </p>
+        }
+        onSubmit={{
+          onClick: confirmDeleteHeader,
+          text: 'Delete',
+          color: 'error',
+          fullWidth: true,
+        }}
+        onCancel={{
+          text: 'Cancel',
+          color: 'normal',
+          fullWidth: true,
+        }}
+        onClose={() => setOpenHeaderDeleteDialog(false)}
+        open={openHeaderDeleteDialog}
+        icon={<SVGLoader src={DeleteOutlinedIcon} width="4.0625rem" height="4.0625rem" />}
+      />
     </div>
   )
 }

package/src/components/dialog/dialog.ts

@@ -54,4 +54,5 @@ export interface CommonDialogProps {
   isSubmitDisabled?: boolean
   submitBtnComponent?: JSX.Element | null
   withClose?: boolean
+  noActions?: boolean
 }

package/src/components/dialog/index.tsx

@@ -19,6 +19,7 @@ const CommonDialog = ({
       <SVGLoader src={InfoIcon} width="4.0625rem" height="4.0625rem" />
     </>
   ),
+  noActions = false,
 }: CommonDialogProps) => {
   const handleClose = () => {
     onClose() // Always close the dialog first
@@ -44,30 +45,32 @@ const CommonDialog = ({
       />
 
       {content}
-      <div
-        className="confirmation-dialog-footer"
-        style={{ marginBottom: onCancel || onSubmit ? '1.5rem' : '1rem' }}
-      >
-        {onCancel && (
-          <Button
-            {...onCancel}
-            onClick={handleClose}
-            variant={onCancel.variant || 'outlined'}
-            color={onCancel.color || 'normal'}
-          >
-            {onCancel.text}
-          </Button>
-        )}
-        {onSubmit && (
-          <Button
-            {...onSubmit}
-            variant={onSubmit.variant || 'contained'}
-            color={onSubmit.color || 'secondary'}
-          >
-            {onSubmit.text}
-          </Button>
-        )}
-      </div>
+      {!!noActions ? null : (
+        <div
+          className="confirmation-dialog-footer"
+          style={{ marginBottom: onCancel || onSubmit ? '1.5rem' : '1rem' }}
+        >
+          {onCancel && (
+            <Button
+              {...onCancel}
+              onClick={handleClose}
+              variant={onCancel.variant || 'outlined'}
+              color={onCancel.color || 'normal'}
+            >
+              {onCancel.text}
+            </Button>
+          )}
+          {onSubmit && (
+            <Button
+              {...onSubmit}
+              variant={onSubmit.variant || 'contained'}
+              color={onSubmit.color || 'secondary'}
+            >
+              {onSubmit.text}
+            </Button>
+          )}
+        </div>
+      )}
     </div>
   )
 

package/src/components/table/table.tsx

@@ -51,7 +51,11 @@ const ParamterTable = ({
           type: yup.string().optional(),
         }),
       }),
-      required: yup.boolean().optional(),
+      required: yup.boolean().when('in', {
+        is: 'path',
+        then: (schema) => schema.oneOf([true], 'Path parameters must be required.'),
+        otherwise: (schema) => schema.optional(),
+      }),
       description: yup.string().default('').trim().optional(),
     }),
     onSubmit: (values) => {

package/src/constants/methods.constant.ts

@@ -9,7 +9,7 @@ export const METHOD_OPTIONS: MethodOption[] = [
   { label: 'GET', value: 'GET', color: '#3b82f6' },
   { label: 'Delete', value: 'DELETE', color: '#ef4444' },
   { label: 'Put', value: 'PUT', color: '#f59e0b' },
-  { label: 'PATCH', value: 'PATCH', color: '#8b5cf6' },
+  { label: 'PATCH', value: 'PATCH', color: '#C0F4E8' },
   { label: 'OPTIONS', value: 'OPTIONS', color: '#6b7280' },
   { label: 'HEAD', value: 'HEAD', color: '#8b5cf6' },
   { label: 'TRACE', value: 'TRACE', color: '#ec4899' },

package/src/helpers/docs.helper.ts

@@ -1,12 +1,17 @@
+import { ApiSpecModel } from '@entities/index'
 import { HTTPMethod, OpenAPIFile } from '@entities/openApi'
 import { nanoid } from 'nanoid'
 import { OverviewData, TagData } from 'src/layout/docsLayout'
 
-export const transformOpenApiToDocs = (openApiJson: OpenAPIFile): OverviewData => {
+export const transformOpenApiToDocs = (api: ApiSpecModel): OverviewData => {
+  const parsedOpenApi: OpenAPIFile =
+    typeof api.metaData.openApiJson === 'string'
+      ? JSON.parse(api.metaData.openApiJson)
+      : api.metaData.openApiJson
   const groupedPathsByTags: Record<string, TagData[]> = { default: [] }
-  const validTags = new Set(openApiJson.tags.map(({ name }) => name))
+  const validTags = new Set(parsedOpenApi.tags.map(({ name }) => name))
 
-  for (const [path, methods] of Object.entries(openApiJson.paths)) {
+  for (const [path, methods] of Object.entries(parsedOpenApi.paths)) {
     for (const [method, methodData] of Object.entries(methods)) {
       const entry = { ...methodData, method: method as HTTPMethod, path }
       const resourceTags = methodData.tags ?? []
@@ -24,5 +29,13 @@ export const transformOpenApiToDocs = (openApiJson: OpenAPIFile): OverviewData =
     }
   }
 
-  return { ...openApiJson.info, id: nanoid(8), tags: groupedPathsByTags }
+  return {
+    ...parsedOpenApi.info,
+    apiSpecId: api.apiSpecId,
+    contextPath: api.contextPath,
+    associatedProduct: api.associatedProduct,
+    apiVersions: api.apiVersions,
+    tags: groupedPathsByTags,
+    servers: parsedOpenApi.servers,
+  }
 }