From 56b406c97184208bcf5727dfc755acbe167b0a1d Mon Sep 17 00:00:00 2001
From: Georgii Karataev <gkaratae@redhat.com>
Date: Thu, 22 Feb 2024 14:02:46 +0100
Subject: [PATCH] chore: Enhance OUIA IDs for ConditionalFilter (#1972)

* chore: Enhance OUIA IDs for ConditionalFilter

* chore: Cover more bulk select components with OUIA ID

* chore: Add more OUIA IDs to primary toolbar actions

* chore: Add OUIA ID for bulk select dropdown

* chore: Update remaining snapshots

* chore: Update cypress tests
---
 .../components/src/BulkSelect/BulkSelect.tsx  | 23 ++++++------
 .../__snapshots__/BulkSelect.test.js.snap     | 18 ++++-----
 .../ConditionalFilter.test.js                 | 10 ++---
 .../ConditionalFilter/ConditionalFilter.tsx   | 13 +++++--
 .../ConditionalFilter.test.js.snap            | 37 ++++++++++++++-----
 .../components/src/PrimaryToolbar/Actions.tsx |  4 +-
 .../PrimaryToolbar/PrimaryToolbar.spec.ct.js  |  2 +-
 .../src/PrimaryToolbar/PrimaryToolbar.tsx     |  4 +-
 .../__snapshots__/Actions.test.js.snap        |  9 ++++-
 .../__snapshots__/PrimaryToolbar.test.js.snap |  3 --
 10 files changed, 76 insertions(+), 47 deletions(-)

diff --git a/packages/components/src/BulkSelect/BulkSelect.tsx b/packages/components/src/BulkSelect/BulkSelect.tsx
index d29521919..af4f0c064 100644
--- a/packages/components/src/BulkSelect/BulkSelect.tsx
+++ b/packages/components/src/BulkSelect/BulkSelect.tsx
@@ -1,5 +1,6 @@
 import React, { Fragment, useRef, useState } from 'react';
 import classnames from 'classnames';
+// eslint-disable-next-line rulesdir/forbid-pf-relative-imports
 import {
   Checkbox,
   Dropdown,
@@ -10,7 +11,6 @@ import {
   MenuToggleCheckbox,
   MenuToggleCheckboxProps,
   MenuToggleProps,
-  getDefaultOUIAId,
 } from '@patternfly/react-core';
 
 import './bulk-select.scss';
@@ -35,8 +35,10 @@ export interface BulkSelectProps {
   onSelect?: MenuToggleCheckboxProps['onChange'];
   toggleProps?: MenuToggleProps;
   isDisabled?: boolean;
-  ouiaId?: string;
   ouiaSafe?: boolean;
+  dropdownOuiaId?: string;
+  checkboxOuiaId?: string;
+  listOuiaId?: string;
 }
 
 const BulkSelect: React.FunctionComponent<BulkSelectProps> = ({
@@ -48,17 +50,15 @@ const BulkSelect: React.FunctionComponent<BulkSelectProps> = ({
   toggleProps,
   count,
   className,
-  ouiaId,
   ouiaSafe = true,
   ...props
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const { current: hasError } = useRef(false);
-  const { current: ouiaStateId } = useRef(getDefaultOUIAId('RHI/BulkSelect'));
 
   const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
 
-  const ouiaFinalId = ouiaId !== undefined ? ouiaId : ouiaStateId;
+  const { dropdownOuiaId, checkboxOuiaId, listOuiaId } = props;
 
   return (
     <Fragment>
@@ -66,18 +66,18 @@ const BulkSelect: React.FunctionComponent<BulkSelectProps> = ({
         <Dropdown
           onSelect={() => onToggle(false)}
           onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+          data-ouia-component-id={dropdownOuiaId ?? 'BulkSelect'}
           {...props}
           className={classnames(className, 'ins-c-bulk-select')}
-          ouiaId={ouiaFinalId}
           ouiaSafe={ouiaSafe}
           toggle={(toggleRef) => (
             <MenuToggle
-              aria-label={ouiaFinalId}
               {...toggleProps}
               isDisabled={isDisabled}
               isExpanded={isOpen}
               ref={toggleRef}
               onClick={() => setIsOpen((prev) => !prev)}
+              data-ouia-component-id={dropdownOuiaId ?? 'BulkSelect'}
             >
               <Fragment key="split-checkbox">
                 {hasError ? (
@@ -86,7 +86,7 @@ const BulkSelect: React.FunctionComponent<BulkSelectProps> = ({
                     aria-label="Select all"
                     onChange={onSelect}
                     isChecked={checked}
-                    ouiaId={ouiaFinalId}
+                    ouiaId={checkboxOuiaId ?? 'BulkSelectCheckbox'}
                   />
                 ) : (
                   <MenuToggleCheckbox
@@ -94,7 +94,7 @@ const BulkSelect: React.FunctionComponent<BulkSelectProps> = ({
                     aria-label="Select all"
                     onChange={onSelect}
                     isChecked={checked}
-                    ouiaId={ouiaFinalId}
+                    ouiaId={checkboxOuiaId ?? 'BulkSelectCheckbox'}
                   >
                     {count ? `${count} selected` : ''}
                   </MenuToggleCheckbox>
@@ -104,7 +104,7 @@ const BulkSelect: React.FunctionComponent<BulkSelectProps> = ({
           )}
           isOpen={isOpen}
         >
-          <DropdownList>
+          <DropdownList data-ouia-component-id={listOuiaId ?? 'BulkSelectList'}>
             {count !== undefined && count > 0 && (
               <DropdownItem
                 key="count"
@@ -120,7 +120,7 @@ const BulkSelect: React.FunctionComponent<BulkSelectProps> = ({
               <DropdownItem
                 component="button"
                 key={oneItem.key || key}
-                ouiaId={`${ouiaFinalId}-${oneItem.key || key}`}
+                ouiaId={`${listOuiaId ?? 'BulkSelectList'}-${oneItem.key || key}`}
                 onClick={(event) => oneItem.onClick && oneItem.onClick(event, oneItem, key)}
                 {...oneItem?.props}
               >
@@ -137,6 +137,7 @@ const BulkSelect: React.FunctionComponent<BulkSelectProps> = ({
           id={`${id}-checkbox`}
           isChecked={checked}
           onChange={(e, checked) => onSelect?.(checked, e)}
+          ouiaId={dropdownOuiaId ?? 'BulkSelect'}
         />
       )}
     </Fragment>
diff --git a/packages/components/src/BulkSelect/__snapshots__/BulkSelect.test.js.snap b/packages/components/src/BulkSelect/__snapshots__/BulkSelect.test.js.snap
index 7b811d75a..c7f02038e 100644
--- a/packages/components/src/BulkSelect/__snapshots__/BulkSelect.test.js.snap
+++ b/packages/components/src/BulkSelect/__snapshots__/BulkSelect.test.js.snap
@@ -9,7 +9,7 @@ exports[`BulkSelect should render correctly - no data 1`] = `
       aria-invalid="false"
       aria-label="Select all"
       class="pf-v5-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-1"
+      data-ouia-component-id="BulkSelect"
       data-ouia-component-type="PF5/Checkbox"
       data-ouia-safe="true"
       id="undefined-checkbox"
@@ -23,8 +23,8 @@ exports[`BulkSelect should render correctly - null checked 1`] = `
 <div>
   <button
     aria-expanded="false"
-    aria-label="OUIA-Generated-RHI/BulkSelect-4"
     class="pf-v5-c-menu-toggle"
+    data-ouia-component-id="BulkSelect"
     type="button"
   >
     <span
@@ -38,7 +38,7 @@ exports[`BulkSelect should render correctly - null checked 1`] = `
           aria-invalid="false"
           aria-label="Select all"
           class="pf-v5-c-check__input"
-          data-ouia-component-id="OUIA-Generated-RHI/BulkSelect-4"
+          data-ouia-component-id="BulkSelectCheckbox"
           data-ouia-component-type="PF5/MenuToggleCheckbox"
           data-ouia-safe="true"
           name="toggle-checkbox"
@@ -75,8 +75,8 @@ exports[`BulkSelect should render correctly 1`] = `
 <div>
   <button
     aria-expanded="false"
-    aria-label="OUIA-Generated-RHI/BulkSelect-2"
     class="pf-v5-c-menu-toggle"
+    data-ouia-component-id="BulkSelect"
     type="button"
   >
     <span
@@ -90,7 +90,7 @@ exports[`BulkSelect should render correctly 1`] = `
           aria-invalid="false"
           aria-label="Select all"
           class="pf-v5-c-check__input"
-          data-ouia-component-id="OUIA-Generated-RHI/BulkSelect-2"
+          data-ouia-component-id="BulkSelectCheckbox"
           data-ouia-component-type="PF5/MenuToggleCheckbox"
           data-ouia-safe="true"
           name="some-id-toggle-checkbox"
@@ -134,8 +134,8 @@ exports[`BulkSelect should render correctly 2`] = `
 <div>
   <button
     aria-expanded="false"
-    aria-label="OUIA-Generated-RHI/BulkSelect-3"
     class="pf-v5-c-menu-toggle"
+    data-ouia-component-id="BulkSelect"
     type="button"
   >
     <span
@@ -149,7 +149,7 @@ exports[`BulkSelect should render correctly 2`] = `
           aria-invalid="false"
           aria-label="Select all"
           class="pf-v5-c-check__input"
-          data-ouia-component-id="OUIA-Generated-RHI/BulkSelect-3"
+          data-ouia-component-id="BulkSelectCheckbox"
           data-ouia-component-type="PF5/MenuToggleCheckbox"
           data-ouia-safe="true"
           name="toggle-checkbox"
@@ -186,8 +186,8 @@ exports[`BulkSelect should render custom props 1`] = `
 <div>
   <button
     aria-expanded="false"
-    aria-label="OUIA-Generated-RHI/BulkSelect-5"
     class="pf-v5-c-menu-toggle"
+    data-ouia-component-id="BulkSelect"
     type="button"
   >
     <span
@@ -201,7 +201,7 @@ exports[`BulkSelect should render custom props 1`] = `
           aria-invalid="false"
           aria-label="Select all"
           class="pf-v5-c-check__input"
-          data-ouia-component-id="OUIA-Generated-RHI/BulkSelect-5"
+          data-ouia-component-id="BulkSelectCheckbox"
           data-ouia-component-type="PF5/MenuToggleCheckbox"
           data-ouia-safe="true"
           name="toggle-checkbox"
diff --git a/packages/components/src/ConditionalFilter/ConditionalFilter.test.js b/packages/components/src/ConditionalFilter/ConditionalFilter.test.js
index 80c5672db..f6079e7dc 100644
--- a/packages/components/src/ConditionalFilter/ConditionalFilter.test.js
+++ b/packages/components/src/ConditionalFilter/ConditionalFilter.test.js
@@ -131,16 +131,16 @@ describe('ConditionalFilter', () => {
     it('should open dropdown', async () => {
       render(<ConditionalFilter {...initialProps} items={config} />);
       await act(async () => {
-        await userEvent.click(screen.getByRole('button', { name: 'Conditional filter' }));
+        await userEvent.click(screen.getByRole('button', { name: 'Conditional filter toggle' }));
       });
-      expect(screen.getByRole('menu', { name: 'Conditional filter' })).toBeDefined();
+      expect(screen.getByLabelText('Conditional filters list')).toBeDefined();
     });
 
     it('should call NOT call onChange when clicked on dropdown', async () => {
       const onChange = jest.fn();
       render(<ConditionalFilter {...initialProps} items={config} />);
       act(() => {
-        userEvent.click(screen.getByRole('button', { name: 'Conditional filter' }));
+        userEvent.click(screen.getByRole('button', { name: 'Conditional filter toggle' }));
       });
       await act(async () => {
         userEvent.click(screen.getByRole('menuitem', { name: 'Simple text 1' }));
@@ -152,7 +152,7 @@ describe('ConditionalFilter', () => {
       const onChange = jest.fn();
       render(<ConditionalFilter {...initialProps} items={config} onChange={onChange} />);
       act(() => {
-        userEvent.click(screen.getByRole('button', { name: 'Conditional filter' }));
+        userEvent.click(screen.getByRole('button', { name: 'Conditional filter toggle' }));
       });
       await act(async () => {
         await userEvent.click(screen.getByRole('menuitem', { name: 'Simple text 1' }));
@@ -163,7 +163,7 @@ describe('ConditionalFilter', () => {
     it('should update state on select', async () => {
       render(<ConditionalFilter {...initialProps} items={config} />);
       act(() => {
-        userEvent.click(screen.getByRole('button', { name: 'Conditional filter' }));
+        userEvent.click(screen.getByRole('button', { name: 'Conditional filter toggle' }));
       });
 
       await act(async () => {
diff --git a/packages/components/src/ConditionalFilter/ConditionalFilter.tsx b/packages/components/src/ConditionalFilter/ConditionalFilter.tsx
index 31d787abb..15dbaf343 100644
--- a/packages/components/src/ConditionalFilter/ConditionalFilter.tsx
+++ b/packages/components/src/ConditionalFilter/ConditionalFilter.tsx
@@ -193,7 +193,7 @@ const ConditionalFilter: React.FunctionComponent<ConditionalFilterProps> = ({
                     ref={innerRef}
                     onSelect={() => setIsOpen(false)}
                     isOpen={isOpen}
-                    ouiaId="ConditionalFilter"
+                    ouiaId="ConditionalFilterList"
                     onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
                     toggle={(toggleRef) => (
                       <MenuToggle
@@ -201,10 +201,11 @@ const ConditionalFilter: React.FunctionComponent<ConditionalFilterProps> = ({
                         className={
                           hideLabel ? 'ins-c-conditional-filter__group ins-c-conditional-filter__no-label' : 'ins-c-conditional-filter__group'
                         }
-                        aria-label="Conditional filter"
+                        aria-label="Conditional filter toggle"
                         ref={toggleRef}
                         onClick={() => setIsOpen((prev) => !prev)}
                         isExpanded={isOpen}
+                        data-ouia-component-id="ConditionalFilterToggle"
                       >
                         <Icon size="md">
                           <FilterIcon />
@@ -215,7 +216,7 @@ const ConditionalFilter: React.FunctionComponent<ConditionalFilterProps> = ({
                       </MenuToggle>
                     )}
                   >
-                    <DropdownList aria-label="Conditional filter">
+                    <DropdownList aria-label="Conditional filters list">
                       {items.map((item, key) => (
                         <DropdownItem
                           key={item.id ? `${item.id}-dropdown` : key}
@@ -230,7 +231,11 @@ const ConditionalFilter: React.FunctionComponent<ConditionalFilterProps> = ({
                   </Dropdown>
                 </SplitItem>
               )}
-              {ActiveComponent && <SplitItem isFilled>{getActiveComponent(activeItem)}</SplitItem>}
+              {ActiveComponent && (
+                <SplitItem isFilled data-ouia-component-id="ConditionalFilter">
+                  {getActiveComponent(activeItem)}
+                </SplitItem>
+              )}
             </Split>
           )}
         </Fragment>
diff --git a/packages/components/src/ConditionalFilter/__snapshots__/ConditionalFilter.test.js.snap b/packages/components/src/ConditionalFilter/__snapshots__/ConditionalFilter.test.js.snap
index 06b2b3305..b4f11584e 100644
--- a/packages/components/src/ConditionalFilter/__snapshots__/ConditionalFilter.test.js.snap
+++ b/packages/components/src/ConditionalFilter/__snapshots__/ConditionalFilter.test.js.snap
@@ -10,8 +10,9 @@ exports[`ConditionalFilter render should render correctly - isDisabled 1`] = `
     >
       <button
         aria-expanded="false"
-        aria-label="Conditional filter"
+        aria-label="Conditional filter toggle"
         class="pf-v5-c-menu-toggle pf-m-disabled ins-c-conditional-filter__group"
+        data-ouia-component-id="ConditionalFilterToggle"
         disabled=""
         type="button"
       >
@@ -70,6 +71,7 @@ exports[`ConditionalFilter render should render correctly - isDisabled 1`] = `
     </div>
     <div
       class="pf-v5-l-split__item pf-m-fill"
+      data-ouia-component-id="ConditionalFilter"
     >
       <span
         class="pf-v5-c-form-control pf-m-icon ins-c-conditional-filter"
@@ -183,8 +185,9 @@ exports[`ConditionalFilter render should render correctly checkbox with value ch
     >
       <button
         aria-expanded="false"
-        aria-label="Conditional filter"
+        aria-label="Conditional filter toggle"
         class="pf-v5-c-menu-toggle ins-c-conditional-filter__group"
+        data-ouia-component-id="ConditionalFilterToggle"
         type="button"
       >
         <span
@@ -242,6 +245,7 @@ exports[`ConditionalFilter render should render correctly checkbox with value ch
     </div>
     <div
       class="pf-v5-l-split__item pf-m-fill"
+      data-ouia-component-id="ConditionalFilter"
     >
       <button
         aria-expanded="false"
@@ -291,8 +295,9 @@ exports[`ConditionalFilter render should render correctly no value with value  1
     >
       <button
         aria-expanded="false"
-        aria-label="Conditional filter"
+        aria-label="Conditional filter toggle"
         class="pf-v5-c-menu-toggle ins-c-conditional-filter__group"
+        data-ouia-component-id="ConditionalFilterToggle"
         type="button"
       >
         <span
@@ -350,6 +355,7 @@ exports[`ConditionalFilter render should render correctly no value with value  1
     </div>
     <div
       class="pf-v5-l-split__item pf-m-fill"
+      data-ouia-component-id="ConditionalFilter"
     >
       <span
         class="pf-v5-c-form-control pf-m-icon ins-c-conditional-filter"
@@ -410,8 +416,9 @@ exports[`ConditionalFilter render should render correctly radio filter with valu
     >
       <button
         aria-expanded="false"
-        aria-label="Conditional filter"
+        aria-label="Conditional filter toggle"
         class="pf-v5-c-menu-toggle ins-c-conditional-filter__group"
+        data-ouia-component-id="ConditionalFilterToggle"
         type="button"
       >
         <span
@@ -469,6 +476,7 @@ exports[`ConditionalFilter render should render correctly radio filter with valu
     </div>
     <div
       class="pf-v5-l-split__item pf-m-fill"
+      data-ouia-component-id="ConditionalFilter"
     >
       <button
         aria-expanded="false"
@@ -518,8 +526,9 @@ exports[`ConditionalFilter render should render correctly simple text 1 with val
     >
       <button
         aria-expanded="false"
-        aria-label="Conditional filter"
+        aria-label="Conditional filter toggle"
         class="pf-v5-c-menu-toggle ins-c-conditional-filter__group"
+        data-ouia-component-id="ConditionalFilterToggle"
         type="button"
       >
         <span
@@ -577,6 +586,7 @@ exports[`ConditionalFilter render should render correctly simple text 1 with val
     </div>
     <div
       class="pf-v5-l-split__item pf-m-fill"
+      data-ouia-component-id="ConditionalFilter"
     >
       <span
         class="pf-v5-c-form-control pf-m-icon ins-c-conditional-filter"
@@ -637,8 +647,9 @@ exports[`ConditionalFilter render should render correctly simple text 2 with val
     >
       <button
         aria-expanded="false"
-        aria-label="Conditional filter"
+        aria-label="Conditional filter toggle"
         class="pf-v5-c-menu-toggle ins-c-conditional-filter__group"
+        data-ouia-component-id="ConditionalFilterToggle"
         type="button"
       >
         <span
@@ -696,6 +707,7 @@ exports[`ConditionalFilter render should render correctly simple text 2 with val
     </div>
     <div
       class="pf-v5-l-split__item pf-m-fill"
+      data-ouia-component-id="ConditionalFilter"
     >
       <span
         class="pf-v5-c-form-control pf-m-icon ins-c-conditional-filter"
@@ -756,8 +768,9 @@ exports[`ConditionalFilter render should render correctly with config - each ite
     >
       <button
         aria-expanded="false"
-        aria-label="Conditional filter"
+        aria-label="Conditional filter toggle"
         class="pf-v5-c-menu-toggle ins-c-conditional-filter__group"
+        data-ouia-component-id="ConditionalFilterToggle"
         type="button"
       >
         <span
@@ -815,6 +828,7 @@ exports[`ConditionalFilter render should render correctly with config - each ite
     </div>
     <div
       class="pf-v5-l-split__item pf-m-fill"
+      data-ouia-component-id="ConditionalFilter"
     >
       <span
         class="pf-v5-c-form-control pf-m-disabled pf-m-icon ins-c-conditional-filter"
@@ -876,8 +890,9 @@ exports[`ConditionalFilter render should render correctly with config 1`] = `
     >
       <button
         aria-expanded="false"
-        aria-label="Conditional filter"
+        aria-label="Conditional filter toggle"
         class="pf-v5-c-menu-toggle ins-c-conditional-filter__group"
+        data-ouia-component-id="ConditionalFilterToggle"
         type="button"
       >
         <span
@@ -935,6 +950,7 @@ exports[`ConditionalFilter render should render correctly with config 1`] = `
     </div>
     <div
       class="pf-v5-l-split__item pf-m-fill"
+      data-ouia-component-id="ConditionalFilter"
     >
       <span
         class="pf-v5-c-form-control pf-m-icon ins-c-conditional-filter"
@@ -992,6 +1008,7 @@ exports[`ConditionalFilter render should render correctly with one filter 1`] =
   >
     <div
       class="pf-v5-l-split__item pf-m-fill"
+      data-ouia-component-id="ConditionalFilter"
     >
       <span
         class="pf-v5-c-form-control pf-m-icon ins-c-conditional-filter"
@@ -1052,8 +1069,9 @@ exports[`ConditionalFilter render should render correctly with with the active l
     >
       <button
         aria-expanded="false"
-        aria-label="Conditional filter"
+        aria-label="Conditional filter toggle"
         class="pf-v5-c-menu-toggle ins-c-conditional-filter__group ins-c-conditional-filter__no-label"
+        data-ouia-component-id="ConditionalFilterToggle"
         type="button"
       >
         <span
@@ -1106,6 +1124,7 @@ exports[`ConditionalFilter render should render correctly with with the active l
     </div>
     <div
       class="pf-v5-l-split__item pf-m-fill"
+      data-ouia-component-id="ConditionalFilter"
     >
       <span
         class="pf-v5-c-form-control pf-m-icon ins-c-conditional-filter"
diff --git a/packages/components/src/PrimaryToolbar/Actions.tsx b/packages/components/src/PrimaryToolbar/Actions.tsx
index 4aef5148a..40ec7b024 100644
--- a/packages/components/src/PrimaryToolbar/Actions.tsx
+++ b/packages/components/src/PrimaryToolbar/Actions.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable rulesdir/forbid-pf-relative-imports */
 import React, { Fragment, useState } from 'react';
 import {
   Button,
@@ -137,7 +138,7 @@ const Actions: React.FunctionComponent<ActionsProps> = ({
               toggleOpen(false);
             }}
             onOpenChange={setIsOpen}
-            ouiaId="Actions"
+            ouiaId="BulkActionsList"
             toggle={(toggleRef) => (
               <MenuToggle
                 ref={toggleRef}
@@ -145,6 +146,7 @@ const Actions: React.FunctionComponent<ActionsProps> = ({
                 variant="plain"
                 onClick={() => setIsOpen((prev) => !prev)}
                 isExpanded={isOpen}
+                data-ouia-component-id="BulkActionsToggle"
               >
                 <EllipsisVIcon />
               </MenuToggle>
diff --git a/packages/components/src/PrimaryToolbar/PrimaryToolbar.spec.ct.js b/packages/components/src/PrimaryToolbar/PrimaryToolbar.spec.ct.js
index 183221b6b..4faf6eba3 100644
--- a/packages/components/src/PrimaryToolbar/PrimaryToolbar.spec.ct.js
+++ b/packages/components/src/PrimaryToolbar/PrimaryToolbar.spec.ct.js
@@ -102,7 +102,7 @@ describe('PrimaryToolbar component', () => {
     otherConfig.activeFiltersConfig.onDelete = cy.spy().as('afSpy');
     cy.mount(<PrimaryToolbar {...groupConfig} {...otherConfig} />);
     cy.get('[data-ouia-component-id="ExpandCollapseAll"]').click();
-    cy.get('button[aria-label="BulkSelect"]').click();
+    cy.get('[data-ouia-component-id="BulkSelect"]').click();
     cy.get(':nth-child(2) > .pf-v5-c-menu__item').click();
     cy.get('[data-ouia-component-id="ClearFilters"]').click();
     cy.get('@eaSpy').should('have.been.called');
diff --git a/packages/components/src/PrimaryToolbar/PrimaryToolbar.tsx b/packages/components/src/PrimaryToolbar/PrimaryToolbar.tsx
index 9b25076bf..edb6013b6 100644
--- a/packages/components/src/PrimaryToolbar/PrimaryToolbar.tsx
+++ b/packages/components/src/PrimaryToolbar/PrimaryToolbar.tsx
@@ -122,9 +122,7 @@ const PrimaryToolbar: React.FunctionComponent<React.PropsWithChildren<PrimaryToo
                 )}
               </ToolbarItem>
             )}
-            {bulkSelect && (
-              <ToolbarItem>{React.isValidElement(bulkSelect) ? bulkSelect : <BulkSelect ouiaId="BulkSelect" {...bulkSelect} />}</ToolbarItem>
-            )}
+            {bulkSelect && <ToolbarItem>{React.isValidElement(bulkSelect) ? bulkSelect : <BulkSelect {...bulkSelect} />}</ToolbarItem>}
             {filterConfig && (
               <ToolbarItem className="ins-c-primary-toolbar__filter">
                 {React.isValidElement(filterConfig) ? filterConfig : <ConditionalFilter {...filterConfig} />}
diff --git a/packages/components/src/PrimaryToolbar/__snapshots__/Actions.test.js.snap b/packages/components/src/PrimaryToolbar/__snapshots__/Actions.test.js.snap
index 4522cfbbe..fca3b426f 100644
--- a/packages/components/src/PrimaryToolbar/__snapshots__/Actions.test.js.snap
+++ b/packages/components/src/PrimaryToolbar/__snapshots__/Actions.test.js.snap
@@ -16,6 +16,7 @@ exports[`Actions - component API should update open 1`] = `
       aria-expanded="true"
       aria-label="kebab dropdown toggle"
       class="pf-v5-c-menu-toggle pf-m-expanded pf-m-plain"
+      data-ouia-component-id="BulkActionsToggle"
       type="button"
     >
       <svg
@@ -34,7 +35,7 @@ exports[`Actions - component API should update open 1`] = `
     </button>
     <div
       class="pf-v5-c-menu"
-      data-ouia-component-id="Actions"
+      data-ouia-component-id="BulkActionsList"
       data-ouia-component-type="PF5/Dropdown"
       data-ouia-safe="true"
       style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px;"
@@ -169,6 +170,7 @@ exports[`Actions - component should render actionObject as first action 1`] = `
       aria-expanded="false"
       aria-label="kebab dropdown toggle"
       class="pf-v5-c-menu-toggle pf-m-plain"
+      data-ouia-component-id="BulkActionsToggle"
       type="button"
     >
       <svg
@@ -205,6 +207,7 @@ exports[`Actions - component should render actions and overflow 1`] = `
       aria-expanded="false"
       aria-label="kebab dropdown toggle"
       class="pf-v5-c-menu-toggle pf-m-plain"
+      data-ouia-component-id="BulkActionsToggle"
       type="button"
     >
       <svg
@@ -234,6 +237,7 @@ exports[`Actions - component should render empty actions 1`] = `
       aria-expanded="false"
       aria-label="kebab dropdown toggle"
       class="pf-v5-c-menu-toggle pf-m-plain"
+      data-ouia-component-id="BulkActionsToggle"
       type="button"
     >
       <svg
@@ -270,6 +274,7 @@ exports[`Actions - component should render just actions 1`] = `
       aria-expanded="false"
       aria-label="kebab dropdown toggle"
       class="pf-v5-c-menu-toggle pf-m-plain"
+      data-ouia-component-id="BulkActionsToggle"
       type="button"
     >
       <svg
@@ -308,6 +313,7 @@ exports[`Actions - component should render one action 1`] = `
       aria-expanded="false"
       aria-label="kebab dropdown toggle"
       class="pf-v5-c-menu-toggle pf-m-plain"
+      data-ouia-component-id="BulkActionsToggle"
       type="button"
     >
       <svg
@@ -344,6 +350,7 @@ exports[`Actions - component should render one action and multiple overflow 1`]
       aria-expanded="false"
       aria-label="kebab dropdown toggle"
       class="pf-v5-c-menu-toggle pf-m-plain"
+      data-ouia-component-id="BulkActionsToggle"
       type="button"
     >
       <svg
diff --git a/packages/components/src/PrimaryToolbar/__snapshots__/PrimaryToolbar.test.js.snap b/packages/components/src/PrimaryToolbar/__snapshots__/PrimaryToolbar.test.js.snap
index ce5954fb7..3cbb66cde 100644
--- a/packages/components/src/PrimaryToolbar/__snapshots__/PrimaryToolbar.test.js.snap
+++ b/packages/components/src/PrimaryToolbar/__snapshots__/PrimaryToolbar.test.js.snap
@@ -134,7 +134,6 @@ exports[`PrimaryToolbar should render with data full config 1`] = `
             ]
           }
           onSelect={[MockFunction]}
-          ouiaId="BulkSelect"
         />
       </ToolbarItem>
       <ToolbarItem
@@ -302,7 +301,6 @@ exports[`PrimaryToolbar should render with data only - bulk select 1`] = `
             ]
           }
           onSelect={[MockFunction]}
-          ouiaId="BulkSelect"
         />
       </ToolbarItem>
     </ForwardRef>
@@ -383,7 +381,6 @@ exports[`PrimaryToolbar should render wrong actionsConfig 1`] = `
             ]
           }
           onSelect={[MockFunction]}
-          ouiaId="BulkSelect"
         />
       </ToolbarItem>
       <ToolbarItem