Merge branch 'develop' of github.com:devtron-labs/devtron-fe-common-lib into feat/useForm-hook

Author: RohitRaj011

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.3.7",
+    "version": "0.3.11",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -66,7 +66,7 @@
         "react-mde": "^11.5.0",
         "react-toastify": "9.1.3",
         "typescript": "5.5.4",
-        "vite": "5.4.2",
+        "vite": "5.4.6",
         "vite-plugin-dts": "4.0.3",
         "vite-plugin-lib-inject-css": "2.1.1",
         "vite-plugin-svgr": "^2.4.0",
@@ -109,7 +109,7 @@
             "monaco-editor": "0.44.0"
         },
         "vite-plugin-svgr": {
-            "vite": "5.4.2"
+            "vite": "5.4.6"
         }
     }
 }

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) {
@@ -516,6 +530,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,
@@ -714,28 +729,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