From 08aef9b1899a33ee61538de7256fbdf76583403a Mon Sep 17 00:00:00 2001
From: Marcos Iglesias <miglesiasvalle@lyft.com>
Date: Thu, 27 Aug 2020 17:53:25 -0700
Subject: [PATCH 1/5] Alert component, unstyled

Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>
---
 .../components/common/Alert/alert.story.tsx   | 30 ++++++++
 .../js/components/common/Alert/index.spec.tsx | 76 +++++++++++++++++++
 .../js/components/common/Alert/index.tsx      | 36 +++++++++
 .../js/components/common/Alert/styles.scss    | 36 +++++++++
 4 files changed, 178 insertions(+)
 create mode 100644 amundsen_application/static/js/components/common/Alert/alert.story.tsx
 create mode 100644 amundsen_application/static/js/components/common/Alert/index.spec.tsx
 create mode 100644 amundsen_application/static/js/components/common/Alert/index.tsx
 create mode 100644 amundsen_application/static/js/components/common/Alert/styles.scss

diff --git a/amundsen_application/static/js/components/common/Alert/alert.story.tsx b/amundsen_application/static/js/components/common/Alert/alert.story.tsx
new file mode 100644
index 000000000..d5448a3f2
--- /dev/null
+++ b/amundsen_application/static/js/components/common/Alert/alert.story.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { ImageIconType } from 'interfaces/Enums';
+import StorySection from '../StorySection';
+import Alert from '.';
+
+const stories = storiesOf('Components/Alert', module);
+
+stories.add('Alert', () => (
+  <>
+    <StorySection title="Alert">
+      <Alert
+        message="Alert text that can be short"
+        onAction={() => {
+          alert('message closed!');
+        }}
+      />
+    </StorySection>
+    <StorySection title="Alert with Action">
+      <Alert
+        message="Alert text that can be short"
+        actionText="Action Text"
+        onAction={() => {
+          alert('message closed!');
+        }}
+      />
+    </StorySection>
+  </>
+));
diff --git a/amundsen_application/static/js/components/common/Alert/index.spec.tsx b/amundsen_application/static/js/components/common/Alert/index.spec.tsx
new file mode 100644
index 000000000..3a9210e22
--- /dev/null
+++ b/amundsen_application/static/js/components/common/Alert/index.spec.tsx
@@ -0,0 +1,76 @@
+// Copyright Contributors to the Amundsen project.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from 'react';
+import { mount } from 'enzyme';
+
+import { ImageIconType } from 'interfaces/Enums';
+import Alert, { AlertProps } from '.';
+
+const setup = (propOverrides?: Partial<AlertProps>) => {
+  const props: AlertProps = {
+    message: 'Test Message',
+    onAction: jest.fn(),
+    ...propOverrides,
+  };
+  const wrapper = mount(<Alert {...props} />);
+
+  return { props, wrapper };
+};
+
+describe('Alert', () => {
+  describe('render', () => {
+    it('should render an alert icon', () => {
+      const { wrapper } = setup();
+      const expected = 1;
+      const actual = wrapper.find(`.${ImageIconType.ALERT}`).length;
+
+      expect(actual).toEqual(expected);
+    });
+
+    it('should render the alert message text', () => {
+      const { props, wrapper } = setup();
+      const expected = props.message;
+      const actual = wrapper.find('.alert-message').text();
+
+      expect(actual).toEqual(expected);
+    });
+
+    describe('when passing an action text and action handler', () => {
+      it('should render the action button', () => {
+        const { wrapper } = setup({ actionText: 'Action Text' });
+        const expected = 1;
+        const actual = wrapper.find('.btn-link').length;
+
+        expect(actual).toEqual(expected);
+      });
+
+      it('should render the action text', () => {
+        const { props, wrapper } = setup({ actionText: 'Action Text' });
+        const expected = props.actionText;
+        const actual = wrapper.find('.btn-link').text();
+
+        expect(actual).toEqual(expected);
+      });
+    });
+  });
+
+  describe('lifetime', () => {
+    describe('when clicking on the action button', () => {
+      it('should call the handler', () => {
+        const handlerSpy = jest.fn();
+        const { wrapper } = setup({
+          actionText: 'Action Text',
+          onAction: handlerSpy,
+        });
+        const expected = 1;
+
+        wrapper.find('button.btn-link').simulate('click');
+
+        const actual = handlerSpy.mock.calls.length;
+
+        expect(actual).toEqual(expected);
+      });
+    });
+  });
+});
diff --git a/amundsen_application/static/js/components/common/Alert/index.tsx b/amundsen_application/static/js/components/common/Alert/index.tsx
new file mode 100644
index 000000000..39908a4f5
--- /dev/null
+++ b/amundsen_application/static/js/components/common/Alert/index.tsx
@@ -0,0 +1,36 @@
+// Copyright Contributors to the Amundsen project.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from 'react';
+
+import { ImageIconType } from 'interfaces/Enums';
+
+import './styles.scss';
+
+export interface AlertProps {
+  message: string;
+  actionText?: string;
+  onAction: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+const Alert: React.FC<AlertProps> = ({
+  message,
+  onAction,
+  actionText,
+}: AlertProps) => {
+  return (
+    <div className="alert">
+      <div>
+        <img className={`icon ${ImageIconType.ALERT}`} alt="" />
+        <p className="alert-message">{message}</p>
+      </div>
+      {actionText && onAction && (
+        <button type="button" className="btn btn-link" onClick={onAction}>
+          {actionText}
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default Alert;
diff --git a/amundsen_application/static/js/components/common/Alert/styles.scss b/amundsen_application/static/js/components/common/Alert/styles.scss
new file mode 100644
index 000000000..1ef864cd8
--- /dev/null
+++ b/amundsen_application/static/js/components/common/Alert/styles.scss
@@ -0,0 +1,36 @@
+// Copyright Contributors to the Amundsen project.
+// SPDX-License-Identifier: Apache-2.0
+
+@import 'variables';
+@import 'typography';
+
+$alert-height: 56px;
+$alert-border-radius: 4px;
+$alert-message-line-height: 24px;
+
+.alert {
+  background-color: $body-bg-dark;
+  border-radius: $alert-border-radius;
+  color: $white;
+  display: flex;
+  height: $alert-height;
+  padding: $spacer-2;
+  padding-right: $spacer-1 * 1.5;
+  justify-content: space-between;
+
+  .message {
+    @extend %text-body-w3;
+
+    line-height: $alert-message-line-height;
+    margin: 0;
+    display: inline;
+  }
+
+  .icon {
+    margin: 0 $spacer-1 0 0;
+  }
+
+  .btn-close {
+    margin: auto 0 auto $spacer-3;
+  }
+}

From 9c6b70633b872f78a0c0cd351b7e8c86f8b48f8c Mon Sep 17 00:00:00 2001
From: Marcos Iglesias <miglesiasvalle@lyft.com>
Date: Fri, 28 Aug 2020 09:19:44 -0700
Subject: [PATCH 2/5] Using SVG icon and styling

Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>
---
 .../js/components/common/Alert/AlertIcon.tsx  | 24 +++++++++++++++++
 .../components/common/Alert/alert.story.tsx   | 26 ++++++++++++++++---
 .../js/components/common/Alert/index.spec.tsx |  3 +--
 .../js/components/common/Alert/index.tsx      |  8 +++---
 .../js/components/common/Alert/styles.scss    | 21 +++++++--------
 .../components/common/StorySection/index.tsx  |  4 +--
 6 files changed, 63 insertions(+), 23 deletions(-)
 create mode 100644 amundsen_application/static/js/components/common/Alert/AlertIcon.tsx

diff --git a/amundsen_application/static/js/components/common/Alert/AlertIcon.tsx b/amundsen_application/static/js/components/common/Alert/AlertIcon.tsx
new file mode 100644
index 000000000..e30d07b90
--- /dev/null
+++ b/amundsen_application/static/js/components/common/Alert/AlertIcon.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+const STROKE_COLOR = '#b8072c'; // $red70
+const SIZE = 16;
+
+const AlertIcon: React.FC = () => {
+  return (
+    <svg
+      width={SIZE}
+      height={SIZE}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={STROKE_COLOR}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="alert-triangle-svg-icon"
+    >
+      <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0zM12 9v4M12 17h0" />
+    </svg>
+  );
+};
+
+export default AlertIcon;
diff --git a/amundsen_application/static/js/components/common/Alert/alert.story.tsx b/amundsen_application/static/js/components/common/Alert/alert.story.tsx
index d5448a3f2..450017f3d 100644
--- a/amundsen_application/static/js/components/common/Alert/alert.story.tsx
+++ b/amundsen_application/static/js/components/common/Alert/alert.story.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 
-import { ImageIconType } from 'interfaces/Enums';
 import StorySection from '../StorySection';
 import Alert from '.';
 
@@ -13,17 +12,38 @@ stories.add('Alert', () => (
       <Alert
         message="Alert text that can be short"
         onAction={() => {
-          alert('message closed!');
+          alert('action executed!');
         }}
       />
     </StorySection>
+    <StorySection title="Alert with text link">
+      <Alert
+        message={
+          <span>
+            Alert text that has a <a href="https://lyft.com">link</a>
+          </span>
+        }
+      />
+    </StorySection>
     <StorySection title="Alert with Action">
       <Alert
         message="Alert text that can be short"
         actionText="Action Text"
         onAction={() => {
-          alert('message closed!');
+          alert('action executed!');
+        }}
+      />
+    </StorySection>
+    <StorySection title="Alert with long text">
+      <Alert message="Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam perspiciatis non ipsa officia expedita magnam mollitia, excepturi iste eveniet qui nisi eum illum, quas voluptas, reprehenderit quam molestias cum quisquam!" />
+    </StorySection>
+    <StorySection title="Alert with long text and action">
+      <Alert
+        actionText="Action Text"
+        onAction={() => {
+          alert('action executed!');
         }}
+        message="Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam perspiciatis non ipsa officia expedita magnam mollitia, excepturi iste eveniet qui nisi eum illum, quas voluptas, reprehenderit quam molestias cum quisquam!"
       />
     </StorySection>
   </>
diff --git a/amundsen_application/static/js/components/common/Alert/index.spec.tsx b/amundsen_application/static/js/components/common/Alert/index.spec.tsx
index 3a9210e22..7ab8375b9 100644
--- a/amundsen_application/static/js/components/common/Alert/index.spec.tsx
+++ b/amundsen_application/static/js/components/common/Alert/index.spec.tsx
@@ -4,7 +4,6 @@
 import * as React from 'react';
 import { mount } from 'enzyme';
 
-import { ImageIconType } from 'interfaces/Enums';
 import Alert, { AlertProps } from '.';
 
 const setup = (propOverrides?: Partial<AlertProps>) => {
@@ -23,7 +22,7 @@ describe('Alert', () => {
     it('should render an alert icon', () => {
       const { wrapper } = setup();
       const expected = 1;
-      const actual = wrapper.find(`.${ImageIconType.ALERT}`).length;
+      const actual = wrapper.find('.alert-triangle-svg-icon').length;
 
       expect(actual).toEqual(expected);
     });
diff --git a/amundsen_application/static/js/components/common/Alert/index.tsx b/amundsen_application/static/js/components/common/Alert/index.tsx
index 39908a4f5..3811abae1 100644
--- a/amundsen_application/static/js/components/common/Alert/index.tsx
+++ b/amundsen_application/static/js/components/common/Alert/index.tsx
@@ -3,14 +3,14 @@
 
 import * as React from 'react';
 
-import { ImageIconType } from 'interfaces/Enums';
+import AlertIcon from './AlertIcon';
 
 import './styles.scss';
 
 export interface AlertProps {
-  message: string;
+  message: string | React.ReactNode;
   actionText?: string;
-  onAction: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onAction?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 const Alert: React.FC<AlertProps> = ({
@@ -21,7 +21,7 @@ const Alert: React.FC<AlertProps> = ({
   return (
     <div className="alert">
       <div>
-        <img className={`icon ${ImageIconType.ALERT}`} alt="" />
+        <AlertIcon />
         <p className="alert-message">{message}</p>
       </div>
       {actionText && onAction && (
diff --git a/amundsen_application/static/js/components/common/Alert/styles.scss b/amundsen_application/static/js/components/common/Alert/styles.scss
index 1ef864cd8..32b3395fb 100644
--- a/amundsen_application/static/js/components/common/Alert/styles.scss
+++ b/amundsen_application/static/js/components/common/Alert/styles.scss
@@ -4,33 +4,30 @@
 @import 'variables';
 @import 'typography';
 
-$alert-height: 56px;
 $alert-border-radius: 4px;
 $alert-message-line-height: 24px;
 
 .alert {
-  background-color: $body-bg-dark;
+  background-color: $body-bg;
   border-radius: $alert-border-radius;
-  color: $white;
   display: flex;
-  height: $alert-height;
-  padding: $spacer-2;
-  padding-right: $spacer-1 * 1.5;
+  padding: $spacer-1 $spacer-1 * 1.5 $spacer-1 $spacer-2;
   justify-content: space-between;
+  box-shadow: $elevation-level2;
 
-  .message {
-    @extend %text-body-w3;
+  .alert-message {
+    @extend %text-body-w2;
 
-    line-height: $alert-message-line-height;
+    // line-height: $alert-message-line-height;
     margin: 0;
     display: inline;
   }
 
-  .icon {
-    margin: 0 $spacer-1 0 0;
+  .alert-triangle-svg-icon {
+    margin: 0 $spacer-1 -2px 0;
   }
 
-  .btn-close {
+  .btn-link {
     margin: auto 0 auto $spacer-3;
   }
 }
diff --git a/amundsen_application/static/js/components/common/StorySection/index.tsx b/amundsen_application/static/js/components/common/StorySection/index.tsx
index 516445dbf..430a99694 100644
--- a/amundsen_application/static/js/components/common/StorySection/index.tsx
+++ b/amundsen_application/static/js/components/common/StorySection/index.tsx
@@ -11,10 +11,10 @@ const StorySection: React.FC<BlockProps> = ({
   text,
   title,
 }: BlockProps) => (
-  <div style={{ padding: '2em', maxWidth: 600 }}>
+  <div style={{ padding: '2em 2em 1em', maxWidth: 600 }}>
     <h1 className="text-headline-w1">{title}</h1>
     {text && <p className="text-body-w1">{text}</p>}
-    {children}
+    <div style={{ paddingTop: '1em' }}>{children}</div>
   </div>
 );
 

From 156317e55f8de8e834e66b2c86196f651499caf1 Mon Sep 17 00:00:00 2001
From: Marcos Iglesias <miglesiasvalle@lyft.com>
Date: Fri, 28 Aug 2020 12:12:51 -0700
Subject: [PATCH 3/5] Knowl adjustments Supporting an action link

Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>
---
 .../js/components/common/Alert/index.spec.tsx | 24 +++++++++++++++++++
 .../js/components/common/Alert/index.tsx      | 13 ++++++----
 .../js/components/common/Alert/styles.scss    |  8 ++++---
 3 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/amundsen_application/static/js/components/common/Alert/index.spec.tsx b/amundsen_application/static/js/components/common/Alert/index.spec.tsx
index 7ab8375b9..49db16160 100644
--- a/amundsen_application/static/js/components/common/Alert/index.spec.tsx
+++ b/amundsen_application/static/js/components/common/Alert/index.spec.tsx
@@ -52,6 +52,30 @@ describe('Alert', () => {
         expect(actual).toEqual(expected);
       });
     });
+
+    describe('when passing an action text and action href', () => {
+      it('should render the action link', () => {
+        const { wrapper } = setup({
+          actionHref: 'http://testSite.com',
+          actionText: 'Action Text',
+        });
+        const expected = 1;
+        const actual = wrapper.find('.action-link').length;
+
+        expect(actual).toEqual(expected);
+      });
+
+      it('should render the action text', () => {
+        const { props, wrapper } = setup({
+          actionHref: 'http://testSite.com',
+          actionText: 'Action Text',
+        });
+        const expected = props.actionText;
+        const actual = wrapper.find('.action-link').text();
+
+        expect(actual).toEqual(expected);
+      });
+    });
   });
 
   describe('lifetime', () => {
diff --git a/amundsen_application/static/js/components/common/Alert/index.tsx b/amundsen_application/static/js/components/common/Alert/index.tsx
index 3811abae1..12a708cbf 100644
--- a/amundsen_application/static/js/components/common/Alert/index.tsx
+++ b/amundsen_application/static/js/components/common/Alert/index.tsx
@@ -10,6 +10,7 @@ import './styles.scss';
 export interface AlertProps {
   message: string | React.ReactNode;
   actionText?: string;
+  actionHref?: string;
   onAction?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
@@ -17,18 +18,22 @@ const Alert: React.FC<AlertProps> = ({
   message,
   onAction,
   actionText,
+  actionHref,
 }: AlertProps) => {
   return (
     <div className="alert">
-      <div>
-        <AlertIcon />
-        <p className="alert-message">{message}</p>
-      </div>
+      <AlertIcon />
+      <p className="alert-message">{message}</p>
       {actionText && onAction && (
         <button type="button" className="btn btn-link" onClick={onAction}>
           {actionText}
         </button>
       )}
+      {actionText && actionHref && (
+        <a className="action-link" href={actionHref}>
+          {actionText}
+        </a>
+      )}
     </div>
   );
 };
diff --git a/amundsen_application/static/js/components/common/Alert/styles.scss b/amundsen_application/static/js/components/common/Alert/styles.scss
index 32b3395fb..9853c4cb5 100644
--- a/amundsen_application/static/js/components/common/Alert/styles.scss
+++ b/amundsen_application/static/js/components/common/Alert/styles.scss
@@ -12,7 +12,7 @@ $alert-message-line-height: 24px;
   border-radius: $alert-border-radius;
   display: flex;
   padding: $spacer-1 $spacer-1 * 1.5 $spacer-1 $spacer-2;
-  justify-content: space-between;
+  justify-content: flex-start;
   box-shadow: $elevation-level2;
 
   .alert-message {
@@ -24,10 +24,12 @@ $alert-message-line-height: 24px;
   }
 
   .alert-triangle-svg-icon {
-    margin: 0 $spacer-1 -2px 0;
+    flex-shrink: 0;
+    align-self: center;
+    margin-right: $spacer-1;
   }
 
   .btn-link {
-    margin: auto 0 auto $spacer-3;
+    margin: auto 0 auto auto;
   }
 }

From 0a0fe32e8fb0ff631e2103f59cf66c858a678cd3 Mon Sep 17 00:00:00 2001
From: Marcos Iglesias <miglesiasvalle@lyft.com>
Date: Fri, 28 Aug 2020 14:13:46 -0700
Subject: [PATCH 4/5] Extracts SVGIcons, adds story, adds link and custom
 action element to Alert

Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>
---
 .../components/common/Alert/alert.story.tsx   | 19 ++++++++-
 .../js/components/common/Alert/index.spec.tsx | 16 ++++++++
 .../js/components/common/Alert/index.tsx      | 39 ++++++++++++++-----
 .../js/components/common/Alert/styles.scss    |  3 +-
 .../common/{Alert => SVGIcons}/AlertIcon.tsx  | 23 +++++++----
 .../js/components/common/SVGIcons/index.tsx   |  6 +++
 .../common/SVGIcons/svgIcons.story.tsx        | 15 +++++++
 7 files changed, 101 insertions(+), 20 deletions(-)
 rename amundsen_application/static/js/components/common/{Alert => SVGIcons}/AlertIcon.tsx (52%)
 create mode 100644 amundsen_application/static/js/components/common/SVGIcons/index.tsx
 create mode 100644 amundsen_application/static/js/components/common/SVGIcons/svgIcons.story.tsx

diff --git a/amundsen_application/static/js/components/common/Alert/alert.story.tsx b/amundsen_application/static/js/components/common/Alert/alert.story.tsx
index 450017f3d..f47d64cb2 100644
--- a/amundsen_application/static/js/components/common/Alert/alert.story.tsx
+++ b/amundsen_application/static/js/components/common/Alert/alert.story.tsx
@@ -25,7 +25,7 @@ stories.add('Alert', () => (
         }
       />
     </StorySection>
-    <StorySection title="Alert with Action">
+    <StorySection title="Alert with Action as button">
       <Alert
         message="Alert text that can be short"
         actionText="Action Text"
@@ -34,6 +34,23 @@ stories.add('Alert', () => (
         }}
       />
     </StorySection>
+    <StorySection title="Alert with Action as link">
+      <Alert
+        message="Alert text that can be short"
+        actionText="Action Text"
+        actionHref="http://www.lyft.com"
+      />
+    </StorySection>
+    <StorySection title="Alert with Action as custom link">
+      <Alert
+        message="Alert text that can be short"
+        actionLink={
+          <a className="test-action-link" href="http://testSite.com">
+            Custom Link
+          </a>
+        }
+      />
+    </StorySection>
     <StorySection title="Alert with long text">
       <Alert message="Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam perspiciatis non ipsa officia expedita magnam mollitia, excepturi iste eveniet qui nisi eum illum, quas voluptas, reprehenderit quam molestias cum quisquam!" />
     </StorySection>
diff --git a/amundsen_application/static/js/components/common/Alert/index.spec.tsx b/amundsen_application/static/js/components/common/Alert/index.spec.tsx
index 49db16160..1c3e84ed6 100644
--- a/amundsen_application/static/js/components/common/Alert/index.spec.tsx
+++ b/amundsen_application/static/js/components/common/Alert/index.spec.tsx
@@ -76,6 +76,22 @@ describe('Alert', () => {
         expect(actual).toEqual(expected);
       });
     });
+
+    describe('when passing a custom action link', () => {
+      it('should render the custom action link', () => {
+        const { wrapper } = setup({
+          actionLink: (
+            <a className="test-action-link" href="http://testSite.com">
+              Custom Link
+            </a>
+          ),
+        });
+        const expected = 1;
+        const actual = wrapper.find('.test-action-link').length;
+
+        expect(actual).toEqual(expected);
+      });
+    });
   });
 
   describe('lifetime', () => {
diff --git a/amundsen_application/static/js/components/common/Alert/index.tsx b/amundsen_application/static/js/components/common/Alert/index.tsx
index 12a708cbf..a8b92e199 100644
--- a/amundsen_application/static/js/components/common/Alert/index.tsx
+++ b/amundsen_application/static/js/components/common/Alert/index.tsx
@@ -3,12 +3,15 @@
 
 import * as React from 'react';
 
-import AlertIcon from './AlertIcon';
+import { AlertIcon, IconSizes } from '../SVGIcons';
 
 import './styles.scss';
 
+const STROKE_COLOR = '#b8072c'; // $red70
+
 export interface AlertProps {
   message: string | React.ReactNode;
+  actionLink?: React.ReactNode;
   actionText?: string;
   actionHref?: string;
   onAction?: (event: React.MouseEvent<HTMLButtonElement>) => void;
@@ -19,21 +22,39 @@ const Alert: React.FC<AlertProps> = ({
   onAction,
   actionText,
   actionHref,
+  actionLink,
 }: AlertProps) => {
-  return (
-    <div className="alert">
-      <AlertIcon />
-      <p className="alert-message">{message}</p>
-      {actionText && onAction && (
+  let action = null;
+
+  if (actionText && onAction) {
+    action = (
+      <span className="alert-action">
         <button type="button" className="btn btn-link" onClick={onAction}>
           {actionText}
         </button>
-      )}
-      {actionText && actionHref && (
+      </span>
+    );
+  }
+
+  if (actionText && actionHref) {
+    action = (
+      <span className="alert-action">
         <a className="action-link" href={actionHref}>
           {actionText}
         </a>
-      )}
+      </span>
+    );
+  }
+
+  if (actionLink) {
+    action = <span className="alert-action">{actionLink}</span>;
+  }
+
+  return (
+    <div className="alert">
+      <AlertIcon stroke={STROKE_COLOR} size={IconSizes.SMALL} />
+      <p className="alert-message">{message}</p>
+      {action}
     </div>
   );
 };
diff --git a/amundsen_application/static/js/components/common/Alert/styles.scss b/amundsen_application/static/js/components/common/Alert/styles.scss
index 9853c4cb5..9e9b4b739 100644
--- a/amundsen_application/static/js/components/common/Alert/styles.scss
+++ b/amundsen_application/static/js/components/common/Alert/styles.scss
@@ -18,7 +18,6 @@ $alert-message-line-height: 24px;
   .alert-message {
     @extend %text-body-w2;
 
-    // line-height: $alert-message-line-height;
     margin: 0;
     display: inline;
   }
@@ -29,7 +28,7 @@ $alert-message-line-height: 24px;
     margin-right: $spacer-1;
   }
 
-  .btn-link {
+  .alert-action {
     margin: auto 0 auto auto;
   }
 }
diff --git a/amundsen_application/static/js/components/common/Alert/AlertIcon.tsx b/amundsen_application/static/js/components/common/SVGIcons/AlertIcon.tsx
similarity index 52%
rename from amundsen_application/static/js/components/common/Alert/AlertIcon.tsx
rename to amundsen_application/static/js/components/common/SVGIcons/AlertIcon.tsx
index e30d07b90..e5253a5e8 100644
--- a/amundsen_application/static/js/components/common/Alert/AlertIcon.tsx
+++ b/amundsen_application/static/js/components/common/SVGIcons/AlertIcon.tsx
@@ -1,16 +1,25 @@
 import * as React from 'react';
 
-const STROKE_COLOR = '#b8072c'; // $red70
-const SIZE = 16;
+import { IconSizes } from '.';
 
-const AlertIcon: React.FC = () => {
+const DEFAULT_STROKE_COLOR = 'currentColor';
+
+export interface IconProps {
+  stroke?: string;
+  size?: number;
+}
+
+export const AlertIcon: React.FC<IconProps> = ({
+  stroke = DEFAULT_STROKE_COLOR,
+  size = IconSizes.REGULAR,
+}: IconProps) => {
   return (
     <svg
-      width={SIZE}
-      height={SIZE}
+      width={size}
+      height={size}
       viewBox="0 0 24 24"
       fill="none"
-      stroke={STROKE_COLOR}
+      stroke={stroke}
       strokeWidth={2}
       strokeLinecap="round"
       strokeLinejoin="round"
@@ -20,5 +29,3 @@ const AlertIcon: React.FC = () => {
     </svg>
   );
 };
-
-export default AlertIcon;
diff --git a/amundsen_application/static/js/components/common/SVGIcons/index.tsx b/amundsen_application/static/js/components/common/SVGIcons/index.tsx
new file mode 100644
index 000000000..bdee99a12
--- /dev/null
+++ b/amundsen_application/static/js/components/common/SVGIcons/index.tsx
@@ -0,0 +1,6 @@
+export * from './AlertIcon';
+
+export enum IconSizes {
+  REGULAR = 24,
+  SMALL = 16,
+}
diff --git a/amundsen_application/static/js/components/common/SVGIcons/svgIcons.story.tsx b/amundsen_application/static/js/components/common/SVGIcons/svgIcons.story.tsx
new file mode 100644
index 000000000..091c62381
--- /dev/null
+++ b/amundsen_application/static/js/components/common/SVGIcons/svgIcons.story.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import StorySection from '../StorySection';
+import { AlertIcon } from '.';
+
+const stories = storiesOf('Attributes/Icons', module);
+
+stories.add('SVG Icons', () => (
+  <>
+    <StorySection title="Alert">
+      <AlertIcon />
+    </StorySection>
+  </>
+));

From 6966f45147ccf163feb538b2de2050bd91c2e78e Mon Sep 17 00:00:00 2001
From: Marcos Iglesias <miglesiasvalle@lyft.com>
Date: Fri, 28 Aug 2020 14:24:31 -0700
Subject: [PATCH 5/5] Fixing null check

Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>
---
 amundsen_application/static/.betterer.results             | 8 ++++----
 .../static/js/components/common/Alert/index.tsx           | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/amundsen_application/static/.betterer.results b/amundsen_application/static/.betterer.results
index b4d97f559..323eeb7fe 100644
--- a/amundsen_application/static/.betterer.results
+++ b/amundsen_application/static/.betterer.results
@@ -113,7 +113,7 @@ exports[`strict null compilation`] = {
       [171, 6, 3, "Type \'string\' is not assignable to type \'never\'.", "193424690"],
       [172, 6, 5, "Type \'string\' is not assignable to type \'never\'.", "183222373"],
       [182, 8, 7, "Type \'Element\' is not assignable to type \'never\'.", "3716929964"],
-      [183, 11, 26, "Type \'{ itemsPerPage: number; source: string; }\' is missing the following properties from type \'Readonly<Pick<TableDashboardResourceListProps, \\"source\\" | \\"dashboards\\" | \\"isLoading\\" | \\"errorText\\" | \\"itemsPerPage\\"> & OwnProps>\': dashboards, isLoading, errorText", "2224258167"],
+      [183, 11, 26, "Type \'{ itemsPerPage: number; source: string; }\' is missing the following properties from type \'Readonly<Pick<TableDashboardResourceListProps, \\"source\\" | \\"isLoading\\" | \\"dashboards\\" | \\"errorText\\" | \\"itemsPerPage\\"> & OwnProps>\': isLoading, dashboards, errorText", "2224258167"],
       [188, 8, 3, "Type \'string\' is not assignable to type \'never\'.", "193424690"],
       [189, 8, 5, "Type \'string | Element\' is not assignable to type \'never\'.\\n  Type \'string\' is not assignable to type \'never\'.", "183222373"],
       [263, 16, 7, "Type \'string | null\' is not assignable to type \'string | undefined\'.\\n  Type \'null\' is not assignable to type \'string | undefined\'.", "3817619378"],
@@ -121,10 +121,10 @@ exports[`strict null compilation`] = {
       [319, 20, 36, "Argument of type \'ProgrammaticDescription[] | undefined\' is not assignable to parameter of type \'ProgrammaticDescription[]\'.\\n  Type \'undefined\' is not assignable to type \'ProgrammaticDescription[]\'.", "2770872537"],
       [324, 16, 36, "Argument of type \'ProgrammaticDescription[] | undefined\' is not assignable to parameter of type \'ProgrammaticDescription[]\'.\\n  Type \'undefined\' is not assignable to type \'ProgrammaticDescription[]\'.", "2776557981"]
     ],
-    "js/components/common/Announcements/AnnouncementsList/index.spec.tsx:1710887993": [
-      [95, 23, 124, "Object is possibly \'null\'.", "4248337497"]
+    "js/components/common/Announcements/AnnouncementsList/index.spec.tsx:1395073325": [
+      [94, 23, 124, "Object is possibly \'null\'.", "4248337497"]
     ],
-    "js/components/common/Announcements/AnnouncementsList/index.tsx:1484765516": [
+    "js/components/common/Announcements/AnnouncementsList/index.tsx:3478884749": [
       [70, 4, 11, "Type \'Element\' is not assignable to type \'null\'.", "3768376622"],
       [73, 4, 11, "Type \'Element[]\' is not assignable to type \'null\'.", "3768376622"],
       [85, 4, 11, "Type \'Element\' is not assignable to type \'null\'.", "3768376622"],
diff --git a/amundsen_application/static/js/components/common/Alert/index.tsx b/amundsen_application/static/js/components/common/Alert/index.tsx
index a8b92e199..f3e159a11 100644
--- a/amundsen_application/static/js/components/common/Alert/index.tsx
+++ b/amundsen_application/static/js/components/common/Alert/index.tsx
@@ -24,7 +24,7 @@ const Alert: React.FC<AlertProps> = ({
   actionHref,
   actionLink,
 }: AlertProps) => {
-  let action = null;
+  let action: null | React.ReactNode = null;
 
   if (actionText && onAction) {
     action = (