@digi-frontend/dgate-api-documentation 1.4.91 → 1.4.93

package/src/components/table/table.tsx

@@ -1,508 +0,0 @@
-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())
-                        if (item.value?.toLowerCase() == 'array' && !values.schema.items) {
-                          setFieldValue('schema.items', {})
-                        }
-                        if (item.value?.toLowerCase() != 'array' && values.schema.items) {
-                          const newVal = { ...values.schema }
-                          delete newVal.items
-                          setFieldValue('schema', newVal)
-                        }
-                      }} // 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())
-                          if (item.value?.toLowerCase() == 'array' && !values.schema.items?.items) {
-                            setFieldValue('schema.items.items', {})
-                          }
-                          if (item.value?.toLowerCase() != 'array' && values.schema.items?.items) {
-                            const newVal = { ...values.schema.items }
-                            delete newVal?.items
-                            setFieldValue('schema.items', newVal)
-                          }
-                        }} // 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