Rework bank secrets reset (#2870)

* Rework bank secrets reset

* Fix alignment

* Fix lint errors

* add release note

* Fix typo

* fix typo

packages/desktop-client/src/components/modals/CreateAccountModal.tsx

@@ -9,14 +9,17 @@ import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { useGoCardlessStatus } from '../../hooks/useGoCardlessStatus';
 import { useSimpleFinStatus } from '../../hooks/useSimpleFinStatus';
 import { type SyncServerStatus } from '../../hooks/useSyncServerStatus';
+import { SvgDotsHorizontalTriple } from '../../icons/v1';
 import { theme } from '../../style';
 import { Button, ButtonWithLoading } from '../common/Button';
 import { Link } from '../common/Link';
+import { Menu } from '../common/Menu';
 import { Modal } from '../common/Modal';
 import { Paragraph } from '../common/Paragraph';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
 import { type CommonModalProps } from '../Modals';
+import { Tooltip } from '../tooltips';
 
 type CreateAccountProps = {
   modalProps: CommonModalProps;
@@ -34,6 +37,8 @@ export function CreateAccountModal({
     useState(null);
   const [isSimpleFinSetupComplete, setIsSimpleFinSetupComplete] =
     useState(null);
+  const [menuGoCardlessOpen, setGoCardlessMenuOpen] = useState<boolean>(false);
+  const [menuSimplefinOpen, setSimplefinMenuOpen] = useState<boolean>(false);
 
   const onConnectGoCardless = () => {
     if (!isGoCardlessSetupComplete) {
@@ -108,6 +113,36 @@ export function CreateAccountModal({
     });
   };
 
+  const onGoCardlessReset = () => {
+    send('secret-set', {
+      name: 'gocardless_secretId',
+      value: null,
+    }).then(() => {
+      send('secret-set', {
+        name: 'gocardless_secretKey',
+        value: null,
+      }).then(() => {
+        setIsGoCardlessSetupComplete(false);
+        setGoCardlessMenuOpen(false);
+      });
+    });
+  };
+
+  const onSimpleFinReset = () => {
+    send('secret-set', {
+      name: 'simplefin_token',
+      value: null,
+    }).then(() => {
+      send('secret-set', {
+        name: 'simplefin_accessKey',
+        value: null,
+      }).then(() => {
+        setIsSimpleFinSetupComplete(false);
+        setSimplefinMenuOpen(false);
+      });
+    });
+  };
+
   const onCreateLocalAccount = () => {
     actions.pushModal('add-local-account');
   };
@@ -168,20 +203,63 @@ export function CreateAccountModal({
           <View style={{ gap: 10 }}>
             {syncServerStatus === 'online' ? (
               <>
-                <ButtonWithLoading
-                  disabled={syncServerStatus !== 'online'}
+                <View
                   style={{
-                    padding: '10px 0',
-                    fontSize: 15,
-                    fontWeight: 600,
-                    flex: 1,
+                    flexDirection: 'row',
+                    gap: 10,
+                    alignItems: 'center',
                   }}
-                  onClick={onConnectGoCardless}
                 >
-                  {isGoCardlessSetupComplete
-                    ? 'Link bank account with GoCardless'
-                    : 'Set up GoCardless for bank sync'}
-                </ButtonWithLoading>
+                  <ButtonWithLoading
+                    disabled={syncServerStatus !== 'online'}
+                    style={{
+                      padding: '10px 0',
+                      fontSize: 15,
+                      fontWeight: 600,
+                      flex: 1,
+                    }}
+                    onClick={onConnectGoCardless}
+                  >
+                    {isGoCardlessSetupComplete
+                      ? 'Link bank account with GoCardless'
+                      : 'Set up GoCardless for bank sync'}
+                  </ButtonWithLoading>
+                  {isGoCardlessSetupComplete && (
+                    <Button
+                      type="bare"
+                      onClick={() => setGoCardlessMenuOpen(true)}
+                      aria-label="Menu"
+                    >
+                      <SvgDotsHorizontalTriple
+                        width={15}
+                        height={15}
+                        style={{ transform: 'rotateZ(90deg)' }}
+                      />
+                      {menuGoCardlessOpen && (
+                        <Tooltip
+                          position="bottom-right"
+                          width={200}
+                          style={{ padding: 0 }}
+                          onClose={() => setGoCardlessMenuOpen(false)}
+                        >
+                          <Menu
+                            onMenuSelect={item => {
+                              if (item === 'reconfigure') {
+                                onGoCardlessReset();
+                              }
+                            }}
+                            items={[
+                              {
+                                name: 'reconfigure',
+                                text: 'Reset GoCardless credentials',
+                              },
+                            ]}
+                          />
+                        </Tooltip>
+                      )}
+                    </Button>
+                  )}
+                </View>
                 <Text style={{ lineHeight: '1.4em', fontSize: 15 }}>
                   <strong>
                     Link a <em>European</em> bank account
@@ -191,22 +269,65 @@ export function CreateAccountModal({
                 </Text>
                 {simpleFinSyncFeatureFlag === true && (
                   <>
-                    <ButtonWithLoading
-                      disabled={syncServerStatus !== 'online'}
-                      loading={loadingSimpleFinAccounts}
+                    <View
                       style={{
+                        flexDirection: 'row',
+                        gap: 10,
                         marginTop: '18px',
-                        padding: '10px 0',
-                        fontSize: 15,
-                        fontWeight: 600,
-                        flex: 1,
+                        alignItems: 'center',
                       }}
-                      onClick={onConnectSimpleFin}
                     >
-                      {isSimpleFinSetupComplete
-                        ? 'Link bank account with SimpleFIN'
-                        : 'Set up SimpleFIN for bank sync'}
-                    </ButtonWithLoading>
+                      <ButtonWithLoading
+                        disabled={syncServerStatus !== 'online'}
+                        loading={loadingSimpleFinAccounts}
+                        style={{
+                          padding: '10px 0',
+                          fontSize: 15,
+                          fontWeight: 600,
+                          flex: 1,
+                        }}
+                        onClick={onConnectSimpleFin}
+                      >
+                        {isSimpleFinSetupComplete
+                          ? 'Link bank account with SimpleFIN'
+                          : 'Set up SimpleFIN for bank sync'}
+                      </ButtonWithLoading>
+                      {isSimpleFinSetupComplete && (
+                        <Button
+                          type="bare"
+                          onClick={() => setSimplefinMenuOpen(true)}
+                          aria-label="Menu"
+                        >
+                          <SvgDotsHorizontalTriple
+                            width={15}
+                            height={15}
+                            style={{ transform: 'rotateZ(90deg)' }}
+                          />
+                          {menuSimplefinOpen && (
+                            <Tooltip
+                              position="bottom-right"
+                              width={200}
+                              style={{ padding: 0 }}
+                              onClose={() => setSimplefinMenuOpen(false)}
+                            >
+                              <Menu
+                                onMenuSelect={item => {
+                                  if (item === 'reconfigure') {
+                                    onSimpleFinReset();
+                                  }
+                                }}
+                                items={[
+                                  {
+                                    name: 'reconfigure',
+                                    text: 'Reset SimpleFIN credentials',
+                                  },
+                                ]}
+                              />
+                            </Tooltip>
+                          )}
+                        </Button>
+                      )}
+                    </View>
                     <Text style={{ lineHeight: '1.4em', fontSize: 15 }}>
                       <strong>
                         Link a <em>North American</em> bank account
@@ -236,7 +357,7 @@ export function CreateAccountModal({
                     to="https://actualbudget.org/docs/advanced/bank-sync"
                     linkColor="muted"
                   >
-                    automatic syncing.
+                    automatic syncing
                   </Link>
                   .
                 </Paragraph>

packages/desktop-client/src/components/modals/GoCardlessExternalMsg.tsx

@@ -11,16 +11,13 @@ import {
 
 import { useGoCardlessStatus } from '../../hooks/useGoCardlessStatus';
 import { AnimatedLoading } from '../../icons/AnimatedLoading';
-import { SvgDotsHorizontalTriple } from '../../icons/v1';
 import { theme } from '../../style';
 import { Error, Warning } from '../alerts';
 import { Autocomplete } from '../autocomplete/Autocomplete';
 import { Button } from '../common/Button';
 import { Link } from '../common/Link';
-import { Menu } from '../common/Menu';
 import { Modal } from '../common/Modal';
 import { Paragraph } from '../common/Paragraph';
-import { Popover } from '../common/Popover';
 import { View } from '../common/View';
 import { FormField, FormLabel } from '../forms';
 import { type CommonModalProps } from '../Modals';
@@ -101,9 +98,7 @@ export function GoCardlessExternalMsg({
   const [isGoCardlessSetupComplete, setIsGoCardlessSetupComplete] = useState<
     boolean | null
   >(null);
-  const [menuOpen, setMenuOpen] = useState<boolean>(false);
   const data = useRef<GoCardlessToken | null>(null);
-  const triggerRef = useRef(null);
 
   const {
     data: bankOptions,
@@ -230,39 +225,6 @@ export function GoCardlessExternalMsg({
           >
             Link bank in browser &rarr;
           </Button>
-          <Button
-            ref={triggerRef}
-            type="bare"
-            onClick={() => setMenuOpen(true)}
-            aria-label="Menu"
-          >
-            <SvgDotsHorizontalTriple
-              width={15}
-              height={15}
-              style={{ transform: 'rotateZ(90deg)' }}
-            />
-
-            <Popover
-              triggerRef={triggerRef}
-              isOpen={menuOpen}
-              style={{ width: 200 }}
-              onOpenChange={() => setMenuOpen(false)}
-            >
-              <Menu
-                onMenuSelect={item => {
-                  if (item === 'reconfigure') {
-                    onGoCardlessInit();
-                  }
-                }}
-                items={[
-                  {
-                    name: 'reconfigure',
-                    text: 'Set new API secrets',
-                  },
-                ]}
-              />
-            </Popover>
-          </Button>
         </View>
       </View>
     );

upcoming-release-notes/2870.md

+---
+category: Enhancements
+authors: [psybers]
+---
+
+Allow resetting SimpleFIN secrets and unify how bank sync secrets are reset.