feat: Global breadcrumbs feature flag (#5113)

Author: georgylobko

pages/app/index.tsx

@@ -26,6 +26,7 @@ import styles from './styles.scss';
 interface GlobalFlags {
   appLayoutWidget?: boolean;
   appLayoutToolbar?: boolean;
+  appLayoutHideToolbarBreadcrumbs?: boolean;
   oneTheme?: boolean;
 }
 // used for local dev / testing
@@ -99,9 +100,15 @@ function App() {
 }
 
 const history = createHashHistory();
-const { direction, visualRefresh, theme, appLayoutWidget, appLayoutToolbar, appLayoutDelayedWidget } = parseQuery(
-  history.location.search
-);
+const {
+  direction,
+  visualRefresh,
+  theme,
+  appLayoutWidget,
+  appLayoutToolbar,
+  appLayoutHideToolbarBreadcrumbs,
+  appLayoutDelayedWidget,
+} = parseQuery(history.location.search);
 const oneTheme = theme === Theme.OneTheme;
 // core-update is an override on top of visual refresh, so it always requires the visual refresh base.
 const coreNew = theme === Theme.CoreUpdate;
@@ -117,6 +124,7 @@ if (!window[awsuiCustomFlagsSymbol]) {
 }
 window[awsuiGlobalFlagsSymbol].appLayoutWidget = appLayoutWidget;
 window[awsuiGlobalFlagsSymbol].appLayoutToolbar = appLayoutToolbar;
+window[awsuiGlobalFlagsSymbol].appLayoutHideToolbarBreadcrumbs = appLayoutHideToolbarBreadcrumbs;
 window[awsuiCustomFlagsSymbol].appLayoutDelayedWidget = appLayoutDelayedWidget;
 window[awsuiGlobalFlagsSymbol].oneTheme = oneTheme;
 

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

@@ -155,11 +155,11 @@ Map {
         "toolbar": 0,
       },
     },
-    "breadcrumbsExternallyOwned": false,
     "featureNotificationsProps": {
       "drawer": null,
       "renderLatestFeaturePrompt": [Function],
     },
+    "hideBreadcrumbsInToolbar": false,
     "reportOwnBreadcrumbsProps": [Function],
     "toolbarProps": {
       "activeDrawerId": null,
@@ -1017,11 +1017,11 @@ Map {
         "toolbar": 0,
       },
     },
-    "breadcrumbsExternallyOwned": false,
     "featureNotificationsProps": {
       "drawer": null,
       "renderLatestFeaturePrompt": [Function],
     },
+    "hideBreadcrumbsInToolbar": false,
     "reportOwnBreadcrumbsProps": [Function],
     "toolbarProps": {
       "activeDrawerId": null,
@@ -2081,11 +2081,11 @@ Map {
         "toolbar": 0,
       },
     },
-    "breadcrumbsExternallyOwned": false,
     "featureNotificationsProps": {
       "drawer": null,
       "renderLatestFeaturePrompt": [Function],
     },
+    "hideBreadcrumbsInToolbar": false,
     "reportOwnBreadcrumbsProps": [Function],
     "toolbarProps": {
       "activeDrawerId": "security",

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

@@ -155,11 +155,11 @@ Map {
         "toolbar": 0,
       },
     },
-    "breadcrumbsExternallyOwned": false,
     "featureNotificationsProps": {
       "drawer": null,
       "renderLatestFeaturePrompt": [Function],
     },
+    "hideBreadcrumbsInToolbar": false,
     "reportOwnBreadcrumbsProps": [Function],
     "toolbarProps": {
       "activeDrawerId": null,
@@ -1018,11 +1018,11 @@ Map {
         "toolbar": 0,
       },
     },
-    "breadcrumbsExternallyOwned": false,
     "featureNotificationsProps": {
       "drawer": null,
       "renderLatestFeaturePrompt": [Function],
     },
+    "hideBreadcrumbsInToolbar": false,
     "reportOwnBreadcrumbsProps": [Function],
     "toolbarProps": {
       "activeDrawerId": null,

src/app-layout/__tests__/runtime-breadcrumbs-widgetized.test.tsx

@@ -3,6 +3,8 @@
 import React from 'react';
 import { act, cleanup, render, waitFor } from '@testing-library/react';
 
+import { setGlobalFlag } from '@cloudscape-design/component-toolkit/internal/testing';
+
 import AppLayout from '../../../lib/components/app-layout';
 import BreadcrumbGroup, { BreadcrumbGroupProps } from '../../../lib/components/breadcrumb-group';
 import { getFunnelNameSelector } from '../../../lib/components/internal/analytics/selectors';
@@ -363,4 +365,33 @@ describeEachAppLayout({ themes: ['refresh-toolbar'], sizes: ['desktop'] }, () =>
 
     second.unregister();
   });
+
+  describe('with appLayoutHideToolbarBreadcrumbs flag', () => {
+    const flagName = 'appLayoutHideToolbarBreadcrumbs';
+
+    beforeEach(() => setGlobalFlag(flagName, true));
+    afterEach(() => setGlobalFlag(flagName, undefined));
+
+    test('marks breadcrumbs as externally owned on first render without a consumer', () => {
+      render(<AppLayout breadcrumbs={<BreadcrumbGroup items={defaultItems} />} />);
+      expectAppLayoutBreadcrumbsToBeExternallyOwned();
+      expect(getAppLayoutBreadcrumbGroup()).toBeTruthy();
+    });
+
+    test('keeps breadcrumbs externally owned after the consumer unregisters', async () => {
+      const externalContainer = document.createElement('div');
+      const { registration } = registerExternalContainer(externalContainer);
+      render(<AppLayout breadcrumbs={<BreadcrumbGroup items={defaultItems} />} />);
+
+      await waitFor(() => expect(externalContainer).toHaveTextContent('Home / Resource'));
+      act(() => registration.unregister());
+      expectAppLayoutBreadcrumbsToBeExternallyOwned();
+    });
+  });
+
+  test('does not mark breadcrumbs as externally owned without the flag or a consumer', () => {
+    render(<AppLayout breadcrumbs={<BreadcrumbGroup items={defaultItems} />} />);
+    const breadcrumbsSection = getAppLayoutBreadcrumbsSection()?.getElement();
+    expect(breadcrumbsSection).not.toHaveAttribute('data-awsui-external-breadcrumbs');
+  });
 });

src/app-layout/utils/feature-flags.ts

@@ -23,3 +23,5 @@ export const useAppLayoutToolbarDesignEnabled = () => {
 
   return isToolbarPublic || isToolbarPrivate;
 };
+
+export const isAppLayoutHideToolbarBreadcrumbsEnabled = () => !!getGlobalFlag('appLayoutHideToolbarBreadcrumbs');

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

@@ -91,7 +91,7 @@ export interface AppLayoutInternals {
 }
 
 export interface AppLayoutWidgetizedState extends AppLayoutInternals {
-  breadcrumbsExternallyOwned?: boolean;
+  hideBreadcrumbsInToolbar?: boolean;
   reportOwnBreadcrumbsProps?: BreadcrumbsSlotContextType['reportOwnBreadcrumbsProps'];
   isNested: boolean;
   verticalOffsets: VerticalLayoutOutput;

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

@@ -28,26 +28,26 @@ export function ToolbarContainer({ children, hasAiDrawer }: ToolbarContainerProp
 interface ToolbarBreadcrumbsSectionProps {
   ownBreadcrumbs: React.ReactNode;
   discoveredBreadcrumbs?: BreadcrumbGroupProps | null;
-  breadcrumbsExternallyOwned?: boolean;
+  hideBreadcrumbsInToolbar?: boolean;
   reportOwnBreadcrumbsProps?: BreadcrumbsSlotContextType['reportOwnBreadcrumbsProps'];
   includeTestUtils?: boolean;
 }
 
 export function ToolbarBreadcrumbsSection({
   ownBreadcrumbs,
   discoveredBreadcrumbs,
-  breadcrumbsExternallyOwned,
+  hideBreadcrumbsInToolbar,
   reportOwnBreadcrumbsProps,
   includeTestUtils = false,
 }: ToolbarBreadcrumbsSectionProps) {
   return (
     <div
       className={clsx(
         toolbarStyles['universal-toolbar-breadcrumbs'],
-        breadcrumbsExternallyOwned && toolbarStyles['external-breadcrumbs'],
+        hideBreadcrumbsInToolbar && toolbarStyles['external-breadcrumbs'],
         includeTestUtils && testutilStyles.breadcrumbs
       )}
-      data-awsui-external-breadcrumbs={breadcrumbsExternallyOwned || undefined}
+      data-awsui-external-breadcrumbs={hideBreadcrumbsInToolbar || undefined}
     >
       <BreadcrumbsSlot
         ownBreadcrumbs={ownBreadcrumbs}

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

@@ -24,6 +24,7 @@ import globalVars from '../../../internal/styles/global-vars';
 import { getSplitPanelDefaultSize } from '../../../split-panel/utils/size-utils';
 import { AppLayoutProps } from '../../interfaces';
 import { SplitPanelProviderProps } from '../../split-panel';
+import { isAppLayoutHideToolbarBreadcrumbsEnabled } from '../../utils/feature-flags';
 import { MIN_DRAWER_SIZE, OnChangeParams, useDrawers } from '../../utils/use-drawers';
 import { useAsyncFocusControl, useMultipleFocusControl } from '../../utils/use-focus-control';
 import { useGlobalScrollPadding } from '../../utils/use-global-scroll-padding';
@@ -695,7 +696,7 @@ export const useAppLayout = (
     splitPanelInternals,
     widgetizedState: {
       ...appLayoutInternals,
-      breadcrumbsExternallyOwned: hasBreadcrumbsConsumer,
+      hideBreadcrumbsInToolbar: hasBreadcrumbsConsumer || isAppLayoutHideToolbarBreadcrumbsEnabled(),
       reportOwnBreadcrumbsProps,
       aiDrawerExpandedMode: expandedDrawerId === activeAiDrawer?.id,
       isNested,

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

@@ -68,15 +68,15 @@ export interface ToolbarProps {
 
 export interface AppLayoutToolbarImplementationProps {
   appLayoutInternals: AppLayoutInternals;
-  breadcrumbsExternallyOwned?: AppLayoutWidgetizedState['breadcrumbsExternallyOwned'];
+  hideBreadcrumbsInToolbar?: AppLayoutWidgetizedState['hideBreadcrumbsInToolbar'];
   reportOwnBreadcrumbsProps?: AppLayoutWidgetizedState['reportOwnBreadcrumbsProps'];
   toolbarProps: ToolbarProps;
   featureNotificationsProps?: FeatureNotificationsProps;
 }
 
 export function AppLayoutToolbarImplementation({
   appLayoutInternals,
-  breadcrumbsExternallyOwned,
+  hideBreadcrumbsInToolbar,
   reportOwnBreadcrumbsProps,
   // the value could be undefined if this component is loaded as a widget by a different app layout version
   // not testable in a single-version setup
@@ -235,7 +235,7 @@ export function AppLayoutToolbarImplementation({
             <ToolbarBreadcrumbsSection
               ownBreadcrumbs={appLayoutInternals.breadcrumbs}
               discoveredBreadcrumbs={appLayoutInternals.discoveredBreadcrumbs}
-              breadcrumbsExternallyOwned={breadcrumbsExternallyOwned}
+              hideBreadcrumbsInToolbar={hideBreadcrumbsInToolbar}
               reportOwnBreadcrumbsProps={reportOwnBreadcrumbsProps}
               includeTestUtils={true}
             />

src/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.tsx

@@ -54,7 +54,7 @@ export const BeforeMainSlotImplementationInternal = ({
     activeAiDrawer,
     bottomDrawerReportedSize,
     featureNotificationsProps,
-    breadcrumbsExternallyOwned,
+    hideBreadcrumbsInToolbar,
     reportOwnBreadcrumbsProps,
   } = appLayoutState.widgetizedState;
   const drawerExpandedMode = !!expandedDrawerId;
@@ -67,7 +67,7 @@ export const BeforeMainSlotImplementationInternal = ({
       {!!toolbarProps && !embeddedViewMode && !aiDrawerExpandedMode && (
         <AppLayoutToolbar
           appLayoutInternals={appLayoutState.appLayoutInternals}
-          breadcrumbsExternallyOwned={breadcrumbsExternallyOwned}
+          hideBreadcrumbsInToolbar={hideBreadcrumbsInToolbar}
           reportOwnBreadcrumbsProps={reportOwnBreadcrumbsProps}
           toolbarProps={toolbarProps}
           featureNotificationsProps={featureNotificationsProps}