Merge branch 'main' into alamiami/fix-overflowing-content-in-small-sc…

…reens

.github/workflows/release.yml

@@ -26,8 +26,8 @@ jobs:
       - run: npm run build
       - run: npm run test:unit
 
-  integTest:
-    name: Components integ tests
+  integTestShards:
+    name: Components integ tests shard
     runs-on: ubuntu-latest
     strategy:
       matrix:
@@ -42,8 +42,16 @@ jobs:
       - run: npm run build
       - run: npm run test:integ -- --shard=${{ matrix.shard }}/${{ strategy.job-total }}
 
-  a11yTest:
-    name: Components a11y tests
+  integTest:
+    name: Components integ tests
+    runs-on: ubuntu-latest
+    needs:
+      - integTestShards
+    steps:
+      - run: echo "Completed all integration tests"
+
+  a11yTestShards:
+    name: Components a11y tests shard
     runs-on: ubuntu-latest
     strategy:
       matrix:
@@ -58,6 +66,14 @@ jobs:
       - run: npm run build
       - run: npm run test:a11y -- --shard=${{ matrix.shard }}/${{ strategy.job-total }}
 
+  a11yTest:
+    name: Components a11y tests
+    runs-on: ubuntu-latest
+    needs:
+      - a11yTestShards
+    steps:
+      - run: echo "Completed all a11y tests"
+
   release:
     uses: cloudscape-design/actions/.github/workflows/release.yml@main
     secrets: inherit

pages/app/components/page-view.tsx

@@ -5,8 +5,6 @@ import React, { lazy, Suspense } from 'react';
 import pagesContext from '../pages-context';
 import ErrorBoundary from './error-boundary';
 
-import styles from './page-view.scss';
-
 const pagesComponents: Record<string, ReturnType<typeof lazy>> = {};
 
 export default function PageView({ pageId }: { pageId: string }) {
@@ -17,9 +15,7 @@ export default function PageView({ pageId }: { pageId: string }) {
   return (
     <ErrorBoundary key={pageId}>
       <Suspense fallback={<span>Loading...</span>}>
-        <div className={styles['page-container']}>
-          <Page />
-        </div>
+        <Page />
       </Suspense>
     </ErrorBoundary>
   );

pages/common/flush-response.ts

@@ -0,0 +1,18 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+export interface WindowWithFlushResponse extends Window {
+  __pendingCallbacks: Array<() => void>;
+  __flushServerResponse: () => void;
+}
+declare const window: WindowWithFlushResponse;
+
+export function enhanceWindow() {
+  window.__pendingCallbacks = [];
+  window.__flushServerResponse = () => {
+    for (const cb of window.__pendingCallbacks) {
+      cb();
+    }
+    window.__pendingCallbacks = [];
+  };
+}

pages/dropdown/width.page.tsx

@@ -9,6 +9,10 @@ import Select, { SelectProps } from '~components/select';
 import SpaceBetween from '~components/space-between';
 
 import AppContext, { AppContextType } from '../app/app-context';
+import { enhanceWindow, WindowWithFlushResponse } from '../common/flush-response';
+
+declare const window: WindowWithFlushResponse;
+enhanceWindow();
 
 type DemoContext = React.Context<
   AppContextType<{
@@ -18,6 +22,7 @@ type DemoContext = React.Context<
     virtualScroll: boolean;
     expandToViewport: boolean;
     containerWidth: string;
+    manualServerMock: boolean;
   }>
 >;
 
@@ -207,12 +212,17 @@ function CustomSelect({ expandToViewport, loading, onOpen, onClose, virtualScrol
 
 export default function () {
   const { urlParams } = useContext(AppContext as DemoContext);
-  const { asyncLoading, component, triggerWidth, virtualScroll, expandToViewport, containerWidth } = urlParams;
+  const { asyncLoading, component, triggerWidth, virtualScroll, expandToViewport, containerWidth, manualServerMock } =
+    urlParams;
   const [loading, setLoading] = useState(asyncLoading);
   const onOpen = () => {
     if (asyncLoading) {
       setLoading(true);
-      setTimeout(() => setLoading(false), 500);
+      if (manualServerMock) {
+        window.__pendingCallbacks.push(() => setLoading(false));
+      } else {
+        setTimeout(() => setLoading(false), 500);
+      }
     }
   };
   const onClose = () => setLoading(asyncLoading);

pages/table/expandable-rows-test.page.tsx

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { isEqual } from 'lodash';
 
 import { useCollection } from '@cloudscape-design/collection-hooks';
@@ -31,11 +31,15 @@ import messages from '~components/i18n/messages/all.en';
 import SpaceBetween from '~components/space-between';
 
 import AppContext, { AppContextType } from '../app/app-context';
+import { enhanceWindow, WindowWithFlushResponse } from '../common/flush-response';
 import { ariaLabels, getHeaderCounterText, Instance } from './expandable-rows/common';
 import { createColumns, createPreferences, filteringProperties } from './expandable-rows/expandable-rows-configs';
 import { allInstances } from './expandable-rows/expandable-rows-data';
 import { EmptyState, getMatchesCountText, renderAriaLive } from './shared-configs';
 
+declare const window: WindowWithFlushResponse;
+enhanceWindow();
+
 type LoadingState = Map<string, { pages: number; status: TableProps.LoadingStatus }>;
 
 type PageContext = React.Context<
@@ -51,6 +55,7 @@ type PageContext = React.Context<
     useProgressiveLoading: boolean;
     useServerMock: boolean;
     emulateServerError: boolean;
+    manualServerMock: boolean;
   }>
 >;
 
@@ -195,6 +200,18 @@ const NESTED_PAGE_SIZE = 2;
 function useTableData() {
   const settings = usePageSettings();
   const delay = settings.useServerMock ? SERVER_DELAY : 0;
+  const getServerResponse = useCallback(
+    (cb: () => void) => {
+      if (settings.manualServerMock) {
+        window.__pendingCallbacks.push(cb);
+        return () => {};
+      } else {
+        const timerRef = setTimeout(cb, delay);
+        return () => clearTimeout(timerRef);
+      }
+    },
+    [delay, settings.manualServerMock]
+  );
 
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(false);
@@ -204,13 +221,13 @@ function useTableData() {
   useEffect(() => {
     setLoading(true);
     setError(false);
-    setTimeout(() => {
+    return getServerResponse(() => {
       setReadyInstances(allInstances);
       setLoading(false);
       setError(settings.emulateServerError);
-    }, delay);
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [delay, setLoading, setError, setReadyInstances]);
+  }, [getServerResponse, setLoading, setError, setReadyInstances]);
 
   const collectionResult = useCollection(readyInstances, {
     pagination: settings.usePagination ? { pageSize: ROOT_PAGE_SIZE } : undefined,
@@ -245,14 +262,13 @@ function useTableData() {
   useEffect(() => {
     setLoading(true);
     setError(false);
-    const timeoutId = setTimeout(() => {
+    return getServerResponse(() => {
       setLoading(false);
       setReadyItems(memoItems);
       setError(settings.emulateServerError);
-    }, delay);
-    return () => clearTimeout(timeoutId);
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [delay, memoItems, setLoading, setError, setReadyItems]);
+  }, [getServerResponse, memoItems, setLoading, setError, setReadyItems]);
 
   // Decorate path options to only show the last node and not the full path.
   collectionResult.propertyFilterProps.filteringOptions = collectionResult.propertyFilterProps.filteringOptions.map(
@@ -277,7 +293,7 @@ function useTableData() {
   const loadItems = (id: string) => {
     setLoadingState(nextLoading(id));
     if (delay) {
-      setTimeout(() => setLoadingState(settings.emulateServerError ? nextError(id) : nextPending(id)), delay);
+      getServerResponse(() => setLoadingState(settings.emulateServerError ? nextError(id) : nextPending(id)));
     } else {
       setLoadingState(nextPending(id));
     }
@@ -355,6 +371,7 @@ function usePageSettings() {
     useProgressiveLoading: urlParams.useProgressiveLoading ?? true,
     groupResources: urlParams.groupResources ?? true,
     useServerMock: urlParams.useServerMock ?? false,
+    manualServerMock: urlParams.manualServerMock ?? false,
     emulateServerError: urlParams.emulateServerError ?? false,
     setUrlParams,
   };

pages/table/simulated-server-actions.page.tsx

@@ -58,15 +58,10 @@ export default function TableLatencyMetricsPage() {
         console.log('tableInteraction:', props);
       },
       taskCompletionData() {},
-      modalPerformanceData() {},
     });
 
     return () => {
-      setPerformanceMetrics({
-        tableInteraction: () => {},
-        taskCompletionData: () => {},
-        modalPerformanceData: () => {},
-      });
+      setPerformanceMetrics({ tableInteraction: () => {}, taskCompletionData: () => {} });
       delete (window as any).tableInteractionMetrics;
     };
   }, []);

src/__integ__/page-objects/async-response-page.ts

@@ -0,0 +1,14 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
+
+interface ExtendedWindow extends Window {
+  __flushServerResponse: () => void;
+}
+declare const window: ExtendedWindow;
+
+export class AsyncResponsePage extends BasePageObject {
+  flushResponse() {
+    return this.browser.execute(() => window.__flushServerResponse());
+  }
+}