fix: constraint validation affecting disabled button (#4183)

frontend/src/hooks/api/getters/useConstraintsValidation/useConstraintsValidation.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from '@testing-library/react';
+import { IConstraint } from 'interfaces/strategy'; // Assuming you have your component in this path
+import { FC } from 'react';
+import { useConstraintsValidation } from './useConstraintsValidation';
+import { testServerRoute, testServerSetup } from 'utils/testServer';
+
+const server = testServerSetup();
+
+const TestComponent: FC<{ constraints: IConstraint[] }> = ({ constraints }) => {
+    const valid = useConstraintsValidation(constraints);
+
+    return <div>{valid ? 'Valid' : 'Invalid'}</div>;
+};
+
+it('should display Valid when constraints are valid', async () => {
+    testServerRoute(
+        server,
+        '/api/admin/constraints/validate',
+        { data: 'OK' },
+        'post'
+    );
+
+    const validConstraints: IConstraint[] = [
+        {
+            value: 'test',
+            values: ['test'],
+            operator: 'IN',
+            contextName: 'irrelevant',
+        },
+        {
+            value: 'test',
+            values: ['test'],
+            operator: 'IN',
+            contextName: 'irrelevant',
+        },
+    ];
+
+    render(<TestComponent constraints={validConstraints} />);
+
+    await screen.findByText('Valid');
+});
+
+it('should display Invalid when constraints are invalid', async () => {
+    const emptyValueAndValues: IConstraint[] = [
+        { value: '', values: [], operator: 'IN', contextName: 'irrelevant' },
+        {
+            value: '',
+            values: [],
+            operator: 'IN',
+            contextName: 'irrelevant',
+        },
+    ];
+
+    render(<TestComponent constraints={emptyValueAndValues} />);
+
+    await screen.findByText('Invalid');
+});

frontend/src/hooks/api/getters/useConstraintsValidation/useConstraintsValidation.ts

@@ -2,6 +2,14 @@ import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
 import { useEffect, useState } from 'react';
 import { IConstraint } from 'interfaces/strategy';
 
+const isValid = (constraint: IConstraint) => {
+    const hasValues =
+        Array.isArray(constraint.values) && constraint.values.length > 0;
+    const hasValue = Boolean(constraint.value);
+
+    return hasValues || hasValue;
+};
+
 export const useConstraintsValidation = (
     constraints?: IConstraint[]
 ): boolean => {
@@ -16,15 +24,14 @@ export const useConstraintsValidation = (
             return;
         }
 
-        const validationRequests = constraints
+        const invalidConstraints = constraints.find(item => !isValid(item));
-            .filter(constraint => {
+        if (invalidConstraints) {
-                const hasValues =
+            setValid(false);
-                    Array.isArray(constraint.values) &&
+            return;
-                    constraint.values.length > 0;
+        }
-                const hasValue = Boolean(constraint.value);
 
-                return hasValues || hasValue;
+        const validationRequests = constraints
-            })
+            .filter(isValid)
             .map(constraint => {
                 return validateConstraint(constraint);
             });
@@ -34,7 +41,7 @@ export const useConstraintsValidation = (
             .catch(() => setValid(false));
 
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [constraints]);
+    }, [JSON.stringify(constraints)]);
 
     return valid;
 };