From 832e3f2e79ff91cfacdd644fb0fea83367e2d066 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Fri, 2 May 2025 15:47:29 +0200
Subject: [PATCH] Add input help text (#9883)

Adds help text to the popover input for free text values, single numeric
and semver values. The help text is in addition to the error text (so
you can get both).

Also makes the add button a little narrower to better match sketches.

## Rendered

Multiple values (free text):
<img width="953" alt="image"
src="https://github.com/user-attachments/assets/1d9bf7da-af8c-46b6-8eae-ae4f8a687363"
/>

With error
<img width="936" alt="image"
src="https://github.com/user-attachments/assets/aa9dc2da-ad9f-43da-9e44-c36fd8344df1"
/>

Numeric operators:
<img width="927" alt="image"
src="https://github.com/user-attachments/assets/f1e8afd8-7051-4691-bdd2-810929ccd4fa"
/>



SemVer operators:

<img width="944" alt="image"
src="https://github.com/user-attachments/assets/655a7a7b-a4a4-468c-8a5d-23e5d38375b8"
/>
---
 .../AddSingleValueWidget.tsx                  |  4 ++-
 .../AddValuesPopover.tsx                      | 19 ++++++++--
 .../AddValuesWidget.tsx                       |  4 ++-
 .../EditableConstraint.tsx                    | 35 +++++++++++++------
 4 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/AddSingleValueWidget.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/AddSingleValueWidget.tsx
index a6b1221bf2..545da27372 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/AddSingleValueWidget.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/AddSingleValueWidget.tsx
@@ -21,10 +21,11 @@ interface AddValuesProps {
     onAddValue: (newValue: string) => void;
     removeValue: () => void;
     currentValue?: string;
+    helpText?: string;
 }
 
 export const AddSingleValueWidget = forwardRef<HTMLDivElement, AddValuesProps>(
-    ({ currentValue, onAddValue, removeValue }, ref) => {
+    ({ currentValue, onAddValue, removeValue, helpText }, ref) => {
         const [open, setOpen] = useState(false);
         const positioningRef = useRef<HTMLDivElement>(null);
         useImperativeHandle(
@@ -56,6 +57,7 @@ export const AddSingleValueWidget = forwardRef<HTMLDivElement, AddValuesProps>(
                 <AddValuesPopover
                     initialValue={currentValue}
                     onAdd={handleAdd}
+                    helpText={helpText}
                     open={open}
                     anchorEl={positioningRef.current}
                     onClose={() => setOpen(false)}
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/AddValuesPopover.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/AddValuesPopover.tsx
index 51a21e1ce4..c13d2bf25f 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/AddValuesPopover.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/AddValuesPopover.tsx
@@ -33,19 +33,31 @@ type AddValuesProps = {
     open: boolean;
     anchorEl: HTMLElement | null;
     onClose: () => void;
+    helpText?: string;
 };
 
+const HelpText = styled('p')(({ theme }) => ({
+    color: theme.palette.text.secondary,
+    fontSize: theme.typography.caption.fontSize,
+}));
+
+const AddButton = styled(Button)(({ theme }) => ({
+    minWidth: theme.spacing(4),
+}));
+
 export const AddValuesPopover: FC<AddValuesProps> = ({
     initialValue,
     onAdd,
     anchorEl,
     open,
     onClose,
+    helpText,
 }) => {
     const [inputValue, setInputValue] = useState(initialValue || '');
     const [error, setError] = useState('');
     const inputRef = useRef<HTMLInputElement>(null);
     const inputId = useId();
+    const helpTextId = useId();
 
     return (
         <StyledPopover
@@ -106,16 +118,19 @@ export const AddValuesPopover: FC<AddValuesProps> = ({
                         autoFocus
                         error={!!error}
                         helperText={error}
+                        aria-describedby={helpTextId}
                     />
-                    <Button
+                    <AddButton
                         variant='text'
                         type='submit'
+                        size='small'
                         color='primary'
                         disabled={!inputValue?.trim()}
                     >
                         Add
-                    </Button>
+                    </AddButton>
                 </InputRow>
+                <HelpText id={helpTextId}>{helpText}</HelpText>
             </form>
         </StyledPopover>
     );
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/AddValuesWidget.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/AddValuesWidget.tsx
index 1d43370803..33b154cd65 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/AddValuesWidget.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/AddValuesWidget.tsx
@@ -28,10 +28,11 @@ const AddValuesButton = styled('button')(({ theme }) => ({
 
 interface AddValuesProps {
     onAddValues: (newValues: string[]) => void;
+    helpText?: string;
 }
 
 export const AddValuesWidget = forwardRef<HTMLButtonElement, AddValuesProps>(
-    ({ onAddValues }, ref) => {
+    ({ onAddValues, helpText }, ref) => {
         const [open, setOpen] = useState(false);
         const positioningRef = useRef<HTMLButtonElement>(null);
         useImperativeHandle(
@@ -73,6 +74,7 @@ export const AddValuesWidget = forwardRef<HTMLButtonElement, AddValuesProps>(
 
                 <AddValuesPopover
                     onAdd={handleAdd}
+                    helpText={helpText}
                     open={open}
                     anchorEl={positioningRef.current}
                     onClose={() => setOpen(false)}
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
index d34c864915..100c411a51 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
@@ -146,21 +146,28 @@ const StyledCaseSensitiveIcon = styled(CaseSensitiveIcon)(({ theme }) => ({
     fill: 'currentcolor',
 }));
 
-const getInputType = (input: Input) => {
+type InputType =
+    | { input: 'legal values' }
+    | { input: 'date' }
+    | { input: 'single value'; type: 'number' | 'semver' }
+    | { input: 'multiple values' };
+
+const getInputType = (input: Input): InputType => {
     switch (input) {
         case 'IN_OPERATORS_LEGAL_VALUES':
         case 'STRING_OPERATORS_LEGAL_VALUES':
         case 'NUM_OPERATORS_LEGAL_VALUES':
         case 'SEMVER_OPERATORS_LEGAL_VALUES':
-            return 'legal values';
+            return { input: 'legal values' };
         case 'DATE_OPERATORS_SINGLE_VALUE':
-            return 'date input';
+            return { input: 'date' };
         case 'NUM_OPERATORS_SINGLE_VALUE':
+            return { input: 'single value', type: 'number' };
         case 'SEMVER_OPERATORS_SINGLE_VALUE':
-            return 'single text value';
+            return { input: 'single value', type: 'semver' };
         case 'IN_OPERATORS_FREETEXT':
         case 'STRING_OPERATORS_FREETEXT':
-            return 'free text';
+            return { input: 'multiple values' };
     }
 };
 
@@ -273,8 +280,8 @@ export const EditableConstraint: FC<Props> = ({
     };
 
     const TopRowInput = () => {
-        switch (inputType) {
-            case 'date input':
+        switch (inputType.input) {
+            case 'date':
                 return (
                     <ConstraintDateInput
                         setValue={setValue}
@@ -283,7 +290,7 @@ export const EditableConstraint: FC<Props> = ({
                         setError={setError}
                     />
                 );
-            case 'single text value':
+            case 'single value':
                 return (
                     <AddSingleValueWidget
                         onAddValue={(newValue) => {
@@ -291,11 +298,17 @@ export const EditableConstraint: FC<Props> = ({
                         }}
                         removeValue={() => setValue('')}
                         currentValue={localConstraint.value}
+                        helpText={
+                            inputType.type === 'number'
+                                ? 'Add a single number'
+                                : 'A semver value should be of the format X.Y.Z'
+                        }
                     />
                 );
-            case 'free text':
+            case 'multiple values':
                 return (
                     <AddValuesWidget
+                        helpText='Maximum 100 char length per value'
                         ref={addValuesButtonRef}
                         onAddValues={(newValues) => {
                             // todo (`addEditStrategy`): move deduplication logic higher up in the context handling
@@ -400,7 +413,7 @@ export const EditableConstraint: FC<Props> = ({
                     </StyledIconButton>
                 </HtmlTooltip>
             </TopRow>
-            {inputType === 'legal values' ? (
+            {inputType.input === 'legal values' ? (
                 <LegalValuesContainer>
                     <LegalValuesSelector
                         data={resolveLegalValues(
@@ -411,7 +424,7 @@ export const EditableConstraint: FC<Props> = ({
                         values={localConstraint.values || []}
                         setValuesWithRecord={setValuesWithRecord}
                         setValues={setValues}
-                    />{' '}
+                    />
                 </LegalValuesContainer>
             ) : null}
         </Container>