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

package/src/components/MethodAccordion/MethodAccordion.tsx

@@ -1,84 +1,1063 @@
-import React from 'react'
-import { Accordion, Button, SelectGroup, Switch, Table, TextArea } from 'digitinary-ui'
-import SVGLoader from '../../components/SVGLoader/SVGLoader'
-import { DeleteIcon, DownArrowIcon, EditIcon } from '../../assets/icons'
-import { httpStatusCodes, methodColorMapping, paramsTableHeaders } from '../../constants/index'
-import styles from './MethodAccordion.module.scss'
-
-const data = Array(4).fill({
-  paramName: 'search',
-  paramType: 'Query',
-  schemaType: 'String',
-  isRequired: <Switch checked />,
-  description: (
-    <div className={styles.paramDescContainer}>
-      <Button className={styles.editDescBtn} variant='link' color='action' endIcon={<SVGLoader src={EditIcon} width='1.5rem' height='1.5rem' />}>
-        Add Description
-      </Button>
-      <div className={styles.paramDescContainer_separator}></div>
-      <Button className={styles.deleteParamBtn} variant='link' color='error' endIcon={<SVGLoader src={DeleteIcon} width='1.125rem' height='1.125rem' />}></Button>
-    </div>
-  ),
-})
-
-const MethodsAccordion = () => {
-  return (
-    <div className={styles.methodAccordionContainer}>
-      <Accordion
-        className={styles.methodAccordion}
-        children={<TextArea label='Description' />}
-        summary={
-          <div className={styles.methodSummaryContainer}>
-            <div className={styles.methodSummary}>
-              <span style={{ backgroundColor: methodColorMapping?.POST?.color ?? '#3A6CD1' }} className={styles.methodLabel}>
-                {methodColorMapping.POST.label}
-              </span>
-              <span className={styles.methodPath}>/auth/login</span>
-            </div>
-            <div className={styles.methodExpandArrowContainer}>
-              <SVGLoader src={DownArrowIcon} width='2rem' height='2rem' />
-            </div>
-          </div>
-        }
-      />
-      <div className={styles.paramsTable}>
-        <Table data={data} headCells={paramsTableHeaders} />
-      </div>
-      <Accordion
-        className={styles.requestAccordion}
-        summary={
-          <span className={styles.requestAccordionSummary}>
-            Request<span style={{ color: 'red' }}>*</span>
-          </span>
-        }
-        children={<TextArea />}
-      />
-      <Accordion
-        className={styles.responseAccordion}
-        summary={
-          <span className={styles.responseAccordionSummary}>
-            Response<span style={{ color: 'red' }}>*</span>
-            <SelectGroup
-              options={[
-                {
-                  list: httpStatusCodes.map((code) => ({
-                    label: (
-                      <div className='statusCodeOptionContainer'>
-                        <div className='statusCodeOptionCircle'></div>
-                        <span>{code}</span>
-                      </div>
-                    ),
-                    value: code,
-                  })),
-                },
-              ]}
-            />
-          </span>
-        }
-        children={<TextArea />}
-      />
-    </div>
-  )
-}
-
-export default MethodsAccordion
+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