1-3658/fix legal values selector issues (#9838)

Fixes an issue with the new legal values selector where selecting an
item from filtering or changing the checkbox state would move your focus
to the top of the page. I think it's because we'd re-render the whole
tree because of it, and this would clear your focus selection. To get
around it, I've used the existing ResolveInput component. We might want
to change this later as we get around to more input components (single
values, etc), but for now, I think this is good enough.

As a bonus, I get to delete the most annoying part of the
EditableConstraints file 😄

The constraint still opens in edit mode for now, but I expect that to
get resolved once we properly implement the split between editable and
non-editable constraints that was started yesterday.

frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx

@@ -158,10 +158,12 @@ export const RestrictiveLegalValues = ({
     };
 
     const handleSearchKeyDown = (event: React.KeyboardEvent) => {
-        if (event.key === 'Enter' && filteredValues.length > 0) {
+        if (event.key === 'Enter') {
             event.preventDefault();
-            const firstValue = filteredValues[0].value;
-            onChange(firstValue);
+            if (filteredValues.length > 0) {
+                const firstValue = filteredValues[0].value;
+                onChange(firstValue);
+            }
         }
     };
 

frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx

@@ -1,21 +1,6 @@
 import { IconButton, styled } from '@mui/material';
 import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
-import { DateSingleValue } from 'component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/DateSingleValue/DateSingleValue';
-import { FreeTextInput } from 'component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput';
-import { SingleLegalValue } from 'component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue';
-import { SingleValue } from 'component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleValue/SingleValue';
-import {
-    DATE_OPERATORS_SINGLE_VALUE,
-    IN_OPERATORS_FREETEXT,
-    IN_OPERATORS_LEGAL_VALUES,
-    NUM_OPERATORS_LEGAL_VALUES,
-    NUM_OPERATORS_SINGLE_VALUE,
-    SEMVER_OPERATORS_LEGAL_VALUES,
-    SEMVER_OPERATORS_SINGLE_VALUE,
-    STRING_OPERATORS_FREETEXT,
-    STRING_OPERATORS_LEGAL_VALUES,
-    type Input,
-} from 'component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/useConstraintInput/useConstraintInput';
+import type { Input } from 'component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/useConstraintInput/useConstraintInput';
 import {
     DATE_AFTER,
     dateOperators,
@@ -43,7 +28,7 @@ import { ReactComponent as CaseSensitiveIcon } from 'assets/icons/case-sensitive
 import { ReactComponent as CaseInsensitiveIcon } from 'assets/icons/case-insensitive.svg';
 import { ScreenReaderOnly } from 'component/common/ScreenReaderOnly/ScreenReaderOnly';
 import { AddValuesWidget } from './AddValuesWidget';
-import { LegalValuesSelector } from './LegalValuesSelector';
+import { ResolveInput } from 'component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ResolveInput/ResolveInput';
 
 const Container = styled('article')(({ theme }) => ({
     '--padding': theme.spacing(2),
@@ -149,6 +134,7 @@ const OPERATORS_WITH_ADD_VALUES_WIDGET = [
 ];
 
 type Props = {
+    constraint: IConstraint;
     localConstraint: IConstraint;
     setContextName: (contextName: string) => void;
     setOperator: (operator: Operator) => void;
@@ -172,6 +158,7 @@ type Props = {
 };
 export const EditableConstraint: FC<Props> = ({
     constraintChanges,
+    constraint,
     localConstraint,
     setLocalConstraint,
     setContextName,
@@ -255,116 +242,6 @@ export const EditableConstraint: FC<Props> = ({
         }
     };
 
-    const Input = () => {
-        switch (input) {
-            case IN_OPERATORS_LEGAL_VALUES:
-            case STRING_OPERATORS_LEGAL_VALUES:
-                return (
-                    <LegalValuesSelector
-                        data={resolveLegalValues(
-                            constraintValues,
-                            contextDefinition.legalValues,
-                        )}
-                        constraintValues={constraintValues}
-                        values={localConstraint.values || []}
-                        setValuesWithRecord={setValuesWithRecord}
-                        setValues={setValues}
-                    />
-                );
-            case NUM_OPERATORS_LEGAL_VALUES:
-                return (
-                    <>
-                        <SingleLegalValue
-                            data={resolveLegalValues(
-                                [constraintValue],
-                                contextDefinition.legalValues,
-                            )}
-                            setValue={setValue}
-                            value={localConstraint.value}
-                            constraintValue={constraintValue}
-                            type='number'
-                            legalValues={
-                                contextDefinition.legalValues?.filter(
-                                    (legalValue) => Number(legalValue.value),
-                                ) || []
-                            }
-                            error={error}
-                            setError={setError}
-                        />
-                    </>
-                );
-            case SEMVER_OPERATORS_LEGAL_VALUES:
-                return (
-                    <>
-                        <SingleLegalValue
-                            data={resolveLegalValues(
-                                [constraintValue],
-                                contextDefinition.legalValues,
-                            )}
-                            setValue={setValue}
-                            value={localConstraint.value}
-                            constraintValue={constraintValue}
-                            type='semver'
-                            legalValues={contextDefinition.legalValues || []}
-                            error={error}
-                            setError={setError}
-                        />
-                    </>
-                );
-            case DATE_OPERATORS_SINGLE_VALUE:
-                return (
-                    <DateSingleValue
-                        value={localConstraint.value}
-                        setValue={setValue}
-                        error={error}
-                        setError={setError}
-                    />
-                );
-            case IN_OPERATORS_FREETEXT:
-                return (
-                    <FreeTextInput
-                        values={localConstraint.values || []}
-                        removeValue={removeValue}
-                        setValues={setValuesWithRecord}
-                        error={error}
-                        setError={setError}
-                    />
-                );
-            case STRING_OPERATORS_FREETEXT:
-                return (
-                    <>
-                        <FreeTextInput
-                            values={localConstraint.values || []}
-                            removeValue={removeValue}
-                            setValues={setValuesWithRecord}
-                            error={error}
-                            setError={setError}
-                        />
-                    </>
-                );
-            case NUM_OPERATORS_SINGLE_VALUE:
-                return (
-                    <SingleValue
-                        setValue={setValue}
-                        value={localConstraint.value}
-                        type='number'
-                        error={error}
-                        setError={setError}
-                    />
-                );
-            case SEMVER_OPERATORS_SINGLE_VALUE:
-                return (
-                    <SingleValue
-                        setValue={setValue}
-                        value={localConstraint.value}
-                        type='semver'
-                        error={error}
-                        setError={setError}
-                    />
-                );
-        }
-    };
-
     return (
         <Container>
             <TopRow>
@@ -454,7 +331,19 @@ export const EditableConstraint: FC<Props> = ({
                 </HtmlTooltip>
             </TopRow>
             <InputContainer>
-                <Input />
+                <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>
         </Container>
     );

frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraintWrapper.tsx

@@ -206,6 +206,7 @@ export const EditableConstraintWrapper = ({
             error={error}
             contextDefinition={contextDefinition}
             removeValue={removeValue}
+            constraint={constraint}
         />
     );
 };

frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/LegalValuesSelector.tsx

@@ -133,9 +133,12 @@ export const LegalValuesSelector = ({
     };
 
     const handleSearchKeyDown = (event: React.KeyboardEvent) => {
-        if (event.key === 'Enter' && filteredValues.length > 0) {
-            const firstValue = filteredValues[0].value;
-            onChange(firstValue);
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            if (filteredValues.length > 0) {
+                const firstValue = filteredValues[0].value;
+                onChange(firstValue);
+            }
         }
     };