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

package/src/components/table/table.tsx

@@ -1,490 +1,307 @@
-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().when('in', {
-        is: 'path',
-        then: (schema) => schema.oneOf([true], 'Path parameters must be required.'),
-        otherwise: (schema) => schema.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())
-                        if (item?.value == 'in') {
-                          setFieldValue('required', true)
-                        }
-                      }} // Updates state on selection
-                      options={[
-                        {
-                          list: isRequest
-                            ? [
-                                { label: 'Query', value: 'query' },
-                                { label: 'Header', value: 'header' },
-                                { label: 'Path', value: 'path' },
-                              ]
-                            : [{ 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 select-inputs">
-                    <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}
-                    />{' '}
-                    {!!values?.schema?.type && 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">
-                    <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"
-                        disabled={
-                          values?.schema?.type?.toLowerCase() == 'array' ||
-                          values?.schema?.type?.toLowerCase() == 'object'
-                        }
-                        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 && values.in && values.in.toLowerCase() == 'path'
-                            ? true
-                            : values.required
-                        }
-                        disabled={values && values.in && values.in.toLowerCase() == 'path'}
-                        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={6}>
-                      <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
+import React, { useState } from 'react'
+import './style.scss'
+import { Button, Input, SelectGroup, 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'
+
+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({
+    initialValues: {
+      name: '',
+      in: 'Query',
+      schema: {
+        type: 'String',
+      },
+      required: true,
+      description: '',
+    },
+    validationSchema: yup.object().shape({
+      name: yup.string().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().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>
+              )
+            })}
+            {isFormOpen ? (
+              <tr key={''} data-i={''} className={`row`}>
+                <td key={'Parameter name'}>
+                  <div data-id="TEXT_DESCRIPTION" className="tableData">
+                    <Input
+                      placeholder="paramter name"
+                      size="large"
+                      type="text"
+                      //   errorMsg={!!errors.name && errors.name}
+                      onChange={(value) => {
+                        setFieldValue('name', value)
+                      }} // Pass the value directly
+                      value={values.name} // Bind value to the state
+                      disabled={readOnly}
+                    />
+                  </div>
+                </td>
+
+                <td key={'parameter in'}>
+                  <div data-id="TEXT_DESCRIPTION" className="tableData">
+                    <SelectGroup
+                      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">
+                    <SelectGroup
+                      disabled={readOnly}
+                      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) => {
+                                setText(value)
+                              }}
+                              disabled={readOnly}
+                              placeholder="Describe parameter..."
+                            />
+                            {!readOnly && (
+                              <Button
+                                className={styles.editDescTooltipContent_btn}
+                                variant="outlined"
+                                size="small"
+                                onClick={() => {
+                                  setFieldValue('description', text)
+                                  tooltipRef?.hide()
+                                }}
+                              >
+                                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 && (
+                        <Button
+                          className={styles.deleteParamBtn}
+                          variant="link"
+                          color="success"
+                          disabled={!isValid}
+                          endIcon={<SVGLoader src={AddRow} width="0.125rem" height="0.125rem" />}
+                          onClick={() => {
+                            setText('')
+                            submitForm()
+                          }} // Save the new row when clicked
+                        />
+                      )}
+                    </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