chore: Refactor widgetized app layout implementation #3721

just-boris · 2025-08-05T16:05:58Z

Description

Revisit what is dynamically loaded and what is always a build-time dependency

Related links, issue #, if available: n/a

How has this been tested?

Yes

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

Changes include appropriate documentation updates.
Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
Changes do not include unsupported browser features, see CONTRIBUTING.md.
Changes were manually tested for accessibility, see accessibility guidelines.

Security

If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

Changes are covered with new/existing unit tests?
Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

codecov · 2025-08-06T15:04:29Z

Codecov Report

❌ Patch coverage is 98.89381% with 5 lines in your changes missing coverage. Please review.
✅ Project coverage is 97.01%. Comparing base (d12aac5) to head (16e11a9).

Files with missing lines	Patch %	Lines
...ut/visual-refresh-toolbar/state/use-app-layout.tsx	97.77%	3 Missing ⚠️
.../app-layout/visual-refresh-toolbar/state/index.tsx	84.61%	2 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff            @@
##             main    #3721    +/-   ##
========================================
  Coverage   97.01%   97.01%            
========================================
  Files         825      834     +9     
  Lines       23963    24140   +177     
  Branches     8006     8484   +478     
========================================
+ Hits        23248    23420   +172     
+ Misses        709      671    -38     
- Partials        6       49    +43

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

just-boris · 2025-08-12T21:10:13Z

pages/app/index.tsx

+// used for local dev / testing
+interface CustomFlags {
+  appLayoutDelayedWidget?: boolean;
+}


Example of this flag in action: https://d21d5uik3ws71m.cloudfront.net/components/0910fc65859f795dbdd5b95eeebd2b6809daa93a/dev-pages/index.html#/light/app-layout/default?appLayoutWidget=true&appLayoutDelayedWidget=true

Notice how the side panels loaded with a delay

Is CustomFlags should only be used to test, Shall we rename it like awsui-testing-flags ?

just-boris · 2025-08-12T21:12:38Z

src/app-layout-toolbar/__tests__/app-layout-toolbar.test.tsx

@@ -35,7 +36,7 @@ describe('AppLayoutToolbar component', () => {
    );
  });

-  test('triggerless navigation', () => {
+  test('triggerless navigation', async () => {


Here and in some cases below some tests have become async

This is needed because focus behavior is async now. I checked with a11y squad, the change is backward compatible

just-boris · 2025-08-12T21:17:10Z

src/app-layout/__tests__/widget-contract-old.test.tsx

We have snapshot tests on internal API between app layout parts.

This file represents the API between the old parts (expected to be deprecated and removed some day).

The other files represent the new API, the future proof one

just-boris · 2025-08-12T21:18:58Z

src/app-layout/visual-refresh-toolbar/skeleton/index.tsx

This file is the HTML rendered before the async part is loaded. All the red text here means this code moved to the async part of the codebase – this is the main point of this change

just-boris · 2025-08-12T21:20:28Z

src/app-layout/visual-refresh-toolbar/skeleton/multi-layout.ts

This file was in the mainline already, not really new code: https://github.com/cloudscape-design/components/blob/main/src/app-layout/visual-refresh-toolbar/multi-layout.ts

just-boris · 2025-08-12T21:26:08Z

src/app-layout/visual-refresh-toolbar/state/use-app-layout.tsx

Extracted code from this file into a hook: https://github.com/cloudscape-design/components/blob/main/src/app-layout/visual-refresh-toolbar/index.tsx

This is needed to make it asynchronously loaded as well

just-boris · 2025-08-12T21:27:18Z

src/app-layout/visual-refresh-toolbar/index.tsx

Minus 500 lines in this file, moved to other places you have seen above

just-boris · 2025-08-12T21:28:56Z

src/app-layout/visual-refresh-toolbar/index.tsx

+    stateManager.current.setState = (appLayoutState, skeletonAttributes, deduplicationProps, mergeProps) => {
+      setAppLayoutState(appLayoutState);
+      setSkeletonAttributes(skeletonAttributes);
+      setDeduplicationProps(deduplicationProps);
+      setDeduplicator({ fn: mergeProps });
    };


Important place no. 1 – this is how we synchronise the local and async parts of this code. See stateManager.current.setState above to see where this is called

just-boris · 2025-08-12T21:29:39Z

src/app-layout/visual-refresh-toolbar/index.tsx

+  useEffect(() => {
+    stateManager.current.hasToolbar = hasToolbar;
+    stateManager.current.setToolbar?.(hasToolbar);
+  }, [stateManager, hasToolbar]);


Important place no. 2 – here we send information back to the async part. Find the other instance of stateManager.current.setToolbar so see where it is used

chore: Move skeleton elements attributes to a widgetized hook chore: Move skeleton slots to widgets chore: Widgetize all remaining components feat: AppLayout state as widget chore: small fix chore: small fix chore: Small refactoring chore: Pull react-reverse-portal as src util chore: Revert unrelated changes in runtime-drawers.page.tsx fix: SSR tests fix: Skeleton part tests feat: Deliver skeleton slots attributes as a widget part fix: Unit tests chore: Update snapshots chore: Tests for reverse portal chore: Additional tests for reverse portal fix: Integ tests chore: Skip hash for class names in widget contract tests fix: Tests chore: Wrap up chore: Fallbacks for app layout component when is in loading state (avoiding layout cumulative shifting) chore: Delay breadcrumbs rendering until app layout state is loaded feat: Event-base prop passing Fix u tests and remove unused reverse-portal feat: Split app layout state into widgetized and built-in parts chore: Merge expanded mode chore: Merge from main fix: useMergeRefs import fix: remove unnecessary import fix: Navigation fallback for useMultiAppLayout chore: Refactoring, fixed tools test chore: Refactoring, fixed skeleton test chore: Update snapshots fix: header-variant test fix: toolbar test fix: multi-layout.test.tsx fix: slots.test.tsx fix: desktop.test.tsx chore: Update snapshots fix: split-panel.test.tsx fix: main.test.tsx fix: drawers.test.tsx fix: common.test.tsx fix: analytics-metadata.test.tsx chore: Update snapshots chore: Update snapshots feat: Async focus control chore: Migrate useUniqueId import to @cloudscape-design/component-toolkit fix: onMount type issue feat: Introduce useAsyncFocusControl chore: Clean up style hash in widget-contract-split-panel.test.tsx chore: Cleanup multi-layout-with-hidden-instances-iframe.page.tsx chore: Small test adjustment chore: Suppress an overlay for runtime errors in webpack config fix: Eslint error fix: AppLayoutPartLoader mounting issue chore: Increased a timeout for multi-layout.test.tsx chore: Types for a state manager chore: Wrapping up (type adjustments, snapshot upd) chore: Turn focusSplitPanel into async function (wait for an element before focusing on it) feat: Custom feature flag appLayoutDelayedWidget to test async widget behavior chore: Integ test for checking ensure the layout is not shifting after widget loading chore: Upd snapshot tests fix: Duplicate 'client' key in webpack.config.base.cjs fix: analytics metadata

mariksav · 2025-08-14T08:07:59Z

Great job Boris and Georgii! I can't find any obvious issues so I'm good with merging this. Will wait an give Yueying the time to review this as well though.

YueyingLu · 2025-08-14T09:32:49Z

src/app-layout/__integ__/widget-async-loading.test.ts

+    await testFn(page);
+  });
+
+describe.each(['refresh-toolbar'] as const)('%s', theme => {


Remove theme too?

YueyingLu · 2025-08-14T09:37:21Z

src/app-layout/__integ__/widget-async-loading.test.ts

+  splitPanelPosition?: string;
+  screenSize?: (typeof viewports)['desktop' | 'mobile'];
+  disableContentPaddings?: string;
+  theme: string;


It seems we do not needed splitPanelPosition disableContentPaddings and theme here?

YueyingLu · 2025-08-14T09:41:04Z

pages/app/index.tsx

+// used for local dev / testing
+interface CustomFlags {
+  appLayoutDelayedWidget?: boolean;
+}


Is CustomFlags should only be used to test, Shall we rename it like awsui-testing-flags ?

YueyingLu · 2025-08-14T10:01:41Z

src/app-layout/visual-refresh-toolbar/widget-areas/top-content-slot.tsx

+
+export const TopContentSlotImplementation = ({ appLayoutProps, appLayoutState }: SkeletonPartProps) => {
+  if (!isWidgetReady(appLayoutState)) {
+    return null;


This part loading can also make page shift, why does it not have a skeleton like beforeMain?

just-boris force-pushed the app-layout-new-widget branch 2 times, most recently from 4f3ab6b to 30608ee Compare August 6, 2025 10:03

just-boris deployed to dev-pages August 6, 2025 15:04 — with GitHub Actions View deployment

just-boris deployed to dev-pages August 6, 2025 17:40 — with GitHub Actions View deployment

just-boris force-pushed the app-layout-new-widget branch 3 times, most recently from d1d1054 to 03eb8db Compare August 7, 2025 12:03

just-boris deployed to dev-pages August 7, 2025 12:12 — with GitHub Actions View deployment

just-boris force-pushed the app-layout-new-widget branch from 064892b to d0ea796 Compare August 7, 2025 12:46

just-boris deployed to dev-pages August 7, 2025 13:16 — with GitHub Actions View deployment

just-boris force-pushed the app-layout-new-widget branch from 6a6fc35 to c68a088 Compare August 7, 2025 13:34

just-boris deployed to dev-pages August 7, 2025 13:43 — with GitHub Actions View deployment

just-boris requested a review from georgylobko August 7, 2025 14:37

just-boris force-pushed the app-layout-new-widget branch from dded29c to d73f905 Compare August 7, 2025 15:21

just-boris deployed to dev-pages August 7, 2025 15:30 — with GitHub Actions View deployment

just-boris force-pushed the app-layout-new-widget branch from d73f905 to aaff79b Compare August 8, 2025 11:01

just-boris deployed to dev-pages August 8, 2025 11:10 — with GitHub Actions View deployment

just-boris deployed to dev-pages August 8, 2025 12:37 — with GitHub Actions View deployment

just-boris force-pushed the app-layout-new-widget branch from 54326cb to 2ef1b2c Compare August 8, 2025 13:54

just-boris deployed to dev-pages August 8, 2025 14:03 — with GitHub Actions View deployment

just-boris force-pushed the app-layout-new-widget branch from 2ef1b2c to 5da31c1 Compare August 8, 2025 14:58

just-boris mentioned this pull request Aug 8, 2025

feat: Widgetize app layout skeleton event base #3497

Closed

just-boris deployed to dev-pages August 8, 2025 15:37 — with GitHub Actions View deployment

just-boris deployed to dev-pages August 8, 2025 15:55 — with GitHub Actions View deployment

just-boris force-pushed the app-layout-new-widget branch from 8e8a906 to e50070e Compare August 11, 2025 20:35

just-boris deployed to dev-pages August 11, 2025 20:44 — with GitHub Actions View deployment

just-boris mentioned this pull request Aug 11, 2025

fix: Handle multiple intersection changes in a single callback #3747

Merged

just-boris force-pushed the app-layout-new-widget branch from e50070e to 4b30399 Compare August 11, 2025 21:30

just-boris deployed to dev-pages August 11, 2025 21:39 — with GitHub Actions View deployment

just-boris force-pushed the app-layout-new-widget branch from 4b30399 to eddef65 Compare August 12, 2025 14:07

just-boris deployed to dev-pages August 12, 2025 14:16 — with GitHub Actions View deployment

just-boris deployed to dev-pages August 12, 2025 15:19 — with GitHub Actions View deployment

just-boris removed the request for review from georgylobko August 12, 2025 21:08

just-boris marked this pull request as ready for review August 12, 2025 21:09

just-boris requested a review from a team as a code owner August 12, 2025 21:09

just-boris requested review from mariksav and removed request for a team August 12, 2025 21:09

just-boris force-pushed the app-layout-new-widget branch from 0910fc6 to 45c0e9b Compare August 12, 2025 21:11

just-boris deployed to dev-pages August 12, 2025 21:20 — with GitHub Actions View deployment

just-boris commented Aug 12, 2025

View reviewed changes

just-boris force-pushed the app-layout-new-widget branch from 45c0e9b to dd43ba4 Compare August 13, 2025 08:13

continue work

16e11a9

just-boris force-pushed the app-layout-new-widget branch from dd43ba4 to 16e11a9 Compare August 13, 2025 08:13

just-boris deployed to dev-pages August 13, 2025 08:22 — with GitHub Actions View deployment

YueyingLu self-requested a review August 13, 2025 09:37

YueyingLu reviewed Aug 14, 2025

View reviewed changes

chore: Refactor widgetized app layout implementation #3721

Are you sure you want to change the base?

chore: Refactor widgetized app layout implementation #3721

Conversation

just-boris commented Aug 5, 2025

Description

How has this been tested?

Correctness

Security

Testing

Uh oh!

codecov bot commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mariksav commented Aug 14, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

codecov bot commented Aug 6, 2025 •

edited

Loading