chore(deps): update vue monorepo

npm/vue/package.json

@@ -17,7 +17,7 @@
   "devDependencies": {
     "@cypress/mount-utils": "0.0.0-development",
     "@vitejs/plugin-vue": "5.0.4",
-    "@vue/compiler-sfc": "3.2.47",
+    "@vue/compiler-sfc": "3.5.13",
     "@vue/test-utils": "2.4.6",
     "axios": "0.21.2",
     "cypress": "0.0.0-development",
@@ -26,7 +26,7 @@
     "tailwindcss": "1.1.4",
     "typescript": "~5.4.5",
     "vite": "5.4.18",
-    "vue": "3.2.47",
+    "vue": "3.5.13",
     "vue-i18n": "9.13.1",
     "vue-router": "^4.0.0",
     "vue-tsc": "^2.0.19",
@@ -35,7 +35,7 @@
   "peerDependencies": {
     "@cypress/webpack-dev-server": "*",
     "cypress": ">=7.0.0",
-    "vue": ">=3.0.0"
+    "vue": ">=3.5.13"
   },
   "files": [
     "dist/**/*",

package.json

@@ -280,7 +280,7 @@
     "browserify-sign": "4.2.2",
     "devtools-protocol": "0.0.1413303",
     "sharp": "0.29.3",
-    "vue-template-compiler": "2.6.12"
+    "vue-template-compiler": "2.7.16"
   },
   "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

packages/app/package.json

@@ -88,7 +88,7 @@
     "vite-plugin-pages": "0.32.1",
     "vite-plugin-vue-layouts": "0.11.0",
     "vite-svg-loader": "5.1.0",
-    "vue": "3.2.47",
+    "vue": "3.5.13",
     "vue-demi": "0.11.2",
     "vue-i18n": "9.13.1",
     "vue-router": "4",

packages/app/src/debug/DebugRunNavigationRow.vue

@@ -5,7 +5,7 @@
   >
     <component
       :is="isCurrentRun ? 'div': 'button'"
-      :aria-label="t('debugPage.switchToRun', {runNumber: gql.runNumber})"
+      :aria-label="t('debugPage.switchToRun', {runNumber: props.gql.runNumber})"
       class="rounded flex w-full p-[10px] pl-[35px] relative hocus:bg-indigo-50 focus:outline focus:outline-indigo-500"
       :class="{ 'bg-indigo-50': isCurrentRun }"
       @click="$emit('changeRun')"

packages/app/src/debug/empty/DebugBranchError.vue

@@ -2,7 +2,7 @@
   <DebugEmptyView
     :title="t('debugPage.emptyStates.noRunsFoundForBranch')"
     :description="t('debugPage.emptyStates.noRunsForBranchMessage')"
-    :icon="IconTechnologyCommandLineError"
+    :icon="IconWrapper"
     :utm="utm"
     help-link-href="https://on.cypress.io/git-info"
   />
@@ -12,11 +12,16 @@
 import DebugEmptyView from './DebugEmptyView.vue'
 import { useI18n } from '@cy/i18n'
 import { IconTechnologyCommandLineError } from '@cypress-design/vue-icon'
+import type { FunctionalComponent, SVGAttributes } from 'vue'
+import { h } from 'vue'
 
 const { t } = useI18n()
 
 const utm = {
   utm_campaign: 'No Runs Found',
 }
 
+const IconWrapper: FunctionalComponent<SVGAttributes> = (props) => {
+  return h(IconTechnologyCommandLineError, { ...props })
+}
 </script>

packages/app/src/debug/empty/DebugEmptyStates.cy.tsx

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue'
 import DebugNotLoggedIn from './DebugNotLoggedIn.vue'
 import DebugNoProject from './DebugNoProject.vue'
 import DebugNoRuns from './DebugNoRuns.vue'
@@ -8,7 +9,7 @@ import { useUserProjectStatusStore } from '@packages/frontend-shared/src/store/u
 import { Promo_PromoSeenDocument, _PromoFragmentDoc } from '../../generated/graphql-test'
 import { DEBUG_PROMO_CAMPAIGNS, DEBUG_TAB_MEDIUM } from '../utils/constants'
 
-function mountWithGql (component: JSX.Element) {
+function mountWithGql (component: VNode) {
   const recordEvent = cy.stub().as('recordEvent')
 
   cy.stubMutationResolver(Promo_PromoSeenDocument, (defineResult, args) => {

packages/app/src/debug/empty/DebugError.vue

@@ -2,15 +2,17 @@
   <DebugEmptyView
     :title="t('debugPage.emptyStates.gitRepositoryNotDetected')"
     :description="t('debugPage.emptyStates.ensureGitSetupCorrectly')"
-    :icon="IconTechnologyCommandLineError"
+    :icon="icon"
   />
 </template>
 
 <script lang="ts" setup>
 import DebugEmptyView from './DebugEmptyView.vue'
 import { useI18n } from '@cy/i18n'
 import { IconTechnologyCommandLineError } from '@cypress-design/vue-icon'
+import type { FunctionalComponent, SVGAttributes } from 'vue'
 
 const { t } = useI18n()
 
+const icon = IconTechnologyCommandLineError as unknown as FunctionalComponent<SVGAttributes>
 </script>

packages/app/src/navigation/SidebarNavigation.vue

@@ -91,7 +91,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, FunctionalComponent, ref, watchEffect } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
 import { gql, useMutation } from '@urql/vue'
 import SidebarNavigationRow, { Badge, IconStatus } from './SidebarNavigationRow.vue'
 import KeyboardBindingsModal from './KeyboardBindingsModal.vue'
@@ -325,7 +325,7 @@ watchEffect(() => {
 
 interface NavigationItem {
   name: string
-  icon: FunctionalComponent
+  icon: any
   pageComponent: string
   params?: Record<string, any>
   badge?: Badge

packages/app/src/pages/Specs/Index.vue

@@ -99,7 +99,7 @@ useSubscription({
 /**
  * Used to trigger Spec updates via the useCloudSpec composable.
  */
-const mostRecentUpdate = ref<string | undefined>()
+const mostRecentUpdate = ref<string | null>(null)
 
 /**
  * At this time, the CloudRun is not passing the `updatedAt` field.  To mimic

packages/app/src/runner/SpecRunnerRunMode.vue

@@ -9,6 +9,7 @@
     />
     <AutomationMissing
       v-else-if="runnerUiStore.automationStatus === 'MISSING'"
+      :gql="query.data.value?.currentProject"
     />
     <ResizablePanels
       v-else
@@ -84,6 +85,7 @@ import { useEventManager } from './useEventManager'
 import SpecRunnerHeaderRunMode from './SpecRunnerHeaderRunMode.vue'
 import AutomationDisconnected from './automation/AutomationDisconnected.vue'
 import AutomationMissing from './automation/AutomationMissing.vue'
+import { gql, useQuery } from '@urql/vue'
 
 const eventManager = getEventManager()
 
@@ -121,6 +123,31 @@ onBeforeUnmount(() => {
   cleanupRunner()
 })
 
+gql`
+fragment SpecRunner_Config on CurrentProject {
+  id
+  config
+}
+`
+
+gql`
+fragment SpecRunner_RunMode on Query {
+  currentProject {
+    id
+    ...SpecRunner_Config
+    ...AutomationMissing
+  }
+}
+`
+
+const query = useQuery({
+  query: gql`
+    query SpecRunner_RunMode_Query {
+      ...SpecRunner_RunMode
+    }
+  `,
+})
+
 </script>
 
 <route>

packages/app/src/runs/RunsLayout.vue

@@ -64,7 +64,7 @@
       variant="outline-indigo"
       size="32"
       class="self-start"
-      @click="openLatest"
+      @click="handleOpenLatest"
     >
       <IconTechnologyCypress class="h-[16px] w-[16px] mr-[8px]" />
       {{ t('runs.layout.viewCloudRuns') }}
@@ -110,6 +110,10 @@ const props = defineProps<{
 
 const openLatest = useExternalLink(props.latestRunUrl)
 
+const handleOpenLatest = () => {
+  openLatest()
+}
+
 const Dot: FunctionalComponent = () => {
   return h('span', { ariaHidden: 'true', class: 'px-[8px] text-gray-300' }, '•')
 }

packages/app/src/settings/device/NotificationSettings.vue

@@ -46,7 +46,7 @@
               :disabled="!desktopNotificationsEnabled"
               @update="(value) => updatePref(id, value)"
             />
-            {{ gql.localSettings }}
+            {{ props.gql.localSettings }}
           </h4>
         </div>
         <div class="py-[16px]">

packages/app/src/specs/SpecsList.vue

@@ -232,49 +232,7 @@ const { openLoginConnectModal } = useUserProjectStatusStore()
 const route = useRoute()
 const { t } = useI18n()
 const testingType = useTestingType()
-
-const isOnline = useOnline()
-const isOffline = ref(false)
-
-watch(isOnline, (newIsOnlineValue) => isOffline.value = !newIsOnlineValue, { immediate: true })
-
-const tableGridColumns = 'grid-cols-[1fr,135px,130px] md:grid-cols-[1fr,135px,130px,130px] lg:grid-cols-[1fr,160px,160px,180px]'
-
-const projectConnectionStatus = computed(() => {
-  if (!props.gql.cloudViewer) return 'LOGGED_OUT'
-
-  if (!props.gql.currentProject?.cloudProject?.__typename) return 'NOT_CONNECTED'
-
-  if (props.gql.currentProject?.cloudProject?.__typename === 'CloudProjectNotFound') return 'NOT_FOUND'
-
-  if (props.gql.currentProject?.cloudProject?.__typename === 'CloudProjectUnauthorized') {
-    if (props.gql.currentProject?.cloudProject?.hasRequestedAccess) {
-      return 'ACCESS_REQUESTED'
-    }
-
-    return 'UNAUTHORIZED'
-  }
-
-  return 'CONNECTED'
-})
-
-const cloudProjectType = computed(() => props.gql.currentProject?.cloudProject?.__typename)
-
-const hasRequestedAccess = computed(() => {
-  return projectConnectionStatus.value === 'ACCESS_REQUESTED'
-})
-
-const isGitAvailable = computed(() => {
-  return !(props.gql.currentProject?.specs.some((s) => s.gitInfo?.statusType === 'noGitInfo') ?? false)
-})
-
-const hasCloudErrors = computed(() => {
-  return props.gql.currentProject?.specs.some((s) => s.cloudSpec?.fetchingStatus === 'ERRORED') ?? false
-})
-
-const shouldShowFetchError = ref(false)
-
-watch(hasCloudErrors, (wasErrorFound) => shouldShowFetchError.value = wasErrorFound, { immediate: true })
+const runAllSpecsStore = useRunAllSpecsStore()
 
 gql`
 subscription SpecsList_GitInfoUpdated {
@@ -351,6 +309,49 @@ const emit = defineEmits<{
   (e: 'showCreateSpecModal'): void
 }>()
 
+const isOnline = useOnline()
+const isOffline = ref(false)
+
+watch(isOnline, (newIsOnlineValue) => isOffline.value = !newIsOnlineValue, { immediate: true })
+
+const tableGridColumns = 'grid-cols-[1fr,135px,130px] md:grid-cols-[1fr,135px,130px,130px] lg:grid-cols-[1fr,160px,160px,180px]'
+
+const projectConnectionStatus = computed(() => {
+  if (!props.gql.cloudViewer) return 'LOGGED_OUT'
+
+  if (!props.gql.currentProject?.cloudProject?.__typename) return 'NOT_CONNECTED'
+
+  if (props.gql.currentProject?.cloudProject?.__typename === 'CloudProjectNotFound') return 'NOT_FOUND'
+
+  if (props.gql.currentProject?.cloudProject?.__typename === 'CloudProjectUnauthorized') {
+    if (props.gql.currentProject?.cloudProject?.hasRequestedAccess) {
+      return 'ACCESS_REQUESTED'
+    }
+
+    return 'UNAUTHORIZED'
+  }
+
+  return 'CONNECTED'
+})
+
+const cloudProjectType = computed(() => props.gql.currentProject?.cloudProject?.__typename)
+
+const hasRequestedAccess = computed(() => {
+  return projectConnectionStatus.value === 'ACCESS_REQUESTED'
+})
+
+const isGitAvailable = computed(() => {
+  return !(props.gql.currentProject?.specs.some((s) => s.gitInfo?.statusType === 'noGitInfo') ?? false)
+})
+
+const hasCloudErrors = computed(() => {
+  return props.gql.currentProject?.specs.some((s) => s.cloudSpec?.fetchingStatus === 'ERRORED') ?? false
+})
+
+const shouldShowFetchError = ref(false)
+
+watch(hasCloudErrors, (wasErrorFound) => shouldShowFetchError.value = wasErrorFound, { immediate: true })
+
 const showSpecPatternModal = ref(false)
 
 const isSpecNotFound = ref(!!route.params?.unrunnable)
@@ -442,8 +443,6 @@ const { refetchFailedCloudData } = useCloudSpecData(
   props.gql.currentProject?.specs as SpecsListFragment[] || [],
 )
 
-const runAllSpecsStore = useRunAllSpecsStore()
-
 watch(collapsible, () => {
   runAllSpecsStore.setRunAllSpecsData(collapsible.value.tree)
 }, { immediate: true })

packages/app/src/specs/banners/TrackedBanner.vue

@@ -25,7 +25,7 @@ type EventData = {
 }
 
 type AlertComponentProps = InstanceType<typeof Alert>['$props']
-interface TrackedBannerComponentProps extends AlertComponentProps {
+interface TrackedBannerComponentProps extends /* @vue-ignore */ AlertComponentProps {
   bannerId: string
   hasBannerBeenShown: boolean
   eventData: EventData | undefined

packages/app/src/specs/switcher/TestingTypeSwitcher.vue

@@ -49,13 +49,15 @@ const tabs = computed(() => {
       label: shouldUseLongText.value ? t('specPage.e2eSpecsHeader') : t('specPage.e2eSpecsHeaderShort'),
       iconAfter: props.isE2eConfigured === false ? StyledQuestionMarkIcon : undefined,
       active: props.viewedTestingType === 'e2e',
+      'aria-controls': 'e2e-specs-panel',
     },
     {
       id: 'component',
       iconBefore: IconTestingTypeComponent,
       label: shouldUseLongText.value ? t('specPage.componentSpecsHeader') : t('specPage.componentSpecsHeaderShort'),
       iconAfter: props.isCtConfigured === false ? StyledQuestionMarkIcon : undefined,
       active: props.viewedTestingType === 'component',
+      'aria-controls': 'component-specs-panel',
     },
   ]
 })

packages/app/src/studio/StudioPanel.vue

@@ -15,6 +15,7 @@ import { init, loadRemote } from '@module-federation/runtime'
 import type { StudioAppDefaultShape, StudioPanelShape } from './studio-app-types'
 import LoadingStudioPanel from './LoadingStudioPanel.vue'
 import type { EventManager } from '../runner/event-manager'
+import type { JSX } from 'vue/jsx-runtime'
 
 // Mirrors the ReactDOM.Root type since incorporating those types
 // messes up vue typing elsewhere

packages/app/src/studio/studio-app-types.ts

@@ -1,3 +1,5 @@
+import type { JSX } from 'vue/jsx-runtime'
+
 export interface StudioPanelProps {
   canAccessStudioAI: boolean
   onStudioPanelClose?: () => void

packages/frontend-shared/cypress/support/mock-graphql/mountFragment.ts

@@ -12,7 +12,7 @@ import type { FragmentDefinitionNode } from 'graphql'
 import { print } from 'graphql'
 import { SubscriptionHook, testUrqlClient } from './clientTestUrqlClient'
 import type { MutationResolverCallback as MutationResolver } from './clientTestUrqlClient'
-import type { Component } from 'vue'
+import type { Component, VNode } from 'vue'
 import { computed, watch, defineComponent, h, toRaw } from 'vue'
 import { each } from 'lodash'
 // tslint:disable-next-line: no-implicit-dependencies - unsure how to handle these tsconfig compiler paths
@@ -228,7 +228,7 @@ type MountFragmentConfig<T extends TypedDocumentNode<any, any>> = {
   /**
    * Render is passed the result of the "frag" and mounts the component under test
    */
-  render: (frag: Exclude<ResultOf<T>, undefined>) => JSX.Element
+  render: (frag: Exclude<ResultOf<T>, undefined>) => VNode
   expectError?: boolean
 } & CyMountOptions<unknown>
 
@@ -239,7 +239,7 @@ type MountFragmentListConfig<T extends TypedDocumentNode<any, any>> = {
   count?: number
   variableTypes?: Record<keyof VariablesOf<T>, string>
   variables?: VariablesOf<T>
-  render: (frag: Exclude<ResultOf<T>, undefined>[]) => JSX.Element
+  render: (frag: Exclude<ResultOf<T>, undefined>[]) => VNode
   onResult?: (result: ResultOf<T>, ctx: ClientTestContext) => ResultOf<T> | void
   expectError?: boolean
 } & CyMountOptions<unknown>