From 46ab04bce6664bd46c90be6dab9856ce875bf764 Mon Sep 17 00:00:00 2001
From: LightOfHeaven1994 <alexsham04.94@gmail.com>
Date: Fri, 31 Mar 2023 16:39:07 +0200
Subject: [PATCH] Add OUIA IDs for some components testing page

---
 .../react-core/src/components/Alert/examples/Alert.md  | 10 +++++-----
 .../components/Breadcrumb/examples/BreadcrumbBasic.tsx |  2 +-
 .../components/Button/examples/ButtonVariations.tsx    |  8 ++++----
 .../src/components/Card/examples/CardBasic.tsx         |  2 +-
 .../src/components/Dropdown/examples/DropdownBasic.tsx |  1 +
 .../components/FormSelect/examples/FormSelectBasic.tsx |  2 +-
 .../src/components/Modal/examples/ModalBasic.tsx       |  3 ++-
 .../src/components/Nav/examples/NavDefault.tsx         |  2 +-
 .../components/Pagination/examples/PaginationTop.tsx   |  1 +
 .../src/components/Select/examples/Select.md           |  1 +
 .../src/components/Switch/examples/SwitchBasic.tsx     |  1 +
 .../ContextSelector/examples/ContextSelectorBasic.tsx  |  1 +
 .../components/OptionsMenu/examples/OptionsMenu.md     |  3 ++-
 .../src/components/Table/examples/TableSortable.tsx    |  2 +-
 14 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/packages/react-core/src/components/Alert/examples/Alert.md b/packages/react-core/src/components/Alert/examples/Alert.md
index 5aaf0bbab29..1a954845aa8 100644
--- a/packages/react-core/src/components/Alert/examples/Alert.md
+++ b/packages/react-core/src/components/Alert/examples/Alert.md
@@ -32,11 +32,11 @@ import React from 'react';
 import { Alert } from '@patternfly/react-core';
 
 <React.Fragment>
-  <Alert title="Default alert title" />
-  <Alert variant="info" title="Info alert title" />
-  <Alert variant="success" title="Success alert title" />
-  <Alert variant="warning" title="Warning alert title" />
-  <Alert variant="danger" title="Danger alert title" />
+  <Alert title="Default alert title" ouiaId="DefaultAlert" />
+  <Alert variant="info" title="Info alert title" ouiaId="InfoAlert" />
+  <Alert variant="success" title="Success alert title" ouiaId="SuccessAlert" />
+  <Alert variant="warning" title="Warning alert title" ouiaId="WarningAlert" />
+  <Alert variant="danger" title="Danger alert title" ouiaId="DangerAlert" />
 </React.Fragment>
 ```
 
diff --git a/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbBasic.tsx b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbBasic.tsx
index d5d6c0f3e60..d7cdc3c9593 100644
--- a/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbBasic.tsx
+++ b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbBasic.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
 
 export const BreadcrumbBasic: React.FunctionComponent = () => (
-  <Breadcrumb>
+  <Breadcrumb ouiaId="BasicBreadcrumb">
     <BreadcrumbItem to="#">Section home</BreadcrumbItem>
     <BreadcrumbItem to="#">Section title</BreadcrumbItem>
     <BreadcrumbItem to="#">Section title</BreadcrumbItem>
diff --git a/packages/react-core/src/components/Button/examples/ButtonVariations.tsx b/packages/react-core/src/components/Button/examples/ButtonVariations.tsx
index a8693012911..1eef9ff07ff 100644
--- a/packages/react-core/src/components/Button/examples/ButtonVariations.tsx
+++ b/packages/react-core/src/components/Button/examples/ButtonVariations.tsx
@@ -7,12 +7,12 @@ import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 
 export const ButtonVariations: React.FunctionComponent = () => (
   <React.Fragment>
-    <Button variant="primary">Primary</Button> <Button variant="secondary">Secondary</Button>{' '}
-    <Button variant="secondary" isDanger>
+    <Button variant="primary" ouiaId="Primary">Primary</Button> <Button variant="secondary" ouiaId="Secondary">Secondary</Button>{' '}
+    <Button variant="secondary" ouiaId="DangerSecondary" isDanger>
       Danger Secondary
     </Button>{' '}
-    <Button variant="tertiary">Tertiary</Button> <Button variant="danger">Danger</Button>{' '}
-    <Button variant="warning">Warning</Button>
+    <Button variant="tertiary" ouiaId="Tertiary">Tertiary</Button> <Button variant="danger" ouiaId="Danger">Danger</Button>{' '}
+    <Button variant="warning" ouiaId="Warning">Warning</Button>
     <br />
     <br />
     <Button variant="link" icon={<PlusCircleIcon />}>
diff --git a/packages/react-core/src/components/Card/examples/CardBasic.tsx b/packages/react-core/src/components/Card/examples/CardBasic.tsx
index 29f204cb7ac..f56f572ed66 100644
--- a/packages/react-core/src/components/Card/examples/CardBasic.tsx
+++ b/packages/react-core/src/components/Card/examples/CardBasic.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
 
 export const CardBasic: React.FunctionComponent = () => (
-  <Card>
+  <Card ouiaId="BasicCard">
     <CardTitle>Title</CardTitle>
     <CardBody>Body</CardBody>
     <CardFooter>Footer</CardFooter>
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx
index 01a599851dc..fd3c1a5510e 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx
+++ b/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx
@@ -24,6 +24,7 @@ export const DropdownBasic: React.FunctionComponent = () => {
           Dropdown
         </MenuToggle>
       )}
+      ouiaId="BasicDropdown"
     >
       <DropdownList>
         <DropdownItem itemId={0} key="link">
diff --git a/packages/react-core/src/components/FormSelect/examples/FormSelectBasic.tsx b/packages/react-core/src/components/FormSelect/examples/FormSelectBasic.tsx
index 4195b31b2dc..e96951a912e 100644
--- a/packages/react-core/src/components/FormSelect/examples/FormSelectBasic.tsx
+++ b/packages/react-core/src/components/FormSelect/examples/FormSelectBasic.tsx
@@ -19,7 +19,7 @@ export const FormSelectBasic: React.FunctionComponent = () => {
   ];
 
   return (
-    <FormSelect value={formSelectValue} onChange={onChange} aria-label="FormSelect Input">
+    <FormSelect value={formSelectValue} onChange={onChange} aria-label="FormSelect Input" ouiaId="BasicFormSelect">
       {options.map((option, index) => (
         <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
       ))}
diff --git a/packages/react-core/src/components/Modal/examples/ModalBasic.tsx b/packages/react-core/src/components/Modal/examples/ModalBasic.tsx
index 3f584aff168..4be9694a95c 100644
--- a/packages/react-core/src/components/Modal/examples/ModalBasic.tsx
+++ b/packages/react-core/src/components/Modal/examples/ModalBasic.tsx
@@ -10,7 +10,7 @@ export const ModalBasic: React.FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <Button variant="primary" onClick={handleModalToggle}>
+      <Button variant="primary" onClick={handleModalToggle} ouiaId="ShowBasicModal">
         Show basic modal
       </Button>
       <Modal
@@ -25,6 +25,7 @@ export const ModalBasic: React.FunctionComponent = () => {
             Cancel
           </Button>
         ]}
+        ouiaId="BasicModal"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
         magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
diff --git a/packages/react-core/src/components/Nav/examples/NavDefault.tsx b/packages/react-core/src/components/Nav/examples/NavDefault.tsx
index 4b234d66085..da27d049e9f 100644
--- a/packages/react-core/src/components/Nav/examples/NavDefault.tsx
+++ b/packages/react-core/src/components/Nav/examples/NavDefault.tsx
@@ -9,7 +9,7 @@ export const NavDefault: React.FunctionComponent = () => {
   };
 
   return (
-    <Nav onSelect={onSelect} aria-label="Default global">
+    <Nav onSelect={onSelect} aria-label="Default global" ouiaId="DefaultNav">
       <NavList>
         <NavItem preventDefault id="nav-default-link1" to="#nav-default-link1" itemId={0} isActive={activeItem === 0}>
           Default Link 1
diff --git a/packages/react-core/src/components/Pagination/examples/PaginationTop.tsx b/packages/react-core/src/components/Pagination/examples/PaginationTop.tsx
index a295951b961..f51ca55f0ba 100644
--- a/packages/react-core/src/components/Pagination/examples/PaginationTop.tsx
+++ b/packages/react-core/src/components/Pagination/examples/PaginationTop.tsx
@@ -26,6 +26,7 @@ export const PaginationTop: React.FunctionComponent = () => {
       onSetPage={onSetPage}
       widgetId="top-example"
       onPerPageSelect={onPerPageSelect}
+      ouiaId="PaginationTop"
     />
   );
 };
diff --git a/packages/react-core/src/components/Select/examples/Select.md b/packages/react-core/src/components/Select/examples/Select.md
index 6feea3ada7c..1118086adf5 100644
--- a/packages/react-core/src/components/Select/examples/Select.md
+++ b/packages/react-core/src/components/Select/examples/Select.md
@@ -120,6 +120,7 @@ class SingleSelectInput extends React.Component {
           aria-labelledby={titleId}
           isDisabled={isDisabled}
           direction={direction}
+          ouiaId="SingleSelect"
         >
           {this.options}
         </Select>
diff --git a/packages/react-core/src/components/Switch/examples/SwitchBasic.tsx b/packages/react-core/src/components/Switch/examples/SwitchBasic.tsx
index d30380d4275..dff01bda26d 100644
--- a/packages/react-core/src/components/Switch/examples/SwitchBasic.tsx
+++ b/packages/react-core/src/components/Switch/examples/SwitchBasic.tsx
@@ -15,6 +15,7 @@ export const SwitchBasic: React.FunctionComponent = () => {
       labelOff="Message when off"
       isChecked={isChecked}
       onChange={handleChange}
+      ouiaId="BasicSwitch"
     />
   );
 };
diff --git a/packages/react-core/src/deprecated/components/ContextSelector/examples/ContextSelectorBasic.tsx b/packages/react-core/src/deprecated/components/ContextSelector/examples/ContextSelectorBasic.tsx
index d321b92165e..48471adb0d9 100644
--- a/packages/react-core/src/deprecated/components/ContextSelector/examples/ContextSelectorBasic.tsx
+++ b/packages/react-core/src/deprecated/components/ContextSelector/examples/ContextSelectorBasic.tsx
@@ -69,6 +69,7 @@ export const ContextSelectorBasic: React.FunctionComponent = () => {
       onSelect={onSelect}
       onSearchButtonClick={onSearchButtonClick}
       screenReaderLabel="Selected Project:"
+      ouiaId="BasicContextSelector"
     >
       {filteredItems.map((item, index) => {
         const [text = null, href = undefined, isDisabled] =
diff --git a/packages/react-core/src/deprecated/components/OptionsMenu/examples/OptionsMenu.md b/packages/react-core/src/deprecated/components/OptionsMenu/examples/OptionsMenu.md
index 429bade264e..d32d6e4c4c2 100644
--- a/packages/react-core/src/deprecated/components/OptionsMenu/examples/OptionsMenu.md
+++ b/packages/react-core/src/deprecated/components/OptionsMenu/examples/OptionsMenu.md
@@ -53,7 +53,8 @@ class SingleOption extends React.Component {
         id="single-option-example" 
         menuItems={menuItems} 
         isOpen={isOpen} 
-        toggle={toggle}/>
+        toggle={toggle}
+        ouiaId="OptionsMenu"/>
     );
   }
 }
diff --git a/packages/react-table/src/components/Table/examples/TableSortable.tsx b/packages/react-table/src/components/Table/examples/TableSortable.tsx
index ed831fb517d..cab70955616 100644
--- a/packages/react-table/src/components/Table/examples/TableSortable.tsx
+++ b/packages/react-table/src/components/Table/examples/TableSortable.tsx
@@ -79,7 +79,7 @@ export const TableSortable: React.FunctionComponent = () => {
 
   // In this example, we wrap all but the 1st column and make the 1st and 3rd columns sortable just to demonstrate.
   return (
-    <Table aria-label="Sortable table">
+    <Table aria-label="Sortable table" ouiaId="SortableTable">
       <Thead>
         <Tr>
           <Th sort={getSortParams(0)}>{columnNames.name}</Th>