Update page for missing Short URL

.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/url_service/redirect/components/empty_prompt.tsx

@@ -0,0 +1,70 @@
+/*
+ * 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:
+    'The stored URL for this link could not be opened. This could be due to lost Kibana Saved Object data.',
+});
+
+export interface ErrorProps {
+  title?: string;
+  body?: string;
+  docTitle: ChromeDocTitle;
+  error: Error;
+}
+
+export const RedirectEmptyPrompt: React.FC<ErrorProps> = ({
+  title = defaultTitle,
+  body = defaultBody,
+  docTitle,
+  error,
+}) => {
+  // eslint-disable-next-line no-console
+  console.error('Short URL Redirect Error', error);
+
+  // Using the current URL containing "/app/r/", make a URL to the root basePath
+  // by trimming that part to end up at the Home app or project home.
+  const currentUrl = window.location.href;
+  const newUrl = currentUrl.replace(/\/app\/r\/.*/, '');
+
+  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={newUrl}
+          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/page.tsx

@@ -8,29 +8,32 @@
 
 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 {
+  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, customBranding, docTitle, theme }) => {
   const error = useObservable(manager.error$);
   const hasCustomBranding = useObservable(customBranding.hasCustomBranding$);
 
   if (error) {
     return (
       <KibanaThemeProvider theme={{ theme$: theme.theme$ }}>
         <EuiPageTemplate>
-          <Error error={error} />
+          <RedirectEmptyPrompt docTitle={docTitle} error={error} />
         </EuiPageTemplate>
       </KibanaThemeProvider>
     );

src/plugins/share/public/url_service/redirect/redirect_manager.ts

@@ -34,10 +34,13 @@ export class RedirectManager {
       chromeless: true,
       mount: async (params) => {
         const { render } = await import('./render');
+        const [coreStart] = await core.getStartServices();
+
         const unmount = render(params.element, {
           manager: this,
-          theme: core.theme,
           customBranding: core.customBranding,
+          docTitle: coreStart.chrome.docTitle,
+          theme: core.theme,
         });
         this.onMount(params.history.location);
         return () => {

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