[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,16 @@ const meta: Meta<TArgs> = {
       description:
         "data.value – template resolved via parseWithoutPartsOfUrl (e.g. \"{reqsJsonPath[0]['.data.flag']['-']}\")",
     },
+    criteria: {
+      control: { type: 'radio' },
+      options: ['equals', 'notEquals', null],
+      mapping: { equals: 'equals', notEquals: 'notEquals', null: undefined },
+      description: 'data.criteria – optional comparison operator (equals / notEquals)',
+    },
+    valueToCompare: {
+      control: 'object',
+      description: 'data.valueToCompare – string or array of strings to compare with resolved value',
+    },
 
     // provider knobs
     isLoading: {
@@ -56,6 +66,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 +88,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 +134,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 +173,71 @@ 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',
+        },
+      },
+    },
+  },
+}

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

@@ -16,6 +16,8 @@ export const VisibilityContainer: FC<{ data: TDynamicComponentsAppTypeMap['Visib
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     id,
     value,
+    criteria,
+    valueToCompare,
   } = data
 
   const valuePrepared = parseWithoutPartsOfUrl({
@@ -24,11 +26,26 @@ export const VisibilityContainer: FC<{ data: TDynamicComponentsAppTypeMap['Visib
     customFallback: '~undefined-value~',
   })
 
+  const shouldHideByCriteria = (() => {
+    if (!criteria || !valueToCompare) return false
+
+    const targets = Array.isArray(valueToCompare) ? valueToCompare.map(String) : [String(valueToCompare)]
+    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>
   }
 
   return (
-    <Styled.VisibilityContainer $hidden={valuePrepared === '~undefined-value~'}>{children}</Styled.VisibilityContainer>
+    <Styled.VisibilityContainer
+      $hidden={!valuePrepared || valuePrepared === '~undefined-value~' || 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'
+    valueToCompare?: string | string[]
   }
   ArrayOfObjectsToKeyValues: {
     id: number | string