feat: Bottom drawer (v2) by georgylobko · Pull Request #3922 · cloudscape-design/components

georgylobko · 2025-10-09T15:26:24Z

Description

This PR introduces a new panel within existing AppLayout component. It does not affect any publicly available api. The only way to register it is using the existing plugin api registerDrawer with an additional parameter position: "bottom".

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

How has this been tested?

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-10-09T15:45:22Z

Codecov Report

❌ Patch coverage is 97.20280% with 8 lines in your changes missing coverage. Please review.
✅ Project coverage is 97.17%. Comparing base (7d2d06e) to head (aadf3cb).
⚠️ Report is 8 commits behind head on main.

Files with missing lines	Patch %	Lines
...al-refresh-toolbar/drawer/global-bottom-drawer.tsx	96.11%	3 Missing and 1 partial ⚠️
...ut/visual-refresh-toolbar/state/use-app-layout.tsx	94.73%	3 Missing ⚠️
...visual-refresh-toolbar/state/use-bottom-drawers.ts	98.21%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff            @@
##             main    #3922    +/-   ##
========================================
  Coverage   97.17%   97.17%            
========================================
  Files         854      856     +2     
  Lines       24988    25242   +254     
  Branches     8805     8937   +132     
========================================
+ Hits        24281    24528   +247     
- Misses        659      665     +6     
- Partials       48       49     +1

☔ 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-10-10T15:39:55Z

pages/app-layout/utils/external-widget.tsx

 });
+
+export const registerBottomDrawer = () => {
+  awsuiPlugins.appLayout.registerDrawer({


Can we from now on use the new awsuiWidgetsPlugins for all new runtime API?

Moved to the new runtime api

just-boris · 2025-10-10T15:52:58Z

src/app-layout/visual-refresh-toolbar/drawer/global-bottom-drawer.tsx

+                      if (!root) {
+                        return;
+                      }


Do we not need to clean up the refs when unmounting?

No, because refs.close refers to the object link, not its value

just-boris · 2025-10-10T15:54:21Z

src/app-layout/visual-refresh-toolbar/state/props-merger.ts

    }
    if (props.globalDrawers && !checkAlreadyExists(!!toolbar.globalDrawers, 'globalDrawers')) {
      toolbar.globalDrawersFocusControl = props.globalDrawersFocusControl;
+      toolbar.bottomDrawersFocusRef = props.bottomDrawersFocusRef;


Why does it go into props.globalDrawers condition instead of its own? What will happen if no global drawers registered?

Made it go into its own array

just-boris · 2025-10-10T15:57:44Z

src/app-layout/visual-refresh-toolbar/interfaces.ts

  maxGlobalDrawersSizes: Record<string, number>;
  drawers: ReadonlyArray<InternalDrawer>;
  drawersFocusControl: FocusControlState;
+  bottomDrawersFocusControl: FocusControlState;


AppLayoutInternals is the legacy widget interface which we will remove once all consumers update.

All new features should live AppLayoutWidgetizedState

just-boris · 2025-10-10T15:58:29Z

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

      "activeAiDrawerSize": 0,
      "activeDrawer": undefined,
      "activeDrawerSize": 290,
+      "activeGlobalBottomDrawerId": null,


Why is there a diff in the snapshot? Will it cause any impact in the widget?

just-boris

The comment about snapshot diff is blocking, everything else is FYI

just-boris · 2025-10-22T16:56:59Z

src/app-layout/visual-refresh-toolbar/drawer/global-bottom-drawer.tsx

+  useEffect(() => {
+    if (activeGlobalBottomDrawerId) {
+      openBottomDrawersHistory.current.add(activeGlobalBottomDrawerId);
+    }
+  }, [activeGlobalBottomDrawerId]);


Ok, I will resolve this thread for now, but please make a follow up

just-boris · 2025-10-22T16:58:04Z

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

-    getMaxHeight: useStableCallback(() => {
+    getMaxHeight: useCallback(() => {


This smells like a beginning of the problem, but up to you if you are comfortable with that risk or not

just-boris · 2025-10-22T16:59:16Z

src/internal/plugins/widget/index.ts


 /**
- * Registers a new runtime drawer to app layout
+ * Registers a new ai runtime drawer to app layout


Let's call it "left" in the comment too.

Not for this PR, but in general, we should look for removing "ai" from the naming, because it is not relevant. "Global" drawers may contain "AI" stuff too

just-boris · 2025-10-22T17:00:17Z

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

-  },
-  "AppLayoutSplitPanelDrawerBottomImplementation" => {
-    "appLayoutInternals": {
+    "widgetizedState": {


⛳️ There is still a diff in the snapshot even after the change is applied. It seems like more cross-boundary changes need to be fixed

…ize changes in the legacy contract

georgylobko deployed to dev-pages-react16 October 9, 2025 15:45 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react18 October 9, 2025 15:45 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react18 October 10, 2025 09:07 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react16 October 10, 2025 09:07 — with GitHub Actions View deployment

georgylobko marked this pull request as ready for review October 10, 2025 09:18

georgylobko requested a review from a team as a code owner October 10, 2025 09:18

georgylobko requested review from just-boris and patrixd and removed request for a team October 10, 2025 09:18

just-boris reviewed Oct 10, 2025

View reviewed changes

georgylobko force-pushed the feat/bottom-drawer-v2 branch from 7ef78e0 to d3771c6 Compare October 13, 2025 08:23

georgylobko deployed to dev-pages-react16 October 13, 2025 08:32 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react18 October 13, 2025 08:32 — with GitHub Actions View deployment

georgylobko force-pushed the feat/bottom-drawer-v2 branch 3 times, most recently from 7d952c5 to 2b86095 Compare October 15, 2025 12:20

georgylobko deployed to dev-pages-react16 October 15, 2025 12:29 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react18 October 15, 2025 12:29 — with GitHub Actions View deployment

georgylobko force-pushed the feat/bottom-drawer-v2 branch from 2b86095 to 27968fe Compare October 16, 2025 09:06

georgylobko deployed to dev-pages-react18 October 16, 2025 09:16 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react16 October 16, 2025 09:16 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react16 October 16, 2025 10:45 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react18 October 16, 2025 10:45 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react18 October 16, 2025 10:56 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react16 October 16, 2025 10:56 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react16 October 16, 2025 12:21 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react18 October 16, 2025 12:21 — with GitHub Actions View deployment

georgylobko force-pushed the feat/bottom-drawer-v2 branch from ad4ad2a to 7055078 Compare October 16, 2025 13:21

georgylobko deployed to dev-pages-react18 October 16, 2025 13:30 — with GitHub Actions View deployment

georgylobko force-pushed the feat/bottom-drawer-v2 branch from 87d7745 to 91da9d8 Compare October 22, 2025 12:17

georgylobko deployed to dev-pages-react16 October 22, 2025 12:26 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react18 October 22, 2025 12:26 — with GitHub Actions View deployment

georgylobko added 11 commits October 22, 2025 15:34

feat: Bottom drawer (v2)

27c3d34

chore: Cleanup

0a282cf

fix: U tests

d8d07d8

chore: Dedup useWidgetMessages

442f627

chore: updateDrawerConfig test for bottom drawers

a68bc2d

chore: Refactored message handling for ai and bottom drawers

893b68b

fix: Mobile and resizing behavior for bottom drawers

3db5728

chore: Additional test for bottom drawer resize api

a7158b9

chore: Ops metrics refactoring

0ddbdff

chore: Increase limit size

b00434e

chore: Refactoring, addressing review comments

1ca8827

georgylobko force-pushed the feat/bottom-drawer-v2 branch from be2861b to 1ca8827 Compare October 22, 2025 13:34

georgylobko deployed to dev-pages-react18 October 22, 2025 13:44 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react16 October 22, 2025 13:44 — with GitHub Actions View deployment

georgylobko requested a review from just-boris October 22, 2025 16:05

just-boris reviewed Oct 22, 2025

View reviewed changes

georgylobko added 2 commits October 23, 2025 12:52

chore: Replace widgetizedState with bottomDrawerReportedSize to minim…

3855c8f

…ize changes in the legacy contract

chore: Small refactoring

aadf3cb

georgylobko deployed to dev-pages-react16 October 23, 2025 11:06 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react18 October 23, 2025 11:06 — with GitHub Actions View deployment

georgylobko requested a review from just-boris October 23, 2025 12:06

just-boris approved these changes Oct 23, 2025

View reviewed changes

georgylobko added this pull request to the merge queue Oct 24, 2025

Merged via the queue into main with commit 031f2af Oct 24, 2025
49 checks passed

georgylobko deleted the feat/bottom-drawer-v2 branch October 24, 2025 09:01

kuahuu pushed a commit to kuahuu/components that referenced this pull request Oct 24, 2025

feat: Bottom drawer (v2) (cloudscape-design#3922)

9f8f63a

		getMaxHeight: useStableCallback(() => {
		getMaxHeight: useCallback(() => {

Conversation

georgylobko commented Oct 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How has this been tested?

Correctness

Security

Testing

Uh oh!

codecov bot commented Oct 9, 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!

georgylobko Oct 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

just-boris left a comment

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!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

georgylobko commented Oct 9, 2025 •

edited

Loading

codecov bot commented Oct 9, 2025 •

edited

Loading

georgylobko Oct 17, 2025 •

edited

Loading