add RedirectAppLinks component in kibana_react

src/core/public/application/types.ts

@@ -574,6 +574,12 @@ export type Mounter<T = App | LegacyApp> = SelectivePartial<
   T extends LegacyApp ? never : 'unmountBeforeMounting'
 >;
 
+/** @internal */
+export interface ParsedAppUrl {
+  app: string;
+  path?: string;
+}
+
 /** @public */
 export interface ApplicationSetup {
   /**

src/core/public/application/utils.ts

@@ -18,12 +18,7 @@
  */
 
 import { IBasePath } from '../http';
-import { App, LegacyApp, PublicAppInfo, PublicLegacyAppInfo } from './types';
-
-export interface AppUrlInfo {
-  app: string;
-  path?: string;
-}
+import { App, LegacyApp, PublicAppInfo, PublicLegacyAppInfo, ParsedAppUrl } from './types';
 
 /**
  * Utility to remove trailing, leading or duplicate slashes.
@@ -94,7 +89,7 @@ export const parseAppUrl = (
   basePath: IBasePath,
   apps: Map<string, App<unknown> | LegacyApp>,
   getOrigin: () => string = () => window.location.origin
-): AppUrlInfo | undefined => {
+): ParsedAppUrl | undefined => {
   url = removeBasePath(url, basePath, getOrigin());
   if (!url.startsWith('/')) {
     return undefined;

src/plugins/kibana_react/public/app_links/click_handler.test.ts

@@ -0,0 +1,222 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { MouseEvent } from 'react';
+import { ApplicationStart } from 'src/core/public';
+import { createNavigateToUrlClickHandler } from './click_handler';
+
+const createLink = ({
+  href = '/base-path/app/targetApp',
+  target = '',
+}: { href?: string; target?: string } = {}): HTMLAnchorElement => {
+  const el = document.createElement('a');
+  if (href) {
+    el.href = href;
+  }
+  el.target = target;
+  return el;
+};
+
+const createEvent = ({
+  target = createLink(),
+  button = 0,
+  defaultPrevented = false,
+  modifierKey = false,
+}: {
+  target?: HTMLElement;
+  button?: number;
+  defaultPrevented?: boolean;
+  modifierKey?: boolean;
+}): MouseEvent<HTMLElement> => {
+  return ({
+    target,
+    button,
+    defaultPrevented,
+    ctrlKey: modifierKey,
+    preventDefault: jest.fn(),
+  } as unknown) as MouseEvent<HTMLElement>;
+};
+
+describe('createNavigateToUrlClickHandler', () => {
+  let container: HTMLElement;
+  let navigateToUrl: jest.MockedFunction<ApplicationStart['navigateToUrl']>;
+
+  const createHandler = () =>
+    createNavigateToUrlClickHandler({
+      container,
+      navigateToUrl,
+    });
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    navigateToUrl = jest.fn();
+  });
+
+  it('calls `navigateToUrl` with the link url', () => {
+    const handler = createHandler();
+
+    const event = createEvent({
+      target: createLink({ href: '/base-path/app/targetApp' }),
+    });
+    handler(event);
+
+    expect(event.preventDefault).toHaveBeenCalledTimes(1);
+    expect(navigateToUrl).toHaveBeenCalledWith('http://localhost/base-path/app/targetApp');
+  });
+
+  it('is triggered if a non-link target has a parent link', () => {
+    const handler = createHandler();
+
+    const link = createLink();
+    const target = document.createElement('span');
+    link.appendChild(target);
+
+    const event = createEvent({ target });
+    handler(event);
+
+    expect(event.preventDefault).toHaveBeenCalledTimes(1);
+    expect(navigateToUrl).toHaveBeenCalledWith('http://localhost/base-path/app/targetApp');
+  });
+
+  it('is not triggered if a non-link target has no parent link', () => {
+    const handler = createHandler();
+
+    const parent = document.createElement('div');
+    const target = document.createElement('span');
+    parent.appendChild(target);
+
+    const event = createEvent({ target });
+    handler(event);
+
+    expect(event.preventDefault).not.toHaveBeenCalled();
+    expect(navigateToUrl).not.toHaveBeenCalled();
+  });
+
+  it('is not triggered when the link has no href', () => {
+    const handler = createHandler();
+
+    const event = createEvent({
+      target: createLink({ href: '' }),
+    });
+    handler(event);
+
+    expect(event.preventDefault).not.toHaveBeenCalled();
+    expect(navigateToUrl).not.toHaveBeenCalled();
+  });
+
+  it('is only triggered when the link does not have an external target', () => {
+    const handler = createHandler();
+
+    let event = createEvent({
+      target: createLink({ target: '_blank' }),
+    });
+    handler(event);
+
+    expect(event.preventDefault).not.toHaveBeenCalled();
+    expect(navigateToUrl).not.toHaveBeenCalled();
+
+    event = createEvent({
+      target: createLink({ target: 'some-target' }),
+    });
+    handler(event);
+
+    expect(event.preventDefault).not.toHaveBeenCalled();
+    expect(navigateToUrl).not.toHaveBeenCalled();
+
+    event = createEvent({
+      target: createLink({ target: '_self' }),
+    });
+    handler(event);
+
+    expect(event.preventDefault).toHaveBeenCalledTimes(1);
+    expect(navigateToUrl).toHaveBeenCalledTimes(1);
+
+    event = createEvent({
+      target: createLink({ target: '' }),
+    });
+    handler(event);
+
+    expect(event.preventDefault).toHaveBeenCalledTimes(1);
+    expect(navigateToUrl).toHaveBeenCalledTimes(2);
+  });
+
+  it('is only triggered from left clicks', () => {
+    const handler = createHandler();
+
+    let event = createEvent({
+      button: 1,
+    });
+    handler(event);
+
+    expect(event.preventDefault).not.toHaveBeenCalled();
+    expect(navigateToUrl).not.toHaveBeenCalled();
+
+    event = createEvent({
+      button: 12,
+    });
+    handler(event);
+
+    expect(event.preventDefault).not.toHaveBeenCalled();
+    expect(navigateToUrl).not.toHaveBeenCalled();
+
+    event = createEvent({
+      button: 0,
+    });
+    handler(event);
+
+    expect(event.preventDefault).toHaveBeenCalledTimes(1);
+    expect(navigateToUrl).toHaveBeenCalledTimes(1);
+  });
+
+  it('is not triggered if the event default is prevented', () => {
+    const handler = createHandler();
+
+    let event = createEvent({
+      defaultPrevented: true,
+    });
+    handler(event);
+
+    expect(event.preventDefault).not.toHaveBeenCalled();
+    expect(navigateToUrl).not.toHaveBeenCalled();
+
+    event = createEvent({
+      defaultPrevented: false,
+    });
+    handler(event);
+
+    expect(event.preventDefault).toHaveBeenCalledTimes(1);
+    expect(navigateToUrl).toHaveBeenCalledTimes(1);
+  });
+
+  it('is not triggered if any modifier key is pressed', () => {
+    const handler = createHandler();
+
+    let event = createEvent({ modifierKey: true });
+    handler(event);
+
+    expect(event.preventDefault).not.toHaveBeenCalled();
+    expect(navigateToUrl).not.toHaveBeenCalled();
+
+    event = createEvent({ modifierKey: false });
+    handler(event);
+
+    expect(event.preventDefault).toHaveBeenCalledTimes(1);
+    expect(navigateToUrl).toHaveBeenCalledTimes(1);
+  });
+});

src/plugins/kibana_react/public/app_links/click_handler.ts

@@ -0,0 +1,56 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { ApplicationStart } from 'src/core/public';
+import { getClosestLink, hasActiveModifierKey } from './utils';
+
+interface CreateCrossAppClickHandlerOptions {
+  container: HTMLElement;
+  navigateToUrl: ApplicationStart['navigateToUrl'];
+}
+
+export const createNavigateToUrlClickHandler = ({
+  container,
+  navigateToUrl,
+}: CreateCrossAppClickHandlerOptions): React.MouseEventHandler<HTMLElement> => {
+  return (e) => {
+    if (container == null) {
+      return;
+    }
+    // see https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239
+    const target = e.target as HTMLElement;
+
+    const link = getClosestLink(target, container);
+    if (!link) {
+      return;
+    }
+
+    if (
+      link.href && // ignore links with empty hrefs
+      (link.target === '' || link.target === '_self') && // ignore links having a target
+      e.button === 0 && // ignore everything but left clicks
+      !e.defaultPrevented && // ignore default prevented events
+      !hasActiveModifierKey(e) // ignore clicks with modifier keys
+    ) {
+      e.preventDefault();
+      navigateToUrl(link.href);
+    }
+  };
+};

src/plugins/kibana_react/public/app_links/index.ts

@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { RedirectAppLinks } from './redirect_app_link';