Final PR for react-aria-components Modal migration (#3413)

* Final PR for react-aria-components Modal migration

* Complete manager modals migration

* Release notes

* fix lint

* Apps full height

* Fix lint error

* VRT

* Centralize providers

* Feedback

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

@@ -1,13 +1,16 @@
 // @ts-strict-ignore
 import React, { useEffect, useState } from 'react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import {
   ErrorBoundary,
   useErrorBoundary,
   type FallbackProps,
 } from 'react-error-boundary';
 import { HotkeysProvider } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
 
 import {
   closeBudget,
@@ -16,8 +19,8 @@ import {
   setAppState,
   sync,
 } from 'loot-core/client/actions';
+import { SpreadsheetProvider } from 'loot-core/client/SpreadsheetProvider';
 import * as Platform from 'loot-core/src/client/platform';
-import { type State } from 'loot-core/src/client/state-types';
 import {
   init as initConnection,
   send,
@@ -27,25 +30,25 @@ import { useMetadataPref } from '../hooks/useMetadataPref';
 import { installPolyfills } from '../polyfills';
 import { ResponsiveProvider } from '../ResponsiveProvider';
 import { styles, hasHiddenScrollbars, ThemeStyle } from '../style';
+import { ExposeNavigate } from '../util/router-tools';
 
 import { AppBackground } from './AppBackground';
+import { BudgetMonthCountProvider } from './budget/BudgetMonthCountContext';
 import { View } from './common/View';
 import { DevelopmentTopBar } from './DevelopmentTopBar';
 import { FatalError } from './FatalError';
 import { FinancesApp } from './FinancesApp';
 import { ManagementApp } from './manager/ManagementApp';
+import { Modals } from './Modals';
+import { ScrollProvider } from './ScrollProvider';
+import { SidebarProvider } from './sidebar/SidebarProvider';
 import { UpdateNotification } from './UpdateNotification';
 
-type AppInnerProps = {
-  budgetId: string;
-  cloudFileId: string;
-};
-
-function AppInner({ budgetId, cloudFileId }: AppInnerProps) {
+function AppInner() {
+  const [budgetId] = useMetadataPref('id');
+  const [cloudFileId] = useMetadataPref('cloudFileId');
   const { t } = useTranslation();
-  const [initializing, setInitializing] = useState(true);
   const { showBoundary: showErrorBoundary } = useErrorBoundary();
-  const loadingText = useSelector((state: State) => state.app.loadingText);
   const dispatch = useDispatch();
 
   async function init() {
@@ -74,9 +77,7 @@ function AppInner({ budgetId, cloudFileId }: AppInnerProps) {
     );
     const budgetId = await send('get-last-opened-backup');
     if (budgetId) {
-      await dispatch(
-        loadBudget(budgetId, t('Loading the last budget file...')),
-      );
+      await dispatch(loadBudget(budgetId));
 
       // Check to see if this file has been remotely deleted (but
       // don't block on this in case they are offline or something)
@@ -99,12 +100,7 @@ function AppInner({ budgetId, cloudFileId }: AppInnerProps) {
   useEffect(() => {
     async function initAll() {
       await Promise.all([installPolyfills(), init()]);
-      setInitializing(false);
-      dispatch(
-        setAppState({
-          loadingText: null,
-        }),
-      );
+      dispatch(setAppState({ loadingText: null }));
     }
 
     initAll().catch(showErrorBoundary);
@@ -114,21 +110,7 @@ function AppInner({ budgetId, cloudFileId }: AppInnerProps) {
     global.Actual.updateAppMenu(budgetId);
   }, [budgetId]);
 
-  return (
-    <>
-      {(initializing || !budgetId) && (
-        <AppBackground initializing={initializing} loadingText={loadingText} />
-      )}
-      {!initializing &&
-        (budgetId ? (
-          <FinancesApp />
-        ) : (
-          <ManagementApp isLoading={loadingText != null} />
-        ))}
-
-      <UpdateNotification />
-    </>
-  );
+  return budgetId ? <FinancesApp /> : <ManagementApp />;
 }
 
 function ErrorFallback({ error }: FallbackProps) {
@@ -141,8 +123,6 @@ function ErrorFallback({ error }: FallbackProps) {
 }
 
 export function App() {
-  const [budgetId] = useMetadataPref('id');
-  const [cloudFileId] = useMetadataPref('cloudFileId');
   const [hiddenScrollbars, setHiddenScrollbars] = useState(
     hasHiddenScrollbars(),
   );
@@ -176,29 +156,49 @@ export function App() {
   }, [dispatch]);
 
   return (
-    <HotkeysProvider initiallyActiveScopes={['*']}>
-      <ResponsiveProvider>
-        <View
-          style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
-        >
-          <View
-            key={hiddenScrollbars ? 'hidden-scrollbars' : 'scrollbars'}
-            style={{
-              flexGrow: 1,
-              overflow: 'hidden',
-              ...styles.lightScrollbar,
-            }}
-          >
-            <ErrorBoundary FallbackComponent={ErrorFallback}>
-              {process.env.REACT_APP_REVIEW_ID && !Platform.isPlaywright && (
-                <DevelopmentTopBar />
-              )}
-              <AppInner budgetId={budgetId} cloudFileId={cloudFileId} />
-            </ErrorBoundary>
-            <ThemeStyle />
-          </View>
-        </View>
-      </ResponsiveProvider>
-    </HotkeysProvider>
+    <BrowserRouter>
+      <ExposeNavigate />
+      <HotkeysProvider initiallyActiveScopes={['*']}>
+        <ResponsiveProvider>
+          <SpreadsheetProvider>
+            <SidebarProvider>
+              <BudgetMonthCountProvider>
+                <DndProvider backend={HTML5Backend}>
+                  <ScrollProvider>
+                    <View
+                      style={{
+                        height: '100%',
+                        display: 'flex',
+                        flexDirection: 'column',
+                      }}
+                    >
+                      <View
+                        key={
+                          hiddenScrollbars ? 'hidden-scrollbars' : 'scrollbars'
+                        }
+                        style={{
+                          flexGrow: 1,
+                          overflow: 'hidden',
+                          ...styles.lightScrollbar,
+                        }}
+                      >
+                        <ErrorBoundary FallbackComponent={ErrorFallback}>
+                          {process.env.REACT_APP_REVIEW_ID &&
+                            !Platform.isPlaywright && <DevelopmentTopBar />}
+                          <AppInner />
+                        </ErrorBoundary>
+                        <ThemeStyle />
+                        <Modals />
+                        <UpdateNotification />
+                      </View>
+                    </View>
+                  </ScrollProvider>
+                </DndProvider>
+              </BudgetMonthCountProvider>
+            </SidebarProvider>
+          </SpreadsheetProvider>
+        </ResponsiveProvider>
+      </HotkeysProvider>
+    </BrowserRouter>
   );
 }

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import { useTransition, animated } from 'react-spring';
 
 import { css } from 'glamor';
@@ -11,14 +12,12 @@ import { Block } from './common/Block';
 import { View } from './common/View';
 
 type AppBackgroundProps = {
-  initializing?: boolean;
-  loadingText?: string;
+  isLoading?: boolean;
 };
 
-export function AppBackground({
-  initializing,
-  loadingText,
-}: AppBackgroundProps) {
+export function AppBackground({ isLoading }: AppBackgroundProps) {
+  const loadingText = useSelector(state => state.app.loadingText);
+  const showLoading = isLoading || loadingText !== null;
   const transitions = useTransition(loadingText, {
     from: { opacity: 0, transform: 'translateY(-100px)' },
     enter: { opacity: 1, transform: 'translateY(0)' },
@@ -30,7 +29,7 @@ export function AppBackground({
     <>
       <Background />
 
-      {(loadingText != null || initializing) &&
+      {showLoading &&
         transitions((style, item) => (
           <animated.div key={item} style={style}>
             <View

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

@@ -5,7 +5,7 @@ import { LazyLoadFailedError } from 'loot-core/src/shared/errors';
 import { Block } from './common/Block';
 import { Button } from './common/Button2';
 import { Link } from './common/Link';
-import { Modal } from './common/Modal';
+import { Modal, ModalHeader } from './common/Modal';
 import { Paragraph } from './common/Paragraph';
 import { Stack } from './common/Stack';
 import { Text } from './common/Text';
@@ -176,7 +176,8 @@ export function FatalError({ error }: FatalErrorProps) {
   const isLazyLoadError = error instanceof LazyLoadFailedError;
 
   return (
-    <Modal isCurrent title={isLazyLoadError ? 'Loading Error' : 'Fatal Error'}>
+    <Modal name="fatal-error" isDismissable={false}>
+      <ModalHeader title={isLazyLoadError ? 'Loading Error' : 'Fatal Error'} />
       <View
         style={{
           maxWidth: 500,