fix: hidden prop matching pagebreak

Author: Elessar1802

package-lock.json

@@ -92,6 +92,7 @@
     "dependencies": {
         "ansi_up": "^5.2.1",
         "fast-json-patch": "^3.1.1",
+        "jsonpath-plus": "^9.0.0",
         "react-monaco-editor": "^0.54.0",
         "sass": "^1.69.7",
         "tslib": "^2.4.1"

package.json

@@ -15,6 +15,7 @@
  */
 
 import React, { SyntheticEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { JSONPath, JSONPathOptions } from 'jsonpath-plus'
 import { components } from 'react-select'
 import * as Sentry from '@sentry/browser'
 import moment from 'moment'
@@ -725,6 +726,12 @@ export const powerSetOfSubstringsFromStart = (strings: string[], regex: RegExp)
         return _keys
     })
 
+export const flatMapOfJSONPaths = (
+    paths: string[],
+    json: object,
+    resultType: JSONPathOptions['resultType'] = 'path',
+): string[] => paths.flatMap((path) => JSONPath({ path, json, resultType }))
+
 /**
  * Returns a debounced variant of the function
  */

src/Common/Helper.tsx

@@ -46,7 +46,7 @@ export const AddButton = ({
                     title="Add"
                 >
                     <PlusIcon className="icon-dim-16 fcb-5" />
-                    <span className="cb-5 fs-13 lh-24 dc__truncate">{content}</span>
+                    <span className="cb-5 fs-13 lh-34 dc__truncate">{content}</span>
                 </button>
             </Tippy>
         </div>

src/Common/RJSF/templates/ButtonTemplates/AddButton.tsx

@@ -54,10 +54,12 @@ const Field = ({
                 return true
             }
             const isHidden =
-                hiddenSchemaProp.condition === JSONPath({ path: hiddenSchemaProp.match, json: formData })[0]
+                // NOTE: if json is null, then JSONPath will return undefined; hence the ?
+                hiddenSchemaProp.condition === JSONPath({ path: hiddenSchemaProp.match, json: formData })?.[0]
             // NOTE: if should be hidden then filter it out i.e return false
             return !isHidden
         })
+        // NOTE: we probably should use uiSchema instead?
         .sort((prop) => (schema.properties?.[prop.name]?.type === 'boolean' ? -1 : 1))
         .map((prop) => prop.content)