From e6f3f06f8226f3f0425abb6b5b56e2e4c4778e33 Mon Sep 17 00:00:00 2001 From: Tim Sullivan Date: Thu, 30 Nov 2023 14:22:46 -0700 Subject: [PATCH] Update page for missing Short URL (#171679) ## Summary Closes https://github.com/elastic/kibana/issues/169935 ### Screenshots
Before image
After image
### Testing 1. Create a simple dashboard 2. Use the Share > Short URL feature to create a short link to the dashboard. 3. Copy the shortened URL link to the clipboard, create a browser bookmark using the link. 4. Navigate to Saved Objects Management and delete the backing saved object of the short link 5. Click the new bookmark to try to open the shortened URL 6. Land on this new page ### Checklist Delete any items that are not applicable to this PR. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> --- .buildkite/ftr_configs.yml | 1 + src/plugins/share/public/lib/get_home_href.ts | 13 ++++ .../redirect/components/empty_prompt.tsx | 68 +++++++++++++++++++ .../url_service/redirect/components/error.tsx | 53 --------------- .../url_service/redirect/components/page.tsx | 24 +++++-- .../url_service/redirect/redirect_manager.ts | 22 ++++-- src/plugins/share/tsconfig.json | 2 + test/functional/apps/sharing/_short_urls.ts | 51 ++++++++++++++ test/functional/apps/sharing/config.ts | 18 +++++ test/functional/apps/sharing/index.ts | 15 ++++ 10 files changed, 201 insertions(+), 66 deletions(-) create mode 100644 src/plugins/share/public/lib/get_home_href.ts create mode 100644 src/plugins/share/public/url_service/redirect/components/empty_prompt.tsx delete mode 100644 src/plugins/share/public/url_service/redirect/components/error.tsx create mode 100644 test/functional/apps/sharing/_short_urls.ts create mode 100644 test/functional/apps/sharing/config.ts create mode 100644 test/functional/apps/sharing/index.ts diff --git a/.buildkite/ftr_configs.yml b/.buildkite/ftr_configs.yml index 003dbe3fd22f6..51a64ba204a97 100644 --- a/.buildkite/ftr_configs.yml +++ b/.buildkite/ftr_configs.yml @@ -124,6 +124,7 @@ enabled: - test/functional/apps/kibana_overview/config.ts - test/functional/apps/management/config.ts - test/functional/apps/saved_objects_management/config.ts + - test/functional/apps/sharing/config.ts - test/functional/apps/status_page/config.ts - test/functional/apps/visualize/group1/config.ts - test/functional/apps/visualize/group2/config.ts diff --git a/src/plugins/share/public/lib/get_home_href.ts b/src/plugins/share/public/lib/get_home_href.ts new file mode 100644 index 0000000000000..6c2cc4e695290 --- /dev/null +++ b/src/plugins/share/public/lib/get_home_href.ts @@ -0,0 +1,13 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import type { HttpSetup, IUiSettingsClient } from '@kbn/core/public'; + +export function getHomeHref(http: HttpSetup, uiSettings: IUiSettingsClient) { + return http.basePath.prepend(uiSettings.get('defaultRoute')); +} diff --git a/src/plugins/share/public/url_service/redirect/components/empty_prompt.tsx b/src/plugins/share/public/url_service/redirect/components/empty_prompt.tsx new file mode 100644 index 0000000000000..a2ba5a26fede7 --- /dev/null +++ b/src/plugins/share/public/url_service/redirect/components/empty_prompt.tsx @@ -0,0 +1,68 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import * as React from 'react'; + +import { EuiButtonEmpty } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; + +import { ChromeDocTitle } from '@kbn/core-chrome-browser'; +import { NotFoundPrompt } from '@kbn/shared-ux-prompt-not-found'; + +const defaultTitle = i18n.translate('share.urlService.redirect.components.Error.title', { + defaultMessage: 'Unable to open URL', + description: + 'Title displayed to user in redirect endpoint when redirection cannot be performed successfully.', +}); + +const defaultBody = i18n.translate('share.urlService.redirect.components.Error.body', { + defaultMessage: + `Sorry, the object you're looking for can't be found at this URL.` + + ` It might have been removed or maybe it never existed.`, +}); + +export interface ErrorProps { + title?: string; + body?: string; + homeHref: string; + docTitle: ChromeDocTitle; + error: Error; +} + +export const RedirectEmptyPrompt: React.FC = ({ + title = defaultTitle, + body = defaultBody, + homeHref, + docTitle, + error, +}) => { + // eslint-disable-next-line no-console + console.error('Short URL redirect error', error); + + docTitle.change( + i18n.translate('share.urlService.redirect.components.docTitle', { defaultMessage: 'Not Found' }) + ); + + return ( + {title}} + body={

{body}

} + actions={ + + {i18n.translate('share.urlService.redirect.components.Error.homeButton', { + defaultMessage: 'Back to home', + })} + + } + /> + ); +}; diff --git a/src/plugins/share/public/url_service/redirect/components/error.tsx b/src/plugins/share/public/url_service/redirect/components/error.tsx deleted file mode 100644 index c7e9e1a9f1095..0000000000000 --- a/src/plugins/share/public/url_service/redirect/components/error.tsx +++ /dev/null @@ -1,53 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import * as React from 'react'; -import { - EuiEmptyPrompt, - EuiCallOut, - EuiCodeBlock, - EuiSpacer, - EuiFlexGroup, - EuiFlexItem, - EuiText, -} from '@elastic/eui'; -import { i18n } from '@kbn/i18n'; - -const defaultTitle = i18n.translate('share.urlService.redirect.components.Error.title', { - defaultMessage: 'Redirection error', - description: - 'Title displayed to user in redirect endpoint when redirection cannot be performed successfully.', -}); - -export interface ErrorProps { - title?: string; - error: Error; -} - -export const Error: React.FC = ({ title = defaultTitle, error }) => { - return ( - {title}} - body={ - - - - {error.message} - - - - - {error.stack ? error.stack : ''} - - - } - /> - ); -}; diff --git a/src/plugins/share/public/url_service/redirect/components/page.tsx b/src/plugins/share/public/url_service/redirect/components/page.tsx index b64c87cd374cc..e06461a91b64c 100644 --- a/src/plugins/share/public/url_service/redirect/components/page.tsx +++ b/src/plugins/share/public/url_service/redirect/components/page.tsx @@ -8,21 +8,31 @@ import * as React from 'react'; import useObservable from 'react-use/lib/useObservable'; + import { EuiPageTemplate } from '@elastic/eui'; -import { ThemeServiceSetup } from '@kbn/core/public'; +import type { CustomBrandingSetup } from '@kbn/core-custom-branding-browser'; +import type { ChromeDocTitle, ThemeServiceSetup } from '@kbn/core/public'; import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme'; -import { CustomBrandingStart } from '@kbn/core-custom-branding-browser'; -import { Error } from './error'; -import { RedirectManager } from '../redirect_manager'; + +import type { RedirectManager } from '../redirect_manager'; +import { RedirectEmptyPrompt } from './empty_prompt'; import { Spinner } from './spinner'; export interface PageProps { + homeHref: string; + docTitle: ChromeDocTitle; + customBranding: CustomBrandingSetup; manager: Pick; theme: ThemeServiceSetup; - customBranding: CustomBrandingStart; } -export const Page: React.FC = ({ manager, theme, customBranding }) => { +export const Page: React.FC = ({ + manager, + homeHref, + customBranding, + docTitle, + theme, +}) => { const error = useObservable(manager.error$); const hasCustomBranding = useObservable(customBranding.hasCustomBranding$); @@ -30,7 +40,7 @@ export const Page: React.FC = ({ manager, theme, customBranding }) => return ( - + ); diff --git a/src/plugins/share/public/url_service/redirect/redirect_manager.ts b/src/plugins/share/public/url_service/redirect/redirect_manager.ts index 330ded65a5b82..54c58ee3a6263 100644 --- a/src/plugins/share/public/url_service/redirect/redirect_manager.ts +++ b/src/plugins/share/public/url_service/redirect/redirect_manager.ts @@ -8,15 +8,16 @@ import type { CoreSetup } from '@kbn/core/public'; import { i18n } from '@kbn/i18n'; -import { BehaviorSubject } from 'rxjs'; -import type { Location } from 'history'; import { migrateToLatest } from '@kbn/kibana-utils-plugin/common'; +import type { Location } from 'history'; +import { BehaviorSubject } from 'rxjs'; import type { UrlService } from '../../../common/url_service'; -import { parseSearchParams, RedirectOptions } from '../../../common/url_service/locators/redirect'; import { LEGACY_SHORT_URL_LOCATOR_ID, LegacyShortUrlLocatorParams, } from '../../../common/url_service/locators/legacy_short_url_locator'; +import { parseSearchParams, RedirectOptions } from '../../../common/url_service/locators/redirect'; +import { getHomeHref } from '../../lib/get_home_href'; export interface RedirectManagerDependencies { url: UrlService; @@ -28,18 +29,27 @@ export class RedirectManager { constructor(public readonly deps: RedirectManagerDependencies) {} public registerLocatorRedirectApp(core: CoreSetup) { - core.application.register({ + const { application, customBranding, http, theme } = core; + + application.register({ id: 'r', title: 'Redirect endpoint', chromeless: true, mount: async (params) => { const { render } = await import('./render'); + const [start] = await core.getStartServices(); + const { chrome, uiSettings } = start; + const unmount = render(params.element, { manager: this, - theme: core.theme, - customBranding: core.customBranding, + customBranding, + docTitle: chrome.docTitle, + theme, + homeHref: getHomeHref(http, uiSettings), }); + this.onMount(params.history.location); + return () => { unmount(); }; diff --git a/src/plugins/share/tsconfig.json b/src/plugins/share/tsconfig.json index e6100a773081c..afbf9641579b1 100644 --- a/src/plugins/share/tsconfig.json +++ b/src/plugins/share/tsconfig.json @@ -17,6 +17,8 @@ "@kbn/react-kibana-context-theme", "@kbn/core-analytics-browser", "@kbn/shared-ux-error-boundary", + "@kbn/core-chrome-browser", + "@kbn/shared-ux-prompt-not-found", ], "exclude": [ "target/**/*", diff --git a/test/functional/apps/sharing/_short_urls.ts b/test/functional/apps/sharing/_short_urls.ts new file mode 100644 index 0000000000000..9d8994a773a3a --- /dev/null +++ b/test/functional/apps/sharing/_short_urls.ts @@ -0,0 +1,51 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import expect from '@kbn/expect'; +import { FtrProviderContext } from '../../ftr_provider_context'; + +export default function ({ getPageObjects, getService }: FtrProviderContext) { + describe('Short URLs', () => { + const PageObjects = getPageObjects(['common']); + const browser = getService('browser'); + const log = getService('log'); + const testSubjects = getService('testSubjects'); + const retry = getService('retry'); + + it('shows Page for missing short URL', async () => { + await PageObjects.common.navigateToApp('home'); + + // go to 404 + const currentUrl = await browser.getCurrentUrl(); + log.info('Changing URL to missing short URL...'); + const newUrl = currentUrl.replace(/\/app\/home/, '/app/r/s/foofoo'); + await browser.get(newUrl); + + // check the page for 404 contents + log.info('Checking page title...'); + await retry.try(async () => { + const title = await browser.getTitle(); + expect(title).to.be('Not Found - Elastic'); + }); + + await retry.try(async () => { + await testSubjects.existOrFail('redirectErrorEmptyPromptBody'); + }); + + // click "back to home" button + log.info('Clicking the prompt button...'); + await testSubjects.click('redirectErrorEmptyPromptButton'); + + // check the page + await retry.try(async () => { + const title = await browser.getTitle(); + expect(title).to.be('Home - Elastic'); + }); + }); + }); +} diff --git a/test/functional/apps/sharing/config.ts b/test/functional/apps/sharing/config.ts new file mode 100644 index 0000000000000..e487d31dcb657 --- /dev/null +++ b/test/functional/apps/sharing/config.ts @@ -0,0 +1,18 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { FtrConfigProviderContext } from '@kbn/test'; + +export default async function ({ readConfigFile }: FtrConfigProviderContext) { + const functionalConfig = await readConfigFile(require.resolve('../../config.base.js')); + + return { + ...functionalConfig.getAll(), + testFiles: [require.resolve('.')], + }; +} diff --git a/test/functional/apps/sharing/index.ts b/test/functional/apps/sharing/index.ts new file mode 100644 index 0000000000000..9cbd715398e7b --- /dev/null +++ b/test/functional/apps/sharing/index.ts @@ -0,0 +1,15 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { FtrProviderContext } from '../../ftr_provider_context'; + +export default function ({ loadTestFile }: FtrProviderContext) { + describe('Sharing features', () => { + loadTestFile(require.resolve('./_short_urls')); + }); +}