From 36a18434ca2a00c89d288c86e02784846c731280 Mon Sep 17 00:00:00 2001
From: Georgii Karataev <georgkarat@gmail.com>
Date: Wed, 12 Feb 2025 12:53:19 +0100
Subject: [PATCH] fix(components): fix all outdated OUIA props passing

---
 package-lock.json                             | 38 +++++++++----------
 .../components/src/BulkSelect/BulkSelect.tsx  |  4 +-
 .../__snapshots__/BulkSelect.test.js.snap     |  8 ++--
 .../src/PageHeader/PageHeaderTitle.tsx        |  4 +-
 .../components/src/PrimaryToolbar/Actions.tsx |  2 +-
 .../__snapshots__/Actions.test.js.snap        | 14 +++----
 .../__snapshots__/PrimaryToolbar.test.js.snap | 10 ++---
 .../src/TableToolbar/TableToolbar.tsx         |  8 +---
 .../TableWithFilter.test.js.snap              |  4 +-
 9 files changed, 43 insertions(+), 49 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d3bdc0ef3..63a969ae6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36617,7 +36617,7 @@
     },
     "packages/advisor-components": {
       "name": "@redhat-cloud-services/frontend-components-advisor-components",
-      "version": "2.0.9",
+      "version": "2.0.16",
       "license": "Apache-2.0",
       "dependencies": {
         "@redhat-cloud-services/frontend-components": "^5.0.1",
@@ -37045,7 +37045,7 @@
     },
     "packages/chrome": {
       "name": "@redhat-cloud-services/chrome",
-      "version": "1.0.15",
+      "version": "1.0.18",
       "license": "Apache-2.0",
       "dependencies": {
         "lodash": "^4.17.21"
@@ -37106,7 +37106,7 @@
     },
     "packages/components": {
       "name": "@redhat-cloud-services/frontend-components",
-      "version": "5.1.3",
+      "version": "5.2.6",
       "license": "Apache-2.0",
       "dependencies": {
         "@patternfly/react-component-groups": "^5.5.5",
@@ -37136,7 +37136,7 @@
         "react": "^18.2.0",
         "react-content-loader": "^6.2.0",
         "react-dom": "^18.2.0",
-        "react-redux": "^7.0.0",
+        "react-redux": "^7.0.0 || ^8.0.0 || ^9.0.0",
         "react-router-dom": "^5.0.0 || ^6.0.0"
       }
     },
@@ -37708,11 +37708,11 @@
     },
     "packages/config": {
       "name": "@redhat-cloud-services/frontend-components-config",
-      "version": "6.3.8",
+      "version": "6.4.5",
       "license": "Apache-2.0",
       "dependencies": {
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
-        "@redhat-cloud-services/frontend-components-config-utilities": "^4.0.4",
+        "@redhat-cloud-services/frontend-components-config-utilities": "^4.1.3",
         "@redhat-cloud-services/tsc-transform-imports": "^1.0.21",
         "@swc/core": "^1.3.76",
         "assert": "^2.0.0",
@@ -37764,7 +37764,7 @@
     },
     "packages/config-utils": {
       "name": "@redhat-cloud-services/frontend-components-config-utilities",
-      "version": "4.0.6",
+      "version": "4.1.4",
       "license": "Apache-2.0",
       "dependencies": {
         "@openshift/dynamic-plugin-sdk-webpack": "^4.0.1",
@@ -38403,7 +38403,7 @@
     },
     "packages/eslint-config": {
       "name": "@redhat-cloud-services/eslint-config-redhat-cloud-services",
-      "version": "2.0.10",
+      "version": "2.0.12",
       "license": "Apache",
       "dependencies": {
         "@babel/eslint-parser": "^7.19.1",
@@ -38921,7 +38921,7 @@
     },
     "packages/notifications": {
       "name": "@redhat-cloud-services/frontend-components-notifications",
-      "version": "4.1.10",
+      "version": "4.1.17",
       "license": "Apache-2.0",
       "dependencies": {
         "@redhat-cloud-services/frontend-components": "^5.0.5",
@@ -38938,7 +38938,7 @@
         "prop-types": "^15.6.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-redux": "^7.2.9",
+        "react-redux": "^7.2.9 || ^8.0.0 || ^9.0.0",
         "redux": ">=4.2.0"
       }
     },
@@ -39014,7 +39014,7 @@
     },
     "packages/remediations": {
       "name": "@redhat-cloud-services/frontend-components-remediations",
-      "version": "3.2.21",
+      "version": "3.2.28",
       "license": "Apache-2.0",
       "dependencies": {
         "@data-driven-forms/pf4-component-mapper": "^3.21.0",
@@ -39031,12 +39031,12 @@
         "prop-types": "^15.6.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-redux": "^7.0.0"
+        "react-redux": "^7.0.0 || ^8.0.0 || ^9.0.0"
       }
     },
     "packages/rule-components": {
       "name": "@redhat-cloud-services/rule-components",
-      "version": "3.2.18",
+      "version": "3.2.25",
       "license": "Apache-2.0",
       "dependencies": {
         "@patternfly/react-core": "^5.0.0",
@@ -39052,12 +39052,12 @@
     },
     "packages/testing": {
       "name": "@redhat-cloud-services/frontend-components-testing",
-      "version": "0.1.3",
+      "version": "0.1.6",
       "license": "Apache-2.0"
     },
     "packages/translations": {
       "name": "@redhat-cloud-services/frontend-components-translations",
-      "version": "3.2.15",
+      "version": "3.2.19",
       "license": "Apache-2.0",
       "devDependencies": {
         "@formatjs/cli": "^6.1.3",
@@ -39117,7 +39117,7 @@
     },
     "packages/tsc-transform-imports": {
       "name": "@redhat-cloud-services/tsc-transform-imports",
-      "version": "1.0.21",
+      "version": "1.0.23",
       "dependencies": {
         "glob": "10.3.3"
       },
@@ -39167,7 +39167,7 @@
     },
     "packages/types": {
       "name": "@redhat-cloud-services/types",
-      "version": "1.0.19",
+      "version": "1.0.21",
       "license": "Apache-2.0",
       "devDependencies": {
         "@patternfly/quickstarts": "^5.0.0",
@@ -39221,7 +39221,7 @@
     },
     "packages/utils": {
       "name": "@redhat-cloud-services/frontend-components-utilities",
-      "version": "5.0.7",
+      "version": "5.0.11",
       "license": "Apache-2.0",
       "dependencies": {
         "@redhat-cloud-services/rbac-client": "^1.0.111 || 2.x",
@@ -39245,7 +39245,7 @@
         "@patternfly/react-table": "^5.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-redux": "^7.0.0",
+        "react-redux": "^7.0.0 || ^8.0.0 || ^9.0.0",
         "react-router-dom": "^5.0.0 || ^6.0.0"
       }
     },
diff --git a/packages/components/src/BulkSelect/BulkSelect.tsx b/packages/components/src/BulkSelect/BulkSelect.tsx
index f0012c3c4..be4554ac1 100644
--- a/packages/components/src/BulkSelect/BulkSelect.tsx
+++ b/packages/components/src/BulkSelect/BulkSelect.tsx
@@ -66,7 +66,7 @@ const BulkSelect: React.FunctionComponent<BulkSelectProps> = ({
         <Dropdown
           onSelect={() => onToggle(false)}
           onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
-          data-ouia-component-id={dropdownOuiaId ?? 'BulkSelect'}
+          ouiaId={dropdownOuiaId ?? 'BulkSelect'}
           {...props}
           className={classnames(className, 'ins-c-bulk-select')}
           ouiaSafe={ouiaSafe}
@@ -77,7 +77,7 @@ const BulkSelect: React.FunctionComponent<BulkSelectProps> = ({
               isExpanded={isOpen}
               ref={toggleRef}
               onClick={() => setIsOpen((prev) => !prev)}
-              data-ouia-component-id={dropdownOuiaId ?? 'BulkSelect'}
+              ouiaId={dropdownOuiaId ?? 'BulkSelect'}
             >
               {toggleProps?.children ? (
                 toggleProps?.children
diff --git a/packages/components/src/BulkSelect/__snapshots__/BulkSelect.test.js.snap b/packages/components/src/BulkSelect/__snapshots__/BulkSelect.test.js.snap
index 994ce2846..bca7ee0cd 100644
--- a/packages/components/src/BulkSelect/__snapshots__/BulkSelect.test.js.snap
+++ b/packages/components/src/BulkSelect/__snapshots__/BulkSelect.test.js.snap
@@ -24,7 +24,7 @@ exports[`BulkSelect should render correctly - null checked 1`] = `
   <button
     aria-expanded="false"
     class="pf-v5-c-menu-toggle"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-3"
+    data-ouia-component-id="BulkSelect"
     data-ouia-component-type="PF5/MenuToggle"
     data-ouia-safe="true"
     type="button"
@@ -77,7 +77,7 @@ exports[`BulkSelect should render correctly 1`] = `
   <button
     aria-expanded="false"
     class="pf-v5-c-menu-toggle"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-1"
+    data-ouia-component-id="BulkSelect"
     data-ouia-component-type="PF5/MenuToggle"
     data-ouia-safe="true"
     type="button"
@@ -137,7 +137,7 @@ exports[`BulkSelect should render correctly 2`] = `
   <button
     aria-expanded="false"
     class="pf-v5-c-menu-toggle"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-2"
+    data-ouia-component-id="BulkSelect"
     data-ouia-component-type="PF5/MenuToggle"
     data-ouia-safe="true"
     type="button"
@@ -190,7 +190,7 @@ exports[`BulkSelect should render custom props 1`] = `
   <button
     aria-expanded="false"
     class="pf-v5-c-menu-toggle"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-4"
+    data-ouia-component-id="BulkSelect"
     data-ouia-component-type="PF5/MenuToggle"
     data-ouia-safe="true"
     type="button"
diff --git a/packages/components/src/PageHeader/PageHeaderTitle.tsx b/packages/components/src/PageHeader/PageHeaderTitle.tsx
index 8fe71636b..41d2735d7 100644
--- a/packages/components/src/PageHeader/PageHeaderTitle.tsx
+++ b/packages/components/src/PageHeader/PageHeaderTitle.tsx
@@ -31,8 +31,8 @@ const PageHeaderTitle: React.FC<PageHeaderTitleProps> = ({ className, title, act
           className={pageHeaderTitleClasses}
           widget-type="InsightsPageHeaderTitle"
           data-ouia-component-type={ouiaComponentType}
-          data-ouia-component-id={ouiaFinalId}
-          data-ouia-safe={ouiaSafe}
+          ouiaId={ouiaFinalId}
+          ouiaSafe={ouiaSafe}
           {...props}
         >
           {title}
diff --git a/packages/components/src/PrimaryToolbar/Actions.tsx b/packages/components/src/PrimaryToolbar/Actions.tsx
index 42de35e54..1e93f7ebd 100644
--- a/packages/components/src/PrimaryToolbar/Actions.tsx
+++ b/packages/components/src/PrimaryToolbar/Actions.tsx
@@ -146,7 +146,7 @@ const Actions: React.FunctionComponent<ActionsProps> = ({
                 variant="plain"
                 onClick={() => setIsOpen((prev) => !prev)}
                 isExpanded={isOpen}
-                data-ouia-component-id="BulkActionsToggle"
+                ouiaId="BulkActionsToggle"
               >
                 <EllipsisVIcon />
               </MenuToggle>
diff --git a/packages/components/src/PrimaryToolbar/__snapshots__/Actions.test.js.snap b/packages/components/src/PrimaryToolbar/__snapshots__/Actions.test.js.snap
index 90cdef1b5..87b0b7a8f 100644
--- a/packages/components/src/PrimaryToolbar/__snapshots__/Actions.test.js.snap
+++ b/packages/components/src/PrimaryToolbar/__snapshots__/Actions.test.js.snap
@@ -16,7 +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="OUIA-Generated-MenuToggle-plain-8"
+      data-ouia-component-id="BulkActionsToggle"
       data-ouia-component-type="PF5/MenuToggle"
       data-ouia-safe="true"
       type="button"
@@ -172,7 +172,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="OUIA-Generated-MenuToggle-plain-7"
+      data-ouia-component-id="BulkActionsToggle"
       data-ouia-component-type="PF5/MenuToggle"
       data-ouia-safe="true"
       type="button"
@@ -211,7 +211,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="OUIA-Generated-MenuToggle-plain-3"
+      data-ouia-component-id="BulkActionsToggle"
       data-ouia-component-type="PF5/MenuToggle"
       data-ouia-safe="true"
       type="button"
@@ -243,7 +243,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="OUIA-Generated-MenuToggle-plain-2"
+      data-ouia-component-id="BulkActionsToggle"
       data-ouia-component-type="PF5/MenuToggle"
       data-ouia-safe="true"
       type="button"
@@ -282,7 +282,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="OUIA-Generated-MenuToggle-plain-1"
+      data-ouia-component-id="BulkActionsToggle"
       data-ouia-component-type="PF5/MenuToggle"
       data-ouia-safe="true"
       type="button"
@@ -323,7 +323,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="OUIA-Generated-MenuToggle-plain-4"
+      data-ouia-component-id="BulkActionsToggle"
       data-ouia-component-type="PF5/MenuToggle"
       data-ouia-safe="true"
       type="button"
@@ -362,7 +362,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="OUIA-Generated-MenuToggle-plain-5"
+      data-ouia-component-id="BulkActionsToggle"
       data-ouia-component-type="PF5/MenuToggle"
       data-ouia-safe="true"
       type="button"
diff --git a/packages/components/src/PrimaryToolbar/__snapshots__/PrimaryToolbar.test.js.snap b/packages/components/src/PrimaryToolbar/__snapshots__/PrimaryToolbar.test.js.snap
index aad8fd7c1..9687d6675 100644
--- a/packages/components/src/PrimaryToolbar/__snapshots__/PrimaryToolbar.test.js.snap
+++ b/packages/components/src/PrimaryToolbar/__snapshots__/PrimaryToolbar.test.js.snap
@@ -188,7 +188,7 @@ exports[`PrimaryToolbar should render with data full config 1`] = `
             <button
               aria-expanded="false"
               class="pf-v5-c-menu-toggle"
-              data-ouia-component-id="OUIA-Generated-MenuToggle-1"
+              data-ouia-component-id="BulkSelect"
               data-ouia-component-type="PF5/MenuToggle"
               data-ouia-safe="true"
               type="button"
@@ -410,7 +410,7 @@ exports[`PrimaryToolbar should render with data full config 1`] = `
             aria-expanded="false"
             aria-label="kebab dropdown toggle"
             class="pf-v5-c-menu-toggle pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-2"
+            data-ouia-component-id="BulkActionsToggle"
             data-ouia-component-type="PF5/MenuToggle"
             data-ouia-safe="true"
             type="button"
@@ -933,7 +933,7 @@ exports[`PrimaryToolbar should render with data only - bulk select 1`] = `
             <button
               aria-expanded="false"
               class="pf-v5-c-menu-toggle"
-              data-ouia-component-id="OUIA-Generated-MenuToggle-3"
+              data-ouia-component-id="BulkSelect"
               data-ouia-component-type="PF5/MenuToggle"
               data-ouia-safe="true"
               type="button"
@@ -1173,7 +1173,7 @@ exports[`PrimaryToolbar should render wrong actionsConfig 1`] = `
             <button
               aria-expanded="false"
               class="pf-v5-c-menu-toggle"
-              data-ouia-component-id="OUIA-Generated-MenuToggle-5"
+              data-ouia-component-id="BulkSelect"
               data-ouia-component-type="PF5/MenuToggle"
               data-ouia-safe="true"
               type="button"
@@ -1380,7 +1380,7 @@ exports[`PrimaryToolbar should render wrong actionsConfig 1`] = `
             aria-expanded="false"
             aria-label="kebab dropdown toggle"
             class="pf-v5-c-menu-toggle pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-MenuToggle-plain-4"
+            data-ouia-component-id="BulkActionsToggle"
             data-ouia-component-type="PF5/MenuToggle"
             data-ouia-safe="true"
             type="button"
diff --git a/packages/components/src/TableToolbar/TableToolbar.tsx b/packages/components/src/TableToolbar/TableToolbar.tsx
index 4c8980f1e..7d33638b7 100644
--- a/packages/components/src/TableToolbar/TableToolbar.tsx
+++ b/packages/components/src/TableToolbar/TableToolbar.tsx
@@ -39,13 +39,7 @@ const TableToolbar: React.FunctionComponent<TableToolbarProps> = ({
 
   return (
     <Fragment>
-      <Toolbar
-        className={tableToolbarClasses}
-        data-ouia-component-type={ouiaComponentType}
-        data-ouia-component-id={ouiaFinalId}
-        data-ouia-safe={ouiaSafe}
-        {...props}
-      >
+      <Toolbar className={tableToolbarClasses} data-ouia-component-type={ouiaComponentType} ouiaId={ouiaFinalId} ouiaSafe={ouiaSafe} {...props}>
         {children}
       </Toolbar>
       {((results && results >= 0) || (selected && selected >= 0)) && (
diff --git a/packages/components/src/TagModal/__snapshots__/TableWithFilter.test.js.snap b/packages/components/src/TagModal/__snapshots__/TableWithFilter.test.js.snap
index e4030b7c2..f0099e121 100644
--- a/packages/components/src/TagModal/__snapshots__/TableWithFilter.test.js.snap
+++ b/packages/components/src/TagModal/__snapshots__/TableWithFilter.test.js.snap
@@ -260,7 +260,7 @@ exports[`TableWithFilter should render with data and bulk select with calculate
             <button
               aria-expanded="false"
               class="pf-v5-c-menu-toggle"
-              data-ouia-component-id="OUIA-Generated-MenuToggle-2"
+              data-ouia-component-id="BulkSelect"
               data-ouia-component-type="PF5/MenuToggle"
               data-ouia-safe="true"
               type="button"
@@ -771,7 +771,7 @@ exports[`TableWithFilter should render with data and bulk select without calcula
             <button
               aria-expanded="false"
               class="pf-v5-c-menu-toggle"
-              data-ouia-component-id="OUIA-Generated-MenuToggle-1"
+              data-ouia-component-id="BulkSelect"
               data-ouia-component-type="PF5/MenuToggle"
               data-ouia-safe="true"
               type="button"