Merge pull request #192 from devtron-labs/feat/gui-view-hidden

feat: hide object properties in schema through the hidden property

Author: Elessar1802

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.1.9",
+    "version": "0.1.10",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -95,6 +95,7 @@
         "ansi_up": "^5.2.1",
         "fast-json-patch": "^3.1.1",
         "react-dates": "^21.8.0",
+        "jsonpath-plus": "^9.0.0",
         "react-monaco-editor": "^0.54.0",
         "sass": "^1.69.7",
         "tslib": "^2.4.1"
@@ -108,4 +109,4 @@
             "monaco-editor": "0.44.0"
         }
     }
-}
+}

package.json

@@ -65,6 +65,17 @@ function useCodeEditorContext() {
     return context
 }
 
+/**
+ * NOTE: once monaco editor mounts it doesn't update it's internal onChange state.
+ * Since most of the time onChange methods are declared inside the render body of a component
+ * we should use the latest references of onChange.
+ * Please see: https://github.com/react-monaco-editor/react-monaco-editor/issues/704
+ * Thus as a hack we are using this objects reference to call the latest onChange reference
+ */
+const _onChange = {
+    onChange: null
+}
+
 const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.memo(
     ({
         value,
@@ -100,7 +111,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
         const monacoRef = useRef(null)
         const { width, height: windowHeight } = useWindowSize()
         const memoisedReducer = React.useCallback(CodeEditorReducer, [])
-        const [state, dispatch] = useReducer(memoisedReducer, initialState({mode, theme, value, diffView, noParsing}))
+        const [state, dispatch] = useReducer(memoisedReducer, initialState({ mode, theme, value, diffView, noParsing }))
         const [, json, yamlCode, error] = useJsonYaml(state.code, tabSize, state.mode, !state.noParsing)
         const [, originalJson, originlaYaml] = useJsonYaml(defaultValue, tabSize, state.mode, !state.noParsing)
         monaco.editor.defineTheme(CodeEditorThemesKeys.vsDarkDT, {
@@ -193,15 +204,19 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
             editorRef.current.layout()
         }, [width, windowHeight])
 
-        useEffect(() => {
-            if (onChange) {
-                onChange(state.code)
-            }
-        }, [state.code])
+        /**
+         * NOTE: Please see @_onChange variable
+         */
+        _onChange.onChange = onChange
+
+        const setCode = (value: string) => {
+            dispatch({ type: 'setCode', value })
+            _onChange.onChange?.(value)
+        }
 
         useEffect(() => {
             if (noParsing) {
-                dispatch({ type: 'setCode', value })
+                setCode(value)
 
                 return
             }
@@ -220,7 +235,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
             if (obj) {
                 final = state.mode === 'json' ? JSON.stringify(obj, null, tabSize) : YAMLStringify(obj)
             }
-            dispatch({ type: 'setCode', value: final })
+            setCode(final)
         }, [value, noParsing])
 
         useEffect(() => {
@@ -234,12 +249,12 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
         }, [focus])
 
         function handleOnChange(newValue, e) {
-            dispatch({ type: 'setCode', value: newValue })
+            setCode(newValue)
         }
 
         function handleLanguageChange(mode: 'json' | 'yaml') {
             dispatch({ type: 'changeLanguage', value: mode })
-            dispatch({ type: 'setCode', value: mode === 'json' ? json : yamlCode })
+            setCode(mode === 'json' ? json : yamlCode)
         }
 
         const options: monaco.editor.IEditorConstructionOptions = {

src/Common/CodeEditor/CodeEditor.tsx

@@ -15,6 +15,8 @@
  */
 
 import React, { SyntheticEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { JSONPath, JSONPathOptions } from 'jsonpath-plus'
+import { compare as compareJSON, applyPatch } from 'fast-json-patch'
 import { components } from 'react-select'
 import * as Sentry from '@sentry/browser'
 import moment from 'moment'
@@ -725,6 +727,20 @@ export const powerSetOfSubstringsFromStart = (strings: string[], regex: RegExp)
         return _keys
     })
 
+export const convertJSONPointerToJSONPath = (pointer: string) =>
+    pointer.replace(/\//g, '.').replace(/\./, '$.')
+
+export const flatMapOfJSONPaths = (
+    paths: string[],
+    json: object,
+    resultType: JSONPathOptions['resultType'] = 'path',
+): string[] => paths.flatMap((path) => JSONPath({ path, json, resultType }))
+
+export const applyCompareDiffOnUneditedDocument = (uneditedDocument: object, editedDocument: object) => {
+    const patch = compareJSON(uneditedDocument, editedDocument)
+    return applyPatch(uneditedDocument, patch).newDocument
+}
+
 /**
  * Returns a debounced variant of the function
  */

src/Common/Helper.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/Form.tsx

@@ -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/rjsfForm.scss

@@ -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/ArrayFieldItemTemplate.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-34 dc__truncate">{content}</span>
                 </button>
-            </ConditionalWrap>
+            </Tippy>
         </div>
     )
 }

src/Common/RJSF/templates/ButtonTemplates/AddButton.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/Field.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,20 @@ 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 value = JSONPath({ path: hiddenSchemaProp.match, json: formData })?.[0]
+            const isHidden = value === undefined || hiddenSchemaProp.condition === value
+            // 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)
 
     if (hasAdditionalProperties) {
         if (properties.length) {
@@ -85,9 +93,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 +113,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/templates/ObjectFieldTemplate.tsx

@@ -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/types.ts

@@ -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>
     )