Skip to content

feat(i18n): extract keys from onboarding tour #17709

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
max-datahub merged 2 commits into from
Jun 4, 2026
Merged

feat(i18n): extract keys from onboarding tour #17709

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2fc2c33
feat(i18n): extract keys from onboarding tour
max-datahub Jun 3, 2026
76d9c60
Merge branch 'master' into i18n/extract-onboarding
max-datahub Jun 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion datahub-web-react/src/app/onboarding/OnboardingTour.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Button } from 'antd';
import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useLocation } from 'react-router-dom';
import Tour from 'reactour';
import { useTheme } from 'styled-components';
Expand All @@ -18,6 +19,7 @@ type Props = {
};

export const OnboardingTour = ({ stepIds }: Props) => {
const { t } = useTranslation('onboarding');
const { educationSteps, setEducationSteps, educationStepIdsAllowlist } = useContext(EducationStepsContext);
const userUrn = useUserContext()?.user?.urn;
const theme = useTheme();
Expand Down Expand Up @@ -129,7 +131,7 @@ export const OnboardingTour = ({ stepIds }: Props) => {
scrollDuration={500}
accentColor={accentColor}
badgeContent={(current) => <span style={{ color: theme.colors.text }}>{current}</span>}
lastStepNextButton={<Button>Let&apos;s go!</Button>}
lastStepNextButton={<Button>{t('tour.letsGo')}</Button>}
getCurrentStep={handleStepChange}
update={updateKey}
/>
Expand Down
41 changes: 21 additions & 20 deletions datahub-web-react/src/app/onboarding/WelcomeToDataHubModal.components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Heading, Text } from '@components';
import { Spin } from 'antd';
import React from 'react';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';

import { typography } from '@components/theme';
Expand Down Expand Up @@ -57,10 +58,7 @@ const LoadingContainerBase = styled.div<{ width: string }>`
gap: 16px;
`;

export const LoadingContainer: React.FC<{ width: string; children?: React.ReactNode }> = ({
width,
children = 'Loading video...',
}) => (
export const LoadingContainer: React.FC<{ width: string; children?: React.ReactNode }> = ({ width, children }) => (
<LoadingContainerBase width={width}>
<Spin size="large" />
<Text size="lg" weight="medium" color="textSecondary">
Expand Down Expand Up @@ -115,19 +113,22 @@ interface VideoSlideProps {
width: string;
}

export const VideoSlide: React.FC<VideoSlideProps> = ({ videoSrc, isReady, onVideoLoad, width }) => (
<>
{isReady ? (
<StyledVideo width={width} autoPlay loop muted playsInline>
<source src={videoSrc} type="video/mp4" />
</StyledVideo>
) : (
<LoadingContainer width={width}>Loading video...</LoadingContainer>
)}
{videoSrc && !isReady && (
<HiddenPreloadVideo width={width} autoPlay loop muted playsInline onCanPlay={onVideoLoad}>
<source src={videoSrc} type="video/mp4" />
</HiddenPreloadVideo>
)}
</>
);
export const VideoSlide: React.FC<VideoSlideProps> = ({ videoSrc, isReady, onVideoLoad, width }) => {
const { t } = useTranslation('onboarding');
return (
<>
{isReady ? (
<StyledVideo width={width} autoPlay loop muted playsInline>
<source src={videoSrc} type="video/mp4" />
</StyledVideo>
) : (
<LoadingContainer width={width}>{t('welcome.loadingVideo')}</LoadingContainer>
)}
{videoSrc && !isReady && (
<HiddenPreloadVideo width={width} autoPlay loop muted playsInline onCanPlay={onVideoLoad}>
<source src={videoSrc} type="video/mp4" />
</HiddenPreloadVideo>
)}
</>
);
};
42 changes: 20 additions & 22 deletions datahub-web-react/src/app/onboarding/WelcomeToDataHubModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Button, Carousel, LoadedImage, Modal } from '@components';
import React, { useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';

import analytics, { EventType } from '@app/analytics';
import { useOnboardingTour } from '@app/onboarding/OnboardingTourContext.hooks';
Expand All @@ -18,7 +19,6 @@ import welcomeModalHomeScreenshot from '@images/welcome-modal-home-screenshot.pn

const SLIDE_DURATION_MS = 10000;
const DATAHUB_DOCS_URL = 'https://docs.datahub.com/docs/category/features';
const WELCOME_TO_DATAHUB_MODAL_TITLE = 'Welcome to DataHub';
const SKIP_WELCOME_MODAL_KEY = 'skipWelcomeModal';

interface VideoSources {
Expand All @@ -33,6 +33,8 @@ function checkShouldSkipWelcomeModal() {
}

export const WelcomeToDataHubModal = () => {
const { t } = useTranslation('onboarding');
const { t: tf } = useTranslation('common.feedback');
const [shouldShow, setShouldShow] = useState(false);
const [currentSlide, setCurrentSlide] = useState(0);
const [videoSources, setVideoSources] = useState<VideoSources | null>(null);
Expand Down Expand Up @@ -185,13 +187,13 @@ export const WelcomeToDataHubModal = () => {
if (videoLoading || !videoSources) {
return (
<Modal
title={WELCOME_TO_DATAHUB_MODAL_TITLE}
title={t('welcome.modalTitle')}
width={MODAL_WIDTH}
onCancel={() => closeTour('close_button')}
keyboard={false}
buttons={[
{
text: 'Get Started',
text: t('welcome.getStarted'),
variant: 'filled',
onClick: () => closeTour('get_started_button'),
},
Expand All @@ -200,7 +202,7 @@ export const WelcomeToDataHubModal = () => {
<SlideContainer>
<SlideTitle>&nbsp;</SlideTitle>
<VideoContainer>
<LoadingContainer width={MODAL_IMAGE_WIDTH}>Loading...</LoadingContainer>
<LoadingContainer width={MODAL_IMAGE_WIDTH}>{tf('loading')}</LoadingContainer>
</VideoContainer>
</SlideContainer>
</Modal>
Expand All @@ -216,7 +218,7 @@ export const WelcomeToDataHubModal = () => {

return (
<Modal
title={WELCOME_TO_DATAHUB_MODAL_TITLE}
title={t('welcome.modalTitle')}
width={MODAL_WIDTH}
onCancel={() => closeTour('close_button')}
keyboard={false}
Expand All @@ -240,7 +242,7 @@ export const WelcomeToDataHubModal = () => {
trackExternalLinkClick(DATAHUB_DOCS_URL);
}}
>
DataHub Docs
{t('welcome.docsLink')}
</StyledDocsLink>
) : undefined
}
Expand All @@ -251,17 +253,15 @@ export const WelcomeToDataHubModal = () => {
variant="filled"
onClick={() => closeTour('get_started_button')}
>
Get started
{t('welcome.getStarted')}
</Button>
) : undefined
}
infinite={false}
>
<SlideContainer>
<SlideTitle>Find Any Asset, Anywhere</SlideTitle>
<SlideDescription>
Search datasets, models, dashboards, and more across your entire stack
</SlideDescription>
<SlideTitle>{t('welcome.slideFindTitle')}</SlideTitle>
<SlideDescription>{t('welcome.slideFindDescription')}</SlideDescription>
<VideoContainer>
<VideoSlide
videoSrc={videoSources?.search}
Expand All @@ -272,8 +272,8 @@ export const WelcomeToDataHubModal = () => {
</VideoContainer>
</SlideContainer>
<SlideContainer>
<SlideTitle>Understand Your Data&apos;s Origin</SlideTitle>
<SlideDescription>See the full story of how your data was created and transformed</SlideDescription>
<SlideTitle>{t('welcome.slideLineageTitle')}</SlideTitle>
<SlideDescription>{t('welcome.slideLineageDescription')}</SlideDescription>
<VideoContainer>
<VideoSlide
videoSrc={videoSources?.lineage}
Expand All @@ -284,8 +284,8 @@ export const WelcomeToDataHubModal = () => {
</VideoContainer>
</SlideContainer>
<SlideContainer>
<SlideTitle>Manage Breaking Changes Confidently</SlideTitle>
<SlideDescription>Preview the full impact of schema and column changes</SlideDescription>
<SlideTitle>{t('welcome.slideImpactTitle')}</SlideTitle>
<SlideDescription>{t('welcome.slideImpactDescription')}</SlideDescription>
<VideoContainer>
<VideoSlide
videoSrc={videoSources?.impact}
Expand All @@ -297,8 +297,8 @@ export const WelcomeToDataHubModal = () => {
</SlideContainer>
{videoSources.aiDocs && (
<SlideContainer>
<SlideTitle>Documentation Without the Work</SlideTitle>
<SlideDescription>Save hours of manual work while improving discoverability</SlideDescription>
<SlideTitle>{t('welcome.slideDocsTitle')}</SlideTitle>
<SlideDescription>{t('welcome.slideDocsDescription')}</SlideDescription>
<VideoContainer>
<VideoSlide
videoSrc={videoSources?.aiDocs}
Expand All @@ -310,13 +310,11 @@ export const WelcomeToDataHubModal = () => {
</SlideContainer>
)}
<SlideContainer>
<SlideTitle>Ready to Get Started?</SlideTitle>
<SlideDescription>
Explore our comprehensive documentation or jump right in and start discovering your data
</SlideDescription>
<SlideTitle>{t('welcome.slideReadyTitle')}</SlideTitle>
<SlideDescription>{t('welcome.slideReadyDescription')}</SlideDescription>
<LoadedImage
src={welcomeModalHomeScreenshot}
alt={WELCOME_TO_DATAHUB_MODAL_TITLE}
alt={t('welcome.modalTitle')}
width={MODAL_IMAGE_WIDTH}
/>
</SlideContainer>
Expand Down
46 changes: 25 additions & 21 deletions datahub-web-react/src/app/onboarding/config/BusinessGlossaryOnboardingConfig.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Text } from '@components';
import React from 'react';
import { Trans } from 'react-i18next';

import { OnboardingStep } from '@app/onboarding/OnboardingStep';

Expand All @@ -10,60 +11,63 @@ export const BUSINESS_GLOSSARY_CREATE_TERM_GROUP_ID = 'business-glossary-create-
export const BusinessGlossaryOnboardingConfig: OnboardingStep[] = [
{
id: BUSINESS_GLOSSARY_INTRO_ID,
title: 'Business Glossary 📖',
title: <Trans i18nKey="onboarding:glossary.introTitle" />,
content: (
<Text type="div" size="md">
<p>
Welcome to the <strong>Business Glossary</strong>!
<Trans i18nKey="onboarding:glossary.introWelcome" components={{ bold: <strong /> }} />
</p>
<p>
The Glossary is a collection of structured, standarized labels you can use to categorize data
assets. You can view and create both <strong>Terms</strong> and <strong>Term Groups</strong> here.
<Trans i18nKey="onboarding:glossary.introDescription" components={{ bold: <strong /> }} />
</p>
</Text>
),
},
{
id: BUSINESS_GLOSSARY_CREATE_TERM_ID,
selector: `#${BUSINESS_GLOSSARY_CREATE_TERM_ID}`,
title: 'Glossary Terms',
title: <Trans i18nKey="onboarding:glossary.termsTitle" />,
content: (
<Text type="div" size="md">
<p>
Click here to create a new <strong>Term</strong> .
<Trans i18nKey="onboarding:glossary.createTerm" components={{ bold: <strong /> }} />
</p>
<p>
<strong>Terms</strong> are words or phrases with a specific business definition assigned to them.
<Trans i18nKey="onboarding:glossary.termsDescription" components={{ bold: <strong /> }} />
</p>
</Text>
),
},
{
id: BUSINESS_GLOSSARY_CREATE_TERM_GROUP_ID,
selector: `#${BUSINESS_GLOSSARY_CREATE_TERM_GROUP_ID}`,
title: 'Glossary Term Groups',
title: <Trans i18nKey="onboarding:glossary.termGroupsTitle" />,
content: (
<Text type="div" size="md">
<p>
Click here to create a new <strong>Term Group</strong>.
<Trans i18nKey="onboarding:glossary.createTermGroup" components={{ bold: <strong /> }} />
</p>
<p>
<strong>Term Groups</strong> act as folders, containing Terms and nested Term Groups.
<Trans i18nKey="onboarding:glossary.termGroupsDescription" components={{ bold: <strong /> }} />
</p>
<p>
For example, there could be a <strong>PII Term Group</strong> containing Terms for different types
of PII, such as <strong>Email</strong> or <strong>Phone Number</strong>.
<Trans i18nKey="onboarding:glossary.termGroupsExample" components={{ bold: <strong /> }} />
</p>
<p>
Learn more about the <strong>Business Glossary</strong>{' '}
<a
target="_blank"
rel="noreferrer noopener"
href="https://docs.datahub.com/docs/glossary/business-glossary"
>
{' '}
here.
</a>
<Trans
i18nKey="onboarding:glossary.learnMore"
components={{
bold: <strong />,
anchor: (
// eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label
<a
target="_blank"
rel="noreferrer noopener"
href="https://docs.datahub.com/docs/glossary/business-glossary"
/>
),
}}
/>
</p>
</Text>
),
Expand Down
31 changes: 20 additions & 11 deletions datahub-web-react/src/app/onboarding/config/DomainsOnboardingConfig.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Text } from '@components';
import React from 'react';
import { Trans } from 'react-i18next';

import { OnboardingStep } from '@app/onboarding/OnboardingStep';

Expand All @@ -9,34 +10,42 @@ export const DOMAINS_CREATE_DOMAIN_ID = 'domains-create-domain';
export const DomainsOnboardingConfig: OnboardingStep[] = [
{
id: DOMAINS_INTRO_ID,
title: 'Domains',
title: <Trans i18nKey="onboarding:domains.introTitle" />,
content: (
<Text type="div" size="md">
<p>
Welcome to DataHub <strong>Domains</strong>!
<Trans i18nKey="onboarding:domains.introWelcome" components={{ bold: <strong /> }} />
</p>
<p>
<strong>Domains</strong> are collections of related data assets associated with a specific part of
your organization, such as the <strong>Marketing</strong> department.
<Trans i18nKey="onboarding:domains.introDescription" components={{ bold: <strong /> }} />
</p>
<p>
Learn more about <strong>Domains</strong>{' '}
<a target="_blank" rel="noreferrer noopener" href="https://docs.datahub.com/docs/domains">
{' '}
here.
</a>
<Trans
i18nKey="onboarding:domains.learnMore"
components={{
bold: <strong />,
anchor: (
// eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label
<a
target="_blank"
rel="noreferrer noopener"
href="https://docs.datahub.com/docs/domains"
/>
),
}}
/>
</p>
</Text>
),
},
{
id: DOMAINS_CREATE_DOMAIN_ID,
selector: `#${DOMAINS_CREATE_DOMAIN_ID}`,
title: 'Create a new Domain',
title: <Trans i18nKey="onboarding:domains.createTitle" />,
content: (
<Text type="div" size="md">
<p>
Click here to create a new <strong>Domain</strong>.
<Trans i18nKey="onboarding:domains.create" components={{ bold: <strong /> }} />
</p>
</Text>
),
Expand Down
Loading
Loading