fix: improve steps for demo guide gradual rollout topic (#3723)

https://linear.app/unleash/issue/2-1007/steps-improvement-adjust-gradual-rollout Step improvements for the "gradual rollout" topic. Relates to [roadmap](https://github.com/orgs/Unleash/projects/10) item: #3537
Unleash · May 9, 2023 · 0da0b13 · 0da0b13
1 parent 72f7b66
commit 0da0b13
Showing 1 changed file with 33 additions and 29 deletions.
diff --git 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).
                         </Description>
-                        <Badge
-                            sx={{ marginTop: 2 }}
-                            icon={<InfoOutlinedIcon />}
-                        >
+                        <Badge sx={{ mt: 2 }} icon={<InfoOutlinedIcon />}>
                             Look at the demo page when toggling!
                         </Badge>
                     </>
@@ -205,10 +202,7 @@ export const TOPICS: ITutorialTopic[] = [
                         <Description>
                             Enter your <Badge as="span">userId</Badge>
                         </Description>
-                        <Badge
-                            sx={{ marginTop: 2 }}
-                            icon={<InfoOutlinedIcon />}
-                        >
+                        <Badge sx={{ mt: 2 }} icon={<InfoOutlinedIcon />}>
                             You can find your userId on the demo page.
                         </Badge>
                     </>
@@ -244,10 +238,7 @@ export const TOPICS: ITutorialTopic[] = [
                             Finally, toggle{' '}
                             <Badge as="span">demoApp.step2</Badge>
                         </Description>
-                        <Badge
-                            sx={{ marginTop: 2 }}
-                            icon={<InfoOutlinedIcon />}
-                        >
+                        <Badge sx={{ mt: 2 }} icon={<InfoOutlinedIcon />}>
                             Look at the demo page to see your changes!
                         </Badge>
                     </>
@@ -296,8 +287,9 @@ export const TOPICS: ITutorialTopic[] = [
                 target: `a[href="${basePath}/projects/${PROJECT}/features/demoApp.step3"]`,
                 content: (
                     <Description>
-                        First, let's open the feature toggle configuration for{' '}
-                        <Badge as="span">demoApp.step3</Badge>
+                        First, open the feature toggle configuration for{' '}
+                        <Badge as="span">demoApp.step3</Badge> by using this
+                        link.
                     </Description>
                 ),
                 preventDefault: true,
@@ -308,34 +300,52 @@ export const TOPICS: ITutorialTopic[] = [
                 content: (
                     <Description>
                         Expand the environment card to see all the defined
-                        strategies.
+                        strategies by using the arrow button.
                     </Description>
                 ),
             },
             {
                 target: `div[data-testid="FEATURE_ENVIRONMENT_ACCORDION_${ENVIRONMENT}"].Mui-expanded a[data-testid="STRATEGY_EDIT-flexibleRollout"]`,
                 content: (
                     <Description>
-                        Edit the existing gradual rollout strategy.
+                        Edit the existing gradual rollout strategy by using the
+                        "Edit" button.
                     </Description>
                 ),
                 backCollapseExpanded: true,
             },
             {
                 target: 'span[data-testid="ROLLOUT_SLIDER_ID"]',
                 content: (
-                    <Description>Change the rollout percentage.</Description>
+                    <>
+                        <Description>
+                            Change the rollout percentage by adjusting the
+                            percentage slider.
+                        </Description>
+                        <Description sx={{ mt: 1 }}>
+                            When you're done, use the "Next" button in the
+                            dialog.
+                        </Description>
+                    </>
                 ),
                 backCloseModal: true,
                 nextButton: true,
             },
             {
                 target: 'button[data-testid="STRATEGY_FORM_SUBMIT_ID"]',
-                content: <Description>Save your strategy.</Description>,
+                content: (
+                    <Description>
+                        Save and apply your strategy by using this button.
+                    </Description>
+                ),
             },
             {
                 target: 'button[data-testid="DIALOGUE_CONFIRM_ID"]',
-                content: <Description>Confirm your changes.</Description>,
+                content: (
+                    <Description>
+                        Confirm your changes by using this button.
+                    </Description>
+                ),
                 optional: true,
                 backCloseModal: true,
             },
@@ -345,13 +355,10 @@ export const TOPICS: ITutorialTopic[] = [
                 content: (
                     <>
                         <Description>
-                            Finally, toggle{' '}
-                            <Badge as="span">demoApp.step3</Badge>
+                            Finally, enable or disable the feature with the new
+                            variant by toggling the highlighted switch.
                         </Description>
-                        <Badge
-                            sx={{ marginTop: 2 }}
-                            icon={<InfoOutlinedIcon />}
-                        >
+                        <Badge sx={{ mt: 2 }} icon={<InfoOutlinedIcon />}>
                             Look at the demo page to see your changes!
                         </Badge>
                     </>
@@ -514,10 +521,7 @@ export const TOPICS: ITutorialTopic[] = [
                         <Description>
                             Enter your <Badge as="span">userId</Badge>
                         </Description>
-                        <Badge
-                            sx={{ marginTop: 2 }}
-                            icon={<InfoOutlinedIcon />}
-                        >
+                        <Badge sx={{ mt: 2 }} icon={<InfoOutlinedIcon />}>
                             You can find your userId on the demo page.
                         </Badge>
                         <Description sx={{ mt: 1 }}>