@digi-frontend/dgate-api-documentation 1.0.21 → 1.0.26

package/src/layout/layout.tsx

@@ -1,4 +1,4 @@
-import { JSX, useEffect } from 'react'
+import { JSX, useEffect, useState } from 'react'
 import { Alert, Button } from 'digitinary-ui'
 import MethodsAccordion from '../components/MethodAccordion/MethodAccordion'
 import styles from './layout.module.css'
@@ -11,6 +11,7 @@ import { FormikProvider, useFormik } from 'formik'
 import { schemaValidation } from '../validator/form.scheme'
 import { TransformedOpenApi } from '@entities/transformedOpenApi'
 import { methodColorMapping } from '../constants/index'
+import CommonDialog from '../components/dialog'
 
 interface ILayoutProps {
   openApiJson?: OpenAPIFile
@@ -36,6 +37,8 @@ const Layout = ({ openApiJson, handleSave, setIsFormDirty }: ILayoutProps): JSX.
       validateForm(values)
     },
   })
+  const [isPublishDialogOpen, setIsPublishDialogOpen] = useState(false)
+  const [openMethodIndex, setOpenMethodIndex] = useState<number | null>(null)
 
   useEffect(() => {
     if (setIsFormDirty) {
@@ -45,10 +48,11 @@ const Layout = ({ openApiJson, handleSave, setIsFormDirty }: ILayoutProps): JSX.
 
   return (
     <div className={styles.docsLayout}>
-      <Alert className={styles.apiDocAlert} color="info">
-        Changes are saved and published for API information and each endpoint individually as you
-        update.
-      </Alert>
+      {formik.dirty && (
+        <Alert className={styles.apiDocAlert} color="warning" severity="warning">
+          There are changes you made may not be saved
+        </Alert>
+      )}
       <div className={styles.layoutContainer}>
         <div className={`${styles.editorSide} ${styles.docSide}`}>
           <SectionHead
@@ -63,7 +67,8 @@ const Layout = ({ openApiJson, handleSave, setIsFormDirty }: ILayoutProps): JSX.
                   type="submit"
                   variant="contained"
                   color="primary"
-                  onClick={formik.submitForm}
+                  onClick={() => setIsPublishDialogOpen(true)}
+                  disabled={!formik.isValid || formik.isSubmitting}
                 >
                   Save
                 </Button>
@@ -73,7 +78,7 @@ const Layout = ({ openApiJson, handleSave, setIsFormDirty }: ILayoutProps): JSX.
           <FormikProvider value={formik}>
             <InfoForm />
           </FormikProvider>
-          <SectionHead className={styles.editorSectionHead} text="API Methods" />
+          <SectionHead className={styles.editorSectionHead} text="Endpoints" />
           <FormikProvider value={formik}>
             {formik.values.paths.map((path, pathIndex) => (
               <>
@@ -90,6 +95,8 @@ const Layout = ({ openApiJson, handleSave, setIsFormDirty }: ILayoutProps): JSX.
                         const h = `paths[${pathIndex}].methods[${methodIndex}].${key}`
                         formik.setFieldValue(h, value)
                       }}
+                      isOpen={openMethodIndex === methodIndex}
+                      setIsOpen={(open) => setOpenMethodIndex(open ? methodIndex : null)}
                     />
                   ))}
               </>
@@ -104,6 +111,37 @@ const Layout = ({ openApiJson, handleSave, setIsFormDirty }: ILayoutProps): JSX.
           )}
         </div>
       </div>
+      <CommonDialog
+        status="warning"
+        content={
+          <p
+            style={{
+              textAlign: 'center',
+              fontWeight: 400,
+              fontSize: '1rem',
+              lineHeight: '1.4375rem',
+            }}
+          >
+            Are you sure you want to Publish your changes?
+          </p>
+        }
+        onSubmit={{
+          onClick: () => {
+            formik.handleSubmit()
+            setIsPublishDialogOpen(false)
+          },
+          text: 'Publish',
+          color: 'warning',
+          fullWidth: true,
+        }}
+        onCancel={{
+          text: 'Cancel',
+          color: 'normal',
+          fullWidth: true,
+        }}
+        onClose={() => setIsPublishDialogOpen(false)}
+        open={isPublishDialogOpen}
+      />
     </div>
   )
 }

package/src/validator/form.scheme.ts

@@ -1,11 +1,11 @@
-import * as yup from "yup";
+import * as yup from 'yup'
 export const schemaValidation = yup.object({
   openapi: yup.string().required(),
   info: yup
     .object({
-      title: yup.string().required("API Name is required."),
-      description: yup.string().optional(),
-      version: yup.string().required("API Version is required"),
+      title: yup.string().trim().required('API Name is required.'),
+      description: yup.string().trim().required(),
+      version: yup.string().required('API Version is required'),
     })
     .required(),
   servers: yup
@@ -32,8 +32,8 @@ export const schemaValidation = yup.object({
                         yup.object(
                           props
                             ? Object.keys(props).reduce((acc, propKey) => {
-                                acc[propKey] = yup.mixed();
-                                return acc;
+                                acc[propKey] = yup.mixed()
+                                return acc
                               }, {})
                             : {}
                         )
@@ -42,8 +42,8 @@ export const schemaValidation = yup.object({
                     items: yup.mixed().optional(),
                     enum: yup.array(yup.string()).optional(),
                     required: yup.array(yup.string()).optional(),
-                  });
-                  return acc;
+                  })
+                  return acc
                 }, {})
               : {}
           )
@@ -67,4 +67,4 @@ export const schemaValidation = yup.object({
       })
     )
     .optional(),
-});
+})