From 2e1064b1f78599b6dac9ff24b4e7d68a239a2d4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Tue, 2 May 2023 14:20:23 +0100
Subject: [PATCH] feat: demo sorts features by name (#3663)

https://linear.app/unleash/issue/2-983/can-we-we-reverse-order-of-the-toggles

This PR makes it so that, on topic navigation to the project overview
page, we assume a feature toggle name sorting by default:


![image](https://user-images.githubusercontent.com/14320932/235666804-94511704-010d-4173-809b-0c61252b02d6.png)

Relates to [roadmap](https://github.com/orgs/Unleash/projects/10) item:
#3537
---
 .../src/component/demo/DemoSteps/DemoSteps.tsx   |  5 ++++-
 frontend/src/component/demo/demo-topics.tsx      | 16 ++++++++--------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/frontend/src/component/demo/DemoSteps/DemoSteps.tsx b/frontend/src/component/demo/DemoSteps/DemoSteps.tsx
index bca119d2e5..86da1f0513 100644
--- a/frontend/src/component/demo/DemoSteps/DemoSteps.tsx
+++ b/frontend/src/component/demo/DemoSteps/DemoSteps.tsx
@@ -193,7 +193,10 @@ export const DemoSteps = ({
         const currentStep = currentTopic.steps[currentStepIndex];
         if (!currentStep) return;
 
-        if (currentStep.href && location.pathname !== currentStep.href) {
+        if (
+            currentStep.href &&
+            location.pathname !== currentStep.href.split('?')[0]
+        ) {
             navigate(currentStep.href);
         }
         waitForLoad(currentStep);
diff --git a/frontend/src/component/demo/demo-topics.tsx b/frontend/src/component/demo/demo-topics.tsx
index bce8d4ef40..78ac31db29 100644
--- a/frontend/src/component/demo/demo-topics.tsx
+++ b/frontend/src/component/demo/demo-topics.tsx
@@ -34,7 +34,7 @@ export const TOPICS: ITutorialTopic[] = [
         title: 'Enable/disable a feature toggle',
         steps: [
             {
-                href: `/projects/${PROJECT}`,
+                href: `/projects/${PROJECT}?sort=name`,
                 target: 'body',
                 placement: 'center',
                 content: (
@@ -63,7 +63,7 @@ export const TOPICS: ITutorialTopic[] = [
                 nextButton: true,
             },
             {
-                href: `/projects/${PROJECT}`,
+                href: `/projects/${PROJECT}?sort=name`,
                 target: `div[data-testid="TOGGLE-demoApp.step1-${ENVIRONMENT}"]`,
                 content: (
                     <>
@@ -87,7 +87,7 @@ export const TOPICS: ITutorialTopic[] = [
         title: 'Enable for a specific user',
         steps: [
             {
-                href: `/projects/${PROJECT}`,
+                href: `/projects/${PROJECT}?sort=name`,
                 target: 'body',
                 placement: 'center',
                 content: (
@@ -111,7 +111,7 @@ export const TOPICS: ITutorialTopic[] = [
                 nextButton: true,
             },
             {
-                href: `/projects/${PROJECT}`,
+                href: `/projects/${PROJECT}?sort=name`,
                 target: `a[href="${basePath}/projects/${PROJECT}/features/demoApp.step2"]`,
                 content: (
                     <Description>
@@ -263,7 +263,7 @@ export const TOPICS: ITutorialTopic[] = [
         setup: gradualRollout,
         steps: [
             {
-                href: `/projects/${PROJECT}`,
+                href: `/projects/${PROJECT}?sort=name`,
                 target: 'body',
                 placement: 'center',
                 content: (
@@ -293,7 +293,7 @@ export const TOPICS: ITutorialTopic[] = [
                 nextButton: true,
             },
             {
-                href: `/projects/${PROJECT}`,
+                href: `/projects/${PROJECT}?sort=name`,
                 target: `a[href="${basePath}/projects/${PROJECT}/features/demoApp.step3"]`,
                 content: (
                     <Description>
@@ -369,7 +369,7 @@ export const TOPICS: ITutorialTopic[] = [
         setup: variants,
         steps: [
             {
-                href: `/projects/${PROJECT}`,
+                href: `/projects/${PROJECT}?sort=name`,
                 target: 'body',
                 placement: 'center',
                 content: (
@@ -394,7 +394,7 @@ export const TOPICS: ITutorialTopic[] = [
                 nextButton: true,
             },
             {
-                href: `/projects/${PROJECT}`,
+                href: `/projects/${PROJECT}?sort=name`,
                 target: `a[href="${basePath}/projects/${PROJECT}/features/demoApp.step4"]`,
                 content: (
                     <Description>