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

package/src/components/LivePreview/LivePreview.module.scss

@@ -1,181 +1,5 @@
-.livePreviewContainer {
-  .titleContainer {
-    margin-top: 1.875rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    max-width: 100%;
-    gap: 1.25rem;
-
-    p.apiName {
-      font-size: 40px;
-      line-height: 30px;
-      font-weight: 500;
-      word-wrap: break-word;
-      overflow-wrap: break-word;
-      word-break: break-all;
-    }
-
-    .livePreviewChip {
-      background-color: #ebecf2;
-      color: #12131a;
-    }
-  }
-
-  .description_preview {
-    word-break: break-all;
-  }
-}
-
-.requestAccordion,
-.responseAccordion {
-  background-color: #f4c5c5;
-  border: 1px solid #da3f3f;
-  border-radius: 0.3125rem !important;
-  box-shadow: none !important;
-  margin-bottom: 0 !important;
-  cursor: default !important;
-  margin-top: 0.625rem;
-
-  :global(.accordion-header) {
-    background-color: #f4c5c5;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 0 !important;
-    padding: 0 !important;
-    height: 4.0625rem !important;
-    border-radius: 0.3125rem !important;
-  }
-
-  :global(.accordion-details.expanded) {
-    border-top: 1px solid #000 !important;
-    padding: 1.25rem !important;
-    padding: 0 !important;
-
-    background-color: #f4c5c5;
-    :global(.jsonField) {
-      div {
-        textarea {
-          border-top-right-radius: 0;
-          border-top-left-radius: 0;
-          height: 10rem;
-        }
-      }
-    }
-  }
-
-  :global(.accordion-details.expanded .textArea .containerTextArea) {
-    display: flex;
-  }
-
-  :global(.accordion-details.expanded .textArea .containerTextArea .inputField) {
-    height: 100%;
-    padding: 1.25rem;
-  }
-
-  .accordionContent {
-    max-width: 100%;
-    padding-left: 0.625rem;
-    padding-right: 0.625rem;
-    padding-top: 0.9375rem;
-
-    ol {
-      padding-left: 1.7rem;
-      li {
-        max-width: 100%;
-        // white-space: normal;
-        word-break: break-all;
-        // overflow-wrap: break-word;
-      }
-    }
-  }
-
-  .requestAccordionSummary,
-  .responseAccordionSummary {
-    width: 100%;
-    cursor: pointer;
-    display: flex;
-    justify-content: space-between;
-    font-weight: 700;
-    font-size: 1.125rem;
-    line-height: 1.5rem;
-    display: flex;
-    align-items: center;
-    // cursor: default !important;
-    margin-inline: 0.625rem 1.25rem;
-  }
-
-  .responseAccordionSummary_title,
-  .requestAccordionSummary_title,
-  .responseAccordionSummary {
-    display: flex;
-    align-items: center;
-
-    svg {
-      transition: rotate 0.2s ease-in-out;
-    }
-
-    .expanded {
-      rotate: 180deg;
-    }
-  }
-
-  :global(.accordion-details) {
-    :global(.textArea .inputField) {
-      padding: 0;
-      border: none;
-    }
-  }
-
-  :global(.accordion-header .iconContainer .dropdownIcon) {
-    display: none !important;
-  }
-
-  :global(.accordion-header) {
-    cursor: default;
-  }
-}
-
-.responseAccordion {
-  .responseAccordionSummary {
-    display: flex;
-    align-items: center;
-
-    :global(.multiSelectGroup .optionsList) {
-      width: 8rem !important;
-      min-width: 8rem !important;
-    }
-
-    :global(.multiSelectGroup) {
-      width: 8rem;
-      margin-left: auto;
-
-      :global(.selectDisplay) {
-        height: 2.0625rem !important;
-        min-height: 2.0625rem !important;
-        padding: 0;
-        padding-left: 0.625rem;
-      }
-    }
-  }
-
-  :global(.accordion-header) {
-    overflow: visible;
-    cursor: default;
-  }
-
-  .statusCodeOptionContainer {
-    display: grid;
-    grid-template-columns: min-content min-content;
-    align-items: center;
-    gap: 0.625rem;
-
-    .statusCodeOptionCircle {
-      width: 0.625rem;
-      aspect-ratio: 1 / 1;
-      border-radius: 100%;
-    }
-  }
-}
+p.apiName {
+    font-size: 40px;
+    line-height: 30px;
+    font-weight: 500;
+}

package/src/components/LivePreview/LivePreview.tsx

@@ -1,224 +1,80 @@
-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 { Accordion, Button, Chip } from 'digitinary-ui'
-import Tooltip from '../../components/Tooltip/Tooltip'
-import SVGLoader from '../../components/SVGLoader/SVGLoader'
-import { DownArrowIcon } from '../../assets/icons'
-
-interface LivePreviewProps {
-  transformedData?: TransformedOpenApi
-  openApiErrors?: any[]
-}
-
-const LivePreview: React.FC<LivePreviewProps> = ({ transformedData, openApiErrors }) => {
-  const [tableRecords, setTableRecords] = useState()
-  const [tooltipRefs, setTooltipRefs] = useState<{ [key: number]: any }>({})
-  const [tableData, setTableData] = useState([])
-  const [externalTooltipRefs, setExternalTooltipRefs] = useState<{ [key: number]: any }>({})
-  const [errorExpanded, setErrorExpanded] = useState(openApiErrors.length > 0)
-  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?.url && !item?.externalDocs?.description
-                ? item?.externalDocs?.url
-                : null}
-              {item?.externalDocs?.description
-                ? item?.externalDocs?.description?.substring(0, 12)
-                : !item?.externalDocs?.url
-                ? '-'
-                : null}
-              {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>
-      ),
-    }))
-  }
-
-  const securityScheme = !!securityKey
-    ? securitySchemes[securityKey].scheme || securitySchemes[securityKey].type
-    : '-'
-
-  return (
-    <div className={styles.livePreviewContainer}>
-      {!!openApiErrors && openApiErrors.length > 0 && (
-        <div className="row">
-          <div className="col-md-12">
-            <Accordion
-              expanded={errorExpanded}
-              onChange={() => null}
-              className={styles.responseAccordion}
-              summary={
-                <span
-                  className={styles.responseAccordionSummary}
-                  onClick={() => setErrorExpanded((prev) => !errorExpanded)}
-                >
-                  <div className={styles.responseAccordionSummary_title}>Errors</div>
-                  <SVGLoader
-                    className={errorExpanded ? styles.expanded : ''}
-                    src={DownArrowIcon}
-                    width="2rem"
-                    height="2rem"
-                  />
-                </span>
-              }
-              children={
-                <div className={styles.accordionContent}>
-                  <span>
-                    Failed to update the OpenAPI documentation. Please resolve the following issues:
-                  </span>
-                  <br />
-                  <ol>
-                    {openApiErrors.map((errItem) => (
-                      <li key={errItem}>{errItem}</li>
-                    ))}
-                  </ol>
-                </div>
-              }
-            />
-          </div>
-        </div>
-      )}
-      <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={'version'} label={'Version: '} value={info?.version || '-'} />
-          <SimpleLabelValue
-            key={'description'}
-            label={'Description: '}
-            className={styles.description_preview}
-            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 '} />
-          {Object.entries(
-            values.paths
-              .flatMap((path) =>
-                path.methods.map((method) => ({
-                  ...method,
-                  path: path.path,
-                  tags: method.tags?.length ? method.tags : ['default'],
-                }))
-              )
-              .reduce((acc, method) => {
-                method.tags.forEach((tag) => {
-                  if (!acc[tag]) acc[tag] = []
-                  acc[tag].push(method)
-                })
-                return acc
-              }, {} as Record<string, any[]>)
-          ).map(([tag, methods]) => (
-            <div className={styles.methodsContainer} key={tag}>
-              <h3>{tag}</h3>
-              {methods
-                .sort((a, b) => methodColorMapping[a.type].order - methodColorMapping[b.type].order)
-                .map((method) => (
-                  <MethodsAccordion
-                    key={`${method.path}_${method.type}`}
-                    readOnly
-                    method={method}
-                    path={method.path}
-                    tags={values.tags}
-                  />
-                ))}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default LivePreview
+import React 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'
+
+interface LivePreviewProps {
+  transformedData?: TransformedOpenApi
+}
+
+const LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {
+  const { values, setFieldValue } = useFormikContext<TransformedOpenApi>()
+  const { info, components, tags, paths } = values
+  const { securitySchemes } = components
+  const securityKey =
+    securitySchemes && typeof securitySchemes == 'object' && Object.keys(securitySchemes).length
+      ? Object.keys(securitySchemes)[0]
+      : null
+  return (
+    <div>
+      <div className="row">
+        <div className="col-md-12">
+          <p className={styles.apiName}>{info?.title}</p>
+          <SimpleLabelValue
+            key={'APIAuthenticationType'}
+            label={'API authentication type: '}
+            value={!!securityKey ? securitySchemes[securityKey].scheme : '-'}
+          />
+          <SimpleLabelValue key={'version'} label={'Version: '} value={info?.version || '-'} />
+          <SimpleLabelValue
+            key={'description'}
+            label={'Description: '}
+            value={info?.description || '-'}
+          />
+
+          <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,
+                  }))}
+                />
+              ) : (
+                '-'
+              )
+            }
+          />
+
+          <SimpleLabelValue key={'endpoints'} label={'Endpoints '} />
+          {values.paths.map((path, pathIndex) => (
+            <>
+              {path.methods.map((method, methodIndex) => (
+                <MethodsAccordion
+                  readOnly
+                  method={method}
+                  path={path.path}
+                  setFieldValue={(key, value) => {
+                    const h = `paths[${pathIndex}].methods[${methodIndex}].${key}`
+                    setFieldValue(h, value)
+                  }}
+                  handleSave={()=>null}
+                />
+              ))}
+            </>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default LivePreview