From 1a7394b9c94afa4ee202b1ec00c1476a8645f644 Mon Sep 17 00:00:00 2001
From: MVarshini <varm@redhat.com>
Date: Thu, 31 Aug 2023 00:10:50 +0530
Subject: [PATCH] Relay  modal text update (#3534)

Provide a better description of the Relay modal dialog
---
 .../OverviewComponent/common-component.jsx     | 10 ++++++----
 .../components/RelayUIComponent/index.jsx      | 18 +++++++++++++++---
 .../components/RelayUIComponent/index.less     | 11 ++++++++++-
 3 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/dashboard/src/modules/components/OverviewComponent/common-component.jsx b/dashboard/src/modules/components/OverviewComponent/common-component.jsx
index 8440f80ce0..d455deb12e 100644
--- a/dashboard/src/modules/components/OverviewComponent/common-component.jsx
+++ b/dashboard/src/modules/components/OverviewComponent/common-component.jsx
@@ -419,10 +419,12 @@ export const MetadataRow = (props) => {
   return (
     <Table className="box" key={uid()} aria-label="metadata-table">
       <Thead>
-        <Th width={25} textCenter>
-          {columnNames.key}
-        </Th>
-        <Th width={40}>{columnNames.value}</Th>
+        <Tr>
+          <Th width={25} textCenter>
+            {columnNames.key}
+          </Th>
+          <Th width={40}>{columnNames.value}</Th>
+        </Tr>
       </Thead>
       <Tbody>
         {checkedItems.map((attr) => {
diff --git a/dashboard/src/modules/components/RelayUIComponent/index.jsx b/dashboard/src/modules/components/RelayUIComponent/index.jsx
index ad1a4ecaae..d86061deeb 100644
--- a/dashboard/src/modules/components/RelayUIComponent/index.jsx
+++ b/dashboard/src/modules/components/RelayUIComponent/index.jsx
@@ -42,12 +42,12 @@ const AboutComponent = () => (
 );
 const PopoverComponent = () => (
   <Popover
-    aria-label="Basic popover"
+    aria-label="Relay About Popover"
     headerContent={<div>About</div>}
     bodyContent={<AboutComponent />}
     maxWidth="4vw"
   >
-    <Button variant="plain" aria-label="About">
+    <Button variant="plain" aria-label="About" className="popover-btn">
       <OutlinedQuestionCircleIcon />
     </Button>
   </Popover>
@@ -73,9 +73,21 @@ const RelayComponent = () => {
       onClose={handleClose}
     >
       <div className="modal-heading">
-        <Title headingLevel="h3">Relay</Title>
+        <Title headingLevel="h3">Pull Datasets</Title>
         <PopoverComponent />
       </div>
+      <p className="modal-desc">
+        When you use the Pbench Agent{" "}
+        <span className="italicized"> pbench-results-move </span> command with
+        the
+        <span className="italicized"> --relay </span>option to push results to a
+        relay server, the command will report a URL.
+      </p>
+      <p className="modal-desc">
+        Enter that URL here to instruct the Pbench Server to upload the results
+        data from the relay and remove it from the relay.
+      </p>
+
       <div className="card-wrapper">
         <Card>
           <CardBody>
diff --git a/dashboard/src/modules/components/RelayUIComponent/index.less b/dashboard/src/modules/components/RelayUIComponent/index.less
index f3da8d0df5..022df90373 100644
--- a/dashboard/src/modules/components/RelayUIComponent/index.less
+++ b/dashboard/src/modules/components/RelayUIComponent/index.less
@@ -5,9 +5,18 @@
   }
   .modal-heading {
     display: flex;
+    .popover-btn {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+  .modal-desc {
+    margin: 1vh 0;
+    .italicized {
+      font-style: italic;
+    }
   }
   .card-wrapper {
-    height: 45vh;
     display: flex;
     align-items: center;
     justify-content: center;