From 1da5a30e07abe600afd70eb467fe6a306145c336 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 22 Apr 2025 13:23:30 +0200
Subject: [PATCH] Initial spike

---
 .../src/assets/icons/constraint-equals.svg    |  3 ++
 .../assets/icons/constraint-not-equals.svg    |  4 ++
 .../EditableConstraint.tsx                    | 37 ++++++++++++++++---
 3 files changed, 38 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/assets/icons/constraint-equals.svg
 create mode 100644 frontend/src/assets/icons/constraint-not-equals.svg

diff --git a/frontend/src/assets/icons/constraint-equals.svg b/frontend/src/assets/icons/constraint-equals.svg
new file mode 100644
index 0000000000..98049d89ec
--- /dev/null
+++ b/frontend/src/assets/icons/constraint-equals.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="5" viewBox="0 0 13 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.289062 1.88672V0.480469H4.87109V1.88672H0.289062ZM0.289062 4.23047V2.82422H4.87109V4.23047H0.289062ZM7.4375 1.88672V0.480469H12.0195V1.88672H7.4375ZM7.4375 4.23047V2.82422H12.0195V4.23047H7.4375Z" fill="#000"/>
+</svg>
diff --git a/frontend/src/assets/icons/constraint-not-equals.svg b/frontend/src/assets/icons/constraint-not-equals.svg
new file mode 100644
index 0000000000..b20120a77f
--- /dev/null
+++ b/frontend/src/assets/icons/constraint-not-equals.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.28906 11.8867V10.4805H13.8711V11.8867H9.28906ZM9.28906 14.2305V12.8242H13.8711V14.2305H9.28906Z" fill="#9F9FA1"/>
+<rect x="16.4541" y="3.94922" width="1" height="18.3741" rx="0.5" transform="rotate(32.071 16.4541 3.94922)" fill="#6E6E70"/>
+</svg>
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
index 389b9268a9..583fa25893 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
@@ -42,6 +42,8 @@ import Delete from '@mui/icons-material/Delete';
 import { ValueList } from './ValueList';
 import { ReactComponent as CaseSensitiveIcon } from 'assets/icons/case-sensitive.svg';
 import { ReactComponent as CaseInsensitiveIcon } from 'assets/icons/case-insensitive.svg';
+import { ReactComponent as EqualsIcon } from 'assets/icons/constraint-equals.svg';
+import { ReactComponent as NotEqualsIcon } from 'assets/icons/constraint-not-equals.svg';
 import { ScreenReaderOnly } from 'component/common/ScreenReaderOnly/ScreenReaderOnly';
 
 const Container = styled('article')(({ theme }) => ({
@@ -112,6 +114,8 @@ const StyledSelect = styled(GeneralSelect)(({ theme }) => ({
 }));
 
 const StyledButton = styled('button')(({ theme }) => ({
+    display: 'grid',
+    placeItems: 'center',
     width: '5ch',
     borderRadius: theme.shape.borderRadius,
     padding: theme.spacing(0.25, 0),
@@ -134,13 +138,24 @@ const StyledCaseInsensitiveIcon = styled(CaseInsensitiveIcon)(({ theme }) => ({
         fill: theme.palette.text.secondary,
     },
 }));
+
 const StyledCaseSensitiveIcon = styled(CaseSensitiveIcon)(({ theme }) => ({
     fill: 'currentcolor',
 }));
 
-const CaseButton = styled(StyledButton)(({ theme }) => ({
-    display: 'grid',
-    placeItems: 'center',
+const StyledEqualsIcon = styled(EqualsIcon)(({ theme }) => ({
+    path: {
+        fill: 'currentcolor',
+    },
+}));
+
+const StyledNotEqualsIcon = styled(NotEqualsIcon)(({ theme }) => ({
+    path: {
+        fill: theme.palette.text.disabled,
+    },
+    rect: {
+        fill: theme.palette.text.secondary,
+    },
 }));
 
 type Props = {
@@ -380,7 +395,17 @@ export const EditableConstraint: FC<Props> = ({
                         type='button'
                         onClick={toggleInvertedOperator}
                     >
-                        {localConstraint.inverted ? 'aint' : 'is'}
+                        {localConstraint.inverted ? (
+                            <StyledNotEqualsIcon aria-label='The constraint operator is exclusive.' />
+                        ) : (
+                            <StyledEqualsIcon aria-label='The constraint operator is inclusive.' />
+                        )}
+                        <ScreenReaderOnly>
+                            Make the selected operator
+                            {localConstraint.inverted
+                                ? ' inclusive'
+                                : ' exclusive'}
+                        </ScreenReaderOnly>
                     </StyledButton>
 
                     <ConstraintOperatorSelect
@@ -391,7 +416,7 @@ export const EditableConstraint: FC<Props> = ({
                     />
 
                     {showCaseSensitiveButton ? (
-                        <CaseButton
+                        <StyledButton
                             type='button'
                             onClick={toggleCaseSensitivity}
                         >
@@ -407,7 +432,7 @@ export const EditableConstraint: FC<Props> = ({
                                     : ' not '}
                                 case sensitive
                             </ScreenReaderOnly>
-                        </CaseButton>
+                        </StyledButton>
                     ) : null}
 
                     {!input.includes('LEGAL_VALUES') && (