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

package/src/components/table/table.tsx

@@ -1,327 +1,489 @@
-import React, { useState } from 'react'
-import './style.scss'
-import { Button, Input, SelectGroupV2, Switch, TextArea } from 'digitinary-ui'
-import Tooltip from '../Tooltip/Tooltip'
-import SVGLoader from '../SVGLoader/SVGLoader'
-import { AddRow, EditIcon, DeleteIcon } from '../../assets/icons'
-import styles from '../MethodAccordion/MethodAccordion.module.scss'
-import { useFormik } from 'formik'
-import * as yup from 'yup'
-import { capitalize } from '../../helpers/methodAccordion.helper'
-import regex from '../../constants/regex'
-
-const ParamterTable = ({
-  id,
-  headCells,
-  data,
-  isFormOpen,
-  setIsFormOpen,
-  saveNewRow,
-  readOnly,
-}) => {
-  const [text, setText] = useState('')
-  const [tooltipRef, setTooltipRef] = useState(null)
-  const { values, errors, setFieldValue, isValid, submitForm, resetForm } = useFormik({
-    validateOnMount: true,
-    initialValues: {
-      name: '',
-      in: 'Query',
-      schema: {
-        type: 'String',
-      },
-      required: true,
-      description: '',
-    },
-    validationSchema: yup.object().shape({
-      name: yup.string().trim().required('Parameter name is required'),
-      in: yup.string().required('Paramter type is required'),
-      schema: yup.object().shape({
-        type: yup.string().required('Parameter schema type is required'),
-      }),
-      required: yup.boolean().optional(),
-      description: yup.string().trim().optional(),
-    }),
-    onSubmit: (values) => {
-      saveNewRow(values)
-      setIsFormOpen(false)
-      setText('')
-      resetForm()
-    },
-  })
-
-  return (
-    <div className="tableSectionContainer">
-      <div className="tableContainer">
-        <table id={id || ''} className={`table borderRadiusTop borderRadiusBottom`}>
-          <thead className="tableHead">
-            <tr>
-              {headCells?.map((headCell) => (
-                <th
-                  key={headCell.id}
-                  className={`tableHeadCell ${headCell.classes || ''}`}
-                  style={{ width: headCell.width, minWidth: headCell.minWidth }}
-                >
-                  <div
-                    className="headContainer"
-                    data-id={`${
-                      typeof headCell.label === 'string'
-                        ? headCell.label.toUpperCase().replace(/[^a-zA-Z0-9]+/g, '_')
-                        : 'UNKNOWN_LABEL'
-                    }_COLUMN`}
-                  >
-                    {headCell.label}
-                  </div>
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody className="tableBody" data-id="TABLE_BODY">
-            {data?.map((row, rowIndex) => {
-              return (
-                <tr key={rowIndex} data-i={rowIndex} className={`row`}>
-                  {headCells?.map((headCell) => {
-                    const cellContent = row[headCell.id] !== '_' && (
-                      <div
-                        data-id="TEXT_DESCRIPTION"
-                        className="tableData"
-                        style={{
-                          width: headCell.width,
-                          minWidth: headCell.minWidth,
-                        }}
-                      >
-                        {row[headCell.id]}
-                      </div>
-                    )
-
-                    return (
-                      <td
-                        key={headCell.id}
-                        style={{
-                          width: headCell.width,
-                          minWidth: headCell.minWidth,
-                        }}
-                      >
-                        {cellContent}
-                      </td>
-                    )
-                  })}
-                </tr>
-              )
-            })}
-            {data?.length === 0 && readOnly && (
-              <tr className="fallbackTableRow">
-                <td className="fallbackContainer" colSpan={headCells?.length}>
-                  <div className="fallbackTextContainer">
-                    <span className="fallbackText"> No Data Available</span>
-                  </div>
-                </td>
-              </tr>
-            )}
-
-            {isFormOpen && !readOnly ? (
-              <tr className={`row`}>
-                <td key={'Parameter name'}>
-                  <div data-id="TEXT_DESCRIPTION" className="tableData">
-                    <Input
-                      placeholder="Parameter name"
-                      size="large"
-                      type="text"
-                      onChange={(value) => {
-                        if (value === '' || regex.ASCII.test(value as string))
-                          setFieldValue('name', value)
-                      }}
-                      value={values.name}
-                      disabled={readOnly}
-                    />
-                  </div>
-                </td>
-
-                <td key={'parameter in'}>
-                  <div data-id="TEXT_DESCRIPTION" className="tableData">
-                    <SelectGroupV2
-                      disabled={readOnly}
-                      value={{
-                        label: capitalize(values.in),
-                        value: capitalize(values.in),
-                      }}
-                      onChange={(item) => setFieldValue('in', item?.value?.toLowerCase())} // Updates state on selection
-                      options={[
-                        {
-                          list: [
-                            { label: 'Query', value: 'query' },
-                            { label: 'Header', value: 'header' },
-                            { label: 'Path', value: 'path' },
-                            { label: 'Body', value: 'body' },
-                          ],
-                        },
-                      ]}
-                      errorMsg={!!errors.in && errors.in}
-                      isMultiple={false}
-                      withSearch={false}
-                      clearable={false}
-                    />{' '}
-                  </div>
-                </td>
-
-                <td key={'parameter schema type'}>
-                  <div data-id="TEXT_DESCRIPTION" className="tableData">
-                    <SelectGroupV2
-                      disabled={readOnly}
-                      clearable={false}
-                      value={{
-                        label: capitalize(values.schema.type),
-                        value: capitalize(values.schema.type),
-                      }}
-                      errorMsg={!!errors.schema && errors.schema}
-                      onChange={(item) => setFieldValue('schema.type', item?.value?.toLowerCase())} // Updates state on selection
-                      options={[
-                        {
-                          list: [
-                            { label: 'String', value: 'string' },
-                            { label: 'Integer', value: 'integer' },
-                            { label: 'Boolean', value: 'boolean' },
-                            { label: 'Object', value: 'object' },
-                            { label: 'Array', value: 'array' },
-                            { label: 'Number', value: 'number' },
-                          ],
-                        },
-                      ]}
-                      isMultiple={false}
-                      withSearch={false}
-                    />{' '}
-                  </div>
-                </td>
-
-                <td key={'parameter required'}>
-                  <div data-id="is required" className="tableData">
-                    {readOnly ? (
-                      <>{values.required ? 'True' : 'False'}</>
-                    ) : (
-                      <Switch
-                        checked={values.required}
-                        onClick={() => {
-                          if (readOnly) {
-                            return
-                          }
-                          setFieldValue('required', !values.required)
-                        }}
-                      />
-                    )}
-                  </div>
-                </td>
-
-                <td key={'parameter schema desc'}>
-                  <div data-id="TEXT_DESCRIPTION" className="tableData">
-                    <div className={styles.paramDescContainer}>
-                      <Tooltip
-                        arrowWithBorder
-                        placement="bottom-end"
-                        type="function"
-                        trigger="click"
-                        delay={[0, 0]}
-                        onCreate={(instance) => setTooltipRef(instance)}
-                        content={
-                          <div className={styles.editDescTooltipContent}>
-                            <p className={styles.editDescTooltipContent_header}>Description</p>
-                            <TextArea
-                              value={text || values.description}
-                              onChange={(value) => {
-                                if (value === '' || regex.ASCII.test(value)) setText(value)
-                              }}
-                              disabled={readOnly}
-                              placeholder="Describe parameter..."
-                              maxLength={120}
-                            />
-                            {!readOnly && (
-                              <Button
-                                className={styles.editDescTooltipContent_btn}
-                                variant="outlined"
-                                size="small"
-                                onClick={() => {
-                                  setFieldValue('description', text?.trim())
-                                  tooltipRef?.hide()
-                                }}
-                                disabled={text?.trim() === ''}
-                              >
-                                Apply
-                              </Button>
-                            )}
-                          </div>
-                        }
-                      >
-                        <Button
-                          className={styles.editDescBtn}
-                          variant="link"
-                          color="action"
-                          endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
-                        >
-                          {readOnly ? 'View ' : 'Add '} Description
-                        </Button>
-                      </Tooltip>
-
-                      <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={() => {
-                            resetForm()
-                            setText('')
-                            setIsFormOpen(false)
-                          }} // Correctly delete the new row
-                        />
-                      )}
-
-                      {!readOnly && (
-                        <Tooltip
-                          disabled={!!values.name.trim()}
-                          content={`Parameter name can't be empty `}
-                        >
-                          <Button
-                            className={styles.deleteParamBtn}
-                            variant="link"
-                            color="success"
-                            disabled={!values.name.trim()}
-                            endIcon={<SVGLoader src={AddRow} width="0.125rem" height="0.125rem" />}
-                            onClick={() => {
-                              setText('')
-                              submitForm()
-                            }} // Save the new row when clicked
-                          />
-                        </Tooltip>
-                      )}
-                    </div>{' '}
-                  </div>
-                </td>
-              </tr>
-            ) : (
-              <>
-                {!readOnly && (
-                  <tr key={'addNew'} data-i={'addNew'} className={`row`}>
-                    <td colSpan={5}>
-                      <Button
-                        variant="link"
-                        color="primary"
-                        onClick={() => {
-                          setIsFormOpen((prev) => !prev)
-                        }}
-                      >
-                        + Add Parameter
-                      </Button>
-                    </td>
-                  </tr>
-                )}
-              </>
-            )}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  )
-}
-
-export default ParamterTable
+import React, { useState } from 'react'
+import './style.scss'
+import { Button, Input, SelectGroupV2, Switch, TextArea } from 'digitinary-ui'
+import Tooltip from '../Tooltip/Tooltip'
+import SVGLoader from '../SVGLoader/SVGLoader'
+import { AddRow, EditIcon, DeleteIcon } from '../../assets/icons'
+import PlusIcon from '../../assets/icons/Plus.svg'
+import PlusSquare from '../../assets/icons/PlusSquare.svg'
+import styles from '../MethodAccordion/MethodAccordion.module.scss'
+import { useFormik } from 'formik'
+import * as yup from 'yup'
+import { capitalize } from '../../helpers/methodAccordion.helper'
+import regex from '../../constants/regex'
+
+const ParamterTable = ({
+  id,
+  headCells,
+  data,
+  isFormOpen,
+  setIsFormOpen,
+  saveNewRow,
+  readOnly,
+  isRequest = true,
+}) => {
+  const [text, setText] = useState('')
+  const [tooltipRef, setTooltipRef] = useState(null)
+  const [tooltipEnumRef, setTooltipEnumRef] = useState(null)
+  const [enumFields, setEnumFields] = useState<string[]>([])
+  const { values, errors, setFieldValue, isValid, submitForm, resetForm } = useFormik({
+    validateOnMount: true,
+    initialValues: {
+      name: '',
+      in: isRequest ? 'query' : 'header',
+      schema: {
+        type: 'string',
+        enum: [],
+        items: {
+          type: 'string',
+        },
+      },
+      required: true,
+      description: '',
+    },
+    validationSchema: yup.object().shape({
+      name: yup.string().default('').trim().required('Parameter name is required'),
+      in: yup.string().required('Paramter type is required'),
+      schema: yup.object().shape({
+        type: yup.string().required('Parameter schema type is required'),
+        enum: yup.array(yup.string()).optional(),
+        items: yup.object().shape({
+          type: yup.string().optional(),
+        }),
+      }),
+      required: yup.boolean().optional(),
+      description: yup.string().default('').trim().optional(),
+    }),
+    onSubmit: (values) => {
+      if (values && !values?.schema?.items?.type) {
+        delete values?.schema?.items?.type
+      }
+      saveNewRow(values)
+      setIsFormOpen(undefined)
+      setText('')
+      resetForm()
+    },
+  })
+
+  return (
+    <div className="tableSectionContainer">
+      <div className="tableContainer">
+        <table id={id || ''} className={`table borderRadiusTop borderRadiusBottom`}>
+          <thead className="tableHead">
+            <tr>
+              {headCells?.map((headCell) => (
+                <th
+                  key={headCell.id}
+                  className={`tableHeadCell ${headCell.classes || ''}`}
+                  style={{ width: headCell.width, minWidth: headCell.minWidth }}
+                >
+                  <div
+                    className="headContainer"
+                    data-id={`${
+                      typeof headCell.label === 'string'
+                        ? headCell.label.toUpperCase().replace(/[^a-zA-Z0-9]+/g, '_')
+                        : 'UNKNOWN_LABEL'
+                    }_COLUMN`}
+                  >
+                    {headCell.label}
+                  </div>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="tableBody" data-id="TABLE_BODY">
+            {data?.map((row, rowIndex) => {
+              return (
+                <tr key={rowIndex} data-i={rowIndex} className={`row`}>
+                  {headCells?.map((headCell) => {
+                    const cellContent = row[headCell.id] !== '_' && (
+                      <div
+                        data-id="TEXT_DESCRIPTION"
+                        className="tableData"
+                        style={{
+                          width: headCell.width,
+                          minWidth: headCell.minWidth,
+                        }}
+                      >
+                        {row[headCell.id]}
+                      </div>
+                    )
+
+                    return (
+                      <td
+                        key={headCell.id}
+                        style={{
+                          width: headCell.width,
+                          minWidth: headCell.minWidth,
+                        }}
+                      >
+                        {cellContent}
+                      </td>
+                    )
+                  })}
+                </tr>
+              )
+            })}
+            {data?.length === 0 && readOnly && (
+              <tr className="fallbackTableRow">
+                <td className="fallbackContainer" colSpan={headCells?.length}>
+                  <div className="fallbackTextContainer">
+                    <span className="fallbackText"> No Data Available</span>
+                  </div>
+                </td>
+              </tr>
+            )}
+
+            {isFormOpen && !readOnly ? (
+              <tr className={`row`}>
+                <td key={'Parameter name'}>
+                  <div data-id="TEXT_DESCRIPTION" className="tableData">
+                    <Input
+                      placeholder="Parameter name"
+                      size="large"
+                      type="text"
+                      onChange={(value) => {
+                        if (value === '' || regex.ASCII.test(value as string))
+                          setFieldValue('name', value)
+                      }}
+                      value={values.name}
+                      disabled={readOnly}
+                    />
+                  </div>
+                </td>
+
+                <td key={'parameter in'}>
+                  <div data-id="TEXT_DESCRIPTION" className="tableData">
+                    <SelectGroupV2
+                      disabled={readOnly}
+                      value={{
+                        label: capitalize(values.in),
+                        value: values.in,
+                      }}
+                      onChange={(item) => setFieldValue('in', item?.value?.toLowerCase())} // Updates state on selection
+                      options={[
+                        {
+                          list: isRequest
+                            ? [
+                                { label: 'Query', value: 'query' },
+                                { label: 'Header', value: 'header' },
+                                { label: 'Path', value: 'path' },
+                                { label: 'Body', value: 'body' },
+                              ]
+                            : [{ label: 'Header', value: 'header' }],
+                        },
+                      ]}
+                      errorMsg={!!errors.in && errors.in}
+                      isMultiple={false}
+                      withSearch={false}
+                      clearable={false}
+                    />{' '}
+                  </div>
+                </td>
+
+                <td key={'parameter schema type'}>
+                  <div data-id="TEXT_DESCRIPTION" className="tableData">
+                    <SelectGroupV2
+                      disabled={readOnly}
+                      clearable={false}
+                      value={{
+                        label: capitalize(values?.schema?.type),
+                        value: values?.schema?.type,
+                      }}
+                      errorMsg={!!errors.schema && errors.schema}
+                      onChange={(item) => setFieldValue('schema.type', item?.value?.toLowerCase())} // Updates state on selection
+                      options={[
+                        {
+                          list: [
+                            { label: 'String', value: 'string' },
+                            { label: 'Integer', value: 'integer' },
+                            { label: 'Boolean', value: 'boolean' },
+                            { label: 'Object', value: 'object' },
+                            { label: 'Array', value: 'array' },
+                            { label: 'Number', value: 'number' },
+                          ],
+                        },
+                      ]}
+                      isMultiple={false}
+                      withSearch={false}
+                    />{' '}
+                  </div>
+                </td>
+
+                <td key={'parameter array schema type'}>
+                  <div data-id="TEXT_DESCRIPTION" className="tableData">
+                    {values.schema && values.schema?.type?.toLowerCase() == 'array' ? (
+                      <SelectGroupV2
+                        disabled={readOnly}
+                        clearable={false}
+                        value={{
+                          label: capitalize(values?.schema?.items?.type),
+                          value: values.schema?.items?.type,
+                        }}
+                        errorMsg={!!errors?.schema?.items?.type && errors?.schema?.items?.type}
+                        onChange={(item) =>
+                          setFieldValue('schema.items.type', item?.value?.toLowerCase())
+                        } // Updates state on selection
+                        options={[
+                          {
+                            list: [
+                              { label: 'String', value: 'string' },
+                              { label: 'Integer', value: 'integer' },
+                              { label: 'Boolean', value: 'boolean' },
+                              { label: 'Object', value: 'object' },
+                              { label: 'Array', value: 'array' },
+                              { label: 'Number', value: 'number' },
+                            ],
+                          },
+                        ]}
+                        isMultiple={false}
+                        withSearch={false}
+                      />
+                    ) : (
+                      '-'
+                    )}{' '}
+                  </div>
+                </td>
+
+                <td key={'parameter enum'}>
+                  <div data-id="TEXT_DESCRIPTION" className="tableData">
+                    {values?.schema &&
+                    values?.schema?.type?.toLowerCase() != 'array' &&
+                    values?.schema?.type?.toLowerCase() != 'object' ? (
+                      <Tooltip
+                        disabled={
+                          values?.schema?.type?.toLowerCase() == 'array' ||
+                          values?.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>
+                            {!!values?.schema?.enum &&
+                              !!values?.schema?.enum.length &&
+                              values?.schema?.enum?.map((item, index) => (
+                                <Input
+                                  key={index}
+                                  className={'methodDescForEnum'}
+                                  required
+                                  clearable={false}
+                                  placeholder="Enter Enum value..."
+                                  value={item}
+                                  onChange={(value) => {
+                                    setFieldValue(`schema.enum[${index}]`, value)
+                                  }}
+                                />
+                              ))}
+                            {enumFields &&
+                              enumFields?.map((item, index) => (
+                                <Input
+                                  key={index}
+                                  className={'methodDescForEnum'}
+                                  required
+                                  clearable={false}
+                                  placeholder={`Enter Enum value...`}
+                                  value={item}
+                                  onChange={(value) => {
+                                    let _values = [...enumFields]
+                                    _values[index] = value
+                                    setEnumFields(_values)
+                                  }}
+                                />
+                              ))}
+                            <p
+                              className={'addEnumButton'}
+                              onClick={() => {
+                                setEnumFields((prev) => [...prev, ''])
+                              }}
+                            >
+                              <SVGLoader src={PlusSquare} />
+                              Add New Enum
+                            </p>
+                            {!readOnly && (
+                              <Button
+                                className={styles.editDescTooltipContent_btn}
+                                variant="outlined"
+                                size="small"
+                                type="button"
+                                onClick={() => {
+                                  setFieldValue('schema.enum', [
+                                    ...values?.schema?.enum,
+                                    ...enumFields,
+                                  ])
+                                  setEnumFields([])
+                                  tooltipEnumRef?.hide()
+                                }}
+                                disabled={
+                                  (enumFields.length > 0 &&
+                                    enumFields?.filter((item) => !item).length) ||
+                                  (values?.schema?.enum.length > 0 &&
+                                    values?.schema?.enum?.filter((item) => !item).length)
+                                }
+                              >
+                                Apply
+                              </Button>
+                            )}
+                          </div>
+                        }
+                      >
+                        <Button
+                          className={styles.editDescBtn}
+                          id="EnumButton"
+                          variant="link"
+                          color="action"
+                          endIcon={
+                            <SVGLoader
+                              id="enumIcon"
+                              src={PlusIcon}
+                              width="1.5rem"
+                              height="1.5rem"
+                            />
+                          }
+                        >
+                          Add
+                        </Button>
+                      </Tooltip>
+                    ) : (
+                      '-'
+                    )}{' '}
+                  </div>
+                </td>
+
+                <td key={'parameter required'}>
+                  <div data-id="is required" className="tableData">
+                    {readOnly ? (
+                      <>{values.required ? 'True' : 'False'}</>
+                    ) : (
+                      <Switch
+                        checked={values.required}
+                        onClick={() => {
+                          if (readOnly) {
+                            return
+                          }
+                          setFieldValue('required', !values.required)
+                        }}
+                      />
+                    )}
+                  </div>
+                </td>
+
+                <td key={'parameter schema desc'}>
+                  <div data-id="TEXT_DESCRIPTION" className="tableData">
+                    <div className={styles.paramDescContainer}>
+                      <Tooltip
+                        arrowWithBorder
+                        placement="bottom-end"
+                        type="function"
+                        trigger="click"
+                        delay={[0, 0]}
+                        onCreate={(instance) => setTooltipRef(instance)}
+                        content={
+                          <div className={styles.editDescTooltipContent}>
+                            <p className={styles.editDescTooltipContent_header}>Description</p>
+                            <TextArea
+                              value={text || values.description}
+                              onChange={(value) => {
+                                if (value === '' || regex.ASCII.test(value)) setText(value)
+                              }}
+                              disabled={readOnly}
+                              placeholder="Describe parameter..."
+                              maxLength={120}
+                            />
+                            {!readOnly && (
+                              <Button
+                                className={styles.editDescTooltipContent_btn}
+                                variant="outlined"
+                                size="small"
+                                onClick={() => {
+                                  setFieldValue('description', text?.trim())
+                                  tooltipRef?.hide()
+                                }}
+                                disabled={text?.trim() === ''}
+                              >
+                                Apply
+                              </Button>
+                            )}
+                          </div>
+                        }
+                      >
+                        <Button
+                          className={styles.editDescBtn}
+                          variant="link"
+                          color="action"
+                          endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
+                        >
+                          {readOnly ? 'View ' : 'Add '} Description
+                        </Button>
+                      </Tooltip>
+
+                      <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={() => {
+                            resetForm()
+                            setText('')
+                            setIsFormOpen(undefined)
+                          }} // Correctly delete the new row
+                        />
+                      )}
+
+                      {!readOnly && (
+                        <Tooltip
+                          disabled={!!values.name.trim()}
+                          content={`Parameter name can't be empty `}
+                        >
+                          <Button
+                            className={styles.deleteParamBtn}
+                            variant="link"
+                            color="success"
+                            disabled={!values.name.trim()}
+                            endIcon={<SVGLoader src={AddRow} width="0.125rem" height="0.125rem" />}
+                            onClick={() => {
+                              setText('')
+                              submitForm()
+                            }} // Save the new row when clicked
+                          />
+                        </Tooltip>
+                      )}
+                    </div>{' '}
+                  </div>
+                </td>
+              </tr>
+            ) : (
+              <>
+                {!readOnly && (
+                  <tr key={'addNew'} data-i={'addNew'} className={`row`}>
+                    <td colSpan={5}>
+                      <Button
+                        variant="link"
+                        color="primary"
+                        onClick={() => {
+                          setIsFormOpen((prev) => (!prev ? (isRequest ? 'Req' : 'Res') : undefined))
+                        }}
+                      >
+                        + Add Parameter
+                      </Button>
+                    </td>
+                  </tr>
+                )}
+              </>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+export default ParamterTable