refactor error page texts with i18n (merge commit)

Merge branch 'refactor/improve-messages-for-errors' into 'main'
* restore Page500 link

* add CHANGELOG row

    pick 0cc6be1 adapt e2e error test
    pick d564720 add CHANGELOG row

* adapt e2e error test

* fix error messages and restore redirect buttons

* fix ErrorPageContainer children/child component

* refactor error page texts with i18n

    pick 2e8fe1d fix ErrorPageContainer children/child component
    pick 75baf69 fix error messages and restore redirect buttons

Closes #932
See merge request https://gitlab.ci.csc.fi/sds-dev/sd-submit/metadata-submitter-frontend/-/merge_requests/968

Approved-by: Hang Le <[email protected]>
Co-authored-by: Liisa Lado-Villar <[email protected]>
Merged by Hang Le <[email protected]>

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Refactor error message to adhere SD style with i18n support #932
 - Changed: The location of "options ..." selection
 - Modify Patch submission with only "name" and "description" #816
 - Modified Form layout, Tooltip and Upload XML according to new UI design #811

playwright/tests/errorPages.spec.ts

@@ -16,15 +16,15 @@ test.describe("catch error codes and display corresponding error page", function
       })
     })
     await page.waitForLoadState("load", { timeout: 30000 })
-    await expect(page.locator(".MuiAlert-message", { hasText: /400 Bad Request/ }).first()).toBeVisible({
+    await expect(page.locator(".MuiAlert-message", { hasText: /400 – Bad Request/ }).first()).toBeVisible({
       timeout: 10000,
     })
   })
 
   test("should redirect to 401 page if no granted access", async ({ page }) => {
     await page.goto("/en/submission?step=1")
     await page.waitForLoadState("domcontentloaded", { timeout: 30000 })
-    await expect(page.locator(".MuiAlert-message", { hasText: /401 Authorization Error/ }).first()).toBeVisible({
+    await expect(page.locator(".MuiAlert-message", { hasText: /401 – Not Logged In/ }).first()).toBeVisible({
       timeout: 10000,
     })
   })
@@ -38,7 +38,7 @@ test.describe("catch error codes and display corresponding error page", function
       })
     })
     await page.waitForLoadState("load", { timeout: 30000 })
-    await expect(page.locator(".MuiAlert-message", { hasText: /403 Forbidden Error/ }).first()).toBeVisible({
+    await expect(page.locator(".MuiAlert-message", { hasText: /403 – Forbidden/ }).first()).toBeVisible({
       timeout: 10000,
     })
   })
@@ -47,7 +47,7 @@ test.describe("catch error codes and display corresponding error page", function
     await login()
     await page.goto("/home/unknownroute")
     await page.waitForLoadState("load", { timeout: 30000 })
-    await expect(page.locator(".MuiAlert-message", { hasText: /404 Not Found/ }).first()).toBeVisible({
+    await expect(page.locator(".MuiAlert-message", { hasText: /404 – Page Not Found/ }).first()).toBeVisible({
       timeout: 10000,
     })
   })
@@ -61,7 +61,7 @@ test.describe("catch error codes and display corresponding error page", function
       })
     })
     await page.waitForLoadState("load", { timeout: 30000 })
-    await expect(page.locator(".MuiAlert-message", { hasText: /500 Internal Server Error/ }).first()).toBeVisible({
+    await expect(page.locator(".MuiAlert-message", { hasText: /500 – Service Unavailable/ }).first()).toBeVisible({
       timeout: 10000,
     })
   })

src/__tests__/Page400.test.tsx

@@ -4,6 +4,7 @@ import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles"
 import { screen } from "@testing-library/react"
 
 import CSCtheme from "../theme"
+import "../i18n"
 
 import { renderWithProviders } from "utils/test-utils"
 import Page400 from "views/ErrorPages/Page400"
@@ -17,8 +18,6 @@ describe("Page400", () => {
         </ThemeProvider>
       </StyledEngineProvider>
     )
-    screen.getByText("400 Bad Request")
-    expect(screen.getByText("400 Bad Request")).toBeInTheDocument()
-    expect(screen.getByRole("link")).toHaveTextContent(/our github repo/i)
+    expect(screen.getByText("400 – Bad Request")).toBeInTheDocument()
   })
 })

src/__tests__/Page401.test.tsx

@@ -20,12 +20,8 @@ describe("Page401", () => {
         </ThemeProvider>
       </StyledEngineProvider>
     )
-    screen.getByText("401 Authorization Error")
-    expect(screen.getByText("401 Authorization Error")).toBeInTheDocument()
-    screen.getByText("Main Page")
-    expect(screen.getByText("Main Page")).toBeInTheDocument()
-    expect(screen.getByRole("link")).toHaveTextContent("Main Page")
-    expect(screen.getByRole("link")).toHaveAttribute("href", "/")
+    expect(screen.getByText("401 – Not Logged In")).toBeInTheDocument()
+    expect(screen.getByTestId("401text")).toBeInTheDocument()
   })
 
   test("redirects to Main Page after 10s", () => {
@@ -41,7 +37,7 @@ describe("Page401", () => {
       </StyledEngineProvider>
     )
 
-    expect(component.getByText("401 Authorization Error")).toBeInTheDocument()
+    expect(component.getByText("401 – Not Logged In")).toBeInTheDocument()
 
     act(() => {
       vi.advanceTimersByTime(10000)

src/__tests__/Page403.test.tsx

@@ -42,12 +42,8 @@ describe("Page403", () => {
         </ThemeProvider>
       </StyledEngineProvider>
     )
-    screen.getByText("403 Forbidden Error")
-    expect(screen.getByText("403 Forbidden Error")).toBeInTheDocument()
-    screen.getByText("Home Page")
-    expect(screen.getByText("Home Page")).toBeInTheDocument()
-    expect(screen.getByRole("link")).toHaveTextContent("Home Page")
-    expect(screen.getByRole("link")).toHaveAttribute("href", "/home")
+    expect(screen.getByText("403 – Forbidden")).toBeInTheDocument()
+    expect(screen.getByTestId("403text")).toBeInTheDocument()
   })
 
   test("redirects to Home Page after 10s", () => {
@@ -63,7 +59,7 @@ describe("Page403", () => {
         </StyledEngineProvider>
       )
     })
-    expect(screen.getByText("403 Forbidden Error")).toBeInTheDocument()
+    expect(screen.getByText("403 – Forbidden")).toBeInTheDocument()
     act(() => {
       vi.advanceTimersByTime(10000)
     })

src/__tests__/Page404.test.tsx

@@ -5,6 +5,7 @@ import { screen } from "@testing-library/react"
 import { MemoryRouter as Router } from "react-router-dom"
 
 import CSCtheme from "../theme"
+import "../i18n"
 
 import { renderWithProviders } from "utils/test-utils"
 import Page404 from "views/ErrorPages/Page404"
@@ -20,8 +21,6 @@ describe("Page404", () => {
         </StyledEngineProvider>
       </Router>
     )
-    screen.getByText("404 Not Found")
-    expect(screen.getByText("404 Not Found")).toBeInTheDocument()
-    expect(screen.getByTestId("location-pathname")).toHaveTextContent("/example-route")
+    expect(screen.getByText("404 – Page Not Found")).toBeInTheDocument()
   })
 })

src/__tests__/Page500.test.tsx

@@ -4,6 +4,7 @@ import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles"
 import { screen } from "@testing-library/react"
 
 import CSCtheme from "../theme"
+import "../i18n"
 
 import { renderWithProviders } from "utils/test-utils"
 import Page500 from "views/ErrorPages/Page500"
@@ -17,8 +18,6 @@ describe("Page500", () => {
         </ThemeProvider>
       </StyledEngineProvider>
     )
-    screen.getByText("500 Internal Server Error")
-    expect(screen.getByText("500 Internal Server Error")).toBeInTheDocument()
-    expect(screen.getByRole("link")).toHaveTextContent(/our github repo/i)
+    expect(screen.getByText("500 – Service Unavailable")).toBeInTheDocument()
   })
 })

src/__tests__/SubmissionWizard.test.tsx

@@ -7,6 +7,7 @@ import { setupServer } from "msw/node"
 import { MemoryRouter, Routes, Route } from "react-router-dom"
 
 import CSCtheme from "../theme"
+import "../i18n"
 
 import { renderWithProviders } from "utils/test-utils"
 import SubmissionWizard from "views/Submission"
@@ -77,7 +78,7 @@ describe("SubmissionWizard", () => {
         },
       }
     )
-    expect(screen.getByText("404 Not Found")).toBeInTheDocument()
+    expect(screen.getByText("404 – Page Not Found")).toBeInTheDocument()
   })
 
   test("should redirect to 404 page on invalid submissionId", async () => {
@@ -98,7 +99,7 @@ describe("SubmissionWizard", () => {
       </MemoryRouter>,
     )
     await waitForElementToBeRemoved(() => screen.getByRole("progressbar"))
-    expect(screen.getByText("404 Not Found")).toBeInTheDocument()
+    expect(screen.getByText("404 – Page Not Found")).toBeInTheDocument()
   })
 
   test("should render submission by submissionId in URL parameters", async () => {

src/components/ErrorPageContainer.tsx

@@ -12,7 +12,7 @@ import { styled } from "@mui/system"
 import logo from "../images/csc_logo.svg"
 
 type ErrorPageProps = {
-  children: (string | ReactElement)[]
+  children: (ReactElement[] | ReactElement)
   errorType: string
   title: string
 }

src/translations/en/translation_en.json

@@ -55,11 +55,32 @@
     }
   },
   "errorPages": {
-    "page400": {},
-    "page401": {},
-    "page403": {},
-    "page404": {},
-    "page500": {}
+    "page400": {
+      "errorTitle": "400 – Bad Request",
+      "errorText": "Something was wrong with the request. This can be for example due to missing password and/or username."
+    },
+    "page401": {
+      "errorTitle": "401 – Not Logged In",
+      "errorText": "You are seeing this page because your login information was incorrect, your session expired or you haven’t logged in yet.",
+      "countDown": "Automatically redirect in {{countdownTime}}s.",
+      "buttonText": "Go to login"
+    },
+    "page403": {
+      "errorTitle": "403 – Forbidden",
+      "errorText": "You are seeing this page because you were trying to perform an action that you are not allowed to.",
+      "countDown": "Automatically redirect in {{countdownTime}}s.",
+      "buttonText": "Go to home page"
+    },
+    "page404": {
+      "errorTitle": "404 – Page Not Found",
+      "errorText": "The page {{path}} you were looking for was not found."
+    },
+    "page500": {
+      "errorTitle": "500 – Service Unavailable",
+      "errorText": "You are seeing this page because the service is currently unavailable. Please check back later.",
+      "errorText2": "You can find more information about service breaks ",
+      "errorLink": "here"
+    }
   },
   "searchItems": "Search items",
   "dataTable": {

src/translations/fi/translation_fi.json

@@ -55,11 +55,32 @@
     }
   },
   "errorPages": {
-    "page400": {},
-    "page401": {},
-    "page403": {},
-    "page404": {},
-    "page500": {}
+    "page400": {
+      "errorTitle": "400 – Virheellinen pyyntö",
+      "errorText": "Virhe sivupyynnössä. Tämä voi johtua esimerkiksi puuttuvasta salasanasta ja/tai käyttäjänimestä"
+    },
+    "page401": {
+      "errorTitle": "401 – Et ole kirjautunut sisään",
+      "errorText": "Näet tämän sivun, koska kirjautumistiedoissasi oli virhe, sessiosi umpeutui tai et ole kirjautunut sisään.",
+      "countDown": "Automaattinen uudellenohjaus {{countdownTime}}s.",
+      "buttonText": "Siirry kirjautumissivulle"
+    },
+    "page403": {
+      "errorTitle": "403 – Kielletty toiminto",
+      "errorText": "Näet tämän sivun, koska yritit suorittaa kielletyn toiminnon.",
+      "countDown": "Automaattinen uudellenohjaus {{countdownTime}}s.",
+      "buttonText": "Siirry kotisivulle"
+    },
+    "page404": {
+      "errorTitle": "404 – Sivua ei löydy",
+      "errorText": "Etsimääsi sivua {{path}} ei löydy"
+    },
+    "page500": {
+      "errorTitle": "500 – Palvelu ei ole saatavilla",
+      "errorText": "Näet tämän sivun, koska palvelu ei ole tällä hetkellä saatavilla.",
+      "errorText2": "Löydät tietoa huoltokatkoistamme",
+      "errorLink": " täältä"
+    }
   },
   "searchItems": "Search items",
   "dataTable": {

src/views/ErrorPages/Page400.tsx

@@ -1,20 +1,17 @@
 import React from "react"
 
 import Typography from "@mui/material/Typography"
+import { useTranslation } from "react-i18next"
 
 import ErrorPageContainer from "../../components/ErrorPageContainer"
 
 const Page400: React.FC = () => {
-  const errorLink = "https://github.com/CSCfi/metadata-submitter/issues"
+  const { t } = useTranslation()
 
   return (
-    <ErrorPageContainer title="400 Bad Request" errorType="error">
-      <Typography variant="body2">
-        Oops, this means we cannot process the request that was made to our server, either due to a bad request,
-        unsupported media type or an entity.{" "}
-      </Typography>
-      <Typography variant="body2">
-        We would like to fix the issue, so could you create an issue in <a href={errorLink}>our github repo</a>?
+    <ErrorPageContainer title={t("errorPages.page400.errorTitle")} errorType="error">
+      <Typography variant="body2" data-testid="400text">
+        {t("errorPages.page400.errorText")}
       </Typography>
     </ErrorPageContainer>
   )

src/views/ErrorPages/Page401.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react"
 
 import { Button } from "@mui/material"
 import Typography from "@mui/material/Typography"
+import { useTranslation } from "react-i18next"
 import { Navigate } from "react-router-dom"
 
 import { GetCountdownTime } from "./ErrorPagesHelper"
@@ -11,6 +12,8 @@ import ErrorPageContainer from "components/ErrorPageContainer"
 const Page401: React.FC = () => {
   const [redirect, setRedirect] = useState(false)
 
+  const { t } = useTranslation()
+
   const countdownTime = GetCountdownTime(10, 1000)
 
   useEffect(() => {
@@ -28,10 +31,12 @@ const Page401: React.FC = () => {
   return redirect ? (
     <Navigate to="/" />
   ) : (
-    <ErrorPageContainer title="401 Authorization Error" errorType="warning">
-      <Typography variant="body2">You have attempted to access a page for which you are not authorized. </Typography>
-      <Typography variant="body2">You can go back to {ButtonToMainPage}</Typography>
-      <Typography variant="body2">Automatically redirect in {countdownTime}s.</Typography>
+    <ErrorPageContainer title={t("errorPages.page401.errorTitle")} errorType="warning">
+      <Typography variant="body2" paragraph={true} data-testid="401text">
+        {t("errorPages.page401.errorText")}
+      </Typography>
+      <Typography variant="body2">{t("errorPages.page401.countDown", {countdownTime})}</Typography>
+      {ButtonToMainPage}
     </ErrorPageContainer>
   )
 }

src/views/ErrorPages/Page403.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react"
 
 import { Button } from "@mui/material"
 import Typography from "@mui/material/Typography"
+import { useTranslation } from "react-i18next"
 import { Navigate } from "react-router-dom"
 
 import { GetCountdownTime } from "./ErrorPagesHelper"
@@ -11,6 +12,8 @@ import ErrorPageContainer from "components/ErrorPageContainer"
 const Page403: React.FC = () => {
   const [redirect, setRedirect] = useState(false)
 
+  const { t } = useTranslation()
+
   const countdownTime = GetCountdownTime(10, 1000)
 
   useEffect(() => {
@@ -20,18 +23,20 @@ const Page403: React.FC = () => {
   }, [countdownTime])
 
   const ButtonToHomePage = (
-    <Button href="/home" color="primary">
-      Home Page
+    <Button href="/" color="primary" size="large">
+     {t("errorPages.page403.buttonText")}
     </Button>
   )
 
   return redirect ? (
     <Navigate to="/home" />
   ) : (
-    <ErrorPageContainer title="403 Forbidden Error" errorType="error">
-      <Typography variant="body2">Sorry, this page is currently not valid. </Typography>
-      <Typography variant="body2">Please go back to {ButtonToHomePage}</Typography>
-      <Typography variant="body2">Automatically redirect in {countdownTime}s.</Typography>
+    <ErrorPageContainer title= {t("errorPages.page403.errorTitle")} errorType="error">
+      <Typography variant="body2" paragraph={true} data-testid="403text">
+        {t("errorPages.page403.errorText")}
+      </Typography>
+      <Typography variant="body2">{t("errorPages.page403.countDown", {countdownTime})}</Typography>
+      {ButtonToHomePage}
     </ErrorPageContainer>
   )
 }