fix(TDC-7452/Tour): Fix tour is changing to first step when closing (#…

…5311) * fix(TDC-7452/Tour): Fix tour is changing to first step when closing * Update packages/components/src/AppGuidedTour/AppGuidedTour.component.js Co-authored-by: Alexandre Amalric <119614409+aamalric-talend@users.noreply.github.com> --------- Co-authored-by: Alexandre Amalric <119614409+aamalric-talend@users.noreply.github.com>
Talend · May 20, 2024 · 003c7a4 · 003c7a4
1 parent 3d14e99
commit 003c7a4
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 7 deletions.
diff --git a/.changeset/large-apes-compare.md b/.changeset/large-apes-compare.md
@@ -0,0 +1,5 @@
+---
+"@talend/react-components": patch
+---
+
+fix(TDC-7452/Tour): Fix tour is changing to first step when closing
diff --git a/packages/components/src/AppGuidedTour/AppGuidedTour.component.js b/packages/components/src/AppGuidedTour/AppGuidedTour.component.js
@@ -1,11 +1,13 @@
-import { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import useLocalStorage from 'react-use/lib/useLocalStorage';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import useLocalStorage from 'react-use/lib/useLocalStorage';
+
+import PropTypes from 'prop-types';
+
+import I18N_DOMAIN_COMPONENTS from '../constants';
 import GuidedTour from '../GuidedTour';
-import Toggle from '../Toggle';
 import Stepper from '../Stepper';
-import I18N_DOMAIN_COMPONENTS from '../constants';
+import Toggle from '../Toggle';
 import DemoContentStep from './DemoContentStep.component';
 
 const DEMO_CONTENT_STEP_ID = 1;
@@ -73,8 +75,10 @@ function AppGuidedTour({
 			onRequestClose={() => {
 				onRequestClose();
 				setIsAlreadyViewed(true);
-				setCurrentStep(0);
-				setImportDemoContent(false);
+				if (importDemoContent) {
+					setImportDemoContent(false);
+					setCurrentStep(Math.max(0, currentStep - 1));
+				}
 			}}
 			steps={[
 				{

diff --git a/packages/components/src/AppGuidedTour/AppGuidedTour.test.js b/packages/components/src/AppGuidedTour/AppGuidedTour.test.js
@@ -95,4 +95,21 @@ describe('AppGuidedTour', () => {
 		);
 		expect(screen.queryByText('Import demo content')).not.toBeInTheDocument();
 	});
+	it('Should stay on the last page when finished', async () => {
+		const user = userEvent.setup();
+		const steps = [
+			{
+				content: {
+					header: 'Header',
+					body: () => 'Last page',
+				},
+			},
+		];
+		render(<AppGuidedTour {...DEFAULT_PROPS} steps={steps} demoContentSteps={null} />);
+		expect(screen.queryByText(/Last page/i)).not.toBeInTheDocument();
+		const nextBtn = document.querySelector('button[data-tour-elem="right-arrow"]');
+		await user.click(nextBtn);
+		await user.click(screen.getByText('Let me try'));
+		expect(screen.queryByText(/Last page/i)).toBeInTheDocument();
+	});
 });