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

package/src/components/MethodAccordion/MethodAccordion.tsx

@@ -1,514 +1,670 @@
-import { useEffect, useState } from 'react'
-import { Accordion, Button, SelectGroup, SelectGroupV2, Switch, TextArea } from 'digitinary-ui'
-import SVGLoader from '../../components/SVGLoader/SVGLoader'
-import { DeleteIcon, DownArrowIcon, EditIcon, deleteOutlinedIcon } from '../../assets/icons'
-import { httpStatusCodes, methodColorMapping, paramsTableHeaders } from '../../constants/index'
-import Tooltip from '../../components/Tooltip/Tooltip'
-import { TransformedMethod } from '../../types/layout.type'
-import SimpleLabelValue from '../../components/SimpleLabelValue'
-import { capitalize, handleStatusColor } from '../../helpers/methodAccordion.helper'
-import ParamterTable from '../table/table'
-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: (
-    <div className={styles.statusCodeOptionContainer}>
-      <div
-        className={styles.statusCodeOptionCircle}
-        style={{ backgroundColor: handleStatusColor(code) }}
-      ></div>
-      <span>{code}</span>
-    </div>
-  ),
-  value: code,
-}))
-
-const MethodsAccordion = ({
-  method,
-  path,
-  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,
-    response: false,
-    method: false,
-  })
-  const [isFormOpen, setIsFormOpen] = useState(false)
-  const [tooltipRefs, setTooltipRefs] = useState<{ [key: number]: any }>({})
-  const [tableData, setTableData] = useState([])
-  const [openDeleteDialog, setOpenDeleteDialog] = useState(false)
-  const [selectedParamIndex, setSelectedParamIndex] = useState<number | null>(null)
-  const [selectedParamName, setSelectedParamName] = useState<string | null>(null)
-  const [tableRecords, setTableRecords] = useState()
-  const [selectionTags, setSelectionTags] = useState([])
-  const [selectedStatusCode, setSelectedStatusCode] = useState(httpStatusCodeOptions[4])
-  const currentResponse =
-    method.responses.find((res) => Number(res.code) === selectedStatusCode.value) || '{}'
-
-  const onTableChange = (key, value, index) => {
-    const newTableData = tableData.map((item, tIndex) => {
-      if (tIndex === index) {
-        return { ...item, [key]: value }
-      } else {
-        return item
-      }
-    })
-
-    setTableData(newTableData)
-  }
-
-  const generateTableData = (items) => {
-    return items.map((item, index) => {
-      return {
-        id: index,
-        paramName: item.name,
-        paramType: capitalize(item.in),
-        schemaType: capitalize(item.schema?.type) || '',
-        required: (
-          <>
-            {readOnly ? (
-              item.required ? (
-                'True'
-              ) : (
-                'False'
-              )
-            ) : (
-              <Switch
-                checked={item.required}
-                onClick={() => {
-                  if (readOnly) {
-                    return null
-                  }
-                  onTableChange('required', !item.required, index)
-                  setFieldValue(`parameters[${index}][required]`, !item.required)
-                }}
-              />
-            )}
-          </>
-        ),
-        description: (
-          <div className={styles.paramDescContainer}>
-            <Tooltip
-              key={`${index}-description`}
-              allowHTML
-              disabled={method.parameters[index].description?.length <= 12}
-              content={
-                <div style={{ padding: '0.625rem' }}>{method.parameters[index].description}</div>
-              }
-              arrowWithBorder
-              placement="bottom-end"
-              type="function"
-              delay={[0, 0]}
-              onShow={() => tooltipRefs[index]?.hide()}
-            >
-              <p style={{ alignSelf: 'center' }}>
-                {method.parameters[index].description
-                  ? method.parameters[index].description.substring(0, 12)
-                  : readOnly && '-'}
-                {method.parameters[index].description &&
-                method.parameters[index].description.length > 12
-                  ? '...'
-                  : ''}
-              </p>
-            </Tooltip>
-            {!readOnly && (
-              <Tooltip
-                key={`${index}-add-edit-description`}
-                allowHTML
-                arrowWithBorder
-                placement="bottom-end"
-                type="function"
-                trigger="click"
-                delay={[0, 0]}
-                onCreate={(instance) =>
-                  setTooltipRefs((prev) => ({
-                    ...prev,
-                    [index]: instance,
-                  }))
-                }
-                content={
-                  <div className={styles.editDescTooltipContent}>
-                    <p className={styles.editDescTooltipContent_header}>Description</p>
-                    <TextArea
-                      placeholder="Describe parameter..."
-                      value={item.description}
-                      disabled={readOnly}
-                      maxLength={120}
-                      onChange={(value) => {
-                        if (value === '' || regex.ASCII.test(value))
-                          onTableChange('description', value, index)
-                      }}
-                    />
-                    {!readOnly && (
-                      <Button
-                        className={styles.editDescTooltipContent_btn}
-                        variant="outlined"
-                        size="small"
-                        onClick={() => {
-                          setFieldValue(
-                            `parameters[${index}].description`,
-                            item.description?.trim()
-                          )
-                          tooltipRefs[index]?.hide()
-                        }}
-                        disabled={!item.description?.trim()}
-                      >
-                        Apply
-                      </Button>
-                    )}
-                  </div>
-                }
-              >
-                {readOnly || method.parameters[index].description?.length > 0 ? (
-                  <Button
-                    className={styles.editDescBtn}
-                    variant="link"
-                    color="action"
-                    endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
-                  ></Button>
-                ) : (
-                  <Button
-                    className={styles.editDescBtn}
-                    variant="link"
-                    color="action"
-                    endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
-                  >
-                    {readOnly ? 'View ' : 'Add '} Description
-                  </Button>
-                )}
-              </Tooltip>
-            )}
-
-            {!readOnly && <div className={styles.paramDescContainer_separator}></div>}
-
-            {!readOnly && (
-              <Button
-                className={styles.deleteParamBtn}
-                variant="link"
-                color="error"
-                endIcon={<SVGLoader src={DeleteIcon} width="1.125rem" height="1.125rem" />}
-                onClick={() => handleDeleteClick(index, item.name)}
-              ></Button>
-            )}
-          </div>
-        ),
-      }
-    })
-  }
-
-  const confirmDeleteParameter = () => {
-    if (selectedParamIndex !== null) {
-      setTableData((prev) => prev.filter((_, i) => i !== selectedParamIndex))
-      setFieldValue(
-        `parameters`,
-        method?.parameters?.filter((_, i) => i !== selectedParamIndex)
-      )
-    }
-    setOpenDeleteDialog(false)
-    setSelectedParamIndex(null)
-  }
-
-  const handleDeleteClick = (id: number, name: string) => {
-    setSelectedParamIndex(id)
-    setSelectedParamName(name)
-
-    setOpenDeleteDialog(true)
-  }
-
-  const saveNewRow = (values) => {
-    setTableData([...tableData, values])
-    setFieldValue(`parameters`, [...method.parameters, values])
-  }
-
-  useEffect(() => {
-    setTableRecords(generateTableData(tableData))
-  }, [tableData])
-
-  useEffect(() => {
-    if (method?.parameters) {
-      setTableData(method.parameters)
-    }
-  }, [method, path])
-
-  useEffect(() => {
-    // prepare tags selection list
-    if (method?.tags.length || tags?.length) {
-      const convertedStringArray = (method?.tags || [])?.map((item) => ({
-        label: capitalize(item),
-        value: item,
-      }))
-      const mergedArray = [
-        ...convertedStringArray,
-        ...(tags || []).map((item) => ({ label: capitalize(item.name), value: item.name })),
-      ]
-
-      const filteredArray = mergedArray.filter(
-        (value, index, self) => index === self.findIndex((t) => t.value === value.value)
-      )
-
-      setSelectionTags(filteredArray)
-    }
-  }, [tags, method])
-
-  return (
-    <div>
-      <Accordion
-        expanded={isOpen}
-        onChange={() => setIsOpen(!isOpen)}
-        className={`${styles.methodAccordion} ${readOnly ? styles.readOnly : ''}`}
-        summary={
-          <div className={styles.methodSummaryContainer}>
-            <div className={styles.methodSummary}>
-              <span
-                style={{
-                  backgroundColor: methodColorMapping?.[method?.type]?.color || '#3A6CD1',
-                }}
-                className={styles.methodLabel}
-              >
-                {methodColorMapping?.[method?.type]?.label || method?.type}
-              </span>
-              <span className={styles.methodPath}>{path}</span>
-            </div>
-            <div
-              className={`${styles.methodExpandArrowContainer} ${isOpen ? styles.expanded : ''}`}
-            >
-              <SVGLoader src={DownArrowIcon} width="2rem" height="2rem" />
-            </div>
-          </div>
-        }
-        children={
-          <div className={styles.methodAccordionContent}>
-            <SelectGroup
-              className={styles.methodDesc}
-              disabled={readOnly}
-              placeholder="Select Tags"
-              label="Tags"
-              value={method.tags?.map((t) => ({
-                label: capitalize(t),
-                value: t,
-              }))}
-              onChange={(item) => {
-                setFieldValue(
-                  'tags',
-                  item.map((i) => i.value)
-                )
-              }}
-              options={[
-                {
-                  list: selectionTags,
-                },
-              ]}
-              isMultiple={true}
-              withSearch={false}
-              clearable={false}
-            />
-            {!readOnly ? (
-              <TextArea
-                className={styles.methodDesc}
-                label="Description"
-                placeholder="Describe the method's purpose and functionality..."
-                maxLength={120}
-                value={method?.description}
-                onChange={(value) => {
-                  if (value === '' || regex.ASCII.test(value)) setFieldValue('description', value)
-                }}
-              />
-            ) : (
-              <SimpleLabelValue
-                key={'description'}
-                label={'Description: '}
-                value={method?.description || '-'}
-              />
-            )}
-            <div className={styles.paramsTable}>
-              <ParamterTable
-                id="paramter-table"
-                data={tableRecords}
-                headCells={paramsTableHeaders}
-                isFormOpen={isFormOpen}
-                setIsFormOpen={setIsFormOpen}
-                saveNewRow={saveNewRow}
-                readOnly={readOnly}
-              />
-            </div>
-            {method?.type !== 'get' && (
-              <Accordion
-                expanded={isExpanded.request}
-                onChange={() => null}
-                className={styles.requestAccordion}
-                summary={
-                  <span className={styles.requestAccordionSummary}>
-                    <div
-                      className={styles.requestAccordionSummary_title}
-                      onClick={() =>
-                        setIsExpanded((prev) => ({
-                          ...prev,
-                          request: !prev.request,
-                        }))
-                      }
-                    >
-                      <SVGLoader
-                        className={isExpanded.request ? styles.expanded : ''}
-                        src={DownArrowIcon}
-                        width="2rem"
-                        height="2rem"
-                      />
-                      Request
-                      {method?.type !== 'delete' && <span style={{ color: 'red' }}>*</span>}
-                    </div>
-                  </span>
-                }
-                children={
-                  <JsonInput
-                    acceptType="JSON"
-                    withFooter={!readOnly}
-                    className={'jsonField'}
-                    placeholder="Enter your request body as a JSON object...."
-                    fieldIsDisabled={readOnly}
-                    value={method?.requestBody?.content?.schema?.properties || '{}'}
-                    onChange={(value: string) => {
-                      setFieldValue('requestBody.content.schema.properties', value)
-                    }}
-                    onValidation={() => null}
-                  />
-                }
-              />
-            )}
-            <Accordion
-              expanded={isExpanded.response}
-              onChange={() => null}
-              className={styles.responseAccordion}
-              summary={
-                <span className={styles.responseAccordionSummary}>
-                  <div
-                    className={styles.responseAccordionSummary_title}
-                    onClick={() =>
-                      setIsExpanded((prev) => ({
-                        ...prev,
-                        response: !prev.response,
-                      }))
-                    }
-                  >
-                    <SVGLoader
-                      className={isExpanded.response ? styles.expanded : ''}
-                      src={DownArrowIcon}
-                      width="2rem"
-                      height="2rem"
-                    />
-                    Response<span style={{ color: 'red' }}>*</span>
-                  </div>
-
-                  <SelectGroup
-                    withSearch={false}
-                    isMultiple={false}
-                    clearable={false}
-                    placeholder="200"
-                    options={[
-                      {
-                        list: httpStatusCodeOptions,
-                      },
-                    ]}
-                    value={selectedStatusCode}
-                    onChange={(value) => {
-                      setSelectedStatusCode(value)
-                    }}
-                  />
-                </span>
-              }
-              children={
-                <JsonInput
-                  acceptType="JSON"
-                  withFooter={!readOnly}
-                  className={'jsonField'}
-                  placeholder="Enter your response as a JSON object..."
-                  fieldIsDisabled={readOnly}
-                  value={currentResponse?.content?.schema?.properties || '{}'}
-                  onChange={(value) => {
-                    const currentResIndex = method.responses.findIndex(
-                      (res) => res.code === currentResponse.code
-                    )
-                    if (currentResIndex !== -1) {
-                      setFieldValue(
-                        `responses[${currentResIndex}].content.schema.properties`,
-                        value
-                      )
-                    } else {
-                      const clonedResponses = structuredClone(method.responses)
-
-                      clonedResponses.push({
-                        code: selectedStatusCode.value.toString(),
-                        content: {
-                          contentType: 'application/json',
-                          schema: {
-                            type: 'object',
-                            properties: value,
-                          },
-                        },
-                      })
-
-                      setFieldValue('responses', clonedResponses)
-                    }
-                  }}
-                  onValidation={(valid) => null}
-                />
-              }
-            />
-          </div>
-        }
-      />
-      <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">
-              {' '}
-              Parameter <strong>{selectedParamName}</strong>
-            </span>
-            ?
-          </p>
-        }
-        onSubmit={{
-          onClick: confirmDeleteParameter,
-          text: 'Delete',
-          color: 'error',
-          fullWidth: true,
-        }}
-        onCancel={{
-          text: 'Cancel',
-          color: 'normal',
-          fullWidth: true,
-        }}
-        onClose={() => setOpenDeleteDialog(false)}
-        open={openDeleteDialog}
-        icon={<SVGLoader src={deleteOutlinedIcon} width="4.0625rem" height="4.0625rem" />}
-      />
-    </div>
-  )
-}
-
-export default MethodsAccordion
+import { useEffect, useRef, useState } from 'react'
+import {
+  Accordion,
+  Button,
+  Input,
+  SelectGroup,
+  SelectGroupV2,
+  Switch,
+  TextArea,
+} from 'digitinary-ui'
+import SVGLoader from '../../components/SVGLoader/SVGLoader'
+import { DeleteIcon, DownArrowIcon, EditIcon, DeleteOutlinedIcon } from '../../assets/icons'
+import PlusIcon from '../../assets/icons/Plus.svg'
+import PlusSquare from '../../assets/icons/PlusSquare.svg'
+import { httpStatusCodes, methodColorMapping, paramsTableHeaders } from '../../constants/index'
+import Tooltip from '../../components/Tooltip/Tooltip'
+import { TransformedMethod } from '../../types/layout.type'
+import SimpleLabelValue from '../../components/SimpleLabelValue'
+import { capitalize, handleStatusColor } from '../../helpers/methodAccordion.helper'
+import ParamterTable from '../table/table'
+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: (
+    <div className={styles.statusCodeOptionContainer}>
+      <div
+        className={styles.statusCodeOptionCircle}
+        style={{ backgroundColor: handleStatusColor(code) }}
+      ></div>
+      <span>{code}</span>
+    </div>
+  ),
+  value: code,
+}))
+
+const MethodsAccordion = ({
+  method,
+  path,
+  setFieldValue,
+  readOnly,
+  tags,
+  isOpen,
+  setIsOpen,
+  errors,
+}: {
+  method: TransformedMethod
+  path: string
+  setFieldValue?: (key: string, value: string | string[]) => void
+  readOnly?: boolean
+  tags: Tags[]
+  isOpen: boolean
+  setIsOpen: (open: boolean) => void
+  errors?: string
+}) => {
+  const [isExpanded, setIsExpanded] = useState({
+    request: false,
+    response: false,
+    method: false,
+  })
+  const [isFormOpen, setIsFormOpen] = useState<'Req' | 'Res'>(undefined)
+  const [tooltipRefs, setTooltipRefs] = useState<{ [key: number]: any }>({})
+  const [tableData, setTableData] = useState([])
+  const [openDeleteDialog, setOpenDeleteDialog] = useState(false)
+  const [selectedParamIndex, setSelectedParamIndex] = useState<number | null>(null)
+  const [selectedParamName, setSelectedParamName] = useState<string | null>(null)
+  const [tableRecords, setTableRecords] = 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 currentResponse =
+    method.responses.find((res) => Number(res.code) === selectedStatusCode.value) || '{}'
+
+  const onTableChange = (key, value, index) => {
+    const newTableData = tableData.map((item, tIndex) => {
+      if (tIndex === index) {
+        return { ...item, [key]: value }
+      } else {
+        return item
+      }
+    })
+
+    setTableData(newTableData)
+  }
+
+  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 {
+        id: index,
+        paramName: item.name,
+        paramType: capitalize(item.in),
+        schemaType: capitalize(item.schema?.type) || '',
+        required: (
+          <>
+            {readOnly ? (
+              item.required ? (
+                'True'
+              ) : (
+                'False'
+              )
+            ) : (
+              <Switch
+                checked={item.required}
+                onClick={() => {
+                  if (readOnly) {
+                    return null
+                  }
+                  onTableChange('required', !item.required, index)
+                  setFieldValue(`parameters[${index}][required]`, !item.required)
+                }}
+              />
+            )}
+          </>
+        ),
+        description: (
+          <div className={styles.paramDescContainer}>
+            <Tooltip
+              key={`${index}-description`}
+              allowHTML
+              disabled={method.parameters[index].description?.length <= 12}
+              content={
+                <div style={{ padding: '0.625rem' }}>{method.parameters[index].description}</div>
+              }
+              arrowWithBorder
+              placement="bottom-end"
+              type="function"
+              delay={[0, 0]}
+              onShow={() => tooltipRefs[index]?.hide()}
+            >
+              <p style={{ alignSelf: 'center' }}>
+                {method.parameters[index].description
+                  ? method.parameters[index].description.substring(0, 12)
+                  : readOnly && '-'}
+                {method.parameters[index].description &&
+                method.parameters[index].description.length > 12
+                  ? '...'
+                  : ''}
+              </p>
+            </Tooltip>
+            {!readOnly && (
+              <Tooltip
+                key={`${index}-add-edit-description`}
+                allowHTML
+                arrowWithBorder
+                placement="bottom-end"
+                type="function"
+                trigger="click"
+                delay={[0, 0]}
+                onCreate={(instance) =>
+                  setTooltipRefs((prev) => ({
+                    ...prev,
+                    [index]: instance,
+                  }))
+                }
+                content={
+                  <div className={styles.editDescTooltipContent}>
+                    <p className={styles.editDescTooltipContent_header}>Description</p>
+                    <TextArea
+                      placeholder="Describe parameter..."
+                      value={item.description}
+                      disabled={readOnly}
+                      maxLength={120}
+                      onChange={(value) => {
+                        if (value === '' || regex.ASCII.test(value))
+                          onTableChange('description', value, index)
+                      }}
+                    />
+                    {!readOnly && (
+                      <Button
+                        className={styles.editDescTooltipContent_btn}
+                        variant="outlined"
+                        size="small"
+                        onClick={() => {
+                          setFieldValue(
+                            `parameters[${index}].description`,
+                            item.description?.trim()
+                          )
+                          tooltipRefs[index]?.hide()
+                        }}
+                        disabled={!item.description?.trim()}
+                      >
+                        Apply
+                      </Button>
+                    )}
+                  </div>
+                }
+              >
+                {readOnly || method.parameters[index].description?.length > 0 ? (
+                  <Button
+                    className={styles.editDescBtn}
+                    variant="link"
+                    color="action"
+                    endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
+                  ></Button>
+                ) : (
+                  <Button
+                    className={styles.editDescBtn}
+                    variant="link"
+                    color="action"
+                    endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
+                  >
+                    {readOnly ? 'View ' : 'Add '} Description
+                  </Button>
+                )}
+              </Tooltip>
+            )}
+
+            {!readOnly && <div className={styles.paramDescContainer_separator}></div>}
+
+            {!readOnly && (
+              <Button
+                className={styles.deleteParamBtn}
+                variant="link"
+                color="error"
+                endIcon={<SVGLoader src={DeleteIcon} width="1.125rem" height="1.125rem" />}
+                onClick={() => handleDeleteClick(index, item.name)}
+              ></Button>
+            )}
+          </div>
+        ),
+        enum: (
+          <>
+            {readOnly ? (
+              item?.schema?.enum?.join(' / ')
+            ) : (
+              <div data-id="TEXT_DESCRIPTION" className="tableData">
+                {method.parameters[index]?.schema &&
+                method.parameters[index]?.schema?.type?.toLowerCase() != 'array' &&
+                method.parameters[index]?.schema?.type?.toLowerCase() != 'object' ? (
+                  <Tooltip
+                    disabled={
+                      method.parameters[index]?.schema?.type?.toLowerCase() == 'array' ||
+                      method.parameters[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.parameters[index]?.schema?.enum &&
+                          !!method.parameters[index]?.schema?.enum.length &&
+                          method.parameters[index]?.schema?.enum?.map((item, _index) => (
+                            <Input
+                              key={index}
+                              className={'methodDescForEnum'}
+                              required
+                              clearable={false}
+                              placeholder="Enter Enum value..."
+                              value={item}
+                              onChange={(value) => {
+                                setFieldValue(`parameters[${index}].schema.enum[${_index}]`, value)
+                              }}
+                            />
+                          ))}
+                        <p
+                          className={'addEnumButton'}
+                          onClick={() => {
+                            setFieldValue(`parameters[${index}].schema.enum`, [
+                              ...method.parameters[index]?.schema?.enum,
+                              '',
+                            ])
+                          }}
+                        >
+                          <SVGLoader src={PlusSquare} />
+                          Add New Enum
+                        </p>
+                        {!readOnly && (
+                          <Button
+                            className={styles.editDescTooltipContent_btn}
+                            variant="outlined"
+                            size="small"
+                            type="button"
+                            onClick={() => {
+                              setFieldValue(`parameters[${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>
+                    }
+                  >
+                    <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 confirmDeleteParameter = () => {
+    if (selectedParamIndex !== null) {
+      setTableData((prev) => prev.filter((_, i) => i !== selectedParamIndex))
+      setFieldValue(
+        `parameters`,
+        method?.parameters?.filter((_, i) => i !== selectedParamIndex)
+      )
+    }
+    setOpenDeleteDialog(false)
+    setSelectedParamIndex(null)
+  }
+
+  const handleDeleteClick = (id: number, name: string) => {
+    setSelectedParamIndex(id)
+    setSelectedParamName(name)
+
+    setOpenDeleteDialog(true)
+  }
+
+  const saveNewRow = (values) => {
+    setTableData([...tableData, values])
+    setFieldValue(`parameters`, [...method.parameters, values])
+  }
+
+  useEffect(() => {
+    setTableRecords(generateTableData(tableData, true))
+    setTableResponseRecords(generateTableData(tableData, false))
+  }, [tableData])
+
+  useEffect(() => {
+    if (method?.parameters) {
+      setTableData(method.parameters)
+    }
+  }, [method, path])
+
+  useEffect(() => {
+    // prepare tags selection list
+    if (method?.tags.length || tags?.length) {
+      const convertedStringArray = (method?.tags || [])?.map((item) => ({
+        label: capitalize(item),
+        value: item,
+      }))
+      const mergedArray = [
+        ...convertedStringArray,
+        ...(tags || []).map((item) => ({ label: capitalize(item.name), value: item.name })),
+      ]
+
+      const filteredArray = mergedArray.filter(
+        (value, index, self) => index === self.findIndex((t) => t.value === value.value)
+      )
+
+      setSelectionTags(filteredArray)
+    }
+  }, [tags, method])
+
+  return (
+    <div>
+      <Accordion
+        expanded={isOpen}
+        onChange={() => setIsOpen(!isOpen)}
+        className={`${styles.methodAccordion} ${readOnly ? styles.readOnly : ''}`}
+        summary={
+          <div className={styles.methodSummaryContainer}>
+            <div className={styles.methodSummary}>
+              <span
+                style={{
+                  backgroundColor: methodColorMapping?.[method?.type]?.color || '#3A6CD1',
+                }}
+                className={styles.methodLabel}
+              >
+                {methodColorMapping?.[method?.type]?.label || method?.type}
+              </span>
+              <span className={styles.methodPath}>{path}</span>
+            </div>
+            <div
+              className={`${styles.methodExpandArrowContainer} ${isOpen ? styles.expanded : ''}`}
+            >
+              <SVGLoader src={DownArrowIcon} width="2rem" height="2rem" />
+            </div>
+          </div>
+        }
+        children={
+          <div className={styles.methodAccordionContent}>
+            {!readOnly ? (
+              <Input
+                className={styles.methodDesc}
+                label="Endpoint Name"
+                required
+                placeholder="Endpoint name..."
+                value={method?.summary}
+                onChange={(value) => {
+                  value = value || ''
+                  if (value === '' || regex.ASCII.test(value)) {
+                    setFieldValue('summary', value)
+                  }
+                }}
+                onClear={() => {
+                  setFieldValue('summary', '')
+                }}
+                errorMsg={errors?.summary}
+              />
+            ) : (
+              <SimpleLabelValue
+                key={'summary'}
+                label={'Endpoint Name: '}
+                value={method?.summary || '-'}
+              />
+            )}
+            <SelectGroup
+              className={styles.methodDesc}
+              disabled={readOnly}
+              placeholder="Select Tags"
+              label="Tags"
+              value={method.tags?.map((t) => ({
+                label: capitalize(t),
+                value: t,
+              }))}
+              onChange={(item) => {
+                setFieldValue(
+                  'tags',
+                  item.map((i) => i.value)
+                )
+              }}
+              options={[
+                {
+                  list: selectionTags,
+                },
+              ]}
+              isMultiple={true}
+              withSearch={false}
+              clearable={false}
+            />
+            {!readOnly ? (
+              <TextArea
+                className={styles.methodDesc}
+                label="Description"
+                placeholder="Describe the method's purpose and functionality..."
+                maxLength={120}
+                value={method?.description}
+                onChange={(value) => {
+                  if (value === '' || regex.ASCII.test(value)) setFieldValue('description', value)
+                }}
+              />
+            ) : (
+              <SimpleLabelValue
+                key={'description'}
+                label={'Description: '}
+                value={method?.description || '-'}
+              />
+            )}
+            <div className={styles.paramsTable}>
+              <h4 className={styles.paramsTableBodyHead}>Request Details</h4>
+              <ParamterTable
+                id="paramter-request-table"
+                data={tableRecords}
+                headCells={paramsTableHeaders}
+                isFormOpen={isFormOpen && isFormOpen == 'Req'}
+                setIsFormOpen={setIsFormOpen}
+                saveNewRow={saveNewRow}
+                readOnly={readOnly}
+                isRequest={true}
+              />
+              {method?.type !== 'get' && method?.type !== 'delete' && (
+                <Accordion
+                  expanded={isExpanded.request}
+                  onChange={() => null}
+                  className={styles.requestAccordion}
+                  summary={
+                    <span className={styles.requestAccordionSummary}>
+                      <div
+                        className={styles.requestAccordionSummary_title}
+                        onClick={() =>
+                          setIsExpanded((prev) => ({
+                            ...prev,
+                            request: !prev.request,
+                          }))
+                        }
+                      >
+                        <SVGLoader
+                          className={isExpanded.request ? styles.expanded : ''}
+                          src={DownArrowIcon}
+                          width="2rem"
+                          height="2rem"
+                        />
+                        Request
+                        {method?.type !== 'delete' && <span style={{ color: 'red' }}>*</span>}
+                      </div>
+                    </span>
+                  }
+                  children={
+                    <JsonInput
+                      acceptType="JSON"
+                      withFooter={!readOnly}
+                      className={'jsonField'}
+                      placeholder="Enter your request body as a JSON object...."
+                      fieldIsDisabled={readOnly}
+                      value={method?.requestBody?.content?.schema?.properties || '{}'}
+                      onChange={(value: string) => {
+                        setFieldValue('requestBody.content.schema.properties', value)
+                      }}
+                      onValidation={() => null}
+                    />
+                  }
+                />
+              )}
+            </div>
+            <div className={styles.paramsTable}>
+              <div className={styles.responseHeader}>
+                <h4 className={styles.paramsTableBodyHead}>Response Details</h4>
+                <SelectGroup
+                  withSearch={false}
+                  isMultiple={false}
+                  clearable={false}
+                  placeholder="200"
+                  options={[
+                    {
+                      list: httpStatusCodeOptions,
+                    },
+                  ]}
+                  value={selectedStatusCode}
+                  onChange={(value) => {
+                    setSelectedStatusCode(value)
+                  }}
+                />
+              </div>
+              <ParamterTable
+                id="paramter-response-table"
+                data={tableResponseRecords}
+                headCells={paramsTableHeaders}
+                isFormOpen={isFormOpen && isFormOpen == 'Res'}
+                setIsFormOpen={setIsFormOpen}
+                saveNewRow={saveNewRow}
+                readOnly={readOnly}
+                isRequest={false}
+              />
+              <Accordion
+                expanded={isExpanded.response}
+                onChange={() => null}
+                className={styles.responseAccordion}
+                summary={
+                  <span className={styles.responseAccordionSummary}>
+                    <div
+                      className={styles.responseAccordionSummary_title}
+                      onClick={() =>
+                        setIsExpanded((prev) => ({
+                          ...prev,
+                          response: !prev.response,
+                        }))
+                      }
+                    >
+                      <SVGLoader
+                        className={isExpanded.response ? styles.expanded : ''}
+                        src={DownArrowIcon}
+                        width="2rem"
+                        height="2rem"
+                      />
+                      Response<span style={{ color: 'red' }}>*</span>
+                    </div>
+                  </span>
+                }
+                children={
+                  <JsonInput
+                    acceptType="JSON"
+                    withFooter={!readOnly}
+                    className={'jsonField'}
+                    placeholder="Enter your response as a JSON object..."
+                    fieldIsDisabled={readOnly}
+                    value={currentResponse?.content?.schema?.properties || '{}'}
+                    onChange={(value) => {
+                      const currentResIndex = method.responses.findIndex(
+                        (res) => res.code === currentResponse.code
+                      )
+                      if (currentResIndex !== -1) {
+                        setFieldValue(
+                          `responses[${currentResIndex}].content.schema.properties`,
+                          value
+                        )
+                      } else {
+                        const clonedResponses = structuredClone(method.responses)
+
+                        clonedResponses.push({
+                          code: selectedStatusCode.value.toString(),
+                          content: {
+                            contentType: 'application/json',
+                            schema: {
+                              type: 'object',
+                              properties: value,
+                            },
+                          },
+                        })
+
+                        setFieldValue('responses', clonedResponses)
+                      }
+                    }}
+                    onValidation={(valid) => null}
+                  />
+                }
+              />
+            </div>
+          </div>
+        }
+      />
+      <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">
+              {' '}
+              Parameter <strong>{selectedParamName}</strong>
+            </span>
+            ?
+          </p>
+        }
+        onSubmit={{
+          onClick: confirmDeleteParameter,
+          text: 'Delete',
+          color: 'error',
+          fullWidth: true,
+        }}
+        onCancel={{
+          text: 'Cancel',
+          color: 'normal',
+          fullWidth: true,
+        }}
+        onClose={() => setOpenDeleteDialog(false)}
+        open={openDeleteDialog}
+        icon={<SVGLoader src={DeleteOutlinedIcon} width="4.0625rem" height="4.0625rem" />}
+      />
+    </div>
+  )
+}
+
+export default MethodsAccordion