fix: demo flow consistency with new flag page (#9770)

https://linear.app/unleash/issue/2-3512/bug-flow-2-enable-for-a-specific-user-doesnt-work

https://linear.app/unleash/issue/2-3513/bug-flow-4-adjust-variants-doesnt-work

Follow-up to #9765 

This should make the demo flow a bit more consistent with the new page
design.

The page seems a bit slower in general, so we're being a bit more
aggressive on the cleaning up of demo data to make it faster as well as
adding some delays in key steps of the flow.

frontend/src/component/demo/demo-setup.ts

@@ -5,12 +5,47 @@ import { formatApiPath } from 'utils/formatPath';
 const PROJECT = 'demo-app';
 const ENVIRONMENT = 'dev';
 
-const ensureUserIdContextExists = async () => {
+const CONTEXT_FIELDS_TO_KEEP = [
+    'appName',
+    'country',
+    'currentTime',
+    'sessionId',
+    'userId',
+];
+
+const getContextFields = async () => {
     const contextFields: IUnleashContextDefinition[] =
         (await fetch(formatApiPath('api/admin/context')).then((res) =>
             res.json(),
         )) || [];
 
+    return contextFields;
+};
+
+const deleteOldContextFields = async (
+    contextFields: IUnleashContextDefinition[],
+) => {
+    const outdatedContextFields = contextFields
+        .filter((field) => !CONTEXT_FIELDS_TO_KEEP.includes(field.name))
+        .sort(
+            (a, b) =>
+                new Date(b.createdAt).getTime() -
+                new Date(a.createdAt).getTime(),
+        )
+        .slice(10);
+
+    await Promise.all(
+        outdatedContextFields.map((field) =>
+            fetch(formatApiPath(`api/admin/context/${field.name}`), {
+                method: 'DELETE',
+            }),
+        ),
+    );
+};
+
+const ensureUserIdContextExists = async (
+    contextFields: IUnleashContextDefinition[],
+) => {
     if (!contextFields.find(({ name }) => name === 'userId')) {
         await fetch(formatApiPath('api/admin/context'), {
             method: 'POST',
@@ -27,46 +62,10 @@ const ensureUserIdContextExists = async () => {
     }
 };
 
-export const specificUser = async () => {
+const cleanUpContext = async () => {
-    await deleteOldStrategies('demoApp.step2');
+    const contextFields = await getContextFields();
-    await ensureUserIdContextExists();
+    await deleteOldContextFields(contextFields);
-};
+    await ensureUserIdContextExists(contextFields);
-
-export const gradualRollout = async () => {
-    await deleteOldStrategies('demoApp.step3');
-    const featureId = 'demoApp.step3';
-
-    const { environments }: IFeatureToggle = await fetch(
-        formatApiPath(
-            `api/admin/projects/${PROJECT}/features/${featureId}?variantEnvironments=true`,
-        ),
-    ).then((res) => res.json());
-
-    const strategies =
-        environments.find(({ name }) => name === ENVIRONMENT)?.strategies || [];
-
-    if (!strategies.find(({ name }) => name === 'flexibleRollout')) {
-        await fetch(
-            formatApiPath(
-                `api/admin/projects/${PROJECT}/features/${featureId}/environments/${ENVIRONMENT}/strategies`,
-            ),
-            {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    name: 'flexibleRollout',
-                    constraints: [],
-                    parameters: {
-                        rollout: '50',
-                        stickiness: 'default',
-                        groupId: featureId,
-                    },
-                }),
-            },
-        );
-    }
 };
 
 const deleteStrategy = (featureId: string, strategyId: string) =>
@@ -98,7 +97,7 @@ const deleteOldStrategies = async (featureId: string) => {
         ),
     );
 
-    const strategyLimit = 25;
+    const strategyLimit = 10;
     if (constrainedStrategies.length >= strategyLimit) {
         await Promise.all(
             constrainedStrategies
@@ -179,8 +178,50 @@ const ensureDefaultVariants = async (featureId: string) => {
     }
 };
 
+export const specificUser = async () => {
+    await deleteOldStrategies('demoApp.step2');
+    await cleanUpContext();
+};
+
+export const gradualRollout = async () => {
+    await deleteOldStrategies('demoApp.step3');
+    const featureId = 'demoApp.step3';
+
+    const { environments }: IFeatureToggle = await fetch(
+        formatApiPath(
+            `api/admin/projects/${PROJECT}/features/${featureId}?variantEnvironments=true`,
+        ),
+    ).then((res) => res.json());
+
+    const strategies =
+        environments.find(({ name }) => name === ENVIRONMENT)?.strategies || [];
+
+    if (!strategies.find(({ name }) => name === 'flexibleRollout')) {
+        await fetch(
+            formatApiPath(
+                `api/admin/projects/${PROJECT}/features/${featureId}/environments/${ENVIRONMENT}/strategies`,
+            ),
+            {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    name: 'flexibleRollout',
+                    constraints: [],
+                    parameters: {
+                        rollout: '50',
+                        stickiness: 'default',
+                        groupId: featureId,
+                    },
+                }),
+            },
+        );
+    }
+};
+
 export const variants = async () => {
     await deleteOldStrategies('demoApp.step4');
     await ensureDefaultVariants('demoApp.step4');
-    await ensureUserIdContextExists();
+    await cleanUpContext();
 };

frontend/src/component/demo/demo-topics.tsx

@@ -131,24 +131,26 @@ export const TOPICS: ITutorialTopic[] = [
             },
             {
                 href: `/projects/${PROJECT}/features/demoApp.step2`,
-                target: `div[data-testid="FEATURE_ENVIRONMENT_ACCORDION_${ENVIRONMENT}"] .MuiAccordionSummary-expandIconWrapper`,
+                target: `div[data-testid="FEATURE_ENVIRONMENT_ACCORDION_${ENVIRONMENT}"] > div[aria-expanded="false"]`,
                 content: (
                     <Description>
                         Expand the environment card to see all the defined
-                        strategies by using the arrow button.
+                        strategies.
                     </Description>
                 ),
                 optional: true,
+                delay: 500,
             },
             {
-                href: `/projects/${PROJECT}/features/demoApp.step2`,
+                target: `div[data-testid="FEATURE_ENVIRONMENT_ACCORDION_${ENVIRONMENT}"] button[data-testid="ADD_STRATEGY_BUTTON"]`,
-                target: 'button[data-testid="ADD_STRATEGY_BUTTON"]',
                 content: (
                     <Description>
                         Add a new strategy to this environment by using this
                         button.
                     </Description>
                 ),
+                delay: 500,
+                backCollapseExpanded: true,
             },
             {
                 target: `a[href="${basePath}/projects/${PROJECT}/features/demoApp.step2/strategies/create?environmentId=${ENVIRONMENT}&strategyName=flexibleRollout&defaultStrategy=true"]`,
@@ -365,17 +367,18 @@ export const TOPICS: ITutorialTopic[] = [
             },
             {
                 href: `/projects/${PROJECT}/features/demoApp.step3`,
-                target: `div[data-testid="FEATURE_ENVIRONMENT_ACCORDION_${ENVIRONMENT}"] .MuiAccordionSummary-expandIconWrapper`,
+                target: `div[data-testid="FEATURE_ENVIRONMENT_ACCORDION_${ENVIRONMENT}"] > div[aria-expanded="false"]`,
                 content: (
                     <Description>
                         Expand the environment card to see all the defined
-                        strategies by using the arrow button.
+                        strategies.
                     </Description>
                 ),
                 optional: true,
+                delay: 500,
             },
             {
-                target: `a[data-testid="STRATEGY_EDIT-flexibleRollout"]`,
+                target: `div[data-testid="FEATURE_ENVIRONMENT_ACCORDION_${ENVIRONMENT}"] a[data-testid="STRATEGY_EDIT-flexibleRollout"]`,
                 content: (
                     <Description>
                         Edit the existing gradual rollout strategy by using the
@@ -481,18 +484,19 @@ export const TOPICS: ITutorialTopic[] = [
             },
             {
                 href: `/projects/${PROJECT}/features/demoApp.step4`,
-                target: `div[data-testid="FEATURE_ENVIRONMENT_ACCORDION_${ENVIRONMENT}"] .MuiAccordionSummary-expandIconWrapper`,
+                target: `div[data-testid="FEATURE_ENVIRONMENT_ACCORDION_${ENVIRONMENT}"] > div[aria-expanded="false"]`,
                 content: (
                     <Description>
                         Expand the environment card to see all the defined
-                        strategies by using the arrow button.
+                        strategies.
                     </Description>
                 ),
                 optional: true,
+                delay: 500,
             },
             {
                 href: `/projects/${PROJECT}/features/demoApp.step4`,
-                target: 'button[data-testid="ADD_STRATEGY_BUTTON"]',
+                target: `div[data-testid="FEATURE_ENVIRONMENT_ACCORDION_${ENVIRONMENT}"] button[data-testid="ADD_STRATEGY_BUTTON"]`,
                 content: (
                     <Description>
                         Add a new strategy to this environment by using this