diff --git a/frontend/src/component/demo/demo-topics.tsx b/frontend/src/component/demo/demo-topics.tsx index a0022fa2579..0b3224520ec 100644 --- a/frontend/src/component/demo/demo-topics.tsx +++ b/frontend/src/component/demo/demo-topics.tsx @@ -72,10 +72,7 @@ export const TOPICS: ITutorialTopic[] = [ The simplest way to use a feature toggle is to enable or disable it for everyone (on/off). - } - > + }> Look at the demo page when toggling! @@ -205,10 +202,7 @@ export const TOPICS: ITutorialTopic[] = [ Enter your userId - } - > + }> You can find your userId on the demo page. @@ -244,10 +238,7 @@ export const TOPICS: ITutorialTopic[] = [ Finally, toggle{' '} demoApp.step2 - } - > + }> Look at the demo page to see your changes! @@ -296,8 +287,9 @@ export const TOPICS: ITutorialTopic[] = [ target: `a[href="${basePath}/projects/${PROJECT}/features/demoApp.step3"]`, content: ( - First, let's open the feature toggle configuration for{' '} - demoApp.step3 + First, open the feature toggle configuration for{' '} + demoApp.step3 by using this + link. ), preventDefault: true, @@ -308,7 +300,7 @@ export const TOPICS: ITutorialTopic[] = [ content: ( Expand the environment card to see all the defined - strategies. + strategies by using the arrow button. ), }, @@ -316,7 +308,8 @@ export const TOPICS: ITutorialTopic[] = [ target: `div[data-testid="FEATURE_ENVIRONMENT_ACCORDION_${ENVIRONMENT}"].Mui-expanded a[data-testid="STRATEGY_EDIT-flexibleRollout"]`, content: ( - Edit the existing gradual rollout strategy. + Edit the existing gradual rollout strategy by using the + "Edit" button. ), backCollapseExpanded: true, @@ -324,18 +317,35 @@ export const TOPICS: ITutorialTopic[] = [ { target: 'span[data-testid="ROLLOUT_SLIDER_ID"]', content: ( - Change the rollout percentage. + <> + + Change the rollout percentage by adjusting the + percentage slider. + + + When you're done, use the "Next" button in the + dialog. + + ), backCloseModal: true, nextButton: true, }, { target: 'button[data-testid="STRATEGY_FORM_SUBMIT_ID"]', - content: Save your strategy., + content: ( + + Save and apply your strategy by using this button. + + ), }, { target: 'button[data-testid="DIALOGUE_CONFIRM_ID"]', - content: Confirm your changes., + content: ( + + Confirm your changes by using this button. + + ), optional: true, backCloseModal: true, }, @@ -345,13 +355,10 @@ export const TOPICS: ITutorialTopic[] = [ content: ( <> - Finally, toggle{' '} - demoApp.step3 + Finally, enable or disable the feature with the new + variant by toggling the highlighted switch. - } - > + }> Look at the demo page to see your changes! @@ -514,10 +521,7 @@ export const TOPICS: ITutorialTopic[] = [ Enter your userId - } - > + }> You can find your userId on the demo page.