fix: improve steps for demo guide toggle topic (#3728)

https://linear.app/unleash/issue/2-1006/steps-improvement-enabledisable-a-feature-toggle Step improvements for the "toggle" topic. Includes a smarter "Next" label that can also be "Start" or "Finish" depending (nice-to-have). Relates to [roadmap](https://github.com/orgs/Unleash/projects/10) item: #3537
Unleash · May 9, 2023 · 9d680a7 · 9d680a7
1 parent be11c08
commit 9d680a7
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/frontend/src/component/demo/DemoSteps/DemoStepTooltip/DemoStepTooltip.tsx b/frontend/src/component/demo/DemoSteps/DemoStepTooltip/DemoStepTooltip.tsx
@@ -86,6 +86,13 @@ export const DemoStepTooltip = ({
     onBack,
     onNext,
 }: IDemoStepTooltipProps) => {
+    const nextLabel =
+        stepIndex === 0
+            ? 'Start'
+            : stepIndex === topics[topic].steps.length - 1
+            ? 'Finish'
+            : 'Next';
+
     if (step.target === 'body') {
         return (
             <div {...tooltipProps}>
@@ -136,11 +143,7 @@ export const DemoStepTooltip = ({
                                         sx={{ alignSelf: 'flex-end' }}
                                         data-testid="DEMO_NEXT_BUTTON"
                                     >
-                                        {topic === topics.length - 1 &&
-                                        stepIndex ===
-                                            topics[topic].steps.length - 1
-                                            ? 'Finish'
-                                            : 'Next'}
+                                        {nextLabel}
                                     </Button>
                                 }
                             />
@@ -192,10 +195,7 @@ export const DemoStepTooltip = ({
                                 sx={{ alignSelf: 'flex-end' }}
                                 data-testid="DEMO_NEXT_BUTTON"
                             >
-                                {topic === topics.length - 1 &&
-                                stepIndex === topics[topic].steps.length - 1
-                                    ? 'Finish'
-                                    : 'Next'}
+                                {nextLabel}
                             </Button>
                         }
                     />

diff --git a/frontend/src/component/demo/demo-topics.tsx b/frontend/src/component/demo/demo-topics.tsx
@@ -69,11 +69,11 @@ export const TOPICS: ITutorialTopic[] = [
                 content: (
                     <>
                         <Description>
-                            The simplest way to use a feature toggle is to
-                            enable or disable it for everyone (on/off).
+                            Enable or disable the feature for everyone by
+                            toggling the highlighted switch.
                         </Description>
                         <Badge sx={{ mt: 2 }} icon={<InfoOutlinedIcon />}>
-                            Look at the demo page when toggling!
+                            Look at the demo page to see your changes!
                         </Badge>
                     </>
                 ),