Merge pull request #295 from devtron-labs/feat/use-rjsf-chart-store

feat: handle the various hidden objects possible in charts of chart store

Author: Elessar1802

package-lock.json

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

package.json

@@ -22,10 +22,24 @@ import * as Sentry from '@sentry/browser'
 import moment from 'moment'
 import { useLocation } from 'react-router-dom'
 import YAML from 'yaml'
-import { ERROR_EMPTY_SCREEN, SortingOrder, EXCLUDED_FALSY_VALUES, DISCORD_LINK, ZERO_TIME_STRING, TOAST_ACCESS_DENIED } from './Constants'
+import { deepEquals } from '@rjsf/utils'
+import {
+    ERROR_EMPTY_SCREEN,
+    SortingOrder,
+    EXCLUDED_FALSY_VALUES,
+    DISCORD_LINK,
+    ZERO_TIME_STRING,
+    TOAST_ACCESS_DENIED,
+} from './Constants'
 import { ServerErrors } from './ServerError'
 import { AsyncOptions, AsyncState, UseSearchString } from './Types'
-import { scrollableInterface, DATE_TIME_FORMAT_STRING, ToastManager, ToastVariantType } from '../Shared'
+import {
+    scrollableInterface,
+    DATE_TIME_FORMAT_STRING,
+    ToastManager,
+    ToastVariantType,
+    versionComparatorBySortOrder,
+} from '../Shared'
 import { ReactComponent as ArrowDown } from '../Assets/Icon/ic-chevron-down.svg'
 
 export function showError(serverError, showToastOnUnknownError = true, hideAccessError = false) {
@@ -620,6 +634,7 @@ export const getFilteredChartVersions = (charts, selectedChartType) =>
     // Filter chart versions based on selected chart type
     charts
         .filter((item) => item?.chartType === selectedChartType.value)
+        .sort((a, b) => versionComparatorBySortOrder(a?.chartVersion, b?.chartVersion))
         .map((item) => ({
             value: item?.chartVersion,
             label: item?.chartVersion,
@@ -818,28 +833,7 @@ export const compareObjectLength = (objA: any, objB: any): boolean => {
  * Return deep copy of the object
  */
 export function deepEqual(configA: any, configB: any): boolean {
-    try {
-        if (configA === configB) {
-            return true
-        }
-        if ((configA && !configB) || (!configA && configB) || !compareObjectLength(configA, configB)) {
-            return false
-        }
-        let isEqual = true
-        for (const idx in configA) {
-            if (!isEqual) {
-                break
-            } else if (typeof configA[idx] === 'object' && typeof configB[idx] === 'object') {
-                isEqual = deepEqual(configA[idx], configB[idx])
-            } else if (configA[idx] !== configB[idx]) {
-                isEqual = false
-            }
-        }
-        return isEqual
-    } catch (err) {
-        showError(err)
-        return true
-    }
+    return deepEquals(configA, configB)
 }
 
 export function shallowEqual(objA, objB) {

src/Common/Helper.tsx

@@ -39,6 +39,7 @@ export const RJSFForm = (props: FormProps) => (
             ...templates,
             ...props.templates,
         }}
+        formContext={props.formData}
         widgets={{ ...widgets, ...props.widgets }}
         translateString={translateString}
     />

src/Common/RJSF/Form.tsx

@@ -14,12 +14,14 @@
  * limitations under the License.
  */
 
-import { ObjectFieldTemplateProps, canExpand, titleId } from '@rjsf/utils'
+import { ObjectFieldTemplateProps, canExpand, titleId, deepEquals } from '@rjsf/utils'
 import { JSONPath } from 'jsonpath-plus'
+import { convertJSONPointerToJSONPath } from '@Common/Helper'
 import { FieldRowWithLabel } from '../common/FieldRow'
 import { TitleField } from './TitleField'
 import { AddButton } from './ButtonTemplates'
 import { RJSFFormSchema } from '../types'
+import { parseSchemaHiddenType } from '../utils'
 
 const Field = ({
     disabled,
@@ -33,6 +35,7 @@ const Field = ({
     schema,
     title,
     uiSchema,
+    formContext,
 }: ObjectFieldTemplateProps<any, RJSFFormSchema, any>) => {
     const hasAdditionalProperties = !!schema.additionalProperties
 
@@ -54,8 +57,19 @@ const Field = ({
                 return true
             }
             try {
-                const value = JSONPath({ path: hiddenSchemaProp.match, json: formData })?.[0]
-                const isHidden = value === undefined || hiddenSchemaProp.condition === value
+                const hiddenSchema = parseSchemaHiddenType(hiddenSchemaProp)
+                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]
+                const isHidden = value === undefined || deepEquals(hiddenSchema.value, value)
                 return !isHidden
             } catch {
                 return true

src/Common/RJSF/templates/ObjectFieldTemplate.tsx

@@ -20,14 +20,22 @@ import { StrictRJSFSchema } from '@rjsf/utils'
 
 export type FormProps = Omit<ComponentProps<typeof RJSFForm>, 'validator'>
 
-interface Hidden {
-    condition: boolean
-    match: string
+export interface MetaHiddenType {
+    value: any
+    path: string
 }
 
+export type HiddenType =
+    | MetaHiddenType
+    | {
+          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, MetaHiddenType } from './types'
 
 /**
  * Override for the TranslatableString from RJSF
@@ -135,3 +136,59 @@ export const getInferredTypeFromValueType = (value) => {
             return 'null'
     }
 }
+
+const conformPathToPointers = (path: string): string => {
+    if (!path) {
+        return ''
+    }
+    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
+}
+
+const emptyMetaHiddenTypeInstance: MetaHiddenType = {
+    value: false,
+    path: '',
+}
+
+export const parseSchemaHiddenType = (hiddenSchema: HiddenType): MetaHiddenType => {
+    if (!hiddenSchema) {
+        return null
+    }
+    const clone = structuredClone(hiddenSchema)
+    if (typeof clone === 'string') {
+        return {
+            value: false,
+            path: conformPathToPointers(clone),
+        }
+    }
+    if (typeof clone !== 'object') {
+        return structuredClone(emptyMetaHiddenTypeInstance)
+    }
+    if (
+        Object.hasOwn(clone, 'condition') &&
+        'condition' in clone &&
+        Object.hasOwn(clone, 'value') &&
+        'value' in clone
+    ) {
+        return {
+            value: clone.condition,
+            path: conformPathToPointers(clone.value),
+        }
+    }
+    if (Object.hasOwn(clone, 'value') && 'value' in clone && Object.hasOwn(clone, 'path') && 'path' in clone) {
+        return {
+            value: clone.value,
+            path: conformPathToPointers(clone.path),
+        }
+    }
+    return structuredClone(emptyMetaHiddenTypeInstance)
+}

src/Common/RJSF/utils.tsx

@@ -0,0 +1,3 @@
+export const TOOLTIP_CONTENTS = {
+    INVALID_INPUT: 'Valid input is required for all mandatory fields.',
+}

src/Common/Tooltip/constants.tsx

@@ -1 +1,2 @@
 export { default as Tooltip } from './Tooltip'
+export { TOOLTIP_CONTENTS } from './constants'

src/Common/Tooltip/index.ts

@@ -1,5 +1,4 @@
 import { versionComparatorBySortOrder } from '@Shared/Helpers'
-import { SortingOrder } from '@Common/Constants'
 import { DeploymentChartListDTO, DeploymentChartType, DEVTRON_DEPLOYMENT_CHART_NAMES } from './types'
 import fallbackGuiSchema from './basicViewSchema.json'
 
@@ -31,7 +30,7 @@ export const convertDeploymentChartListToChartType = (data: DeploymentChartListD
         {} as Record<string, DeploymentChartType>,
     )
     const result = Object.values(chartMap).map((element) => {
-        element.versions.sort((a, b) => versionComparatorBySortOrder(a, b, 'version', SortingOrder.DESC))
+        element.versions.sort((a, b) => versionComparatorBySortOrder(a.version, b.version))
         return element
     })
     return result

src/Pages/GlobalConfigurations/DeploymentCharts/utils.ts

@@ -29,6 +29,7 @@ import {
     UserApprovalConfigType,
     PATTERNS,
     ZERO_TIME_STRING,
+    noop,
 } from '../Common'
 import {
     AggregationKeys,
@@ -138,17 +139,12 @@ export const numberComparatorBySortOrder = (
     sortOrder: SortingOrder = SortingOrder.ASC,
 ): number => (sortOrder === SortingOrder.ASC ? a - b : b - a)
 
-export function versionComparatorBySortOrder(
-    a: Record<string, any>,
-    b: Record<string, any>,
-    compareKey: string,
-    orderBy: SortingOrder,
-) {
+export function versionComparatorBySortOrder(a: string, b: string, orderBy = SortingOrder.ASC) {
     if (orderBy === SortingOrder.DESC) {
-        return b[compareKey].localeCompare(a[compareKey], undefined, { numeric: true })
+        return a?.localeCompare(b, undefined, { numeric: true }) ?? 1
     }
 
-    return a[compareKey].localeCompare(b[compareKey], undefined, { numeric: true })
+    return b?.localeCompare(a, undefined, { numeric: true }) ?? 1
 }
 
 export const getWebhookEventIcon = (eventName: WebhookEventNameType) => {
@@ -807,3 +803,21 @@ export const getIsManualApprovalSpecific = (userApprovalConfig?: Pick<UserApprov
 export const getHandleOpenURL = (url: string) => () => {
     window.open(url, '_blank', 'noreferrer')
 }
+
+export const getDefaultValueFromType = (value: unknown) => {
+    switch (typeof value) {
+        case 'number':
+            return 0
+        case 'string':
+            return ''
+        case 'object':
+            if (value === null) {
+                return null
+            }
+            return Array.isArray(value) ? [] : {}
+        case 'function':
+            return noop
+        default:
+            return null
+    }
+}