Mirrors/Stirling-PDF
Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2025-12-03 20:04:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix OnboardingTour not responding to translations (#4934)

Browse Source 
# Description of Changes
The onboarding tour wasn't presenting itself as having any dependencies
to React so would never be re-rendered after language changes.
This commit is contained in:
James Brunton 2025-11-18 10:15:05 +00:00 committed by GitHub
parent a415c457e9
commit a7fc36586a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/core/components/onboarding/OnboardingTour.tsx
View File

@ -1,4 +1,4 @@
import React from "react";
import React, { useMemo } from "react";
import { TourProvider, useTour, type StepType } from '@reactour/tour';
import { useOnboarding } from '@app/contexts/OnboardingContext';
import { useTranslation } from 'react-i18next';
@ -10,6 +10,7 @@ import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import CheckIcon from '@mui/icons-material/Check';
import TourWelcomeModal from '@app/components/onboarding/TourWelcomeModal';
import '@app/components/onboarding/OnboardingTour.css';
import i18n from "@app/i18n";
// Enum case order defines order steps will appear
enum TourStep {
@ -120,7 +121,7 @@ export default function OnboardingTour() {
} = useAdminTourOrchestration();
// Define steps as object keyed by enum - TypeScript ensures all keys are present
const stepsConfig: Record<TourStep, StepType> = {
const stepsConfig: Record<TourStep, StepType> = useMemo(() => ({
[TourStep.ALL_TOOLS]: {
selector: '[data-tour="tool-panel"]',
content: t('onboarding.allTools', 'This is the <strong>Tools</strong> panel, where you can browse and select from all available PDF tools.'),
@ -248,10 +249,10 @@ export default function OnboardingTour() {
position: 'right',
padding: 10,
},
};
}), [t]);
// Define admin tour steps
const adminStepsConfig: Record<AdminTourStep, StepType> = {
const adminStepsConfig: Record<AdminTourStep, StepType> = useMemo(() => ({
[AdminTourStep.WELCOME]: {
selector: '[data-tour="config-button"]',
content: t('adminOnboarding.welcome', "Welcome to the <strong>Admin Tour</strong>! Let's explore the powerful enterprise features and settings available to system administrators."),
@ -363,7 +364,7 @@ export default function OnboardingTour() {
removeAllGlows();
},
},
};
}), [t]);
// Select steps based on tour type
const steps = tourType === 'admin'
@ -416,7 +417,7 @@ export default function OnboardingTour() {
}}
/>
<TourProvider
key={tourType}
key={`${tourType}-${i18n.language}`}
steps={steps}
maskClassName={tourType === 'admin' ? 'admin-tour-mask' : undefined}
onClickClose={handleCloseTour}