diff --git a/frontend/src/component/demo/demo-setup.ts b/frontend/src/component/demo/demo-setup.ts index db2d147a4b..af3a2ea204 100644 --- a/frontend/src/component/demo/demo-setup.ts +++ b/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 () => { - await deleteOldStrategies('demoApp.step2'); - await ensureUserIdContextExists(); -}; - -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 cleanUpContext = async () => { + const contextFields = await getContextFields(); + await deleteOldContextFields(contextFields); + await ensureUserIdContextExists(contextFields); }; 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(); }; diff --git a/frontend/src/component/demo/demo-topics.tsx b/frontend/src/component/demo/demo-topics.tsx index fbbd2eada5..ce7a622d7b 100644 --- a/frontend/src/component/demo/demo-topics.tsx +++ b/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: ( Expand the environment card to see all the defined - strategies by using the arrow button. + strategies. ), optional: true, + delay: 500, }, { - href: `/projects/${PROJECT}/features/demoApp.step2`, - target: 'button[data-testid="ADD_STRATEGY_BUTTON"]', + target: `div[data-testid="FEATURE_ENVIRONMENT_ACCORDION_${ENVIRONMENT}"] button[data-testid="ADD_STRATEGY_BUTTON"]`, content: ( Add a new strategy to this environment by using this button. ), + 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: ( Expand the environment card to see all the defined - strategies by using the arrow button. + strategies. ), 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: ( 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: ( Expand the environment card to see all the defined - strategies by using the arrow button. + strategies. ), 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: ( Add a new strategy to this environment by using this