From bfd61131e8bd26b0dc2e5fa9fdfa8ea81521adcf Mon Sep 17 00:00:00 2001 From: Jan Ackermann Date: Tue, 8 Oct 2024 23:17:36 +0200 Subject: [PATCH 1/4] Add general not found page --- packages/web-runtime/src/pages/notFound.vue | 14 ++++++++++++++ packages/web-runtime/src/router/index.ts | 7 +++++++ 2 files changed, 21 insertions(+) create mode 100644 packages/web-runtime/src/pages/notFound.vue diff --git a/packages/web-runtime/src/pages/notFound.vue b/packages/web-runtime/src/pages/notFound.vue new file mode 100644 index 00000000000..b3f4ad156c1 --- /dev/null +++ b/packages/web-runtime/src/pages/notFound.vue @@ -0,0 +1,14 @@ + + + diff --git a/packages/web-runtime/src/router/index.ts b/packages/web-runtime/src/router/index.ts index 7fc6f73def8..46c66ef63c1 100644 --- a/packages/web-runtime/src/router/index.ts +++ b/packages/web-runtime/src/router/index.ts @@ -2,6 +2,7 @@ import AccessDeniedPage from '../pages/accessDenied.vue' import Account from '../pages/account.vue' import LoginPage from '../pages/login.vue' import LogoutPage from '../pages/logout.vue' +import NotFoundPage from '../pages/notFound.vue' import OidcCallbackPage from '../pages/oidcCallback.vue' import ResolvePublicLinkPage from '../pages/resolvePublicLink.vue' import ResolvePrivateLinkPage from '../pages/resolvePrivateLink.vue' @@ -86,6 +87,12 @@ const routes = [ name: 'account', component: Account, meta: { title: $gettext('Account'), authContext: 'hybrid' } + }, + { + path: '/:pathMatch(.*)*', + name: 'notFound', + component: NotFoundPage, + meta: { title: $gettext('Not found'), authContext: 'hybrid' } } ] export const router = patchRouter( From e712957b62ed2b3ebb50805082ff513ab95e5597 Mon Sep 17 00:00:00 2001 From: Jan Ackermann Date: Tue, 8 Oct 2024 23:19:35 +0200 Subject: [PATCH 2/4] Add changelog item --- changelog/unreleased/enhancement-add-not-found-page | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 changelog/unreleased/enhancement-add-not-found-page diff --git a/changelog/unreleased/enhancement-add-not-found-page b/changelog/unreleased/enhancement-add-not-found-page new file mode 100644 index 00000000000..66ac9783ced --- /dev/null +++ b/changelog/unreleased/enhancement-add-not-found-page @@ -0,0 +1,6 @@ +Enhancement: Add not found page + +We've added a not found page to communicate to users when they've navigated to a page that doesn't exist. + +https://github.com/owncloud/web/pull/11737 +https://github.com/owncloud/web/issues/5804 From 0da6c9717d72326d535f17421213149c57c889ce Mon Sep 17 00:00:00 2001 From: Alex Date: Wed, 9 Oct 2024 06:47:21 +0200 Subject: [PATCH 3/4] Update packages/web-runtime/src/pages/notFound.vue Co-authored-by: Benedikt Kulmann --- packages/web-runtime/src/pages/notFound.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web-runtime/src/pages/notFound.vue b/packages/web-runtime/src/pages/notFound.vue index b3f4ad156c1..5e375a67984 100644 --- a/packages/web-runtime/src/pages/notFound.vue +++ b/packages/web-runtime/src/pages/notFound.vue @@ -4,7 +4,7 @@

404

From 412c09a45b6b1615bf8c5c08fb95a7b6040c201b Mon Sep 17 00:00:00 2001 From: Jan Ackermann Date: Wed, 9 Oct 2024 09:12:07 +0200 Subject: [PATCH 4/4] Add e2e test --- packages/web-runtime/src/pages/notFound.vue | 5 +---- .../features/navigation/pageNotFoud.feature | 13 ++++++++++++ tests/e2e/cucumber/steps/ui/navigateByUrl.ts | 20 ++++++++++++++++++- .../support/objects/url-navigation/actions.ts | 7 +++++++ .../support/objects/url-navigation/index.ts | 7 +++++++ 5 files changed, 47 insertions(+), 5 deletions(-) create mode 100644 tests/e2e/cucumber/features/navigation/pageNotFoud.feature diff --git a/packages/web-runtime/src/pages/notFound.vue b/packages/web-runtime/src/pages/notFound.vue index 5e375a67984..b97901ecfa8 100644 --- a/packages/web-runtime/src/pages/notFound.vue +++ b/packages/web-runtime/src/pages/notFound.vue @@ -8,7 +8,4 @@ /> - - + diff --git a/tests/e2e/cucumber/features/navigation/pageNotFoud.feature b/tests/e2e/cucumber/features/navigation/pageNotFoud.feature new file mode 100644 index 00000000000..eaae133c947 --- /dev/null +++ b/tests/e2e/cucumber/features/navigation/pageNotFoud.feature @@ -0,0 +1,13 @@ +Feature: Page not found + As a user + I want to see a not found page + So that I know when I've navigated to a page that doesn't exist + + Scenario: not found page + Given "Admin" creates following user using API + | id | + | Alice | + And "Alice" logs in + When "Alice" navigates to a non-existing page + Then "Alice" should see the not found page + And "Alice" logs out diff --git a/tests/e2e/cucumber/steps/ui/navigateByUrl.ts b/tests/e2e/cucumber/steps/ui/navigateByUrl.ts index 84a06a5cdd1..aa7e066e421 100644 --- a/tests/e2e/cucumber/steps/ui/navigateByUrl.ts +++ b/tests/e2e/cucumber/steps/ui/navigateByUrl.ts @@ -1,4 +1,4 @@ -import { When } from '@cucumber/cucumber' +import { Then, When } from '@cucumber/cucumber' import { World } from '../../environment' import { objects } from '../../../support' @@ -54,3 +54,21 @@ When( await urlNavObject.openSpaceViaUrl({ user, space }) } ) + +When( + '{string} navigates to a non-existing page', + async function (this: World, stepUser: string): Promise { + const { page } = this.actorsEnvironment.getActor({ key: stepUser }) + const urlNavObject = new objects.urlNavigation.URLNavigation({ page }) + await urlNavObject.navigateToNonExistingPage() + } +) + +Then( + '{string} should see the not found page', + async function (this: World, stepUser: string): Promise { + const { page } = this.actorsEnvironment.getActor({ key: stepUser }) + const urlNavObject = new objects.urlNavigation.URLNavigation({ page }) + await urlNavObject.waitForNotFoundPageToBeVisible() + } +) diff --git a/tests/e2e/support/objects/url-navigation/actions.ts b/tests/e2e/support/objects/url-navigation/actions.ts index 6ae5cdaac07..689f55fc335 100644 --- a/tests/e2e/support/objects/url-navigation/actions.ts +++ b/tests/e2e/support/objects/url-navigation/actions.ts @@ -86,3 +86,10 @@ const getTheFileIdOfSpaceFile = async ( spaceName }) } + +export const navigateToNonExistingPage = async ({ page }: { page: Page }) => { + await page.goto(`${config.backendUrl}/'a-non-existing-page'`) +} +export const waitForNotFoundPageToBeVisible = async ({ page }: { page: Page }) => { + await page.locator('.page-not-found').waitFor() +} diff --git a/tests/e2e/support/objects/url-navigation/index.ts b/tests/e2e/support/objects/url-navigation/index.ts index 02ff132c308..cf28501f2a0 100644 --- a/tests/e2e/support/objects/url-navigation/index.ts +++ b/tests/e2e/support/objects/url-navigation/index.ts @@ -21,4 +21,11 @@ export class URLNavigation { async openSpaceViaUrl(args: Omit): Promise { await po.openSpaceViaUrl({ ...args, page: this.#page }) } + + async navigateToNonExistingPage(): Promise { + await po.navigateToNonExistingPage({ page: this.#page }) + } + async waitForNotFoundPageToBeVisible(): Promise { + await po.waitForNotFoundPageToBeVisible({ page: this.#page }) + } }