diff --git a/ui/src/app/flags/flagsApi.ts b/ui/src/app/flags/flagsApi.ts index 63cb100dca..2aceddd3bf 100644 --- a/ui/src/app/flags/flagsApi.ts +++ b/ui/src/app/flags/flagsApi.ts @@ -73,7 +73,7 @@ export const flagsApi = createApi({ defaultVariantId: values.defaultVariant?.id || null, ...values }; - + delete update.defaultVariant; return { url: `/namespaces/${namespaceKey}/flags/${flagKey}`, method: 'PUT', diff --git a/ui/src/app/flags/rules/Rules.tsx b/ui/src/app/flags/rules/Rules.tsx index 103a80ca68..4b610466c5 100644 --- a/ui/src/app/flags/rules/Rules.tsx +++ b/ui/src/app/flags/rules/Rules.tsx @@ -28,7 +28,7 @@ import { selectCurrentNamespace } from '~/app/namespaces/namespacesSlice'; import { useListSegmentsQuery } from '~/app/segments/segmentsApi'; import EmptyState from '~/components/EmptyState'; import Button from '~/components/forms/buttons/Button'; -import Combobox from '~/components/forms/Combobox'; + import Loading from '~/components/Loading'; import Modal from '~/components/Modal'; import DeletePanel from '~/components/panels/DeletePanel'; @@ -44,10 +44,11 @@ import { IFlag } from '~/types/Flag'; import { IRule } from '~/types/Rule'; import { ISegment, SegmentOperatorType } from '~/types/Segment'; import { FilterableVariant, IVariant } from '~/types/Variant'; -import { truncateKey } from '~/utils/helpers'; import { useUpdateFlagMutation } from '~/app/flags/flagsApi'; import { INamespace } from '~/types/Namespace'; import TextButton from '~/components/forms/buttons/TextButton'; +import SingleDistributionFormInput from '~/components/rules/forms/SingleDistributionForm'; +import { toFilterableVariant } from '~/utils/helpers'; type RulesProps = { flag: IFlag; @@ -61,19 +62,9 @@ export function DefaultVariant(props: RulesProps) { const namespace = useSelector(selectCurrentNamespace) as INamespace; - const readOnly = useSelector(selectReadonly); - const [selectedVariant, setSelectedVariant] = useState(() => { - const variant = flag.defaultVariant; - if (variant) { - return { - ...variant, - filterValue: truncateKey(variant.key), - displayValue: variant.key - }; - } - return null; + return toFilterableVariant(flag.defaultVariant); }); const [updateFlag] = useUpdateFlagMutation(); @@ -103,7 +94,6 @@ export function DefaultVariant(props: RulesProps) { values: { ...flag, defaultVariant: { - ...selectedVariant, id: selectedVariant?.id ?? '' } as IVariant } @@ -131,86 +121,78 @@ export function DefaultVariant(props: RulesProps) { > {(formik) => { return ( -
-
-
-
-
- -

- Default Variant -

- -
-
-
-
-
-

- This is the default value that will be returned if no - other rules match. -

-
-
+
+
+
+ +

+ Default Rule +

+ +
+
+ +
+

+ This is the default value that will be returned if no other + rules match. +

+
+
+
+ +
+
{flag.variants && flag.variants.length > 0 && ( -
-
- -
-
- - id="defaultVariant" - name="defaultVariant" - values={flag.variants.map((v) => ({ - ...v, - filterValue: truncateKey(v.key), - displayValue: v.key - }))} - placeholder="Select a variant" - selected={selectedVariant} - setSelected={setSelectedVariant} - disabled={readOnly} - /> -
-
+ )}
-
-
-
- handleRemove()} - > - Remove - - formik.resetForm()} - > - Reset - - - {formik.isSubmitting ? : 'Update'} - +
+
+ handleRemove()} + > + Remove + + { + formik.resetForm(); + setSelectedVariant( + toFilterableVariant(flag.defaultVariant) + ); + }} + > + Reset + + + {formik.isSubmitting ? : 'Update'} + +
-
+
- +
); }} diff --git a/ui/src/components/forms/Combobox.tsx b/ui/src/components/forms/Combobox.tsx index 0d32e67aaf..887d9d88c9 100644 --- a/ui/src/components/forms/Combobox.tsx +++ b/ui/src/components/forms/Combobox.tsx @@ -68,6 +68,7 @@ export default function Combobox( }} displayValue={(v: T) => v?.key} placeholder={placeholder} + id={`${id}-select-input`} /> 0 && ( -
-
- -
-
- - id="variantKey" - name="variantKey" - values={flag.variants?.map((v) => ({ - ...v, - filterValue: truncateKey(v.key), - displayValue: v.key - }))} - selected={selectedVariant} - setSelected={setSelectedVariant} - disabled={readOnly} - /> -
-
+ )} {ruleType === DistributionType.Multi && ( diff --git a/ui/src/components/rules/forms/SingleDistributionForm.tsx b/ui/src/components/rules/forms/SingleDistributionForm.tsx index 264dab8984..98734f9c18 100644 --- a/ui/src/components/rules/forms/SingleDistributionForm.tsx +++ b/ui/src/components/rules/forms/SingleDistributionForm.tsx @@ -5,12 +5,14 @@ type SingleDistributionFormInputProps = { variants: IVariant[]; selectedVariant: FilterableVariant | null; setSelectedVariant: (variant: FilterableVariant | null) => void; + id?: string; }; export default function SingleDistributionFormInput( props: SingleDistributionFormInputProps ) { const { variants, selectedVariant, setSelectedVariant } = props; + const id = props.id || 'variant'; return (
@@ -23,7 +25,7 @@ export default function SingleDistributionFormInput(
- id="variant" + id={id} name="variant" placeholder="Select or search for a variant" values={ diff --git a/ui/src/utils/helpers.ts b/ui/src/utils/helpers.ts index 8bd9f02219..65d953f1b8 100644 --- a/ui/src/utils/helpers.ts +++ b/ui/src/utils/helpers.ts @@ -3,6 +3,7 @@ import { twMerge } from 'tailwind-merge'; import { defaultHeaders } from '~/data/api'; import { ICommand } from '~/types/Cli'; import { ICurlOptions } from '~/types/Curl'; +import { IVariant } from '~/types/Variant'; export function cls(...args: ClassValue[]) { return twMerge(clsx(args)); @@ -121,3 +122,14 @@ export function generateCurlCommand(curlOptions: ICurlOptions) { export function generateCliCommand(command: ICommand): string { return `flipt ${command.commandName} ${command.arguments?.join(' ')} ${command.options?.map(({ key, value }) => `${key} ${value}`).join(' ')}`; } + +export function toFilterableVariant(selected: IVariant | undefined) { + if (selected) { + return { + ...selected, + displayValue: selected.name, + filterValue: selected.id + }; + } + return null; +} diff --git a/ui/tests/rules.spec.ts b/ui/tests/rules.spec.ts index 4ca4791caa..a741b8b52c 100644 --- a/ui/tests/rules.spec.ts +++ b/ui/tests/rules.spec.ts @@ -80,7 +80,7 @@ test.describe('Rules', () => { }); await test.step('can update single-variant rule', async () => { - await page.locator('#variantKey-select-button').click(); + await page.locator('#quick-variant-2-select-button').click(); await page .locator('li') .filter({ hasText: 'Single Variant' })