🪟 🎉 Show error notification when download logs request fails (#15655)

* Show error notification when download logs request fails

* Extract download file function

airbyte-webapp/src/components/JobItem/components/DownloadButton.tsx

@@ -6,6 +6,7 @@ import { useIntl } from "react-intl";
 import { Button } from "components";
 
 import { JobDebugInfoRead } from "core/request/AirbyteClient";
+import { downloadFile } from "utils/file";
 
 interface DownloadButtonProps {
   jobDebugInfo: JobDebugInfoRead;
@@ -16,15 +17,10 @@ const DownloadButton: React.FC<DownloadButtonProps> = ({ jobDebugInfo, fileName
   const { formatMessage } = useIntl();
 
   const downloadFileWithLogs = () => {
-    const element = document.createElement("a");
     const file = new Blob([jobDebugInfo.attempts.flatMap((info) => info.logs.logLines).join("\n")], {
       type: "text/plain;charset=utf-8",
     });
-    element.href = URL.createObjectURL(file);
-    element.download = `${fileName}.txt`;
-    document.body.appendChild(element); // Required for this to work in FireFox
-    element.click();
-    document.body.removeChild(element);
+    downloadFile(file, `${fileName}.txt`);
   };
 
   return (

airbyte-webapp/src/locales/en.json

@@ -451,6 +451,7 @@
   "admin.dropZoneTitle": "Drag 'n' drop file here, or click to select file",
   "admin.dropZoneSubtitle": "Only *.tar and *.gz files will be accepted",
   "admin.logs": "Logs",
+  "admin.logs.error": "Unable to download logs at this time.",
   "admin.downloadServerLogs": "Download Server Logs",
   "admin.downloadSchedulerLogs": "Download Scheduler Logs",
   "admin.upgradeAll": "Upgrade all",

airbyte-webapp/src/pages/SettingsPage/pages/ConfigurationsPage/components/LogsContent.tsx

@@ -1,13 +1,14 @@
 import React from "react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { useAsyncFn } from "react-use";
 import styled from "styled-components";
 
 import { LoadingButton } from "components";
 
+import { LogType } from "core/domain/logs/types";
+import { useNotificationService } from "hooks/services/Notification";
 import { useGetLogs } from "services/logs/LogsService";
-
-import { LogType } from "../../../../../core/domain/logs/types";
+import { downloadFile } from "utils/file";
 
 const Content = styled.div`
   padding: 29px 0 27px;
@@ -18,22 +19,26 @@ const LogsButton = styled(LoadingButton)`
   margin: 0 15px;
 `;
 
-const downloadFile = (file: Blob, name: string) => {
-  const element = document.createElement("a");
-  element.href = URL.createObjectURL(file);
-  element.download = name;
-  document.body.appendChild(element); // Required for this to work in FireFox
-  element.click();
-  document.body.removeChild(element);
-};
-
 const LogsContent: React.FC = () => {
+  const { registerNotification } = useNotificationService();
+  const { formatMessage } = useIntl();
+
   const fetchLogs = useGetLogs();
 
   const downloadLogs = async (logType: LogType) => {
-    const file = await fetchLogs({ logType });
-    const name = `${logType}-logs.txt`;
-    downloadFile(file, name);
+    try {
+      const file = await fetchLogs({ logType });
+      const name = `${logType}-logs.txt`;
+      downloadFile(file, name);
+    } catch (e) {
+      console.error(e);
+
+      registerNotification({
+        id: "admin.logs.error",
+        title: formatMessage({ id: "admin.logs.error" }),
+        isError: true,
+      });
+    }
   };
 
   // TODO: get rid of useAsyncFn and use react-query

airbyte-webapp/src/utils/file.ts

@@ -0,0 +1,8 @@
+export const downloadFile = (blob: Blob, name: string) => {
+  const element = document.createElement("a");
+  element.href = URL.createObjectURL(blob);
+  element.download = name;
+  document.body.appendChild(element); // Required for this to work in FireFox
+  element.click();
+  document.body.removeChild(element);
+};