From 5c577aa0690dcedddeb067cb9dcaf570d457a301 Mon Sep 17 00:00:00 2001
From: Koen van Staveren <koenvanstaveren@hotmail.com>
Date: Sun, 29 Dec 2024 21:51:56 +0100
Subject: [PATCH] enhance: context menu on custom reports page (#3776)

* enhance: context menu on custom reports page

* chore: release note

* chore: lint

* chore: use both feature flags

* chore: use both feature flags

* chore: pr feedback

* fix: changing name with context menu
---
 .../src/components/reports/ReportCard.tsx     | 67 +++++++++++++------
 .../reports/reports/CashFlowCard.tsx          |  1 +
 .../reports/reports/CustomReportListCards.tsx |  1 +
 .../reports/reports/MarkdownCard.tsx          |  1 +
 .../reports/reports/NetWorthCard.tsx          |  1 +
 .../reports/reports/SpendingCard.tsx          |  1 +
 .../reports/reports/SummaryCard.tsx           |  1 +
 upcoming-release-notes/3776.md                |  6 ++
 8 files changed, 59 insertions(+), 20 deletions(-)
 create mode 100644 upcoming-release-notes/3776.md

diff --git a/packages/desktop-client/src/components/reports/ReportCard.tsx b/packages/desktop-client/src/components/reports/ReportCard.tsx
index 91f3839c762..2ec2acb2246 100644
--- a/packages/desktop-client/src/components/reports/ReportCard.tsx
+++ b/packages/desktop-client/src/components/reports/ReportCard.tsx
@@ -1,11 +1,11 @@
 import React, {
   useRef,
-  useState,
   type ComponentProps,
   type ReactNode,
   type CSSProperties,
 } from 'react';
 
+import { useContextMenu } from '../../hooks/useContextMenu';
 import { useIsInViewport } from '../../hooks/useIsInViewport';
 import { useNavigate } from '../../hooks/useNavigate';
 import { theme } from '../../style';
@@ -19,6 +19,7 @@ import { NON_DRAGGABLE_AREA_CLASS_NAME } from './constants';
 
 type ReportCardProps = {
   isEditing?: boolean;
+  disableClick?: boolean;
   to?: string;
   children: ReactNode;
   menuItems?: ComponentProps<typeof Menu>['items'];
@@ -29,6 +30,7 @@ type ReportCardProps = {
 
 export function ReportCard({
   isEditing,
+  disableClick,
   to,
   menuItems,
   onMenuSelect,
@@ -95,7 +97,7 @@ export function ReportCard({
       <Layout {...layoutProps}>
         <View
           role="button"
-          onClick={isEditing ? undefined : () => navigate(to)}
+          onClick={isEditing || disableClick ? undefined : () => navigate(to)}
           style={{
             height: '100%',
             width: '100%',
@@ -119,10 +121,21 @@ type LayoutProps = {
 
 function Layout({ children, isEditing, menuItems, onMenuSelect }: LayoutProps) {
   const triggerRef = useRef(null);
-  const [menuOpen, setMenuOpen] = useState(false);
+  const viewRef = useRef(null);
+
+  const {
+    setMenuOpen,
+    menuOpen,
+    handleContextMenu,
+    resetPosition,
+    position,
+    asContextMenu,
+  } = useContextMenu();
 
   return (
     <View
+      ref={viewRef}
+      onContextMenu={handleContextMenu}
       style={{
         display: 'block',
         height: '100%',
@@ -135,24 +148,38 @@ function Layout({ children, isEditing, menuItems, onMenuSelect }: LayoutProps) {
         },
       }}
     >
-      {menuItems && isEditing && (
-        <View
-          className={[
-            menuOpen ? undefined : 'hover-visible',
-            NON_DRAGGABLE_AREA_CLASS_NAME,
-          ].join(' ')}
-          style={{
-            position: 'absolute',
-            top: 7,
-            right: 3,
-            zIndex: 1,
-          }}
-        >
-          <MenuButton ref={triggerRef} onPress={() => setMenuOpen(true)} />
+      {menuItems && (
+        <>
+          {isEditing && (
+            <View
+              className={[
+                menuOpen ? undefined : 'hover-visible',
+                NON_DRAGGABLE_AREA_CLASS_NAME,
+              ].join(' ')}
+              style={{
+                position: 'absolute',
+                top: 7,
+                right: 3,
+                zIndex: 1,
+              }}
+            >
+              <MenuButton
+                ref={triggerRef}
+                onPress={() => {
+                  resetPosition();
+                  setMenuOpen(true);
+                }}
+              />
+            </View>
+          )}
+
           <Popover
-            triggerRef={triggerRef}
-            isOpen={menuOpen}
+            triggerRef={asContextMenu ? viewRef : triggerRef}
+            isOpen={Boolean(menuOpen)}
             onOpenChange={() => setMenuOpen(false)}
+            isNonModal
+            placement={asContextMenu ? 'bottom start' : 'bottom end'}
+            {...position}
           >
             <Menu
               className={NON_DRAGGABLE_AREA_CLASS_NAME}
@@ -160,7 +187,7 @@ function Layout({ children, isEditing, menuItems, onMenuSelect }: LayoutProps) {
               items={menuItems}
             />
           </Popover>
-        </View>
+        </>
       )}
 
       {children}
diff --git a/packages/desktop-client/src/components/reports/reports/CashFlowCard.tsx b/packages/desktop-client/src/components/reports/reports/CashFlowCard.tsx
index 831dd54920d..92d8524475d 100644
--- a/packages/desktop-client/src/components/reports/reports/CashFlowCard.tsx
+++ b/packages/desktop-client/src/components/reports/reports/CashFlowCard.tsx
@@ -119,6 +119,7 @@ export function CashFlowCard({
   return (
     <ReportCard
       isEditing={isEditing}
+      disableClick={nameMenuOpen}
       to={`/reports/cash-flow/${widgetId}`}
       menuItems={[
         {
diff --git a/packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx b/packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx
index 118bd0d252d..cc0a6e14468 100644
--- a/packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx
+++ b/packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx
@@ -115,6 +115,7 @@ function CustomReportListCardsInner({
   return (
     <ReportCard
       isEditing={isEditing}
+      disableClick={nameMenuOpen}
       to={`/reports/custom/${report.id}`}
       menuItems={[
         {
diff --git a/packages/desktop-client/src/components/reports/reports/MarkdownCard.tsx b/packages/desktop-client/src/components/reports/reports/MarkdownCard.tsx
index 23bfbc73a94..549c586011f 100644
--- a/packages/desktop-client/src/components/reports/reports/MarkdownCard.tsx
+++ b/packages/desktop-client/src/components/reports/reports/MarkdownCard.tsx
@@ -39,6 +39,7 @@ export function MarkdownCard({
   return (
     <ReportCard
       isEditing={isEditing}
+      disableClick={isVisibleTextArea}
       menuItems={[
         {
           type: Menu.label,
diff --git a/packages/desktop-client/src/components/reports/reports/NetWorthCard.tsx b/packages/desktop-client/src/components/reports/reports/NetWorthCard.tsx
index 0a22f429ed5..c3625161b8a 100644
--- a/packages/desktop-client/src/components/reports/reports/NetWorthCard.tsx
+++ b/packages/desktop-client/src/components/reports/reports/NetWorthCard.tsx
@@ -65,6 +65,7 @@ export function NetWorthCard({
   return (
     <ReportCard
       isEditing={isEditing}
+      disableClick={nameMenuOpen}
       to={`/reports/net-worth/${widgetId}`}
       menuItems={[
         {
diff --git a/packages/desktop-client/src/components/reports/reports/SpendingCard.tsx b/packages/desktop-client/src/components/reports/reports/SpendingCard.tsx
index 117dfe10184..cebea01c081 100644
--- a/packages/desktop-client/src/components/reports/reports/SpendingCard.tsx
+++ b/packages/desktop-client/src/components/reports/reports/SpendingCard.tsx
@@ -69,6 +69,7 @@ export function SpendingCard({
   return (
     <ReportCard
       isEditing={isEditing}
+      disableClick={nameMenuOpen}
       to={`/reports/spending/${widgetId}`}
       menuItems={[
         {
diff --git a/packages/desktop-client/src/components/reports/reports/SummaryCard.tsx b/packages/desktop-client/src/components/reports/reports/SummaryCard.tsx
index a397b65bf29..9d6ef3ebebd 100644
--- a/packages/desktop-client/src/components/reports/reports/SummaryCard.tsx
+++ b/packages/desktop-client/src/components/reports/reports/SummaryCard.tsx
@@ -73,6 +73,7 @@ export function SummaryCard({
   return (
     <ReportCard
       isEditing={isEditing}
+      disableClick={nameMenuOpen}
       to={`/reports/summary/${widgetId}`}
       menuItems={[
         {
diff --git a/upcoming-release-notes/3776.md b/upcoming-release-notes/3776.md
new file mode 100644
index 00000000000..9107a1f0bad
--- /dev/null
+++ b/upcoming-release-notes/3776.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [UnderKoen]
+---
+
+Add context menus to custom reports dashboard