@digi-frontend/dgate-api-documentation 1.0.6 → 1.0.8

package/src/components/table/tags-table.tsx

@@ -0,0 +1,308 @@
+import { useState } from 'react'
+import './style.scss'
+import _styles from '../InfoForm/InfoForm.module.scss'
+import { Button, Input, 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'
+
+const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow, readOnly }) => {
+  const [text, setText] = useState('')
+  const [externalDesc, setExternalDesc] = useState('')
+  const [externalUrl, setExternalUrl] = useState('')
+  const [tooltipRef, setTooltipRef] = useState(null)
+  const [externalTooltipRefs, setExternalTooltipRefs] = useState(null)
+  const { values, errors, setFieldValue, isValid, submitForm, resetForm } = useFormik({
+    initialValues: {
+      name: '',
+      description: '',
+      externalDocs: {
+        url: '',
+        description: '',
+      },
+    },
+    validationSchema: yup.object().shape({
+      name: yup.string().required('Tag name is required'),
+      description: yup.string().optional(),
+      externalDocs: yup.object().optional(),
+    }),
+    onSubmit: (values) => {
+      setText('')
+      setExternalDesc('')
+      setExternalUrl('')
+      resetForm()
+      setIsFormOpen(false)
+      saveNewRow(values)
+    },
+  })
+  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={'tag name'}>
+                  <div data-id="TEXT_DESCRIPTION" className="tableData">
+                    <Input
+                      placeholder="Tag name"
+                      size="large"
+                      type="text"
+                      onChange={(value) => {
+                        setFieldValue('name', value)
+                      }} // Pass the value directly
+                      value={values.name} // Bind value to the state
+                      disabled={readOnly}
+                    />
+                  </div>
+                </td>
+
+                <td key={'tagDescRequired'}>
+                  <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 Tag..."
+                            />
+                            {!readOnly && (
+                              <Button
+                                className={_styles.editDescTooltipContent_btn}
+                                variant="outlined"
+                                size="small"
+                                onClick={() => {
+                                  setFieldValue('description', text)
+                                  tooltipRef?.hide()
+                                }}
+                              >
+                                Apply
+                              </Button>
+                            )}
+                          </div>
+                        }
+                      >
+                        <Button
+                          className={_styles.editDescBtn}
+                          style={{ paddingLeft: 0 }}
+                          variant="link"
+                          color="action"
+                          endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
+                        >
+                          {readOnly ? 'View ' : 'Add '} Description
+                        </Button>
+                      </Tooltip>
+                    </div>{' '}
+                  </div>
+                </td>
+                <td key={'tagExternal'}>
+                  <div className="tableData">
+                    <div className={_styles.paramDescContainer}>
+                      <Tooltip
+                        arrowWithBorder
+                        placement="bottom-end"
+                        type="function"
+                        trigger="click"
+                        delay={[0, 0]}
+                        onCreate={(instance) => setExternalTooltipRefs(instance)}
+                        content={
+                          <div className={_styles.editDescTooltipContent}>
+                            <p className={_styles.editDescTooltipContent_header}>
+                              External Docs Description
+                            </p>
+                            <TextArea
+                              placeholder="Describe External Doc..."
+                              value={externalDesc || values.externalDocs.description}
+                              disabled={readOnly}
+                              onChange={(value) => setExternalDesc(value)}
+                            />
+                            <p className={_styles.editDescTooltipContent_header}>
+                              External Docs Link
+                            </p>
+                            <TextArea
+                              placeholder="External Docs Link..."
+                              value={externalUrl || values.externalDocs.url}
+                              disabled={readOnly}
+                              onChange={(value) => setExternalUrl(value)}
+                            />
+                            {!readOnly && (
+                              <Button
+                                className={_styles.editDescTooltipContent_btn}
+                                variant="outlined"
+                                size="small"
+                                onClick={() => {
+                                  setFieldValue(`externalDocs`, {
+                                    description: externalDesc,
+                                    url: externalUrl,
+                                  })
+                                  setExternalDesc('')
+                                  setExternalUrl('')
+                                  externalTooltipRefs?.hide()
+                                }}
+                              >
+                                Apply
+                              </Button>
+                            )}
+                          </div>
+                        }
+                      >
+                        {readOnly ? (
+                          <Button
+                            className={_styles.editDescBtn}
+                            variant="link"
+                            color="action"
+                            onClick={() => {
+                              const a = document.createElement('a')
+                              a.href = values.externalDocs?.url
+                              a.click()
+                            }}
+                          >
+                            {values?.externalDocs?.description
+                              ? values?.externalDocs?.description?.substring(0, 12)
+                              : '-'}
+                            {values?.externalDocs?.description &&
+                            values?.externalDocs?.description?.length > 12
+                              ? '...'
+                              : ''}
+                          </Button>
+                        ) : (
+                          <Button
+                            className={_styles.editDescBtn}
+                            variant="link"
+                            color="action"
+                            endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
+                          >
+                            {readOnly ? 'View ' : 'Add '} External Docs Link
+                          </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 Tag
+                      </Button>
+                    </td>
+                  </tr>
+                )}
+              </>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+export default TagsTable

package/src/constants/index.ts

@@ -41,6 +41,27 @@ export const methodColorMapping = {
   },
 }
 
+export const tagsTableHeaders = [
+  {
+    id: 'tagName',
+    label: 'Tag Name',
+    sortable: false,
+    classes:'requiredParam'
+  },
+  {
+    id: 'description',
+    label: 'Description',
+    sortable: false,
+    classes:'requiredParam'
+  },
+  {
+    id: 'externalDocs',
+    label: 'External Docs',
+    sortable: false,
+    classes:'requiredParam'
+  }
+]
+
 export const paramsTableHeaders = [
   {
     id: 'paramName',

package/src/layout/layout.tsx

@@ -14,6 +14,7 @@ import { methodColorMapping } from '../constants/index'
 
 interface ILayoutProps {
   openApiJson?: OpenAPIFile
+  handleSave?: (values: unknown) => unknown
 }
 
 const Layout = ({ openApiJson, handleSave }: ILayoutProps): JSX.Element => {

package/src/types/openApi.ts

@@ -38,6 +38,19 @@ export interface OpenAPIFile {
   tags?: {
     name: string
     description?: string
+    externalDocs?: {
+      url: string
+      description: string
+    }[]
+  }[]
+}
+
+export interface Tags {
+  name: string
+  description?: string
+  externalDocs?: {
+    url: string
+    description: string
   }[]
 }