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

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

@@ -12,9 +12,4 @@
   .apiInfoForm_tagsChips {
     margin-top: -1.25rem;
   }
-
-  .apiInfoForm_submitBtn {
-    height: 1.25rem !important;
-    width: 4.25rem;
-  }
 }

package/src/components/InfoForm/InfoForm.tsx

@@ -1,19 +1,17 @@
 import { useEffect, useState } from 'react'
 // @ts-ignore
 import { useFormikContext } from 'formik'
-import * as Yup from 'yup'
-import { Button, Input, SelectGroup, TextArea } from 'digitinary-ui'
+import { Input, SelectGroup, TextArea } from 'digitinary-ui'
 import styles from './InfoForm.module.scss'
 import Chips from '../../components/Chips/Chips'
-import { CheckMarkSquare } from '../../assets/icons'
-import SVGLoader from '../../components/SVGLoader/SVGLoader'
 import regex from '../../constants/regex'
 import { TransformedOpenApi } from '../../types/transformedOpenApi'
 
 const InfoForm = () => {
   const [tagsList, setTagsList] = useState([])
   const [authType, setAuthType] = useState('')
-  const { values, setFieldValue, errors, submitForm } = useFormikContext<TransformedOpenApi>()
+  const { values, setFieldValue, errors } = useFormikContext<TransformedOpenApi>()
+
   useEffect(() => {
     if (values && values.tags) {
       setTagsList(values.tags)
@@ -119,18 +117,6 @@ const InfoForm = () => {
           }
         />
       )}
-      <Button
-        className={styles.apiInfoForm_submitBtn}
-        size="small"
-        fullWidth={false}
-        onClick={submitForm}
-        type="submit"
-        variant="link"
-        color="success"
-        startIcon={<SVGLoader src={CheckMarkSquare} width="1.5rem" height="1.5rem" />}
-      >
-        Save
-      </Button>
     </form>
   )
 }

package/src/components/JsonInput/JsonInput.tsx

@@ -0,0 +1,130 @@
+import React, { useEffect, useState } from 'react'
+import yaml from 'js-yaml'
+import styles from './style.module.scss'
+
+const JsonInput = ({
+  placeholder,
+  label,
+  value,
+  onValidation,
+  onChange,
+  dataId,
+  className = '',
+  errorMessage,
+  acceptType = 'BOTH',
+  fieldIsDisabled,
+}) => {
+  const [isValid, setIsValid] = useState()
+  const [disabledBeautify, setDisabledBeautify] = useState(true)
+
+  const handlePrettify = (e) => {
+    if (value === '') return
+    e.preventDefault()
+    try {
+      let prettifiedData
+      if ((acceptType === 'BOTH' || acceptType === 'JSON') && isValidJson(value)) {
+        // If it's valid JSON, prettify JSON
+        prettifiedData = JSON.stringify(JSON.parse(value), null, 2)
+      } else if (acceptType === 'BOTH' || acceptType === 'YML') {
+        // If it's not valid JSON, prettify YAML
+        prettifiedData = yaml.dump(yaml.load(value), { indent: 0 })
+      }
+      onChange(prettifiedData)
+      setIsValid(true) // Reset validity status
+    } catch (error) {
+      console.error(error)
+      setIsValid(false)
+    }
+  }
+
+  // Function to check if input is valid JSON
+  const isValidJson = (str) => {
+    try {
+      JSON.parse(str)
+      return true
+    } catch (error) {
+      return false
+    }
+  }
+
+  const checkIsValid = () => {
+    if (acceptType === 'BOTH' || acceptType === 'JSON') {
+      return isValidJson(value)
+    } else if (acceptType === 'BOTH' || acceptType === 'YML') {
+      try {
+        // Try parsing as YAML
+        yaml.load(value)
+        return true
+      } catch (error) {
+        console.error(error)
+        return false
+      }
+    }
+  }
+
+  useEffect(() => {
+    try {
+      handlePrettify(value)
+    } catch {}
+  }, [])
+
+  return (
+    <div className={`${styles['json-editor-container']} ${className}`}>
+      {label && <p className={`${styles['json-editor-label']}`}>{label}</p>}
+      <div
+        className={`${styles['json-editor']} ${
+          value !== '' && isValid === false ? styles.invalid : ''
+        }`}
+      >
+        <textarea
+          data-id={dataId}
+          value={value}
+          onChange={(e) => {
+            if (fieldIsDisabled) return
+            setIsValid(undefined)
+            setDisabledBeautify(true)
+            onChange(e.target.value)
+          }}
+          onPaste={(e) => {
+            if (fieldIsDisabled) return
+            setIsValid(undefined)
+            setDisabledBeautify(true)
+            onChange(e.target.value)
+          }}
+          min="1"
+          placeholder={placeholder}
+        />
+        <div className={`${styles['actions-container']}`}>
+          <button
+            type="button"
+            className={styles.validate}
+            onClick={() => {
+              const valid = checkIsValid()
+              setIsValid(valid)
+              onValidation(valid)
+              setDisabledBeautify(!checkIsValid())
+            }}
+            data-id={`${dataId}-VALIDATE-BUTTON`}
+            disabled={value === ''}
+          >
+            Validate
+          </button>
+          <button
+            type="button"
+            disabled={value === '' || disabledBeautify}
+            data-id={`${dataId}-BEAUTIFY-BUTTON`}
+            className={styles.beautify}
+            onClick={handlePrettify}
+          >
+            Beautify
+          </button>
+        </div>
+      </div>
+      {(errorMessage || (value !== '' && isValid === false)) && (
+        <p className={styles['error-message']}>{errorMessage || 'Invalid JSON or YAML format'}</p>
+      )}
+    </div>
+  )
+}
+
+export default JsonInput

package/src/components/JsonInput/style.module.scss

@@ -0,0 +1,123 @@
+.json-editor-container {
+  .json-editor-label {
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.25rem;
+    margin-bottom: 0.3125rem;
+  }
+
+  .json-editor {
+    display: flex;
+    flex-direction: column;
+    background-color: #142452;
+    width: 100%;
+    border-radius: 0.3125rem;
+    margin-bottom: -0.5rem;
+    outline: 1px solid transparent;
+    position: relative;
+
+    .actions-container {
+      width: 100%;
+      height: 5rem;
+      padding: 1.25rem;
+      border-radius: 0 0 0.3125rem 0.3125rem;
+      background: #101e47;
+      display: flex;
+      flex-direction: row;
+      gap: 1.25rem;
+      align-items: center;
+
+      .validate {
+        color: #fff;
+        text-align: center;
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 1.25rem;
+        width: 8.75rem;
+        padding: 0.625rem 2.25rem;
+        background-color: rgba(240, 248, 255, 0);
+        border-radius: 0.3125rem;
+        border: 0.0625rem solid #4d75d8;
+        cursor: pointer;
+
+        &:disabled {
+          color: #babdcc;
+          border-color: #a2a5b6;
+        }
+      }
+
+      .beautify {
+        color: #fff;
+        text-align: center;
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 1.25rem;
+        width: 8.75rem;
+        padding: 0.625rem 2.25rem;
+        background-color: rgba(240, 248, 255, 0);
+        border-radius: 0.3125rem;
+        border: 1px solid #babdcc;
+        cursor: pointer;
+
+        &:disabled {
+          color: #a2a5b6;
+          border-color: #a2a5b6;
+        }
+      }
+    }
+
+    textarea {
+      width: 100%;
+      padding: 1.25rem;
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 1.25rem;
+      color: white;
+      height: 25rem;
+      background-color: #142452;
+      border: none;
+      resize: none;
+      border-radius: 0.3125rem;
+
+      &:focus,
+      &:focus-within,
+      &:focus-visible &:active {
+        outline: none;
+        border: none;
+      }
+
+      &::-webkit-scrollbar {
+        width: 0.5rem;
+      }
+
+      &::-webkit-scrollbar-track {
+        background-color: #828699;
+        border: none;
+        border-color: transparent;
+        border-top-right-radius: 0.25rem;
+        border-top-left-radius: 0;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: #d8dae5;
+        border: none;
+        border-color: transparent;
+        border-radius: 0;
+      }
+    }
+
+    &.invalid {
+      outline: 1px solid #ce2828 !important;
+    }
+  }
+
+  .error-message {
+    color: #ce2828;
+    font-size: 0.75rem;
+    line-height: 1.25rem;
+    margin-top: 0.625rem;
+  }
+}

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

@@ -187,6 +187,16 @@
         border-top: 1px solid #babdcc !important;
         padding: 1.25rem !important;
         padding: 0 !important;
+
+        :global(.jsonField) {
+          div {
+            textarea {
+              border-top-right-radius: 0;
+              border-top-left-radius: 0;
+              height: 10rem;
+            }
+          }
+        }
       }
 
       :global(.details.show .textArea .containerTextArea) {
@@ -280,10 +290,5 @@
         }
       }
     }
-
-    .methodForm_submitBtn {
-      height: 1.25rem !important;
-      width: 4.25rem;
-    }
   }
 }

package/src/components/MethodAccordion/MethodAccordion.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { Accordion, Button, Input, SelectGroup, Switch, TextArea } from 'digitinary-ui'
+import { Accordion, Button, SelectGroup, Switch, TextArea } from 'digitinary-ui'
 import SVGLoader from '../../components/SVGLoader/SVGLoader'
 import {
   CheckMarkSquare,
@@ -11,11 +11,12 @@ import {
 import { httpStatusCodes, methodColorMapping, paramsTableHeaders } from '../../constants/index'
 import Tooltip from '../../components/Tooltip/Tooltip'
 import { TransformedMethod } from '../../types/layout.type'
-import styles from './MethodAccordion.module.scss'
 import SimpleLabelValue from '../../components/SimpleLabelValue'
 import { capitalize, handleStatusColor } from '../../helpers/methodAccordion.helper'
 import ParamterTable from '../table/table'
 import CommonDialog from '../../components/dialog'
+import JsonInput from '../../components/JsonInput/JsonInput'
+import styles from './MethodAccordion.module.scss'
 
 const httpStatusCodeOptions = httpStatusCodes.map((code) => ({
   label: (
@@ -35,13 +36,11 @@ const MethodsAccordion = ({
   path,
   setFieldValue,
   readOnly,
-  handleSave,
 }: {
   method: TransformedMethod
   path: string
   setFieldValue: (key: string, value: string) => void
   readOnly?: boolean
-  handleSave: (data: any) => unknown
 }) => {
   const [isExpanded, setIsExpanded] = useState({
     request: false,
@@ -54,6 +53,9 @@ const MethodsAccordion = ({
   const [openDeleteDialog, setOpenDeleteDialog] = useState(false)
   const [selectedParamIndex, setSelectedParamIndex] = useState<number | null>(null)
   const [selectedParamName, setSelectedParamName] = useState<string | null>(null)
+  const [selectedStatusCode, setSelectedStatusCode] = useState(httpStatusCodeOptions[4])
+  const currentResponse =
+    method.responses.find((res) => Number(res.code) === selectedStatusCode.value) || '{}'
 
   const onTableChange = (key, value, index) => {
     const newTableData = tableData.map((item, tIndex) => {
@@ -157,10 +159,7 @@ const MethodsAccordion = ({
               )}
             </Tooltip>
 
-            {
-              !readOnly&&
-              <div className={styles.paramDescContainer_separator}></div>
-            }
+            {!readOnly && <div className={styles.paramDescContainer_separator}></div>}
 
             {!readOnly && (
               <Button
@@ -299,19 +298,15 @@ const MethodsAccordion = ({
                   </span>
                 }
                 children={
-                  <TextArea
-                    disabled={readOnly}
-                    value={(() => {
-                      const requestBody = method?.requestBody?.at(0)?.content?.schema?.properties
-
-                      if (typeof requestBody !== 'string') {
-                        return JSON.stringify(requestBody)
-                      } else return requestBody
-                    })()}
-                    onChange={(value) => {
-                      setFieldValue('requestBody[0].content.schema.properties', value)
+                  <JsonInput
+                    className={'jsonField'}
+                    placeholder="Enter your request body as a JSON object...."
+                    fieldIsDisabled={readOnly}
+                    value={method?.requestBody?.content?.schema?.properties || '{}'}
+                    onChange={(value: string) => {
+                      setFieldValue('requestBody.content.schema.properties', value)
                     }}
-                    placeholder="Enter your request body as a JSON object..."
+                    onValidation={() => null}
                   />
                 }
               />
@@ -345,51 +340,55 @@ const MethodsAccordion = ({
                     withSearch={false}
                     isMultiple={false}
                     placeholder="200"
-                    disabled={true}
                     options={[
                       {
                         list: httpStatusCodeOptions,
                       },
                     ]}
-                    value={httpStatusCodeOptions[4]}
+                    value={selectedStatusCode}
+                    onChange={(value) => {
+                      setSelectedStatusCode(value)
+                    }}
                   />
                 </span>
               }
               children={
-                <TextArea
-                  disabled={readOnly}
-                  value={
-                    typeof method.responses?.at(0)?.content.schema.properties !== 'string'
-                      ? JSON.stringify(method.responses?.at(0)?.content.schema.properties)
-                      : method.responses?.at(0)?.content.schema.properties
-                  }
+                <JsonInput
+                  className={'jsonField'}
+                  placeholder="Enter your response as a JSON object..."
+                  fieldIsDisabled={readOnly}
+                  value={currentResponse?.content?.schema?.properties || '{}'}
                   onChange={(value) => {
-                    let parsedValue = { content: '' }
-                    try {
-                      parsedValue = JSON.parse(value)
-                    } catch (err) {
-                      console.log(err)
+                    const currentResIndex = method.responses.findIndex(
+                      (res) => res.code === currentResponse.code
+                    )
+
+                    if (currentResIndex !== -1) {
+                      setFieldValue(
+                        `responses[${currentResIndex}].content.schema.properties`,
+                        value
+                      )
+                    } else {
+                      const clonedResponses = structuredClone(method.responses)
+
+                      clonedResponses.push({
+                        code: selectedStatusCode.value.toString(),
+                        content: {
+                          contentType: 'application/json',
+                          schema: {
+                            type: 'object',
+                            properties: value,
+                          },
+                        },
+                      })
+
+                      setFieldValue('responses', clonedResponses)
                     }
-                    setFieldValue('responses[0].content.schema.properties', parsedValue as any)
                   }}
-                  placeholder="Enter your response as a JSON object..."
+                  onValidation={() => null}
                 />
               }
             />
-            {!readOnly && (
-              <Button
-                className={styles.methodForm_submitBtn}
-                size="small"
-                fullWidth={false}
-                type="submit"
-                variant="link"
-                color="success"
-                onClick={handleSave}
-                startIcon={<SVGLoader src={CheckMarkSquare} width="1.5rem" height="1.5rem" />}
-              >
-                Save
-              </Button>
-            )}
           </div>
         }
       />

package/src/constants/index.ts

@@ -2,34 +2,42 @@ export const methodColorMapping = {
   get: {
     label: 'Get',
     color: '#3A6CD1',
+    order: 1,
   },
   post: {
     label: 'Post',
     color: '#3AAA35',
+    order: 2,
   },
   put: {
     label: 'Put',
     color: '#FAAD14',
+    order: 3,
   },
   delete: {
     label: 'Delete',
     color: '#DA3F3F',
+    order: 4,
   },
-  PATCH: {
+  patch: {
     label: 'Patch',
-    color: '#FAAD14',
+    color: '#58E2C2',
+    order: 5,
   },
-  OPTIONS: {
+  options: {
     label: 'Options',
-    color: '#FAAD14',
+    color: '#495D97',
+    order: 6,
   },
-  TRACE: {
+  trace: {
     label: 'Trace',
-    color: '#FAAD14',
+    color: '#FFA28F',
+    order: 7,
   },
-  HEAD: {
+  head: {
     label: 'Head',
-    color: '#FAAD14',
+    color: '#9461C9',
+    order: 8,
   },
 }