## [Security Solution] Eliminates a redundant external link icon

- Fixes an issue where [a redundant external link icon](elastic#89084) was rendered next to port numbers

Per the [EuiLink documentation](https://elastic.github.io/eui/#/navigation/link), it's no longer necessary to render our own icon, because `EuiLink` will automatically display one when `target="_blank"` is passed as a prop to the link.

- Updates the existing link icon unit test such that it asserts a specific icon count to catch any regressions

### Before

<img width="1673" alt="before" src="https://user-images.githubusercontent.com/4459398/110530119-4cd0ac00-80d7-11eb-9d54-5d6656491e69.png">

### After

<img width="1677" alt="after" src="https://user-images.githubusercontent.com/4459398/110530165-5c4ff500-80d7-11eb-99a3-68741fab9218.png">

### Desk testing

Desk tested in:

- Chrome `89.0.4389.82`
- Firefox `86.0`
- Safari `14.0.3`

x-pack/plugins/security_solution/public/common/components/links/index.tsx

@@ -54,6 +54,13 @@ export const LinkAnchor: React.FC<EuiLinkProps> = ({ children, ...props }) => (
   <EuiLink {...props}>{children}</EuiLink>
 );
 
+export const PortContainer = styled.div`
+  & svg {
+    position: relative;
+    top: -1px;
+  }
+`;
+
 // Internal Links
 const HostDetailsLinkComponent: React.FC<{
   children?: React.ReactNode;
@@ -229,15 +236,17 @@ export const PortOrServiceNameLink = React.memo<{
   children?: React.ReactNode;
   portOrServiceName: number | string;
 }>(({ children, portOrServiceName }) => (
-  <EuiLink
-    data-test-subj="port-or-service-name-link"
-    href={`https://www.iana.org/assignments/service-names-port-numbers/service-names-port-numbers.xhtml?search=${encodeURIComponent(
-      String(portOrServiceName)
-    )}`}
-    target="_blank"
-  >
-    {children ? children : portOrServiceName}
-  </EuiLink>
+  <PortContainer>
+    <EuiLink
+      data-test-subj="port-or-service-name-link"
+      href={`https://www.iana.org/assignments/service-names-port-numbers/service-names-port-numbers.xhtml?search=${encodeURIComponent(
+        String(portOrServiceName)
+      )}`}
+      target="_blank"
+    >
+      {children ? children : portOrServiceName}
+    </EuiLink>
+  </PortContainer>
 ));
 
 PortOrServiceNameLink.displayName = 'PortOrServiceNameLink';

x-pack/plugins/security_solution/public/network/components/port/index.test.tsx

@@ -60,13 +60,13 @@ describe('Port', () => {
     );
   });
 
-  test('it renders an external link', () => {
+  test('it renders only one external link icon', () => {
     const wrapper = mount(
       <TestProviders>
         <Port contextId="test" eventId="abcd" fieldName="destination.port" value="443" />
       </TestProviders>
     );
 
-    expect(wrapper.find('[data-test-subj="external-link-icon"]').first().exists()).toBe(true);
+    expect(wrapper.find('span [data-euiicon-type="popout"]').length).toBe(1);
   });
 });

x-pack/plugins/security_solution/public/network/components/port/index.tsx

@@ -9,7 +9,6 @@ import React from 'react';
 
 import { DefaultDraggable } from '../../../common/components/draggables';
 import { getEmptyValue } from '../../../common/components/empty_value';
-import { ExternalLinkIcon } from '../../../common/components/external_link_icon';
 import { PortOrServiceNameLink } from '../../../common/components/links';
 
 export const CLIENT_PORT_FIELD_NAME = 'client.port';
@@ -40,7 +39,6 @@ export const Port = React.memo<{
     value={value}
   >
     <PortOrServiceNameLink portOrServiceName={value || getEmptyValue()} />
-    <ExternalLinkIcon />
   </DefaultDraggable>
 ));