From b5cbaa52b236c358c4492528a8e4b3752b79bb8c Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Tue, 18 Mar 2025 06:43:01 -0700
Subject: [PATCH] Simplify Modals component by destructuring modal.options
 instead of passing options one by one (#4647)

* Simplify Modals component

* Release notes
---
 .../desktop-client/src/components/Modals.tsx  | 385 +++---------------
 upcoming-release-notes/4647.md                |   6 +
 2 files changed, 58 insertions(+), 333 deletions(-)
 create mode 100644 upcoming-release-notes/4647.md

diff --git a/packages/desktop-client/src/components/Modals.tsx b/packages/desktop-client/src/components/Modals.tsx
index cb32f3e7c2..da7236595b 100644
--- a/packages/desktop-client/src/components/Modals.tsx
+++ b/packages/desktop-client/src/components/Modals.tsx
@@ -106,72 +106,29 @@ export function Modals() {
           return <ImportTransactionsModal key={name} {...modal.options} />;
 
         case 'add-account':
-          return (
-            <CreateAccountModal
-              key={name}
-              upgradingAccountId={modal.options.upgradingAccountId}
-            />
-          );
+          return <CreateAccountModal key={name} {...modal.options} />;
 
         case 'add-local-account':
           return <CreateLocalAccountModal key={name} />;
 
         case 'close-account':
-          return (
-            <CloseAccountModal
-              key={name}
-              account={modal.options.account}
-              balance={modal.options.balance}
-              canDelete={modal.options.canDelete}
-            />
-          );
+          return <CloseAccountModal key={name} {...modal.options} />;
 
         case 'select-linked-accounts':
-          return (
-            <SelectLinkedAccountsModal
-              key={name}
-              externalAccounts={modal.options.externalAccounts}
-              requisitionId={modal.options.requisitionId}
-              syncSource={modal.options.syncSource}
-            />
-          );
+          return <SelectLinkedAccountsModal key={name} {...modal.options} />;
 
         case 'confirm-category-delete':
-          return (
-            <ConfirmCategoryDeleteModal
-              key={name}
-              category={modal.options.category}
-              group={modal.options.group}
-              onDelete={modal.options.onDelete}
-            />
-          );
+          return <ConfirmCategoryDeleteModal key={name} {...modal.options} />;
 
         case 'confirm-unlink-account':
-          return (
-            <ConfirmUnlinkAccountModal
-              key={name}
-              accountName={modal.options.accountName}
-              onUnlink={modal.options.onUnlink}
-            />
-          );
+          return <ConfirmUnlinkAccountModal key={name} {...modal.options} />;
 
         case 'confirm-transaction-edit':
-          return (
-            <ConfirmTransactionEditModal
-              key={name}
-              onCancel={modal.options.onCancel}
-              onConfirm={modal.options.onConfirm}
-              confirmReason={modal.options.confirmReason}
-            />
-          );
+          return <ConfirmTransactionEditModal key={name} {...modal.options} />;
 
         case 'confirm-transaction-delete':
           return (
-            <ConfirmTransactionDeleteModal
-              key={name}
-              message={modal.options.message}
-              onConfirm={modal.options.onConfirm}
-            />
+            <ConfirmTransactionDeleteModal key={name} {...modal.options} />
           );
 
         case 'load-backup':
@@ -179,150 +136,67 @@ export function Modals() {
             <LoadBackupModal
               key={name}
               watchUpdates
-              budgetId={modal.options.budgetId}
+              {...modal.options}
               backupDisabled={false}
             />
           );
 
         case 'manage-rules':
-          return (
-            <ManageRulesModal key={name} payeeId={modal.options.payeeId} />
-          );
+          return <ManageRulesModal key={name} {...modal.options} />;
 
         case 'edit-rule':
-          return (
-            <EditRuleModal
-              key={name}
-              rule={modal.options.rule}
-              onSave={modal.options.onSave}
-            />
-          );
+          return <EditRuleModal key={name} {...modal.options} />;
 
         case 'merge-unused-payees':
-          return (
-            <MergeUnusedPayeesModal
-              key={name}
-              payeeIds={modal.options.payeeIds}
-              targetPayeeId={modal.options.targetPayeeId}
-            />
-          );
+          return <MergeUnusedPayeesModal key={name} {...modal.options} />;
 
         case 'gocardless-init':
-          return (
-            <GoCardlessInitialiseModal
-              key={name}
-              onSuccess={modal.options.onSuccess}
-            />
-          );
+          return <GoCardlessInitialiseModal key={name} {...modal.options} />;
 
         case 'simplefin-init':
-          return (
-            <SimpleFinInitialiseModal
-              key={name}
-              onSuccess={modal.options.onSuccess}
-            />
-          );
+          return <SimpleFinInitialiseModal key={name} {...modal.options} />;
 
         case 'pluggyai-init':
-          return (
-            <PluggyAiInitialiseModal
-              key={name}
-              onSuccess={modal.options.onSuccess}
-            />
-          );
+          return <PluggyAiInitialiseModal key={name} {...modal.options} />;
 
         case 'gocardless-external-msg':
           return (
             <GoCardlessExternalMsgModal
               key={name}
-              onMoveExternal={modal.options.onMoveExternal}
+              {...modal.options}
               onClose={() => {
                 modal.options.onClose?.();
                 send('gocardless-poll-web-token-stop');
               }}
-              onSuccess={modal.options.onSuccess}
             />
           );
 
         case 'create-encryption-key':
-          return (
-            <CreateEncryptionKeyModal
-              key={name}
-              recreate={modal.options.recreate}
-            />
-          );
+          return <CreateEncryptionKeyModal key={name} {...modal.options} />;
 
         case 'fix-encryption-key':
-          return (
-            <FixEncryptionKeyModal
-              key={name}
-              cloudFileId={modal.options.cloudFileId}
-              hasExistingKey={modal.options.hasExistingKey}
-              onSuccess={modal.options.onSuccess}
-            />
-          );
+          return <FixEncryptionKeyModal key={name} {...modal.options} />;
 
         case 'edit-field':
-          return (
-            <EditFieldModal
-              key={name}
-              name={modal.options.name}
-              onSubmit={modal.options.onSubmit}
-              onClose={modal.options.onClose}
-            />
-          );
+          return <EditFieldModal key={name} {...modal.options} />;
 
         case 'category-autocomplete':
-          return (
-            <CategoryAutocompleteModal
-              key={name}
-              onSelect={modal.options.onSelect}
-              categoryGroups={modal.options.categoryGroups}
-              showHiddenCategories={modal.options.showHiddenCategories}
-              month={modal.options.month}
-              onClose={modal.options.onClose}
-            />
-          );
+          return <CategoryAutocompleteModal key={name} {...modal.options} />;
 
         case 'account-autocomplete':
-          return (
-            <AccountAutocompleteModal
-              key={name}
-              onSelect={modal.options.onSelect}
-              includeClosedAccounts={modal.options.includeClosedAccounts}
-              onClose={modal.options.onClose}
-            />
-          );
+          return <AccountAutocompleteModal key={name} {...modal.options} />;
 
         case 'payee-autocomplete':
-          return (
-            <PayeeAutocompleteModal
-              key={name}
-              onSelect={modal.options.onSelect}
-              onClose={modal.options.onClose}
-            />
-          );
+          return <PayeeAutocompleteModal key={name} {...modal.options} />;
 
         case 'payee-category-learning':
           return <CategoryLearning key={name} />;
 
         case 'new-category':
-          return (
-            <NewCategoryModal
-              key={name}
-              onValidate={modal.options.onValidate}
-              onSubmit={modal.options.onSubmit}
-            />
-          );
+          return <NewCategoryModal key={name} {...modal.options} />;
 
         case 'new-category-group':
-          return (
-            <NewCategoryGroupModal
-              key={name}
-              onValidate={modal.options.onValidate}
-              onSubmit={modal.options.onSubmit}
-            />
-          );
+          return <NewCategoryGroupModal key={name} {...modal.options} />;
 
         case 'envelope-budget-summary':
           return (
@@ -330,41 +204,18 @@ export function Modals() {
               key={name}
               value={monthUtils.sheetForMonth(modal.options.month)}
             >
-              <EnvelopeBudgetSummaryModal
-                key={name}
-                month={modal.options.month}
-                onBudgetAction={modal.options.onBudgetAction}
-              />
+              <EnvelopeBudgetSummaryModal key={name} {...modal.options} />
             </NamespaceContext.Provider>
           );
 
         case 'tracking-budget-summary':
-          return (
-            <TrackingBudgetSummaryModal
-              key={name}
-              month={modal.options.month}
-            />
-          );
+          return <TrackingBudgetSummaryModal key={name} {...modal.options} />;
 
         case 'schedule-edit':
-          return (
-            <ScheduleDetails
-              key={name}
-              id={modal.options.id || null}
-              transaction={modal.options.transaction || null}
-            />
-          );
+          return <ScheduleDetails key={name} {...modal.options} />;
 
         case 'schedule-link':
-          return (
-            <ScheduleLink
-              key={name}
-              transactionIds={modal.options.transactionIds}
-              getTransaction={modal.options.getTransaction}
-              accountName={modal.options.accountName}
-              onScheduleLinked={modal.options.onScheduleLinked}
-            />
-          );
+          return <ScheduleLink key={name} {...modal.options} />;
 
         case 'schedules-discover':
           return <DiscoverSchedules key={name} />;
@@ -376,33 +227,13 @@ export function Modals() {
           return <PostsOfflineNotification key={name} />;
 
         case 'synced-account-edit':
-          return <EditSyncAccount key={name} account={modal.options.account} />;
+          return <EditSyncAccount key={name} {...modal.options} />;
 
         case 'account-menu':
-          return (
-            <AccountMenuModal
-              key={name}
-              accountId={modal.options.accountId}
-              onSave={modal.options.onSave}
-              onEditNotes={modal.options.onEditNotes}
-              onCloseAccount={modal.options.onCloseAccount}
-              onReopenAccount={modal.options.onReopenAccount}
-              onClose={modal.options.onClose}
-            />
-          );
+          return <AccountMenuModal key={name} {...modal.options} />;
 
         case 'category-menu':
-          return (
-            <CategoryMenuModal
-              key={name}
-              categoryId={modal.options.categoryId}
-              onSave={modal.options.onSave}
-              onEditNotes={modal.options.onEditNotes}
-              onDelete={modal.options.onDelete}
-              onToggleVisibility={modal.options.onToggleVisibility}
-              onClose={modal.options.onClose}
-            />
-          );
+          return <CategoryMenuModal key={name} {...modal.options} />;
 
         case 'envelope-budget-menu':
           return (
@@ -410,13 +241,7 @@ export function Modals() {
               key={name}
               value={monthUtils.sheetForMonth(modal.options.month)}
             >
-              <EnvelopeBudgetMenuModal
-                categoryId={modal.options.categoryId}
-                onUpdateBudget={modal.options.onUpdateBudget}
-                onCopyLastMonthAverage={modal.options.onCopyLastMonthAverage}
-                onSetMonthsAverage={modal.options.onSetMonthsAverage}
-                onApplyBudgetTemplate={modal.options.onApplyBudgetTemplate}
-              />
+              <EnvelopeBudgetMenuModal {...modal.options} />
             </NamespaceContext.Provider>
           );
 
@@ -426,39 +251,15 @@ export function Modals() {
               key={name}
               value={monthUtils.sheetForMonth(modal.options.month)}
             >
-              <TrackingBudgetMenuModal
-                categoryId={modal.options.categoryId}
-                onUpdateBudget={modal.options.onUpdateBudget}
-                onCopyLastMonthAverage={modal.options.onCopyLastMonthAverage}
-                onSetMonthsAverage={modal.options.onSetMonthsAverage}
-                onApplyBudgetTemplate={modal.options.onApplyBudgetTemplate}
-              />
+              <TrackingBudgetMenuModal {...modal.options} />
             </NamespaceContext.Provider>
           );
 
         case 'category-group-menu':
-          return (
-            <CategoryGroupMenuModal
-              key={name}
-              groupId={modal.options.groupId}
-              onSave={modal.options.onSave}
-              onAddCategory={modal.options.onAddCategory}
-              onEditNotes={modal.options.onEditNotes}
-              onDelete={modal.options.onDelete}
-              onToggleVisibility={modal.options.onToggleVisibility}
-              onClose={modal.options.onClose}
-            />
-          );
+          return <CategoryGroupMenuModal key={name} {...modal.options} />;
 
         case 'notes':
-          return (
-            <NotesModal
-              key={name}
-              id={modal.options.id}
-              name={modal.options.name}
-              onSave={modal.options.onSave}
-            />
-          );
+          return <NotesModal key={name} {...modal.options} />;
 
         case 'envelope-balance-menu':
           return (
@@ -466,12 +267,7 @@ export function Modals() {
               key={name}
               value={monthUtils.sheetForMonth(modal.options.month)}
             >
-              <EnvelopeBalanceMenuModal
-                categoryId={modal.options.categoryId}
-                onCarryover={modal.options.onCarryover}
-                onTransfer={modal.options.onTransfer}
-                onCover={modal.options.onCover}
-              />
+              <EnvelopeBalanceMenuModal {...modal.options} />
             </NamespaceContext.Provider>
           );
 
@@ -481,12 +277,7 @@ export function Modals() {
               key={name}
               value={monthUtils.sheetForMonth(modal.options.month)}
             >
-              <EnvelopeToBudgetMenuModal
-                onTransfer={modal.options.onTransfer}
-                onCover={modal.options.onCover}
-                onHoldBuffer={modal.options.onHoldBuffer}
-                onResetHoldBuffer={modal.options.onResetHoldBuffer}
-              />
+              <EnvelopeToBudgetMenuModal {...modal.options} />
             </NamespaceContext.Provider>
           );
 
@@ -496,10 +287,7 @@ export function Modals() {
               key={name}
               value={monthUtils.sheetForMonth(modal.options.month)}
             >
-              <HoldBufferModal
-                month={modal.options.month}
-                onSubmit={modal.options.onSubmit}
-              />
+              <HoldBufferModal {...modal.options} />
             </NamespaceContext.Provider>
           );
 
@@ -509,58 +297,23 @@ export function Modals() {
               key={name}
               value={monthUtils.sheetForMonth(modal.options.month)}
             >
-              <TrackingBalanceMenuModal
-                categoryId={modal.options.categoryId}
-                onCarryover={modal.options.onCarryover}
-              />
+              <TrackingBalanceMenuModal {...modal.options} />
             </NamespaceContext.Provider>
           );
 
         case 'transfer':
-          return (
-            <TransferModal
-              key={name}
-              title={modal.options.title}
-              categoryId={modal.options.categoryId}
-              month={modal.options.month}
-              amount={modal.options.amount}
-              onSubmit={modal.options.onSubmit}
-              showToBeBudgeted={modal.options.showToBeBudgeted}
-            />
-          );
+          return <TransferModal key={name} {...modal.options} />;
 
         case 'cover':
-          return (
-            <CoverModal
-              key={name}
-              title={modal.options.title}
-              categoryId={modal.options.categoryId}
-              month={modal.options.month}
-              showToBeBudgeted={modal.options.showToBeBudgeted}
-              onSubmit={modal.options.onSubmit}
-            />
-          );
+          return <CoverModal key={name} {...modal.options} />;
 
         case 'scheduled-transaction-menu':
           return (
-            <ScheduledTransactionMenuModal
-              key={name}
-              transactionId={modal.options.transactionId}
-              onPost={modal.options.onPost}
-              onSkip={modal.options.onSkip}
-              onComplete={modal.options.onComplete}
-            />
+            <ScheduledTransactionMenuModal key={name} {...modal.options} />
           );
 
         case 'budget-page-menu':
-          return (
-            <BudgetPageMenuModal
-              key={name}
-              onAddCategoryGroup={modal.options.onAddCategoryGroup}
-              onToggleHiddenCategories={modal.options.onToggleHiddenCategories}
-              onSwitchBudgetFile={modal.options.onSwitchBudgetFile}
-            />
-          );
+          return <BudgetPageMenuModal key={name} {...modal.options} />;
 
         case 'envelope-budget-month-menu':
           return (
@@ -568,11 +321,7 @@ export function Modals() {
               key={name}
               value={monthUtils.sheetForMonth(modal.options.month)}
             >
-              <EnvelopeBudgetMonthMenuModal
-                month={modal.options.month}
-                onBudgetAction={modal.options.onBudgetAction}
-                onEditNotes={modal.options.onEditNotes}
-              />
+              <EnvelopeBudgetMonthMenuModal {...modal.options} />
             </NamespaceContext.Provider>
           );
 
@@ -582,39 +331,23 @@ export function Modals() {
               key={name}
               value={monthUtils.sheetForMonth(modal.options.month)}
             >
-              <TrackingBudgetMonthMenuModal
-                month={modal.options.month}
-                onBudgetAction={modal.options.onBudgetAction}
-                onEditNotes={modal.options.onEditNotes}
-              />
+              <TrackingBudgetMonthMenuModal {...modal.options} />
             </NamespaceContext.Provider>
           );
 
         case 'budget-list':
           return <BudgetListModal key={name} />;
         case 'delete-budget':
-          return <DeleteFileModal key={name} file={modal.options.file} />;
+          return <DeleteFileModal key={name} {...modal.options} />;
         case 'duplicate-budget':
-          return (
-            <DuplicateFileModal
-              key={name}
-              file={modal.options.file}
-              managePage={modal.options.managePage}
-              loadBudget={modal.options.loadBudget}
-              onComplete={modal.options.onComplete}
-            />
-          );
+          return <DuplicateFileModal key={name} {...modal.options} />;
         case 'import':
           return <ImportModal key={name} />;
         case 'files-settings':
           return <FilesSettingsModal key={name} />;
         case 'confirm-change-document-dir':
           return (
-            <ConfirmChangeDocumentDirModal
-              key={name}
-              currentBudgetDirectory={modal.options.currentBudgetDirectory}
-              newDirectory={modal.options.newDirectory}
-            />
+            <ConfirmChangeDocumentDirModal key={name} {...modal.options} />
           );
         case 'import-ynab4':
           return <ImportYNAB4Modal key={name} />;
@@ -627,33 +360,19 @@ export function Modals() {
           return <OutOfSyncMigrationsModal key={name} />;
 
         case 'edit-access':
-          return (
-            <EditUserAccess
-              key={name}
-              access={modal.options.access}
-              onSave={modal.options.onSave}
-            />
-          );
+          return <EditUserAccess key={name} {...modal.options} />;
 
         case 'edit-user':
-          return (
-            <EditUserFinanceApp
-              key={name}
-              user={modal.options.user}
-              onSave={modal.options.onSave}
-            />
-          );
+          return <EditUserFinanceApp key={name} {...modal.options} />;
 
         case 'transfer-ownership':
-          return <TransferOwnership key={name} onSave={modal.options.onSave} />;
+          return <TransferOwnership key={name} {...modal.options} />;
 
         case 'enable-openid':
-          return <OpenIDEnableModal key={name} onSave={modal.options.onSave} />;
+          return <OpenIDEnableModal key={name} {...modal.options} />;
 
         case 'enable-password-auth':
-          return (
-            <PasswordEnableModal key={name} onSave={modal.options.onSave} />
-          );
+          return <PasswordEnableModal key={name} {...modal.options} />;
 
         default:
           throw new Error('Unknown modal');
diff --git a/upcoming-release-notes/4647.md b/upcoming-release-notes/4647.md
new file mode 100644
index 0000000000..709f224a46
--- /dev/null
+++ b/upcoming-release-notes/4647.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Simplify Modals component by destructuring modal.options instead of one by one. This would remove the need to modify Modals component to pass in new option whenever a new one is added.