@digi-frontend/dgate-api-documentation 1.0.10 → 1.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digi-frontend/dgate-api-documentation",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "types": "dist/types/index.d.ts",

package/src/components/InfoForm/InfoForm.tsx

@@ -16,6 +16,8 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
   const [tableData, setTableData] = useState([])
   const [tableRecords, setTableRecords] = useState()
   const [authType, setAuthType] = useState('')
+  const [description, setDescription] = useState('')
+  const [url, setURL] = useState('')
   const { values, setFieldValue, errors } = useFormikContext<TransformedOpenApi>()
   const [externalTooltipRefs, setExternalTooltipRefs] = useState<{ [key: number]: any }>({})
   const [tooltipRefs, setTooltipRefs] = useState<{ [key: number]: any }>({})
@@ -163,22 +165,24 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
                   placeholder="Describe External Doc..."
                   value={item.externalDocs?.description}
                   disabled={readOnly}
-                  onChange={(value) =>
+                  onChange={(value) => {
                     onTableChange(
                       'externalDocs',
                       { ...item.externalDocs, description: value },
                       index
                     )
-                  }
+                    setDescription(value)
+                  }}
                 />
                 <p className={styles.editDescTooltipContent_header}>External Docs Link</p>
                 <TextArea
                   placeholder="External Docs Link..."
                   value={item.externalDocs?.url}
                   disabled={readOnly}
-                  onChange={(value) =>
+                  onChange={(value) => {
                     onTableChange('externalDocs', { ...item.externalDocs, url: value }, index)
-                  }
+                    setURL(value)
+                  }}
                 />
                 {!readOnly && (
                   <Button
@@ -187,10 +191,11 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
                     size="small"
                     onClick={() => {
                       setFieldValue(`tags[${index}].externalDocs`, {
-                        description: item.externalDocDesc,
-                        url: item.externalDocLink,
+                        description: description,
+                        url: url,
                       })
-                      console.log({ tags: values.tags })
+                      setDescription('')
+                      setURL('')
                       externalTooltipRefs[index]?.hide()
                     }}
                   >

package/src/components/LivePreview/LivePreview.tsx

@@ -1,17 +1,25 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import styles from './LivePreview.module.scss'
 import SimpleLabelValue from '../../components/SimpleLabelValue'
-import Chips from '../../components/Chips/Chips'
+
 import MethodsAccordion from '../../components/MethodAccordion/MethodAccordion'
 import { TransformedOpenApi } from '../../types/transformedOpenApi'
 import { useFormikContext } from 'formik'
-import { methodColorMapping } from '../../constants/index'
+import { methodColorMapping, tagsTableHeaders } from '../../constants/index'
+import TagsTable from '../table/tags-table'
+import { Button, TextArea } from 'digitinary-ui'
+import Tooltip from '../../components/Tooltip/Tooltip'
+import { DeleteIcon, deleteOutlinedIcon, EditIcon } from '../../assets/icons'
 
 interface LivePreviewProps {
   transformedData?: TransformedOpenApi
 }
 
 const LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {
+  const [tableRecords, setTableRecords] = useState()
+  const [tooltipRefs, setTooltipRefs] = useState<{ [key: number]: any }>({})
+  const [tableData, setTableData] = useState([])
+  const [externalTooltipRefs, setExternalTooltipRefs] = useState<{ [key: number]: any }>({})
   const { values } = useFormikContext<TransformedOpenApi>()
   const { info, components, tags } = values
   const { securitySchemes } = components
@@ -19,6 +27,118 @@ const LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {
     securitySchemes && typeof securitySchemes == 'object' && Object.keys(securitySchemes).length
       ? Object.keys(securitySchemes)[0]
       : null
+
+  useEffect(() => {
+    console.log({updated: values.tags})
+    if (values.tags && values.tags.length) {
+      setTableRecords(generateTableData(values.tags, true))
+      setTableData(values.tags)
+    }
+  }, [values.tags])
+
+  const generateTableData = (items, readOnly) => {
+    return items.map((item, index) => ({
+      id: index,
+      tagName: item.name,
+      description: (
+        <div className={styles.paramDescContainer}>
+          <Tooltip
+            arrowWithBorder
+            placement="bottom-end"
+            type="function"
+            trigger="click"
+            delay={[0, 0]}
+            onCreate={(instance) =>
+              setTooltipRefs((prev) => ({
+                ...prev,
+                [index]: instance,
+              }))
+            }
+            content={
+              <div className={styles.editDescTooltipContent}>
+                <p className={styles.editDescTooltipContent_header}>Description</p>
+                <TextArea
+                  placeholder="Describe parameter..."
+                  value={item.description}
+                  disabled={readOnly}
+                  onChange={(value) => null}
+                />
+              </div>
+            }
+          >
+            <Button className={styles.editDescBtn} variant="link" color="action">
+              {item.description ? item.description.substring(0, 12) : '-'}
+              {item.description && item.description.length > 12 ? '...' : ''}
+            </Button>
+          </Tooltip>
+        </div>
+      ),
+      externalDocs: (
+        <div className={styles.paramDescContainer}>
+          <Tooltip
+            arrowWithBorder
+            placement="bottom-end"
+            type="function"
+            trigger="click"
+            delay={[0, 0]}
+            onCreate={(instance) =>
+              setExternalTooltipRefs((prev) => ({
+                ...prev,
+                [index]: instance,
+              }))
+            }
+            content={
+              <div className={styles.editDescTooltipContent}>
+                <p className={styles.editDescTooltipContent_header}>External Docs Description</p>
+                <TextArea
+                  placeholder="Describe External Doc..."
+                  value={item.externalDocs?.description}
+                  disabled={readOnly}
+                  onChange={(value) => null}
+                />
+                <p className={styles.editDescTooltipContent_header}>External Docs Link</p>
+                <TextArea
+                  placeholder="External Docs Link..."
+                  value={item.externalDocs?.url}
+                  disabled={readOnly}
+                  onChange={(value) => null}
+                />
+              </div>
+            }
+          >
+            <Button
+              className={styles.editDescBtn}
+              variant="link"
+              color="action"
+              onClick={() => {
+                const a = document.createElement('a')
+                a.href = item.externalDocs?.url
+                a.click()
+              }}
+            >
+              {item?.externalDocs?.description
+                ? item?.externalDocs?.description?.substring(0, 12)
+                : '-'}
+              {item?.externalDocs?.description && item?.externalDocs?.description?.length > 12
+                ? '...'
+                : ''}
+            </Button>
+          </Tooltip>
+
+          {!readOnly && <div className={styles.paramDescContainer_separator}></div>}
+
+          {!readOnly && (
+            <Button
+              className={styles.deleteParamBtn}
+              variant="link"
+              color="error"
+              onClick={() => null}
+            ></Button>
+          )}
+        </div>
+      ),
+    }))
+  }
   return (
     <div>
       <div className="row">
@@ -39,20 +159,15 @@ const LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {
           <SimpleLabelValue
             key={'tags'}
             label={'Tags: '}
-            value={
-              tags && tags.length ? (
-                <Chips
-                  className={styles.tagsChips}
-                  items={tags.map((t) => ({
-                    id: t.name,
-                    label: t.name,
-                    disabled: true,
-                  }))}
-                />
-              ) : (
-                '-'
-              )
-            }
+          />
+          <TagsTable
+          id="tags-table"
+            data={tableRecords}
+            headCells={tagsTableHeaders}
+            isFormOpen={false}
+            setIsFormOpen={() => null}
+            saveNewRow={() => null}
+            readOnly={true}
           />
 
           <SimpleLabelValue key={'endpoints'} label={'Endpoints '} />

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

@@ -223,6 +223,7 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
                             onClick={() => {
                               const a = document.createElement('a')
                               a.href = values.externalDocs?.url
+                              a.target = '_blank'
                               a.click()
                             }}
                           >