diff --git a/frontend/src/component/demo/demo-setup.ts b/frontend/src/component/demo/demo-setup.ts index 6a01c152cb..05609fe93d 100644 --- a/frontend/src/component/demo/demo-setup.ts +++ b/frontend/src/component/demo/demo-setup.ts @@ -1,9 +1,36 @@ +import { IUnleashContextDefinition } from 'interfaces/context'; import { IFeatureToggle } from 'interfaces/featureToggle'; import { formatApiPath } from 'utils/formatPath'; const PROJECT = 'demo-app'; const ENVIRONMENT = 'dev'; +const ensureUserIdContextExists = async () => { + const contextFields: IUnleashContextDefinition[] = + (await fetch(formatApiPath('api/admin/context')).then(res => + res.json() + )) || []; + + if (!contextFields.find(({ name }) => name === 'userId')) { + await fetch(formatApiPath('api/admin/context'), { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + name: 'userId', + description: 'Allows you to constrain on userId', + legalValues: [], + stickiness: true, + }), + }); + } +}; + +export const specificUser = async () => { + await ensureUserIdContextExists(); +}; + export const gradualRollout = async () => { const featureId = 'demoApp.step3'; @@ -43,6 +70,8 @@ export const gradualRollout = async () => { export const variants = async () => { const featureId = 'demoApp.step4'; + await ensureUserIdContextExists(); + const { variants }: IFeatureToggle = await fetch( formatApiPath( `api/admin/projects/${PROJECT}/features/${featureId}?variantEnvironments=true` diff --git a/frontend/src/component/demo/demo-topics.tsx b/frontend/src/component/demo/demo-topics.tsx index a0918e5ef3..a45f74724c 100644 --- a/frontend/src/component/demo/demo-topics.tsx +++ b/frontend/src/component/demo/demo-topics.tsx @@ -2,7 +2,7 @@ import { Typography, TypographyProps, styled } from '@mui/material'; import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; import { Badge } from 'component/common/Badge/Badge'; import { Step } from 'react-joyride'; -import { gradualRollout, variants } from './demo-setup'; +import { specificUser, gradualRollout, variants } from './demo-setup'; import { basePath, formatAssetPath } from 'utils/formatPath'; import demoUserId from 'assets/img/demo-userid.png'; @@ -90,6 +90,7 @@ export const TOPICS: ITutorialTopic[] = [ }, { title: 'Enable for a specific user', + setup: specificUser, steps: [ { href: `/projects/${PROJECT}?sort=name`,