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

package/dist/types/helpers/docs.helper.d.ts

@@ -1,3 +1,3 @@
-import { OpenAPIFile } from '@entities/openApi';
+import { ApiSpecModel } from '@entities/index';
 import { OverviewData } from 'src/layout/docsLayout';
-export declare const transformOpenApiToDocs: (openApiJson: OpenAPIFile) => OverviewData;
+export declare const transformOpenApiToDocs: (api: ApiSpecModel) => OverviewData;

package/dist/types/layout/docsComponents/DocsContent/DocsContent.d.ts

@@ -1,6 +1,7 @@
 import './style.scss';
 import { EndpointData, OverviewData } from 'src/layout/docsLayout';
-declare const DocsContent: ({ data }: {
+declare const DocsContent: ({ data, activeType, setActiveItemData, setActiveType, setExpandedSections, }: {
     data: OverviewData | EndpointData;
+    activeType: "OVERVIEW" | "ENDPOINT";
 }) => import("react/jsx-runtime").JSX.Element;
 export default DocsContent;

package/dist/types/layout/docsComponents/DocsContent/TagPage/index.d.ts

@@ -1,4 +1,7 @@
 import './style.scss';
-export declare const TagPage: ({ data }: {
+export declare const TagPage: ({ data, setActiveItemData, setActiveType, setExpandedSections }: {
     data: any;
+    setActiveItemData: any;
+    setActiveType: any;
+    setExpandedSections: any;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/types/layout/docsComponents/DocsSideMenuTree/DocsSideMenuTree.d.ts

@@ -1,9 +1,15 @@
 import './style.scss';
-declare const DocsSideMenuTree: ({ apis, setActiveItemData, isFirstApiExpanded, setIsFirstApiExpanded, setActiveType, }: {
-    apis: any;
-    setActiveItemData: any;
-    isFirstApiExpanded: any;
-    setIsFirstApiExpanded: any;
-    setActiveType: any;
+import React from 'react';
+import { EndpointData, OverviewData } from 'src/layout/docsLayout';
+declare const DocsSideMenuTree: ({ apis, setActiveItemData, activeItemData, activeType, expandedSections, setExpandedSections, isFirstApiExpanded, setIsFirstApiExpanded, setActiveType, }: {
+    apis: OverviewData[];
+    setActiveItemData: React.Dispatch<React.SetStateAction<OverviewData | EndpointData>>;
+    activeItemData: OverviewData | EndpointData;
+    expandedSections: Record<string, boolean>;
+    setExpandedSections: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+    isFirstApiExpanded: boolean;
+    setIsFirstApiExpanded: React.Dispatch<React.SetStateAction<boolean>>;
+    setActiveType: React.Dispatch<React.SetStateAction<"OVERVIEW" | "ENDPOINT">>;
+    activeType: "OVERVIEW" | "ENDPOINT";
 }) => import("react/jsx-runtime").JSX.Element;
 export default DocsSideMenuTree;

package/dist/types/layout/docsLayout.d.ts

@@ -1,7 +1,8 @@
 import { JSX } from 'react';
 import { HTTPMethod, OpenAPIFile, Parameter, RequestBody, Responses } from '@entities/openApi';
+import { ApiSpecModel } from '@entities/index';
 interface ILayoutProps {
-    openApiJson?: OpenAPIFile[];
+    apis?: ApiSpecModel[];
 }
 export interface TagData {
     id: string;
@@ -22,12 +23,12 @@ export interface EndpointData extends TagData {
         version: string;
     };
 }
-export interface OverviewData {
-    id: string;
+export interface OverviewData extends Omit<ApiSpecModel, 'metaData'> {
     description: string;
     title: string;
     version: string;
     tags: Record<string, TagData[]>;
+    servers: OpenAPIFile['servers'];
 }
-declare const DocsLayout: ({ openApiJson }: ILayoutProps) => JSX.Element;
+declare const DocsLayout: ({ apis }: ILayoutProps) => JSX.Element;
 export default DocsLayout;

package/dist/types/layout/layout.d.ts

@@ -6,5 +6,5 @@ interface ILayoutProps {
     setIsFormDirty?: any;
     openApiErrors?: any;
 }
-declare const Layout: ({ openApiJson, handleSave, setIsFormDirty, openApiErrors }: ILayoutProps) => JSX.Element;
+declare const Layout: ({ openApiJson, handleSave, setIsFormDirty, openApiErrors, }: ILayoutProps) => JSX.Element;
 export default Layout;

package/dist/types/types/index.d.ts

@@ -0,0 +1,27 @@
+import { OpenAPIFile } from './openApi';
+export interface ApiSpecModel {
+    apiSpecId: string;
+    contextPath: string;
+    apiVersions: {
+        addVersionToContextPath: boolean;
+        apiSpecId: string;
+        name: string;
+        metaData: {
+            version: string;
+        };
+    }[];
+    associatedProduct: {
+        availableOnDevPortal: boolean;
+        name: string;
+        premium: boolean;
+        productId: number;
+    };
+    metaData: {
+        version: string;
+        apiVersionOf: string;
+        openApiJson: OpenAPIFile;
+        tags: string[];
+        createdDateTime: string;
+        lastUpdatedDateTime: string;
+    };
+}

package/dist/types/types/layout.type.d.ts

@@ -19,6 +19,7 @@ export type TransformedMethod = {
             contentType?: string;
             schema?: unknown;
         };
+        headers: any;
     }[];
 };
 export type TransformedPath = {

package/dist/types/types/openApi.d.ts

@@ -66,6 +66,7 @@ export interface RequestBody {
 export interface Responses {
     [statusCode: string]: {
         description: string;
+        headers?: any;
         content?: {
             [contentType: string]: {
                 schema: Schema;

package/dist/types/validator/form.scheme.d.ts

@@ -17,6 +17,7 @@ export declare const schemaValidation: yup.ObjectSchema<{
             type?: string;
             description?: string;
             tags?: string[];
+            requestBody?: {};
         }[];
     }[];
     components: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digi-frontend/dgate-api-documentation",
-  "version": "1.0.50",
+  "version": "1.0.52",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "types": "dist/types/index.d.ts",
@@ -29,7 +29,6 @@
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.2",
-    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-typescript": "^12.1.2",
     "@rollup/plugin-url": "^8.0.2",

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')
@@ -346,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)
@@ -353,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(() => {
@@ -369,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) {
@@ -565,7 +898,7 @@ const MethodsAccordion = ({
                 headCells={paramsTableHeaders}
                 isFormOpen={isFormOpen && isFormOpen == 'Res'}
                 setIsFormOpen={setIsFormOpen}
-                saveNewRow={saveNewRow}
+                saveNewRow={saveNewResponseRow}
                 readOnly={readOnly}
                 isRequest={false}
               />
@@ -671,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/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,
+  }
 }