Merge pull request #10066 from tiagodread/ouia-ids

Add testability for e2e tests

Resolves #9511
Resolves #9503
Resolves #9512

Reviewed-by: Kersom <None>

awx/ui_next/src/components/AddDropDownButton/AddDropDownButton.jsx

@@ -5,7 +5,7 @@ import { Dropdown, DropdownPosition } from '@patternfly/react-core';
 import { ToolbarAddButton } from '../PaginatedDataList';
 import { useKebabifiedMenu } from '../../contexts/Kebabified';
 
-function AddDropDownButton({ dropdownItems }) {
+function AddDropDownButton({ dropdownItems, ouiaId }) {
   const { isKebabified } = useKebabifiedMenu();
   const [isOpen, setIsOpen] = useState(false);
   const element = useRef(null);
@@ -35,6 +35,7 @@ function AddDropDownButton({ dropdownItems }) {
         position={DropdownPosition.right}
         toggle={
           <ToolbarAddButton
+            ouiaId={ouiaId}
             aria-label={t`Add`}
             showToggleIndicator
             onClick={() => setIsOpen(!isOpen)}

awx/ui_next/src/components/AssociateModal/AssociateModal.jsx

@@ -25,6 +25,7 @@ function AssociateModal({
   optionsRequest,
   isModalOpen = false,
   displayKey = 'name',
+  ouiaId,
 }) {
   const history = useHistory();
   const { selected, handleSelect } = useSelected([]);
@@ -93,6 +94,7 @@ function AssociateModal({
   return (
     <Fragment>
       <Modal
+        ouiaId={ouiaId}
         variant="large"
         title={title}
         aria-label={t`Association modal`}

awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx

@@ -123,6 +123,7 @@ function DataListToolbar({
               <Dropdown
                 toggle={
                   <KebabToggle
+                    data-cy="actions-kebab-toogle"
                     onToggle={isOpen => {
                       if (!isKebabModalOpen) {
                         setIsKebabOpen(isOpen);

awx/ui_next/src/components/PaginatedDataList/ToolbarAddButton.jsx

@@ -14,6 +14,7 @@ function ToolbarAddButton({
   isDisabled,
   defaultLabel = t`Add`,
   showToggleIndicator,
+  ouiaId,
 }) {
   const { isKebabified } = useKebabifiedMenu();
 
@@ -26,6 +27,7 @@ function ToolbarAddButton({
   if (isKebabified) {
     return (
       <DropdownItem
+        ouiaId={ouiaId}
         key="add"
         isDisabled={isDisabled}
         component={linkTo ? Link : 'button'}
@@ -40,6 +42,7 @@ function ToolbarAddButton({
     return (
       <Tooltip content={defaultLabel} position="top">
         <Button
+          ouiaId={ouiaId}
           isDisabled={isDisabled}
           component={Link}
           to={linkTo}
@@ -53,6 +56,7 @@ function ToolbarAddButton({
   }
   return (
     <Button
+      ouiaId={ouiaId}
       icon={showToggleIndicator ? <CaretDownIcon /> : null}
       iconPosition={showToggleIndicator ? 'right' : null}
       variant="primary"

awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.jsx

@@ -166,6 +166,7 @@ function ResourceAccessList({ apiModel, resource }) {
               resource?.summary_fields?.user_capabilities?.edit
                 ? [
                     <ToolbarAddButton
+                      ouiaId="access-add-button"
                       key="add"
                       onClick={() => setShowAddModal(true)}
                     />,

awx/ui_next/src/components/Schedule/ScheduleList/ScheduleList.jsx

@@ -215,12 +215,14 @@ function ScheduleList({
               ...(canAdd
                 ? [
                     <ToolbarAddButton
+                      ouiaId="add-schedule-button"
                       key="add"
                       linkTo={`${location.pathname}/add`}
                     />,
                   ]
                 : []),
               <ToolbarDeleteButton
+                ouiaId="delete-schedule-button"
                 key="delete"
                 onDelete={handleDelete}
                 itemsToDelete={selected}

awx/ui_next/src/components/TemplateList/TemplateList.jsx

@@ -143,6 +143,7 @@ function TemplateList({ defaultParams }) {
   if (canAddJT) {
     addDropDownButton.push(
       <DropdownItem
+        ouiaId="add-job-template-item"
         key={addTemplate}
         component={Link}
         to="/templates/job_template/add/"
@@ -155,6 +156,7 @@ function TemplateList({ defaultParams }) {
   if (canAddWFJT) {
     addDropDownButton.push(
       <DropdownItem
+        ouiaId="add-workflow-job-template-item"
         component={Link}
         to="/templates/workflow_job_template/add/"
         key={addWFTemplate}
@@ -165,7 +167,11 @@ function TemplateList({ defaultParams }) {
     );
   }
   const addButton = (
-    <AddDropDownButton key="add" dropdownItems={addDropDownButton} />
+    <AddDropDownButton
+      ouiaId="add-template-button"
+      key="add"
+      dropdownItems={addDropDownButton}
+    />
   );
 
   const deleteDetailsRequests = relatedResourceDeleteRequests.template(

awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnvironmentList.jsx

@@ -172,6 +172,7 @@ function ExecutionEnvironmentList() {
                   ...(canAdd
                     ? [
                         <ToolbarAddButton
+                          ouiaId="add-execution-environment"
                           key="add"
                           linkTo={`${match.url}/add`}
                         />,

awx/ui_next/src/screens/Host/HostGroups/HostGroupsList.jsx

@@ -199,6 +199,7 @@ function HostGroupsList({ host }) {
               ...(canAdd
                 ? [
                     <ToolbarAddButton
+                      ouiaId="host-groups-add-button"
                       key="add"
                       onClick={() => setIsModalOpen(true)}
                     />,
@@ -227,6 +228,7 @@ function HostGroupsList({ host }) {
       />
       {isModalOpen && (
         <AssociateModal
+          ouiaId="associate-modal"
           header={t`Groups`}
           fetchRequest={fetchGroupsToAssociate}
           optionsRequest={fetchGroupsOptions}

awx/ui_next/src/screens/InstanceGroup/ContainerGroupDetails/ContainerGroupDetails.jsx

@@ -100,6 +100,7 @@ function ContainerGroupDetails({ instanceGroup }) {
         {instanceGroup.summary_fields.user_capabilities &&
           instanceGroup.summary_fields.user_capabilities.delete && (
             <DeleteButton
+              ouiaId="container-group-detail-delete-button"
               name={name}
               modalTitle={t`Delete instance group`}
               onConfirm={deleteInstanceGroup}

awx/ui_next/src/screens/InstanceGroup/InstanceGroupDetails/InstanceGroupDetails.jsx

@@ -114,6 +114,7 @@ function InstanceGroupDetails({ instanceGroup }) {
           instanceGroup.summary_fields.user_capabilities &&
           instanceGroup.summary_fields.user_capabilities.delete && (
             <DeleteButton
+              ouiaId="instance-group-detail-delete-button"
               name={name}
               modalTitle={t`Delete instance group`}
               onConfirm={deleteInstanceGroup}

awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupList.jsx

@@ -157,9 +157,11 @@ function InstanceGroupList() {
 
   const addButton = (
     <AddDropDownButton
+      ouiaId="add-instance-group-button"
       key="add"
       dropdownItems={[
         <DropdownItem
+          ouiaId="add-container-group-item"
           to="/instance_groups/container_group/add"
           component={Link}
           key={addContainerGroup}
@@ -168,6 +170,7 @@ function InstanceGroupList() {
           {addContainerGroup}
         </DropdownItem>,
         <DropdownItem
+          ouiaId="add-instance-group-item"
           to="/instance_groups/add"
           component={Link}
           key={addInstanceGroup}

awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostList.jsx

@@ -149,6 +149,7 @@ function InventoryGroupHostList() {
 
   const addButton = (
     <AddDropDownButton
+      ouiaId="add-hosts-button"
       key="add"
       dropdownItems={[
         <DropdownItem

awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx

@@ -135,9 +135,11 @@ function InventoryList() {
   const addSmartInventory = t`Add smart inventory`;
   const addButton = (
     <AddDropDownButton
+      ouiaId="add-inventory-button"
       key="add"
       dropdownItems={[
         <DropdownItem
+          ouiaId="add-inventory-item"
           to={`${match.url}/inventory/add/`}
           component={Link}
           key={addInventory}
@@ -146,6 +148,7 @@ function InventoryList() {
           {addInventory}
         </DropdownItem>,
         <DropdownItem
+          ouiaId="add-smart-inventory-item"
           to={`${match.url}/smart_inventory/add/`}
           component={Link}
           key={addSmartInventory}