feat: add support for hidden field in schema that hides properties based on prop value

Author: Elessar1802

src/Common/RJSF/Form.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react'
 import RJSF from '@rjsf/core'
 import RJSFValidator from '@rjsf/validator-ajv8'
 

src/Common/RJSF/rjsfForm.scss

@@ -39,6 +39,14 @@
             // This is added as the array field itself has a margin bottom
             margin: 0;
         }
+
+        & legend {
+            display: none;
+        }
+
+        &:has(+ div) {
+            margin-bottom: 8px;
+        }
     }
 
     &__additional-fields,
@@ -53,15 +61,15 @@
         &:has(> .remove-btn__container)::after {
             border-radius: 4px;
             transform: translate(-50%, -50%);
-            top: 50%; 
-            left: 50%; 
+            top: 50%;
+            left: 50%;
             background: transparent;
             z-index: -1;
             position: absolute;
             /* NOTE: this overlay is exactly 6px wider & taller on all sides
-             * therefore the 12px (6 + 6) on height & width */
-            height: calc(100% + 12px);
-            width: calc(100% + 12px);
+             * therefore the 8px (4 + 4) on height & width */
+            height: calc(100% + 8px);
+            width: calc(100% + 8px);
             content: '';
             transition: all 100ms ease-out;
         }

src/Common/RJSF/templates/ArrayFieldItemTemplate.tsx

@@ -14,12 +14,10 @@
  * limitations under the License.
  */
 
-import React, { CSSProperties } from 'react'
 import { ArrayFieldTemplateItemType } from '@rjsf/utils'
 
 export const ArrayFieldItemTemplate = ({
     children,
-    className,
     disabled,
     hasToolbar,
     hasRemove,
@@ -32,7 +30,7 @@ export const ArrayFieldItemTemplate = ({
     const { RemoveButton } = registry.templates.ButtonTemplates
 
     return (
-        <div className="dc__position-rel display-grid rjsf-form-template__array-field-item flex-align-center mb-12">
+        <div className="dc__position-rel display-grid rjsf-form-template__array-field-item flex-align-center">
             {children}
             <div className="dc__position-abs remove-btn__container" style={{ right: "-28px", top: "9px" }}>
                 {hasToolbar && hasRemove && (

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

@@ -14,11 +14,9 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useState, useRef } from 'react'
 import { IconButtonProps } from '@rjsf/utils'
 
-import { ConditionalWrap } from '../../../Helper'
-import { getTippyWrapperWithContent } from '../../utils'
+import Tippy from '../../../Tippy'
 import { ADD_BUTTON_WIDTH } from '../../constants'
 import { ReactComponent as PlusIcon } from '../../../../Assets/Icon/ic-add.svg'
 
@@ -30,26 +28,27 @@ export const AddButton = ({
     uiSchema,
     ...props
 }: IconButtonProps & Partial<Record<'label', string>>) => {
-    const [showTippy, setShowTippy] = useState(false)
-    const buttonRef = useRef<HTMLButtonElement>(null)
     const content = `Add ${label}`
 
-    useEffect(() => setShowTippy(buttonRef.current?.offsetWidth >= ADD_BUTTON_WIDTH.MAX_WIDTH_VALUE), [buttonRef.current])
-
     return (
         <div className="flexbox flex-justify-start">
-            <ConditionalWrap condition={showTippy} wrap={getTippyWrapperWithContent(content)}>
+            <Tippy
+                className="default-tt dc__word-break"
+                arrow={false}
+                placement="right"
+                content={content}
+                truncateWidth={ADD_BUTTON_WIDTH.MAX_WIDTH_VALUE}
+            >
                 <button
-                    ref={buttonRef}
                     {...props}
                     type="button"
                     className={`dc__outline-none-imp p-0 dc__transparent flex dc__gap-4 cursor ${ADD_BUTTON_WIDTH.MAX_WIDTH_CLASSNAME}`}
                     title="Add"
                 >
                     <PlusIcon className="icon-dim-16 fcb-5" />
-                    <span className="cb-5 fs-13 lh-20 dc__truncate">{content}</span>
+                    <span className="cb-5 fs-13 lh-24 dc__truncate">{content}</span>
                 </button>
-            </ConditionalWrap>
+            </Tippy>
         </div>
     )
 }

src/Common/RJSF/templates/Field.tsx

@@ -49,7 +49,8 @@ export const Field = (props: FieldTemplateProps) => {
     return hidden ? (
         <div className="hidden">{children}</div>
     ) : (
-        <div className={`${classNames} mb-12`}>
+        // NOTE: need to override the margins of default rjsf css
+        <div className={`${classNames} mb-0`}>
             {showTitle && (
                 <TitleField
                     id={id}

src/Common/RJSF/templates/ObjectFieldTemplate.tsx

@@ -14,17 +14,12 @@
  * limitations under the License.
  */
 
-import React from 'react'
-import {
-    ObjectFieldTemplatePropertyType,
-    ObjectFieldTemplateProps,
-    canExpand,
-    getUiOptions,
-    titleId,
-} from '@rjsf/utils'
+import { ObjectFieldTemplateProps, canExpand, titleId } from '@rjsf/utils'
 import { FieldRowWithLabel } from '../common/FieldRow'
 import { TitleField } from './TitleField'
 import { AddButton } from './ButtonTemplates'
+import { JSONPath } from 'jsonpath-plus'
+import { RJSFFormSchema } from '../types'
 
 const Field = ({
     disabled,
@@ -38,7 +33,7 @@ const Field = ({
     schema,
     title,
     uiSchema,
-}: ObjectFieldTemplateProps) => {
+}: ObjectFieldTemplateProps<any, RJSFFormSchema, any>) => {
     const hasAdditionalProperties = !!schema.additionalProperties
 
     const ActionButton = canExpand(schema, uiSchema, formData) && (
@@ -52,7 +47,19 @@ const Field = ({
         />
     )
 
-    const Properties = properties.map((prop: ObjectFieldTemplatePropertyType) => prop.content)
+    const Properties = properties
+        .filter((prop) => {
+            const hiddenSchemaProp = schema.properties?.[prop.name]?.hidden
+            if (!hiddenSchemaProp) {
+                return true
+            }
+            const isHidden =
+                hiddenSchemaProp.condition === JSONPath({ path: hiddenSchemaProp.match, json: formData })[0]
+            // NOTE: if should be hidden then filter it out i.e return false
+            return !isHidden
+        })
+        .sort((prop) => (schema.properties?.[prop.name]?.type === 'boolean' ? -1 : 1))
+        .map((prop) => prop.content)
 
     if (hasAdditionalProperties) {
         if (properties.length) {
@@ -85,9 +92,8 @@ const Field = ({
     )
 }
 
-export const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
+export const ObjectFieldTemplate = (props: ObjectFieldTemplateProps<any, RJSFFormSchema, any>) => {
     const { idSchema, registry, required, schema, title, uiSchema, description } = props
-    const options = getUiOptions(uiSchema)
     const hasAdditionalProperties = !!schema.additionalProperties
     const showTitle = title && !hasAdditionalProperties
 
@@ -106,11 +112,11 @@ export const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
             )}
             {/* Not adding the border and padding for non-objects and root schema */}
             <div
-                className={
+                className={`${
                     schema.properties && !hasAdditionalProperties && idSchema.$id !== 'root'
                         ? 'dc__border-left pl-12'
                         : ''
-                }
+                } flexbox-col dc__gap-8`}
             >
                 <Field {...props} />
             </div>

src/Common/RJSF/types.ts

@@ -16,5 +16,18 @@
 
 import { ComponentProps } from 'react'
 import RJSFForm from '@rjsf/core'
+import { StrictRJSFSchema } from '@rjsf/utils'
 
 export type FormProps = Omit<ComponentProps<typeof RJSFForm>, 'validator'>
+
+interface Hidden {
+    condition: boolean
+    match: string
+}
+
+export interface RJSFFormSchema extends StrictRJSFSchema {
+    properties: {
+        [key: string]: RJSFFormSchema
+    }
+    hidden: Hidden
+}

src/Common/RJSF/utils.tsx

@@ -15,7 +15,7 @@
  */
 
 import { TranslatableString, englishStringTranslator } from '@rjsf/utils'
-import Tippy from '@tippyjs/react'
+import Tippy from '../Tippy'
 
 /**
  * Override for the TranslatableString from RJSF
@@ -138,8 +138,16 @@ export const getInferredTypeFromValueType = (value) => {
 }
 
 export const getTippyWrapperWithContent =
-    (content, placement?: React.ComponentProps<typeof Tippy>['placement']) => (children) => (
-        <Tippy className="default-tt dc__word-break" arrow={false} placement={placement || 'right'} content={content}>
+    (content, placement?: React.ComponentProps<typeof Tippy>['placement'], truncateWidth = 0) =>
+    (children) => (
+        <Tippy
+            className="default-tt"
+            maxWidth={300}
+            arrow={false}
+            placement={placement || 'right'}
+            content={content}
+            truncateWidth={truncateWidth}
+        >
             {children}
         </Tippy>
     )

src/Common/Tippy.tsx

@@ -0,0 +1,25 @@
+import { useEffect, useRef, useState } from 'react'
+import TippyJS, { TippyProps as TippyJSProps } from '@tippyjs/react'
+
+// TODO: we should generalize this Tippy to work without sending in this truncateWidth
+const Tippy = ({ truncateWidth = 0, children, ...rest }: TippyJSProps & Record<'truncateWidth', number>) => {
+    // NOTE: if showOnTruncate is off then always showTippy
+    const [showTippy, setShowTippy] = useState(!!truncateWidth)
+    const ref = useRef(null)
+
+    useEffect(() => {
+        if (truncateWidth) {
+            setShowTippy(ref.current?.offsetWidth >= truncateWidth)
+        }
+    }, [ref.current?.offsetWidth])
+
+    return !showTippy ? (
+        children
+    ) : (
+        <TippyJS {...rest}>
+            <span ref={ref}>{children}</span>
+        </TippyJS>
+    )
+}
+
+export default Tippy

src/Common/index.ts

@@ -72,3 +72,4 @@ export * from './GenericDescription'
 export * from './SegmentedBarChart'
 export * from './CodeEditor'
 export * from './AppStatus'
+export { default as Tippy } from './Tippy'