feat: App builder confirmation dialog after setting default view mode (#9374)

## Summary

Adds an additional dialog after setting the default view of the workflow
to let users pick their next step

## Screenshots (if applicable)

<img width="479" height="332" alt="image"
src="https://github.com/user-attachments/assets/1ea40b10-d7d3-49ff-9ea2-27b9e907c923"
/>

<img width="478" height="343" alt="image"
src="https://github.com/user-attachments/assets/21674998-5ce2-496d-97e6-ef8f2f2d7dd7"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9374-feat-App-builder-confirmation-dialog-after-setting-default-view-mode-3196d73d36508192a45ee8ba0a7f74a6)
by [Unito](https://www.unito.io)

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

src/components/builder/BuilderDefaultModeAppliedDialogContent.vue

@@ -0,0 +1,62 @@
+<template>
+  <BuilderDialog @close="$emit('close')">
+    <template #title>
+      <span class="inline-flex items-center gap-2">
+        {{ $t('builderToolbar.defaultModeAppliedTitle') }}
+        <i
+          aria-hidden="true"
+          class="icon-[lucide--circle-check-big] size-4 text-green-500"
+        />
+      </span>
+    </template>
+
+    <p class="m-0 text-sm text-muted-foreground">
+      {{
+        appliedAsApp
+          ? $t('builderToolbar.defaultModeAppliedAppBody')
+          : $t('builderToolbar.defaultModeAppliedGraphBody')
+      }}
+    </p>
+    <p class="m-0 text-sm text-muted-foreground">
+      {{
+        appliedAsApp
+          ? $t('builderToolbar.defaultModeAppliedAppPrompt')
+          : $t('builderToolbar.defaultModeAppliedGraphPrompt')
+      }}
+    </p>
+
+    <template #footer>
+      <template v-if="appliedAsApp">
+        <Button variant="muted-textonly" size="lg" @click="$emit('close')">
+          {{ $t('g.close') }}
+        </Button>
+        <Button variant="secondary" size="lg" @click="$emit('viewApp')">
+          {{ $t('builderToolbar.viewApp') }}
+        </Button>
+      </template>
+      <template v-else>
+        <Button variant="muted-textonly" size="lg" @click="$emit('viewApp')">
+          {{ $t('builderToolbar.viewApp') }}
+        </Button>
+        <Button variant="secondary" size="lg" @click="$emit('close')">
+          {{ $t('g.close') }}
+        </Button>
+      </template>
+    </template>
+  </BuilderDialog>
+</template>
+
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+
+import BuilderDialog from './BuilderDialog.vue'
+
+defineProps<{
+  appliedAsApp: boolean
+}>()
+
+defineEmits<{
+  viewApp: []
+  close: []
+}>()
+</script>

src/components/builder/BuilderDialog.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="flex w-full min-w-96 flex-col rounded-2xl bg-base-background">
+  <div
+    class="flex min-h-80 w-full min-w-116 flex-col rounded-2xl bg-base-background"
+  >
     <!-- Header -->
     <div
       class="flex h-12 items-center justify-between border-b border-border-default px-4"
@@ -21,7 +23,7 @@
     </div>
 
     <!-- Body -->
-    <div class="flex flex-col gap-4 px-4 py-4">
+    <div class="flex flex-1 flex-col gap-4 px-4 py-4">
       <slot />
     </div>
 

src/components/builder/useAppSetDefaultView.test.ts

@@ -10,13 +10,18 @@ const mockDialogStore = vi.hoisted(() => ({
 }))
 
 const mockWorkflowStore = vi.hoisted(() => ({
-  activeWorkflow: null as { initialMode?: string | null } | null
+  activeWorkflow: null as {
+    initialMode?: string | null
+    changeTracker?: { checkState: () => void }
+  } | null
 }))
 
 const mockApp = vi.hoisted(() => ({
   rootGraph: { extra: {} as Record<string, unknown> }
 }))
 
+const mockSetMode = vi.hoisted(() => vi.fn())
+
 vi.mock('@/services/dialogService', () => ({
   useDialogService: () => mockDialogService
 }))
@@ -33,10 +38,18 @@ vi.mock('@/scripts/app', () => ({
   app: mockApp
 }))
 
+vi.mock('@/composables/useAppMode', () => ({
+  useAppMode: () => ({ setMode: mockSetMode })
+}))
+
 vi.mock('./DefaultViewDialogContent.vue', () => ({
   default: { name: 'MockDefaultViewDialogContent' }
 }))
 
+vi.mock('./BuilderDefaultModeAppliedDialogContent.vue', () => ({
+  default: { name: 'MockBuilderDefaultModeAppliedDialogContent' }
+}))
+
 import { useAppSetDefaultView } from './useAppSetDefaultView'
 
 describe('useAppSetDefaultView', () => {
@@ -142,5 +155,68 @@ describe('useAppSetDefaultView', () => {
         key: 'builder-default-view'
       })
     })
+
+    it('shows confirmation dialog after applying', () => {
+      mockWorkflowStore.activeWorkflow = { initialMode: null }
+
+      const { showDialog } = useAppSetDefaultView()
+      showDialog()
+
+      const call = mockDialogService.showLayoutDialog.mock.calls[0][0]
+      call.props.onApply(true)
+
+      expect(mockDialogService.showLayoutDialog).toHaveBeenCalledTimes(2)
+      const confirmCall = mockDialogService.showLayoutDialog.mock.calls[1][0]
+      expect(confirmCall.key).toBe('builder-default-view-applied')
+      expect(confirmCall.props.appliedAsApp).toBe(true)
+    })
+
+    it('passes appliedAsApp false to confirmation dialog when graph', () => {
+      mockWorkflowStore.activeWorkflow = { initialMode: null }
+
+      const { showDialog } = useAppSetDefaultView()
+      showDialog()
+
+      const call = mockDialogService.showLayoutDialog.mock.calls[0][0]
+      call.props.onApply(false)
+
+      const confirmCall = mockDialogService.showLayoutDialog.mock.calls[1][0]
+      expect(confirmCall.props.appliedAsApp).toBe(false)
+    })
+  })
+
+  describe('applied dialog', () => {
+    function applyAndGetConfirmDialog(openAsApp: boolean) {
+      mockWorkflowStore.activeWorkflow = { initialMode: null }
+
+      const { showDialog } = useAppSetDefaultView()
+      showDialog()
+
+      const applyCall = mockDialogService.showLayoutDialog.mock.calls[0][0]
+      applyCall.props.onApply(openAsApp)
+
+      return mockDialogService.showLayoutDialog.mock.calls[1][0]
+    }
+
+    it('onViewApp sets mode to app and closes dialog', () => {
+      const confirmCall = applyAndGetConfirmDialog(true)
+      confirmCall.props.onViewApp()
+
+      expect(mockDialogStore.closeDialog).toHaveBeenCalledWith({
+        key: 'builder-default-view-applied'
+      })
+      expect(mockSetMode).toHaveBeenCalledWith('app')
+    })
+
+    it('onClose closes confirmation dialog', () => {
+      const confirmCall = applyAndGetConfirmDialog(true)
+
+      mockDialogStore.closeDialog.mockClear()
+      confirmCall.props.onClose()
+
+      expect(mockDialogStore.closeDialog).toHaveBeenCalledWith({
+        key: 'builder-default-view-applied'
+      })
+    })
   })
 })

src/components/builder/useAppSetDefaultView.ts

@@ -1,18 +1,22 @@
 import { computed } from 'vue'
 
+import { useAppMode } from '@/composables/useAppMode'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { app } from '@/scripts/app'
 import { useDialogService } from '@/services/dialogService'
 import { useDialogStore } from '@/stores/dialogStore'
 
+import BuilderDefaultModeAppliedDialogContent from './BuilderDefaultModeAppliedDialogContent.vue'
 import DefaultViewDialogContent from './DefaultViewDialogContent.vue'
 
 const DIALOG_KEY = 'builder-default-view'
+const APPLIED_DIALOG_KEY = 'builder-default-view-applied'
 
 export function useAppSetDefaultView() {
   const workflowStore = useWorkflowStore()
   const dialogService = useDialogService()
   const dialogStore = useDialogStore()
+  const { setMode } = useAppMode()
 
   const settingView = computed(() => dialogStore.isDialogOpen(DIALOG_KEY))
 
@@ -37,11 +41,31 @@ export function useAppSetDefaultView() {
     extra.linearMode = openAsApp
     workflow.changeTracker?.checkState()
     closeDialog()
+    showAppliedDialog(openAsApp)
+  }
+
+  function showAppliedDialog(appliedAsApp: boolean) {
+    dialogService.showLayoutDialog({
+      key: APPLIED_DIALOG_KEY,
+      component: BuilderDefaultModeAppliedDialogContent,
+      props: {
+        appliedAsApp,
+        onViewApp: () => {
+          closeAppliedDialog()
+          setMode('app')
+        },
+        onClose: closeAppliedDialog
+      }
+    })
   }
 
   function closeDialog() {
     dialogStore.closeDialog({ key: DIALOG_KEY })
   }
 
+  function closeAppliedDialog() {
+    dialogStore.closeDialog({ key: APPLIED_DIALOG_KEY })
+  }
+
   return { settingView, showDialog }
 }

src/locales/en/main.json

@@ -3369,7 +3369,13 @@
     "app": "App",
     "appDescription": "Opens as an app by default",
     "nodeGraph": "Node graph",
-    "nodeGraphDescription": "Opens as node graph by default"
+    "nodeGraphDescription": "Opens as node graph by default",
+    "defaultModeAppliedTitle": "Successfully set",
+    "defaultModeAppliedAppBody": "This workflow will open in App Mode by default from now on.",
+    "defaultModeAppliedAppPrompt": "Would you like to view it now?",
+    "defaultModeAppliedGraphBody": "This workflow will open as a node graph by default from now on.",
+    "defaultModeAppliedGraphPrompt": "Would you like to view the app still?",
+    "viewApp": "View app"
   },
   "builderMenu": {
     "exitAppBuilder": "Exit app builder"