feat: IATR cloud data backend

packages/app/src/composables/useRelevantRun.ts

@@ -0,0 +1,22 @@
+import { gql, useSubscription } from '@urql/vue'
+import { Debug_RelevantRuns_SubscriptionDocument } from '@packages/app/src/generated/graphql'
+import { computed } from 'vue'
+
+gql`
+  subscription Debug_RelevantRuns_Subscription {
+    relevantRuns {
+      current
+      next
+      commitsAhead
+    }
+  }
+
+`
+
+export function useRelevantRun () {
+  const subscriptionResponse = useSubscription({ query: Debug_RelevantRuns_SubscriptionDocument })
+
+  return computed(() => {
+    return subscriptionResponse.data.value?.relevantRuns
+  })
+}

packages/app/src/composables/useTestsForDebug.ts

@@ -0,0 +1,25 @@
+import { gql, useQuery } from '@urql/vue'
+import { Debug_TestsForDebugDocument } from '@packages/app/src/generated/graphql'
+
+gql`
+  query Debug_TestsForDebug($specTitle: String!) {
+    currentProject {
+      id
+      testsForReviewBySpec(specTitle: $specTitle)
+    }
+  }
+`
+
+export function useTestsForDebug () {
+  const variables = { specTitle: '' }
+
+  const query = useQuery({ query: Debug_TestsForDebugDocument, variables, pause: true })
+
+  return (specTitle: string) => {
+    variables.specTitle = specTitle
+
+    const results = query.executeQuery()
+
+    return results.data.value
+  }
+}

packages/app/src/debug/DebugContainer.cy.tsx

@@ -5,10 +5,30 @@ import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-
 import { specsList } from './utils/DebugMapping'
 import { CloudRunStubs } from '@packages/graphql/test/stubCloudTypes'
 
+const DebugSpecVariableTypes = {
+  hasNextRun: 'Boolean',
+  runNumber: 'Int',
+  nextRunNumber: 'Int',
+}
+
 describe('<DebugContainer />', () => {
+  describe('offline', () => {
+    it('shows offline message if offline', () => {
+      cy.mount(() => <DebugContainer online={false}/>)
+
+      cy.contains('You have no internet connection').should('be.visible')
+    })
+  })
+
   describe('empty states', () => {
     const validateEmptyState = (expectedMessages: string[]) => {
       cy.mountFragment(DebugSpecsFragmentDoc, {
+        variableTypes: DebugSpecVariableTypes,
+        variables: {
+          hasNextRun: false,
+          runNumber: 1,
+          nextRunNumber: -1,
+        },
         render: (gqlVal) => <DebugContainer gql={gqlVal} />,
       })
 
@@ -38,6 +58,12 @@ describe('<DebugContainer />', () => {
       loginConnectStore.setUserFlag('isLoggedIn', true)
       loginConnectStore.setProjectFlag('isProjectConnected', true)
       cy.mountFragment(DebugSpecsFragmentDoc, {
+        variableTypes: DebugSpecVariableTypes,
+        variables: {
+          hasNextRun: false,
+          runNumber: 1,
+          nextRunNumber: -1,
+        },
         render: (gqlVal) => <DebugContainer gql={gqlVal} />,
       })
 
@@ -51,6 +77,12 @@ describe('<DebugContainer />', () => {
       loginConnectStore.setUserFlag('isLoggedIn', true)
       loginConnectStore.setProjectFlag('isProjectConnected', true)
       cy.mountFragment(DebugSpecsFragmentDoc, {
+        variableTypes: DebugSpecVariableTypes,
+        variables: {
+          hasNextRun: false,
+          runNumber: 1,
+          nextRunNumber: -1,
+        },
         render: (gqlVal) => <DebugContainer gql={gqlVal} showError={true} />,
       })
 
@@ -69,6 +101,12 @@ describe('<DebugContainer />', () => {
 
     function mountTestRun (runName: string) {
       cy.mountFragment(DebugSpecsFragmentDoc, {
+        variableTypes: DebugSpecVariableTypes,
+        variables: {
+          hasNextRun: false,
+          runNumber: 1,
+          nextRunNumber: -1,
+        },
         onResult: (result) => {
           if (result.currentProject?.cloudProject?.__typename === 'CloudProject') {
             const test = result.currentProject.cloudProject.runByNumber
@@ -181,6 +219,12 @@ describe('<DebugContainer />', () => {
 
     it('render first pending run', () => {
       cy.mountFragment(DebugSpecsFragmentDoc, {
+        variableTypes: DebugSpecVariableTypes,
+        variables: {
+          hasNextRun: false,
+          runNumber: 1,
+          nextRunNumber: -1,
+        },
         onResult: (result) => {
           if (result.currentProject?.cloudProject?.__typename === 'CloudProject') {
             const test = result.currentProject.cloudProject.runByNumber
@@ -204,6 +248,12 @@ describe('<DebugContainer />', () => {
 
     it('renders specs and tests when completed run available', () => {
       cy.mountFragment(DebugSpecsFragmentDoc, {
+        variableTypes: DebugSpecVariableTypes,
+        variables: {
+          hasNextRun: false,
+          runNumber: 1,
+          nextRunNumber: -1,
+        },
         onResult: (result) => {
           if (result.currentProject?.cloudProject?.__typename === 'CloudProject') {
             const test = result.currentProject.cloudProject.runByNumber
@@ -223,6 +273,12 @@ describe('<DebugContainer />', () => {
 
     it('renders failed test limit when exceeded', () => {
       cy.mountFragment(DebugSpecsFragmentDoc, {
+        variableTypes: DebugSpecVariableTypes,
+        variables: {
+          hasNextRun: false,
+          runNumber: 1,
+          nextRunNumber: -1,
+        },
         onResult: (result) => {
           if (result.currentProject?.cloudProject?.__typename === 'CloudProject') {
             const test = result.currentProject.cloudProject.runByNumber
@@ -242,13 +298,24 @@ describe('<DebugContainer />', () => {
     context('newer relevant run available', () => {
       it('displays newer run with progress when running', () => {
         cy.mountFragment(DebugSpecsFragmentDoc, {
+          variableTypes: DebugSpecVariableTypes,
+          variables: {
+            hasNextRun: false,
+            runNumber: 1,
+            nextRunNumber: -1,
+          },
           onResult: (result) => {
             if (result.currentProject?.cloudProject?.__typename === 'CloudProject') {
               const test = result.currentProject.cloudProject.runByNumber
 
               result.currentProject.cloudProject.runByNumber = {
-                ...CloudRunStubs.running,
+                ...CloudRunStubs.failingWithTests,
               } as typeof test
+
+              const nextRun = result.currentProject.cloudProject.nextRun
+              const nextCompleted = CloudRunStubs.running as typeof nextRun
+
+              result.currentProject.cloudProject.nextRun = nextCompleted
             }
           },
           render: (gqlVal) => <DebugContainer gql={gqlVal} />,
@@ -262,12 +329,24 @@ describe('<DebugContainer />', () => {
 
       it('displays newer run with link when complete', () => {
         cy.mountFragment(DebugSpecsFragmentDoc, {
+          variableTypes: DebugSpecVariableTypes,
+          variables: {
+            hasNextRun: false,
+            runNumber: 1,
+            nextRunNumber: 2,
+          },
           onResult: (result) => {
             if (result.currentProject?.cloudProject?.__typename === 'CloudProject') {
               const test = result.currentProject.cloudProject.runByNumber
-              const other = CloudRunStubs.failingWithTests as typeof test
 
-              result.currentProject.cloudProject.runByNumber = other
+              result.currentProject.cloudProject.runByNumber = {
+                ...CloudRunStubs.failingWithTests,
+              } as typeof test
+
+              const nextRun = result.currentProject.cloudProject.nextRun
+              const nextCompleted = CloudRunStubs.failingWithTests as typeof nextRun
+
+              result.currentProject.cloudProject.nextRun = nextCompleted
             }
           },
           render: (gqlVal) => <DebugContainer gql={gqlVal} />,

packages/app/src/debug/DebugContainer.vue

@@ -1,15 +1,19 @@
 <template>
   <div class="h-full">
+    <NoInternetConnection v-if="!online">
+      {{ t('launchpadErrors.noInternet.connectProject') }}
+    </NoInternetConnection>
+    <DebugLoading v-else-if="isLoading" />
     <DebugError
-      v-if="showError"
+      v-else-if="showError"
     />
     <div
       v-else-if="loginConnectStore.user.isLoggedIn && loginConnectStore.project.isProjectConnected && run?.status"
       class="flex flex-col h-full"
     >
       <DebugPageHeader
         :gql="run"
-        :commits-ahead="0"
+        :commits-ahead="props.commitsAhead"
       />
       <DebugNewRelevantRunBar
         v-if="newerRelevantRun"
@@ -19,11 +23,10 @@
       <DebugPendingRunSplash
         v-if="isFirstPendingRun"
         class="mt-12"
-        :spec-statuses="specStatuses"
       />
       <template v-else>
         <DebugPageDetails
-          v-if="shouldDisplayDetails(run.status)"
+          v-if="shouldDisplayDetails(run.status, run.isHidden)"
           :status="run.status"
           :specs="run.specs"
           :cancellation="{ cancelledAt: run.cancelledAt, cancelledBy: run.cancelledBy }"
@@ -62,6 +65,8 @@ import { gql } from '@urql/vue'
 import { computed } from 'vue'
 import type { CloudRunStatus, DebugSpecsFragment, TestingTypeEnum } from '../generated/graphql'
 import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
+import NoInternetConnection from '@packages/frontend-shared/src/components/NoInternetConnection.vue'
+import DebugLoading from '../debug/empty/DebugLoading.vue'
 import DebugPageHeader from './DebugPageHeader.vue'
 import DebugPendingRunSplash from './DebugPendingRunSplash.vue'
 import DebugSpecList from './DebugSpecList.vue'
@@ -75,6 +80,9 @@ import DebugNewRelevantRunBar from './DebugNewRelevantRunBar.vue'
 import { specsList } from './utils/DebugMapping'
 import type { CloudRunHidingReason } from './DebugOverLimit.vue'
 import dayjs from 'dayjs'
+import { useI18n } from '@cy/i18n'
+
+const { t } = useI18n()
 
 gql`
 fragment DebugLocalSpecs on Spec {
@@ -92,7 +100,7 @@ fragment DebugSpecs on Query {
       __typename
       ... on CloudProject {
         id
-        runByNumber(runNumber: 1) {
+        runByNumber(runNumber: $runNumber) {
           ...DebugPageHeader
           cancelledBy {
             id
@@ -134,7 +142,9 @@ fragment DebugSpecs on Query {
             ...DebugSpecListGroups
           }
           createdAt
-          ...DebugPendingRunSplash
+        }
+        nextRun: runByNumber(runNumber: $nextRunNumber) @include(if: $hasNextRun) {
+          id
           ...DebugNewRelevantRunBar
         }
       }
@@ -148,20 +158,33 @@ fragment DebugSpecs on Query {
 }
 `
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   gql?: DebugSpecsFragment
   // This prop is just to stub the error state for now
   showError?: boolean
-}>()
+  isLoading?: boolean
+  commitsAhead?: number
+  online?: boolean
+}>(),
+{
+  gql: undefined,
+  isLoading: false,
+  commitsAhead: 0,
+  online: true,
+})
 
 const loginConnectStore = useLoginConnectStore()
 
 const run = computed(() => {
   return props.gql?.currentProject?.cloudProject?.__typename === 'CloudProject' ? props.gql.currentProject.cloudProject.runByNumber : null
 })
 
-function shouldDisplayDetails (status: CloudRunStatus) {
-  return !['RUNNING', 'FAILED'].includes(status)
+const nextRun = computed(() => {
+  return props.gql?.currentProject?.cloudProject?.__typename === 'CloudProject' ? props.gql.currentProject.cloudProject.nextRun : null
+})
+
+function shouldDisplayDetails (status: CloudRunStatus, isHidden: boolean) {
+  return !['RUNNING', 'FAILED'].includes(status) || isHidden
 }
 
 function shouldDisplaySpecsList (status: CloudRunStatus) {
@@ -189,12 +212,9 @@ const debugSpecsArray = computed(() => {
   return []
 })
 
-const specStatuses = computed(() => run.value?.specs.map((spec) => spec.status || 'UNCLAIMED') || [])
-
-// TODO GH#24440 Re-map to use relevant run data point (currently stubbed with current run)
-const newerRelevantRun = computed(() => run.value)
+const newerRelevantRun = computed(() => nextRun.value)
 
-const isFirstPendingRun = computed(() => run.value && run.value.runNumber === 1 && run.value.status === 'RUNNING')
+const isFirstPendingRun = computed(() => run.value && run.value.status === 'RUNNING')
 
 const reasonsRunIsHidden = computed(() => (run.value?.reasonsRunIsHidden || []) as CloudRunHidingReason[])
 

packages/app/src/debug/DebugFailedTest.vue

@@ -11,7 +11,7 @@
     />
     <template
       v-for="{text, type}, index in failedTestData.mappedTitleParts"
-      :key="`${titlePart}-${index}`"
+      :key="`${text}-${index}`"
       :data-cy="`titleParts-${index}`"
     >
       <IconChevronRightSmall