From d6a342d0175a2bcc59d238aefc871db62b9bac58 Mon Sep 17 00:00:00 2001
From: Alejandro Visiedo <avisiedo@redhat.com>
Date: Tue, 23 Jan 2024 13:25:56 +0100
Subject: [PATCH] HMS-3432 feat: add ouiaid attribute

This add the ouiaid attribute at all the considered places so the
selection of the components does not depends on the xpath or dom
structure of the page.

Signed-off-by: Alejandro Visiedo <avisiedo@redhat.com>
---
 src/Components/DomainList/DomainList.tsx      |  7 +++-
 src/Routes/DefaultPage/DefaultPage.tsx        | 22 +++++++++--
 .../DetailGeneral/DetailGeneral.tsx           | 37 ++++++++++++++++---
 .../DetailServers/DetailServers.tsx           |  3 +-
 src/Routes/DetailPage/DetailPage.tsx          |  7 ++--
 .../PagePreparation/PagePreparation.tsx       | 17 +++++++--
 .../Components/PageReview/PageReview.tsx      |  7 ++--
 .../PageServiceDetails/PageServiceDetails.tsx | 13 ++++++-
 .../PageServiceRegistration.tsx               | 10 +++--
 .../VerifyRegistry/VerifyRegistry.tsx         | 16 ++++++--
 src/Routes/WizardPage/WizardPage.tsx          |  3 +-
 11 files changed, 109 insertions(+), 33 deletions(-)

diff --git a/src/Components/DomainList/DomainList.tsx b/src/Components/DomainList/DomainList.tsx
index 5eecdbc..21c6192 100644
--- a/src/Components/DomainList/DomainList.tsx
+++ b/src/Components/DomainList/DomainList.tsx
@@ -187,14 +187,17 @@ export const DomainList = () => {
     {
       title: 'Enable/Disable',
       onClick: () => onEnableDisable(domain),
+      ouiaId: 'ButtonActionEnableDisable',
     },
     {
       title: 'Edit',
       onClick: () => console.log(`clicked on Edit, on row ${domain.title}`),
+      ouiaId: 'ButtonActionEdit',
     },
     {
       title: 'Delete',
       onClick: () => onDelete(domain),
+      ouiaId: 'ButtonActionDelete',
     },
   ];
 
@@ -228,15 +231,17 @@ export const DomainList = () => {
             } else {
               rowActions[0].title = 'Enable';
             }
+            let row = 1;
             return (
               <>
-                <Tr key={domain.domain_id}>
+                <Tr key={domain.domain_id} ouiaId={'RowListDomain' + row++}>
                   <Td>
                     <Button
                       variant="link"
                       onClick={() => {
                         onShowDetails(domain);
                       }}
+                      ouiaId="LinkListDomainDetails"
                     >
                       {domain.title}
                     </Button>
diff --git a/src/Routes/DefaultPage/DefaultPage.tsx b/src/Routes/DefaultPage/DefaultPage.tsx
index cc4e84f..947432e 100644
--- a/src/Routes/DefaultPage/DefaultPage.tsx
+++ b/src/Routes/DefaultPage/DefaultPage.tsx
@@ -36,10 +36,19 @@ const Header = () => {
 
   return (
     <PageHeader>
-      <PageHeaderTitle title={title} />
+      <PageHeaderTitle title={title} ouiaId="TextDefaultTitle" />
       <p>
         Manage registered identity domains to leverage host access controls from your existing identity and access management.{' '}
-        <Button component="a" target="_blank" variant="link" isInline icon={<ExternalLinkAltIcon />} iconPosition="right" href={linkLearnMoreAbout}>
+        <Button
+          component="a"
+          target="_blank"
+          variant="link"
+          isInline
+          icon={<ExternalLinkAltIcon />}
+          iconPosition="right"
+          href={linkLearnMoreAbout}
+          ouiaId="LinkDefaultLearnMoreAbout1"
+        >
           Learn more about the domain registry.
         </Button>
       </p>
@@ -78,7 +87,9 @@ const EmptyContent = () => {
                   <br /> cloud environment*. To get started, register an identity domain.
                 </StackItem>
                 <StackItem className="pf-u-pt-md">
-                  <Button onClick={handleOpenWizard}>Register identity domain</Button>
+                  <Button onClick={handleOpenWizard} ouiaId="ButtonDefaultRegisterIdentityDomain">
+                    Register identity domain
+                  </Button>
                 </StackItem>
                 <StackItem className="pf-u-pt-md">
                   <Button
@@ -89,6 +100,7 @@ const EmptyContent = () => {
                     icon={<ExternalLinkAltIcon />}
                     iconPosition="right"
                     href={linkLearnMoreAbout}
+                    ouiaId="LinkDefaultLearnMoreAbout2"
                   >
                     Learn more about registering identity domains{' '}
                   </Button>
@@ -180,7 +192,9 @@ const ListContent = () => {
               <Toolbar>
                 <Flex>
                   <FlexItem>
-                    <Button onClick={handleOpenWizard}>Register identity domain</Button>
+                    <Button ouiaId="ButtonDefaultRegisterIdentityDomain" onClick={handleOpenWizard}>
+                      Register identity domain
+                    </Button>
                   </FlexItem>
                 </Flex>
               </Toolbar>
diff --git a/src/Routes/DetailPage/Components/DetailGeneral/DetailGeneral.tsx b/src/Routes/DetailPage/Components/DetailGeneral/DetailGeneral.tsx
index 4c7e357..773f729 100644
--- a/src/Routes/DetailPage/Components/DetailGeneral/DetailGeneral.tsx
+++ b/src/Routes/DetailPage/Components/DetailGeneral/DetailGeneral.tsx
@@ -178,6 +178,7 @@ export const DetailGeneral = (props: DetailGeneralProps) => {
                 setIsTitleModalOpen(true);
                 return;
               }}
+              ouiaId="ButtonDetailGeneralEditTitle"
             >
               <Icon>
                 <PencilAltIcon />
@@ -205,6 +206,7 @@ export const DetailGeneral = (props: DetailGeneralProps) => {
                 setEditDescription(description);
                 setIsDescriptionModalOpen(true);
               }}
+              ouiaId="ButtonDetailGeneralEditDescription"
             >
               <Icon>
                 <PencilAltIcon />
@@ -229,6 +231,7 @@ export const DetailGeneral = (props: DetailGeneralProps) => {
               onClick={() => {
                 props.onShowServerTab && props.onShowServerTab();
               }}
+              ouiaId="ButtonDetailGeneralEditAutoenrollment"
             >
               {domain?.['rhel-idm']?.servers.length}
             </Button>
@@ -255,7 +258,14 @@ export const DetailGeneral = (props: DetailGeneralProps) => {
             </Icon>
           </DescriptionListTerm>
           <DescriptionListDescription>
-            <Switch hasCheckIcon={true} label="Enabled" labelOff="Disabled" isChecked={autoJoin} onChange={handleAutoJoin} />
+            <Switch
+              hasCheckIcon={true}
+              label="Enabled"
+              labelOff="Disabled"
+              isChecked={autoJoin}
+              onChange={handleAutoJoin}
+              ouiaId="ButtonDetailGeneralAutoenroll"
+            />
           </DescriptionListDescription>
         </DescriptionListGroup>
         <DescriptionListGroup>
@@ -277,6 +287,7 @@ export const DetailGeneral = (props: DetailGeneralProps) => {
                 new Error('not implemented');
                 return;
               }}
+              ouiaId="LinkDetailGeneralCertificate"
             >
               <Icon>
                 <DownloadIcon />
@@ -291,27 +302,41 @@ export const DetailGeneral = (props: DetailGeneralProps) => {
         title="Edit display name"
         isOpen={isTitleModalOpen}
         onClose={handleCancelTitleButton}
+        ouiaId="ModalTitle"
         actions={[
-          <Button key="save" variant="primary" isDisabled={title == editTitle} onClick={handleSaveTitleButton}>
+          <Button
+            key="save"
+            variant="primary"
+            isDisabled={title == editTitle}
+            onClick={handleSaveTitleButton}
+            ouiaId="ButtonModalDomainDomainTitleSave"
+          >
             Save
           </Button>,
-          <Button key="cancel" variant="link" onClick={handleCancelTitleButton}>
+          <Button key="cancel" variant="link" onClick={handleCancelTitleButton} ouiaId="ButtonModalDomainDomainTitleCancel">
             Cancel
           </Button>,
         ]}
       >
-        <TextInput value={editTitle} type="text" onChange={(value) => setEditTitle(value)} />
+        <TextInput value={editTitle} type="text" onChange={(value) => setEditTitle(value)} ouiaId="TextModalDomainTitle" />
       </Modal>
       <Modal
         variant={ModalVariant.small}
         title="Edit description"
         isOpen={isDescriptionModalOpen}
         onClose={handleCancelDescriptionButton}
+        ouiaId="ModalDesription"
         actions={[
-          <Button key="save" variant="primary" isDisabled={description == editDescription} onClick={handleSaveDescriptionButton}>
+          <Button
+            key="save"
+            variant="primary"
+            isDisabled={description == editDescription}
+            onClick={handleSaveDescriptionButton}
+            ouiaId="ButtonModalDescriptionSave"
+          >
             Save
           </Button>,
-          <Button key="cancel" variant="link" onClick={handleCancelDescriptionButton}>
+          <Button key="cancel" variant="link" onClick={handleCancelDescriptionButton} ouiaId="ButtonModalDescriptionSave">
             Cancel
           </Button>,
         ]}
diff --git a/src/Routes/DetailPage/Components/DetailServers/DetailServers.tsx b/src/Routes/DetailPage/Components/DetailServers/DetailServers.tsx
index 8ab09f9..a1ff7f0 100644
--- a/src/Routes/DetailPage/Components/DetailServers/DetailServers.tsx
+++ b/src/Routes/DetailPage/Components/DetailServers/DetailServers.tsx
@@ -96,6 +96,7 @@ export const DetailServers = (props: DetailServersProps) => {
   activeSortIndex !== null && servers.sort(createCompareRows(activeSortIndex, activeSortDirection));
 
   // FIXME Is subscription_manager_id unique?
+  let row = 1;
   return (
     <>
       <Stack>
@@ -117,7 +118,7 @@ export const DetailServers = (props: DetailServersProps) => {
             </Thead>
             <Tbody>
               {servers.map((server) => (
-                <Tr key={server.subscription_manager_id}>
+                <Tr key={server.subscription_manager_id} ouiaId={'RowDetailServer' + row++}>
                   <Th>{server.fqdn}</Th>
                   <Th>{server.location}</Th>
                   <Th>{server.hcc_enrollment_server ? 'Yes' : 'No'}</Th>
diff --git a/src/Routes/DetailPage/DetailPage.tsx b/src/Routes/DetailPage/DetailPage.tsx
index af547b2..f005119 100644
--- a/src/Routes/DetailPage/DetailPage.tsx
+++ b/src/Routes/DetailPage/DetailPage.tsx
@@ -103,6 +103,7 @@ const DetailPage = () => {
             });
         }
       }}
+      ouiaId="ButtonDetailsDelete"
     >
       Delete
     </DropdownItem>,
@@ -121,7 +122,7 @@ const DetailPage = () => {
         <PageHeader className="pf-u-mb-0">
           <Flex>
             <FlexItem className="pf-u-mr-auto">
-              <PageHeaderTitle title={domain?.title} />
+              <PageHeaderTitle title={domain?.title} ouiaId="TextDetailTitle" />
             </FlexItem>
             <FlexItem>
               <Dropdown
@@ -142,8 +143,8 @@ const DetailPage = () => {
             aria-label="Tabs in the detail page"
             role="region"
           >
-            <Tab title={<TabTitleText>General</TabTitleText>} eventKey={0} />
-            <Tab title={<TabTitleText>Servers</TabTitleText>} eventKey={1} />
+            <Tab title={<TabTitleText>General</TabTitleText>} eventKey={0} ouiaId="ButtonDetailGeneral" />
+            <Tab title={<TabTitleText>Servers</TabTitleText>} eventKey={1} ouiaId="ButtonDetailServers" />
           </Tabs>
         </PageHeader>
         <PageSection>
diff --git a/src/Routes/WizardPage/Components/PagePreparation/PagePreparation.tsx b/src/Routes/WizardPage/Components/PagePreparation/PagePreparation.tsx
index 345f37e..8b55bfa 100644
--- a/src/Routes/WizardPage/Components/PagePreparation/PagePreparation.tsx
+++ b/src/Routes/WizardPage/Components/PagePreparation/PagePreparation.tsx
@@ -75,14 +75,21 @@ const PagePreparation = (props: PagePreparationProps) => {
 
   return (
     <>
-      <Title headingLevel={'h2'}>Preparation for your identity domain registration</Title>
+      <Title headingLevel={'h2'} ouiaId="TextWizardPagePreparationTitle">
+        Preparation for your identity domain registration
+      </Title>
       <Form
         onSubmit={(value) => {
           console.debug('TODO onSubmit WizardPage' + String(value));
         }}
       >
         <FormGroup label="Identity domain type" fieldId="register-domain-type" className="pf-u-mt-lg">
-          <Alert title={'Only Red Hat Identity Management (IdM) is currently supported.'} variant="info" isInline></Alert>
+          <Alert
+            title={'Only Red Hat Identity Management (IdM) is currently supported.'}
+            variant="info"
+            isInline
+            ouiaId="AlertWizardPagePrepare"
+          ></Alert>
         </FormGroup>
         <FormGroup label="Identity domain prerequisites">
           <ol>
@@ -96,6 +103,7 @@ const PagePreparation = (props: PagePreparationProps) => {
                 iconPosition="right"
                 isInline
                 href={prerequisitesLink}
+                ouiaId="ButtonWizardPagePreparePrerequisites"
               >
                 prerequisites
               </Button>
@@ -105,7 +113,7 @@ const PagePreparation = (props: PagePreparationProps) => {
                 Verify whether or not the package is present on your Red Hat IdM server(s) by running the following command in a terminal on your Red
                 Hat IdM server(s):
               </TextContent>
-              <ClipboardCopy hoverTip="copy" clickTip="Copied" isReadOnly>
+              <ClipboardCopy hoverTip="copy" clickTip="Copied" isReadOnly ouiaId="TextWizardPagePrepareCheckInstall">
                 dnf list installed ipa-hcc-server
               </ClipboardCopy>
               <TextContent className="pf-u-pt-md">
@@ -118,10 +126,11 @@ const PagePreparation = (props: PagePreparationProps) => {
                   iconPosition="right"
                   isInline
                   href={installServerPackagesLink}
+                  ouiaId="LinkWizardPagePrepareInstall"
                 >
                   steps to install the server packages
                 </Button>
-                <ClipboardCopy hoverTip="copy" clickTip="Copied" isReadOnly>
+                <ClipboardCopy hoverTip="copy" clickTip="Copied" isReadOnly ouiaId="TextWizardPagePrepareInstallPackage">
                   dnf copr enable copr.devel.redhat.com/cheimes/ipa-hcc && dnf install ipa-hcc-server
                 </ClipboardCopy>
               </TextContent>
diff --git a/src/Routes/WizardPage/Components/PageReview/PageReview.tsx b/src/Routes/WizardPage/Components/PageReview/PageReview.tsx
index 5f49410..338b478 100644
--- a/src/Routes/WizardPage/Components/PageReview/PageReview.tsx
+++ b/src/Routes/WizardPage/Components/PageReview/PageReview.tsx
@@ -52,11 +52,12 @@ interface PageReviewIpaServersProps {
  * @see {@link PageReviewIpa} about the parent component.
  */
 const PageReviewIpaServersBody = (props: PageReviewIpaServersProps) => {
+  let row = 1;
   return (
     <Tbody>
       {props.servers?.map((server) => {
         return (
-          <Tr key={server.subscription_manager_id}>
+          <Tr key={server.subscription_manager_id} ouiaId={'RowReviewServers' + row++}>
             <Td>{server.fqdn}</Td>
             <Td>{server.subscription_manager_id}</Td>
           </Tr>
@@ -77,7 +78,7 @@ const PageReviewIpaServersBody = (props: PageReviewIpaServersProps) => {
 const PageReviewIpaServers = (props: PageReviewIpaServersProps) => {
   return (
     <>
-      <TableComposable variant="compact">
+      <TableComposable variant="compact" ouiaId="TextWizardReviewTable">
         <PageReviewIpaServersHead />
         <PageReviewIpaServersBody servers={props.servers} />
       </TableComposable>
@@ -163,7 +164,7 @@ interface PageReviewProps {
 const PageReview = (props: PageReviewProps) => {
   return (
     <>
-      <Title className="pt-u-mb-xl" headingLevel={'h2'}>
+      <Title className="pt-u-mb-xl" headingLevel={'h2'} ouiaId="TextWizardReviewTitle">
         Review
       </Title>
       {props.domain.domain_type === 'rhel-idm' && <PageReviewIpa domain={props.domain} className="pf-u-mt-lg" />}
diff --git a/src/Routes/WizardPage/Components/PageServiceDetails/PageServiceDetails.tsx b/src/Routes/WizardPage/Components/PageServiceDetails/PageServiceDetails.tsx
index b998890..92889a6 100644
--- a/src/Routes/WizardPage/Components/PageServiceDetails/PageServiceDetails.tsx
+++ b/src/Routes/WizardPage/Components/PageServiceDetails/PageServiceDetails.tsx
@@ -70,9 +70,17 @@ const PageServiceDetails = (props: PageServiceDetailsProps) => {
   return (
     <>
       <Form onSubmit={(e) => e.preventDefault()}>
-        <Title headingLevel={'h2'}>Add your identity domain information</Title>
+        <Title headingLevel={'h2'} ouiaId="TextWizardDetailsTitle">
+          Add your identity domain information
+        </Title>
         <FormGroup label="Display name" isRequired fieldId="register-title">
-          <TextInput id="register-title" value={title} onChange={onChangeTitle} className="pf-u-w-100 pf-u-w-50-on-md pf-u-w-50-on-xl" />
+          <TextInput
+            id="register-title"
+            value={title}
+            onChange={onChangeTitle}
+            className="pf-u-w-100 pf-u-w-50-on-md pf-u-w-50-on-xl"
+            ouiaId="TextWizardDetailsDomainTitle"
+          />
         </FormGroup>
         <FormGroup label="Description" fieldId="register-description">
           <TextArea
@@ -105,6 +113,7 @@ const PageServiceDetails = (props: PageServiceDetailsProps) => {
             isChecked={isAutoEnrollmentEnabled}
             hasCheckIcon
             onChange={onChangeAutoEnrollment}
+            ouiaId="ButtonWizardDetailsDomainAutoenrollment"
           />
         </FormGroup>
       </Form>
diff --git a/src/Routes/WizardPage/Components/PageServiceRegistration/PageServiceRegistration.tsx b/src/Routes/WizardPage/Components/PageServiceRegistration/PageServiceRegistration.tsx
index 0b94da9..d40ee5c 100644
--- a/src/Routes/WizardPage/Components/PageServiceRegistration/PageServiceRegistration.tsx
+++ b/src/Routes/WizardPage/Components/PageServiceRegistration/PageServiceRegistration.tsx
@@ -60,12 +60,14 @@ const PageServiceRegistration = (props: PageServiceRegistrationProp) => {
 
   return (
     <>
-      <Title headingLevel={'h2'}>Register your identity domain</Title>
+      <Title headingLevel={'h2'} ouiaId="TextWizardRegistrationTitle">
+        Register your identity domain
+      </Title>
       <Form onSubmit={(e) => e.preventDefault()}>
-        <Alert title={alertTitle} variant="warning" isInline className="pf-u-mt-lg">
+        <Alert title={alertTitle} variant="warning" isInline className="pf-u-mt-lg" ouiaId="AlertWizardRegistrationNote">
           Completing this step registers your identity domain, and cannot be undone from the wizard.{' '}
           <div className="pf-u-mt-md">
-            <Button component="a" target="_blank" variant="link" isInline href={linkLearnMoreAbout}>
+            <Button component="a" target="_blank" variant="link" isInline href={linkLearnMoreAbout} ouiaId="LinkWizardRegistrationLearnMore">
               Learn more about registering identity domains
             </Button>
           </div>
@@ -76,7 +78,7 @@ const PageServiceRegistration = (props: PageServiceRegistrationProp) => {
               Register your Red Hat IdM domain with the Red Hat Hybrid Cloud Console by running the following command in a terminal on your Red Hat
               IdM server.
             </TextContent>
-            <ClipboardCopy hoverTip="copy" clickTip="Copied" isReadOnly>
+            <ClipboardCopy hoverTip="copy" clickTip="Copied" isReadOnly ouiaId="TextWizardRegistrationRegister">
               {ipa_hcc_register_cmd}
             </ClipboardCopy>
           </li>
diff --git a/src/Routes/WizardPage/Components/VerifyRegistry/VerifyRegistry.tsx b/src/Routes/WizardPage/Components/VerifyRegistry/VerifyRegistry.tsx
index 90305a1..3e97cfb 100644
--- a/src/Routes/WizardPage/Components/VerifyRegistry/VerifyRegistry.tsx
+++ b/src/Routes/WizardPage/Components/VerifyRegistry/VerifyRegistry.tsx
@@ -101,7 +101,7 @@ const VerifyRegistryFooter = (props: VerifyRegistryFooterProps) => {
     <>
       {props.state == 'initial' && (
         <>
-          <Button className="pf-u-my-xs" variant="secondary" onClick={props.onTest}>
+          <Button className="pf-u-my-xs" variant="secondary" onClick={props.onTest} ouiaId="ButtonVerifyTest">
             Test
           </Button>
         </>
@@ -109,21 +109,29 @@ const VerifyRegistryFooter = (props: VerifyRegistryFooterProps) => {
       {props.state == 'waiting' && <></>}
       {props.state == 'timed-out' && (
         <>
-          <Button variant="secondary" onClick={props.onTest}>
+          <Button variant="secondary" onClick={props.onTest} ouiaId="ButtonVerifyTestAgain">
             Test again
           </Button>
         </>
       )}
       {props.state == 'not-found' && (
         <>
-          <Button isInline variant="link" target="_blank" href={linkTroubleshootRegistration} icon={<ExternalLinkAltIcon />} iconPosition="right">
+          <Button
+            isInline
+            variant="link"
+            target="_blank"
+            href={linkTroubleshootRegistration}
+            icon={<ExternalLinkAltIcon />}
+            iconPosition="right"
+            ouiaId="ButtonVerifyTroubleshoot"
+          >
             Troubleshoot registration
           </Button>
         </>
       )}
       {props.state == 'completed' && (
         <>
-          <Button variant="secondary" onClick={props.onTest}>
+          <Button variant="secondary" onClick={props.onTest} ouiaId="ButtonVerifyCompleted">
             Test
           </Button>
         </>
diff --git a/src/Routes/WizardPage/WizardPage.tsx b/src/Routes/WizardPage/WizardPage.tsx
index e64a63d..d89e79c 100644
--- a/src/Routes/WizardPage/WizardPage.tsx
+++ b/src/Routes/WizardPage/WizardPage.tsx
@@ -218,7 +218,7 @@ const WizardPage = () => {
     <>
       <Page>
         <PageHeader>
-          <PageHeaderTitle title={title} />
+          <PageHeaderTitle title={title} ouiaId="TextWizardTitle" />
           <p>
             Add an identity domain to the registry.{' '}
             <Button
@@ -229,6 +229,7 @@ const WizardPage = () => {
               icon={<ExternalLinkAltIcon />}
               iconPosition="right"
               href={linkLearnMoreAbout}
+              ouiaId="LinkWizardHeaderLearnAbout"
             >
               Learn more about registering identity domains{' '}
             </Button>