fix: ensure userId context exists when running demo (#4144)

https://linear.app/unleash/issue/2-1168/demo-ensure-userid-context-field-in-setup-steps

This ensures that the `userId` context field exists when we reach
specific demo topics that require it in order to be successfully
completed. This uses the `setup` property on those topics, where we'll
check for the existence of this context field and create it if it's not
found.

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`

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`,