refactor: modal implementation

[JammingBen]

Description

Remove the modal from vuex store and integrates it into pinia instead. This change completely reworks how to work with modals. The main benefits and changes are:

• Proper typings
• Allow stacking multiple modals
• Modals close automatically on cancel/confirm
• Modals automatically use the loading service on confirm
• Streamline modal usage to have one way how to create modals

How to use it

Modals can be dispatched via the dispatchModal method like so:

const { dispatchModal } = useModals()

dispatchModal({
  title: 'Create folder',
  onConfirm: () => createFolder()
})

The modal will automatically be removed when either the cancel or the confirm button has been clicked and the resulting promise resolved successfully. If needed, a modal can be removed manually via the provided method removeModal.

It is also possible to register another modal while having a modal open. This will add the new modal to the top of the queue and immediately display it. After it closes, the previous modal will show again.

A modal which is present in the queue but not showing can be displayed via the method setModalActive.

Custom components

Modals can have custom components with custom properties:

const { dispatchModal } = useModals()

dispatchModal({
  title: 'Create folder',
  onConfirm: () => createFolder(),
  customComponent: CreateFolderComponent,
  customComponentAttrs: () => ({ space })
})

This will render the CreateFolderComponent inside the modal while still showing the cancel and confirm buttons at the bottom.

It is also possible to define the onConfirm and onCancel methods inside the component. They must be named onConfirm / onCancel and be exposed via expose({ onConfirm, onCancel }). Note that if these methods are defined in registerModal, they will take priority over defined methods in the component.

Modal actions can be hidden if you need to implement custom actions inside the component:

const { dispatchModal } = useModals()

dispatchModal({
  title: 'Create folder',
  onConfirm: () => createFolder(),
  customComponent: CreateFolderComponent,
  customComponentAttrs: () => ({ space }),
  hideActions: true
})

Now you can implement these actions on your own. Note that you should still expose onConfirm / onCancel via expose and not call them directly with your actions. Register additional event handlers on the buttons instead: emit('confirm') and emit('cancel'). This ensures that the methods get called via the wrapping component which provides the benefits such as automatically closing the modal after confirm or cancel.

Open questions / follow-ups

• Move modal components in respective Modals folders
• Rename modal components from ...Modal to ...ModalContent?
• Add dev docs on how to use the modal?

Related Issue

• fixes Refactor modal #10095
• fixes Gap size in "copy instead" modal is not aligned with other modals #10208
• refs Migrate from vuex store to pinia #10210
• refs [web] Provide all modal dialogs with loading spinners #9183

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Technical debt
• Tests

[update-docs]

Thanks for opening this pull request! The maintainers of this repository would appreciate it if you would create a changelog item based on your changes.

[sonarqubecloud]

Quality Gate failed

Failed conditions

5 New Bugs (required ≤ 0)

See analysis details on SonarCloud

Catch issues before they fail your Quality Gate with our IDE extension SonarLint

[dschmidt]

😍

[dschmidt]

Hum? What is this good for?

[JammingBen]

Since we test for an error here the test would fail otherwise. So we wouldn't be able to set any expectations afterwards.

[dschmidt]

Is this now handled anywhere else?

[JammingBen]

No, but I didn't find a reason to keep it. Modals are being focused correctly due to the focus trap in OcModal.

[dschmidt]

What did this even do?

[JammingBen]

Closing a potentially open modal I guess 😄

[dschmidt]

bye bye we won't miss you

[JammingBen]

I'll create a follow-up PR which addresses all the resolved comments, coming right up.