From ef795700d62903e86abc1661d56a474a35506c9d Mon Sep 17 00:00:00 2001
From: Salih Candir <salih.candir@styleflasher.at>
Date: Wed, 14 Dec 2022 11:27:47 +0100
Subject: [PATCH] fix: use '../' instead of '../../' for relative paths

With `../../audit/<id>` we navigate from `/<base-url>/audit/<id>` to `/audit/<id>` but this is wrong because the base path is missing. Therefore we use `../audit/<id>` and this will navigate to the right url with respect to the base path.

Signed-off-by: Salih Candir <salih@live.at>
---
 .../src/components/AuditView/index.test.tsx   | 22 +++++++++++++++++++
 .../src/components/AuditView/index.tsx        |  4 ++--
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/plugins/lighthouse/src/components/AuditView/index.test.tsx b/plugins/lighthouse/src/components/AuditView/index.test.tsx
index c68daddc67..d19543d679 100644
--- a/plugins/lighthouse/src/components/AuditView/index.test.tsx
+++ b/plugins/lighthouse/src/components/AuditView/index.test.tsx
@@ -149,6 +149,28 @@ describe('AuditView', () => {
         ).toHaveAttribute('href', `/audit/${a.id}`);
       });
     });
+
+    it('navigates to the next report with respect to the base path', async () => {
+      // TODO: I would need help here. How to set the base path for the test?
+      const basePath = `/lighthouse`;
+      const rendered = render(
+        wrapInTestApp(
+          <ApiProvider apis={apis}>
+            <AuditView />
+          </ApiProvider>,
+          { routeEntries: [basePath] },
+        ),
+      );
+
+      await rendered.findByTestId('audit-sidebar');
+
+      websiteResponse.audits.forEach(a => {
+        expect(
+          rendered.getByText(formatTime(a.timeCreated)).parentElement
+            ?.parentElement,
+        ).toHaveAttribute('href', `${basePath}/audits/${a.id}`);
+      });
+    });
   });
 
   describe('when the request for the website by id is pending', () => {
diff --git a/plugins/lighthouse/src/components/AuditView/index.tsx b/plugins/lighthouse/src/components/AuditView/index.tsx
index e377894c90..52a087fd8e 100644
--- a/plugins/lighthouse/src/components/AuditView/index.tsx
+++ b/plugins/lighthouse/src/components/AuditView/index.tsx
@@ -80,7 +80,7 @@ const AuditLinkList = ({ audits = [], selectedId }: AuditLinkListProps) => (
         button
         component={Link}
         replace
-        to={resolvePath(generatePath('audit/:id', { id: audit.id }), '../../')}
+        to={resolvePath(generatePath('audit/:id', { id: audit.id }), '../')}
       >
         <ListItemIcon>
           <AuditStatusIcon audit={audit} />
@@ -178,7 +178,7 @@ export const AuditViewContent = () => {
         <Button
           variant="contained"
           color="primary"
-          onClick={() => navigate(`../../${createAuditButtonUrl}`)}
+          onClick={() => navigate(`../${createAuditButtonUrl}`)}
         >
           Create New Audit
         </Button>