diff --git a/pages/sync-scrolls.page.tsx b/pages/sync-scrolls.page.tsx index ef796f0cc4..fbab286954 100644 --- a/pages/sync-scrolls.page.tsx +++ b/pages/sync-scrolls.page.tsx @@ -12,16 +12,29 @@ export default function App() { return ( <>

Syncing horizontal scrolls

-
{ - n++; - numberOfCallsRef.current?.setAttribute('data-call-number', n.toString()); - }} - > -
+
+
{ + n++; + numberOfCallsRef.current?.setAttribute('data-call-number', n.toString()); + handleScroll(e); + }} + >
-
+
{ + 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 ffc89876d8..495cc4a7d0 100644 --- a/pages/table-fragments/grid-navigation-custom.page.tsx +++ b/pages/table-fragments/grid-navigation-custom.page.tsx @@ -1,5 +1,6 @@ // 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'; @@ -9,7 +10,6 @@ import { AppLayout, Button, ButtonDropdown, - Checkbox, CollectionPreferences, ColumnLayout, Container, @@ -26,7 +26,6 @@ import { SpaceBetween, StatusIndicator, } from '~components'; -import { useEffectOnUpdate } from '~components/internal/hooks/use-effect-on-update'; import { getTableCellRoleProps, getTableColHeaderRoleProps, @@ -41,7 +40,8 @@ import { import AppContext, { AppContextType } from '../app/app-context'; import appLayoutLabels from '../app-layout/utils/labels'; import { contentDisplayPreferenceI18nStrings } from '../common/i18n-strings'; -import { generateItems, id as generateId, Instance } from '../table/generate-data'; +import { id as generateId, Instance } from '../table/generate-data'; +import { allInstances50 } from '../table/instances-data'; import { stateToStatusIndicator } from '../table/shared-configs'; import styles from './styles.scss'; @@ -56,7 +56,6 @@ type PageContext = React.Context< pageSize: number; tableRole: TableRole; actionsMode: ActionsMode; - autoRefresh: boolean; visibleColumns: string; }> >; @@ -70,6 +69,10 @@ 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); @@ -77,23 +80,17 @@ 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(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 [items, setItems] = useState(allItems); + const refreshItems = () => + setItems(prev => + refreshIndex < 50 ? [...prev.slice(1), { ...allInstances50[refreshIndex++], id: generateId() }] : prev + ); + window.refreshItems = refreshItems; const columnDefinitions = [ { @@ -210,17 +207,6 @@ 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, @@ -233,7 +219,6 @@ export default function Page() { .filter(column => column.visible) .map(column => column.id) .join(','), - autoRefresh: detail.custom.autoRefresh, }) } contentDisplayPreference={{ @@ -248,7 +233,7 @@ export default function Page() { }} /> - diff --git a/pages/table/instances-data.ts b/pages/table/instances-data.ts new file mode 100644 index 0000000000..650b14887d --- /dev/null +++ b/pages/table/instances-data.ts @@ -0,0 +1,339 @@ +// 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 27d485c9b7..fd5d32aa5d 100644 --- a/src/table/__integ__/tall-rows.test.ts +++ b/src/table/__integ__/tall-rows.test.ts @@ -13,6 +13,7 @@ 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 86ff138003..8c495ffacd 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"]'); - await expect(page.isFocused('button[aria-label="Update item"]')).resolves.toBe(true); + await page.click('button[aria-label="Update item"]:not([disabled])'); + await expect(page.isFocused('button[aria-label="Update item"]:not([disabled])')).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', 'ArrowRight', 'ArrowRight']); - await expect(page.isFocused('tr[aria-rowindex="2"] button[aria-label="Update item"]')).resolves.toBe(true); + 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(['ArrowDown', 'ArrowDown', 'ArrowDown', 'ArrowDown']); - await expect(page.isFocused('tr[aria-rowindex="6"] button[aria-label="Update item"]')).resolves.toBe(true); + await expect(page.isFocused('tr[aria-rowindex="7"] 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', 'ArrowRight']); - await expect(page.isFocused('tr[aria-rowindex="2"] button[aria-label="Duplicate item"]')).resolves.toBe(true); + 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(range(0, 11).map(() => 'ArrowDown')); + await page.keys(range(0, 10).map(() => 'ArrowDown')); await expect(page.getFocusedElementText()).resolves.toBe('Summary row'); await page.keys(['ArrowDown']);