@digi-frontend/dgate-api-documentation 1.0.16 → 1.0.20

package/dist/types/components/MethodAccordion/MethodAccordion.d.ts

@@ -1,8 +1,10 @@
 import { TransformedMethod } from '../../types/layout.type';
-declare const MethodsAccordion: ({ method, path, setFieldValue, readOnly, }: {
+import { Tags } from '@entities/openApi';
+declare const MethodsAccordion: ({ method, path, setFieldValue, readOnly, tags, }: {
     method: TransformedMethod;
     path: string;
-    setFieldValue?: (key: string, value: string) => void;
+    setFieldValue?: (key: string, value: string | string[]) => void;
     readOnly?: boolean;
+    tags: Tags[];
 }) => import("react/jsx-runtime").JSX.Element;
 export default MethodsAccordion;

package/dist/types/constants/index.d.ts

@@ -40,12 +40,17 @@ export declare const methodColorMapping: {
         order: number;
     };
 };
-export declare const tagsTableHeaders: {
+export declare const tagsTableHeaders: ({
     id: string;
     label: string;
     sortable: boolean;
     classes: string;
-}[];
+} | {
+    id: string;
+    label: string;
+    sortable: boolean;
+    classes?: undefined;
+})[];
 export declare const paramsTableHeaders: ({
     id: string;
     label: string;

package/package.json

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

package/src/components/InfoForm/InfoForm.module.scss

@@ -55,6 +55,19 @@
             }
           }
         }
+
+        &:not(:global(.disabled)):global(.success) {
+          :global(.endBtnIcon) {
+            margin-block: auto;
+
+            svg {
+              width: 1.125rem;
+              path {
+                fill: #3aaa35;
+              }
+            }
+          }
+        }
       }
     }
 

package/src/components/InfoForm/InfoForm.tsx

@@ -36,12 +36,12 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
   }, [])
 
   useEffect(() => {
-    setTableRecords(generateTableData(tableData))
+    setTableRecords(generateTableRecords(tableData))
   }, [tableData])
 
   useEffect(() => {
     if (values.tags && values.tags.length) {
-      setTableRecords(generateTableData(values.tags))
+      setTableRecords(generateTableRecords(values.tags))
       setTableData(values.tags)
     }
   }, [values.tags])
@@ -77,7 +77,7 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
 
   const saveNewRow = (tag) => {
     setTableData([...tableData, tag])
-    const oldTags = values.tags || [];
+    const oldTags = values.tags || []
     setFieldValue(`tags`, [...oldTags, tag])
   }
 
@@ -88,7 +88,7 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
     setOpenDeleteDialog(true)
   }
 
-  const generateTableData = (items) => {
+  const generateTableRecords = (items) => {
     return items.map((item, index) => ({
       id: index,
       tagName: item.name,
@@ -131,10 +131,19 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
               </div>
             }
           >
-            {readOnly ? (
-              <Button className={styles.editDescBtn} variant="link" color="action">
-                {item.description ? item.description.substring(0, 12) : '-'}
-                {item.description && item.description.length > 12 ? '...' : ''}
+            {readOnly || values.tags[index].description ? (
+              <Button
+                className={styles.editDescBtn}
+                variant="link"
+                color="action"
+                endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
+              >
+                {values.tags[index].description
+                  ? values.tags[index].description.substring(0, 12)
+                  : '-'}
+                {values.tags[index].description && values.tags[index].description.length > 12
+                  ? '...'
+                  : ''}
               </Button>
             ) : (
               <Button
@@ -143,7 +152,9 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
                 color="action"
                 endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
               >
-                {readOnly || item.description ? 'View Description' : 'Add Description'}
+                {readOnly || values.tags[index].description
+                  ? 'View Description'
+                  : 'Add Description'}
               </Button>
             )}
           </Tooltip>
@@ -210,22 +221,22 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
               </div>
             }
           >
-            {readOnly ? (
+            {readOnly || values.tags[index].externalDocs?.description ? (
               <Button
                 className={styles.editDescBtn}
                 variant="link"
                 color="action"
+                endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
                 onClick={() => {
-                  const a = document.createElement('a')
-                  a.href = item.externalDocs?.url
-                  a.target="_blank"
-                  a.click()
+                  setDescription(item.externalDocs?.description)
+                  setURL(item.externalDocs?.url)
                 }}
               >
-                {item?.externalDocs?.description
-                  ? item?.externalDocs?.description?.substring(0, 12)
+                {values.tags[index].externalDocs?.description
+                  ? values.tags[index].externalDocs?.description?.substring(0, 12)
                   : '-'}
-                {item?.externalDocs?.description && item?.externalDocs?.description?.length > 12
+                {values.tags[index].externalDocs?.description &&
+                values.tags[index].externalDocs?.description?.length > 12
                   ? '...'
                   : ''}
               </Button>

package/src/components/LivePreview/LivePreview.tsx

@@ -1,15 +1,12 @@
 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, TextArea } from 'digitinary-ui'
-import Tooltip from '../../components/Tooltip/Tooltip'
-import { DeleteIcon, deleteOutlinedIcon, EditIcon } from '../../assets/icons'
+import { Button } from 'digitinary-ui'
 
 interface LivePreviewProps {
   transformedData?: TransformedOpenApi
@@ -69,8 +66,12 @@ const LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {
             </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 ? '...' : ''}
+              {item.externalDocs?.description
+                ? item.externalDocs?.description.substring(0, 12)
+                : '-'}
+              {item.externalDocs?.description && item.externalDocs?.description.length > 12
+                ? '...'
+                : ''}
             </Button>
           )}
 
@@ -120,12 +121,37 @@ const LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {
 
           <SimpleLabelValue key={'endpoints'} label={'Endpoints '} />
           {values.paths.map((path) => (
-            <div className={styles.methodsContainer}>
-              {path.methods
+            <div className={styles.methodsContainer} key={path.path}>
+              {Object.entries(
+                path.methods
                 .sort((a, b) => methodColorMapping[a.type].order + methodColorMapping[b.type].order)
-                .map((method, methodIndex) => (
-                  <MethodsAccordion readOnly method={method} path={path.path} />
-                ))}
+                .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}
+                      handleSave={() => null}
+                    />
+                  ))}
+                </div>
+              ))}
             </div>
           ))}
         </div>

package/src/components/MethodAccordion/MethodAccordion.module.scss

@@ -134,6 +134,19 @@
                 }
               }
             }
+
+            &:not(:global(.disabled)):global(.success) {
+              :global(.endBtnIcon) {
+                margin-block: auto;
+
+                svg {
+                  width: 1.125rem;
+                  path {
+                    fill: #3aaa35;
+                  }
+                }
+              }
+            }
           }
         }
       }

package/src/components/MethodAccordion/MethodAccordion.tsx

@@ -1,13 +1,7 @@
-import React, { useEffect, useState } from 'react'
-import { Accordion, Button, SelectGroup, Switch, TextArea } from 'digitinary-ui'
+import { useEffect, useState } from 'react'
+import { Accordion, Button, SelectGroup, SelectGroupV2, Switch, TextArea } from 'digitinary-ui'
 import SVGLoader from '../../components/SVGLoader/SVGLoader'
-import {
-  CheckMarkSquare,
-  DeleteIcon,
-  DownArrowIcon,
-  EditIcon,
-  deleteOutlinedIcon,
-} from '../../assets/icons'
+import { DeleteIcon, DownArrowIcon, EditIcon, deleteOutlinedIcon } from '../../assets/icons'
 import { httpStatusCodes, methodColorMapping, paramsTableHeaders } from '../../constants/index'
 import Tooltip from '../../components/Tooltip/Tooltip'
 import { TransformedMethod } from '../../types/layout.type'
@@ -17,6 +11,7 @@ import ParamterTable from '../table/table'
 import CommonDialog from '../../components/dialog'
 import JsonInput from '../../components/JsonInput/JsonInput'
 import styles from './MethodAccordion.module.scss'
+import { Tags } from '@entities/openApi'
 
 const httpStatusCodeOptions = httpStatusCodes.map((code) => ({
   label: (
@@ -36,11 +31,13 @@ const MethodsAccordion = ({
   path,
   setFieldValue,
   readOnly,
+  tags,
 }: {
   method: TransformedMethod
   path: string
-  setFieldValue?: (key: string, value: string) => void
+  setFieldValue?: (key: string, value: string | string[]) => void
   readOnly?: boolean
+  tags: Tags[]
 }) => {
   const [isExpanded, setIsExpanded] = useState({
     request: false,
@@ -54,7 +51,7 @@ const MethodsAccordion = ({
   const [selectedParamIndex, setSelectedParamIndex] = useState<number | null>(null)
   const [selectedParamName, setSelectedParamName] = useState<string | null>(null)
   const [tableRecords, setTableRecords] = useState()
-
+  const [selectionTags, setSelectionTags] = useState([])
   const [selectedStatusCode, setSelectedStatusCode] = useState(httpStatusCodeOptions[4])
   const currentResponse =
     method.responses.find((res) => Number(res.code) === selectedStatusCode.value) || '{}'
@@ -139,15 +136,20 @@ const MethodsAccordion = ({
                 </div>
               }
             >
-              {readOnly ? (
+              {readOnly || method.parameters[index].description?.length > 0 ? (
                 <Button
                   className={styles.editDescBtn}
                   variant="link"
                   color="action"
-                  // endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
+                  endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
                 >
-                  {item.description ? item.description.substring(0, 12) : '-'}
-                  {item.description && item.description.length > 12 ? '...' : ''}
+                  {method.parameters[index].description
+                    ? method.parameters[index].description.substring(0, 12)
+                    : '-'}
+                  {method.parameters[index].description &&
+                  method.parameters[index].description.length > 12
+                    ? '...'
+                    : ''}
                 </Button>
               ) : (
                 <Button
@@ -213,6 +215,25 @@ const MethodsAccordion = ({
     }
   }, [method, path])
 
+  useEffect(() => {
+    // prepare tags selection list
+    if (!selectionTags.length) {
+      const convertedStringArray = (method?.tags || [])?.map((item) => ({
+        label: capitalize(item),
+        value: item,
+      }))
+      const mergedArray = [
+        ...convertedStringArray,
+        ...(tags || []).map((item) => ({ label: capitalize(item.name), value: item.name })),
+      ]
+
+      const filteredArray = mergedArray.filter(
+        (value, index, self) => index === self.findIndex((t) => t.value === value.value)
+      )
+      setSelectionTags(filteredArray)
+    }
+  }, [tags, method])
+
   return (
     <div>
       <Accordion
@@ -243,6 +264,30 @@ const MethodsAccordion = ({
         }
         children={
           <div className={styles.methodAccordionContent}>
+            <SelectGroup
+              className={styles.methodDesc}
+              disabled={readOnly}
+              placeholder="Select Tags"
+              label="Tags"
+              value={method.tags?.map((t) => ({
+                label: capitalize(t),
+                value: t,
+              }))}
+              onChange={(item) => {
+                setFieldValue(
+                  'tags',
+                  item.map((i) => i.value)
+                )
+              }}
+              options={[
+                {
+                  list: selectionTags,
+                },
+              ]}
+              isMultiple={true}
+              withSearch={false}
+              clearable={false}
+            />{' '}
             {!readOnly ? (
               <TextArea
                 className={styles.methodDesc}
@@ -269,7 +314,6 @@ const MethodsAccordion = ({
                 readOnly={readOnly}
               />
             </div>
-
             {method?.type !== 'get' && (
               <Accordion
                 expanded={isExpanded.request}
@@ -312,7 +356,6 @@ const MethodsAccordion = ({
                 }
               />
             )}
-
             <Accordion
               expanded={isExpanded.response}
               onChange={() => null}
@@ -341,7 +384,6 @@ const MethodsAccordion = ({
                     withSearch={false}
                     isMultiple={false}
                     clearable={false}
-                    disabled={readOnly}
                     placeholder="200"
                     options={[
                       {

package/src/components/table/style.scss

@@ -101,6 +101,17 @@
               text-overflow: ellipsis;
               overflow: visible !important;
             }
+
+            &:nth-child(2) {
+              .tableData {
+                .customBtn .btnContentWrapper .endBtnIcon svg path,
+                .customBtn :link .btnContentWrapper .endBtnIcon svg path,
+                .customBtn :visited .btnContentWrapper .endBtnIcon svg path {
+                  stroke-width: 0.1 !important;
+                  fill: #12131a !important;
+                }
+              }
+            }
           }
 
           &:hover {

package/src/components/table/table.tsx

@@ -21,6 +21,7 @@ const ParamterTable = ({
   const [text, setText] = useState('')
   const [tooltipRef, setTooltipRef] = useState(null)
   const { values, errors, setFieldValue, isValid, submitForm, resetForm } = useFormik({
+    validateOnMount: true,
     initialValues: {
       name: '',
       in: 'Query',

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

@@ -16,6 +16,7 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
   const [tooltipRef, setTooltipRef] = useState(null)
   const [externalTooltipRefs, setExternalTooltipRefs] = useState(null)
   const { values, errors, setFieldValue, isValid, submitForm, resetForm } = useFormik({
+    validateOnMount: true,
     initialValues: {
       name: '',
       description: '',
@@ -221,8 +222,7 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
                             variant="link"
                             color="action"
                             href={values.externalDocs?.url}
-                            target='_blank'
-                         
+                            target="_blank"
                           >
                             {values?.externalDocs?.description
                               ? values?.externalDocs?.description?.substring(0, 12)

package/src/constants/index.ts

@@ -52,13 +52,11 @@ export const tagsTableHeaders = [
     id: 'description',
     label: 'Description',
     sortable: false,
-    classes: 'requiredParam',
   },
   {
     id: 'externalDocs',
     label: 'External Docs',
     sortable: false,
-    classes: 'requiredParam',
   },
 ]
 

package/src/layout/layout.tsx

@@ -1,4 +1,4 @@
-import { JSX } from 'react'
+import { JSX, useEffect } from 'react'
 import { Alert, Button } from 'digitinary-ui'
 import MethodsAccordion from '../components/MethodAccordion/MethodAccordion'
 import styles from './layout.module.css'
@@ -24,10 +24,14 @@ const Layout = ({ openApiJson, handleSave }: ILayoutProps): JSX.Element => {
     initialValues: structuredClone(transformedOpenApi),
     validationSchema: schemaValidation,
     validateOnMount: true,
-    onSubmit: (values, { validateForm }) => {
+    onSubmit: (values, { validateForm, resetForm }) => {
       // Handle save logic
       const originalOpenApiForm = transformOpenApiObjectToOrigin(values)
       handleSave(originalOpenApiForm)
+      resetForm({
+        values: values, // You can reset it to the same values if you want
+      })
+
       validateForm(values)
     },
   })
@@ -72,6 +76,7 @@ const Layout = ({ openApiJson, handleSave }: ILayoutProps): JSX.Element => {
                   )
                   .map((method, methodIndex) => (
                     <MethodsAccordion
+                      tags={formik.values.tags}
                       method={method}
                       path={path.path}
                       setFieldValue={(key, value) => {