feat: add support for other hidden types

Author: Elessar1802

package-lock.json

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

package.json

@@ -21,6 +21,7 @@ import { FieldRowWithLabel } from '../common/FieldRow'
 import { TitleField } from './TitleField'
 import { AddButton } from './ButtonTemplates'
 import { RJSFFormSchema } from '../types'
+import { parseSchemaHiddenType } from '../utils'
 
 const Field = ({
     disabled,
@@ -56,19 +57,19 @@ const Field = ({
                 return true
             }
             try {
-                if (!hiddenSchemaProp.path) {
-                    throw new Error('Empty path element')
+                const hiddenSchema = parseSchemaHiddenType(hiddenSchemaProp)
+                if (!hiddenSchema.path) {
+                    throw new Error('Empty path property of hidden descriptor field')
                 }
-                let path = ''
-                if (hiddenSchemaProp.path.match(/^\w+(\/\w+)*$/g) && hiddenSchemaProp.path.charAt(0) !== '/') {
-                    path = convertJSONPointerToJSONPath(`/${hiddenSchemaProp.path}`)
+                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,
+                    path: convertJSONPointerToJSONPath(hiddenSchema.path),
                     json: formContext,
                 })?.[0]
-                const isHidden = value === undefined || hiddenSchemaProp.value === value
+                const isHidden = value === undefined || hiddenSchema.value === value
                 return !isHidden
             } catch {
                 return true

src/Common/RJSF/templates/ObjectFieldTemplate.tsx

@@ -20,14 +20,20 @@ import { StrictRJSFSchema } from '@rjsf/utils'
 
 export type FormProps = Omit<ComponentProps<typeof RJSFForm>, 'validator'>
 
-interface Hidden {
-    value: boolean
-    path: string
-}
+export type HiddenType =
+    | {
+          value: any
+          path: string
+      }
+    | {
+          condition: any
+          value: string
+      }
+    | string
 
 export interface RJSFFormSchema extends StrictRJSFSchema {
     properties: {
         [key: string]: RJSFFormSchema
     }
-    hidden: Hidden
+    hidden: HiddenType
 }

src/Common/RJSF/types.ts

@@ -15,6 +15,7 @@
  */
 
 import { TranslatableString, englishStringTranslator } from '@rjsf/utils'
+import { HiddenType } from './types'
 
 /**
  * Override for the TranslatableString from RJSF
@@ -135,3 +136,36 @@ export const getInferredTypeFromValueType = (value) => {
             return 'null'
     }
 }
+
+const conformPathToPointers = (path: string) => {
+    const trimmedPath = path.trim()
+    const isSlashSeparatedPathMissingBeginSlash = trimmedPath.match(/^\w+(\/\w+)*$/g)
+    if (isSlashSeparatedPathMissingBeginSlash) {
+        return `/${trimmedPath}`
+    }
+    const isDotSeparatedPath = trimmedPath.match(/^\w+(\.\w+)*$/g)
+    if (isDotSeparatedPath) {
+        // NOTE: replacing dots with forward slash (/)
+        return `/${trimmedPath.replaceAll(/\./g, '/')}`
+    }
+    return trimmedPath
+}
+
+export const parseSchemaHiddenType = (hiddenSchema: HiddenType) => {
+    if (typeof hiddenSchema === 'string') {
+        return {
+            value: false,
+            path: conformPathToPointers(hiddenSchema),
+        }
+    }
+    if ('condition' in hiddenSchema) {
+        return {
+            value: hiddenSchema.condition,
+            path: conformPathToPointers(hiddenSchema.value),
+        }
+    }
+    return {
+        ...hiddenSchema,
+        path: conformPathToPointers(hiddenSchema.path),
+    }
+}