Fix error on budget file selection page when using server (#4670)

* Fix error on budget file selection page when using server

* Release notes

packages/desktop-client/src/components/Modals.tsx

@@ -13,7 +13,7 @@ import { useDispatch } from '../redux';
 import { EditSyncAccount } from './banksync/EditSyncAccount';
 import { AccountAutocompleteModal } from './modals/AccountAutocompleteModal';
 import { AccountMenuModal } from './modals/AccountMenuModal';
-import { BudgetFileSelectionModal } from './modals/BudgetListModal';
+import { BudgetFileSelectionModal } from './modals/BudgetFileSelectionModal';
 import { BudgetPageMenuModal } from './modals/BudgetPageMenuModal';
 import { CategoryAutocompleteModal } from './modals/CategoryAutocompleteModal';
 import { CategoryGroupMenuModal } from './modals/CategoryGroupMenuModal';
@@ -335,7 +335,7 @@ export function Modals() {
             </NamespaceContext.Provider>
           );
 
-        case 'budget-list':
+        case 'budget-file-selection':
           return <BudgetFileSelectionModal key={name} />;
         case 'delete-budget':
           return <DeleteFileModal key={name} {...modal.options} />;

packages/desktop-client/src/components/manager/BudgetFileSelection.tsx

@@ -419,17 +419,21 @@ function BudgetFileList({
         </Text>
       )}
     >
-      {file => (
-        <BudgetFileListItem
-          key={isLocalFile(file) ? file.id : file.cloudFileId}
-          value={file}
-          currentUserId={currentUserId}
-          quickSwitchMode={quickSwitchMode}
-          onSelect={onSelect}
-          onDelete={onDelete}
-          onDuplicate={onDuplicate}
-        />
-      )}
+      {file => {
+        const id = isLocalFile(file) ? file.id : file.cloudFileId;
+        return (
+          <BudgetFileListItem
+            key={id}
+            id={id}
+            value={file}
+            currentUserId={currentUserId}
+            quickSwitchMode={quickSwitchMode}
+            onSelect={onSelect}
+            onDelete={onDelete}
+            onDuplicate={onDuplicate}
+          />
+        );
+      }}
     </GridList>
   );
 }

packages/desktop-client/src/components/mobile/budget/index.tsx

@@ -498,7 +498,7 @@ export function Budget() {
   );
 
   const onSwitchBudgetFile = useCallback(() => {
-    dispatch(pushModal({ modal: { name: 'budget-list' } }));
+    dispatch(pushModal({ modal: { name: 'budget-file-selection' } }));
   }, [dispatch]);
 
   const onOpenBudgetMonthMenu = useCallback(

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

@@ -17,7 +17,7 @@ export function BudgetFileSelectionModal() {
   );
 
   return (
-    <Modal name="budget-list">
+    <Modal name="budget-file-selection">
       {({ state: { close } }) => (
         <>
           <ModalHeader