NNS1-3485: new LinkToReporting component (#5965)

# Motivation

The new reporting page will be accessible through the `AccountMenu`.
This component, which is behind a feature flag, redirects users to this
page as long as they are logged in.

Deployed
[here](https://qsgjb-riaaa-aaaaa-aaaga-cai.yhabib-ingress.devenv.dfinity.network/reporting/)

# Changes

- New `LinkToReporting` component
- Added new component to the `AccountMenu`

# Tests

- Unit tests for the component within the `AccountMenu`

# Todos

- [ ] Add entry to changelog (if necessary).
Not necessary

Prev. PR: #5964

frontend/src/lib/components/header/AccountMenu.svelte

@@ -12,6 +12,7 @@
   import Logout from "./Logout.svelte";
   import { IconUser, Popover } from "@dfinity/gix-components";
   import ExportIcpTransactionsButton from "$lib/components/header/ExportIcpTransactionsButton.svelte";
+  import LinkToReporting from "$lib/components/header/LinkToReporting.svelte";
 
   let visible = false;
   let button: HTMLButtonElement | undefined;
@@ -43,6 +44,8 @@
         <LinkToCanisters on:nnsLink={closeMenu} />
 
         {#if $ENABLE_EXPORT_NEURONS_REPORT}
+          <LinkToReporting on:nnsLink={closeMenu} />
+
           <ExportNeuronsButton on:nnsExportNeuronsCsvTriggered={toggle} />
 
           <ExportIcpTransactionsButton

frontend/src/lib/components/header/LinkToReporting.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { beforeNavigate } from "$app/navigation";
+  import { i18n } from "$lib/stores/i18n";
+  import { IconDocument } from "@dfinity/gix-components";
+  import { createEventDispatcher } from "svelte";
+
+  const dispatcher = createEventDispatcher();
+  const linkToReporting = "/reporting";
+
+  beforeNavigate(() => dispatcher("nnsLink"));
+</script>
+
+<a data-tid="reporting" href={linkToReporting} class="text">
+  <IconDocument />
+  {$i18n.navigation.reporting}
+</a>
+
+<style lang="scss">
+  @use "../../themes/mixins/account-menu";
+
+  a {
+    @include account-menu.button;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+</style>

frontend/src/tests/lib/components/header/AccountMenu.spec.ts

@@ -19,11 +19,18 @@ describe("AccountMenu", () => {
     );
     const canistersLinkPo = accountMenuPo.getCanistersLinkPo();
     const linkToSettingsPo = accountMenuPo.getLinkToSettingsPo();
+    const linkToReportingPo = accountMenuPo.getLinkToReportingPo();
 
     canistersLinkPo.root.addEventListener("click", mockLinkClickEvent);
     linkToSettingsPo.root.addEventListener("click", mockLinkClickEvent);
-
-    return { accountMenuPo, canistersLinkPo, linkToSettingsPo };
+    linkToReportingPo.root.addEventListener("click", mockLinkClickEvent);
+
+    return {
+      accountMenuPo,
+      canistersLinkPo,
+      linkToSettingsPo,
+      linkToReportingPo,
+    };
   };
 
   it("should be closed by default", async () => {
@@ -196,6 +203,40 @@ describe("AccountMenu", () => {
           expect(await accountMenuPo.isOpen()).toBe(false);
         });
       });
+
+      it("should not show the LinkToReporting button if feature flag is off(by default", async () => {
+        const { accountMenuPo } = renderComponent();
+        await accountMenuPo.openMenu();
+
+        expect(await accountMenuPo.getLinkToReportingPo().isPresent()).toBe(
+          false
+        );
+      });
+
+      it("should display Reporting button link", async () => {
+        overrideFeatureFlagsStore.setFlag("ENABLE_EXPORT_NEURONS_REPORT", true);
+
+        const { accountMenuPo } = renderComponent();
+        await accountMenuPo.openMenu();
+
+        expect(await accountMenuPo.getLinkToReportingPo().isPresent()).toBe(
+          true
+        );
+      });
+
+      it("should close popover on click on reporting", async () => {
+        overrideFeatureFlagsStore.setFlag("ENABLE_EXPORT_NEURONS_REPORT", true);
+
+        const { accountMenuPo, linkToReportingPo } = renderComponent();
+        await accountMenuPo.openMenu();
+
+        await linkToReportingPo.click();
+
+        //wait for goto to be triggered
+        await runResolvedPromises();
+
+        expect(await accountMenuPo.isOpen()).toBe(false);
+      });
     });
   });
 });

frontend/src/tests/page-objects/AccountMenu.page-object.ts

@@ -75,4 +75,11 @@ export class AccountMenuPo extends BasePageObject {
   getExportIcpTransactionsButtonPo(): ExportIcpTransactionsButtonPo {
     return ExportIcpTransactionsButtonPo.under({ element: this.root });
   }
+
+  getLinkToReportingPo(): LinkPo {
+    return LinkPo.under({
+      element: this.root,
+      testId: "reporting",
+    });
+  }
 }