Update page for missing Short URL (#171679)

## Summary

Closes https://github.com/elastic/kibana/issues/169935

### Screenshots
<details>
<summary>Before</summary>
<img width="1259" alt="image"
src="dbc91683-4088-48df-a402-1432615a2ff4">
</details>

<details>
<summary>After</summary>
<img width="1260" alt="image"
src="a1efabba-9402-4e97-935e-93656069c650">
</details>


### 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

@@ -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

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'));
+}

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<ErrorProps> = ({
+  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 (
+    <NotFoundPrompt
+      title={<h2>{title}</h2>}
+      body={<p data-test-subj="redirectErrorEmptyPromptBody">{body}</p>}
+      actions={
+        <EuiButtonEmpty
+          iconType="arrowLeft"
+          href={homeHref}
+          data-test-subj="redirectErrorEmptyPromptButton"
+        >
+          {i18n.translate('share.urlService.redirect.components.Error.homeButton', {
+            defaultMessage: 'Back to home',
+          })}
+        </EuiButtonEmpty>
+      }
+    />
+  );
+};

src/plugins/share/public/url_service/redirect/components/error.tsx

@@ -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<ErrorProps> = ({ title = defaultTitle, error }) => {
-  return (
-    <EuiEmptyPrompt
-      iconType={'error'}
-      iconColor={'danger'}
-      title={<h2>{title}</h2>}
-      body={
-        <EuiCallOut color="danger">
-          <EuiFlexGroup justifyContent="spaceAround">
-            <EuiFlexItem>
-              <EuiText color="danger">{error.message}</EuiText>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-          <EuiSpacer size={'l'} />
-          <EuiCodeBlock language="bash" className="eui-textBreakAll" isCopyable>
-            {error.stack ? error.stack : ''}
-          </EuiCodeBlock>
-        </EuiCallOut>
-      }
-    />
-  );
-};

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<RedirectManager, 'error$'>;
   theme: ThemeServiceSetup;
-  customBranding: CustomBrandingStart;
 }
 
-export const Page: React.FC<PageProps> = ({ manager, theme, customBranding }) => {
+export const Page: React.FC<PageProps> = ({
+  manager,
+  homeHref,
+  customBranding,
+  docTitle,
+  theme,
+}) => {
   const error = useObservable(manager.error$);
   const hasCustomBranding = useObservable(customBranding.hasCustomBranding$);
 
@@ -30,7 +40,7 @@ export const Page: React.FC<PageProps> = ({ manager, theme, customBranding }) =>
     return (
       <KibanaThemeProvider theme={{ theme$: theme.theme$ }}>
         <EuiPageTemplate>
-          <Error error={error} />
+          <RedirectEmptyPrompt docTitle={docTitle} error={error} homeHref={homeHref} />
         </EuiPageTemplate>
       </KibanaThemeProvider>
     );

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();
         };

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/**/*",

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');
+      });
+    });
+  });
+}

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('.')],
+  };
+}

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'));
+  });
+}