@digi-frontend/dgate-api-documentation 1.0.28 → 1.0.31

package/src/components/LivePreview/LivePreview.tsx

@@ -1,184 +1,184 @@
-import React, { useEffect, useState } from 'react'
-import styles from './LivePreview.module.scss'
-import SimpleLabelValue from '../../components/SimpleLabelValue'
-import MethodsAccordion from '../../components/MethodAccordion/MethodAccordion'
-import { TransformedOpenApi } from '../../types/transformedOpenApi'
-import { useFormikContext } from 'formik'
-import { methodColorMapping, tagsTableHeaders } from '../../constants/index'
-import TagsTable from '../table/tags-table'
-import { Button, Chip } from 'digitinary-ui'
-import Tooltip from '../../components/Tooltip/Tooltip'
-
-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
-  const securityKey =
-    securitySchemes && typeof securitySchemes == 'object' && Object.keys(securitySchemes).length
-      ? Object.keys(securitySchemes)[0]
-      : null
-
-  useEffect(() => {
-    if (values.tags) {
-      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: (
-        <Tooltip
-          key={`${index}-description`}
-          allowHTML
-          disabled={item.description?.length <= 12}
-          content={<div style={{ padding: '0.625rem' }}>{item.description}</div>}
-          arrowWithBorder
-          placement="bottom-end"
-          type="function"
-          delay={[0, 0]}
-        >
-          <div className={styles.paramDescContainer}>
-            <p className={styles.editDescBtn}>
-              {item.description ? item.description.substring(0, 12) : '-'}
-              {item.description && item.description.length > 12 ? '...' : ''}
-            </p>
-          </div>
-        </Tooltip>
-      ),
-      externalDocs: (
-        <div className={styles.paramDescContainer}>
-          {item.externalDocs && item.externalDocs.url && item.externalDocs.url != '-' ? (
-            <a
-              className={styles.editDescBtn}
-              href={
-                item.externalDocs?.url && item.externalDocs?.url.indexOf('http') > -1
-                  ? item.externalDocs?.url
-                  : `https://${item.externalDocs?.url}`
-              }
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              {item?.externalDocs?.description
-                ? item?.externalDocs?.description?.substring(0, 12)
-                : '-'}
-              {item?.externalDocs?.description && item?.externalDocs?.description?.length > 12
-                ? '...'
-                : ''}
-            </a>
-          ) : (
-            <Button className={styles.editDescBtn} variant="link" color="action">
-              {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 className={styles.livePreviewContainer}>
-      <div className="row">
-        <div className="col-md-12">
-          <div className={styles.titleContainer}>
-            <p className={styles.apiName}>{info?.title?.trim() || '-'}</p>
-            <Chip className={styles.livePreviewChip}>Live Preview</Chip>
-          </div>
-          <SimpleLabelValue
-            key={'APIAuthenticationType'}
-            label={'API authentication type: '}
-            value={
-              !!securityKey
-                ? securitySchemes[securityKey].scheme || securitySchemes[securityKey].type
-                : '-'
-            }
-          />
-          <SimpleLabelValue key={'version'} label={'Version: '} value={info?.version || '-'} />
-          <SimpleLabelValue
-            key={'description'}
-            label={'Description: '}
-            value={info?.description?.trim() || '-'}
-          />
-
-          <SimpleLabelValue key={'tags'} label={'Tags: '} />
-          <TagsTable
-            id="tags-table"
-            data={tableRecords}
-            headCells={tagsTableHeaders}
-            isFormOpen={false}
-            setIsFormOpen={() => null}
-            saveNewRow={() => null}
-            readOnly={true}
-          />
-
-          <SimpleLabelValue key={'endpoints'} label={'Endpoints '} />
-          {values.paths.map((path) => (
-            <div className={styles.methodsContainer} key={path.path}>
-              {Object.entries(
-                path.methods
-                  .sort(
-                    (a, b) => methodColorMapping[a.type].order + methodColorMapping[b.type].order
-                  )
-                  .reduce((groupedMethods, method) => {
-                    // Handle methods without tags
-                    const tags = method.tags?.length ? method?.tags : ['default']
-
-                    tags.forEach((tag) => {
-                      if (!groupedMethods[tag]) {
-                        groupedMethods[tag] = []
-                      }
-                      groupedMethods[tag].push(method)
-                    })
-
-                    return groupedMethods
-                  }, {})
-              ).map(([tag, methods]) => (
-                <div key={tag}>
-                  <h3>{tag}</h3>
-                  {methods?.map((method, methodIndex) => (
-                    <MethodsAccordion
-                      readOnly
-                      method={method}
-                      path={path.path}
-                      tags={values.tags}
-                    />
-                  ))}
-                </div>
-              ))}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default LivePreview
+import React, { useEffect, useState } from 'react'
+import styles from './LivePreview.module.scss'
+import SimpleLabelValue from '../../components/SimpleLabelValue'
+import MethodsAccordion from '../../components/MethodAccordion/MethodAccordion'
+import { TransformedOpenApi } from '../../types/transformedOpenApi'
+import { useFormikContext } from 'formik'
+import { methodColorMapping, tagsTableHeaders } from '../../constants/index'
+import TagsTable from '../table/tags-table'
+import { Button, Chip } from 'digitinary-ui'
+import Tooltip from '../../components/Tooltip/Tooltip'
+
+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
+  const securityKey =
+    securitySchemes && typeof securitySchemes == 'object' && Object.keys(securitySchemes).length
+      ? Object.keys(securitySchemes)[0]
+      : null
+
+  useEffect(() => {
+    if (values.tags) {
+      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: (
+        <Tooltip
+          key={`${index}-description`}
+          allowHTML
+          disabled={item.description?.length <= 12}
+          content={<div style={{ padding: '0.625rem' }}>{item.description}</div>}
+          arrowWithBorder
+          placement="bottom-end"
+          type="function"
+          delay={[0, 0]}
+        >
+          <div className={styles.paramDescContainer}>
+            <p className={styles.editDescBtn}>
+              {item.description ? item.description.substring(0, 12) : '-'}
+              {item.description && item.description.length > 12 ? '...' : ''}
+            </p>
+          </div>
+        </Tooltip>
+      ),
+      externalDocs: (
+        <div className={styles.paramDescContainer}>
+          {item.externalDocs && item.externalDocs.url && item.externalDocs.url != '-' ? (
+            <a
+              className={styles.editDescBtn}
+              href={
+                item.externalDocs?.url && item.externalDocs?.url.indexOf('http') > -1
+                  ? item.externalDocs?.url
+                  : `https://${item.externalDocs?.url}`
+              }
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              {item?.externalDocs?.description
+                ? item?.externalDocs?.description?.substring(0, 12)
+                : '-'}
+              {item?.externalDocs?.description && item?.externalDocs?.description?.length > 12
+                ? '...'
+                : ''}
+            </a>
+          ) : (
+            <Button className={styles.editDescBtn} variant="link" color="action">
+              {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 className={styles.livePreviewContainer}>
+      <div className="row">
+        <div className="col-md-12">
+          <div className={styles.titleContainer}>
+            <p className={styles.apiName}>{info?.title?.trim() || '-'}</p>
+            <Chip className={styles.livePreviewChip}>Live Preview</Chip>
+          </div>
+          <SimpleLabelValue
+            key={'APIAuthenticationType'}
+            label={'API authentication type: '}
+            value={
+              !!securityKey
+                ? securitySchemes[securityKey].scheme || securitySchemes[securityKey].type
+                : '-'
+            }
+          />
+          <SimpleLabelValue key={'version'} label={'Version: '} value={info?.version || '-'} />
+          <SimpleLabelValue
+            key={'description'}
+            label={'Description: '}
+            value={info?.description?.trim() || '-'}
+          />
+
+          <SimpleLabelValue key={'tags'} label={'Tags: '} />
+          <TagsTable
+            id="tags-table"
+            data={tableRecords}
+            headCells={tagsTableHeaders}
+            isFormOpen={false}
+            setIsFormOpen={() => null}
+            saveNewRow={() => null}
+            readOnly={true}
+          />
+
+          <SimpleLabelValue key={'endpoints'} label={'Endpoints '} />
+          {values.paths.map((path) => (
+            <div className={styles.methodsContainer} key={path.path}>
+              {Object.entries(
+                path.methods
+                  .sort(
+                    (a, b) => methodColorMapping[a.type].order + methodColorMapping[b.type].order
+                  )
+                  .reduce((groupedMethods, method) => {
+                    // Handle methods without tags
+                    const tags = method.tags?.length ? method?.tags : ['default']
+
+                    tags.forEach((tag) => {
+                      if (!groupedMethods[tag]) {
+                        groupedMethods[tag] = []
+                      }
+                      groupedMethods[tag].push(method)
+                    })
+
+                    return groupedMethods
+                  }, {})
+              ).map(([tag, methods]) => (
+                <div key={tag}>
+                  <h3>{tag}</h3>
+                  {methods?.map((method, methodIndex) => (
+                    <MethodsAccordion
+                      readOnly
+                      method={method}
+                      path={path.path}
+                      tags={values.tags}
+                    />
+                  ))}
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default LivePreview