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"
/>

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,6 +302,7 @@ export const EditableConstraint: FC<Props> = ({
                     </IconButton>
                 </HtmlTooltip>
             </TopRow>
+            {showInputField ? (
                 <InputContainer>
                     <ResolveInput
                         setValues={setValues}
@@ -345,6 +318,7 @@ export const EditableConstraint: FC<Props> = ({
                         removeValue={removeValue}
                     />
                 </InputContainer>
+            ) : null}
         </Container>
     );
 };