✨ Fetch export questionnaire and application static report with refactor.

client/src/app/api/models.ts

@@ -1,3 +1,8 @@
+export enum MimeType {
+  TAR = "tar",
+  YAML = "yaml",
+}
+
 export type New<T extends { id: number }> = Omit<T, "id">;
 
 export interface HubFilter {

client/src/app/api/rest.ts

@@ -48,6 +48,7 @@ import {
   Questionnaire,
   Archetype,
   InitialAssessment,
+  MimeType,
 } from "./models";
 import { QueryKey } from "@tanstack/react-query";
 import { serializeRequestParamsForHub } from "@app/hooks/table-controls";
@@ -324,6 +325,22 @@ export const getApplications = (): Promise<Application[]> =>
 export const updateApplication = (obj: Application): Promise<Application> =>
   axios.put(`${APPLICATIONS}/${obj.id}`, obj);
 
+export const getApplicationAnalysis = (
+  applicationId: number,
+  type: MimeType
+): Promise<Blob> =>
+  axios.get(
+    `${APPLICATIONS}/${String(applicationId)}/analysis${
+      type === MimeType.TAR ? "/report" : ""
+    }`,
+    {
+      responseType: "blob",
+      headers: {
+        Accept: `application/x-${type}`,
+      },
+    }
+  );
+
 export const getApplicationsImportSummary = (): Promise<
   ApplicationImportSummary[]
 > => axios.get(APP_IMPORT_SUMMARY).then((response) => response.data);
@@ -739,10 +756,23 @@ export const updateProxy = (obj: Proxy): Promise<Proxy> =>
 export const getQuestionnaires = (): Promise<Questionnaire[]> =>
   axios.get(QUESTIONNAIRES).then((response) => response.data);
 
-export const getQuestionnaireById = (
-  id: number | string
-): Promise<Questionnaire> =>
-  axios.get(`${QUESTIONNAIRES}/${id}`).then((response) => response.data);
+export const getQuestionnaireById = <T>(
+  id: number | string,
+  isBlob: boolean = false
+): Promise<T> =>
+  axios
+    .get(
+      `${QUESTIONNAIRES}/${id}`,
+      isBlob
+        ? {
+            responseType: "blob",
+            headers: {
+              Accept: "application/x-yaml",
+            },
+          }
+        : {}
+    )
+    .then((response) => response.data);
 
 export const createQuestionnaire = (
   obj: Questionnaire

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

@@ -17,7 +17,7 @@ import {
   ExclamationCircleIcon,
 } from "@patternfly/react-icons";
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
-import { Fact, Identity, Task } from "@app/api/models";
+import { Identity, MimeType, Task } from "@app/api/models";
 import { getKindIDByRef } from "@app/utils/model-utils";
 import { useFetchIdentities } from "@app/queries/identities";
 import {
@@ -28,10 +28,9 @@ import { EmptyTextMessage } from "@app/components/EmptyTextMessage";
 import { useFetchFacts } from "@app/queries/facts";
 import { ApplicationFacts } from "./application-facts";
 import { SimpleDocumentViewerModal } from "@app/components/SimpleDocumentViewer";
-import { APPLICATIONS, getTaskById } from "@app/api/rest";
+import { getTaskById } from "@app/api/rest";
 import { COLOR_HEX_VALUES_BY_NAME } from "@app/Constants";
-import { Link } from "react-router-dom";
-import DownloadButton, { MimeType } from "./components/download-button";
+import DownloadButton from "./components/download-button";
 
 export interface IApplicationDetailDrawerAnalysisProps
   extends Pick<
@@ -136,23 +135,27 @@ export const ApplicationDetailDrawerAnalysis: React.FC<
                   <DescriptionListTerm>Download</DescriptionListTerm>
                   <DescriptionListDescription>
                     <Tooltip
-                      content="Click to download Analysis report"
+                      content="Click to download Analysis report YAML file"
                       position="top"
                     >
                       <DownloadButton
-                        application={application}
+                        id={application.id}
                         mimeType={MimeType.TAR}
-                      />
+                      >
+                        TAR
+                      </DownloadButton>
                     </Tooltip>
                     {" | "}
                     <Tooltip
-                      content="Click to download Analysis report"
+                      content="Click to download Analysis report TAR file"
                       position="top"
                     >
                       <DownloadButton
-                        application={application}
+                        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,56 +1,59 @@
-import React, { useState } from "react";
-import { Alert, Button } from "@patternfly/react-core";
+import React from "react";
+import { Button } from "@patternfly/react-core";
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
-import { Application } from "@app/api/models";
-import { Spinner } from "@patternfly/react-core";
-import { useDownloadStaticReport } from "@app/queries/download";
+import { saveAs } from "file-saver";
 
-export enum MimeType {
-  TAR = "tar",
-  YAML = "yaml",
+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";
+
+interface IDownloadButtonProps {
+  id: number;
+  mimeType: MimeType;
+  children: React.ReactNode;
 }
-function DownloadButton({
-  application,
+
+export const DownloadButton: React.FC<IDownloadButtonProps> = ({
+  id,
   mimeType,
-}: {
-  application: Application;
-  mimeType: MimeType;
-}) {
-  const {
-    mutate: downloadFile,
-    isLoading,
-    isError,
-  } = useDownloadStaticReport();
+  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 handleDownload = () => {
-    downloadFile({
-      applicationId: application.id,
-      mimeType: mimeType,
+    refetch().then(() => {
+      if (report) {
+        saveAs(new Blob([report]), `analysis-report-app-${id}.${mimeType}`);
+      }
     });
   };
 
   return (
-    <>
-      {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>
-        </>
-      )}
-    </>
+    <Button
+      key={mimeType}
+      onClick={handleDownload}
+      id={`download-${mimeType}-button`}
+      variant="link"
+      className={spacing.pXs}
+    >
+      {children}
+    </Button>
   );
-}
+};
 
 export default DownloadButton;

client/src/app/pages/assessment-management/assessment-settings/ExportQuestionnaireDropdownItem.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { saveAs } from "file-saver";
+import { DropdownItem } from "@patternfly/react-core";
+import { useTranslation } from "react-i18next";
+
+import { useFetchQuestionnaireBlob } from "@app/queries/questionnaires";
+import { AxiosError } from "axios";
+import { getAxiosErrorMessage } from "@app/utils/utils";
+import { NotificationsContext } from "@app/components/NotificationsContext";
+
+export interface IExportQuestionnaireDropdownItemProps {
+  id: number;
+}
+export const ExportQuestionnaireDropdownItem: React.FC<
+  IExportQuestionnaireDropdownItemProps
+> = ({ id }) => {
+  const { t } = useTranslation();
+  const { pushNotification } = React.useContext(NotificationsContext);
+
+  const onExportQuestionnaireError = (error: AxiosError) => {
+    pushNotification({
+      title: getAxiosErrorMessage(error),
+      variant: "danger",
+    });
+  };
+
+  const { data: questionnaire, refetch } = useFetchQuestionnaireBlob(
+    id,
+    onExportQuestionnaireError
+  );
+
+  const exportQuestionnaire = () => {
+    refetch().then(() => {
+      if (questionnaire) {
+        saveAs(new Blob([questionnaire]), `questionnaire-${id}.yaml`);
+      }
+    });
+  };
+
+  return (
+    <DropdownItem key="export" component="button" onClick={exportQuestionnaire}>
+      {t("actions.export")}
+    </DropdownItem>
+  );
+};

client/src/app/pages/assessment-management/assessment-settings/assessment-settings-page.tsx

@@ -51,6 +51,7 @@ import { useHistory } from "react-router-dom";
 import { Paths } from "@app/Paths";
 import { ImportQuestionnaireForm } from "@app/pages/assessment/import-questionnaire-form/import-questionnaire-form";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog/ConfirmDeleteDialog";
+import { ExportQuestionnaireDropdownItem } from "./ExportQuestionnaireDropdownItem";
 
 const AssessmentSettings: React.FC = () => {
   const { t } = useTranslation();
@@ -320,15 +321,9 @@ const AssessmentSettings: React.FC = () => {
                               )}
                               shouldFocusToggleOnSelect
                             >
-                              <DropdownItem
-                                key="export"
-                                component="button"
-                                onClick={() =>
-                                  setQuestionnaireToExport(questionnaire.id)
-                                }
-                              >
-                                {t("actions.export")}
-                              </DropdownItem>
+                              <ExportQuestionnaireDropdownItem
+                                id={questionnaire.id}
+                              />
                               <DropdownItem
                                 key="view"
                                 component="button"

client/src/app/queries/applications.ts

@@ -1,28 +1,23 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { AxiosError } from "axios";
 
-import { ApplicationDependency } from "@app/api/models";
+import { MimeType } from "@app/api/models";
 import {
   createApplication,
   deleteApplication,
   deleteBulkApplications,
+  getApplicationAnalysis,
   getApplicationById,
   getApplications,
   updateAllApplications,
   updateApplication,
 } from "@app/api/rest";
 import { reviewsQueryKey } from "./reviews";
 import { assessmentsQueryKey } from "./assessments";
-import { AxiosError } from "axios";
-
-export interface IApplicationDependencyFetchState {
-  applicationDependencies: ApplicationDependency[];
-  isFetching: boolean;
-  fetchError: any;
-  refetch: any;
-}
 
 export const ApplicationDependencyQueryKey = "applicationdependencies";
 export const ApplicationsQueryKey = "applications";
+export const ReportQueryKey = "report";
 
 export const useFetchApplications = () => {
   const queryClient = useQueryClient();
@@ -135,3 +130,16 @@ 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,
+  });