From 4ca6a880332339c976241bedb7703d78cb9751b7 Mon Sep 17 00:00:00 2001 From: Yueying Lu Date: Thu, 4 Sep 2025 18:27:09 +0200 Subject: [PATCH] Revert "chore: Updates test pages and integ tests for compatibility with React 18 (1) (#3832)" This reverts commit b6e632cdf8faf2173a781f2db334ec2fcb492e4f. --- pages/sync-scrolls.page.tsx | 29 +- .../grid-navigation-custom.page.tsx | 43 ++- pages/table/instances-data.ts | 339 ------------------ src/table/__integ__/tall-rows.test.ts | 1 - .../__integ__/grid-navigation.test.ts | 16 +- 5 files changed, 45 insertions(+), 383 deletions(-) delete mode 100644 pages/table/instances-data.ts diff --git a/pages/sync-scrolls.page.tsx b/pages/sync-scrolls.page.tsx index fbab286954..ef796f0cc4 100644 --- a/pages/sync-scrolls.page.tsx +++ b/pages/sync-scrolls.page.tsx @@ -12,29 +12,16 @@ export default function App() { return ( <>

Syncing horizontal scrolls

-
-
{ - n++; - numberOfCallsRef.current?.setAttribute('data-call-number', n.toString()); - handleScroll(e); - }} - > +
{ + n++; + numberOfCallsRef.current?.setAttribute('data-call-number', n.toString()); + }} + > +
-
{ - n++; - numberOfCallsRef.current?.setAttribute('data-call-number', n.toString()); - handleScroll(e); - }} - > +
diff --git a/pages/table-fragments/grid-navigation-custom.page.tsx b/pages/table-fragments/grid-navigation-custom.page.tsx index 495cc4a7d0..ffc89876d8 100644 --- a/pages/table-fragments/grid-navigation-custom.page.tsx +++ b/pages/table-fragments/grid-navigation-custom.page.tsx @@ -1,6 +1,5 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 - import React, { useContext, useMemo, useRef, useState } from 'react'; import { orderBy, range } from 'lodash'; @@ -10,6 +9,7 @@ import { AppLayout, Button, ButtonDropdown, + Checkbox, CollectionPreferences, ColumnLayout, Container, @@ -26,6 +26,7 @@ import { SpaceBetween, StatusIndicator, } from '~components'; +import { useEffectOnUpdate } from '~components/internal/hooks/use-effect-on-update'; import { getTableCellRoleProps, getTableColHeaderRoleProps, @@ -40,8 +41,7 @@ import { import AppContext, { AppContextType } from '../app/app-context'; import appLayoutLabels from '../app-layout/utils/labels'; import { contentDisplayPreferenceI18nStrings } from '../common/i18n-strings'; -import { id as generateId, Instance } from '../table/generate-data'; -import { allInstances50 } from '../table/instances-data'; +import { generateItems, id as generateId, Instance } from '../table/generate-data'; import { stateToStatusIndicator } from '../table/shared-configs'; import styles from './styles.scss'; @@ -56,6 +56,7 @@ type PageContext = React.Context< pageSize: number; tableRole: TableRole; actionsMode: ActionsMode; + autoRefresh: boolean; visibleColumns: string; }> >; @@ -69,10 +70,6 @@ const actionsModeOptions = [ { value: 'inline', label: 'Inline (anti-pattern)' }, ]; -const allItems = allInstances50.slice(0, 25); - -let refreshIndex = 26; - export default function Page() { const [toolsOpen, setToolsOpen] = useState(false); const { urlParams, setUrlParams } = useContext(AppContext as PageContext); @@ -80,17 +77,23 @@ export default function Page() { pageSize = 10, tableRole = 'grid', actionsMode = 'dropdown', + autoRefresh = false, visibleColumns: visibleColumnsString = 'id,actions,state,imageId,dnsName,type,inline-select,inline-radio,inline-input', } = urlParams; const visibleColumns = visibleColumnsString.split(',').filter(Boolean); - const [items, setItems] = useState(allItems); - const refreshItems = () => - setItems(prev => - refreshIndex < 50 ? [...prev.slice(1), { ...allInstances50[refreshIndex++], id: generateId() }] : prev - ); - window.refreshItems = refreshItems; + const [items, setItems] = useState(generateItems(25)); + const [refreshCounter, setRefreshCounter] = useState(0); + window.refreshItems = () => setRefreshCounter(prev => prev + 1); + + useEffectOnUpdate(() => { + setItems(prev => [...prev.slice(1), ...generateItems(1)]); + if (autoRefresh) { + const timeoutId = setTimeout(() => setRefreshCounter(prev => prev + 1), 10000); + return () => clearTimeout(timeoutId); + } + }, [autoRefresh, refreshCounter]); const columnDefinitions = [ { @@ -207,6 +210,17 @@ export default function Page() { title="Preferences" confirmLabel="Confirm" cancelLabel="Cancel" + customPreference={( + customValue: undefined | { autoRefresh: boolean }, + setCustomValue: (value: { autoRefresh: boolean }) => void + ) => ( + setCustomValue({ autoRefresh: event.detail.checked })} + > + Auto-refresh every 10 seconds + + )} preferences={{ contentDisplay: columnDefinitions.map(column => ({ id: column.key, @@ -219,6 +233,7 @@ export default function Page() { .filter(column => column.visible) .map(column => column.id) .join(','), + autoRefresh: detail.custom.autoRefresh, }) } contentDisplayPreference={{ @@ -233,7 +248,7 @@ export default function Page() { }} /> - diff --git a/pages/table/instances-data.ts b/pages/table/instances-data.ts deleted file mode 100644 index 650b14887d..0000000000 --- a/pages/table/instances-data.ts +++ /dev/null @@ -1,339 +0,0 @@ -// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -// SPDX-License-Identifier: Apache-2.0 - -import { id, Instance } from './generate-data'; - -export const allInstances50: Instance[] = [ - { - id: id(), - state: 'TERMINATING', - type: 'm3.2xlarge', - imageId: 'ami-f99caccd', - dnsName: 'ec2-194-217-222-150.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'RUNNING', - type: 'c3.xlarge', - imageId: 'ami-73d78451', - dnsName: 'ec2-143-125-204-56.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'TERMINATED', - type: 't2.2xlarge', - imageId: 'ami-45547591', - dnsName: 'ec2-172-19-225-248.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'STOPPED', - type: 'c3.large', - imageId: 'ami-0ed16cea', - dnsName: 'ec2-170-176-160-69.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'TERMINATED', - type: 'm3.xlarge', - imageId: 'ami-36229b87', - dnsName: 'ec2-159-176-245-34.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'RUNNING', - type: 'm4.4xlarge', - imageId: 'ami-46a2b83c', - dnsName: 'ec2-65-29-115-126.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'TERMINATED', - type: 'm4.xlarge', - imageId: 'ami-04eda318', - dnsName: 'ec2-10-227-188-117.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'STOPPED', - type: 'r5.large', - imageId: 'ami-e4cf5abe', - dnsName: 'ec2-211-50-143-67.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'STOPPING', - type: 'c4.2xlarge', - imageId: 'ami-b9232ef8', - dnsName: 'ec2-39-233-140-60.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'STOPPING', - type: 'm3.xlarge', - imageId: 'ami-138ceae8', - dnsName: 'ec2-52-201-224-30.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'RUNNING', - type: 'r5d.metal', - imageId: 'ami-e73829ca', - dnsName: 'ec2-63-107-211-252.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'TERMINATING', - type: 'g2.2xlarge', - imageId: 'ami-56dc9dd9', - dnsName: 'ec2-46-123-158-225.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'RUNNING', - type: 'm5.xlarge', - imageId: 'ami-57f5713c', - dnsName: 'ec2-67-69-227-199.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'STOPPED', - type: 'c5.large', - imageId: 'ami-2f5fb5ea', - dnsName: 'ec2-110-147-125-12.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'TERMINATED', - type: 'cr1.8xlarge', - imageId: 'ami-9d2ac156', - dnsName: 'ec2-6-123-246-29.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'RUNNING', - type: 'm5.2xlarge', - imageId: 'ami-215045b6', - dnsName: 'ec2-153-233-77-97.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'TERMINATING', - type: 'm5.2xlarge', - imageId: 'ami-d5fbac0b', - dnsName: 'ec2-169-64-176-171.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'STOPPING', - type: 'c4.2xlarge', - imageId: 'ami-658735f8', - dnsName: 'ec2-183-13-140-201.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'STOPPED', - type: 'r5.2xlarge', - imageId: 'ami-aa82b216', - dnsName: 'ec2-132-61-128-53.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'TERMINATED', - type: 'g2.2xlarge', - imageId: 'ami-276036ab', - dnsName: 'ec2-132-62-51-65.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'STOPPING', - type: 'p2.xlarge', - imageId: 'ami-53e967c2', - dnsName: 'ec2-250-235-128-69.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'STOPPING', - type: 'm5.large', - imageId: 'ami-97661c22', - dnsName: 'ec2-230-98-168-134.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'STOPPED', - type: 'm4.large', - imageId: 'ami-7940a53e', - dnsName: 'ec2-125-49-206-217.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'STOPPED', - type: 'm4.4xlarge', - imageId: 'ami-c36846b9', - dnsName: 'ec2-46-255-22-158.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'RUNNING', - type: 'r5d.8xlarge', - imageId: 'ami-4cf137e4', - dnsName: 'ec2-15-55-3-7.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'RUNNING', - type: 't2.2xlarge', - imageId: 'ami-341eade3', - dnsName: 'ec2-7-149-244-174.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'RUNNING', - type: 'r5d.4xlarge', - imageId: 'ami-87709bff', - dnsName: 'ec2-76-255-117-150.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'STOPPED', - type: 'c5.4xlarge ', - imageId: 'ami-fcb43741', - dnsName: 'ec2-100-131-137-203.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'STOPPED', - type: 'r5d.16xlarge', - imageId: 'ami-3b0a3b08', - dnsName: 'ec2-160-92-41-60.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'RUNNING', - type: 'g2.2xlarge', - imageId: 'ami-add9dddb', - dnsName: 'ec2-108-62-233-116.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'TERMINATED', - type: 'p2.xlarge', - imageId: 'ami-a312dc9b', - dnsName: 'ec2-224-154-19-134.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'STOPPED', - type: 't2.small', - imageId: 'ami-1f429a76', - dnsName: 'ec2-61-254-22-236.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'RUNNING', - type: 'm5.xlarge', - imageId: 'ami-65a44af3', - dnsName: 'ec2-49-22-136-45.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'STOPPING', - type: 'i3.xlarge', - imageId: 'ami-a65f2ec1', - dnsName: 'ec2-136-139-28-146.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'TERMINATED', - type: 'm3.large', - imageId: 'ami-24b5d5ea', - dnsName: 'ec2-12-54-212-232.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'STOPPING', - type: 'r5d.4xlarge', - imageId: 'ami-a3c2246c', - dnsName: 'ec2-184-219-152-245.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'STOPPING', - type: 'm3.large', - imageId: 'ami-4282ea7a', - dnsName: 'ec2-254-231-47-157.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'RUNNING', - type: 'm4.xlarge', - imageId: 'ami-710cc32c', - dnsName: 'ec2-93-136-84-18.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'RUNNING', - type: 'r5d.metal', - imageId: 'ami-07c5ac4c', - dnsName: 'ec2-4-225-184-22.eu-west-1.compute.amazonaws.com', - }, - { id: id(), state: 'PENDING', type: 'm4.16xlarge', imageId: 'ami-df9c6df2' }, - { - id: id(), - state: 'RUNNING', - type: 'm4.xlarge', - imageId: 'ami-721aa68d', - dnsName: 'ec2-22-32-4-90.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'TERMINATED', - type: 'm4.16xlarge', - imageId: 'ami-d8eb7975', - dnsName: 'ec2-100-48-23-245.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'STOPPED', - type: 'm4.16xlarge', - imageId: 'ami-795bd24e', - dnsName: 'ec2-238-28-66-28.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'RUNNING', - type: 't1.micro', - imageId: 'ami-18bb19eb', - dnsName: 'ec2-11-118-161-164.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'STOPPED', - type: 'm3.xlarge', - imageId: 'ami-7f9e2429', - dnsName: 'ec2-26-141-179-33.eu-west-1.compute.amazonaws.com', - }, - { id: id(), state: 'PENDING', type: 'm4.large', imageId: 'ami-28407f2f' }, - { - id: id(), - state: 'TERMINATING', - type: 'r5.metal', - imageId: 'ami-16fd616d', - dnsName: 'ec2-119-231-122-15.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'RUNNING', - type: 'm4.10xlarge', - imageId: 'ami-0ecff466', - dnsName: 'ec2-173-239-109-156.eu-west-1.compute.amazonaws.com', - }, - { - id: id(), - state: 'RUNNING', - type: 'i3.large', - imageId: 'ami-37fd4b13', - dnsName: 'ec2-57-85-60-145.eu-west-1.compute.amazonaws.com', - }, - { id: id(), state: 'PENDING', type: 'r5d.xlarge', imageId: 'ami-e2a9f202' }, -]; diff --git a/src/table/__integ__/tall-rows.test.ts b/src/table/__integ__/tall-rows.test.ts index fd5d32aa5d..27d485c9b7 100644 --- a/src/table/__integ__/tall-rows.test.ts +++ b/src/table/__integ__/tall-rows.test.ts @@ -13,7 +13,6 @@ const setupTest = (testFn: (page: BasePageObject) => Promise) => { const page = new BasePageObject(browser); await page.setWindowSize({ width: 900, height: 800 }); await browser.url('#/light/table/tall-rows'); - await page.waitForVisible(tableWrapper.findRows().toSelector()); await testFn(page); }); }; diff --git a/src/table/table-role/__integ__/grid-navigation.test.ts b/src/table/table-role/__integ__/grid-navigation.test.ts index 8c495ffacd..86ff138003 100644 --- a/src/table/table-role/__integ__/grid-navigation.test.ts +++ b/src/table/table-role/__integ__/grid-navigation.test.ts @@ -29,8 +29,8 @@ const setupTest = ( test( 'cell action remains focused when row re-renders', setupTest({ actionsMode: 'inline' }, async page => { - await page.click('button[aria-label="Update item"]:not([disabled])'); - await expect(page.isFocused('button[aria-label="Update item"]:not([disabled])')).resolves.toBe(true); + await page.click('button[aria-label="Update item"]'); + await expect(page.isFocused('button[aria-label="Update item"]')).resolves.toBe(true); }) ); @@ -109,11 +109,11 @@ test( setupTest({ actionsMode: 'inline' }, async page => { await page.click('[data-testid="link-before"]'); await page.keys('Tab'); - await page.keys(['ArrowRight', 'ArrowDown', 'ArrowDown', 'ArrowRight', 'ArrowRight']); - await expect(page.isFocused('tr[aria-rowindex="3"] button[aria-label="Update item"]')).resolves.toBe(true); + await page.keys(['ArrowRight', 'ArrowDown', 'ArrowRight', 'ArrowRight']); + await expect(page.isFocused('tr[aria-rowindex="2"] button[aria-label="Update item"]')).resolves.toBe(true); await page.keys(['ArrowDown', 'ArrowDown', 'ArrowDown', 'ArrowDown']); - await expect(page.isFocused('tr[aria-rowindex="7"] button[aria-label="Update item"]')).resolves.toBe(true); + await expect(page.isFocused('tr[aria-rowindex="6"] button[aria-label="Update item"]')).resolves.toBe(true); }) ); @@ -122,10 +122,10 @@ test( setupTest({ actionsMode: 'inline' }, async page => { await page.click('[data-testid="link-before"]'); await page.keys('Tab'); - await page.keys(['ArrowRight', 'ArrowDown', 'ArrowDown', 'ArrowRight']); - await expect(page.isFocused('tr[aria-rowindex="3"] button[aria-label="Duplicate item"]')).resolves.toBe(true); + await page.keys(['ArrowRight', 'ArrowDown', 'ArrowRight']); + await expect(page.isFocused('tr[aria-rowindex="2"] button[aria-label="Duplicate item"]')).resolves.toBe(true); - await page.keys(range(0, 10).map(() => 'ArrowDown')); + await page.keys(range(0, 11).map(() => 'ArrowDown')); await expect(page.getFocusedElementText()).resolves.toBe('Summary row'); await page.keys(['ArrowDown']);