Repository navigation
Fixes open-metadata/openmetadata-collate#7547: Redesign welcome and upgrade screens for 2.0 - #35657
Conversation
Welcome screen and the post-deploy upgrade screen (chunk-load error
fallback) now follow the 2.0 Figma designs (node 15445-4015, the
"Center-Aligned" row): new isometric illustrations with light and dark
variants, "Your {{platform}} is ready" headline, Connect a data source /
Take a product tour actions, and a brand-coloured bottom glow.
BrandClassBase gains getWelcomeScreenImg(theme), getUpgradeScreenImg(theme)
and getPlatformName() so a downstream build can swap the artwork and the
platform name. ErrorFallback reads the theme from the root element's
dark-mode class because the boundary wraps App and so sits outside
ThemeProvider (useTheme there throws and blanks the page).
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
github-actions
Bot
added
safe to test
…Fallback assets/svg is reserved for icons (tw-guard blocks new files there); these are illustrations, so they live in assets/img beside the old welcome PNG. Adds ErrorFallback.test.tsx for the chunk-load upgrade screen, the 500 fallback and the theme-specific artwork, and switches the upgrade page and card to the standard bg-secondary / bg-surface tokens so dark mode needs no overrides.
…screen Classic keeps the database-services entry point; AI mode's Connections opens on the 'all' sentinel. Routing goes through ConnectionsRouterClassBase so a downstream build that embeds Connections resolves its own path.
❌ PR checklist incompleteThis PR cannot be merged until the following are addressed on its linked issue:
The fields live on the linked issue in the Shipping project (open the issue → right sidebar → Projects). After you set them, re-run this check (or push a commit) — issue/project changes do not re-trigger it automatically. Maintainers can bypass this check by adding the |
🔄 Playwright impact map auto-refreshedThis PR touched specs or UI source that changed the source→spec routing map. I regenerated What is this file? It is the auto-generated half of Playwright's PR planner. It routes "if source X changes, run specs Y" by walking spec imports and cross-referencing What if I want to regenerate locally instead? Run this before pushing your next change to skip the bot commit: python3 .github/scripts/generate_playwright_impact_map.py
git add .github/playwright/impact-map.generated.json
git commit --amend --no-edit # or a separate commit |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Jest test CoverageUI tests summary
|
🚦 Removed from the merge queue —
|
The rule moves from MyDataPage into useFirstLoginWelcome so both homes apply it the same way: once per user, only while isWelcomeVisible is on, never on the tour. WelcomeScreenGate wraps the AI-mode /my-data route element (not MyData itself, which the user menu also opens in a modal).
…e-upgrade-screens-2.0
main added it-it.json after this branch's locale changes, so the merged tree failed the I18n Sync check.
![gitar-bot[bot]](https://avatars.githubusercontent.com/in/827041?s=60&v=4){kind=small}
🚦 Removed from the merge queue —
|
- Dismiss the welcome screen when its route is hidden and before either action navigates: the AI-mode home is kept alive, so it came back after Connect, the tour or any sidebar trip. - Route Connect a data source through useAddServiceAction, so the button is hidden from users who cannot create a service. - Replace raw pixel sizes with design tokens; let the actions wrap; keep the upgrade card's 636px minimum to md and up. - Move the glow gradients into WelcomeScreen.constants.ts. - Map the welcome/upgrade sources to a new WelcomeScreen.spec.ts and the AI landing spec instead of Tour.spec.ts, which main deleted in #35504.
🔄 Playwright impact map auto-refreshedThis PR touched specs or UI source that changed the source→spec routing map. I regenerated What is this file? It is the auto-generated half of Playwright's PR planner. It routes "if source X changes, run specs Y" by walking spec imports and cross-referencing What if I want to regenerate locally instead? Run this before pushing your next change to skip the bot commit: python3 .github/scripts/generate_playwright_impact_map.py
git add .github/playwright/impact-map.generated.json
git commit --amend --no-edit # or a separate commit |
Code Review ✅ Approved 3 closed / 3 findings🟡 Medium risk · Applying first-login gating to both classic and AI homes changes onboarding and navigation; a persistence or route mismatch could reopen the welcome screen unexpectedly. Redesigns the first-login welcome screen and post-deploy upgrade screen to the 2.0 designs, with light and dark artwork, theme tokens, and brand-overridable platform name and illustrations. Resolved this session: the upgrade screen now has test coverage, the kept-alive ✅ 3 closed✅ Quality: Upgrade screen has no tests, though the PR says unit tests cover it
✅ Bug: Kept-alive /my-data route keeps the welcome screen after navigating away
✅ Bug: Impact map points at Flow/Tour.spec.ts, which does not exist
VerificationRules No rules evaluated Functional validation Not enabledAuto-approval Not enabledFor more verification details, comment OptionsDisplay: compact → Showing compact verification results. Comment with these commands to change the behavior for this request:
Was this helpful? React with 👍 / 👎 | Powered by Gitar — free for open source |
| </Typography> | ||
| <Box | ||
| align="center" | ||
| className="tw:w-full tw:max-w-full tw:rounded-3xl tw:md:w-fit tw:md:min-w-159 tw:bg-surface tw:px-9 tw:py-17.5 tw:text-center" |
There was a problem hiding this comment.
The upgrade screen gives both Box elements background colors. The styling guide says Box is for layout only and must stay transparent. Use a surface element for the page background and a Card for the upgrade panel. This repository requirement must be satisfied before merging.
Context Used: AGENTS.md (source)
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
|
| Count | Rule |
|---|---|
| 1 | react-hooks/exhaustive-deps |
All findings
| Location | Rule | Message | |
|---|---|---|---|
| 🟡 | src/hooks/useFirstLoginWelcome.ts:62:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has missing dependencies: 'isTourPage', 'isWelcomeVisible', 'updateWelcome', and 'usernameExistsInCookie'. Either include them or remove th |
Fix locally (fast - only checks files changed in this branch):
make ui-checkstyle-changed
|
Describe your changes:
Fixes open-metadata/openmetadata-collate#7547
The first-login welcome screen and the post-deploy upgrade screen now follow the 2.0 designs, the "Center-Aligned" row). The welcome screen shows the new isometric illustration, "Welcome, {name}! 👋 / Your Context Platform is ready", the subtitle, Connect a data source → (add database service) and Take a product tour, over a brand-coloured bottom glow. The upgrade screen, which is shown when an app update makes the old page files fail to load, is a centred card with the new illustration, "A better {brandName} experience awaits! ✨", the refresh copy and a Refresh page button. Both screens have light and dark artwork and use theme tokens, so they follow the active theme and brand colour.
The old screens predate the 2.0 visual language and had no dark artwork.
Type of change:
High-level design:
BrandClassBasegainsgetWelcomeScreenImg(theme),getUpgradeScreenImg(theme)andgetPlatformName(). A downstream build swaps the artwork and the platform name by overriding the class (Collate does so in its companion PR, linked below); OSS returns the OpenMetadata artwork and "Context Platform".ErrorFallbackreads the theme from the root element'sdark-modeclass instead ofuseTheme(). The boundary wraps<App />inAppRoot, outsideThemeProvider, souseTheme()there throws and the fallback renders a blank page.lgup, so the longer "OpenMetadata" brand name does not wrap; belowlgit wraps instead of overflowing.assets/img/(they are illustrations;assets/svg/is reserved for icons andtw-guardblocks new files there).welcome-screen.png,om-upgrade.svgandwelcome-screen.style.lesshad no other users and are deleted.label.connect-a-data-source,label.context-platform,label.refresh-page,message.your-platform-is-ready,message.brand-updated-refresh-page; updatedmessage.welcome-screen-message,message.take-quick-product-tour,message.look-like-upgraded-om; removed the now-unusedmessage.hi-user-welcome-to. All 20 locales carry translations.MyDataPageintouseFirstLoginWelcome(unchanged: once per user vialoggedInUsers, only whileisWelcomeVisible, never on the tour).WelcomeScreenGateapplies it to the AI-mode home by wrapping the/my-dataroute element, notMyDataitself, which the user menu also opens in a modal.useAddServiceAction(the Connections page's own hook): classic opens the database-services wizard (/databaseServices/add-service, as before), AI mode opens every category (/all/add-service), and the button is hidden from users who cannot create a service.welcome-screen-close-btn.Tests:
Use cases covered
/databaseServices/add-service; Take a product tour opens/tour.Unit tests
WelcomScreen.test.tsx(render, close, classic vs AI add-service category, hidden without create permission, both actions close first),WelcomeScreenGate.test.tsx(first-time user shown and remembered, closed → home, hidden kept-alive route → home on return, returning user, tour, switched off) andErrorFallback.test.tsx(upgrade screen forChunkLoadErrorand the Vite/Safari dynamic-import failures, Refresh page →navigate(0), the 500 fallback + Home →resetErrorBoundary, light/dark artwork). WithMyDataPageand every personal-space suite: 195 suites, 1804 tests passed, 0 failed.Backend integration tests
make java_affected: No Java tests are impacted by this change.Ingestion integration tests
Playwright (UI) tests
playwright/e2e/Features/WelcomeScreen.spec.ts(classic: shown once, close → landing page, not shown again after reload, Connect →/databaseServices/add-service, tour →/tour; AI mode: shown on the home, Connect →/all/add-service, back to the kept-alive home without the welcome screen)..github/playwright/impact-map.json: the welcome/upgrade sources map toWelcomeScreen.spec.tsandAppMode/AppModeAiPersonaLandsAtRoot.spec.ts(the AI landing route the gate wraps). The earlier entry pointed atFlow/Tour.spec.ts, whichmaindeleted in Fixes #35541: Remove the Tour spec broken by the new landing page #35504.Run locally against the OSS UI dev server on a local server (
yarn lint:playwright0 errors, no findings in the new spec):WelcomeScreen.spec.ts --repeat-each=3 --retries=0: 12/12 passed (4 tests × 3).AppMode/AppModeAiPersonaLandsAtRoot.spec.ts --retries=0: 1/1 passed.components/MyData/**); the merge queue runs the full suite.Checkstyle
make ui-checkstyle-changed: tw-guard "No new Antd or raw-SVG imports", token audit "No hardcoded-value errors", ESLint 0 errors (1 pre-existingreact-hooks/exhaustive-depswarning inMyDataPage).yarn build && yarn bundle:runtime: "Bundle runtime check passed: 150 route chunks load with no unexpected undefined exports." The first CI run of this check timed out navigating to/signin(30s) before checking any route.Manual testing performed
yarn start) against a local server on :8585, signed in as admin.loggedInUsersand opened/my-data→ welcome screen, light and dark. Classic mode, OSS and Collate: Connect a data source →/databaseServices/add-service, Take a product tour →/tour(clicked in the browser). AI mode is covered byWelcomeScreen.spec.ts(above).srcin the browser.UI screen recording:
Captured at 1440×900 from the UI dev server against a local server, signed in as admin. Dark mode is normally AI-mode only (classic pins light), so the dark captures lift that pin in the browser for preview; the dev server also needs the production
BRAND_NAMEapplied in the browser to show the right brand name.Screen.Recording.2026-10-16.at.10.06.56.PM.mov
Checklist:
Fixes <issue-number>: <short explanation>Fixes #<issue-number>above.BrandClassBaseoverride pattern.Companion PR
Collate: open-metadata/openmetadata-collate#7548
🤖 Generated with Claude Code
Summary by Gitar
Connect a data sourceopens/all/add-serviceacross all categories, while classic mode still opens database servicesWelcomeScreenGateThis will update automatically on new commits.
The previous findings are addressed, but the upgrade screen must follow the repository’s shared-surface requirement before merging.
Findings
Summary
Redesigns the welcome and upgrade screens with theme-specific artwork and translated copy.
Reviews (4) · Last reviewed commit: "chore(playwright): auto-refresh impact-m..." · Reviewed by Greptile