Show error message in notifaction for normal errors in useToastMutati…

…on (#1267)

* Show error message in notifaction for normal errors in useToastMutation

* Audio player: prefer other formats than mp3 if available

services/course-material/src/components/ContentRenderer/moocfi/AudioPlayer/DisplayTrack.tsx

@@ -1,5 +1,5 @@
 import { css } from "@emotion/css"
-import React, { RefObject, useContext } from "react"
+import React, { RefObject, useContext, useMemo } from "react"
 
 import PageContext from "../../../../contexts/PageContext"
 import { headingFont } from "../../../../shared-module/styles"
@@ -22,12 +22,24 @@ const DisplayTrack = ({ tracks, audioRef, setDuration, progressBarRef }: Display
     }
   }
 
+  const sortedTracks = useMemo(() => {
+    // Sorts mp3 files last, as they're the fallback format
+    return tracks.sort((a, b) => {
+      if (a.mime === "audio/mpeg") {
+        return 1
+      } else if (b.mime === "audio/mpeg") {
+        return -1
+      }
+      return 0
+    })
+  }, [tracks])
+
   return (
     <>
       <div>
         {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
         <audio ref={audioRef} onLoadedMetadata={onLoadedMetadata}>
-          {tracks.map(({ path, mime }: AudioFile) => (
+          {sortedTracks.map(({ path, mime }: AudioFile) => (
             <source key={path} src={path} type={mime} />
           ))}
         </audio>

shared-module/src/components/Notifications/Error.tsx

@@ -91,7 +91,8 @@ const ErrorMessage = styled.div`
 const ErrorNotification = (props: ErrorNotificationProps) => {
   const { t } = useTranslation()
   return (
-    <NotificationWrapper className="toast-notification">
+    // eslint-disable-next-line i18next/no-literal-string
+    <NotificationWrapper className="toast-notification" data-test-id="error-notification">
       <Content>
         <IconWrapper>
           <BellXmark color={baseTheme.colors.red[700]} />

shared-module/src/hooks/useShowToastInfinitely.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react"
 
 import {
-  SHOW_TOAS_INIFINITELY_IN_SYSTEM_TESTS_EVENT,
-  SHOW_TOAST_DURATION_IN_SYSTEM_TESTS_EVENT,
+  SHOW_TOASTS_INIFINITELY_IN_SYSTEM_TESTS_EVENT,
+  SHOW_TOASTS_NORMALLY_IN_SYSTEM_TESTS_EVENT,
 } from "../utils/constants"
 
 export default function useSetShowStuffInfinitelyInSystemTestScreenshots(): boolean {
@@ -11,17 +11,20 @@ export default function useSetShowStuffInfinitelyInSystemTestScreenshots(): bool
     const setShowInfinitelyCallback = () => {
       setShouldShowStuffInfinitely(true)
     }
-    const setShowDuration = () => {
+    const setShowNormally = () => {
       setShouldShowStuffInfinitely(false)
     }
-    window.addEventListener(SHOW_TOAS_INIFINITELY_IN_SYSTEM_TESTS_EVENT, setShowInfinitelyCallback)
-    window.addEventListener(SHOW_TOAST_DURATION_IN_SYSTEM_TESTS_EVENT, setShowDuration)
+    window.addEventListener(
+      SHOW_TOASTS_INIFINITELY_IN_SYSTEM_TESTS_EVENT,
+      setShowInfinitelyCallback,
+    )
+    window.addEventListener(SHOW_TOASTS_NORMALLY_IN_SYSTEM_TESTS_EVENT, setShowNormally)
     return () => {
       window.removeEventListener(
-        SHOW_TOAS_INIFINITELY_IN_SYSTEM_TESTS_EVENT,
+        SHOW_TOASTS_INIFINITELY_IN_SYSTEM_TESTS_EVENT,
         setShowInfinitelyCallback,
       )
-      window.removeEventListener(SHOW_TOAST_DURATION_IN_SYSTEM_TESTS_EVENT, setShowDuration)
+      window.removeEventListener(SHOW_TOASTS_NORMALLY_IN_SYSTEM_TESTS_EVENT, setShowNormally)
     }
   }, [])
   return shouldShowStuffInfinitely

shared-module/src/hooks/useToastMutation.tsx

@@ -6,6 +6,7 @@ import {
   UseMutationOptions,
   UseMutationResult,
 } from "@tanstack/react-query"
+import { AxiosError } from "axios"
 import toast, { ToastOptions } from "react-hot-toast"
 
 import DeleteNotification from "../components/Notifications/Delete"
@@ -114,6 +115,10 @@ export default function useToastMutation<
       }
     },
     onError: (error: TError, variables: TVariables, context) => {
+      console.groupCollapsed(`Mutation resulted in an error.`)
+      console.warn(`Error: ${error}`)
+      console.warn(error)
+      console.groupEnd()
       if (notificationOptions.notify) {
         // Remove old toasts
         toast.remove()
@@ -123,6 +128,13 @@ export default function useToastMutation<
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           errorMessage = (error as any).data.message
         }
+        if (!errorMessage && (error as AxiosError).isAxiosError) {
+          const axiosError = error as AxiosError
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          errorMessage = (axiosError.response?.data as any)?.message
+        } else if (!errorMessage || errorMessage === "") {
+          errorMessage = (error as Error).message
+        }
         toast.custom(
           (toast) => {
             return (
@@ -136,6 +148,7 @@ export default function useToastMutation<
           {
             ...notificationOptions.toastOptions,
             id: toastId,
+            duration: showToastInfinitely ? Infinity : notificationOptions.toastOptions?.duration,
           },
         )
       }

shared-module/src/utils/constants.ts

@@ -5,8 +5,8 @@ export const CMS_EDITOR_SIDEBAR_THRESHOLD = "75rem"
 export const MARGIN_BETWEEN_NAVBAR_AND_CONTENT = "2rem"
 export const INCLUDE_THIS_HEADING_IN_HEADINGS_NAVIGATION_CLASS =
   "include-this-heading-in-headings-navigation"
-export const SHOW_TOAS_INIFINITELY_IN_SYSTEM_TESTS_EVENT = "show-toast-infinitely-in-system-tests"
-export const SHOW_TOAST_DURATION_IN_SYSTEM_TESTS_EVENT = "show-toas-duration-in-system-tests"
+export const SHOW_TOASTS_INIFINITELY_IN_SYSTEM_TESTS_EVENT = "show-toast-infinitely-in-system-tests"
+export const SHOW_TOASTS_NORMALLY_IN_SYSTEM_TESTS_EVENT = "show-toas-duration-in-system-tests"
 export const EXERCISE_SERVICE_CONTENT_ID = "exercise-service-content-id"
 export const LANGUAGE_COOKIE_KEY = "selected-language"
 export const SPINNER_CLASS = "loading-spinner-component"

system-tests/src/tests/query-mutation-notifications/error-notification.spec.ts

@@ -18,13 +18,15 @@ test("Error notifications work", async ({ page, headless }, testInfo) => {
   await page.evaluate(() => {
     window.scrollTo(0, 0)
   })
-  await page.getByText("An error occurred").waitFor()
+  await page
+    .locator('[data-test-id="error-notification"]')
+    .getByText("Missing exercise type for")
+    .waitFor()
   await expectScreenshotsToMatchSnapshots({
     screenshotTarget: page,
     headless,
     testInfo,
     snapshotName: "error-notification-test",
-    clearNotifications: true,
   })
   await showToastsNormally(page)
 })

system-tests/src/utils/notificationUtils.ts

@@ -1,18 +1,18 @@
 import { Page } from "playwright"
 
 import {
-  SHOW_TOAS_INIFINITELY_IN_SYSTEM_TESTS_EVENT,
-  SHOW_TOAST_DURATION_IN_SYSTEM_TESTS_EVENT,
+  SHOW_TOASTS_INIFINITELY_IN_SYSTEM_TESTS_EVENT,
+  SHOW_TOASTS_NORMALLY_IN_SYSTEM_TESTS_EVENT,
 } from "../shared-module/utils/constants"
 
 /** Hides all currently visible toasts and instructs next toasts to be shown infinitely. To hide the toasts, call function showToastsNormally. */
 export const showNextToastsInfinitely = async (page: Page) => {
   await hideToasts(page)
-  await page.dispatchEvent("body", SHOW_TOAS_INIFINITELY_IN_SYSTEM_TESTS_EVENT)
+  await page.dispatchEvent("body", SHOW_TOASTS_INIFINITELY_IN_SYSTEM_TESTS_EVENT)
 }
 
 export const showToastsNormally = async (page: Page) => {
-  await page.dispatchEvent("body", SHOW_TOAST_DURATION_IN_SYSTEM_TESTS_EVENT)
+  await page.dispatchEvent("body", SHOW_TOASTS_NORMALLY_IN_SYSTEM_TESTS_EVENT)
 }
 
 export const hideToasts = async (page: Page) => {