From 44e9023fb3e8acf6f6a26497c90ef670566d91ea Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Fri, 25 Apr 2025 12:23:18 +0200
Subject: [PATCH] Don't show extra input component if we have "add values"
 button (#9842)

Makes it so that the InputContainer is only rendered if we don't have
the add values button up top. We might need to adjust this later (as we
get more sketches for other input types, such as single numbers, single
semvers etc), but it works for now.

With legal values  (no add values button)
<img width="765" alt="image"
src="https://github.com/user-attachments/assets/032cc848-584e-4c3f-83ed-be1fb1cdc0f8"
/>

Without legal values (but add values button)
<img width="763" alt="image"
src="https://github.com/user-attachments/assets/1a8fa68e-a73b-42fc-a1b8-e8f5997f3c5d"
/>

Because we don't handle single value cases yet, some of those inputs are
still stuck in an in-between state:
<img width="775" alt="image"
src="https://github.com/user-attachments/assets/25b6ae89-9267-4f06-a32d-3460abe4a847"
/>
---
 .../EditableConstraint.tsx                    | 66 ++++++-------------
 1 file changed, 20 insertions(+), 46 deletions(-)

diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
index fa19e6756d..5b3564726f 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
@@ -9,10 +9,7 @@ import {
     type Operator,
 } from 'constants/operators';
 import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
-import type {
-    ILegalValue,
-    IUnleashContextDefinition,
-} from 'interfaces/context';
+import type { IUnleashContextDefinition } from 'interfaces/context';
 import type { IConstraint } from 'interfaces/strategy';
 import { useEffect, useRef, useState, type FC } from 'react';
 import { oneOf } from 'utils/oneOf';
@@ -43,35 +40,8 @@ const TopRow = styled('div')(({ theme }) => ({
     flexFlow: 'row nowrap',
     alignItems: 'flex-start',
     justifyItems: 'space-between',
-    borderBottom: `1px dashed ${theme.palette.divider}`,
 }));
 
-const resolveLegalValues = (
-    values: IConstraint['values'],
-    legalValues: IUnleashContextDefinition['legalValues'],
-): { legalValues: ILegalValue[]; deletedLegalValues: ILegalValue[] } => {
-    if (legalValues?.length === 0) {
-        return {
-            legalValues: [],
-            deletedLegalValues: [],
-        };
-    }
-
-    const deletedLegalValues = (values || [])
-        .filter(
-            (value) =>
-                !(legalValues || []).some(
-                    ({ value: legalValue }) => legalValue === value,
-                ),
-        )
-        .map((v) => ({ value: v, description: '' }));
-
-    return {
-        legalValues: legalValues || [],
-        deletedLegalValues,
-    };
-};
-
 const ConstraintDetails = styled('div')(({ theme }) => ({
     display: 'flex',
     gap: theme.spacing(1),
@@ -82,6 +52,7 @@ const ConstraintDetails = styled('div')(({ theme }) => ({
 
 const InputContainer = styled('div')(({ theme }) => ({
     padding: 'var(--padding)',
+    borderTop: `1px dashed ${theme.palette.divider}`,
 }));
 
 const StyledSelect = styled(GeneralSelect)(({ theme }) => ({
@@ -186,6 +157,7 @@ export const EditableConstraint: FC<Props> = ({
     const addValuesButtonRef = useRef<HTMLButtonElement>(null);
     const showAddValuesButton =
         OPERATORS_WITH_ADD_VALUES_WIDGET.includes(input);
+    const showInputField = !showAddValuesButton;
 
     /* We need a special case to handle the currentTime context field. Since
     this field will be the only one to allow DATE_BEFORE and DATE_AFTER operators
@@ -330,21 +302,23 @@ export const EditableConstraint: FC<Props> = ({
                     </IconButton>
                 </HtmlTooltip>
             </TopRow>
-            <InputContainer>
-                <ResolveInput
-                    setValues={setValues}
-                    setValuesWithRecord={setValuesWithRecord}
-                    setValue={setValue}
-                    setError={setError}
-                    localConstraint={localConstraint}
-                    constraintValues={constraint?.values || []}
-                    constraintValue={constraint?.value || ''}
-                    input={input}
-                    error={error}
-                    contextDefinition={contextDefinition}
-                    removeValue={removeValue}
-                />
-            </InputContainer>
+            {showInputField ? (
+                <InputContainer>
+                    <ResolveInput
+                        setValues={setValues}
+                        setValuesWithRecord={setValuesWithRecord}
+                        setValue={setValue}
+                        setError={setError}
+                        localConstraint={localConstraint}
+                        constraintValues={constraint?.values || []}
+                        constraintValue={constraint?.value || ''}
+                        input={input}
+                        error={error}
+                        contextDefinition={contextDefinition}
+                        removeValue={removeValue}
+                    />
+                </InputContainer>
+            ) : null}
         </Container>
     );
 };