Merge pull request #596 from devtron-labs/feat/flat-gui-schema

feat: add ability to decouple gui schema path and corresponding update path using new updatePath keyword in schema

Author: Elessar1802

.eslintignore

@@ -40,7 +40,6 @@ src/Common/Modals/VisibleModal2.tsx
 src/Common/MultiSelectCustomization.tsx
 src/Common/PopupMenu.tsx
 src/Common/Progressing.tsx
-src/Common/RJSF/Form.tsx
 src/Common/RJSF/config.ts
 src/Common/RJSF/templates/ArrayFieldTemplate.tsx
 src/Common/RJSF/templates/BaseInput.tsx

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.8.1",
+    "version": "1.8.2",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -14,35 +14,94 @@
  * limitations under the License.
  */
 
-import { forwardRef } from 'react'
+import { forwardRef, useMemo } from 'react'
 import RJSF from '@rjsf/core'
 
+import { SCHEMA_07_VALIDATOR } from '@Shared/validations'
 import { templates, widgets } from './config'
 import { FormProps } from './types'
-import { translateString } from './utils'
-import { SCHEMA_07_VALIDATOR } from '@Shared/validations'
+import {
+    getFormStateFromFormData,
+    getSchemaPathToUpdatePathMap,
+    translateString,
+    updateFormDataFromFormState,
+} from './utils'
 import './rjsfForm.scss'
 
 // Need to use this way because the default import was not working as expected
-// The default import resolves to an object intead of a function
+// The default import resolves to an object instead of a function
 const Form = RJSF
 const validator = SCHEMA_07_VALIDATOR
 
-export const RJSFForm = forwardRef((props: FormProps, ref: FormProps['ref']) => (
-    <Form
-        noHtml5Validate
-        showErrorList={false}
-        autoComplete="off"
-        {...props}
-        className={`rjsf-form-template__container ${props.className || ''}`}
-        validator={validator}
-        templates={{
-            ...templates,
-            ...props.templates,
-        }}
-        formContext={props.formData}
-        widgets={{ ...widgets, ...props.widgets }}
-        translateString={translateString}
-        ref={ref}
-    />
-))
+export const RJSFForm = forwardRef((props: FormProps, ref: FormProps['ref']) => {
+    const { schemaPathToUpdatePathMap, isUpdatePathKeywordPresent } = useMemo(() => {
+        const map = getSchemaPathToUpdatePathMap(props.schema)
+
+        return {
+            schemaPathToUpdatePathMap: map,
+            isUpdatePathKeywordPresent: Object.entries(map).some(([path, updatePath]) => path !== updatePath),
+        }
+    }, [props.schema])
+
+    const formState = useMemo(() => {
+        if (!isUpdatePathKeywordPresent) {
+            return props.formData
+        }
+
+        return getFormStateFromFormData({ formData: props.formData ?? {}, schemaPathToUpdatePathMap })
+    }, [props.formData, schemaPathToUpdatePathMap, isUpdatePathKeywordPresent])
+
+    const handleOnChange: FormProps['onChange'] = (data) => {
+        if (!props.onChange) {
+            return
+        }
+
+        const updatedFormData = updateFormDataFromFormState({
+            formState: data.formData,
+            formData: props.formData,
+            schemaPathToUpdatePathMap,
+        })
+
+        props.onChange({ ...data, formData: updatedFormData })
+    }
+
+    const handleOnSubmit: FormProps['onSubmit'] = (data, event) => {
+        if (!props.onSubmit) {
+            return
+        }
+
+        const updatedFormData = updateFormDataFromFormState({
+            formState: data.formData,
+            formData: props.formData,
+            schemaPathToUpdatePathMap,
+        })
+
+        props.onSubmit?.({ ...data, formData: updatedFormData }, event)
+    }
+
+    return (
+        <Form
+            noHtml5Validate
+            showErrorList={false}
+            autoComplete="off"
+            {...props}
+            formData={formState}
+            {...(isUpdatePathKeywordPresent
+                ? {
+                      onChange: handleOnChange,
+                      onSubmit: handleOnSubmit,
+                  }
+                : {})}
+            className={`rjsf-form-template__container ${props.className || ''}`}
+            validator={validator}
+            templates={{
+                ...templates,
+                ...props.templates,
+            }}
+            formContext={formState}
+            widgets={{ ...widgets, ...props.widgets }}
+            translateString={translateString}
+            ref={ref}
+        />
+    )
+})

src/Common/RJSF/Form.tsx

@@ -16,5 +16,10 @@
 
 export { RJSFForm } from './Form'
 export type * from './types'
-export { getInferredTypeFromValueType, getRedirectionProps } from './utils'
+export {
+    getInferredTypeFromValueType,
+    getRedirectionProps,
+    getSchemaPathToUpdatePathMap,
+    conformPathToPointers,
+} from './utils'
 export { HIDE_SUBMIT_BUTTON_UI_SCHEMA } from './constants'

src/Common/RJSF/index.ts

@@ -61,14 +61,13 @@ const Field = ({
                 if (!hiddenSchema.path) {
                     throw new Error('Empty path property of hidden descriptor field')
                 }
-                if (!hiddenSchema.path.match(/^\/\w+(\/\w+)*$/g)) {
-                    throw new Error('Provided path is not a valid JSON pointer')
-                }
                 // NOTE: formContext is the formData passed to RJSFForm
                 const value = JSONPath({
                     path: convertJSONPointerToJSONPath(hiddenSchema.path),
                     json: formContext,
-                })?.[0]
+                    resultType: 'value',
+                    wrap: false,
+                })
                 const isHidden = value === undefined || deepEquals(hiddenSchema.value, value)
                 return !isHidden
             } catch {

src/Common/RJSF/templates/ObjectFieldTemplate.tsx

@@ -18,8 +18,6 @@ import { ComponentProps } from 'react'
 import RJSFForm from '@rjsf/core'
 import { StrictRJSFSchema } from '@rjsf/utils'
 
-export type FormProps = Omit<ComponentProps<typeof RJSFForm>, 'validator'>
-
 export interface MetaHiddenType {
     value: any
     path: string
@@ -34,8 +32,26 @@ export type HiddenType =
     | string
 
 export interface RJSFFormSchema extends StrictRJSFSchema {
-    properties: {
+    properties?: {
         [key: string]: RJSFFormSchema
     }
-    hidden: HiddenType
+    hidden?: HiddenType
+    updatePath?: string
 }
+
+export type FormProps = Omit<ComponentProps<typeof RJSFForm<any, RJSFFormSchema>>, 'validator'>
+
+export interface UpdateFormDataFromFormStateProps {
+    /**
+     * formData is data that is being passed from the user
+     */
+    formData: Record<string, unknown>
+    /**
+     * formState is the latest state of the form
+     */
+    formState: Record<string, unknown>
+    schemaPathToUpdatePathMap: Record<string, string>
+}
+
+export interface GetFormStateFromFormDataProps
+    extends Pick<UpdateFormDataFromFormStateProps, 'formData' | 'schemaPathToUpdatePathMap'> {}