From 86b3404fdcf7c51956c71e9570e0259dc9687837 Mon Sep 17 00:00:00 2001
From: ibolton336 <ibolton@redhat.com>
Date: Thu, 24 Aug 2023 16:49:51 -0400
Subject: [PATCH] Update analysis details style and tooltip

Add styling

Signed-off-by: ibolton336 <ibolton@redhat.com>
---
 .../application-detail-drawer-analysis.tsx    | 56 +++++++++++++------
 .../components/download-button.tsx            | 12 ++--
 2 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer-analysis.tsx b/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer-analysis.tsx
index 057e0f64b9..03682c911e 100644
--- a/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer-analysis.tsx
+++ b/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer-analysis.tsx
@@ -6,6 +6,11 @@ import {
   Title,
   Tooltip,
   Button,
+  Divider,
+  TextList,
+  TextListItem,
+  TextListVariants,
+  TextListItemVariants,
 } from "@patternfly/react-core";
 import {
   CheckCircleIcon,
@@ -26,7 +31,7 @@ import { SimpleDocumentViewerModal } from "@app/components/SimpleDocumentViewer"
 import { APPLICATIONS, getTaskById } from "@app/api/rest";
 import { COLOR_HEX_VALUES_BY_NAME } from "@app/Constants";
 import { Link } from "react-router-dom";
-import DownloadButton from "./components/download-button";
+import DownloadButton, { MimeType } from "./components/download-button";
 
 export interface IApplicationDetailDrawerAnalysisProps
   extends Pick<
@@ -102,7 +107,7 @@ export const ApplicationDetailDrawerAnalysis: React.FC<
           </Title>
           {task?.state === "Succeeded" && application ? (
             <>
-              <Tooltip content="View Report">
+              <Tooltip content="View the analysis task details">
                 <Button
                   icon={
                     <span className={spacing.mrXs}>
@@ -114,25 +119,42 @@ export const ApplicationDetailDrawerAnalysis: React.FC<
                   type="button"
                   variant="link"
                   onClick={() => setAppAnalysisToView(application.id)}
+                  className={spacing.ml_0}
+                  style={{ margin: "0", padding: "0" }}
                 >
-                  View analysis
+                  Analysis details
                 </Button>
               </Tooltip>
-              <Text component="small">
-                <Tooltip
-                  content="Click to download Analysis report"
-                  position="top"
-                >
-                  <DownloadButton application={application} mimeType="tar" />
-                </Tooltip>
-                {" | "}
-                <Tooltip
-                  content="Click to download Analysis report"
-                  position="top"
+              <Divider className={spacing.mtMd}></Divider>
+              <TextList component={TextListVariants.dl}>
+                <TextListItem
+                  component={TextListItemVariants.dt}
+                  className={spacing.pXs}
                 >
-                  <DownloadButton application={application} mimeType="yaml" />
-                </Tooltip>
-              </Text>
+                  Download
+                </TextListItem>
+                <TextListItem component={TextListItemVariants.dd}>
+                  <Tooltip
+                    content="Click to download Analysis report"
+                    position="top"
+                  >
+                    <DownloadButton
+                      application={application}
+                      mimeType={MimeType.TAR}
+                    />
+                  </Tooltip>
+                  {" | "}
+                  <Tooltip
+                    content="Click to download Analysis report"
+                    position="top"
+                  >
+                    <DownloadButton
+                      application={application}
+                      mimeType={MimeType.YAML}
+                    />
+                  </Tooltip>
+                </TextListItem>
+              </TextList>
             </>
           ) : task?.state === "Failed" ? (
             task ? (
diff --git a/client/src/app/pages/applications/components/application-detail-drawer/components/download-button.tsx b/client/src/app/pages/applications/components/application-detail-drawer/components/download-button.tsx
index 6de90b79b4..4e0cb99673 100644
--- a/client/src/app/pages/applications/components/application-detail-drawer/components/download-button.tsx
+++ b/client/src/app/pages/applications/components/application-detail-drawer/components/download-button.tsx
@@ -5,12 +5,16 @@ import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
 import { Application } from "@app/api/models";
 import { Spinner } from "@patternfly/react-core";
 
+export enum MimeType {
+  TAR = "tar",
+  YAML = "yaml",
+}
 function DownloadButton({
   application,
   mimeType,
 }: {
   application: Application;
-  mimeType: string;
+  mimeType: MimeType;
 }) {
   const [isLoading, setIsLoading] = useState(false);
 
@@ -18,10 +22,10 @@ function DownloadButton({
     let acceptHeader = "application/x-tar";
 
     switch (mimeType) {
-      case "yaml":
+      case MimeType.YAML:
         acceptHeader = "application/x-yaml";
         break;
-      case "tar":
+      case MimeType.TAR:
       default:
         acceptHeader = "application/x-tar";
     }
@@ -70,7 +74,7 @@ function DownloadButton({
           variant="link"
           className={spacing.pXs}
         >
-          {`Download ${mimeType.toUpperCase()}`}
+          {mimeType === MimeType.YAML ? "YAML" : "Report"}
         </Button>
       )}
     </>