Updating favicon and changing toaster/notification behavior (#21670)

* Updating favicon and changing toaster/notification behavior

frontend/src/metabase/dashboard/containers/DashboardApp.jsx

@@ -40,6 +40,7 @@ import {
   getFavicon,
   getDocumentTitle,
   getIsRunning,
+  getIsLoadingComplete,
 } from "../selectors";
 import { getDatabases, getMetadata } from "metabase/selectors/metadata";
 import {
@@ -81,6 +82,7 @@ const mapStateToProps = (state, props) => {
     pageFavicon: getFavicon(state),
     documentTitle: getDocumentTitle(state),
     isRunning: getIsRunning(state),
+    isLoadingComplete: getIsLoadingComplete(state),
   };
 };
 
@@ -96,16 +98,17 @@ const mapDispatchToProps = {
 const DashboardApp = props => {
   const options = parseHashOptions(window.location.hash);
 
-  const { isRunning, dashboard } = props;
+  const { isRunning, isLoadingComplete, dashboard } = props;
 
   const [editingOnLoad] = useState(options.edit);
   const [addCardOnLoad] = useState(options.add && parseInt(options.add));
 
-  const [shouldSendNotification, setShouldSendNotification] = useState(false);
   const [isShowingToaster, setIsShowingToaster] = useState(false);
 
   const onTimeout = useCallback(() => {
-    setIsShowingToaster(true);
+    if (Notification.permission === "default") {
+      setIsShowingToaster(true);
+    }
   }, []);
 
   useLoadingTimer(isRunning, {
@@ -118,26 +121,20 @@ const DashboardApp = props => {
   useOnUnmount(props.reset);
 
   useEffect(() => {
-    if (!isRunning) {
+    if (isLoadingComplete) {
       setIsShowingToaster(false);
-    }
-    if (!isRunning && shouldSendNotification) {
-      if (document.hidden) {
+      if (Notification.permission === "granted" && document.hidden) {
         showNotification(
-          t`All Set! ${dashboard.name} is ready.`,
+          t`All Set! ${dashboard?.name} is ready.`,
           t`All questions loaded`,
         );
       }
-      setShouldSendNotification(false);
     }
-  }, [isRunning, shouldSendNotification, showNotification, dashboard?.name]);
+  }, [isLoadingComplete, showNotification, dashboard?.name]);
 
   const onConfirmToast = useCallback(async () => {
-    const result = await requestPermission();
-    if (result === "granted") {
-      setIsShowingToaster(false);
-      setShouldSendNotification(true);
-    }
+    await requestPermission();
+    setIsShowingToaster(false);
   }, [requestPermission]);
 
   const onDismissToast = useCallback(() => {

frontend/src/metabase/dashboard/reducers.js

@@ -298,7 +298,7 @@ const loadingDashCards = handleActions(
     [INITIALIZE]: {
       next: state => ({
         ...state,
-        isLoadingComplete: false,
+        loadingStatus: "idle",
       }),
     },
     [FETCH_DASHBOARD]: {
@@ -307,13 +307,14 @@ const loadingDashCards = handleActions(
         dashcardIds: Object.values(payload.entities.dashcard || {})
           .filter(dc => !isVirtualDashCard(dc))
           .map(dc => dc.id),
-        isLoadingComplete: false,
+        loadingStatus: "idle",
       }),
     },
     [FETCH_DASHBOARD_CARD_DATA]: {
       next: state => ({
         ...state,
         loadingIds: state.dashcardIds,
+        loadingStatus: "running",
         startTime:
           state.dashcardIds.length > 0 &&
           // check that performance is defined just in case
@@ -329,7 +330,7 @@ const loadingDashCards = handleActions(
           ...state,
           loadingIds,
           ...(loadingIds.length === 0
-            ? { startTime: null, isLoadingComplete: true }
+            ? { startTime: null, loadingStatus: "complete" }
             : {}),
         };
       },
@@ -340,16 +341,14 @@ const loadingDashCards = handleActions(
         return {
           ...state,
           loadingIds,
-          ...(loadingIds.length === 0
-            ? { startTime: null, isLoadingComplete: true }
-            : {}),
+          ...(loadingIds.length === 0 ? { startTime: null } : {}),
         };
       },
     },
     [RESET]: {
       next: state => ({
         ...state,
-        isLoadingComplete: false,
+        loadingStatus: "idle",
       }),
     },
   },
@@ -357,7 +356,7 @@ const loadingDashCards = handleActions(
     dashcardIds: [],
     loadingIds: [],
     startTime: null,
-    isLoadingComplete: false,
+    loadingStatus: "idle",
   },
 );
 

frontend/src/metabase/dashboard/reducers.unit.spec.js

@@ -26,7 +26,7 @@ describe("dashboard reducers", () => {
         dashcardIds: [],
         loadingIds: [],
         startTime: null,
-        isLoadingComplete: false,
+        loadingStatus: "idle",
       },
       parameterValues: {},
       parameterValuesSearchCache: {},

frontend/src/metabase/dashboard/selectors.js

@@ -34,7 +34,9 @@ export const getFavicon = state =>
     : null;
 
 export const getIsRunning = state =>
-  state.dashboard.loadingDashCards.loadingIds > 0;
+  state.dashboard.loadingDashCards.loadingStatus === "running";
+export const getIsLoadingComplete = state =>
+  state.dashboard.loadingDashCards.loadingStatus === "complete";
 
 export const getLoadingStartTime = state =>
   state.dashboard.loadingDashCards.startTime;

frontend/src/metabase/query_builder/containers/QueryBuilder.jsx

@@ -86,6 +86,7 @@ import {
   getDocumentTitle,
   getPageFavicon,
   getIsTimeseries,
+  getIsLoadingComplete,
 } from "../selectors";
 import * as actions from "../actions";
 
@@ -186,6 +187,7 @@ const mapStateToProps = (state, props) => {
     snippetCollectionId: getSnippetCollectionId(state),
     documentTitle: getDocumentTitle(state),
     pageFavicon: getPageFavicon(state),
+    isLoadingComplete: getIsLoadingComplete(state),
   };
 };
 
@@ -222,6 +224,7 @@ function QueryBuilder(props) {
     allLoaded,
     showTimelinesForCollection,
     card,
+    isLoadingComplete,
   } = props;
 
   const forceUpdate = useForceUpdate();
@@ -365,13 +368,14 @@ function QueryBuilder(props) {
     }
   });
 
-  const { isRunning } = uiControls;
-
-  const [shouldSendNotification, setShouldSendNotification] = useState(false);
   const [isShowingToaster, setIsShowingToaster] = useState(false);
 
+  const { isRunning } = uiControls;
+
   const onTimeout = useCallback(() => {
-    setIsShowingToaster(true);
+    if (Notification.permission === "default") {
+      setIsShowingToaster(true);
+    }
   }, []);
 
   useLoadingTimer(isRunning, {
@@ -382,26 +386,21 @@ function QueryBuilder(props) {
   const [requestPermission, showNotification] = useWebNotification();
 
   useEffect(() => {
-    if (!isRunning) {
+    if (isLoadingComplete) {
       setIsShowingToaster(false);
-    }
-    if (!isRunning && shouldSendNotification) {
-      if (document.hidden) {
+
+      if (Notification.permission === "granted" && document.hidden) {
         showNotification(
           t`All Set! Your question is ready.`,
           t`${card.name} is loaded.`,
         );
       }
-      setShouldSendNotification(false);
     }
-  }, [isRunning, shouldSendNotification, showNotification, card?.name]);
+  }, [isLoadingComplete, showNotification, card?.name]);
 
   const onConfirmToast = useCallback(async () => {
-    const result = await requestPermission();
-    if (result === "granted") {
-      setIsShowingToaster(false);
-      setShouldSendNotification(true);
-    }
+    await requestPermission();
+    setIsShowingToaster(false);
   }, [requestPermission]);
 
   const onDismissToast = useCallback(() => {

frontend/src/metabase/query_builder/reducers.js

@@ -72,6 +72,7 @@ const DEFAULT_UI_CONTROLS = {
   isShowingNewbModal: false,
   isEditing: false,
   isRunning: false,
+  isQueryComplete: false,
   isShowingSummarySidebar: false,
   isShowingFilterSidebar: false,
   isShowingChartTypeSidebar: false,
@@ -93,6 +94,8 @@ const DEFAULT_LOADING_CONTROLS = {
   timeoutId: "",
 };
 
+const DEFAULT_QUERY_STATUS = "idle";
+
 const UI_CONTROLS_SIDEBAR_DEFAULTS = {
   isShowingSummarySidebar: false,
   isShowingFilterSidebar: false,
@@ -196,12 +199,18 @@ export const uiControls = handleActions(
       next: (state, { payload }) => ({ ...state, isEditing: false }),
     },
 
-    [RUN_QUERY]: state => ({ ...state, isRunning: true }),
+    [RUN_QUERY]: state => ({
+      ...state,
+      isRunning: true,
+    }),
     [CANCEL_QUERY]: {
       next: (state, { payload }) => ({ ...state, isRunning: false }),
     },
     [QUERY_COMPLETED]: {
-      next: (state, { payload }) => ({ ...state, isRunning: false }),
+      next: (state, { payload }) => ({
+        ...state,
+        isRunning: false,
+      }),
     },
     [QUERY_ERRORED]: {
       next: (state, { payload }) => ({ ...state, isRunning: false }),
@@ -324,6 +333,15 @@ export const loadingControls = handleActions(
   DEFAULT_LOADING_CONTROLS,
 );
 
+export const queryStatus = handleActions(
+  {
+    [RUN_QUERY]: state => "running",
+    [QUERY_COMPLETED]: state => "complete",
+    [CANCEL_QUERY]: state => "idle",
+  },
+  DEFAULT_QUERY_STATUS,
+);
+
 export const zoomedRowObjectId = handleActions(
   {
     [INITIALIZE_QB]: {

frontend/src/metabase/query_builder/selectors.js

@@ -38,6 +38,7 @@ import ObjectMode from "metabase/modes/components/modes/ObjectMode";
 import { LOAD_COMPLETE_FAVICON } from "metabase/hoc/Favicon";
 
 export const getUiControls = state => state.qb.uiControls;
+const getQueryStatus = state => state.qb.queryStatus;
 const getLoadingControls = state => state.qb.loadingControls;
 
 export const getIsShowingTemplateTagsEditor = state =>
@@ -69,6 +70,8 @@ export const getIsAnySidebarOpen = createSelector([getUiControls], uiControls =>
 
 export const getIsEditing = state => getUiControls(state).isEditing;
 export const getIsRunning = state => getUiControls(state).isRunning;
+export const getIsLoadingComplete = state =>
+  getQueryStatus(state) === "complete";
 
 export const getCard = state => state.qb.card;
 export const getOriginalCard = state => state.qb.originalCard;