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 <[email protected]>
podengo-project · Jan 23, 2024 · ba8ae3f · ba8ae3f
1 parent 85c82ed
commit ba8ae3f
Show file tree

Hide file tree

Showing 11 changed files with 88 additions and 28 deletions.
diff --git 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: 'btn_action_enabledisable',
     },
     {
       title: 'Edit',
       onClick: () => console.log(`clicked on Edit, on row ${domain.title}`),
+      ouiaId: 'btn_action_edit',
     },
     {
       title: 'Delete',
       onClick: () => onDelete(domain),
+      ouiaId: 'btn_action_delete',
     },
   ];
 
@@ -237,6 +240,7 @@ export const DomainList = () => {
                       onClick={() => {
                         onShowDetails(domain);
                       }}
+                      ouiaId="link_list_domain_details"
                     >
                       {domain.title}
                     </Button>

diff --git a/src/Routes/DefaultPage/DefaultPage.tsx b/src/Routes/DefaultPage/DefaultPage.tsx
@@ -39,7 +39,16 @@ const Header = () => {
       <PageHeaderTitle title={title} />
       <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="link_default_learn_more_about_1"
+        >
           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="btn_default_register_identity_domain">
+                    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="link_default_learn_more_about_2"
                   >
                     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="btn_default_register_identity_domain" 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
@@ -178,6 +178,7 @@ export const DetailGeneral = (props: DetailGeneralProps) => {
                 setIsTitleModalOpen(true);
                 return;
               }}
+              ouiaId="btn_detail_general_edit_title"
             >
               <Icon>
                 <PencilAltIcon />
@@ -205,6 +206,7 @@ export const DetailGeneral = (props: DetailGeneralProps) => {
                 setEditDescription(description);
                 setIsDescriptionModalOpen(true);
               }}
+              ouiaId="btn_detail_general_edit_description"
             >
               <Icon>
                 <PencilAltIcon />
@@ -229,6 +231,7 @@ export const DetailGeneral = (props: DetailGeneralProps) => {
               onClick={() => {
                 props.onShowServerTab && props.onShowServerTab();
               }}
+              ouiaId="btn_detail_general_edit_autoenrollment"
             >
               {domain?.['rhel-idm']?.servers.length}
             </Button>
@@ -277,6 +280,7 @@ export const DetailGeneral = (props: DetailGeneralProps) => {
                 new Error('not implemented');
                 return;
               }}
+              ouiaId="link_detail_general_certificate"
             >
               <Icon>
                 <DownloadIcon />
@@ -291,27 +295,35 @@ export const DetailGeneral = (props: DetailGeneralProps) => {
         title="Edit display name"
         isOpen={isTitleModalOpen}
         onClose={handleCancelTitleButton}
+        ouiaId="modal_title"
         actions={[
-          <Button key="save" variant="primary" isDisabled={title == editTitle} onClick={handleSaveTitleButton}>
+          <Button key="save" variant="primary" isDisabled={title == editTitle} onClick={handleSaveTitleButton} ouiaId="btn_modal_title_save">
             Save
           </Button>,
-          <Button key="cancel" variant="link" onClick={handleCancelTitleButton}>
+          <Button key="cancel" variant="link" onClick={handleCancelTitleButton} ouiaId="btn_modal_title_cancel">
             Cancel
           </Button>,
         ]}
       >
-        <TextInput value={editTitle} type="text" onChange={(value) => setEditTitle(value)} />
+        <TextInput value={editTitle} type="text" onChange={(value) => setEditTitle(value)} ouiaId="btn_modal_title_value" />
       </Modal>
       <Modal
         variant={ModalVariant.small}
         title="Edit description"
         isOpen={isDescriptionModalOpen}
         onClose={handleCancelDescriptionButton}
+        ouiaId="modal_description"
         actions={[
-          <Button key="save" variant="primary" isDisabled={description == editDescription} onClick={handleSaveDescriptionButton}>
+          <Button
+            key="save"
+            variant="primary"
+            isDisabled={description == editDescription}
+            onClick={handleSaveDescriptionButton}
+            ouiaId="btn_modal_description_save"
+          >
             Save
           </Button>,
-          <Button key="cancel" variant="link" onClick={handleCancelDescriptionButton}>
+          <Button key="cancel" variant="link" onClick={handleCancelDescriptionButton} ouiaId="btn_modal_description_save">
             Cancel
           </Button>,
         ]}

diff --git a/src/Routes/DetailPage/Components/DetailServers/DetailServers.tsx b/src/Routes/DetailPage/Components/DetailServers/DetailServers.tsx
@@ -117,7 +117,7 @@ export const DetailServers = (props: DetailServersProps) => {
             </Thead>
             <Tbody>
               {servers.map((server) => (
-                <Tr key={server.subscription_manager_id}>
+                <Tr key={server.subscription_manager_id} ouiaId={'row_detail_server_' + server.subscription_manager_id}>
                   <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
@@ -103,6 +103,7 @@ const DetailPage = () => {
             });
         }
       }}
+      ouiaId="btn_details_delete"
     >
       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="txt_detail_title" />
             </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="btn_detail_general" />
+            <Tab title={<TabTitleText>Servers</TabTitleText>} eventKey={1} ouiaId="btn_detail_servers" />
           </Tabs>
         </PageHeader>
         <PageSection>

diff --git 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="txt_wizard_page_preparation_title">
+        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="alert_wizard_pageprepare_alert"
+          ></Alert>
         </FormGroup>
         <FormGroup label="Identity domain prerequisites">
           <ol>
@@ -96,6 +103,7 @@ const PagePreparation = (props: PagePreparationProps) => {
                 iconPosition="right"
                 isInline
                 href={prerequisitesLink}
+                ouiaId="btn_wizard_pageprepare_prerequisites"
               >
                 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="txt_wizard_pageprepare_check_install">
                 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="link_wizard_pageprepare_install"
                 >
                   steps to install the server packages
                 </Button>
-                <ClipboardCopy hoverTip="copy" clickTip="Copied" isReadOnly>
+                <ClipboardCopy hoverTip="copy" clickTip="Copied" isReadOnly ouiaId="txt_wizard_pageprepare_install_pkg">
                   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
@@ -77,7 +77,7 @@ const PageReviewIpaServersBody = (props: PageReviewIpaServersProps) => {
 const PageReviewIpaServers = (props: PageReviewIpaServersProps) => {
   return (
     <>
-      <TableComposable variant="compact">
+      <TableComposable variant="compact" ouiaId="txt_wizard_review_table">
         <PageReviewIpaServersHead />
         <PageReviewIpaServersBody servers={props.servers} />
       </TableComposable>
@@ -163,7 +163,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="txt_wizard_review_title">
         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
@@ -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="txt_wizard_details_title">
+          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="txt_wizard_details_domain_title"
+          />
         </FormGroup>
         <FormGroup label="Description" fieldId="register-description">
           <TextArea
@@ -105,6 +113,7 @@ const PageServiceDetails = (props: PageServiceDetailsProps) => {
             isChecked={isAutoEnrollmentEnabled}
             hasCheckIcon
             onChange={onChangeAutoEnrollment}
+            ouiaId="btn_wizard_details_domain_autoenrollment"
           />
         </FormGroup>
       </Form>

diff --git 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="txt_wizard_registration_title">
+        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="alert_wizard_registration_note">
           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="link_wizard_registration_learn_more">
               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="txt_wizard_registration_register">
               {ipa_hcc_register_cmd}
             </ClipboardCopy>
           </li>

diff --git a/src/Routes/WizardPage/Components/VerifyRegistry/VerifyRegistry.tsx b/src/Routes/WizardPage/Components/VerifyRegistry/VerifyRegistry.tsx
@@ -101,29 +101,37 @@ 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="btn_verify_test">
             Test
           </Button>
         </>
       )}
       {props.state == 'waiting' && <></>}
       {props.state == 'timed-out' && (
         <>
-          <Button variant="secondary" onClick={props.onTest}>
+          <Button variant="secondary" onClick={props.onTest} ouiaId="btn_verify_test_again">
             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="btn_verify_troubleshoot"
+          >
             Troubleshoot registration
           </Button>
         </>
       )}
       {props.state == 'completed' && (
         <>
-          <Button variant="secondary" onClick={props.onTest}>
+          <Button variant="secondary" onClick={props.onTest} ouiaId="btn_verify_completed">
             Test
           </Button>
         </>

diff --git a/src/Routes/WizardPage/WizardPage.tsx b/src/Routes/WizardPage/WizardPage.tsx
@@ -229,6 +229,7 @@ const WizardPage = () => {
               icon={<ExternalLinkAltIcon />}
               iconPosition="right"
               href={linkLearnMoreAbout}
+              ouiaId="link_wizard_header_learn_about"
             >
               Learn more about registering identity domains{' '}
             </Button>