External link icon updates (#565)

* Make icons smaller, add them to more places which pop out

* Dynamically add 'nowrap' between last word and external link icon

* Update test snapshots

* Only match until the last word in tests where we expect a popout icon to render

* back to work in the unit test mines

Co-authored-by: Jacob See <[email protected]>

Author: jacobsee

src/assets/css/overrides.css

@@ -10,6 +10,17 @@
   margin-right: 14px !important;
 }
 
+.externalAltLinkIcon {
+  display: inline-block;
+  width: 0.7em;
+  height: 0.7em;
+  vertical-align: baseline !important;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
 /* .pf-c-page__main {
   z-index: 301;
 }

src/components/activity_history_line_item/activity_history_line_item.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { differenceInDays } from 'date-fns';
 import { GitCommit } from '../../schemas/git_commit';
 import {
@@ -91,7 +92,7 @@ function CommitData({ commit }: { commit: GitCommit }) {
         <span style={{ whiteSpace: 'pre-wrap' }}>{commit.message}</span>
       </div>
       <div>
-        <a href={commit.web_url} target="_blank" rel="noopener noreferrer">See in GitLab</a>
+        <a href={commit.web_url} target="_blank" rel="noopener noreferrer" className="nowrap">See in GitLab&nbsp;&nbsp;<ExternalLinkAltIcon className="externalAltLinkIcon"/></a>
       </div>
     </div>
   );

src/components/dashboard/widgets/dw_last_artifact.spec.tsx

@@ -2,9 +2,8 @@ import { render } from '@testing-library/react';
 import React from 'react';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router';
-import { mockEngagementArtifact, mockEngagementUseCase } from '../../../mocks/engagement_mocks';
+import { mockEngagementArtifact } from '../../../mocks/engagement_mocks';
 import { DwLastArtifacts } from './dw_last_artifact';
-import { DwLastUseCases } from './dw_last_use_cases';
 
 describe('Last Use Cases dashboard widget', () => {
   test('has the correct title', () => {
@@ -23,7 +22,8 @@ describe('Last Use Cases dashboard widget', () => {
       </Router>
     );
     for (let artifact of artifacts) {
-      expect(component.getByText(artifact.description)).toBeDefined();
+      expect(component.getByText(artifact.description.substring(0, artifact.description.lastIndexOf(" ")))).toBeDefined();
+      // The last word will be wrapped in a span with an icon, so only match until the last space
     }
   });
 });

src/components/dashboard/widgets/dw_last_demo.spec.tsx

@@ -18,7 +18,8 @@ describe('Dashboard last demos', () => {
       </MemoryRouter>
     );
     for (let demo of demos) {
-      expect(component.getByText(demo.description)).toBeDefined();
+      expect(component.getByText(demo.description.substring(0, demo.description.lastIndexOf(" ")))).toBeDefined();
+      // The last word will be wrapped in a span with an icon, so only match until the last space
     }
   });
 });

src/components/dashboard/widgets/dw_last_use_cases.spec.tsx

@@ -5,6 +5,7 @@ import { Router } from 'react-router';
 import { mockEngagementUseCase } from '../../../mocks/engagement_mocks';
 import { DwLastUseCases } from './dw_last_use_cases';
 
+
 describe('Last Use Cases dashboard widget', () => {
   test('has the correct title', () => {
     const component = render(

src/components/dashboard/widgets/dw_last_weekly_report.spec.tsx

@@ -22,7 +22,8 @@ describe('Dashboard last weekly reports', () => {
       </MemoryRouter>
     );
     for (let report of weeklyReports) {
-      expect(component.getByText(report.description)).toBeDefined();
+      expect(component.getByText(report.description.substring(0, report.description.lastIndexOf(" ")))).toBeDefined();
+      // The last word will be wrapped in a span with an icon, so only match until the last space
     }
   });
 });