Merge pull request Netflix#18 from outerbounds/bug/trigger-link-basename

 Use Link instead of a

src/components/Trigger/__tests__/Trigger.test.cypress.tsx

@@ -1,27 +1,33 @@
 import React from 'react';
 import { mount } from '@cypress/react';
 import { ThemeProvider } from 'styled-components';
+import { BrowserRouter as Router } from 'react-router-dom';
 import theme from '../../../theme';
 import Trigger from '..';
 
 const flow_name = 'HelloFlow';
 const run_id = 'argo-helloflow-atykf';
+const basename = 'abasename';
 
 describe('Trigger test', () => {
   it('Shows event', () => {
     mount(
       <ThemeProvider theme={theme}>
-        <Trigger
-          triggerEventsValue={{
-            name: 'metaflow_flow_run_succeeded',
-            timestamp: '1663184739',
-            id: `${flow_name}/${run_id}`,
-            type: 'run',
-          }}
-        />
+        <Router basename={basename}>
+          <Trigger
+            triggerEventsValue={{
+              name: 'metaflow_flow_run_succeeded',
+              timestamp: '1663184739',
+              id: `${flow_name}/${run_id}`,
+              type: 'run',
+            }}
+          />
+        </Router>
       </ThemeProvider>,
     );
 
-    cy.get('a').should('have.attr', 'href', `/${flow_name}/${run_id}`).and('contain', 'HelloFlow/...flow-atykf');
+    cy.get('a')
+      .should('have.attr', 'href', `/${basename}/${flow_name}/${run_id}`)
+      .and('contain', 'HelloFlow/...flow-atykf');
   });
 });

src/components/Trigger/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Icon from '../Icon';
 import styled from 'styled-components';
 import Tooltip from '../Tooltip';
+import { Link } from 'react-router-dom';
 
 const MAX_LABEL_WIDTH = 20; // number of characters to show before truncating
 
@@ -44,10 +45,12 @@ const Trigger: React.FC<Props> = ({ triggerEventsValue, className, showToolTip =
 
   return (
     <TriggerLine key={id} data-tip data-for={tooltipId} className={className}>
-      <TriggerLink href={link}>
-        <StyledIcon name="arrow" linkToRun={linkToRun} />
-        {showToolTip ? displayLabel : id}
-      </TriggerLink>
+      {link && (
+        <TriggerLink to={link}>
+          <StyledIcon name="arrow" linkToRun={linkToRun} />
+          {showToolTip ? displayLabel : id}
+        </TriggerLink>
+      )}
       {showToolTip && <Tooltip id={tooltipId}>{label}</Tooltip>}
     </TriggerLine>
   );
@@ -63,7 +66,7 @@ const TriggerLine = styled.div`
   position: relative;
 `;
 
-const TriggerLink = styled.a`
+const TriggerLink = styled(Link)`
   text-decoration: none;
   color: inherit;
 `;