From 5834794d5834d6a8e4dbc2e31d40f8d99461ba98 Mon Sep 17 00:00:00 2001
From: Yusef Habib <yusef.fernandez@dfinity.org>
Date: Fri, 6 Dec 2024 15:22:19 +0100
Subject: [PATCH] NNS1-3480: adds ExportIcpTransactionsButton to AccountMenu
 (#5926)

# Motivation

We want to show the new `ExportIcpTransactionsButton` in the
`AccountMenu` so it can be used by our users.
It is behind the  feature flag `ENABLE_EXPORT_NEURONS_REPORT`

It can be tested
[here](https://qsgjb-riaaa-aaaaa-aaaga-cai.yhabib-ingress.devenv.dfinity.network/)

# Changes

- Displays `ExportIcpTransactionsButton` in `AccountMenu` when
`ENABLE_EXPORT_NEURONS_REPORT` is `true`

# Tests

- Component tests

# Todos

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

Prev. PR: #5887
---
 .../lib/components/header/AccountMenu.svelte  |  5 +++
 .../lib/components/header/AccountMenu.spec.ts | 36 +++++++++++++++++++
 .../page-objects/AccountMenu.page-object.ts   |  5 +++
 3 files changed, 46 insertions(+)

diff --git a/frontend/src/lib/components/header/AccountMenu.svelte b/frontend/src/lib/components/header/AccountMenu.svelte
index d6f2244ea78..1d26d497ca4 100644
--- a/frontend/src/lib/components/header/AccountMenu.svelte
+++ b/frontend/src/lib/components/header/AccountMenu.svelte
@@ -11,6 +11,7 @@
   import LoginIconOnly from "./LoginIconOnly.svelte";
   import Logout from "./Logout.svelte";
   import { IconUser, Popover } from "@dfinity/gix-components";
+  import ExportIcpTransactionsButton from "$lib/components/header/ExportIcpTransactionsButton.svelte";
 
   let visible = false;
   let button: HTMLButtonElement | undefined;
@@ -43,6 +44,10 @@
 
         {#if $ENABLE_EXPORT_NEURONS_REPORT}
           <ExportNeuronsButton on:nnsExportNeuronsCsvTriggered={toggle} />
+
+          <ExportIcpTransactionsButton
+            on:nnsExportIcpTransactionsCsvTriggered={toggle}
+          />
         {/if}
 
         <Logout on:nnsLogoutTriggered={toggle} />
diff --git a/frontend/src/tests/lib/components/header/AccountMenu.spec.ts b/frontend/src/tests/lib/components/header/AccountMenu.spec.ts
index 04b3c709608..e3c04460049 100644
--- a/frontend/src/tests/lib/components/header/AccountMenu.spec.ts
+++ b/frontend/src/tests/lib/components/header/AccountMenu.spec.ts
@@ -160,6 +160,42 @@ describe("AccountMenu", () => {
           expect(await accountMenuPo.isOpen()).toBe(false);
         });
       });
+
+      it("should not show the Export ICP Transactions Report button if feature flag is off(by default)", async () => {
+        const { accountMenuPo } = renderComponent();
+
+        await accountMenuPo.openMenu();
+
+        expect(
+          await accountMenuPo.getExportIcpTransactionsButtonPo().isPresent()
+        ).toBe(false);
+      });
+
+      it("should show Export Icp Transactions Report button if feature flag is on", async () => {
+        overrideFeatureFlagsStore.setFlag("ENABLE_EXPORT_NEURONS_REPORT", true);
+        const { accountMenuPo } = renderComponent();
+
+        await accountMenuPo.openMenu();
+
+        expect(
+          await accountMenuPo.getExportIcpTransactionsButtonPo().isPresent()
+        ).toBe(true);
+      });
+
+      it("should close the menu once the Export Icp Transactions Report button is clicked", async () => {
+        overrideFeatureFlagsStore.setFlag("ENABLE_EXPORT_NEURONS_REPORT", true);
+        const { accountMenuPo } = renderComponent();
+
+        expect(await accountMenuPo.isOpen()).toBe(false);
+
+        await accountMenuPo.openMenu();
+        expect(await accountMenuPo.isOpen()).toBe(true);
+
+        await accountMenuPo.getExportIcpTransactionsButtonPo().click();
+        await waitFor(async () => {
+          expect(await accountMenuPo.isOpen()).toBe(false);
+        });
+      });
     });
   });
 });
diff --git a/frontend/src/tests/page-objects/AccountMenu.page-object.ts b/frontend/src/tests/page-objects/AccountMenu.page-object.ts
index ac600c7d77d..a2dd8696b08 100644
--- a/frontend/src/tests/page-objects/AccountMenu.page-object.ts
+++ b/frontend/src/tests/page-objects/AccountMenu.page-object.ts
@@ -1,5 +1,6 @@
 import { BasePageObject } from "$tests/page-objects/base.page-object";
 import { ButtonPo } from "$tests/page-objects/Button.page-object";
+import { ExportIcpTransactionsButtonPo } from "$tests/page-objects/ExportIcpTransactionsButton.page-object";
 import { ExportNeuronsButtonPo } from "$tests/page-objects/ExportNeuronsButton.page-object";
 import type { PageObjectElement } from "$tests/types/page-object.types";
 import { AccountDetailsPo } from "./AccountDetails.page-object";
@@ -70,4 +71,8 @@ export class AccountMenuPo extends BasePageObject {
   getExportNeuronsButtonPo(): ExportNeuronsButtonPo {
     return ExportNeuronsButtonPo.under({ element: this.root });
   }
+
+  getExportIcpTransactionsButtonPo(): ExportIcpTransactionsButtonPo {
+    return ExportIcpTransactionsButtonPo.under({ element: this.root });
+  }
 }