🐛 FIx broken analysis report download

Signed-off-by: ibolton336 <[email protected]>

client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer-analysis.tsx

@@ -141,9 +141,7 @@ export const ApplicationDetailDrawerAnalysis: React.FC<
                       <DownloadButton
                         id={application.id}
                         mimeType={MimeType.TAR}
-                      >
-                        TAR
-                      </DownloadButton>
+                      />
                     </Tooltip>
                     {" | "}
                     <Tooltip
@@ -153,9 +151,7 @@ export const ApplicationDetailDrawerAnalysis: React.FC<
                       <DownloadButton
                         id={application.id}
                         mimeType={MimeType.YAML}
-                      >
-                        YAML
-                      </DownloadButton>
+                      />
                     </Tooltip>
                   </DescriptionListDescription>
                 </DescriptionListGroup>

client/src/app/pages/applications/components/application-detail-drawer/components/download-button.tsx

@@ -1,58 +1,55 @@
 import React from "react";
-import { Button } from "@patternfly/react-core";
+import { Alert, Button } from "@patternfly/react-core";
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
-import { saveAs } from "file-saver";
-
-import { MimeType } from "@app/api/models";
-import { useFetchStaticReport } from "@app/queries/applications";
-import { NotificationsContext } from "@app/components/NotificationsContext";
-import { AxiosError } from "axios";
-import { getAxiosErrorMessage } from "@app/utils/utils";
+import { Spinner } from "@patternfly/react-core";
+import { useDownloadStaticReport } from "@app/queries/applications";
 
+export enum MimeType {
+  TAR = "tar",
+  YAML = "yaml",
+}
 interface IDownloadButtonProps {
   id: number;
   mimeType: MimeType;
-  children: React.ReactNode;
 }
-
 export const DownloadButton: React.FC<IDownloadButtonProps> = ({
   id,
   mimeType,
-  children,
 }) => {
-  const { pushNotification } = React.useContext(NotificationsContext);
-
-  const onFetchStaticReportError = (error: AxiosError) => {
-    pushNotification({
-      title: getAxiosErrorMessage(error),
-      variant: "danger",
-    });
-  };
-
-  const { data: report, refetch } = useFetchStaticReport(
-    id,
-    mimeType,
-    onFetchStaticReportError
-  );
+  const {
+    mutate: downloadFile,
+    isLoading,
+    isError,
+  } = useDownloadStaticReport();
 
   const handleDownload = () => {
-    refetch().then(() => {
-      if (report) {
-        saveAs(new Blob([report]), `analysis-report-app-${id}.${mimeType}`);
-      }
+    downloadFile({
+      applicationId: id,
+      mimeType: mimeType,
     });
   };
 
   return (
-    <Button
-      key={mimeType}
-      onClick={handleDownload}
-      id={`download-${mimeType}-button`}
-      variant="link"
-      className={spacing.pXs}
-    >
-      {children}
-    </Button>
+    <>
+      {isLoading ? (
+        <Spinner size="sm" />
+      ) : isError ? (
+        <Alert variant="warning" isInline title={"Error downloading report"}>
+          <p>{"An error has occurred. Try to download again."}</p>
+        </Alert>
+      ) : (
+        <>
+          <Button
+            onClick={handleDownload}
+            id={`download-${mimeType}-button`}
+            variant="link"
+            className={spacing.pXs}
+          >
+            {mimeType === MimeType.YAML ? "YAML" : "Report"}
+          </Button>
+        </>
+      )}
+    </>
   );
 };
 

client/src/app/queries/applications.ts

@@ -1,24 +1,30 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { AxiosError } from "axios";
+import axios, { AxiosError } from "axios";
 
 import { MimeType } from "@app/api/models";
 import {
+  APPLICATIONS,
   createApplication,
   deleteApplication,
   deleteBulkApplications,
-  getApplicationAnalysis,
   getApplicationById,
   getApplications,
   updateAllApplications,
   updateApplication,
 } from "@app/api/rest";
 import { reviewsQueryKey } from "./reviews";
 import { assessmentsQueryKey } from "./assessments";
+import saveAs from "file-saver";
 
 export const ApplicationDependencyQueryKey = "applicationdependencies";
 export const ApplicationsQueryKey = "applications";
 export const ReportQueryKey = "report";
 
+interface DownloadOptions {
+  applicationId: number;
+  mimeType: MimeType;
+}
+
 export const useFetchApplications = () => {
   const queryClient = useQueryClient();
   const { isLoading, error, refetch, data } = useQuery({
@@ -134,15 +140,44 @@ export const useBulkDeleteApplicationMutation = (
   );
 };
 
-// The report download is triggerred on demand by a refetch()
-export const useFetchStaticReport = (
-  id: number,
-  type: MimeType,
-  onError: (err: AxiosError) => void
-) =>
-  useQuery({
-    queryKey: [ReportQueryKey, id],
-    queryFn: () => getApplicationAnalysis(id, type),
-    onError: onError,
-    enabled: false,
-  });
+export const downloadStaticReport = async ({
+  applicationId,
+  mimeType,
+}: DownloadOptions): Promise<void> => {
+  const yamlAcceptHeader = "application/x-yaml";
+  let url = `${APPLICATIONS}/${applicationId}/analysis/report`;
+
+  switch (mimeType) {
+    case MimeType.YAML:
+      url = `${APPLICATIONS}/${applicationId}/analysis`;
+      break;
+    case MimeType.TAR:
+    default:
+      url = `${APPLICATIONS}/${applicationId}/analysis/report`;
+  }
+
+  try {
+    const response = await axios.get(url, {
+      responseType: "blob",
+      ...(MimeType.YAML && {
+        headers: {
+          Accept: yamlAcceptHeader,
+        },
+      }),
+    });
+
+    if (response.status !== 200) {
+      throw new Error("Network response was not ok when downloading file.");
+    }
+
+    const blob = new Blob([response.data]);
+    saveAs(blob, `analysis-report-app-${applicationId}.${mimeType}`);
+  } catch (error) {
+    console.error("There was an error downloading the file:", error);
+    throw error;
+  }
+};
+
+export const useDownloadStaticReport = () => {
+  return useMutation(downloadStaticReport);
+};