Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 9 commits into from
Sep 11, 2024
Merged

Conversation

joel-jeremy
Copy link
Contributor

@joel-jeremy joel-jeremy commented Sep 10, 2024

Please bear with me on this large PR. Changes made:

  1. Delete old Modal component and renamed Modal2 to Modal
  2. Moved all modals to a single Modals components instead of 2 separate
  3. Fixed some quirks on loading screen
  4. Made Management app full screen
  5. Renamed ModalCloseButton onClick to onPress to match Button2 naming
  6. Centralized Providers on top level (App.tsx) since Modals depend on some of the providers

@actual-github-bot actual-github-bot bot changed the title Final PR for react-aria-components Modal migration [WIP] Final PR for react-aria-components Modal migration Sep 10, 2024
Copy link

netlify bot commented Sep 10, 2024

Deploy Preview for actualbudget ready!

Name Link
🔨 Latest commit 292d34d
🔍 Latest deploy log https://app.netlify.com/sites/actualbudget/deploys/66e0c8a3b011f300080fa74b
😎 Deploy Preview https://deploy-preview-3413.demo.actualbudget.org
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Contributor

github-actions bot commented Sep 10, 2024

Bundle Stats — desktop-client

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count Total bundle size % Changed
9 5.22 MB → 5.16 MB (-59.29 kB) -1.11%
Changeset (largest 100 files by percent change)
File Δ Size
src/components/modals/ImportTransactionsModal.jsx 🆕 +52.18 kB 0 B → 52.18 kB
src/components/modals/EditRuleModal.jsx 🆕 +37.27 kB 0 B → 37.27 kB
src/components/modals/GoCardlessExternalMsgModal.tsx 🆕 +9.04 kB 0 B → 9.04 kB
src/components/modals/EditFieldModal.jsx 🆕 +7.58 kB 0 B → 7.58 kB
src/components/modals/SelectLinkedAccountsModal.jsx 🆕 +7.18 kB 0 B → 7.18 kB
src/components/modals/MergeUnusedPayeesModal.jsx 🆕 +6.28 kB 0 B → 6.28 kB
src/components/modals/LoadBackupModal.jsx 🆕 +5.3 kB 0 B → 5.3 kB
src/components/modals/manager/DeleteFileModal.tsx 🆕 +4.79 kB 0 B → 4.79 kB
src/components/modals/ConfirmCategoryDeleteModal.tsx 🆕 +4.74 kB 0 B → 4.74 kB
src/components/modals/manager/ImportModal.tsx 🆕 +4.07 kB 0 B → 4.07 kB
src/components/modals/manager/ImportActualModal.tsx 🆕 +3.97 kB 0 B → 3.97 kB
src/components/modals/GoCardlessInitialiseModal.tsx 🆕 +3.87 kB 0 B → 3.87 kB
src/components/modals/ConfirmTransactionEditModal.tsx 🆕 +3.6 kB 0 B → 3.6 kB
src/components/modals/manager/ImportYNAB4Modal.tsx 🆕 +3.58 kB 0 B → 3.58 kB
src/components/modals/manager/ImportYNAB5Modal.tsx 🆕 +3.57 kB 0 B → 3.57 kB
src/components/modals/SimpleFinInitialiseModal.tsx 🆕 +2.88 kB 0 B → 2.88 kB
src/components/modals/ConfirmUnlinkAccountModal.tsx 🆕 +2.11 kB 0 B → 2.11 kB
src/components/modals/ConfirmTransactionDeleteModal.tsx 🆕 +1.92 kB 0 B → 1.92 kB
src/components/util/countries.ts 🆕 +1.34 kB 0 B → 1.34 kB
src/components/gocardless/GoCardlessLink.tsx 📈 +139 B (+23.32%) 596 B → 735 B
src/components/App.tsx 📈 +531 B (+11.28%) 4.6 kB → 5.12 kB
src/components/AppBackground.tsx 📈 +84 B (+5.93%) 1.38 kB → 1.46 kB
src/components/Modals.tsx 📈 +819 B (+5.66%) 14.13 kB → 14.93 kB
src/components/common/Modal.tsx 📈 +346 B (+3.79%) 8.92 kB → 9.26 kB
node_modules/react-is/cjs/react-is.production.min.js 📈 +89 B (+3.33%) 2.61 kB → 2.7 kB
src/components/FatalError.tsx 📈 +187 B (+2.68%) 6.81 kB → 6.99 kB
node_modules/dnd-core/dist/contracts.js 📈 +14 B (+1.41%) 991 B → 1005 B
node_modules/react-is/index.js 📈 +2 B (+1.28%) 156 B → 158 B
home/runner/work/actual/actual/packages/loot-core/src/client/actions/backups.ts 📈 +6 B (+1.14%) 528 B → 534 B
src/hooks/useModalState.ts 📈 +7 B (+1.07%) 657 B → 664 B
node_modules/react-dnd/dist/hooks/useDrag/useDragType.js 📈 +2 B (+0.91%) 219 B → 221 B
node_modules/react-dnd/dist/hooks/useDragDropManager.js 📈 +2 B (+0.76%) 264 B → 266 B
src/gocardless.ts 📈 +7 B (+0.73%) 955 B → 962 B
node_modules/dnd-core/dist/actions/dragDrop/hover.js 📈 +10 B (+0.47%) 2.08 kB → 2.09 kB
node_modules/react-dnd/dist/hooks/useDrop/useAccept.js 📈 +2 B (+0.41%) 483 B → 485 B
src/components/manager/subscribe/Error.tsx 📈 +4 B (+0.40%) 1005 B → 1009 B
node_modules/dnd-core/dist/classes/HandlerRegistryImpl.js 📈 +16 B (+0.39%) 4.03 kB → 4.05 kB
node_modules/dnd-core/dist/actions/dragDrop/endDrag.js 📈 +2 B (+0.33%) 613 B → 615 B
src/components/manager/BudgetList.tsx 📈 +30 B (+0.29%) 10.07 kB → 10.09 kB
node_modules/@react-dnd/invariant/dist/index.js 📈 +2 B (+0.28%) 715 B → 717 B
node_modules/dnd-core/dist/actions/dragDrop/beginDrag.js 📈 +8 B (+0.27%) 2.89 kB → 2.89 kB
node_modules/react-dnd/dist/hooks/useDrag/useDrag.js 📈 +2 B (+0.24%) 821 B → 823 B
node_modules/dnd-core/dist/actions/dragDrop/drop.js 📈 +6 B (+0.24%) 2.49 kB → 2.5 kB
node_modules/dnd-core/dist/classes/DragDropMonitorImpl.js 📈 +12 B (+0.23%) 5.06 kB → 5.07 kB
node_modules/@react-dnd/asap/dist/makeRequestCall.js 📈 +6 B (+0.17%) 3.36 kB → 3.37 kB
src/components/modals/CreateAccountModal.tsx 📈 +26 B (+0.17%) 14.7 kB → 14.72 kB
node_modules/dnd-core/dist/reducers/dragOperation.js 📈 +4 B (+0.15%) 2.54 kB → 2.54 kB
node_modules/react-dnd/dist/internals/DragSourceMonitorImpl.js 📈 +4 B (+0.14%) 2.88 kB → 2.88 kB
node_modules/react-dnd/dist/internals/DropTargetMonitorImpl.js 📈 +2 B (+0.10%) 2.05 kB → 2.05 kB
src/components/settings/Format.tsx 📈 +4 B (+0.09%) 4.5 kB → 4.5 kB
node_modules/react-dnd/dist/internals/wrapConnectorHooks.js 📈 +2 B (+0.07%) 2.84 kB → 2.84 kB
node_modules/yallist/yallist.js 📈 +4 B (+0.05%) 8.44 kB → 8.45 kB
node_modules/react-router-dom/dist/index.js 📉 -4 B (-0.03%) 11.37 kB → 11.37 kB
node_modules/@remix-run/router/dist/router.js 📉 -14 B (-0.05%) 28.42 kB → 28.41 kB
node_modules/react-router/dist/index.js 📉 -32 B (-0.16%) 19.9 kB → 19.87 kB
src/components/accounts/AccountSyncCheck.jsx 📉 -10 B (-0.18%) 5.42 kB → 5.41 kB
node_modules/react-error-boundary/dist/react-error-boundary.esm.js 📉 -8 B (-0.19%) 4.09 kB → 4.08 kB
node_modules/glamor/lib/CSSPropertyOperations/dangerousStyleValue.js 📉 -2 B (-0.22%) 890 B → 888 B
node_modules/glamor/lib/plugins.js 📉 -8 B (-0.26%) 3 kB → 2.99 kB
node_modules/glamor/lib/CSSPropertyOperations/index.js 📉 -6 B (-0.37%) 1.57 kB → 1.56 kB
node_modules/glamor/lib/index.js 📉 -194 B (-0.86%) 21.99 kB → 21.8 kB
home/runner/work/actual/actual/packages/loot-core/src/client/actions/budgets.ts 📉 -52 B (-0.93%) 5.43 kB → 5.38 kB
node_modules/compute-scroll-into-view/dist/index.js 📉 -30 B (-1.11%) 2.63 kB → 2.6 kB
home/runner/work/actual/actual/packages/loot-core/src/client/update-notification.ts 📉 -11 B (-1.24%) 889 B → 878 B
node_modules/fbjs/lib/warning.js 📉 -6 B (-6.25%) 96 B → 90 B
src/components/manager/ManagementApp.jsx 📉 -918 B (-12.95%) 6.92 kB → 6.02 kB
node_modules/glamor/lib/index.js?commonjs-exports 📉 -2 B (-13.33%) 15 B → 13 B
src/components/FinancesApp.tsx 📉 -1.52 kB (-15.69%) 9.71 kB → 8.19 kB
src/components/modals/ImportTransactions.jsx 🔥 -51.77 kB (-100%) 51.77 kB → 0 B
src/components/modals/EditRule.jsx 🔥 -37.23 kB (-100%) 37.23 kB → 0 B
node_modules/react-modal/lib/components/ModalPortal.js 🔥 -15.25 kB (-100%) 15.25 kB → 0 B
node_modules/react-modal/lib/components/Modal.js 🔥 -10.71 kB (-100%) 10.71 kB → 0 B
src/components/common/Modal2.tsx 🔥 -9.27 kB (-100%) 9.27 kB → 0 B
src/components/modals/GoCardlessExternalMsg.tsx 🔥 -9.03 kB (-100%) 9.03 kB → 0 B
src/components/modals/EditField.jsx 🔥 -7.57 kB (-100%) 7.57 kB → 0 B
src/components/modals/SelectLinkedAccounts.jsx 🔥 -7.17 kB (-100%) 7.17 kB → 0 B
src/components/modals/MergeUnusedPayees.jsx 🔥 -6.31 kB (-100%) 6.31 kB → 0 B
node_modules/react-lifecycles-compat/react-lifecycles-compat.es.js 🔥 -5.88 kB (-100%) 5.88 kB → 0 B
src/components/modals/LoadBackup.jsx 🔥 -5.29 kB (-100%) 5.29 kB → 0 B
src/components/modals/ConfirmCategoryDelete.tsx 🔥 -4.74 kB (-100%) 4.74 kB → 0 B
src/components/manager/DeleteFile.tsx 🔥 -4.15 kB (-100%) 4.15 kB → 0 B
src/components/modals/GoCardlessInitialise.tsx 🔥 -3.87 kB (-100%) 3.87 kB → 0 B
src/components/modals/ConfirmTransactionEdit.tsx 🔥 -3.6 kB (-100%) 3.6 kB → 0 B
node_modules/react-modal/lib/helpers/ariaAppHider.js 🔥 -3.59 kB (-100%) 3.59 kB → 0 B
src/components/manager/ImportActual.tsx 🔥 -3.41 kB (-100%) 3.41 kB → 0 B
src/components/manager/Import.tsx 🔥 -3.39 kB (-100%) 3.39 kB → 0 B
src/components/manager/ImportYNAB5.tsx 🔥 -3.03 kB (-100%) 3.03 kB → 0 B
src/components/manager/ImportYNAB4.tsx 🔥 -3.01 kB (-100%) 3.01 kB → 0 B
src/components/modals/SimpleFinInitialise.tsx 🔥 -2.87 kB (-100%) 2.87 kB → 0 B
node_modules/react-modal/lib/helpers/tabbable.js 🔥 -2.79 kB (-100%) 2.79 kB → 0 B
node_modules/react-modal/lib/helpers/scopeTab.js 🔥 -2.58 kB (-100%) 2.58 kB → 0 B
node_modules/react-modal/lib/helpers/focusManager.js 🔥 -2.36 kB (-100%) 2.36 kB → 0 B
src/components/manager/Modals.jsx 🔥 -2.14 kB (-100%) 2.14 kB → 0 B
src/components/modals/ConfirmUnlinkAccount.tsx 🔥 -2.1 kB (-100%) 2.1 kB → 0 B
node_modules/react-modal/lib/helpers/bodyTrap.js 🔥 -2.01 kB (-100%) 2.01 kB → 0 B
src/components/modals/ConfirmTransactionDelete.tsx 🔥 -1.91 kB (-100%) 1.91 kB → 0 B
node_modules/react-modal/lib/helpers/classList.js 🔥 -1.71 kB (-100%) 1.71 kB → 0 B
node_modules/react-modal/lib/helpers/portalOpenInstances.js 🔥 -1.68 kB (-100%) 1.68 kB → 0 B
src/components/modals/countries.ts 🔥 -1.34 kB (-100%) 1.34 kB → 0 B
node_modules/exenv/index.js 🔥 -751 B (-100%) 751 B → 0 B
View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

Asset File Size % Changed
static/js/wide.js 224.62 kB → 224.76 kB (+139 B) +0.06%

Smaller

Asset File Size % Changed
static/js/index.js 3.25 MB → 3.19 MB (-59.43 kB) -1.78%

Unchanged

Asset File Size % Changed
static/js/indexeddb-main-thread-worker-e59fee74.js 13.5 kB 0%
static/js/BackgroundImage.js 122.29 kB 0%
static/js/AppliedFilters.js 20.97 kB 0%
static/js/resize-observer.js 18.37 kB 0%
static/js/usePreviewTransactions.js 1.59 kB 0%
static/js/narrow.js 78.89 kB 0%
static/js/ReportRouter.js 1.5 MB 0%

Copy link
Contributor

github-actions bot commented Sep 10, 2024

Bundle Stats — loot-core

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count Total bundle size % Changed
1 1.19 MB 0%

Changeset

No files were changed

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

No assets were smaller

Unchanged

Asset File Size % Changed
kcab.worker.js 1.19 MB 0%

@joel-jeremy joel-jeremy changed the title [WIP] Final PR for react-aria-components Modal migration Final PR for react-aria-components Modal migration Sep 10, 2024
import { Paragraph } from '../common/Paragraph';
import { View } from '../common/View';

export function GoCardlessLink() {
window.close();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we want to keep this line. Otherwise the window won't automatically close after linking.

The flow is:

  1. initialise the linking
  2. that opens the linking in popover
  3. the user follows bank login there
  4. finally the popover redirects back to actual
  5. we close the popover (this line)
  6. the root window is visible again and linking is success

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice catch! Thanks for pointing that out. Updated :)

@@ -67,144 +72,122 @@ export function ManagementApp({ isLoading }) {
// redux so that it persists across renders. This will show the
// loading spinner on first run, but never again since we'll have
// a cached list of files and can show them
if (!managerHasInitialized) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we want to get rid of the comment above too.

@joel-jeremy joel-jeremy merged commit 420aad0 into master Sep 11, 2024
19 checks passed
@joel-jeremy joel-jeremy deleted the modal2-final branch September 11, 2024 18:42
a-gradina pushed a commit to a-gradina/actual that referenced this pull request Sep 15, 2024
* 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants