Removed admin-x-framework's dependency on admin-x-design-system#29331
Open
9larsons wants to merge 2 commits into
Open
Removed admin-x-framework's dependency on admin-x-design-system#293319larsons wants to merge 2 commits into
9larsons wants to merge 2 commits into
Conversation
ref https://linear.app/ghost/issue/PLA-189/react-query-v4-v5-decide-execute The shared query/mutation factories in admin-x-framework multiply into every screen migrated out of Ember, so moving off the deprecated v4 major now avoids rewriting more call sites later in the migration. Mechanical changes for the v5 API: - cacheTime renamed to gcTime; removed logger and suspense QueryClient options from test clients - invalidateQueries/setQueriesData/getQueriesData now take filter objects instead of bare query keys - keepPreviousData option replaced with placeholderData: keepPreviousData; isPreviousData replaced by isPlaceholderData - useInfiniteQuery requires initialPageParam; passing undefined keeps first-page requests identical to v4 - mutation results renamed isLoading to isPending - the framework factories no longer override isLoading because v5's definition (isPending && isFetching) matches the old workaround - hook-testing-utils mocks updated to the v5 result shape (status 'pending', fetchStatus, isPending) - removed the react-query v4 fallback in gh-billing-iframe per its TODO
ref https://linear.app/ghost/issue/PLA-190/decouple-admin-x-framework-from-admin-x-design-system admin-x-framework is the long-lived foundation library, while admin-x-design-system is a legacy design system being replaced by shade. The framework depending on the design system meant every framework consumer dragged the legacy package into its dependency graph, and would block deleting the design system later. The design system has no reverse dependency on the framework, so the decouple is one-directional. Per coupling site: - use-handle-error.ts (showToast, runtime): moved a self-contained copy of the design system's error toast into src/utils/toast.tsx. The framework already depended on react-hot-toast directly, and the design system's showToast is only a styled react-hot-toast custom render, so the markup, classes, testid and the two icons were copied verbatim. Error toasts still render identically inside the design system's <Toaster> in admin-x-settings (the only surface that mounts a react-hot-toast Toaster today). Injecting a toast handler through FrameworkProvider was rejected as an unnecessary configuration seam. - utils/api/hooks.ts (usePagination, runtime): copied the hook (plus PaginationMeta/PaginationData) into src/hooks/use-pagination.ts. The framework's createPaginatedQuery is its own pagination contract; the design system keeps its copy because its Table/Pagination components use the PaginationData type, and a design-system->framework dependency must not be introduced. TypeScript's structural typing keeps the framework's pagination result assignable to design system props. - use-form.ts (ButtonColor, type): inlined the literal union. okProps stays structurally assignable to the design system's Button color. - focus-koenig-editor-on-bottom-click.ts (KoenigInstance, type): inlined the type. Consumers that type editor refs against the design system's KoenigInstance stay compatible structurally. - test/render.tsx (DesignSystemAppProps, type): inlined the minimal {darkMode, fetchKoenigLexical} shape the standalone renderer actually passes; it stays assignable to admin-x-settings' designSystem prop. The framework's toast markup now lives outside the design system, so its Tailwind classes must be scanned explicitly: added admin-x-framework/src to the @source lists of the central admin pipeline and admin-x-settings' standalone build instead of relying on the identical classes in the design system's own Toast staying scanned.
Contributor
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
| Command | Status | Duration | Result |
|---|---|---|---|
nx run-many --target=build --projects=tag:publi... |
✅ Succeeded | <1s | View ↗ |
nx run @tryghost/admin-x-settings:test:acceptance |
✅ Succeeded | 9m 57s | View ↗ |
nx run-many -t test:unit -p @tryghost/admin-x-f... |
✅ Succeeded | 8m 22s | View ↗ |
nx run ghost:test:ci:integration |
✅ Succeeded | 2m 51s | View ↗ |
nx run ghost:test:integration |
✅ Succeeded | 2m 16s | View ↗ |
nx run ghost-monorepo:lint:boundaries |
✅ Succeeded | 7s | View ↗ |
nx run-many -t lint -p @tryghost/admin-x-framew... |
✅ Succeeded | 3m 43s | View ↗ |
nx run @tryghost/koenig-lexical:test:acceptance |
✅ Succeeded | 2m 41s | View ↗ |
Additional runs (12) |
✅ Succeeded | ... | View ↗ |
💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗
☁️ Nx Cloud last updated this comment at 2026-07-14 20:21:40 UTC
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## slars/react-query-v5 #29331 +/- ##
========================================================
- Coverage 74.03% 74.00% -0.04%
========================================================
Files 1577 1577
Lines 136818 136818
Branches 16577 16566 -11
========================================================
- Hits 101298 101253 -45
- Misses 34478 34556 +78
+ Partials 1042 1009 -33
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
ref https://linear.app/ghost/issue/PLA-190/decouple-admin-x-framework-from-admin-x-design-system
admin-x-framework is the long-lived foundation library; admin-x-design-system is the legacy DS being replaced by shade. The framework depending on the DS dragged the legacy package into every consumer's graph and would block deleting the DS later. The DS has no reverse dependency, so the decouple is one-directional. All five coupling sites are resolved:
showToast(runtime) — moved a self-contained copy of the DS error toast intosrc/utils/toast.tsx(markup, classes,data-testid, icons copied verbatim;react-hot-toastwas already a direct framework dep). Error toasts render identically inside the DS<Toaster>in admin-x-settings — the only surface that mounts one today. Provider injection was rejected as an unnecessary configuration seam.usePagination(runtime) — copied intosrc/hooks/use-pagination.tswith itsPaginationMeta/PaginationDatatypes. The DS keeps its copy for its own Table/Pagination components (a DS→framework dep must not exist); structural typing keeps the framework's pagination result assignable to DS props. NotecreatePaginatedQueryhas no production consumer today — only framework tests.ButtonColor(type) — inlined the literal union inuse-form.ts.KoenigInstance(type) — inlined infocus-koenig-editor-on-bottom-click.ts, including the index signature so DS-typed editor refs stay compatible.DesignSystemAppProps(type) —test/render.tsx(the standalone-dev renderer used by settings/activitypubmain.tsx) now declares the minimal{darkMode, fetchKoenigLexical}shape it actually passes.Because the toast markup now lives outside the DS,
admin-x-framework/srcwas added to the Tailwind@sourcelists (central admin pipeline + admin-x-settings' standalone build) so its classes are scanned in their own right.Reviewer callouts
animate-toaster-in,shadow-md-heavy).<Toaster/>is mounted only by the DS provider, so framework error toasts were already invisible in apps/admin outside settings and in activitypub — worth closing later via shade.Verification
@tryghost/admin-x-design-systemreferencestsc && vite buildclean