@digi-frontend/dgate-api-documentation 1.0.1 → 1.0.5

package/src/components/MethodAccordion/MethodAccordion.tsx

@@ -1,1063 +1,401 @@
-import { useEffect, useRef, useState } from 'react'
-import { Accordion, Button, Input, SelectGroup, Switch, TextArea } from 'digitinary-ui'
-import SVGLoader from '../../components/SVGLoader/SVGLoader'
-import {
-  DeleteIcon,
-  DownArrowIcon,
-  EditIcon,
-  DeleteOutlinedIcon,
-  CloseIcon,
-} 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<boolean>(false)
-  const [isHeaderFormOpen, setIsHeaderFormOpen] = useState<boolean>(false)
-  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 [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) {
-        return { ...item, [key]: value }
-      } else {
-        return item
-      }
-    })
-
-    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">
-                {(() => {
-                  const schema = method?.responses[currentResponseIndex]?.headers[item]?.schema
-                  const schemaType = schema?.type?.toLowerCase()
-                  const isComplex = schemaType === 'array' || schemaType === 'object'
-                  const enumList = schema?.enum || []
-
-                  if (!schema || isComplex) return '-'
-
-                  return (
-                    <Tooltip
-                      disabled={isComplex}
-                      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>
-
-                          {enumList.map((enumVal, enumIndex) => (
-                            <Input
-                              key={enumIndex}
-                              className="methodDescForEnum"
-                              required
-                              clearable={false}
-                              placeholder="Enter Enum value..."
-                              value={enumVal}
-                              onChange={(value) => {
-                                setFieldValue(
-                                  `responses[${currentResponseIndex}].headers["${item}"].schema.enum[${enumIndex}]`,
-                                  value
-                                )
-                              }}
-                            />
-                          ))}
-
-                          <p
-                            className="addEnumButton"
-                            onClick={() => {
-                              setFieldValue(
-                                `responses[${currentResponseIndex}].headers["${item}"].schema.enum`,
-                                [...enumList, '']
-                              )
-                            }}
-                          >
-                            <SVGLoader src={PlusSquare} />
-                            Add New Enum
-                          </p>
-
-                          {!readOnly && (
-                            <Button
-                              className={styles.editDescTooltipContent_btn}
-                              variant="outlined"
-                              size="small"
-                              type="button"
-                              onClick={() => {
-                                setFieldValue(
-                                  `responses[${currentResponseIndex}].headers["${item}"].schema.enum`,
-                                  [...enumList]
-                                )
-                                setEnumFields([])
-                                tooltipEnumRef?.hide()
-                              }}
-                              disabled={enumList.length === 0 || enumList.some((val) => !val)}
-                            >
-                              Apply
-                            </Button>
-                          )}
-                        </div>
-                      }
-                    >
-                      {enumList.length > 0 ? (
-                        <span className="enumText">{enumList.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) => {
-    return items?.map((item, index) => {
-      return {
-        id: index,
-        paramName: item.name,
-        paramType: capitalize(item.in),
-        schemaType: `${capitalize(item?.schema?.type) || ''} ${
-          item?.schema?.type?.toLowerCase() == 'array' &&
-          item?.schema?.items &&
-          item?.schema?.items?.type
-            ? ` _ ${capitalize(item?.schema?.items?.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 ? (
-              <span className="enumText">{item?.schema?.enum?.join('/\u200B')}</span>
-            ) : (
-              <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>
-                    }
-                  >
-                    {method.parameters[index]?.schema?.enum &&
-                    method.parameters[index]?.schema?.enum?.length > 0 ? (
-                      <span className={'enumText'}>
-                        {method.parameters[index]?.schema?.enum?.join('/\u200B')}
-                      </span>
-                    ) : (
-                      <Button
-                        className={styles.editDescBtn}
-                        id="EnumButton"
-                        variant="link"
-                        color="action"
-                        endIcon={
-                          <SVGLoader id="enumIcon" src={PlusIcon} width="1.5rem" height="1.5rem" />
-                        }
-                      >
-                        Add
-                      </Button>
-                    )}
-                  </Tooltip>
-                ) : (
-                  '-'
-                )}{' '}
-              </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 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)
-
-    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))
-  }, [tableData])
-
-  useEffect(() => {
-    if (method?.parameters) {
-      setTableData(method.parameters)
-    }
-  }, [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: {},
-        })
-
-        if (setFieldValue) {
-          setFieldValue('responses', clonedResponses)
-          responseIndex = 0
-        }
-      }
-      setCurrentResponseIndex(responseIndex)
-      indexRef.current = responseIndex
-      if (responseIndex >= 0) {
-        setTableResponseRecords(
-          generateResponseTableData(method.responses[responseIndex].headers, responseIndex)
-        )
-      }
-    }
-  }, [selectedStatusCode, method.responses, setFieldValue])
-
-  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) {
-      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 || '-'}
-                className={styles.multiLineText}
-              />
-            )}
-            <div className={styles.paramsTable}>
-              <h4 className={styles.paramsTableBodyHead}>Request Details</h4>
-              <ParamterTable
-                id="paramter-request-table"
-                data={tableRecords}
-                headCells={paramsTableHeaders}
-                isFormOpen={isFormOpen}
-                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={isHeaderFormOpen}
-                setIsFormOpen={setIsHeaderFormOpen}
-                saveNewRow={saveNewResponseRow}
-                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: 'action',
-          fullWidth: true,
-          variant: 'outlined',
-        }}
-        onClose={() => setOpenDeleteDialog(false)}
-        open={openDeleteDialog}
-        icon={<SVGLoader src={DeleteOutlinedIcon} width="4.0625rem" height="4.0625rem" />}
-        closeIcon={
-          <SVGLoader
-            src={CloseIcon}
-            width="1.5rem"
-            height="1.5rem"
-            onClick={() => setOpenDeleteDialog(false)}
-          />
-        }
-      />
-      <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: 'action',
-          fullWidth: true,
-          variant: 'outlined',
-        }}
-        onClose={() => setOpenHeaderDeleteDialog(false)}
-        open={openHeaderDeleteDialog}
-        icon={<SVGLoader src={DeleteOutlinedIcon} width="4.0625rem" height="4.0625rem" />}
-        closeIcon={
-          <SVGLoader
-            src={CloseIcon}
-            width="1.5rem"
-            height="1.5rem"
-            onClick={() => setOpenDeleteDialog(false)}
-          />
-        }
-      />
-    </div>
-  )
-}
-
-export default MethodsAccordion
+import React, { useEffect, useState } from 'react'
+import { Accordion, Button, Input, SelectGroup, Switch, TextArea } from 'digitinary-ui'
+import SVGLoader from '../../components/SVGLoader/SVGLoader'
+import {
+  CheckMarkSquare,
+  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'
+
+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,
+}: {
+  method: TransformedMethod
+  path: string
+  setFieldValue: (key: string, value: string) => void
+  readOnly?: boolean
+}) => {
+  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 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
+              arrowWithBorder
+              placement="bottom-end"
+              type="function"
+              trigger="click"
+              delay={[0, 0]}
+              onCreate={(instance) =>
+                setTooltipRefs((prev) => ({
+                  ...prev,
+                  [index]: instance,
+                }))
+              }
+              content={
+                <div className={styles.editDescTooltipContent}>
+                  <p className={styles.editDescTooltipContent_header}>Description</p>
+                  <TextArea
+                    placeholder="Describe parameter..."
+                    value={item.description}
+                    disabled={readOnly}
+                    onChange={(value) => onTableChange('description', value, index)}
+                  />
+                  {!readOnly && (
+                    <Button
+                      className={styles.editDescTooltipContent_btn}
+                      variant="outlined"
+                      size="small"
+                      onClick={() => {
+                        setFieldValue(`parameters[${index}].description`, item.description)
+                        tooltipRefs[index]?.hide()
+                      }}
+                    >
+                      Apply
+                    </Button>
+                  )}
+                </div>
+              }
+            >
+              {readOnly ? (
+                <Button
+                  className={styles.editDescBtn}
+                  variant="link"
+                  color="action"
+                  // endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
+                >
+                  {item.description ? item.description.substring(0, 12) : '-'}
+                  {item.description && item.description.length > 12 ? '...' : ''}
+                </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 [tableRecords, setTableRecords] = useState()
+
+  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) {
+      setTableRecords(generateTableData(method.parameters))
+      setTableData(method.parameters)
+    }
+  }, [method, path])
+
+  return (
+    <div>
+      <Accordion
+        expanded={isExpanded.method}
+        onChange={() => setIsExpanded((prev) => ({ ...prev, method: !prev.method }))}
+        className={styles.methodAccordion}
+        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} ${
+                isExpanded.method ? styles.expanded : ''
+              }`}
+            >
+              <SVGLoader src={DownArrowIcon} width="2rem" height="2rem" />
+            </div>
+          </div>
+        }
+        children={
+          <div className={styles.methodAccordionContent}>
+            {!readOnly ? (
+              <TextArea
+                className={styles.methodDesc}
+                label="Description"
+                placeholder="Describe the endpoint's purpose and functionality..."
+                value={method?.description}
+                onChange={(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
+                    className={'jsonField'}
+                    placeholder="Enter your request body as a JSON object...."
+                    fieldIsDisabled={readOnly}
+                    value={method?.requestBody?.at(0)?.content?.schema?.properties || '{}'}
+                    onChange={(value: string) => {
+                      setFieldValue('requestBody[0].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}
+                    placeholder="200"
+                    disabled={true}
+                    options={[
+                      {
+                        list: httpStatusCodeOptions,
+                      },
+                    ]}
+                    value={httpStatusCodeOptions[4]}
+                  />
+                </span>
+              }
+              children={
+                <JsonInput
+                  className={'jsonField'}
+                  placeholder="Enter your response as a JSON object..."
+                  fieldIsDisabled={readOnly}
+                  value={method.responses?.at(0)?.content?.schema?.properties || '{}'}
+                  onChange={(value) => {
+                    setFieldValue('responses[0].content.schema.properties', value)
+                  }}
+                  onValidation={() => 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 ${selectedParamName} `}</span>?
+          </p>
+        }
+        onSubmit={{
+          onClick: confirmDeleteParameter,
+          text: 'Yes',
+          color: 'error',
+          fullWidth: true,
+        }}
+        onCancel={{
+          text: 'No',
+          color: 'normal',
+          fullWidth: true,
+        }}
+        onClose={() => setOpenDeleteDialog(false)}
+        open={openDeleteDialog}
+        icon={<SVGLoader src={deleteOutlinedIcon} width="4.0625rem" height="4.0625rem" />}
+      />
+    </div>
+  )
+}
+
+export default MethodsAccordion