Restore query execute notifications (missed during React migration)

client/app/pages/queries/hooks/useQueryExecute.js

@@ -3,6 +3,7 @@ import { noop, includes } from "lodash";
 import useQueryResult from "@/lib/hooks/useQueryResult";
 import location from "@/services/location";
 import recordEvent from "@/services/recordEvent";
+import notifications from "@/services/notifications";
 
 function getMaxAge() {
   const { maxAge } = location.search;
@@ -25,15 +26,32 @@ export default function useQueryExecute(query) {
 
   const [isExecutionCancelling, setIsExecutionCancelling] = useState(false);
 
+  const showNotificationMessageRef = useRef();
+  showNotificationMessageRef.current = () => {
+    if (queryResultData.status === "done") {
+      notifications.showNotification("Redash", `${query.name} updated.`);
+    } else if (queryResultData.status === "failed") {
+      notifications.showNotification("Redash", `${query.name} failed to run: ${queryResultData.error}`);
+    }
+  };
+
+  useEffect(() => {
+    if (!isQueryExecuting) {
+      showNotificationMessageRef.current();
+    }
+  }, [isQueryExecuting]);
+
   const executeQuery = useCallback(() => {
     recordEvent("execute", "query", query.id);
     setQueryResult(query.getQueryResult(0));
+    notifications.getPermissions();
   }, [query]);
 
   const executeAdhocQuery = useCallback(
     selectedQueryText => {
       recordEvent("execute", "query", query.id);
       setQueryResult(query.getQueryResultByText(0, selectedQueryText));
+      notifications.getPermissions();
     },
     [query]
   );

client/app/services/notifications.js

@@ -1,6 +1,7 @@
 import { find } from "lodash";
 import debug from "debug";
 import recordEvent from "@/services/recordEvent";
+import redashIconUrl from "@/assets/images/redash_icon_small.png";
 
 const logger = debug("redash:notifications");
 
@@ -11,43 +12,38 @@ if (!Notification) {
 
 const hidden = find(["hidden", "webkitHidden", "mozHidden", "msHidden"], prop => prop in document);
 
-class NotificationsService {
-  // eslint-disable-next-line class-methods-use-this
-  get pageVisible() {
-    return !document[hidden];
-  }
+function isPageVisible() {
+  return !document[hidden];
+}
 
-  // eslint-disable-next-line class-methods-use-this
-  getPermissions() {
-    if (Notification && Notification.permission === "default") {
-      Notification.requestPermission(status => {
-        if (Notification.permission !== status) {
-          Notification.permission = status;
-        }
-      });
-    }
+function getPermissions() {
+  if (Notification && Notification.permission === "default") {
+    Notification.requestPermission();
   }
+}
 
-  showNotification(title, content) {
-    if (!Notification || this.pageVisible || Notification.permission !== "granted") {
-      return;
-    }
-
-    // using the 'tag' to avoid showing duplicate notifications
-    const notification = new Notification(title, {
-      tag: title + content,
-      body: content,
-      icon: "/images/redash_icon_small.png",
-    });
-    setTimeout(() => {
-      notification.close();
-    }, 3000);
-    notification.onclick = function onClick() {
-      window.focus();
-      this.close();
-      recordEvent("click", "notification");
-    };
+function showNotification(title, content) {
+  if (!Notification || isPageVisible() || Notification.permission !== "granted") {
+    return;
   }
+
+  // using the 'tag' to avoid showing duplicate notifications
+  const notification = new Notification(title, {
+    tag: title + content,
+    body: content,
+    icon: redashIconUrl,
+  });
+  setTimeout(() => {
+    notification.close();
+  }, 3000);
+  notification.onclick = function onClick() {
+    window.focus();
+    this.close();
+    recordEvent("click", "notification");
+  };
 }
 
-export default new NotificationsService();
+export default {
+  getPermissions,
+  showNotification,
+};