From 2c7b72a3590c29c00634fab6a3d27ab05e613070 Mon Sep 17 00:00:00 2001 From: Liisa Lado-Villar <145-lilado@users.noreply.gitlab.ci.csc.fi> Date: Tue, 11 Jun 2024 17:16:57 +0300 Subject: [PATCH 1/6] refactor error page texts with i18n pick 2e8fe1d fix ErrorPageContainer children/child component pick 75baf69 fix error messages and restore redirect buttons --- package.json | 113 ------------------------ src/__tests__/Page400.test.tsx | 5 +- src/__tests__/Page401.test.tsx | 10 +-- src/__tests__/Page403.test.tsx | 10 +-- src/__tests__/Page404.test.tsx | 5 +- src/__tests__/Page500.test.tsx | 5 +- src/__tests__/SubmissionWizard.test.tsx | 5 +- src/translations/en/translation_en.json | 27 ++++-- src/translations/fi/translation_fi.json | 27 ++++-- src/views/ErrorPages/Page400.tsx | 11 +-- src/views/ErrorPages/Page401.tsx | 17 ++-- src/views/ErrorPages/Page403.tsx | 15 ++-- src/views/ErrorPages/Page404.tsx | 15 ++-- src/views/ErrorPages/Page500.tsx | 10 +-- 14 files changed, 87 insertions(+), 188 deletions(-) delete mode 100644 package.json diff --git a/package.json b/package.json deleted file mode 100644 index b3e1586c6..000000000 --- a/package.json +++ /dev/null @@ -1,113 +0,0 @@ -{ - "name": "metadata-submitter-frontend", - "version": "0.13.0", - "type": "module", - "private": true, - "dependencies": { - "@apidevtools/json-schema-ref-parser": "^11.6.4", - "@emotion/babel-plugin": "^11.11.0", - "@emotion/react": "^11.11.3", - "@emotion/styled": "^11.11.5", - "@mui/codemod": "^5.15.14", - "@mui/icons-material": "^5.15.20", - "@mui/lab": "^5.0.0-alpha.170", - "@mui/material": "^5.15.20", - "@mui/system": "^5.15.20", - "@mui/x-data-grid": "^7.7.0", - "@reduxjs/toolkit": "^2.2.5", - "@typescript-eslint/parser": "^7.13.0", - "@vitejs/plugin-react": "^4.3.1", - "ajv": "^8.16.0", - "ajv-formats": "^3.0.0", - "ajv-i18n": "^4.2.0", - "apisauce": "^3.0.1", - "dotenv": "^16.4.5", - "i18next": "^23.11.5", - "lodash": "^4.17.21", - "moment": "^2.30.1", - "react": "^18.3.1", - "react-dom": "^18.3.1", - "react-dropzone": "^12.1.0", - "react-hook-form": "^7.51.5", - "react-i18next": "^14.1.2", - "react-redux": "^9.1.2", - "react-router-dom": "^6.23.1", - "react-transition-group": "^4.4.2", - "vite": "^5.3.1", - "vite-tsconfig-paths": "^4.3.2" - }, - "scripts": { - "start": "vite", - "build": "tsc && vite build", - "test": "vitest watch", - "test:no-watch": "vitest run", - "test:coverage": "vitest run --coverage", - "test:ui": "vitest --ui", - "test:e2e": "playwright test", - "test:e2e:ui": "playwright test --ui", - "lint": "eslint --fix .", - "lint:check": "eslint .", - "format": "prettier --write \"**/*.+(json|yml|yaml|css|md)\"", - "format:check": "prettier --check \"**/*.+(json|yml|yaml|css|md)\"", - "concurrently": "concurrently", - "postinstall": "husky install", - "tsc": "tsc --pretty", - "preinstall": "npx only-allow pnpm" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - }, - "devDependencies": { - "@babel/plugin-proposal-private-property-in-object": "^7.21.11", - "@eslint/compat": "^1.1.0", - "@eslint/eslintrc": "^3.1.0", - "@eslint/js": "^9.5.0", - "@playwright/test": "^1.44.1", - "@testing-library/jest-dom": "^6.4.6", - "@testing-library/react": "^15.0.7", - "@testing-library/user-event": "^14.0.4", - "@types/lodash": "^4.17.5", - "@types/node": "^20.14.2", - "@types/react-dom": "^18.3.0", - "@types/react-router-dom": "^5.3.3", - "@typescript-eslint/eslint-plugin": "^7.13.0", - "@vitest/coverage-v8": "^1.5.3", - "@vitest/ui": "^1.5.3", - "chokidar": "^3.5.3", - "concurrently": "^8.0.0", - "cypress": "^13.11.0", - "cypress-file-upload": "^5.0.8", - "eslint": "9.5.0", - "eslint-config-prettier": "^8.10.0", - "eslint-plugin-cypress": "^2.15.2", - "eslint-plugin-import": "^2.29.1", - "eslint-plugin-prettier": "^4.2.1", - "eslint-plugin-react": "^7.34.2", - "eslint-plugin-react-hooks": "^4.6.2", - "globals": "^15.4.0", - "husky": "^7.0.4", - "jsdom": "^24.1.0", - "mongodb": "^6.7.0", - "msw": "^2.3.0", - "pinst": "^3.0.0", - "prettier": "^2.8.8", - "snapshot-diff": "^0.10.0", - "typescript": "^4.9.5", - "vite-plugin-node-polyfills": "^0.22.0", - "vitest": "^1.5.3" - }, - "husky": { - "hooks": { - "pre-commit": "pnpm run concurrently -- \"pnpm:lint:check\" \"pnpm:format:check\" \"pnpm:tsc\" \"pnpm:test:no-watch\" " - } - } -} diff --git a/src/__tests__/Page400.test.tsx b/src/__tests__/Page400.test.tsx index 838334efb..1d7b99176 100644 --- a/src/__tests__/Page400.test.tsx +++ b/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", () => { ) - 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() }) }) diff --git a/src/__tests__/Page401.test.tsx b/src/__tests__/Page401.test.tsx index 25b886c86..882ef76cd 100644 --- a/src/__tests__/Page401.test.tsx +++ b/src/__tests__/Page401.test.tsx @@ -20,12 +20,8 @@ describe("Page401", () => { ) - 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", () => { ) - expect(component.getByText("401 Authorization Error")).toBeInTheDocument() + expect(component.getByText("401 – Not Logged In")).toBeInTheDocument() act(() => { vi.advanceTimersByTime(10000) diff --git a/src/__tests__/Page403.test.tsx b/src/__tests__/Page403.test.tsx index 29af7d130..3ad8a85a3 100644 --- a/src/__tests__/Page403.test.tsx +++ b/src/__tests__/Page403.test.tsx @@ -42,12 +42,8 @@ describe("Page403", () => { ) - 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", () => { ) }) - expect(screen.getByText("403 Forbidden Error")).toBeInTheDocument() + expect(screen.getByText("403 – Forbidden")).toBeInTheDocument() act(() => { vi.advanceTimersByTime(10000) }) diff --git a/src/__tests__/Page404.test.tsx b/src/__tests__/Page404.test.tsx index 5ec2a5c77..5ca3960d2 100644 --- a/src/__tests__/Page404.test.tsx +++ b/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", () => { ) - 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() }) }) diff --git a/src/__tests__/Page500.test.tsx b/src/__tests__/Page500.test.tsx index 1767361a0..386a474bd 100644 --- a/src/__tests__/Page500.test.tsx +++ b/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", () => { ) - 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() }) }) diff --git a/src/__tests__/SubmissionWizard.test.tsx b/src/__tests__/SubmissionWizard.test.tsx index 90fd1642a..d994061ab 100644 --- a/src/__tests__/SubmissionWizard.test.tsx +++ b/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", () => { , ) 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 () => { diff --git a/src/translations/en/translation_en.json b/src/translations/en/translation_en.json index 5a33e1fd2..f130f1959 100644 --- a/src/translations/en/translation_en.json +++ b/src/translations/en/translation_en.json @@ -55,11 +55,28 @@ } }, "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." + }, + "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." + }, + "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." + } }, "searchItems": "Search items", "dataTable": { diff --git a/src/translations/fi/translation_fi.json b/src/translations/fi/translation_fi.json index 5c6af3abc..0d43753f2 100644 --- a/src/translations/fi/translation_fi.json +++ b/src/translations/fi/translation_fi.json @@ -55,11 +55,28 @@ } }, "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." + }, + "page403": { + "errorTitle": "403 – Kielletty toiminto", + "errorText": "Näet tämän sivun, koska yritit suorittaa kielletyn toiminnon.", + "countDown": "Automaattinen uudellenohjaus {{countdownTime}}s." + }, + "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." + } }, "searchItems": "Search items", "dataTable": { diff --git a/src/views/ErrorPages/Page400.tsx b/src/views/ErrorPages/Page400.tsx index 1b2370187..3d3aaf047 100644 --- a/src/views/ErrorPages/Page400.tsx +++ b/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 ( - + - 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.{" "} - - - We would like to fix the issue, so could you create an issue in our github repo? + {t("errorPages.page400.errorText")} ) diff --git a/src/views/ErrorPages/Page401.tsx b/src/views/ErrorPages/Page401.tsx index 619d09037..e555ed516 100644 --- a/src/views/ErrorPages/Page401.tsx +++ b/src/views/ErrorPages/Page401.tsx @@ -1,7 +1,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" @@ -13,25 +13,20 @@ const Page401: React.FC = () => { const countdownTime = GetCountdownTime(10, 1000) + const { t } = useTranslation() + useEffect(() => { if (countdownTime === 0) { setRedirect(true) } }, [countdownTime]) - const ButtonToMainPage = ( - - ) - return redirect ? ( ) : ( - - You have attempted to access a page for which you are not authorized. - You can go back to {ButtonToMainPage} - Automatically redirect in {countdownTime}s. + + {t("errorPages.page401.errorText")} + {t("errorPages.page401.countDown", {countdownTime})} ) } diff --git a/src/views/ErrorPages/Page403.tsx b/src/views/ErrorPages/Page403.tsx index c6dfe7624..f52a1f765 100644 --- a/src/views/ErrorPages/Page403.tsx +++ b/src/views/ErrorPages/Page403.tsx @@ -1,7 +1,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" @@ -19,19 +19,14 @@ const Page403: React.FC = () => { } }, [countdownTime]) - const ButtonToHomePage = ( - - ) + const { t } = useTranslation() return redirect ? ( ) : ( - - Sorry, this page is currently not valid. - Please go back to {ButtonToHomePage} - Automatically redirect in {countdownTime}s. + + {t("errorPages.page403.errorText")} + {t("errorPages.page401.countDown", {countdownTime})} ) } diff --git a/src/views/ErrorPages/Page404.tsx b/src/views/ErrorPages/Page404.tsx index f697cb0b5..e17be8f91 100644 --- a/src/views/ErrorPages/Page404.tsx +++ b/src/views/ErrorPages/Page404.tsx @@ -1,5 +1,6 @@ import React from "react" +import { useTranslation } from "react-i18next" import { useLocation } from "react-router-dom" import ErrorPageContainer from "components/ErrorPageContainer" @@ -7,13 +8,15 @@ import ErrorPageContainer from "components/ErrorPageContainer" const Page404: React.FC = () => { const errorLocation = useLocation() const searchParams = errorLocation.search!== "" ? errorLocation.search : "" - const pathname: string = errorLocation.pathname === "/error404" ? "" : errorLocation.pathname + searchParams + const pathname: string = errorLocation.pathname === "/error404" ? "" : "'" + errorLocation.pathname + searchParams + "'" - return ( - - Oops! Page {pathname} could not be found. - - ) + const { t } = useTranslation() + + return ( + + {t("errorPages.page404.errorText", {path: pathname})} + + ) } export default Page404 diff --git a/src/views/ErrorPages/Page500.tsx b/src/views/ErrorPages/Page500.tsx index f95badd5f..ae4be849d 100644 --- a/src/views/ErrorPages/Page500.tsx +++ b/src/views/ErrorPages/Page500.tsx @@ -1,19 +1,17 @@ import React from "react" import Typography from "@mui/material/Typography" +import { useTranslation } from "react-i18next" import ErrorPageContainer from "../../components/ErrorPageContainer" const Page500: React.FC = () => { - const errorLink = "https://github.com/CSCfi/metadata-submitter/issues" + const { t } = useTranslation() return ( - + - Oops, this means our server caused some sort of error we have not thought of.{" "} - - - We would like to fix the issue, so could you create an issue in our github repo? + {t("errorPages.page500.errorText")} ) From 04c097eab33360137ac6364c8e3ee9bc1f92797e Mon Sep 17 00:00:00 2001 From: Liisa Lado-Villar <145-lilado@users.noreply.gitlab.ci.csc.fi> Date: Wed, 12 Jun 2024 13:57:12 +0300 Subject: [PATCH 2/6] fix ErrorPageContainer children/child component --- src/components/ErrorPageContainer.tsx | 2 +- src/views/ErrorPages/Page400.tsx | 2 +- src/views/ErrorPages/Page401.tsx | 4 +++- src/views/ErrorPages/Page403.tsx | 6 ++++-- src/views/ErrorPages/Page404.tsx | 5 ++++- src/views/ErrorPages/Page500.tsx | 4 ++-- 6 files changed, 15 insertions(+), 8 deletions(-) diff --git a/src/components/ErrorPageContainer.tsx b/src/components/ErrorPageContainer.tsx index 87144c1ed..bb41c3708 100644 --- a/src/components/ErrorPageContainer.tsx +++ b/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 } diff --git a/src/views/ErrorPages/Page400.tsx b/src/views/ErrorPages/Page400.tsx index 3d3aaf047..cca377b3e 100644 --- a/src/views/ErrorPages/Page400.tsx +++ b/src/views/ErrorPages/Page400.tsx @@ -10,7 +10,7 @@ const Page400: React.FC = () => { return ( - + {t("errorPages.page400.errorText")} diff --git a/src/views/ErrorPages/Page401.tsx b/src/views/ErrorPages/Page401.tsx index e555ed516..f07e7ef04 100644 --- a/src/views/ErrorPages/Page401.tsx +++ b/src/views/ErrorPages/Page401.tsx @@ -25,7 +25,9 @@ const Page401: React.FC = () => { ) : ( - {t("errorPages.page401.errorText")} + + {t("errorPages.page401.errorText")} + {t("errorPages.page401.countDown", {countdownTime})} ) diff --git a/src/views/ErrorPages/Page403.tsx b/src/views/ErrorPages/Page403.tsx index f52a1f765..18e3c0707 100644 --- a/src/views/ErrorPages/Page403.tsx +++ b/src/views/ErrorPages/Page403.tsx @@ -25,8 +25,10 @@ const Page403: React.FC = () => { ) : ( - {t("errorPages.page403.errorText")} - {t("errorPages.page401.countDown", {countdownTime})} + + {t("errorPages.page403.errorText")} + + {t("errorPages.page403.countDown", {countdownTime})} ) } diff --git a/src/views/ErrorPages/Page404.tsx b/src/views/ErrorPages/Page404.tsx index e17be8f91..190a725e6 100644 --- a/src/views/ErrorPages/Page404.tsx +++ b/src/views/ErrorPages/Page404.tsx @@ -1,5 +1,6 @@ import React from "react" +import { Typography } from "@mui/material" import { useTranslation } from "react-i18next" import { useLocation } from "react-router-dom" @@ -14,7 +15,9 @@ const Page404: React.FC = () => { return ( - {t("errorPages.page404.errorText", {path: pathname})} + + {t("errorPages.page404.errorText", {path: pathname})} + ) } diff --git a/src/views/ErrorPages/Page500.tsx b/src/views/ErrorPages/Page500.tsx index ae4be849d..7c52871d3 100644 --- a/src/views/ErrorPages/Page500.tsx +++ b/src/views/ErrorPages/Page500.tsx @@ -10,8 +10,8 @@ const Page500: React.FC = () => { return ( - - {t("errorPages.page500.errorText")} + + {t("errorPages.page500.errorText")} ) From 663222273aea583928c98a894487cba23e609e79 Mon Sep 17 00:00:00 2001 From: Liisa Lado-Villar <145-lilado@users.noreply.gitlab.ci.csc.fi> Date: Thu, 13 Jun 2024 10:46:53 +0300 Subject: [PATCH 3/6] fix error messages and restore redirect buttons --- src/translations/en/translation_en.json | 10 +++++++--- src/translations/fi/translation_fi.json | 10 +++++++--- src/views/ErrorPages/Page401.tsx | 14 +++++++++++--- src/views/ErrorPages/Page403.tsx | 12 ++++++++++-- src/views/ErrorPages/Page500.tsx | 6 +++++- 5 files changed, 40 insertions(+), 12 deletions(-) diff --git a/src/translations/en/translation_en.json b/src/translations/en/translation_en.json index f130f1959..1f364fa8b 100644 --- a/src/translations/en/translation_en.json +++ b/src/translations/en/translation_en.json @@ -62,12 +62,14 @@ "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." + "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." + "countDown": "Automatically redirect in {{countdownTime}}s.", + "buttonText": "Go to home page" }, "page404": { "errorTitle": "404 – Page Not Found", @@ -75,7 +77,9 @@ }, "page500": { "errorTitle": "500 – Service Unavailable", - "errorText": "You are seeing this page because the service is currently unavailable. Please check back later." + "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", diff --git a/src/translations/fi/translation_fi.json b/src/translations/fi/translation_fi.json index 0d43753f2..265086564 100644 --- a/src/translations/fi/translation_fi.json +++ b/src/translations/fi/translation_fi.json @@ -62,12 +62,14 @@ "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." + "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." + "countDown": "Automaattinen uudellenohjaus {{countdownTime}}s.", + "buttonText": "Siirry kotisivulle" }, "page404": { "errorTitle": "404 – Sivua ei löydy", @@ -75,7 +77,9 @@ }, "page500": { "errorTitle": "500 – Palvelu ei ole saatavilla", - "errorText": "Näet tämän sivun, koska palvelu ei ole tällä hetkellä 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", diff --git a/src/views/ErrorPages/Page401.tsx b/src/views/ErrorPages/Page401.tsx index f07e7ef04..c11e36c7a 100644 --- a/src/views/ErrorPages/Page401.tsx +++ b/src/views/ErrorPages/Page401.tsx @@ -1,5 +1,6 @@ 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" @@ -11,24 +12,31 @@ import ErrorPageContainer from "components/ErrorPageContainer" const Page401: React.FC = () => { const [redirect, setRedirect] = useState(false) - const countdownTime = GetCountdownTime(10, 1000) - const { t } = useTranslation() + const countdownTime = GetCountdownTime(10, 1000) + useEffect(() => { if (countdownTime === 0) { setRedirect(true) } }, [countdownTime]) + const ButtonToMainPage = ( + + ) + return redirect ? ( ) : ( - + {t("errorPages.page401.errorText")} {t("errorPages.page401.countDown", {countdownTime})} + {ButtonToMainPage} ) } diff --git a/src/views/ErrorPages/Page403.tsx b/src/views/ErrorPages/Page403.tsx index 18e3c0707..4268a2388 100644 --- a/src/views/ErrorPages/Page403.tsx +++ b/src/views/ErrorPages/Page403.tsx @@ -1,5 +1,6 @@ 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" @@ -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(() => { @@ -19,16 +22,21 @@ const Page403: React.FC = () => { } }, [countdownTime]) - const { t } = useTranslation() + const ButtonToHomePage = ( + + ) return redirect ? ( ) : ( - + {t("errorPages.page403.errorText")} {t("errorPages.page403.countDown", {countdownTime})} + {ButtonToHomePage} ) } diff --git a/src/views/ErrorPages/Page500.tsx b/src/views/ErrorPages/Page500.tsx index 7c52871d3..b5feea993 100644 --- a/src/views/ErrorPages/Page500.tsx +++ b/src/views/ErrorPages/Page500.tsx @@ -7,12 +7,16 @@ import ErrorPageContainer from "../../components/ErrorPageContainer" const Page500: React.FC = () => { const { t } = useTranslation() + //const linkname = t(erroPages.page500.errorLink) return ( - + {t("errorPages.page500.errorText")} + + {t("errorPages.page500.errorText2")} + ) } From 10261bb3f5db6a3645d4819b37317ff0e552e3f5 Mon Sep 17 00:00:00 2001 From: Liisa Lado-Villar <145-lilado@users.noreply.gitlab.ci.csc.fi> Date: Thu, 13 Jun 2024 12:25:04 +0300 Subject: [PATCH 4/6] adapt e2e error test --- playwright/tests/errorPages.spec.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/playwright/tests/errorPages.spec.ts b/playwright/tests/errorPages.spec.ts index 85898dfd6..4c9a2d7c7 100644 --- a/playwright/tests/errorPages.spec.ts +++ b/playwright/tests/errorPages.spec.ts @@ -16,7 +16,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: /400 Bad Request/ }).first()).toBeVisible({ + await expect(page.locator(".MuiAlert-message", { hasText: /400 – Bad Request/ }).first()).toBeVisible({ timeout: 10000, }) }) @@ -24,7 +24,7 @@ test.describe("catch error codes and display corresponding error page", function 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, }) }) From 6da1c9fd937bded18886e261ee53ab9e9d124415 Mon Sep 17 00:00:00 2001 From: Liisa Lado-Villar <145-lilado@users.noreply.gitlab.ci.csc.fi> Date: Thu, 13 Jun 2024 13:39:39 +0300 Subject: [PATCH 5/6] add CHANGELOG row pick 0cc6be1 adapt e2e error test pick d564720 add CHANGELOG row --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c1bdcc498..9d49fd74a 100644 --- a/CHANGELOG.md +++ b/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 From 02e1284bcde7792bc745cba0342cc0e665552ee1 Mon Sep 17 00:00:00 2001 From: Liisa Lado-Villar <145-lilado@users.noreply.gitlab.ci.csc.fi> Date: Tue, 18 Jun 2024 15:45:02 +0300 Subject: [PATCH 6/6] restore Page500 link --- package.json | 113 +++++++++++++++++++++++++++++++ src/views/ErrorPages/Page500.tsx | 6 +- 2 files changed, 117 insertions(+), 2 deletions(-) create mode 100644 package.json diff --git a/package.json b/package.json new file mode 100644 index 000000000..b3e1586c6 --- /dev/null +++ b/package.json @@ -0,0 +1,113 @@ +{ + "name": "metadata-submitter-frontend", + "version": "0.13.0", + "type": "module", + "private": true, + "dependencies": { + "@apidevtools/json-schema-ref-parser": "^11.6.4", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/react": "^11.11.3", + "@emotion/styled": "^11.11.5", + "@mui/codemod": "^5.15.14", + "@mui/icons-material": "^5.15.20", + "@mui/lab": "^5.0.0-alpha.170", + "@mui/material": "^5.15.20", + "@mui/system": "^5.15.20", + "@mui/x-data-grid": "^7.7.0", + "@reduxjs/toolkit": "^2.2.5", + "@typescript-eslint/parser": "^7.13.0", + "@vitejs/plugin-react": "^4.3.1", + "ajv": "^8.16.0", + "ajv-formats": "^3.0.0", + "ajv-i18n": "^4.2.0", + "apisauce": "^3.0.1", + "dotenv": "^16.4.5", + "i18next": "^23.11.5", + "lodash": "^4.17.21", + "moment": "^2.30.1", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-dropzone": "^12.1.0", + "react-hook-form": "^7.51.5", + "react-i18next": "^14.1.2", + "react-redux": "^9.1.2", + "react-router-dom": "^6.23.1", + "react-transition-group": "^4.4.2", + "vite": "^5.3.1", + "vite-tsconfig-paths": "^4.3.2" + }, + "scripts": { + "start": "vite", + "build": "tsc && vite build", + "test": "vitest watch", + "test:no-watch": "vitest run", + "test:coverage": "vitest run --coverage", + "test:ui": "vitest --ui", + "test:e2e": "playwright test", + "test:e2e:ui": "playwright test --ui", + "lint": "eslint --fix .", + "lint:check": "eslint .", + "format": "prettier --write \"**/*.+(json|yml|yaml|css|md)\"", + "format:check": "prettier --check \"**/*.+(json|yml|yaml|css|md)\"", + "concurrently": "concurrently", + "postinstall": "husky install", + "tsc": "tsc --pretty", + "preinstall": "npx only-allow pnpm" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + }, + "devDependencies": { + "@babel/plugin-proposal-private-property-in-object": "^7.21.11", + "@eslint/compat": "^1.1.0", + "@eslint/eslintrc": "^3.1.0", + "@eslint/js": "^9.5.0", + "@playwright/test": "^1.44.1", + "@testing-library/jest-dom": "^6.4.6", + "@testing-library/react": "^15.0.7", + "@testing-library/user-event": "^14.0.4", + "@types/lodash": "^4.17.5", + "@types/node": "^20.14.2", + "@types/react-dom": "^18.3.0", + "@types/react-router-dom": "^5.3.3", + "@typescript-eslint/eslint-plugin": "^7.13.0", + "@vitest/coverage-v8": "^1.5.3", + "@vitest/ui": "^1.5.3", + "chokidar": "^3.5.3", + "concurrently": "^8.0.0", + "cypress": "^13.11.0", + "cypress-file-upload": "^5.0.8", + "eslint": "9.5.0", + "eslint-config-prettier": "^8.10.0", + "eslint-plugin-cypress": "^2.15.2", + "eslint-plugin-import": "^2.29.1", + "eslint-plugin-prettier": "^4.2.1", + "eslint-plugin-react": "^7.34.2", + "eslint-plugin-react-hooks": "^4.6.2", + "globals": "^15.4.0", + "husky": "^7.0.4", + "jsdom": "^24.1.0", + "mongodb": "^6.7.0", + "msw": "^2.3.0", + "pinst": "^3.0.0", + "prettier": "^2.8.8", + "snapshot-diff": "^0.10.0", + "typescript": "^4.9.5", + "vite-plugin-node-polyfills": "^0.22.0", + "vitest": "^1.5.3" + }, + "husky": { + "hooks": { + "pre-commit": "pnpm run concurrently -- \"pnpm:lint:check\" \"pnpm:format:check\" \"pnpm:tsc\" \"pnpm:test:no-watch\" " + } + } +} diff --git a/src/views/ErrorPages/Page500.tsx b/src/views/ErrorPages/Page500.tsx index b5feea993..4716c79a4 100644 --- a/src/views/ErrorPages/Page500.tsx +++ b/src/views/ErrorPages/Page500.tsx @@ -7,7 +7,9 @@ import ErrorPageContainer from "../../components/ErrorPageContainer" const Page500: React.FC = () => { const { t } = useTranslation() - //const linkname = t(erroPages.page500.errorLink) + + const errorLink = "#" + const linkname = t("errorPages.page500.errorLink") return ( @@ -15,7 +17,7 @@ const Page500: React.FC = () => { {t("errorPages.page500.errorText")} - {t("errorPages.page500.errorText2")} + {t("errorPages.page500.errorText2")} {linkname}. )