From b970ff91130ceaf3e962696e293b292a9f844dcd Mon Sep 17 00:00:00 2001
From: Matiss Janis Aboltins <matiss@mja.lv>
Date: Sun, 8 Dec 2024 18:53:55 +0000
Subject: [PATCH 1/2] :bug: fix misaligned gocardless credential popover

Closes #3854
---
 .../components/modals/CreateAccountModal.tsx  | 53 ++++++-------------
 .../loot-core/src/types/server-handlers.d.ts  |  2 +-
 upcoming-release-notes/3942.md                |  6 +++
 3 files changed, 23 insertions(+), 38 deletions(-)
 create mode 100644 upcoming-release-notes/3942.md

diff --git a/packages/desktop-client/src/components/modals/CreateAccountModal.tsx b/packages/desktop-client/src/components/modals/CreateAccountModal.tsx
index 8f62089c913..e0d9196e8c8 100644
--- a/packages/desktop-client/src/components/modals/CreateAccountModal.tsx
+++ b/packages/desktop-client/src/components/modals/CreateAccountModal.tsx
@@ -1,7 +1,7 @@
-// @ts-strict-ignore
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
+import { DialogTrigger } from 'react-aria-components';
 
 import { pushModal } from 'loot-core/client/actions';
 import { send } from 'loot-core/src/platform/client/fetch';
@@ -30,13 +30,12 @@ export function CreateAccountModal({ upgradingAccountId }: CreateAccountProps) {
   const { t } = useTranslation();
   const syncServerStatus = useSyncServerStatus();
   const dispatch = useDispatch();
-  const [isGoCardlessSetupComplete, setIsGoCardlessSetupComplete] =
-    useState(null);
-  const [isSimpleFinSetupComplete, setIsSimpleFinSetupComplete] =
-    useState(null);
-  const [menuGoCardlessOpen, setGoCardlessMenuOpen] = useState<boolean>(false);
-  const triggerRef = useRef(null);
-  const [menuSimplefinOpen, setSimplefinMenuOpen] = useState<boolean>(false);
+  const [isGoCardlessSetupComplete, setIsGoCardlessSetupComplete] = useState<
+    boolean | null
+  >(null);
+  const [isSimpleFinSetupComplete, setIsSimpleFinSetupComplete] = useState<
+    boolean | null
+  >(null);
 
   const onConnectGoCardless = () => {
     if (!isGoCardlessSetupComplete) {
@@ -139,7 +138,6 @@ export function CreateAccountModal({ upgradingAccountId }: CreateAccountProps) {
         value: null,
       }).then(() => {
         setIsGoCardlessSetupComplete(false);
-        setGoCardlessMenuOpen(false);
       });
     });
   };
@@ -154,7 +152,6 @@ export function CreateAccountModal({ upgradingAccountId }: CreateAccountProps) {
         value: null,
       }).then(() => {
         setIsSimpleFinSetupComplete(false);
-        setSimplefinMenuOpen(false);
       });
     });
   };
@@ -248,13 +245,8 @@ export function CreateAccountModal({ upgradingAccountId }: CreateAccountProps) {
                         : t('Set up GoCardless for bank sync')}
                     </ButtonWithLoading>
                     {isGoCardlessSetupComplete && (
-                      <>
-                        <Button
-                          ref={triggerRef}
-                          variant="bare"
-                          onPress={() => setGoCardlessMenuOpen(true)}
-                          aria-label="GoCardless menu"
-                        >
+                      <DialogTrigger>
+                        <Button variant="bare" aria-label="GoCardless menu">
                           <SvgDotsHorizontalTriple
                             width={15}
                             height={15}
@@ -262,11 +254,7 @@ export function CreateAccountModal({ upgradingAccountId }: CreateAccountProps) {
                           />
                         </Button>
 
-                        <Popover
-                          triggerRef={triggerRef}
-                          isOpen={menuGoCardlessOpen}
-                          onOpenChange={() => setGoCardlessMenuOpen(false)}
-                        >
+                        <Popover>
                           <Menu
                             onMenuSelect={item => {
                               if (item === 'reconfigure') {
@@ -281,7 +269,7 @@ export function CreateAccountModal({ upgradingAccountId }: CreateAccountProps) {
                             ]}
                           />
                         </Popover>
-                      </>
+                      </DialogTrigger>
                     )}
                   </View>
                   <Text style={{ lineHeight: '1.4em', fontSize: 15 }}>
@@ -317,24 +305,15 @@ export function CreateAccountModal({ upgradingAccountId }: CreateAccountProps) {
                         : t('Set up SimpleFIN for bank sync')}
                     </ButtonWithLoading>
                     {isSimpleFinSetupComplete && (
-                      <>
-                        <Button
-                          ref={triggerRef}
-                          variant="bare"
-                          onPress={() => setSimplefinMenuOpen(true)}
-                          aria-label="SimpleFIN menu"
-                        >
+                      <DialogTrigger>
+                        <Button variant="bare" aria-label="SimpleFIN menu">
                           <SvgDotsHorizontalTriple
                             width={15}
                             height={15}
                             style={{ transform: 'rotateZ(90deg)' }}
                           />
                         </Button>
-                        <Popover
-                          triggerRef={triggerRef}
-                          isOpen={menuSimplefinOpen}
-                          onOpenChange={() => setSimplefinMenuOpen(false)}
-                        >
+                        <Popover>
                           <Menu
                             onMenuSelect={item => {
                               if (item === 'reconfigure') {
@@ -349,7 +328,7 @@ export function CreateAccountModal({ upgradingAccountId }: CreateAccountProps) {
                             ]}
                           />
                         </Popover>
-                      </>
+                      </DialogTrigger>
                     )}
                   </View>
                   <Text style={{ lineHeight: '1.4em', fontSize: 15 }}>
diff --git a/packages/loot-core/src/types/server-handlers.d.ts b/packages/loot-core/src/types/server-handlers.d.ts
index 4afbc72a3e8..657244b3cc5 100644
--- a/packages/loot-core/src/types/server-handlers.d.ts
+++ b/packages/loot-core/src/types/server-handlers.d.ts
@@ -178,7 +178,7 @@ export interface ServerHandlers {
 
   'account-move': (arg: { id; targetId }) => Promise<unknown>;
 
-  'secret-set': (arg: { name: string; value: string }) => Promise<null>;
+  'secret-set': (arg: { name: string; value: string | null }) => Promise<null>;
   'secret-check': (arg: string) => Promise<string | { error?: string }>;
 
   'gocardless-poll-web-token': (arg: {
diff --git a/upcoming-release-notes/3942.md b/upcoming-release-notes/3942.md
new file mode 100644
index 00000000000..c66d2b9326b
--- /dev/null
+++ b/upcoming-release-notes/3942.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [MatissJanis]
+---
+
+Fix misaligned gocardless credential popover.

From f724974b4324a975c297363c11b0190cc1774e1b Mon Sep 17 00:00:00 2001
From: Matiss Janis Aboltins <matiss@mja.lv>
Date: Sun, 8 Dec 2024 18:56:42 +0000
Subject: [PATCH 2/2] Patch linter

---
 .../src/components/modals/CreateAccountModal.tsx         | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/desktop-client/src/components/modals/CreateAccountModal.tsx b/packages/desktop-client/src/components/modals/CreateAccountModal.tsx
index e0d9196e8c8..6ba131bf6dd 100644
--- a/packages/desktop-client/src/components/modals/CreateAccountModal.tsx
+++ b/packages/desktop-client/src/components/modals/CreateAccountModal.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
+import { DialogTrigger } from 'react-aria-components';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
-import { DialogTrigger } from 'react-aria-components';
 
 import { pushModal } from 'loot-core/client/actions';
 import { send } from 'loot-core/src/platform/client/fetch';
@@ -246,7 +246,10 @@ export function CreateAccountModal({ upgradingAccountId }: CreateAccountProps) {
                     </ButtonWithLoading>
                     {isGoCardlessSetupComplete && (
                       <DialogTrigger>
-                        <Button variant="bare" aria-label="GoCardless menu">
+                        <Button
+                          variant="bare"
+                          aria-label={t('GoCardless menu')}
+                        >
                           <SvgDotsHorizontalTriple
                             width={15}
                             height={15}
@@ -306,7 +309,7 @@ export function CreateAccountModal({ upgradingAccountId }: CreateAccountProps) {
                     </ButtonWithLoading>
                     {isSimpleFinSetupComplete && (
                       <DialogTrigger>
-                        <Button variant="bare" aria-label="SimpleFIN menu">
+                        <Button variant="bare" aria-label={t('SimpleFIN menu')}>
                           <SvgDotsHorizontalTriple
                             width={15}
                             height={15}