chore: convert newContextFieldUI to kill switch (#6752)

Converts `newContextFieldUI` release flag to
`disableShowContextFieldSelectionValues` kill switch.

The kill switch controls whether we show the value selection above the
search filed when > 100 values

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>

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

@@ -4,7 +4,9 @@ import { RestrictiveLegalValues } from './RestrictiveLegalValues';
 import { vi } from 'vitest';
 
 vi.mock('../../../../../../hooks/useUiFlag', () => ({
-    useUiFlag: vi.fn(() => true),
+    useUiFlag: vi.fn(
+        (flag: string) => flag !== 'disableShowContextFieldSelectionValues',
+    ),
 }));
 
 test('should show alert when you have illegal legal values', async () => {

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

@@ -88,7 +88,9 @@ export const RestrictiveLegalValues = ({
     // Lazily initialise the values because there might be a lot of them.
     const [valuesMap, setValuesMap] = useState(() => createValuesMap(values));
 
-    const newContextFieldsUI = useUiFlag('newContextFieldsUI');
+    const disableShowContextFieldSelectionValues = useUiFlag(
+        'disableShowContextFieldSelectionValues',
+    );
 
     const cleanDeletedLegalValues = (constraintValues: string[]): string[] => {
         const deletedValuesSet = getLegalValueSet(deletedLegalValues);
@@ -162,14 +164,9 @@ export const RestrictiveLegalValues = ({
                 <ConstraintFormHeader>
                     Select values from a predefined set
                 </ConstraintFormHeader>
-                <ConditionallyRender
+                <Button variant={'text'} onClick={onSelectAll}>
-                    condition={newContextFieldsUI}
+                    {isAllSelected ? 'Unselect all' : 'Select all'}
-                    show={
+                </Button>
-                        <Button variant={'text'} onClick={onSelectAll}>
-                            {isAllSelected ? 'Unselect all' : 'Select all'}
-                        </Button>
-                    }
-                />
             </StyledStack>
             <ConditionallyRender
                 condition={legalValues.length > 100}
@@ -177,7 +174,8 @@ export const RestrictiveLegalValues = ({
                     <>
                         <ConditionallyRender
                             condition={
-                                Boolean(newContextFieldsUI) && Boolean(values)
+                                !disableShowContextFieldSelectionValues &&
+                                Boolean(values)
                             }
                             show={
                                 <StyledValuesContainer sx={{ border: 0 }}>

frontend/src/interfaces/uiConfig.ts

@@ -77,7 +77,7 @@ export type UiFlags = {
     outdatedSdksBanner?: boolean;
     projectOverviewRefactor?: string;
     collectTrafficDataUsage?: boolean;
-    newContextFieldsUI?: boolean;
+    disableShowContextFieldSelectionValues?: boolean;
     variantDependencies?: boolean;
     projectOverviewRefactorFeedback?: boolean;
 };

src/lib/__snapshots__/create-config.test.ts.snap

@@ -86,6 +86,7 @@ exports[`should create default config 1`] = `
       "disableMetrics": false,
       "disableNotifications": false,
       "disablePublishUnannouncedEvents": false,
+      "disableShowContextFieldSelectionValues": false,
       "disableUpdateMaxRevisionId": false,
       "displayEdgeBanner": false,
       "edgeBulkMetrics": false,
@@ -129,7 +130,6 @@ exports[`should create default config 1`] = `
         },
       },
       "migrationLock": true,
-      "newContextFieldsUI": false,
       "outdatedSdksBanner": false,
       "personalAccessTokensKillSwitch": false,
       "projectOverviewRefactor": false,

src/lib/types/experimental.ts

@@ -55,7 +55,7 @@ export type IFlagKey =
     | 'returnGlobalFrontendApiCache'
     | 'projectOverviewRefactor'
     | 'variantDependencies'
-    | 'newContextFieldsUI'
+    | 'disableShowContextFieldSelectionValues'
     | 'bearerTokenMiddleware'
     | 'projectOverviewRefactorFeedback';
 
@@ -266,8 +266,9 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_PROJECT_OVERVIEW_REFACTOR,
         false,
     ),
-    newContextFieldsUI: parseEnvVarBoolean(
+    disableShowContextFieldSelectionValues: parseEnvVarBoolean(
-        process.env.UNLEASH_EXPERIMENTAL_NEW_CONTEXT_FIELDS_UI,
+        process.env
+            .UNLEASH_EXPERIMENTAL_DISABLE_SHOW_CONTEXT_FIELD_SELECTION_VALUES,
         false,
     ),
     variantDependencies: parseEnvVarBoolean(

src/server-dev.ts

@@ -51,7 +51,7 @@ process.nextTick(async () => {
                         globalFrontendApiCache: true,
                         returnGlobalFrontendApiCache: false,
                         projectOverviewRefactor: true,
-                        newContextFieldsUI: true,
+                        disableShowContextFieldSelectionValues: false,
                         variantDependencies: true,
                         projectOverviewRefactorFeedback: true,
                     },