feat(ui): migrate unauthenticated screens to core-components - #33575
chirag-madlani wants to merge 5 commits into
Conversation
Rewrite SignIn, Register (BasicSignup), ForgotPassword, ResetPassword, account activation, PageNotFound, post-signup profile (SignUpPage), plus the shared CarouselLayout and LoginButton to use @openmetadata/ui-core-components instead of antd. Forms adopt the react-hook-form + FieldProp/FormFields stack; layout uses Card, Typography, and Tailwind tokens; legacy .less files removed. Library changes: - render-field-element: forward `size` prop through to Input so `FieldProp.props.size` actually applies. - input: expose an `md` size that the login forms use. - select-native: matching size wiring. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
❌ 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 |
github-actions
Bot
added
safe to test
🔄 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 |
![gitar-bot[bot]](https://avatars.githubusercontent.com/in/827041?s=60&v=4){kind=small}
| <div | ||
| className={classNames( | ||
| DEFAULT_MEDIA_COLUMN_CLASSES, | ||
| carouselClassName | ||
| )}> | ||
| <LoginCarousel /> | ||
| </div> |
There was a problem hiding this comment.
💡 Performance: LoginCarousel now mounts on all viewports
In the no-video branch, the previous code rendered the carousel column only when the xl breakpoint matched (const mediaColumn = xl && (...)), so on smaller screens LoginCarousel was never mounted. The refactor always renders <LoginCarousel /> inside a column that is merely CSS-hidden below xl (tw:hidden tw:xl:flex). Because LoginCarousel is a React.lazy heavy widget, its chunk now downloads and its component mounts (running any autoplay/timer effects) even on mobile/tablet where it is invisible. Consider gating the mount on the breakpoint (e.g. keep a useBreakpoint/media-query check) so the lazy chunk and effects are avoided when the media column is not shown.
Mount LoginCarousel only when the xl breakpoint is active to avoid loading the lazy chunk on small screens.:
<div
className={classNames(
DEFAULT_MEDIA_COLUMN_CLASSES,
carouselClassName
)}>
{/* Only mount when the xl media column is actually visible */}
{isXl && <LoginCarousel />}
</div>
- Apply fix
Check the box to apply the fix or reply for a change | Was this helpful? React with 👍 / 👎
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| required: true, | ||
| rules: { | ||
| required: t('message.field-text-is-required', { | ||
| fieldText: t('label.first-name'), | ||
| }), | ||
| }, |
There was a problem hiding this comment.
The new first- and last-name rules only check whether the value is nonempty. If the user submits with Enter while a field containing only spaces is still focused, the blur-time trimming does not run, so registration accepts the value and the server persists a blank-looking display name. Please preserve the previous whitespace validation for both name fields.
| <BrandImage isMonoGram height={50} width={50} /> | ||
| <Typography | ||
| as="h1" | ||
| className="tw:whitespace-nowrap tw:text-center" |
There was a problem hiding this comment.
Forcing the welcome heading onto one line makes it overflow the card on narrow viewports and with longer translated brand names. At a 320px viewport, the surrounding and card padding leave roughly 192px for a display-size heading, which is too narrow for “Welcome to OpenMetadata.” Allow the heading to wrap, or apply nowrap only when enough width is available. The registration screen has the same pattern.
✅ Playwright Results — workflow succeededValidated commit ✅ 4491 passed · ❌ 0 failed · 🟡 5 flaky · ⏭️ 1 skipped · 🧰 0 lifecycle flaky PerformanceBlocking targets: ✅ met · Optimization targets: 🟡 in progress Shard-job maxima below are not the full workflow wall time; the linked run includes build, fixture, planning, and reporting. 🕒 Full workflow signal wall (to summary) 45m 33s ⏱️ Max setup 4m 33s · max shard execution 19m 16s · max shard-job elapsed before upload 23m 23s · reporting 19s 🌐 220.40 requests/attempt · 2.23 app boots/UI scenario · 38.24% common-shard skew Optimization targets still in progress:
🟡 5 flaky test(s) (passed on retry)
How to debug locally# Download playwright-test-results-<shard> artifact and unzip
npx playwright show-trace path/to/trace.zip # view trace |
4 participants
Summary
Migrate all unauthenticated login/onboarding screens from Ant Design + Less to
@openmetadata/ui-core-components(UntitledUI + Tailwind). Forms adopt the modernreact-hook-form+FieldProp/FormFieldsstack; layout usesCard,Typographyand design tokens; legacy.lessfiles removed.Screens migrated
/signin(SignInPage) — email/password + SSO branch/register(BasicSignup) — first/last name/email/password/confirm/forgot-password/users/password/reset/users/registrationConfirmation(AccountActivationConfirmation)/users/signup(post-signup SignUpPage — profile + team select)PageNotFound(/404)Shared helpers updated
CarouselLayout— antdLayout/Row/Col/Grid→ pure Tailwind splitLoginButton— antdButton→ core-componentsButtonLibrary changes (
openmetadata-ui-core-components)render-field-element.tsx— forwardsizeprop through toInputsoFieldProp.props.size = 'md'actually applies (previously silently stripped).input.tsx— expose a propermdsize that the login forms use.select-native.tsx— matching size wiring.Deletions — 7
.lessfiles (login.style.less,forgot-password.styles.less,reset-password.style.less,basic-signup.style.less,page-not-found.less,carousel-layout.less,login-button.style.less) and one unusedforgot-password.pngbg image.Test plan
yarn tw-guard— no new antd importsyarn i18n— locale files in syncExploreSearchInput.tsxand DateValue on main are unrelated)Screenshots
FormFieldsAlert(success/error variants)Notes
fontSizeon inputs is stillsm(14px) — bumping it tomdneeds the same library-forward pattern assize.PageNotFoundisn't reachable while logged out (router redirects invalid paths to/signin); manual verification requires a logged-in session.🤖 Generated with Claude Code
The PR is not yet safe to merge because registration still accepts whitespace-only first and last names.
Findings
Summary
Migrates unauthenticated authentication, onboarding, and error screens from Ant Design/Less to the shared core-component form and layout system.
Diagram
%%{init: {'theme': 'neutral'}}%% flowchart LR User[Unauthenticated user] --> Layout[CarouselLayout] Layout --> AuthScreens[Authentication and onboarding screens] AuthScreens --> CoreForms[HookForm and FormFields] CoreForms --> CoreInputs[Core Input and NativeSelect] AuthScreens --> AuthAPI[Authentication and user APIs]Reviews (4) · Last reviewed commit: "chore(ui): prettier fix on Login.spec.ts"