[CLOUD-100]: VisibilityContainer criteria + hide on empty

.gitignore

@@ -24,3 +24,7 @@ yarn-error.log*
 storybook-static
 
 .env.options
+
+.yalc
+yalc.lock
+.yalc/**

src/components/organisms/DynamicComponents/molecules/VisibilityContainer/VisibilityContainer.stories.tsx

@@ -31,6 +31,22 @@ const meta: Meta<TArgs> = {
       description:
         "data.value – template resolved via parseWithoutPartsOfUrl (e.g. \"{reqsJsonPath[0]['.data.flag']['-']}\")",
     },
+    criteria: {
+      control: { type: 'radio' },
+      options: ['equals', 'notEquals', 'exists', 'notExists', null],
+      mapping: {
+        equals: 'equals',
+        notEquals: 'notEquals',
+        exists: 'exists',
+        notExists: 'notExists',
+        null: undefined,
+      },
+      description: 'data.criteria – optional comparison operator (equals / notEquals / exists / notExists)',
+    },
+    valueToCompare: {
+      control: 'object',
+      description: 'data.valueToCompare – string or array of strings to compare with resolved value',
+    },
 
     // provider knobs
     isLoading: {
@@ -56,6 +72,8 @@ const meta: Meta<TArgs> = {
     const data: TInner = {
       id: args.id,
       value: args.value,
+      criteria: args.criteria as TInner['criteria'],
+      valueToCompare: args.valueToCompare as TInner['valueToCompare'],
     }
 
     return (
@@ -76,8 +94,15 @@ const meta: Meta<TArgs> = {
                   fontSize: 13,
                 }}
               >
-                I am only visible when <code>value</code> resolves to something other than{' '}
-                <code>~undefined-value~</code>.
+                I am visible when:
+                <ul style={{ marginTop: 6 }}>
+                  <li>
+                    <code>value</code> resolves (not <code>~undefined-value~</code>)
+                  </li>
+                  <li>
+                    If <code>criteria</code> is set, the comparison passes against <code>valueToCompare</code>
+                  </li>
+                </ul>
               </div>
             </VisibilityContainer>
           </div>
@@ -115,6 +140,8 @@ export const Default: Story = {
     id: 'example-visibility-container',
     // typical template used by parseWithoutPartsOfUrl
     value: "{reqsJsonPath[0]['.data.flag']['-']}",
+    criteria: undefined,
+    valueToCompare: undefined,
 
     // providers
     isLoading: false,
@@ -152,3 +179,219 @@ export const LoadingMultiQuery: Story = {
     isLoading: true,
   },
 }
+
+export const CriteriaEqualsPasses: Story = {
+  args: {
+    ...Default.args,
+    id: 'visibility-criteria-equals-passes',
+    criteria: 'equals',
+    valueToCompare: ['show'],
+    value: "{reqsJsonPath[0]['.data.flag']['-']}",
+    multiQueryData: {
+      req0: {
+        data: {
+          flag: 'show',
+        },
+      },
+    },
+  },
+}
+
+export const CriteriaEqualsFails: Story = {
+  args: {
+    ...Default.args,
+    id: 'visibility-criteria-equals-fails',
+    criteria: 'equals',
+    valueToCompare: ['Role'],
+    value: "{reqsJsonPath[0]['.data.flag']['-']}",
+    multiQueryData: {
+      req0: {
+        data: {
+          flag: 'ClusterRole',
+        },
+      },
+    },
+  },
+}
+
+export const CriteriaNotEqualsPasses: Story = {
+  args: {
+    ...Default.args,
+    id: 'visibility-criteria-not-equals-passes',
+    criteria: 'notEquals',
+    valueToCompare: ['Role'],
+    value: "{reqsJsonPath[0]['.data.flag']['-']}",
+    multiQueryData: {
+      req0: {
+        data: {
+          flag: 'ClusterRole',
+        },
+      },
+    },
+  },
+}
+
+export const CriteriaNotEqualsFails: Story = {
+  args: {
+    ...Default.args,
+    id: 'visibility-criteria-not-equals-fails',
+    criteria: 'notEquals',
+    valueToCompare: ['Role'],
+    value: "{reqsJsonPath[0]['.data.flag']['-']}",
+    multiQueryData: {
+      req0: {
+        data: {
+          flag: 'Role',
+        },
+      },
+    },
+  },
+}
+
+// ========== NEW: EXISTS / NOT EXISTS CRITERIA ==========
+
+export const CriteriaExistsPasses: Story = {
+  args: {
+    ...Default.args,
+    id: 'visibility-criteria-exists-passes',
+    criteria: 'exists',
+    value: "{reqsJsonPath[0]['.data.flag']['-']}",
+    multiQueryData: {
+      req0: {
+        data: {
+          flag: 'some-value',
+        },
+      },
+    },
+  },
+}
+
+export const CriteriaExistsFails: Story = {
+  args: {
+    ...Default.args,
+    id: 'visibility-criteria-exists-fails',
+    criteria: 'exists',
+    value: "{reqsJsonPath[0]['.data.missing']['-']}",
+    multiQueryData: {
+      req0: {
+        data: {
+          flag: 'show',
+        },
+      },
+    },
+  },
+}
+
+export const CriteriaNotExistsPasses: Story = {
+  args: {
+    ...Default.args,
+    id: 'visibility-criteria-not-exists-passes',
+    criteria: 'notExists',
+    value: "{reqsJsonPath[0]['.data.missing']['-']}",
+    multiQueryData: {
+      req0: {
+        data: {
+          flag: 'show',
+        },
+      },
+    },
+  },
+}
+
+export const CriteriaNotExistsFails: Story = {
+  args: {
+    ...Default.args,
+    id: 'visibility-criteria-not-exists-fails',
+    criteria: 'notExists',
+    value: "{reqsJsonPath[0]['.data.flag']['-']}",
+    multiQueryData: {
+      req0: {
+        data: {
+          flag: 'some-value',
+        },
+      },
+    },
+  },
+}
+
+// ========== NEW: DYNAMIC valueToCompare WITH parseAll ==========
+
+export const DynamicValueToCompare: Story = {
+  args: {
+    ...Default.args,
+    id: 'visibility-dynamic-value-to-compare',
+    criteria: 'equals',
+    value: "{reqsJsonPath[0]['.status.phase']['-']}",
+    // valueToCompare uses dynamic template from another request
+    valueToCompare: ["{reqsJsonPath[1]['.data.expectedPhase']['-']}"],
+    multiQueryData: {
+      req0: {
+        status: {
+          phase: 'Running',
+        },
+      },
+      req1: {
+        data: {
+          expectedPhase: 'Running',
+        },
+      },
+    },
+  },
+}
+
+export const DynamicValueToCompareWithPartsOfUrl: Story = {
+  args: {
+    ...Default.args,
+    id: 'visibility-dynamic-value-to-compare-parts-of-url',
+    criteria: 'equals',
+    value: "{reqsJsonPath[0]['.metadata.namespace']['-']}",
+    // valueToCompare uses URL part (e.g., {2} = cluster name from URL)
+    valueToCompare: ['{2}'],
+    partsOfUrl: ['', '', 'default', 'pods', 'my-pod'],
+    multiQueryData: {
+      req0: {
+        metadata: {
+          namespace: 'default',
+        },
+      },
+    },
+  },
+}
+
+// ========== NEW: CHECKING AGAINST ~undefined-value~ ==========
+
+export const CheckAgainstUndefinedValue: Story = {
+  args: {
+    ...Default.args,
+    id: 'visibility-check-undefined-value',
+    criteria: 'equals',
+    value: "{reqsJsonPath[0]['.metadata.deletionTimestamp']['-']}",
+    valueToCompare: ['~undefined-value~'],
+    multiQueryData: {
+      req0: {
+        metadata: {
+          name: 'my-resource',
+          // deletionTimestamp is missing (undefined)
+        },
+      },
+    },
+  },
+}
+
+export const CheckNotUndefinedValue: Story = {
+  args: {
+    ...Default.args,
+    id: 'visibility-check-not-undefined-value',
+    criteria: 'notEquals',
+    value: "{reqsJsonPath[0]['.metadata.deletionTimestamp']['-']}",
+    valueToCompare: ['~undefined-value~'],
+    multiQueryData: {
+      req0: {
+        metadata: {
+          name: 'my-resource',
+          deletionTimestamp: '2024-01-01T00:00:00Z',
+        },
+      },
+    },
+  },
+}

src/components/organisms/DynamicComponents/molecules/VisibilityContainer/VisibilityContainer.tsx

@@ -2,7 +2,8 @@
 import React, { FC } from 'react'
 import { TDynamicComponentsAppTypeMap } from '../../types'
 import { useMultiQuery } from '../../../DynamicRendererWithProviders/providers/hybridDataProvider'
-import { parseWithoutPartsOfUrl } from '../utils'
+import { usePartsOfUrl } from '../../../DynamicRendererWithProviders/providers/partsOfUrlContext'
+import { parseWithoutPartsOfUrl, parseAll } from '../utils'
 import { Styled } from './styled'
 
 export const VisibilityContainer: FC<{ data: TDynamicComponentsAppTypeMap['VisibilityContainer']; children?: any }> = ({
@@ -11,24 +12,57 @@ export const VisibilityContainer: FC<{ data: TDynamicComponentsAppTypeMap['Visib
   children,
 }) => {
   const { data: multiQueryData, isLoading: isMultiqueryLoading } = useMultiQuery()
+  const partsOfUrl = usePartsOfUrl()
 
   const {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     id,
     value,
+    criteria,
+    valueToCompare,
   } = data
 
+  const replaceValues = partsOfUrl.partsOfUrl.reduce<Record<string, string | undefined>>((acc, value, index) => {
+    acc[index.toString()] = value
+    return acc
+  }, {})
+
   const valuePrepared = parseWithoutPartsOfUrl({
     text: value,
     multiQueryData,
     customFallback: '~undefined-value~',
   })
 
+  const shouldHideByCriteria = (() => {
+    if (!criteria) return false
+
+    if (criteria === 'exists') {
+      return !valuePrepared || valuePrepared === '~undefined-value~'
+    }
+    if (criteria === 'notExists') {
+      return !!valuePrepared && valuePrepared !== '~undefined-value~'
+    }
+
+    if (!valueToCompare) return false
+
+    const targets = Array.isArray(valueToCompare)
+      ? valueToCompare.map(target => parseAll({ text: target, replaceValues, multiQueryData }))
+      : [parseAll({ text: String(valueToCompare), replaceValues, multiQueryData })]
+
+    const matches = targets.includes(String(valuePrepared))
+
+    if (criteria === 'equals') return !matches
+    if (criteria === 'notEquals') return matches
+    return false
+  })()
+
   if (isMultiqueryLoading) {
     return <div>Loading multiquery</div>
   }
 
+  const shouldAutoHide = !criteria && (!valuePrepared || valuePrepared === '~undefined-value~')
+
   return (
-    <Styled.VisibilityContainer $hidden={valuePrepared === '~undefined-value~'}>{children}</Styled.VisibilityContainer>
+    <Styled.VisibilityContainer $hidden={shouldAutoHide || shouldHideByCriteria}>{children}</Styled.VisibilityContainer>
   )
 }

src/components/organisms/DynamicComponents/types.ts

@@ -132,6 +132,8 @@ export type TDynamicComponentsAppTypeMap = {
   VisibilityContainer: {
     id: number | string
     value: string
+    criteria?: 'equals' | 'notEquals' | 'exists' | 'notExists'
+    valueToCompare?: string | string[]
   }
   ArrayOfObjectsToKeyValues: {
     id: number | string