From 7d9386c266328562ce2faf9b13f8f7c909f72ad1 Mon Sep 17 00:00:00 2001
From: Mike Salvatore <mike.s.salvatore@gmail.com>
Date: Mon, 27 Sep 2021 14:10:26 -0400
Subject: [PATCH] UI: Add ExternalLink React element

---
 .../report-components/common/ExternalLink.tsx | 19 +++++++++++++++++++
 .../styles/pages/report/RansomwareReport.scss |  4 ++++
 2 files changed, 23 insertions(+)
 create mode 100644 monkey/monkey_island/cc/ui/src/components/report-components/common/ExternalLink.tsx

diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/common/ExternalLink.tsx b/monkey/monkey_island/cc/ui/src/components/report-components/common/ExternalLink.tsx
new file mode 100644
index 000000000..14a724bb2
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/common/ExternalLink.tsx
@@ -0,0 +1,19 @@
+import React, {ReactFragment, ReactElement} from 'react';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faExternalLinkSquareAlt} from '@fortawesome/free-solid-svg-icons';
+
+type Props = {
+    url: string,
+    text: string,
+}
+
+function ExternalLink(props: Props): ReactElement {
+    return (
+        <a href={props.url} target="_blank" rel="noreferrer">
+          {props.text}
+          <FontAwesomeIcon icon={faExternalLinkSquareAlt} className="external-link-icon"/>
+        </a>
+    )
+}
+
+export default ExternalLink
diff --git a/monkey/monkey_island/cc/ui/src/styles/pages/report/RansomwareReport.scss b/monkey/monkey_island/cc/ui/src/styles/pages/report/RansomwareReport.scss
index 143e3f835..57eeed88d 100644
--- a/monkey/monkey_island/cc/ui/src/styles/pages/report/RansomwareReport.scss
+++ b/monkey/monkey_island/cc/ui/src/styles/pages/report/RansomwareReport.scss
@@ -22,3 +22,7 @@
 .ransomware-breach-section .ip-address {
   display: inline-block;
 }
+
+.numbered-report-section .external-link-icon {
+    margin-left: .25em;
+}