fix: Fix AppLayoutToolbar breadcrumbs SSR glitch (take three) (#4123)

Author: TrevorBurnham

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

@@ -7,7 +7,9 @@ import BreadcrumbGroup from '../../../lib/components/breadcrumb-group';
 import { getFunnelKeySelector } from '../../../lib/components/internal/analytics/selectors';
 import { describeEachAppLayout, renderComponent } from './utils';
 
+import testutilStyles from '../../../lib/components/app-layout/test-classes/styles.selectors.js';
 import skeletonStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js';
+import toolbarStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/toolbar/styles.selectors.js';
 
 let widgetMockEnabled = false;
 function createWidgetizedComponentMock(Implementation: React.ComponentType, Skeleton: React.ComponentType) {
@@ -64,7 +66,7 @@ describeEachAppLayout({ themes: ['refresh-toolbar'] }, () => {
           tools="test tools"
         />
       );
-      expect(wrapper.findToolbar()).toBeFalsy();
+      expect(wrapper.findToolbar()).toBeTruthy(); // Needed for SSR
       expect(wrapper.findNavigation()).toBeFalsy();
       expect(wrapper.findBreadcrumbs()).toBeTruthy(); // Needed for SSR
       expect(wrapper.find(getFunnelKeySelector('funnel-name'))).toBeTruthy();
@@ -96,5 +98,13 @@ describeEachAppLayout({ themes: ['refresh-toolbar'] }, () => {
       rerender(<AppLayout navigationHide={true} toolsHide={true} />);
       expect(wrapper.findByClassName(skeletonStyles['toolbar-container'])).toBeFalsy();
     });
+
+    it('skeleton toolbar has correct classes for SSR compatibility', () => {
+      const { wrapper } = renderComponent(<AppLayout breadcrumbs="test breadcrumbs" />);
+      const toolbarContainer = wrapper.findByClassName(skeletonStyles['toolbar-container']);
+      expect(toolbarContainer).toBeTruthy();
+      expect(toolbarContainer!.getElement()).toHaveClass(toolbarStyles['universal-toolbar']);
+      expect(toolbarContainer!.getElement()).toHaveClass(testutilStyles.toolbar);
+    });
   });
 });

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

@@ -7,6 +7,8 @@ import { BreadcrumbGroupImplementation } from '../../../breadcrumb-group/impleme
 import { BreadcrumbGroupProps } from '../../../breadcrumb-group/interfaces';
 import { BreadcrumbsSlotContext } from '../contexts';
 
+import testutilStyles from '../../test-classes/styles.css.js';
+import toolbarStyles from '../toolbar/styles.css.js';
 import styles from './styles.css.js';
 
 interface ToolbarSlotProps {
@@ -18,7 +20,7 @@ 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)}
+    className={clsx(styles['toolbar-container'], toolbarStyles['universal-toolbar'], testutilStyles.toolbar, className)}
     style={{
       insetBlockStart: style?.insetBlockStart ?? 0,
       ...style,

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

@@ -148,14 +148,9 @@ export function AppLayoutToolbarImplementation({
   return (
     <ToolbarSlot
       ref={ref}
-      className={clsx(
-        styles['universal-toolbar'],
-        aiDrawer?.trigger && styles['with-ai-drawer'],
-        testutilStyles.toolbar,
-        {
-          [testutilStyles['mobile-bar']]: isMobile,
-        }
-      )}
+      className={clsx(aiDrawer?.trigger && styles['with-ai-drawer'], {
+        [testutilStyles['mobile-bar']]: isMobile,
+      })}
       style={{
         insetBlockStart: verticalOffsets.toolbar,
       }}