Address broken export questionnaire

konveyor · Oct 4, 2023 · 669757a · 669757a
1 parent c0186be
commit 669757a
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 45 deletions.
diff --git a/client/src/app/api/rest.ts b/client/src/app/api/rest.ts
@@ -721,23 +721,8 @@ export const updateProxy = (obj: Proxy): Promise<Proxy> =>
 export const getQuestionnaires = (): Promise<Questionnaire[]> =>
   axios.get(QUESTIONNAIRES).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 getQuestionnaireById = <T>(id: number | string): Promise<T> =>
+  axios.get(`${QUESTIONNAIRES}/${id}`).then((response) => response.data);
 
 export const createQuestionnaire = (
   obj: Questionnaire

diff --git a/...sessment-management/assessment-settings/components/export-questionnaire-dropdown-item.tsx b/...sessment-management/assessment-settings/components/export-questionnaire-dropdown-item.tsx
@@ -1,12 +1,7 @@
 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";
+import { useDownloadQuestionnaire } from "@app/queries/questionnaires";
 
 export interface IExportQuestionnaireDropdownItemProps {
   id: number;
@@ -15,30 +10,18 @@ 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 {
+    mutate: downloadFile,
+    isLoading,
+    isError,
+  } = useDownloadQuestionnaire();
 
-  const exportQuestionnaire = () => {
-    refetch().then(() => {
-      if (questionnaire) {
-        saveAs(new Blob([questionnaire]), `questionnaire-${id}.yaml`);
-      }
-    });
+  const handleDownload = () => {
+    downloadFile(id);
   };
 
   return (
-    <DropdownItem key="export" component="button" onClick={exportQuestionnaire}>
+    <DropdownItem key="export" component="button" onClick={handleDownload}>
       {t("actions.export")}
     </DropdownItem>
   );

diff --git a/client/src/app/queries/questionnaires.ts b/client/src/app/queries/questionnaires.ts
@@ -1,14 +1,16 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { AxiosError } from "axios";
+import axios, { AxiosError } from "axios";
 
 import {
+  QUESTIONNAIRES,
   createQuestionnaire,
   deleteQuestionnaire,
   getQuestionnaireById,
   getQuestionnaires,
   updateQuestionnaire,
 } from "@app/api/rest";
 import { Questionnaire } from "@app/api/models";
+import saveAs from "file-saver";
 
 export const QuestionnairesQueryKey = "questionnaires";
 export const QuestionnaireByIdQueryKey = "questionnaireById";
@@ -84,7 +86,7 @@ export const useFetchQuestionnaireBlob = (
 ) =>
   useQuery({
     queryKey: [QuestionnaireByIdQueryKey, id],
-    queryFn: () => getQuestionnaireById<Blob>(id, true),
+    queryFn: () => getQuestionnaireById<Blob>(id),
     onError: onError,
     enabled: false,
   });
@@ -113,3 +115,31 @@ export const useCreateQuestionnaireMutation = (
     error,
   };
 };
+
+export const downloadQuestionnaire = async (
+  id: number | string
+): Promise<void> => {
+  const url = `${QUESTIONNAIRES}/${id}`;
+
+  try {
+    const response = await axios.get(url, {
+      responseType: "blob",
+      headers: {
+        Accept: "application/x-yaml",
+      },
+    });
+
+    if (response.status !== 200) {
+      throw new Error("Network response was not ok when downloading file.");
+    }
+
+    const blob = new Blob([response.data]);
+    saveAs(blob, `questionnaire-${id}.yaml`);
+  } catch (error) {
+    console.error("There was an error downloading the file:", error);
+    throw error;
+  }
+};
+export const useDownloadQuestionnaire = () => {
+  return useMutation(downloadQuestionnaire);
+};