Supporting an action link

amundsen-io · Aug 28, 2020 · 65744b8 · 65744b8
1 parent 1a7b073
commit 65744b8
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 0 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
@@ -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
@@ -10,13 +10,15 @@ import './styles.scss';
 export interface AlertProps {
   message: string | React.ReactNode;
   actionText?: string;
+  actionHref?: string;
   onAction?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 const Alert: React.FC<AlertProps> = ({
   message,
   onAction,
   actionText,
+  actionHref,
 }: AlertProps) => {
   return (
     <div className="alert">
@@ -27,6 +29,11 @@ const Alert: React.FC<AlertProps> = ({
           {actionText}
         </button>
       )}
+      {actionText && actionHref && (
+        <a className="action-link" href={actionHref}>
+          {actionText}
+        </a>
+      )}
     </div>
   );
 };