From fb4a7373a1964026a6fd62474fba294c4e3246eb Mon Sep 17 00:00:00 2001
From: Kia Lam <digitalanime@gmail.com>
Date: Mon, 26 Sep 2022 08:22:43 -0700
Subject: [PATCH] Add locators for QE.

---
 .../InstanceDetail/InstanceDetail.js          |  9 +++++
 awx/ui/src/screens/TopologyView/MeshGraph.js  |  1 +
 awx/ui/src/screens/TopologyView/Tooltip.js    | 35 +++++++++++--------
 3 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.js b/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.js
index cd47a4c75429..3871837e2fba 100644
--- a/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.js
+++ b/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.js
@@ -194,6 +194,7 @@ function InstanceDetail({ setBreadcrumb, isK8s }) {
           />
           <Detail
             label={t`Status`}
+            dataCy="status"
             value={
               instance.node_state ? (
                 <StatusLabel status={instance.node_state} />
@@ -214,6 +215,7 @@ function InstanceDetail({ setBreadcrumb, isK8s }) {
                 <Detail
                   fullWidth
                   label={t`Instance Groups`}
+                  dataCy="instance-groups"
                   helpText={t`The Instance Groups to which this instance belongs.`}
                   value={instanceGroups.map((ig) => (
                     <React.Fragment key={ig.id}>
@@ -239,6 +241,7 @@ function InstanceDetail({ setBreadcrumb, isK8s }) {
               )}
               <Detail
                 label={t`Last Health Check`}
+                dataCy="last-health-check"
                 value={formatDateString(healthCheck?.last_health_check)}
               />
               {instance.related?.install_bundle && (
@@ -252,6 +255,7 @@ function InstanceDetail({ setBreadcrumb, isK8s }) {
                         href={`${instance.related?.install_bundle}`}
                         target="_blank"
                         variant="secondary"
+                        dataCy="install-bundle-download-button"
                       >
                         <DownloadIcon />
                       </Button>
@@ -261,6 +265,7 @@ function InstanceDetail({ setBreadcrumb, isK8s }) {
               )}
               <Detail
                 label={t`Capacity Adjustment`}
+                dataCy="capacity-adjustment"
                 value={
                   <SliderHolder data-cy="slider-holder">
                     <div data-cy="cpu-capacity">{t`CPU ${instance.cpu_capacity}`}</div>
@@ -285,6 +290,7 @@ function InstanceDetail({ setBreadcrumb, isK8s }) {
               />
               <Detail
                 label={t`Used Capacity`}
+                dataCy="used-capacity"
                 value={
                   instance.enabled ? (
                     <Progress
@@ -307,6 +313,7 @@ function InstanceDetail({ setBreadcrumb, isK8s }) {
             <Detail
               fullWidth
               label={t`Errors`}
+              dataCy="errors"
               value={
                 <CodeBlock>
                   <CodeBlockCode>{healthCheck?.errors}</CodeBlockCode>
@@ -319,6 +326,7 @@ function InstanceDetail({ setBreadcrumb, isK8s }) {
           <CardActionsRow>
             {me.is_superuser && isK8s && instance.node_type === 'execution' && (
               <RemoveInstanceButton
+                dataCy="remove-instance-button"
                 itemsToRemove={[instance]}
                 isK8s={isK8s}
                 onRemove={removeInstances}
@@ -340,6 +348,7 @@ function InstanceDetail({ setBreadcrumb, isK8s }) {
               css="display: inline-flex;"
               fetchInstances={fetchDetails}
               instance={instance}
+              dataCy="enable-instance"
             />
           </CardActionsRow>
         )}
diff --git a/awx/ui/src/screens/TopologyView/MeshGraph.js b/awx/ui/src/screens/TopologyView/MeshGraph.js
index 5b6ca6456249..c20b521ae683 100644
--- a/awx/ui/src/screens/TopologyView/MeshGraph.js
+++ b/awx/ui/src/screens/TopologyView/MeshGraph.js
@@ -224,6 +224,7 @@ function MeshGraph({ data, showLegend, zoom, setShowZoomControls }) {
         .data(nodes)
         .enter()
         .append('g')
+        .attr('data-cy', (d) => `node-${d.id}`)
         .on('mouseenter', function handleNodeHover(_, d) {
           d3.select(this).transition().style('cursor', 'pointer');
           highlightSiblings(d);
diff --git a/awx/ui/src/screens/TopologyView/Tooltip.js b/awx/ui/src/screens/TopologyView/Tooltip.js
index e2d8a792eb6c..5544c5ec85c2 100644
--- a/awx/ui/src/screens/TopologyView/Tooltip.js
+++ b/awx/ui/src/screens/TopologyView/Tooltip.js
@@ -198,6 +198,7 @@ function Tooltip({
               title={t`Error!`}
               isOpen
               onClose={dismissUpdateError}
+              dataCy="update-instance-alert"
             >
               {t`Failed to update instance.`}
               <ErrorDetail error={updateError} />
@@ -222,6 +223,7 @@ function Tooltip({
                     variant="link"
                     isInline
                     onClick={redirectToDetailsPage}
+                    dataCy="redirect-to-details-button"
                   >
                     {instanceDetail.hostname}
                   </PFButton>
@@ -229,13 +231,13 @@ function Tooltip({
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>{t`Instance status`}</DescriptionListTerm>
-                <DescriptionListDescription>
+                <DescriptionListDescription dataCy="node-state">
                   <StatusLabel status={instanceDetail.node_state} />
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>{t`Instance type`}</DescriptionListTerm>
-                <DescriptionListDescription>
+                <DescriptionListDescription dataCy="node-type">
                   {instanceDetail.node_type}
                 </DescriptionListDescription>
               </DescriptionListGroup>
@@ -243,15 +245,17 @@ function Tooltip({
                 <DescriptionListGroup>
                   <DescriptionListTerm>{t`Download bundle`}</DescriptionListTerm>
                   <DescriptionListDescription>
-                    <a href={`${instanceDetail.related.install_bundle}`}>
-                      <PFButton
-                        ouiaId="job-output-download-button"
-                        variant="plain"
-                        aria-label={t`Download Bundle`}
-                      >
-                        <DownloadIcon />
-                      </PFButton>
-                    </a>
+                    <PFButton
+                      dataCy="install-bundle-download-button"
+                      aria-label={t`Download Bundle`}
+                      component="a"
+                      isSmall
+                      href={`${instanceDetail.related?.install_bundle}`}
+                      target="_blank"
+                      variant="secondary"
+                    >
+                      <DownloadIcon />
+                    </PFButton>
                   </DescriptionListDescription>
                 </DescriptionListGroup>
               )}
@@ -266,7 +270,7 @@ function Tooltip({
               {instanceGroups && (
                 <DescriptionListGroup>
                   <DescriptionListTerm>{t`Instance groups`}</DescriptionListTerm>
-                  <DescriptionListDescription>
+                  <DescriptionListDescription dataCy="instance-groups">
                     {renderInstanceGroups(instanceGroups.results)}
                   </DescriptionListDescription>
                 </DescriptionListGroup>
@@ -305,7 +309,7 @@ function Tooltip({
                   </DescriptionListGroup>
                   <DescriptionListGroup>
                     <DescriptionListTerm>{t`Capacity`}</DescriptionListTerm>
-                    <DescriptionListDescription>
+                    <DescriptionListDescription dataCy="used-capacity">
                       {usedCapacity(instanceDetail)}
                     </DescriptionListDescription>
                   </DescriptionListGroup>
@@ -315,6 +319,7 @@ function Tooltip({
                         css="display: inline-flex;"
                         fetchInstances={fetchInstance}
                         instance={instanceDetail}
+                        dataCy="enable-instance"
                       />
                     </DescriptionListDescription>
                   </DescriptionListGroup>
@@ -323,13 +328,13 @@ function Tooltip({
 
               <DescriptionListGroup>
                 <DescriptionListTerm>{t`Last modified`}</DescriptionListTerm>
-                <DescriptionListDescription>
+                <DescriptionListDescription dataCy="last-modified">
                   {formatDateString(instanceDetail.modified)}
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>{t`Last seen`}</DescriptionListTerm>
-                <DescriptionListDescription>
+                <DescriptionListDescription dataCy="last-seen">
                   {instanceDetail.last_seen
                     ? formatDateString(instanceDetail.last_seen)
                     : `not found`}