fix: Fix AppLayoutToolbar breadcrumbs SSR glitch (#3856)

Co-authored-by: Joan Perals <[email protected]>

Author: TrevorBurnham

src/app-layout/visual-refresh-toolbar/skeleton/__tests__/skeleton-parts.test.tsx

@@ -0,0 +1,76 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { AppLayoutInternals } from '../../../../../lib/components/app-layout/visual-refresh-toolbar/interfaces';
+import { ToolbarSkeleton } from '../../../../../lib/components/app-layout/visual-refresh-toolbar/skeleton/skeleton-parts';
+import { ToolbarProps } from '../../../../../lib/components/app-layout/visual-refresh-toolbar/toolbar';
+import createWrapper from '../../../../../lib/components/test-utils/dom';
+
+describe('ToolbarSkeleton', () => {
+  test('renders with discoveredBreadcrumbs', () => {
+    const { container } = render(
+      <ToolbarSkeleton
+        appLayoutInternals={
+          {
+            breadcrumbs: null,
+            discoveredBreadcrumbs: {
+              items: [
+                { text: 'Home', href: '/home' },
+                { text: 'Page', href: '/page' },
+              ],
+            },
+          } as Partial<AppLayoutInternals> as AppLayoutInternals
+        }
+        toolbarProps={{} as ToolbarProps}
+      />
+    );
+
+    const wrapper = createWrapper(container);
+    const breadcrumbGroups = wrapper.findAllBreadcrumbGroups();
+
+    expect(breadcrumbGroups).toHaveLength(1);
+
+    const breadcrumbLinks = breadcrumbGroups[0].findBreadcrumbLinks();
+    expect(breadcrumbLinks).toHaveLength(2);
+    expect(breadcrumbLinks[0].getElement().textContent).toEqual('Home');
+    expect(breadcrumbLinks[1].getElement().textContent).toEqual('Page');
+  });
+
+  test('renders with own breadcrumbs', () => {
+    const { container } = render(
+      <ToolbarSkeleton
+        appLayoutInternals={
+          {
+            breadcrumbs: <div data-testid="custom-breadcrumbs">Custom Breadcrumbs</div>,
+            discoveredBreadcrumbs: null,
+          } as Partial<AppLayoutInternals> as AppLayoutInternals
+        }
+        toolbarProps={{} as ToolbarProps}
+      />
+    );
+
+    expect(container.querySelector('[data-testid="custom-breadcrumbs"]')).toBeTruthy();
+    expect(container.querySelector('[data-testid="custom-breadcrumbs"]')?.textContent).toEqual('Custom Breadcrumbs');
+  });
+
+  test('renders without breadcrumbs', () => {
+    const { container } = render(
+      <ToolbarSkeleton
+        appLayoutInternals={
+          {
+            breadcrumbs: null,
+            discoveredBreadcrumbs: null,
+          } as Partial<AppLayoutInternals> as AppLayoutInternals
+        }
+        toolbarProps={{} as ToolbarProps}
+      />
+    );
+
+    const wrapper = createWrapper(container);
+    const breadcrumbGroups = wrapper.findAllBreadcrumbGroups();
+
+    expect(breadcrumbGroups).toHaveLength(0);
+  });
+});

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

@@ -15,6 +15,7 @@ import {
   AppLayoutBottomContentSlot,
   AppLayoutTopContentSlot,
 } from '../internal';
+import { isWidgetReady } from '../state/invariants';
 import { ToolbarProps } from '../toolbar';
 import { SkeletonPartProps, SkeletonSlotsAttributes } from './interfaces';
 
@@ -58,12 +59,14 @@ export const SkeletonLayout = ({
     contentElAttributes,
   } = skeletonSlotsAttributes;
 
+  const isWidgetLoaded = isWidgetReady(appLayoutState);
+
   return (
     <VisualContext contextName="app-layout-toolbar">
       <div
         {...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })}
         ref={appLayoutState.rootRef as React.Ref<HTMLDivElement>}
-        data-awsui-app-layout-widget-loaded={false}
+        data-awsui-app-layout-widget-loaded={isWidgetLoaded}
         {...wrapperElAttributes}
         className={wrapperElAttributes?.className ?? clsx(styles.root, testutilStyles.root)}
         style={

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

@@ -5,7 +5,8 @@ import React from 'react';
 import { AppLayoutNotificationsImplementationProps } from '../notifications';
 import { AppLayoutToolbarImplementationProps } from '../toolbar';
 import { SkeletonPartProps } from './interfaces';
-import { BreadcrumbsSlot, NotificationsSlot, ToolbarSlot } from './slots';
+import { NotificationsSlot } from './slots';
+import { ToolbarSkeletonStructure } from './toolbar-container';
 
 import styles from './styles.css.js';
 
@@ -17,11 +18,7 @@ export const BeforeMainSlotSkeleton = React.forwardRef<HTMLElement, SkeletonPart
   ({ toolbarProps, appLayoutProps }, ref) => {
     return (
       <>
-        {!!toolbarProps && (
-          <ToolbarSlot ref={ref}>
-            <BreadcrumbsSlot ownBreadcrumbs={appLayoutProps.breadcrumbs} />
-          </ToolbarSlot>
-        )}
+        {!!toolbarProps && <ToolbarSkeletonStructure ref={ref} ownBreadcrumbs={appLayoutProps.breadcrumbs} />}
         {toolbarProps?.navigationOpen && <div className={styles.navigation} />}
       </>
     );
@@ -34,12 +31,11 @@ export const BeforeMainSlotSkeleton = React.forwardRef<HTMLElement, SkeletonPart
 
 export const ToolbarSkeleton = React.forwardRef<HTMLElement, AppLayoutToolbarImplementationProps>(
   ({ appLayoutInternals }: AppLayoutToolbarImplementationProps, ref) => (
-    <ToolbarSlot ref={ref}>
-      <BreadcrumbsSlot
-        ownBreadcrumbs={appLayoutInternals.breadcrumbs}
-        discoveredBreadcrumbs={appLayoutInternals.discoveredBreadcrumbs}
-      />
-    </ToolbarSlot>
+    <ToolbarSkeletonStructure
+      ref={ref}
+      ownBreadcrumbs={appLayoutInternals.breadcrumbs}
+      discoveredBreadcrumbs={appLayoutInternals.discoveredBreadcrumbs}
+    />
   )
 );
 

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

@@ -16,7 +16,14 @@ interface ToolbarSlotProps {
 }
 
 export const ToolbarSlot = React.forwardRef<HTMLElement, ToolbarSlotProps>(({ className, style, children }, ref) => (
-  <section ref={ref as React.Ref<any>} className={clsx(styles['toolbar-container'], className)} style={style}>
+  <section
+    ref={ref as React.Ref<any>}
+    className={clsx(styles['toolbar-container'], className)}
+    style={{
+      insetBlockStart: style?.insetBlockStart ?? 0,
+      ...style,
+    }}
+  >
     {children}
   </section>
 ));
@@ -40,11 +47,15 @@ interface BreadcrumbsSlotProps {
   discoveredBreadcrumbs?: BreadcrumbGroupProps | null;
 }
 
+const breadcrumbsSlotContextValue = { isInToolbar: true };
+
 export function BreadcrumbsSlot({ ownBreadcrumbs, discoveredBreadcrumbs }: BreadcrumbsSlotProps) {
+  const isSSR = typeof window === 'undefined';
+
   return (
-    <BreadcrumbsSlotContext.Provider value={{ isInToolbar: true }}>
+    <BreadcrumbsSlotContext.Provider value={breadcrumbsSlotContextValue}>
       <div className={styles['breadcrumbs-own']}>{ownBreadcrumbs}</div>
-      {discoveredBreadcrumbs && (
+      {discoveredBreadcrumbs && !isSSR && (
         <div className={styles['breadcrumbs-discovered']}>
           <BreadcrumbGroupImplementation
             {...discoveredBreadcrumbs}

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

@@ -0,0 +1,59 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+
+import { BreadcrumbGroupProps } from '../../../breadcrumb-group/interfaces';
+import { BreadcrumbsSlot, ToolbarSlot } from './slots';
+
+import testutilStyles from '../../test-classes/styles.css.js';
+import toolbarStyles from '../toolbar/styles.css.js';
+
+interface ToolbarContainerProps {
+  children: React.ReactNode;
+  hasAiDrawer?: boolean;
+}
+
+export function ToolbarContainer({ children, hasAiDrawer }: ToolbarContainerProps) {
+  return (
+    <div className={clsx(toolbarStyles['toolbar-container'], hasAiDrawer && toolbarStyles['with-ai-drawer'])}>
+      {children}
+    </div>
+  );
+}
+
+interface ToolbarBreadcrumbsSectionProps {
+  ownBreadcrumbs: React.ReactNode;
+  discoveredBreadcrumbs?: BreadcrumbGroupProps | null;
+  includeTestUtils?: boolean;
+}
+
+export function ToolbarBreadcrumbsSection({
+  ownBreadcrumbs,
+  discoveredBreadcrumbs,
+  includeTestUtils = false,
+}: ToolbarBreadcrumbsSectionProps) {
+  return (
+    <div
+      className={clsx(toolbarStyles['universal-toolbar-breadcrumbs'], includeTestUtils && testutilStyles.breadcrumbs)}
+    >
+      <BreadcrumbsSlot ownBreadcrumbs={ownBreadcrumbs} discoveredBreadcrumbs={discoveredBreadcrumbs} />
+    </div>
+  );
+}
+
+interface ToolbarSkeletonStructureProps {
+  ownBreadcrumbs: React.ReactNode;
+  discoveredBreadcrumbs?: BreadcrumbGroupProps | null;
+}
+
+export const ToolbarSkeletonStructure = React.forwardRef<HTMLElement, ToolbarSkeletonStructureProps>(
+  ({ ownBreadcrumbs, discoveredBreadcrumbs }, ref) => (
+    <ToolbarSlot ref={ref}>
+      <ToolbarContainer>
+        <ToolbarBreadcrumbsSection ownBreadcrumbs={ownBreadcrumbs} discoveredBreadcrumbs={discoveredBreadcrumbs} />
+        <div className={toolbarStyles['universal-toolbar-drawers']} />
+      </ToolbarContainer>
+    </ToolbarSlot>
+  )
+);

src/app-layout/visual-refresh-toolbar/state/use-skeleton-slots-attributes.ts

@@ -53,7 +53,6 @@ export const useSkeletonSlotsAttributes = (
       [customCssProps.navigationWidth]: `${navigationWidth}px`,
       [customCssProps.toolsWidth]: `${activeDrawerSize}px`,
     },
-    'data-awsui-app-layout-widget-loaded': true,
   };
 
   const mainElAttributes = {

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

@@ -6,11 +6,14 @@ import clsx from 'clsx';
 
 import { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';
 
+import { createWidgetizedComponent } from '../../../internal/widgets';
 import { AppLayoutProps } from '../../interfaces';
 import { OnChangeParams } from '../../utils/use-drawers';
 import { Focusable, FocusControlMultipleStates } from '../../utils/use-focus-control';
 import { AppLayoutInternals } from '../interfaces';
-import { BreadcrumbsSlot, ToolbarSlot } from '../skeleton/slots';
+import { ToolbarSkeleton } from '../skeleton/skeleton-parts';
+import { ToolbarSlot } from '../skeleton/slots';
+import { ToolbarBreadcrumbsSection, ToolbarContainer } from '../skeleton/toolbar-container';
 import { DrawerTriggers, SplitPanelToggleProps } from './drawer-triggers';
 import TriggerButton from './trigger-button';
 
@@ -197,7 +200,7 @@ export function AppLayoutToolbarImplementation({
           </div>
         )}
       </Transition>
-      <div className={clsx(styles['toolbar-container'], !!aiDrawer?.trigger && styles['with-ai-drawer'])}>
+      <ToolbarContainer hasAiDrawer={!!aiDrawer?.trigger}>
         {hasNavigation && (
           <nav {...navLandmarkAttributes} className={clsx(styles['universal-toolbar-nav'])}>
             <TriggerButton
@@ -221,12 +224,11 @@ export function AppLayoutToolbarImplementation({
           </nav>
         )}
         {(breadcrumbs || discoveredBreadcrumbs) && (
-          <div className={clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>
-            <BreadcrumbsSlot
-              ownBreadcrumbs={appLayoutInternals.breadcrumbs}
-              discoveredBreadcrumbs={appLayoutInternals.discoveredBreadcrumbs}
-            />
-          </div>
+          <ToolbarBreadcrumbsSection
+            ownBreadcrumbs={appLayoutInternals.breadcrumbs}
+            discoveredBreadcrumbs={appLayoutInternals.discoveredBreadcrumbs}
+            includeTestUtils={true}
+          />
         )}
         {(drawers?.length ||
           globalDrawers?.length ||
@@ -256,7 +258,9 @@ export function AppLayoutToolbarImplementation({
             />
           </div>
         )}
-      </div>
+      </ToolbarContainer>
     </ToolbarSlot>
   );
 }
+
+export const AppLayoutToolbar = createWidgetizedComponent(AppLayoutToolbarImplementation, ToolbarSkeleton);