Merge pull request #13637 from RoadieHQ/tweak-gha-cards

Modify RecentWorkflowRunsCard use constructed routeRef instead of hardcoded route.

plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.test.tsx

@@ -15,21 +15,19 @@
  */
 
 import { EntityProvider } from '@backstage/plugin-catalog-react';
-import { lightTheme } from '@backstage/theme';
-import { ThemeProvider } from '@material-ui/core';
-import { render } from '@testing-library/react';
 import React from 'react';
-import { MemoryRouter } from 'react-router';
 import { useWorkflowRuns } from '../useWorkflowRuns';
 import { RecentWorkflowRunsCard } from './RecentWorkflowRunsCard';
 
 import { ConfigReader } from '@backstage/core-app-api';
 import {
-  errorApiRef,
-  configApiRef,
   ConfigApi,
+  configApiRef,
+  errorApiRef,
 } from '@backstage/core-plugin-api';
-import { TestApiProvider } from '@backstage/test-utils';
+import { TestApiProvider, wrapInTestApp } from '@backstage/test-utils';
+import { rootRouteRef } from '../../routes';
+import { render } from '@testing-library/react';
 
 jest.mock('../useWorkflowRuns', () => ({
   useWorkflowRuns: jest.fn(),
@@ -76,24 +74,27 @@ describe('<RecentWorkflowRunsCard />', () => {
 
   const renderSubject = (props: any = {}) =>
     render(
-      <ThemeProvider theme={lightTheme}>
-        <MemoryRouter>
-          <TestApiProvider
-            apis={[
-              [errorApiRef, mockErrorApi],
-              [configApiRef, configApi],
-            ]}
-          >
-            <EntityProvider entity={entity}>
-              <RecentWorkflowRunsCard {...props} />
-            </EntityProvider>
-          </TestApiProvider>
-        </MemoryRouter>
-      </ThemeProvider>,
+      wrapInTestApp(
+        <TestApiProvider
+          apis={[
+            [errorApiRef, mockErrorApi],
+            [configApiRef, configApi],
+          ]}
+        >
+          <EntityProvider entity={entity}>
+            <RecentWorkflowRunsCard {...props} />
+          </EntityProvider>
+        </TestApiProvider>,
+        {
+          mountedRoutes: {
+            '/ci-cd': rootRouteRef,
+          },
+        },
+      ),
     );
 
   it('renders a table with a row for each workflow', async () => {
-    const subject = renderSubject();
+    const subject = await renderSubject();
 
     workflowRuns.forEach(run => {
       expect(subject.getByText(run.message)).toBeInTheDocument();
@@ -101,7 +102,7 @@ describe('<RecentWorkflowRunsCard />', () => {
   });
 
   it('renders a workflow row correctly', async () => {
-    const subject = renderSubject();
+    const subject = await renderSubject();
     const [run] = workflowRuns;
     expect(subject.getByText(run.message).closest('a')).toHaveAttribute(
       'href',

plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.tsx

@@ -16,19 +16,25 @@
 import { readGitHubIntegrationConfigs } from '@backstage/integration';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import React, { useEffect } from 'react';
-import { generatePath, Link as RouterLink } from 'react-router-dom';
+import { Link as RouterLink } from 'react-router-dom';
 import { GITHUB_ACTIONS_ANNOTATION } from '../getProjectNameFromEntity';
 import { useWorkflowRuns, WorkflowRun } from '../useWorkflowRuns';
 import { WorkflowRunStatus } from '../WorkflowRunStatus';
 import { Typography } from '@material-ui/core';
 
-import { configApiRef, errorApiRef, useApi } from '@backstage/core-plugin-api';
+import {
+  configApiRef,
+  errorApiRef,
+  useApi,
+  useRouteRef,
+} from '@backstage/core-plugin-api';
 import {
   InfoCard,
   InfoCardVariants,
   Link,
   Table,
 } from '@backstage/core-components';
+import { buildRouteRef } from '../../routes';
 
 const firstLine = (message: string): string => message.split('\n')[0];
 
@@ -69,7 +75,7 @@ export const RecentWorkflowRunsCard = (props: {
   }, [error, errorApi]);
 
   const githubHost = hostname || 'github.com';
-
+  const routeLink = useRouteRef(buildRouteRef);
   return (
     <InfoCard
       title="Recent Workflow Runs"
@@ -103,10 +109,7 @@ export const RecentWorkflowRunsCard = (props: {
               title: 'Commit Message',
               field: 'message',
               render: data => (
-                <Link
-                  component={RouterLink}
-                  to={generatePath('./ci-cd/:id', { id: data.id! })}
-                >
+                <Link component={RouterLink} to={routeLink({ id: data.id! })}>
                   {firstLine(data.message ?? '')}
                 </Link>
               ),