diff --git a/.changeset/ninety-bags-turn.md b/.changeset/ninety-bags-turn.md new file mode 100644 index 0000000000..27b9a94ad2 --- /dev/null +++ b/.changeset/ninety-bags-turn.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-lighthouse': patch +--- + +Fixed bug in Lighthouse Plugin where audit list item and create audit button navigated to a wrong URL. diff --git a/plugins/lighthouse/src/components/AuditView/index.test.tsx b/plugins/lighthouse/src/components/AuditView/index.test.tsx index c68daddc67..d555133f3e 100644 --- a/plugins/lighthouse/src/components/AuditView/index.test.tsx +++ b/plugins/lighthouse/src/components/AuditView/index.test.tsx @@ -16,6 +16,8 @@ /* eslint-disable jest/no-disabled-tests */ +import { configApiRef } from '@backstage/core-plugin-api'; + jest.mock('react-router-dom', () => { const actual = jest.requireActual('react-router-dom'); const mockNavigation = jest.fn(); @@ -28,6 +30,7 @@ jest.mock('react-router-dom', () => { import { setupRequestMockHandlers, + TestApiProvider, TestApiRegistry, wrapInTestApp, } from '@backstage/test-utils'; @@ -39,13 +42,18 @@ import { Audit, lighthouseApiRef, LighthouseRestApi, Website } from '../../api'; import { formatTime } from '../../utils'; import * as data from '../../__fixtures__/website-response.json'; import AuditView from './index'; -import { ApiProvider } from '@backstage/core-app-api'; +import { ApiProvider, ConfigReader } from '@backstage/core-app-api'; +import { rootRouteRef } from '../../plugin'; const { useParams }: { useParams: jest.Mock } = jest.requireMock('react-router-dom'); const websiteResponse = data as Website; describe('AuditView', () => { + const lighthouseRestApiMock = new LighthouseRestApi('https://lighthouse'); + const testAppOptions = { + mountedRoutes: { '/': rootRouteRef }, + }; let apis: TestApiRegistry; let id: string; @@ -59,10 +67,7 @@ describe('AuditView', () => { ), ); - apis = TestApiRegistry.from([ - lighthouseApiRef, - new LighthouseRestApi('https://lighthouse'), - ]); + apis = TestApiRegistry.from([lighthouseApiRef, lighthouseRestApiMock]); id = websiteResponse.audits.find(a => a.status === 'COMPLETED') ?.id as string; useParams.mockReturnValue({ id }); @@ -74,6 +79,7 @@ describe('AuditView', () => { , + testAppOptions, ), ); @@ -91,6 +97,7 @@ describe('AuditView', () => { , + testAppOptions, ), ); @@ -109,6 +116,7 @@ describe('AuditView', () => { , + testAppOptions, ), ); @@ -137,6 +145,7 @@ describe('AuditView', () => { , + testAppOptions, ), ); @@ -149,6 +158,36 @@ describe('AuditView', () => { ).toHaveAttribute('href', `/audit/${a.id}`); }); }); + + it('navigates to the next report with respect to the base path', async () => { + const configApiMock = new ConfigReader({ + app: { baseUrl: `http://localhost:3000/example` }, + }); + const rendered = render( + wrapInTestApp( + + + , + { + mountedRoutes: { [`/example/lighthouse`]: rootRouteRef }, + }, + ), + ); + + await rendered.findByTestId('audit-sidebar'); + + websiteResponse.audits.forEach(a => { + expect( + rendered.getByText(formatTime(a.timeCreated)).parentElement + ?.parentElement, + ).toHaveAttribute('href', `/example/lighthouse/audit/${a.id}`); + }); + }); }); describe('when the request for the website by id is pending', () => { @@ -159,6 +198,7 @@ describe('AuditView', () => { , + testAppOptions, ), ); expect(await rendered.findByTestId('progress')).toBeInTheDocument(); @@ -177,6 +217,7 @@ describe('AuditView', () => { , + testAppOptions, ), ); expect(await rendered.findByText(/failed to fetch/)).toBeInTheDocument(); @@ -194,6 +235,7 @@ describe('AuditView', () => { , + testAppOptions, ), ); @@ -214,6 +256,7 @@ describe('AuditView', () => { , + testAppOptions, ), ); diff --git a/plugins/lighthouse/src/components/AuditView/index.tsx b/plugins/lighthouse/src/components/AuditView/index.tsx index e377894c90..ade485b09a 100644 --- a/plugins/lighthouse/src/components/AuditView/index.tsx +++ b/plugins/lighthouse/src/components/AuditView/index.tsx @@ -47,7 +47,8 @@ import { Page, Progress, } from '@backstage/core-components'; -import { useApi } from '@backstage/core-plugin-api'; +import { useApi, useRouteRef } from '@backstage/core-plugin-api'; +import { rootRouteRef } from '../../plugin'; // TODO(freben): move all of this out of index @@ -67,29 +68,35 @@ interface AuditLinkListProps { audits?: Audit[]; selectedId: string; } -const AuditLinkList = ({ audits = [], selectedId }: AuditLinkListProps) => ( - - {audits.map(audit => ( - - - - - - - ))} - -); +const AuditLinkList = ({ audits = [], selectedId }: AuditLinkListProps) => { + const fromPath = useRouteRef(rootRouteRef)?.() ?? '../'; + return ( + + {audits.map(audit => ( + + + + + + + ))} + + ); +}; const AuditView = ({ audit }: { audit?: Audit }) => { const classes = useStyles(); @@ -119,6 +126,7 @@ const AuditView = ({ audit }: { audit?: Audit }) => { export const AuditViewContent = () => { const lighthouseApi = useApi(lighthouseApiRef); + const fromPath = useRouteRef(rootRouteRef)?.() ?? '../'; const params = useParams() as { id: string }; const classes = useStyles(); const navigate = useNavigate(); @@ -178,7 +186,7 @@ export const AuditViewContent = () => {