@digi-frontend/dgate-api-documentation 1.0.50 → 1.0.53

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,16 +92,293 @@ 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) || ''} ${
+          data?.schema?.type?.toLowerCase() == 'array' &&
+          data?.schema?.items &&
+          data?.schema?.items?.type
+            ? ` _ ${capitalize(data?.schema?.items?.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)) {
+                          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')
-      : items.filter((item) => item.in && item.in.toLowerCase() == 'header')
-    return data.map((item, index) => {
+    return items?.map((item, index) => {
       return {
         id: index,
         paramName: item.name,
         paramType: capitalize(item.in),
-        schemaType: capitalize(item.schema?.type) || '',
+        schemaType: `${capitalize(item?.schema?.type) || ''} ${
+          item?.schema?.type?.toLowerCase() == 'array' &&
+          item?.schema?.items &&
+          item?.schema?.items?.type
+            ? ` _ ${capitalize(item?.schema?.items?.type)}`
+            : ''
+        }`,
         required: (
           <>
             {readOnly ? (
@@ -346,6 +627,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)
@@ -353,14 +647,24 @@ 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) => {
+    setFieldValue(`responses[${indexRef.current}].headers[${value.name}]`, value)
+  }
+
   useEffect(() => {
     setTableRecords(generateTableData(tableData, true))
-    setTableResponseRecords(generateTableData(tableData, false))
   }, [tableData])
 
   useEffect(() => {
@@ -369,6 +673,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) {
@@ -565,7 +905,7 @@ const MethodsAccordion = ({
                 headCells={paramsTableHeaders}
                 isFormOpen={isFormOpen && isFormOpen == 'Res'}
                 setIsFormOpen={setIsFormOpen}
-                saveNewRow={saveNewRow}
+                saveNewRow={saveNewResponseRow}
                 readOnly={readOnly}
                 isRequest={false}
               />
@@ -671,6 +1011,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/table/style.scss

@@ -15,6 +15,12 @@ div.endBtnIcon {
   width: 16.875rem !important;
 }
 
+.select-inputs {
+  display: flex;
+  flex-direction: row;
+  gap: .625rem;
+}
+
 .addEnumButton {
   color: #4d75d8 !important;
   display: flex;

package/src/components/table/table.tsx

@@ -186,7 +186,10 @@ const ParamterTable = ({
                 </td>
 
                 <td key={'parameter schema type'}>
-                  <div data-id="TEXT_DESCRIPTION" className="tableData">
+                  <div
+                    data-id="TEXT_DESCRIPTION"
+                    className="tableData select-inputs"
+                  >
                     <SelectGroupV2
                       disabled={readOnly}
                       clearable={false}
@@ -211,41 +214,36 @@ const ParamterTable = ({
                       isMultiple={false}
                       withSearch={false}
                     />{' '}
-                  </div>
-                </td>
-
-                <td key={'parameter array schema type'}>
-                  <div data-id="TEXT_DESCRIPTION" className="tableData">
-                    {values.schema && values.schema?.type?.toLowerCase() == 'array' ? (
-                      <SelectGroupV2
-                        disabled={readOnly}
-                        clearable={false}
-                        value={{
-                          label: capitalize(values?.schema?.items?.type),
-                          value: values.schema?.items?.type,
-                        }}
-                        errorMsg={!!errors?.schema?.items?.type && errors?.schema?.items?.type}
-                        onChange={(item) =>
-                          setFieldValue('schema.items.type', item?.value?.toLowerCase())
-                        } // Updates state on selection
-                        options={[
-                          {
-                            list: [
-                              { label: 'String', value: 'string' },
-                              { label: 'Integer', value: 'integer' },
-                              { label: 'Boolean', value: 'boolean' },
-                              { label: 'Object', value: 'object' },
-                              { label: 'Array', value: 'array' },
-                              { label: 'Number', value: 'number' },
-                            ],
-                          },
-                        ]}
-                        isMultiple={false}
-                        withSearch={false}
-                      />
+                    {!!values?.schema?.type && values?.schema?.type.toLowerCase() === 'array' ? (
+                        <SelectGroupV2
+                          disabled={readOnly}
+                          clearable={false}
+                          value={{
+                            label: capitalize(values?.schema?.items?.type),
+                            value: values.schema?.items?.type,
+                          }}
+                          errorMsg={!!errors?.schema?.items?.type && errors?.schema?.items?.type}
+                          onChange={(item) =>
+                            setFieldValue('schema.items.type', item?.value?.toLowerCase())
+                          } // Updates state on selection
+                          options={[
+                            {
+                              list: [
+                                { label: 'String', value: 'string' },
+                                { label: 'Integer', value: 'integer' },
+                                { label: 'Boolean', value: 'boolean' },
+                                { label: 'Object', value: 'object' },
+                                { label: 'Array', value: 'array' },
+                                { label: 'Number', value: 'number' },
+                              ],
+                            },
+                          ]}
+                          isMultiple={false}
+                          withSearch={false}
+                        />
                     ) : (
-                      '-'
-                    )}{' '}
+                      ''
+                    )}
                   </div>
                 </td>
 

package/src/constants/index.ts

@@ -70,7 +70,7 @@ export const paramsTableHeaders = [
   },
   { id: 'paramType', label: 'In', sortable: false, classes: 'requiredParam' },
   { id: 'schemaType', label: 'Schema-Type', sortable: false, classes: 'requiredParam' },
-  { id: 'arraySchemaType', label: 'Array Schema Type', sortable: false },
+  // { id: 'arraySchemaType', label: 'Array Schema Type', sortable: false },
   { id: 'enum', label: 'Enum', sortable: false },
   { id: 'required', label: 'Required', sortable: false, classes: 'requiredParam' },
   { id: 'description', label: 'Description', sortable: false },

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,
+  }
 }

package/src/helpers/layout.helper.ts

@@ -61,8 +61,10 @@ export const transformPathsToArray = (paths: OpenAPIFile['paths']): TransformedP
         summary: methodProps.summary || '',
         responses: Object.entries(methodProps.responses).map(([code, codeProps]) => {
           const contentType = Object.keys(codeProps.content || {})[0]
+          const headers = !codeProps?.headers ? {} : codeProps.headers
           return {
             code,
+            headers,
             content: {
               contentType,
               schema: {
@@ -78,6 +80,8 @@ export const transformPathsToArray = (paths: OpenAPIFile['paths']): TransformedP
         obj.parameters = []
       }
 
+      // load response headers parameters
+
       if (method.toLowerCase() != 'get') {
         const contentType = Object.keys(methodProps?.requestBody?.content || {})[0]
         const reqSchema = methodProps?.requestBody?.content?.schema
@@ -103,7 +107,6 @@ export const transformPathsToArray = (paths: OpenAPIFile['paths']): TransformedP
 
         obj['requestBody'] = requestBodyData
       }
-
       return obj
     }),
   }))
@@ -112,14 +115,11 @@ export const transformPathsToArray = (paths: OpenAPIFile['paths']): TransformedP
 }
 
 const validateBodyForResponse = (content, method) => {
+  if (!(content?.schema as any) || !(content?.schema as any)?.properties) {
+    return {}
+  }
   let _content = JSON.parse((content?.schema as any)?.properties as string)
-  // if (method == 'get') {
-  //   if (!_content?.body) {
-  //     _content = {
-  //       body: _content,
-  //     }
-  //   }
-  // }
+
   return _content
 }
 
@@ -132,7 +132,17 @@ export const transformPathsArrayToOrigin = (paths: TransformedPathsArray): OpenA
           ...rest,
           tags,
           summary,
-          responses: responses.reduce((respAcc, { code, content }) => {
+          responses: responses.reduce((respAcc, { code, content, headers }) => {
+            const formattedHeaders: Record<string, any> = {}
+            if (headers) {
+              for (const [key, value] of Object.entries(headers)) {
+                formattedHeaders[key] = {
+                  description: value.description || '',
+                  required: value.required || false,
+                  schema: value.schema || {},
+                }
+              }
+            }
             respAcc[code] = {
               description: 'Success', // Assuming this is static from the original data
               content: content.contentType
@@ -145,6 +155,7 @@ export const transformPathsArrayToOrigin = (paths: TransformedPathsArray): OpenA
                     },
                   }
                 : {},
+              headers: formattedHeaders,
             }
             return respAcc
           }, {} as Record<string, any>),