[Dashboard navigation] Adds popout icon to links that open in new tab

src/plugins/navigation_embeddable/public/components/dashboard_link/dashboard_link_component.tsx

@@ -110,30 +110,46 @@ export const DashboardLinkComponent = ({
     if (!locator) return;
 
     const href = getDashboardHref(locator);
-    return {
-      href,
-      onClick: async (event: React.MouseEvent) => {
-        /**
-         * If the link is being opened via a modified click, then we should use the default `href` navigation behaviour
-         * by passing all the dashboard state via the URL - this will keep behaviour consistent across all browsers.
-         */
-        const modifiedClick = event.ctrlKey || event.metaKey || event.shiftKey;
-        if (modifiedClick) {
-          return;
-        }
+    const onClick = async (event: React.MouseEvent) => {
+      /**
+       * If the link is being opened via a modified click, then we should use the default `href` navigation behaviour
+       * by passing all the dashboard state via the URL - this will keep behaviour consistent across all browsers.
+       */
+      const modifiedClick = event.ctrlKey || event.metaKey || event.shiftKey;
+      if (modifiedClick) {
+        return;
+      }
 
-        /** Otherwise, prevent the default behaviour and handle click depending on `openInNewTab` option */
-        event.preventDefault();
-        if (linkOptions.openInNewTab) {
-          window.open(href, '_blank');
-        } else {
-          const { app, path, state } = locator;
-          await coreServices.application.navigateToApp(app, {
-            path,
-            state,
-          });
+      /** Otherwise, prevent the default behaviour and handle click depending on `openInNewTab` option */
+      event.preventDefault();
+      if (linkOptions.openInNewTab) {
+        window.open(href, '_blank');
+      } else {
+        const { app, path, state } = locator;
+        await coreServices.application.navigateToApp(app, {
+          path,
+          state,
+        });
+      }
+    };
+
+    // TODO External link icon will not appear until
+    // https://github.com/elastic/eui/pull/7159 is available in Kibana
+    const extraAction = linkOptions.openInNewTab
+      ? {
+          alwaysShow: true,
+          iconSize: 's' as const,
+          iconType: 'popout',
+          onClick,
+          'aria-label': linkLabel,
         }
-      },
+      : undefined;
+
+    return {
+      extraAction,
+      href,
+      target: linkOptions.openInNewTab ? '_blank' : '',
+      onClick,
     };
   }, [link]);
 

src/plugins/navigation_embeddable/public/components/external_link/external_link_component.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import {
   UrlDrilldownOptions,
@@ -51,6 +51,24 @@ export const ExternalLinkComponent = ({
       : link.destination;
   }, [linkOptions, link.destination]);
 
+  const onClick = useCallback(
+    async (event: React.MouseEvent) => {
+      if (!destination) return;
+
+      /** Only use `navigateToUrl` if we **aren't** opening in a new window/tab; otherwise, just use default href handling */
+      const modifiedClick = event.ctrlKey || event.metaKey || event.shiftKey;
+      if (!modifiedClick) {
+        event.preventDefault();
+        if (linkOptions.openInNewTab) {
+          window.open(destination, '_blank');
+        } else {
+          await coreServices.application.navigateToUrl(destination);
+        }
+      }
+    },
+    [destination, linkOptions.openInNewTab]
+  );
+
   return (
     <EuiListGroupItem
       size="s"
@@ -70,20 +88,19 @@ export const ExternalLinkComponent = ({
       label={link.label || link.destination}
       data-test-subj={error ? `externalLink--${link.id}--error` : `externalLink--${link.id}`}
       href={destination}
-      onClick={async (event) => {
-        if (!destination) return;
-
-        /** Only use `navigateToUrl` if we **aren't** opening in a new window/tab; otherwise, just use default href handling */
-        const modifiedClick = event.ctrlKey || event.metaKey || event.shiftKey;
-        if (!modifiedClick) {
-          event.preventDefault();
-          if (linkOptions.openInNewTab) {
-            window.open(destination, '_blank');
-          } else {
-            await coreServices.application.navigateToUrl(destination);
-          }
-        }
-      }}
+      target={linkOptions.openInNewTab ? '_blank' : ''}
+      extraAction={
+        linkOptions.openInNewTab
+          ? {
+              alwaysShow: true,
+              iconSize: 's',
+              iconType: 'popout',
+              onClick,
+              'aria-label': link.label,
+            }
+          : undefined
+      }
+      onClick={onClick}
     />
   );
 };