From b13cae2650909a023071592891856923e6837175 Mon Sep 17 00:00:00 2001
From: Yi Cai <yicai@redhat.com>
Date: Mon, 1 Jul 2024 13:54:55 -0400
Subject: [PATCH] Implemented multi level nested conditions warning

Signed-off-by: Yi Cai <yicai@redhat.com>
---
 .../ConditionalAccess/ConditionsForm.test.tsx |  36 ++++
 .../ConditionalAccess/ConditionsForm.tsx      |  50 +++++
 .../ConditionalAccess/ConditionsFormRow.tsx   | 183 ++++++++----------
 3 files changed, 168 insertions(+), 101 deletions(-)

diff --git a/plugins/rbac/src/components/ConditionalAccess/ConditionsForm.test.tsx b/plugins/rbac/src/components/ConditionalAccess/ConditionsForm.test.tsx
index 7ff8b4a3bb..2e9e8766b5 100644
--- a/plugins/rbac/src/components/ConditionalAccess/ConditionsForm.test.tsx
+++ b/plugins/rbac/src/components/ConditionalAccess/ConditionsForm.test.tsx
@@ -76,4 +76,40 @@ describe('ConditionsForm', () => {
 
     expect(getByTestId('save-conditions')).toBeDisabled();
   });
+
+  it('shows Multiple levels of nested conditions warning', () => {
+    const { getByTestId } = renderComponent({
+      conditionsFormVal: {
+        anyOf: [
+          {
+            rule: 'HAS_ANOTTATION',
+            resourceType: selPluginResourceType,
+            params: {},
+          },
+          {
+            allOf: [
+              {
+                rule: 'HAS_ANOTTATION',
+                resourceType: selPluginResourceType,
+                params: {},
+              },
+              {
+                not: {
+                  rule: 'HAS_LABEL',
+                  resourceType: selPluginResourceType,
+                  params: {
+                    label: 'temp',
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      },
+    });
+
+    expect(
+      getByTestId('multi-level-nested-conditions-warning'),
+    ).toBeInTheDocument();
+  });
 });
diff --git a/plugins/rbac/src/components/ConditionalAccess/ConditionsForm.tsx b/plugins/rbac/src/components/ConditionalAccess/ConditionsForm.tsx
index f2108cb2f5..ab0a37965b 100644
--- a/plugins/rbac/src/components/ConditionalAccess/ConditionsForm.tsx
+++ b/plugins/rbac/src/components/ConditionalAccess/ConditionsForm.tsx
@@ -3,6 +3,8 @@ import React from 'react';
 import { PermissionCondition } from '@backstage/plugin-permission-common';
 
 import { makeStyles } from '@material-ui/core';
+import { Alert, AlertTitle } from '@material-ui/lab';
+import WarningIcon from '@mui/icons-material/Warning';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import { RJSFValidationError } from '@rjsf/utils';
@@ -169,6 +171,32 @@ export const ConditionsForm = ({
     );
   };
 
+  const hasMultiLevelNestedConditions = (): boolean => {
+    if (!Array.isArray(conditions[criteria as keyof ConditionsData])) {
+      return false;
+    }
+
+    return (conditions[criteria as keyof ConditionsData] as Condition[])
+      .filter(condition => !('rule' in condition))
+      .some((firstLevelNestedCondition: Condition) => {
+        const nestedConditionCriteria = Object.keys(
+          firstLevelNestedCondition,
+        )[0];
+        return (
+          Array.isArray(
+            firstLevelNestedCondition[
+              nestedConditionCriteria as keyof Condition
+            ],
+          ) &&
+          (
+            firstLevelNestedCondition[
+              nestedConditionCriteria as keyof Condition
+            ] as Condition[]
+          ).some((con: Condition) => !('rule' in con))
+        );
+      });
+  };
+
   return (
     <>
       <Box className={classes.form}>
@@ -182,6 +210,28 @@ export const ConditionsForm = ({
           handleSetErrors={handleSetErrors}
           setRemoveAllClicked={setRemoveAllClicked}
         />
+        {hasMultiLevelNestedConditions() && (
+          <Alert
+            icon={<WarningIcon />}
+            style={{ margin: '1.5rem 0 1rem 0' }}
+            severity="warning"
+            data-testid="multi-level-nested-conditions-warning"
+          >
+            <AlertTitle data-testid="multi-level-nested-conditions-warning-title">
+              Multiple levels of nested conditions are not supported
+            </AlertTitle>
+            Only one level is displayed. Please use the{' '}
+            <a
+              href="https://github.com/redhat-developer/red-hat-developers-documentation-rhdh/blob/main/modules/admin/proc-rbac-send-request-rbac-rest-api.adoc"
+              // TODO: Update link with the official documentation when RHIDP-3078 is resolved
+              target="blank"
+              style={{ textDecoration: 'underline' }}
+            >
+              CLI
+            </a>{' '}
+            to view all nested conditions.
+          </Alert>
+        )}
       </Box>
       <Box className={classes.footer}>
         <Button
diff --git a/plugins/rbac/src/components/ConditionalAccess/ConditionsFormRow.tsx b/plugins/rbac/src/components/ConditionalAccess/ConditionsFormRow.tsx
index 4930ad4a85..ad8f809c62 100644
--- a/plugins/rbac/src/components/ConditionalAccess/ConditionsFormRow.tsx
+++ b/plugins/rbac/src/components/ConditionalAccess/ConditionsFormRow.tsx
@@ -498,7 +498,7 @@ export const ConditionsFormRow = ({
       </Box>
     );
   };
-  let showMultilevelNestedConditionWarning = false;
+
   return (
     <Box className={classes.conditionRow} data-testid="conditions-row">
       <ToggleButtonGroup
@@ -748,101 +748,89 @@ export const ConditionsFormRow = ({
                 </div>
                 <Box>
                   {Object.keys(nc)[0] === criterias.allOf &&
-                    nc.allOf?.map((c, index) => {
-                      if ((c as PermissionCondition).rule === undefined) {
-                        showMultilevelNestedConditionWarning = true;
-                      }
-                      return (
-                        (c as PermissionCondition).rule !== undefined && (
-                          <div
-                            style={{
-                              display:
-                                (c as PermissionCondition).rule !== undefined
-                                  ? 'flex'
-                                  : 'none',
-                            }}
-                            key={`condition-${index}`}
-                          >
-                            <ConditionsFormRowFields
-                              oldCondition={c}
-                              index={index}
-                              onRuleChange={onRuleChange}
-                              conditionRow={conditionRow}
-                              criteria={criteria}
-                              conditionRulesData={conditionRulesData}
-                              handleSetErrors={handleSetErrors}
-                              setRemoveAllClicked={setRemoveAllClicked}
-                              nestedConditionRow={nestedConditionRow}
-                              nestedConditionCriteria={Object.keys(nc)[0]}
-                              nestedConditionIndex={nestedConditionIndex}
-                              ruleIndex={index}
-                              updateRules={updateRules}
-                            />
-                            <IconButton
-                              title="Remove"
-                              className={classes.removeRuleButton}
-                              disabled={index === 0}
-                              onClick={() =>
-                                handleRemoveNestedConditionRule(
-                                  criterias.allOf,
-                                  nestedConditionIndex,
-                                  index,
-                                )
-                              }
-                            >
-                              <RemoveIcon />
-                            </IconButton>
-                          </div>
-                        )
-                      );
-                    })}
+                    nc.allOf?.map((c, index) => (
+                      <div
+                        style={{
+                          display:
+                            (c as PermissionCondition).rule !== undefined
+                              ? 'flex'
+                              : 'none',
+                        }}
+                        key={`condition-${index}`}
+                      >
+                        <ConditionsFormRowFields
+                          oldCondition={c}
+                          index={index}
+                          onRuleChange={onRuleChange}
+                          conditionRow={conditionRow}
+                          criteria={criteria}
+                          conditionRulesData={conditionRulesData}
+                          handleSetErrors={handleSetErrors}
+                          setRemoveAllClicked={setRemoveAllClicked}
+                          nestedConditionRow={nestedConditionRow}
+                          nestedConditionCriteria={Object.keys(nc)[0]}
+                          nestedConditionIndex={nestedConditionIndex}
+                          ruleIndex={index}
+                          updateRules={updateRules}
+                        />
+                        <IconButton
+                          title="Remove"
+                          className={classes.removeRuleButton}
+                          disabled={index === 0}
+                          onClick={() =>
+                            handleRemoveNestedConditionRule(
+                              criterias.allOf,
+                              nestedConditionIndex,
+                              index,
+                            )
+                          }
+                        >
+                          <RemoveIcon />
+                        </IconButton>
+                      </div>
+                    ))}
                   {Object.keys(nc)[0] === criterias.anyOf &&
-                    nc.anyOf?.map((c, index) => {
-                      if ((c as PermissionCondition).rule === undefined) {
-                        showMultilevelNestedConditionWarning = true;
-                      }
-                      return (
-                        <div
-                          style={{
-                            display:
-                              (c as PermissionCondition).rule !== undefined
-                                ? 'flex'
-                                : 'none',
-                          }}
-                          key={`condition-${index}`}
+                    nc.anyOf?.map((c, index) => (
+                      <div
+                        style={{
+                          display:
+                            (c as PermissionCondition).rule !== undefined
+                              ? 'flex'
+                              : 'none',
+                        }}
+                        key={`condition-${index}`}
+                      >
+                        <ConditionsFormRowFields
+                          oldCondition={c}
+                          index={index}
+                          onRuleChange={onRuleChange}
+                          conditionRow={conditionRow}
+                          criteria={criteria}
+                          conditionRulesData={conditionRulesData}
+                          handleSetErrors={handleSetErrors}
+                          setRemoveAllClicked={setRemoveAllClicked}
+                          nestedConditionRow={nestedConditionRow}
+                          nestedConditionCriteria={Object.keys(nc)[0]}
+                          nestedConditionIndex={nestedConditionIndex}
+                          ruleIndex={index}
+                          updateRules={updateRules}
+                        />
+                        <IconButton
+                          title="Remove"
+                          className={classes.removeRuleButton}
+                          disabled={index === 0}
+                          onClick={() =>
+                            handleRemoveNestedConditionRule(
+                              criterias.anyOf,
+                              nestedConditionIndex,
+                              index,
+                            )
+                          }
                         >
-                          <ConditionsFormRowFields
-                            oldCondition={c}
-                            index={index}
-                            onRuleChange={onRuleChange}
-                            conditionRow={conditionRow}
-                            criteria={criteria}
-                            conditionRulesData={conditionRulesData}
-                            handleSetErrors={handleSetErrors}
-                            setRemoveAllClicked={setRemoveAllClicked}
-                            nestedConditionRow={nestedConditionRow}
-                            nestedConditionCriteria={Object.keys(nc)[0]}
-                            nestedConditionIndex={nestedConditionIndex}
-                            ruleIndex={index}
-                            updateRules={updateRules}
-                          />
-                          <IconButton
-                            title="Remove"
-                            className={classes.removeRuleButton}
-                            disabled={index === 0}
-                            onClick={() =>
-                              handleRemoveNestedConditionRule(
-                                criterias.anyOf,
-                                nestedConditionIndex,
-                                index,
-                              )
-                            }
-                          >
-                            <RemoveIcon />
-                          </IconButton>
-                        </div>
-                      );
-                    })}
+                          <RemoveIcon />
+                        </IconButton>
+                      </div>
+                    ))}
                   {Object.keys(nc)[0] === criterias.not && (
                     <ConditionsFormRowFields
                       oldCondition={
@@ -870,13 +858,6 @@ export const ConditionsFormRow = ({
                       updateRules={updateRules}
                     />
                   )}
-                  {showMultilevelNestedConditionWarning && (
-                    <div style={{ width: '90%', marginTop: '2rem' }}>
-                      This condition contains multiple nested levels that the UI
-                      does not yet support. Please use the CLI to view
-                      additional levels of nested conditions.
-                    </div>
-                  )}
                   {Object.keys(nc)[0] !== criterias.not && (
                     <Button
                       className={classes.addRuleButton}