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

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>

src/components/Tutorial.vue

@@ -98,7 +98,18 @@ const { openSnackbar } = useSnackbar()
 const interfaceStore = useAppInterfaceStore()
 const vehicleStore = useMainVehicleStore()
 
-const showTutorial = ref(true)
+const props = defineProps<{
+  /**
+   * Parent-controlled trigger for showing the dialog.
+   */
+  modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const showTutorial = ref(false || props.modelValue)
 const currentTutorialStep = useStorage('cockpit-last-tutorial-step', 1)
 const isVehicleConnectedVisible = ref(false)
 const tallContent = ref(false)
@@ -208,31 +219,27 @@ const handleStepChange = (newStep: number): void => {
       interfaceStore.componentToHighlight = 'menu-trigger'
       interfaceStore.currentSubMenuComponentName = null
       interfaceStore.currentSubMenuName = null
-      interfaceStore.userHasSeenTutorial = false
       break
     case 3:
       interfaceStore.isMainMenuVisible = true
       interfaceStore.mainMenuCurrentStep = 2
       interfaceStore.currentSubMenuName = SubMenuName.settings
       interfaceStore.componentToHighlight = 'settings-menu-item'
       interfaceStore.currentSubMenuComponentName = null
-      interfaceStore.userHasSeenTutorial = false
       break
     case 4:
       interfaceStore.isMainMenuVisible = true
       interfaceStore.mainMenuCurrentStep = 2
       interfaceStore.currentSubMenuName = SubMenuName.settings
       interfaceStore.currentSubMenuComponentName = SubMenuComponentName.SettingsGeneral
       tallContent.value = true
-      interfaceStore.userHasSeenTutorial = false
       interfaceStore.componentToHighlight = 'General'
       break
     case 5:
       interfaceStore.isMainMenuVisible = true
       interfaceStore.mainMenuCurrentStep = 2
       interfaceStore.currentSubMenuName = SubMenuName.settings
       interfaceStore.currentSubMenuComponentName = SubMenuComponentName.SettingsGeneral
-      interfaceStore.userHasSeenTutorial = false
       tallContent.value = false
       interfaceStore.componentToHighlight = 'vehicle-address'
       setVehicleConnectedVisible()
@@ -243,15 +250,13 @@ const handleStepChange = (newStep: number): void => {
       interfaceStore.currentSubMenuName = SubMenuName.settings
       interfaceStore.currentSubMenuComponentName = SubMenuComponentName.SettingsInterface
       tallContent.value = false
-      interfaceStore.userHasSeenTutorial = false
       interfaceStore.componentToHighlight = 'Interface'
       break
     case 7:
       interfaceStore.isMainMenuVisible = true
       interfaceStore.mainMenuCurrentStep = 2
       interfaceStore.currentSubMenuName = SubMenuName.settings
       interfaceStore.currentSubMenuComponentName = SubMenuComponentName.SettingsJoystick
-      interfaceStore.userHasSeenTutorial = false
       tallContent.value = true
       interfaceStore.componentToHighlight = 'Joystick'
       break
@@ -260,7 +265,6 @@ const handleStepChange = (newStep: number): void => {
       interfaceStore.mainMenuCurrentStep = 2
       interfaceStore.currentSubMenuName = SubMenuName.settings
       interfaceStore.currentSubMenuComponentName = SubMenuComponentName.SettingsVideo
-      interfaceStore.userHasSeenTutorial = false
       tallContent.value = true
       interfaceStore.componentToHighlight = 'Video'
       break
@@ -269,7 +273,6 @@ const handleStepChange = (newStep: number): void => {
       interfaceStore.mainMenuCurrentStep = 2
       interfaceStore.currentSubMenuName = SubMenuName.settings
       interfaceStore.currentSubMenuComponentName = SubMenuComponentName.SettingsTelemetry
-      interfaceStore.userHasSeenTutorial = false
       tallContent.value = false
       interfaceStore.isGlassModalAlwaysOnTop = true
       interfaceStore.componentToHighlight = 'Telemetry'
@@ -279,7 +282,6 @@ const handleStepChange = (newStep: number): void => {
       interfaceStore.mainMenuCurrentStep = 2
       interfaceStore.currentSubMenuName = SubMenuName.settings
       interfaceStore.currentSubMenuComponentName = SubMenuComponentName.SettingsAlerts
-      interfaceStore.userHasSeenTutorial = false
       tallContent.value = false
       interfaceStore.isGlassModalAlwaysOnTop = false
       interfaceStore.componentToHighlight = 'Alerts'
@@ -289,7 +291,6 @@ const handleStepChange = (newStep: number): void => {
       interfaceStore.mainMenuCurrentStep = 2
       interfaceStore.currentSubMenuName = SubMenuName.settings
       interfaceStore.currentSubMenuComponentName = SubMenuComponentName.SettingsDev
-      interfaceStore.userHasSeenTutorial = false
       tallContent.value = true
       interfaceStore.isGlassModalAlwaysOnTop = false
       interfaceStore.componentToHighlight = 'Dev'
@@ -299,7 +300,6 @@ const handleStepChange = (newStep: number): void => {
       interfaceStore.mainMenuCurrentStep = 2
       interfaceStore.currentSubMenuName = SubMenuName.settings
       interfaceStore.currentSubMenuComponentName = SubMenuComponentName.SettingsMission
-      interfaceStore.userHasSeenTutorial = false
       tallContent.value = false
       interfaceStore.isGlassModalAlwaysOnTop = false
       interfaceStore.componentToHighlight = 'Mission'
@@ -316,6 +316,7 @@ const handleStepChange = (newStep: number): void => {
 const dontShowTutorialAgain = (): void => {
   interfaceStore.userHasSeenTutorial = true
   showTutorial.value = false
+  emit('update:modelValue', false)
   currentTutorialStep.value = 1
   openSnackbar({
     message: 'This guide can be reopened via the Settings > General menu',
@@ -332,7 +333,6 @@ const alwaysShowTutorialOnStartup = (): void => {
 
 const nextTutorialStep = (): void => {
   if (currentTutorialStep.value === steps.length) {
-    dontShowTutorialAgain()
     closeTutorial()
     return
   }
@@ -348,8 +348,8 @@ const backTutorialStep = (): void => {
 const closeTutorial = (): void => {
   showTutorial.value = false
   interfaceStore.componentToHighlight = 'none'
-  interfaceStore.userHasSeenTutorial = true
   interfaceStore.isTutorialVisible = false
+  emit('update:modelValue', false)
 }
 
 const setVehicleConnectedVisible = (): void => {

src/components/UpdateNotification.vue

@@ -1,6 +1,6 @@
 <template>
   <InteractionDialog
-    v-model="showUpdateDialog"
+    :show-dialog="showUpdateDialog"
     :title="dialogTitle"
     :message="dialogMessage"
     :variant="dialogVariant"
@@ -27,17 +27,34 @@
         </template>
       </v-progress-linear>
     </template>
+    <template #actions>
+      <v-btn variant="text" size="small" @click="handleCloseDialog">Close</v-btn>
+    </template>
   </InteractionDialog>
 </template>
 
 <script setup lang="ts">
 import { useStorage } from '@vueuse/core'
-import { onBeforeMount, ref } from 'vue'
+import { onBeforeMount, onMounted, ref } from 'vue'
 
 import InteractionDialog, { type Action } from '@/components/InteractionDialog.vue'
+import { openSnackbar } from '@/composables/snackbar'
 import { app_version } from '@/libs/cosmos'
 import { isElectron } from '@/libs/utils'
 
+defineProps<{
+  /**
+   * Parent-controlled trigger for showing the dialog.
+   */
+  // eslint-disable-next-line vue/no-unused-properties
+  modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const updateAvailable = ref(false)
 const showUpdateDialog = ref(false)
 const dialogTitle = ref('')
 const dialogMessage = ref('')
@@ -52,6 +69,23 @@ const updateInfo = ref({
 })
 const ignoredUpdateVersions = useStorage<string[]>('cockpit-ignored-update-versions', [])
 
+// Wait for 2 seconds for updates. If no updates are available, show a message and emit close.
+onMounted(() => {
+  setTimeout(() => {
+    if (updateAvailable.value) {
+      showUpdateDialog.value = true
+    } else {
+      openSnackbar({ message: 'No updates available.', variant: 'success' })
+      emit('update:modelValue', false)
+    }
+  }, 2000)
+})
+
+const handleCloseDialog = (): void => {
+  emit('update:modelValue', false)
+  showUpdateDialog.value = false
+}
+
 const formatDate = (date: string): string => {
   return new Date(date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })
 }
@@ -75,7 +109,7 @@ onBeforeMount(() => {
     dialogVariant.value = 'info'
     dialogActions.value = []
     showProgress.value = false
-    showUpdateDialog.value = true
+    updateAvailable.value = true
   })
 
   window.electronAPI.onUpdateNotAvailable(() => {
@@ -87,11 +121,12 @@ onBeforeMount(() => {
       {
         text: 'OK',
         action: () => {
-          showUpdateDialog.value = false
+          handleCloseDialog()
         },
       },
     ]
     showProgress.value = false
+    updateAvailable.value = false
   })
 
   window.electronAPI.onUpdateAvailable((info) => {
@@ -107,7 +142,7 @@ onBeforeMount(() => {
           console.log(`User chose to ignore version ${updateInfo.value.version}`)
           ignoredUpdateVersions.value.push(updateInfo.value.version)
           window.electronAPI!.cancelUpdate()
-          showUpdateDialog.value = false
+          handleCloseDialog()
         },
       },
       {
@@ -121,7 +156,7 @@ onBeforeMount(() => {
               action: () => {
                 console.log('User chose to cancel the update for the Electron app.')
                 window.electronAPI!.cancelUpdate()
-                showUpdateDialog.value = false
+                handleCloseDialog()
                 dialogMessage.value = 'Downloading update...'
               },
             },
@@ -132,19 +167,20 @@ onBeforeMount(() => {
         text: 'Not Now',
         action: () => {
           window.electronAPI!.cancelUpdate()
-          showUpdateDialog.value = false
+          handleCloseDialog()
         },
       },
     ]
 
     // Check if this version is in the ignored list
     if (ignoredUpdateVersions.value.includes(info.version)) {
       console.log(`Skipping ignored version ${info.version}.`)
-      showUpdateDialog.value = false
+
+      handleCloseDialog()
       return
     }
 
-    showUpdateDialog.value = true
+    updateAvailable.value = true
   })
 
   window.electronAPI.onDownloadProgress((progressInfo) => {
@@ -171,11 +207,11 @@ onBeforeMount(() => {
         text: 'Later',
         action: () => {
           console.log('User chose to install the update for the Electron app later.')
-          showUpdateDialog.value = false
+          handleCloseDialog()
         },
       },
     ]
-    showUpdateDialog.value = true
+    updateAvailable.value = true
   })
 })
 </script>