diff --git a/web/cypress/e2e/table/fields.spec.ts b/web/cypress/e2e/table/fields.spec.ts index 72895d9fe..da15ed121 100644 --- a/web/cypress/e2e/table/fields.spec.ts +++ b/web/cypress/e2e/table/fields.spec.ts @@ -81,11 +81,9 @@ describe('netflow-table', () => { // others cy.checkRecordField('K8S_FlowLayer', 'Flow layer', ['infra']); - cy.get('[data-test-id="group-5"]').contains("L3 Layer"); + cy.get('[data-test-id="group-5"]').contains("Protocol Info"); cy.checkRecordField('Proto', 'Protocol', ['ICMP']); cy.checkRecordField('Dscp', 'DSCP', ['Standard']); - - cy.get('[data-test-id="group-6"]').contains("ICMP"); cy.checkRecordField('IcmpType', 'Type', ['ICMP_DEST_UNREACH']); cy.checkRecordField('IcmpCode', 'Code', ['ICMP_NET_UNREACH']); @@ -121,7 +119,7 @@ describe('netflow-table', () => { cy.get('#netflow-table-row-2').click(); // check for rtt - cy.checkRecordField('TimeFlowRttMs', 'Flow RTT', ['4.05ms']); + cy.checkRecordField('TimeFlowRttMs', 'Flow RTT', ['4ms']); }); it('display multiCluster', () => { diff --git a/web/cypress/support/commands.ts b/web/cypress/support/commands.ts index 54f33f1b2..d5d9cb7ea 100644 --- a/web/cypress/support/commands.ts +++ b/web/cypress/support/commands.ts @@ -111,14 +111,14 @@ Cypress.Commands.add('openColumnsModal', () => { Cypress.Commands.add('selectPopupItems', (id, names) => { for (let i = 0; i < names.length; i++) { - cy.get(id).get('.pf-v5-c-modal-box__body').contains(names[i]) + cy.get(id).get('.modal-body').contains(names[i]) .closest('.pf-v5-c-data-list__item-row').find('.pf-v5-c-data-list__check').click(); } }); Cypress.Commands.add('checkPopupItems', (id, ids) => { for (let i = 0; i < ids.length; i++) { - cy.get(id).find('.pf-v5-c-modal-box__body').find(`#${ids[i]}`).check(); + cy.get(id).find('.modal-body').find(`#${ids[i]}`).check(); } }); diff --git a/web/cypress/support/const.ts b/web/cypress/support/const.ts index 8e1a5252e..3ad088852 100644 --- a/web/cypress/support/const.ts +++ b/web/cypress/support/const.ts @@ -10,10 +10,10 @@ export const availablePanelsCount = 52; export const defaultPanelsCount = 2; // table specific config -export const availableColumnGroupCount = 31; +export const availableColumnGroupCount = 29; export const availableColumnCount = 57; export const defaultColumnGroupCount = 6; -export const defaultColumnCount = 11; +export const defaultColumnCount = 10; export const admin_kubeconfig = Cypress.env('KUBECONFIG_PATH'); export const DEFAULT_RETRY_OPTIONS = { retries: 3, interval: 10000 }; diff --git a/web/cypress/views/netflow-page.ts b/web/cypress/views/netflow-page.ts index 3084f637a..02fe04842 100644 --- a/web/cypress/views/netflow-page.ts +++ b/web/cypress/views/netflow-page.ts @@ -51,11 +51,13 @@ export const netflowPage = { stopAutoRefresh: () => { cy.byTestID(genSelectors.refreshDrop).should('exist').then($btn => { // only stop refresh if it's not already OFF - if (!$btn.text().includes("Refresh off")) { - cy.byTestID(genSelectors.refreshDrop).click() + if ($btn.text() != "Refresh off") { + cy.wrap($btn).click({ force: true }) // Wait for dropdown menu to be rendered and visible cy.get('.pf-v5-c-menu').should('be.visible') - cy.get('body').find('[data-test="OFF_KEY"]').click() + cy.get('[data-test="OFF_KEY"]') + .should('be.visible') + .click() } }) }, diff --git a/web/src/components/dropdowns/group-dropdown.tsx b/web/src/components/dropdowns/group-dropdown.tsx index cda9719f0..c43e5748b 100644 --- a/web/src/components/dropdowns/group-dropdown.tsx +++ b/web/src/components/dropdowns/group-dropdown.tsx @@ -30,6 +30,7 @@ export const GroupDropdown: React.FC = ({ data-test={id} id={id} isOpen={isOpen} + onOpenChange={setOpen} toggle={(toggleRef: React.Ref) => ( = ({ isDisabled={disabled} isExpanded={isOpen} onClick={() => setOpen(!isOpen)} - onBlur={() => setTimeout(() => setOpen(false), 500)} > {getGroupName(selected, scopes, t)} diff --git a/web/src/components/dropdowns/layout-dropdown.tsx b/web/src/components/dropdowns/layout-dropdown.tsx index 81f912225..13f809a3b 100644 --- a/web/src/components/dropdowns/layout-dropdown.tsx +++ b/web/src/components/dropdowns/layout-dropdown.tsx @@ -46,6 +46,7 @@ export const LayoutDropdown: React.FC = ({ selected, setLay data-test={id} id={id} isOpen={isOpen} + onOpenChange={setOpen} toggle={(toggleRef: React.Ref) => ( = ({ selected, setLay id={`${id}-dropdown`} isExpanded={isOpen} onClick={() => setOpen(!isOpen)} - onBlur={() => setTimeout(() => setOpen(false), 500)} > {getLayoutDisplay(selected)} diff --git a/web/src/components/dropdowns/match-dropdown.tsx b/web/src/components/dropdowns/match-dropdown.tsx index bd147c45e..6743f2ce7 100644 --- a/web/src/components/dropdowns/match-dropdown.tsx +++ b/web/src/components/dropdowns/match-dropdown.tsx @@ -44,6 +44,7 @@ export const MatchDropdown: React.FC = ({ allowBidirectional data-test={id} id={id} isOpen={isOpen} + onOpenChange={setOpen} toggle={(toggleRef: React.Ref) => ( = ({ allowBidirectional className="match-dropdown" isExpanded={isOpen} onClick={() => setOpen(!isOpen)} - onBlur={() => setTimeout(() => setOpen(false), 500)} > {getMatchDisplay(selected, true)} diff --git a/web/src/components/dropdowns/metric-type-dropdown.tsx b/web/src/components/dropdowns/metric-type-dropdown.tsx index 16eeb6072..966f654fc 100644 --- a/web/src/components/dropdowns/metric-type-dropdown.tsx +++ b/web/src/components/dropdowns/metric-type-dropdown.tsx @@ -46,6 +46,7 @@ export const MetricTypeDropdown: React.FC = ({ data-test={id} id={id} isOpen={isOpen} + onOpenChange={setOpen} popperProps={{ position: 'right' }} @@ -56,7 +57,6 @@ export const MetricTypeDropdown: React.FC = ({ id={`${id}-dropdown`} isExpanded={isOpen} onClick={() => setOpen(!isOpen)} - onBlur={() => setTimeout(() => setOpen(false), 500)} > {getMetricDisplay(selected as MetricType)} diff --git a/web/src/components/dropdowns/refresh-dropdown.tsx b/web/src/components/dropdowns/refresh-dropdown.tsx index 46c570059..06383300d 100644 --- a/web/src/components/dropdowns/refresh-dropdown.tsx +++ b/web/src/components/dropdowns/refresh-dropdown.tsx @@ -50,6 +50,7 @@ export const RefreshDropdown: React.FC = ({ disabled, id, data-test={id} id={id} isOpen={isOpen} + onOpenChange={setOpen} onSelect={() => setOpen(false)} toggle={(toggleRef: React.Ref) => ( = ({ disabled, id, id={`${id}-dropdown`} isDisabled={disabled} onClick={() => setOpen(!isOpen)} - onBlur={() => setTimeout(() => setOpen(false), 500)} isExpanded={isOpen} > {refreshOptions[selectedKey as keyof typeof refreshOptions]} diff --git a/web/src/components/dropdowns/scope-dropdown.tsx b/web/src/components/dropdowns/scope-dropdown.tsx index 2043d8d8e..80434942b 100644 --- a/web/src/components/dropdowns/scope-dropdown.tsx +++ b/web/src/components/dropdowns/scope-dropdown.tsx @@ -23,6 +23,7 @@ export const ScopeDropdown: React.FC = ({ selected, setScope position: 'right' }} isOpen={isOpen} + onOpenChange={setOpen} toggle={(toggleRef: React.Ref) => ( = ({ selected, setScope id={`${id}-dropdown`} isExpanded={isOpen} onClick={() => setOpen(!isOpen)} - onBlur={() => setTimeout(() => setOpen(false), 500)} > {scopes.find(sc => sc.id === selected)?.name || t('n/a')} diff --git a/web/src/components/dropdowns/time-range-dropdown.tsx b/web/src/components/dropdowns/time-range-dropdown.tsx index 3842afe55..4e1ed0f8d 100644 --- a/web/src/components/dropdowns/time-range-dropdown.tsx +++ b/web/src/components/dropdowns/time-range-dropdown.tsx @@ -74,6 +74,7 @@ export const TimeRangeDropdown: React.FC = ({ id, range, data-test={id} id={id} isOpen={isOpen} + onOpenChange={setOpen} onSelect={() => setOpen(false)} toggle={(toggleRef: React.Ref) => ( = ({ id, range, data-test={`${id}-dropdown`} id={`${id}-dropdown`} onClick={() => setOpen(!isOpen)} - onBlur={() => setTimeout(() => setOpen(false), 500)} > {selectedKey === customTimeRangeKey ? textContent(false) diff --git a/web/src/components/dropdowns/truncate-dropdown.tsx b/web/src/components/dropdowns/truncate-dropdown.tsx index 13a6bdf3a..c9d7109c1 100644 --- a/web/src/components/dropdowns/truncate-dropdown.tsx +++ b/web/src/components/dropdowns/truncate-dropdown.tsx @@ -43,6 +43,7 @@ export const TruncateDropdown: React.FC = ({ selected, se data-test={id} id={id} isOpen={isOpen} + onOpenChange={setOpen} toggle={(toggleRef: React.Ref) => ( = ({ selected, se id={`${id}-dropdown`} isExpanded={isOpen} onClick={() => setOpen(!isOpen)} - onBlur={() => setTimeout(() => setOpen(false), 500)} > {getTruncateDisplay(selected)} diff --git a/web/src/components/toolbar/filters/compare-filter.tsx b/web/src/components/toolbar/filters/compare-filter.tsx index 11d255270..0a774e492 100644 --- a/web/src/components/toolbar/filters/compare-filter.tsx +++ b/web/src/components/toolbar/filters/compare-filter.tsx @@ -95,6 +95,7 @@ export const CompareFilter: React.FC = ({ value, setValue, c ) => ( = ({ value, setValue, c badge={{value}} onClick={() => setOpen(!isOpen)} isExpanded={isOpen} - onBlur={() => setTimeout(() => setOpen(false), 500)} > {getText(value)} diff --git a/web/src/components/toolbar/links-overflow.tsx b/web/src/components/toolbar/links-overflow.tsx index 27ef20122..fce2d2200 100644 --- a/web/src/components/toolbar/links-overflow.tsx +++ b/web/src/components/toolbar/links-overflow.tsx @@ -82,6 +82,7 @@ export const LinksOverflow: React.FC = ({ id, items, text }) data-test={id + '-dropdown'} id={id + '-dropdown'} onSelect={() => setOpen(false)} + onOpenChange={setOpen} isOpen={isOpen} toggle={(toggleRef: React.Ref) => ( = ({ id, items, text }) icon={} isExpanded={isOpen} onClick={() => setOpen(!isOpen)} - onBlur={() => setTimeout(() => setOpen(false), 500)} > <> {text || t('More options')}