From 9d680a782dad5312018bc2ff847c1246789bfeb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Tue, 9 May 2023 20:33:01 +0100
Subject: [PATCH] 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
---
 .../DemoStepTooltip/DemoStepTooltip.tsx        | 18 +++++++++---------
 frontend/src/component/demo/demo-topics.tsx    |  6 +++---
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/component/demo/DemoSteps/DemoStepTooltip/DemoStepTooltip.tsx b/frontend/src/component/demo/DemoSteps/DemoStepTooltip/DemoStepTooltip.tsx
index 53b1670742..4e30a2cdb4 100644
--- 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
index d984329eb0..5954338714 100644
--- 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>
                     </>
                 ),