Do not stack several automatic dialogs #1549

ArturoManzoli · 2025-01-07T21:03:44Z

Implemented a dialog queue to handle potential modal stack-ups.

src/App.vue

rafaellehmkuhl · 2025-01-13T13:33:21Z

src/components/InteractionDialog.vue

-  <v-dialog v-model="internalShowDialog" :persistent="persistent" :width="maxWidth || 'auto'">
+  <v-dialog
+    v-model="internalShowDialog"
+    :persistent="persistent"


In this case are we coupling the interaction dialog to the queue system? It seems strange, since we use it for a lot of popups that are open explicitly by the user (and not automatically), like the about page, menus, error dialogs, etc.

It seems to me they should be completely uncoupled, and the queue system should live outside it and only for automatically-issued dialogs.

The other dialogs will be unchanged and uncoupled from the queue. The ones that will be queued are only those that can potentially stack up, like the ones on the Cockpit startup.

It's also done like this on snackbar queue systems. Whenever a message can stackup, you queue it.

I mean that the queue system should be external to the InteractionDialog.vue component, otherwise we are putting queue logic on dialogs that should not be queue-aware.

In reality the InteractionDialog is uncoupled from the queue system.

The queue uses a logic based on dependency injection. If you check on App.vue, the components are loaded on startup and queued independently and the enqueueDialog function takes the component, its props and an id as parameter.

interfaceStore.enqueueDialog({ id: 'VehicleDiscoveryDialog', component: VehicleDiscoveryDialog, props: {}, })

For example, the system update dialog will only be queued if the function that checks for new versions triggers the dialog and will inject the component on the function to do so.
Actually it doesn't have to be a dialog. Could be virtually any other component we have.

What I'm saying is that the interaction dialog should not be the one deciding on what happens with the log queue (interfaceStore.openNextDialogOnQueue()), but instead there should be an observer outside the interaction dialog checking if there's any interaction dialog open, and if not, open the next dialog in the queue.

The interaction dialog should be what is is, a dialog. It does not need to be aware of the queue. It's an unnecessary architecture coupling.

It's the same problem we had before, that you're fixing in this PR, about the interaction dialog being aware of the Tutorial functionality (it shouldn't).

But the InteractionDialog isn't aware of the queue. The only modification I made to it was the closing logic so it can handle the queue

Discussed the details in a call. Main topic was to uncouple to facilitate maintenance, shrink the codebase and allow easy future changes (for new auto-instantiated dialogs).

src/views/ConfigurationGeneralView.vue

src/types/interface.ts

src/App.vue

rafaellehmkuhl · 2025-01-17T12:57:03Z

src/components/InteractionDialog.vue

-  <v-dialog v-model="internalShowDialog" :persistent="persistent" :width="maxWidth || 'auto'">
+  <v-dialog
+    v-model="internalShowDialog"
+    :persistent="persistent"


What I'm saying is that the interaction dialog should not be the one deciding on what happens with the log queue (interfaceStore.openNextDialogOnQueue()), but instead there should be an observer outside the interaction dialog checking if there's any interaction dialog open, and if not, open the next dialog in the queue.

The interaction dialog should be what is is, a dialog. It does not need to be aware of the queue. It's an unnecessary architecture coupling.

It's the same problem we had before, that you're fixing in this PR, about the interaction dialog being aware of the Tutorial functionality (it shouldn't).

ArturoManzoli · 2025-01-27T15:19:15Z

On last patch:

Dialog queue now monitors the dom for its open elements by id, and once they cease to exist, they open the next one on the line, decoupling the enqueued elements from the queue logic.
Reverted changes made on components like UpdateNotification, VehicleDiscoveryDialog and InteractiveDialog;

Signed-off-by: Arturo Manzoli <[email protected]> App: Implement startup dialogs queue Signed-off-by: Arturo Manzoli <[email protected]>

rafaellehmkuhl · 2025-01-27T16:39:48Z

src/App.vue

-  <Tutorial :show-tutorial="interfaceStore.isTutorialVisible" />
  <VideoLibraryModal :open-modal="interfaceStore.isVideoLibraryVisible" />
-  <VehicleDiscoveryDialog v-model="showDiscoveryDialog" show-auto-search-option />
-  <UpdateNotification v-if="isElectron()" />
+  <Teleport to="body">
+    <Tutorial />
+  </Teleport>
+
+  <!-- Startup dialogs queue -->
+  <div v-if="activeDialog">
+    <component :is="activeDialog.component" v-bind="activeDialog.props" :id="activeDialog.id" />
+  </div>


Why is the tutorial treated differently? Aren't it a automatic dialog like all others?

rafaellehmkuhl · 2025-01-27T16:40:44Z

src/components/Tutorial.vue

@@ -403,6 +392,7 @@ const handleKeydown = (event: KeyboardEvent): void => {
 watch(
  () => interfaceStore.isTutorialVisible,
  (val) => {
+    console.log('🚀 ~ val:', val)


This was in an old PR, was asked to be removed, and is being added here again.

rafaellehmkuhl · 2025-01-27T16:51:00Z

src/components/UpdateNotification.vue

+    if (interfaceStore.activeDialog?.id === 'UpdateNotification' || interfaceStore.activeDialog === undefined) {
+      showUpdateDialog.value = true
+      return
+    }


This is still putting the instantiation logic inside the components, just with another name/approach, and there's no need for that.

This is solvable with a much easier approach where the one controlling the issue of automatic notifications (the App.vue file) is the one who instantiates the component, based on the queue logic (show tutorial, when it closes show the discovery dialog, when it closes show the user selection, etc). There's no need for any logic around the automation of the component mounting to be inside the component itself.

Every new dialog component still has to implement logic around an automatic issuing, which it should't need to be aware off. The dialog components should only care about their own content.

Signed-off-by: Arturo Manzoli <[email protected]>

ArturoManzoli force-pushed the do-not-stack-auto-dialogs branch from d02f53d to 83a3bd7 Compare January 7, 2025 21:05

ArturoManzoli requested a review from rafaellehmkuhl January 7, 2025 21:06

rafaellehmkuhl requested changes Jan 13, 2025

View reviewed changes

ArturoManzoli force-pushed the do-not-stack-auto-dialogs branch from 83a3bd7 to 310c843 Compare January 15, 2025 10:46

ArturoManzoli requested a review from rafaellehmkuhl January 15, 2025 10:47

rafaellehmkuhl reviewed Jan 15, 2025

View reviewed changes

src/views/ConfigurationGeneralView.vue Outdated Show resolved Hide resolved

ArturoManzoli force-pushed the do-not-stack-auto-dialogs branch from 310c843 to 88a2acc Compare January 17, 2025 11:52

ArturoManzoli requested a review from rafaellehmkuhl January 17, 2025 11:53

rafaellehmkuhl requested changes Jan 17, 2025

View reviewed changes

ArturoManzoli force-pushed the do-not-stack-auto-dialogs branch 2 times, most recently from d6147e2 to f6e9ea4 Compare January 17, 2025 15:49

ArturoManzoli requested a review from rafaellehmkuhl January 17, 2025 15:52

ArturoManzoli force-pushed the do-not-stack-auto-dialogs branch from f6e9ea4 to 38901db Compare January 27, 2025 15:15

Store: App-interface: Add dialog queue

8e8c3a5

Signed-off-by: Arturo Manzoli <[email protected]> App: Implement startup dialogs queue Signed-off-by: Arturo Manzoli <[email protected]>

ArturoManzoli force-pushed the do-not-stack-auto-dialogs branch 2 times, most recently from 1495c59 to c5cb8ce Compare January 27, 2025 15:59

rafaellehmkuhl reviewed Jan 27, 2025

View reviewed changes

rafaellehmkuhl requested changes Jan 27, 2025

View reviewed changes

ArturoManzoli force-pushed the do-not-stack-auto-dialogs branch from c5cb8ce to 2b70ec8 Compare January 27, 2025 17:19

ArturoManzoli marked this pull request as draft January 27, 2025 17:19

App: Startup dialogs: Implement changes to run under dialog queue

d0ea490

Signed-off-by: Arturo Manzoli <[email protected]>

ArturoManzoli force-pushed the do-not-stack-auto-dialogs branch from 2b70ec8 to d0ea490 Compare January 27, 2025 18:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Do not stack several automatic dialogs #1549

Do not stack several automatic dialogs #1549

ArturoManzoli commented Jan 7, 2025 •

edited

Loading

rafaellehmkuhl Jan 13, 2025

ArturoManzoli Jan 15, 2025

rafaellehmkuhl Jan 15, 2025

ArturoManzoli Jan 17, 2025

rafaellehmkuhl Jan 17, 2025 •

edited

Loading

ArturoManzoli Jan 17, 2025

rafaellehmkuhl Jan 17, 2025

rafaellehmkuhl Jan 17, 2025 •

edited

Loading

ArturoManzoli commented Jan 27, 2025

rafaellehmkuhl Jan 27, 2025

rafaellehmkuhl Jan 27, 2025

rafaellehmkuhl Jan 27, 2025

Do not stack several automatic dialogs #1549

Are you sure you want to change the base?

Do not stack several automatic dialogs #1549

Conversation

ArturoManzoli commented Jan 7, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rafaellehmkuhl Jan 17, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rafaellehmkuhl Jan 17, 2025 • edited Loading

Choose a reason for hiding this comment

ArturoManzoli commented Jan 27, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ArturoManzoli commented Jan 7, 2025 •

edited

Loading

rafaellehmkuhl Jan 17, 2025 •

edited

Loading

rafaellehmkuhl Jan 17, 2025 •

edited

Loading