From 9e2bf5b484bf0564283f91a4dc6e09c7960683c7 Mon Sep 17 00:00:00 2001
From: Zachary Williams <ZachJW34@gmail.com>
Date: Fri, 6 Jan 2023 10:16:47 -0600
Subject: [PATCH] fix: only render debug artifacts when info is available
 (#25362)

Co-authored-by: Stokes Player <stokes@cypress.io>
---
 .../app/src/debug/DebugArtifactLink.cy.tsx    |   3 +-
 packages/app/src/debug/DebugArtifactLink.vue  |   7 +-
 packages/app/src/debug/DebugContainer.vue     |   2 +-
 packages/app/src/debug/DebugFailedTest.cy.tsx | 100 +++++++++++-------
 packages/app/src/debug/DebugFailedTest.vue    |  14 +--
 packages/app/src/debug/DebugOverLimit.vue     |   2 +-
 packages/app/src/debug/DebugPageDetails.vue   |   2 +-
 .../app/src/debug/DebugPendingRunCounts.vue   |   2 +-
 packages/app/src/debug/DebugRunNumber.vue     |   2 +-
 packages/app/src/debug/DebugSpec.cy.tsx       |   3 +-
 packages/app/src/debug/DebugSpec.vue          |  30 +++---
 packages/app/src/debug/DebugSpecList.vue      |   2 +-
 .../src/debug/GroupedDebugFailedTest.cy.tsx   |  31 +++---
 .../app/src/debug/GroupedDebugFailedTest.vue  |  15 ++-
 .../app/src/debug/utils/debugArtifacts.ts     |  24 +++++
 .../frontend-shared/src/locales/en-US.json    |   5 +
 16 files changed, 144 insertions(+), 100 deletions(-)
 create mode 100644 packages/app/src/debug/utils/debugArtifacts.ts

diff --git a/packages/app/src/debug/DebugArtifactLink.cy.tsx b/packages/app/src/debug/DebugArtifactLink.cy.tsx
index 574b5a3ef664..919abc703d88 100644
--- a/packages/app/src/debug/DebugArtifactLink.cy.tsx
+++ b/packages/app/src/debug/DebugArtifactLink.cy.tsx
@@ -1,7 +1,8 @@
 import DebugArtifactLink from './DebugArtifactLink.vue'
+import type { ArtifactType } from './utils/debugArtifacts'
 
 describe('<DebugArtifacts />', () => {
-  const artifactMapping: {icon: string, text: string, url: string}[] = [
+  const artifactMapping: {icon: ArtifactType, text: string, url: string}[] = [
     { icon: 'TERMINAL_LOG', text: 'View Log', url: 'www.cypress.io' },
     { icon: 'IMAGE_SCREENSHOT', text: 'View Screenshot', url: 'cloud.cypress.io' },
     { icon: 'PLAY', text: 'View Video', url: 'www.cypress.io' },
diff --git a/packages/app/src/debug/DebugArtifactLink.vue b/packages/app/src/debug/DebugArtifactLink.vue
index 3f385dc5fbbe..635705840128 100644
--- a/packages/app/src/debug/DebugArtifactLink.vue
+++ b/packages/app/src/debug/DebugArtifactLink.vue
@@ -32,15 +32,14 @@
 import { IconTechnologyTerminalLog, IconTechnologyImageScreenshot, IconActionPlaySmall } from '@cypress-design/vue-icon'
 import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
 import ExternalLink from '@cy/gql-components/ExternalLink.vue'
+import type { ArtifactType } from './utils/debugArtifacts'
 
 const props = defineProps<{
-  icon: string
+  icon: ArtifactType
   popperText: string
-  url: string | null | undefined
+  url: string
 }>()
 
-type ArtifactType = 'TERMINAL_LOG' | 'IMAGE_SCREENSHOT' | 'PLAY'
-
 const ICON_MAP: Record<ArtifactType, any> = {
   'TERMINAL_LOG': IconTechnologyTerminalLog,
   'IMAGE_SCREENSHOT': IconTechnologyImageScreenshot,
diff --git a/packages/app/src/debug/DebugContainer.vue b/packages/app/src/debug/DebugContainer.vue
index ab2b6e3336fc..50ca01cd1c3d 100644
--- a/packages/app/src/debug/DebugContainer.vue
+++ b/packages/app/src/debug/DebugContainer.vue
@@ -54,7 +54,7 @@
 
 <script setup lang="ts">
 import { gql } from '@urql/vue'
-import { computed } from '@vue/reactivity'
+import { computed } from 'vue'
 import type { CloudRunStatus, DebugSpecsFragment, TestingTypeEnum } from '../generated/graphql'
 import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
 import DebugPageHeader from './DebugPageHeader.vue'
diff --git a/packages/app/src/debug/DebugFailedTest.cy.tsx b/packages/app/src/debug/DebugFailedTest.cy.tsx
index bee1baaced66..d7330a143dee 100644
--- a/packages/app/src/debug/DebugFailedTest.cy.tsx
+++ b/packages/app/src/debug/DebugFailedTest.cy.tsx
@@ -31,8 +31,26 @@ const group2 = {
   id: '456',
 }
 
+const instance1: TestResults['instance'] = {
+  id: '123',
+  groupId: '123',
+  status: 'FAILED',
+  hasScreenshots: true,
+  screenshotsUrl: 'https://cloud.cypress.io/projects/123/runs/456/overview/789/screenshots',
+  hasStdout: true,
+  stdoutUrl: 'https://cloud.cypress.io/projects/123/runs/456/overview/789/stdout',
+  hasVideo: true,
+  videoUrl: 'https://cloud.cypress.io/projects/123/runs/456/overview/789/video',
+}
+
+const instance2: TestResults['instance'] = {
+  ...instance1,
+  id: '456',
+  groupId: '456',
+}
+
 /**
- * This helper testing function mimicks mappedTitleParts in DebugFailedTest.
+ * This helper testing function mimics mappedTitleParts in DebugFailedTest.
  * It creates an ordered array of titleParts and chevron icons and then asserts
  * the order in which they are rendered using the testAttr and text values.
  */
@@ -84,14 +102,7 @@ describe('<DebugFailedTest/>', () => {
     const testResult: TestResults = {
       id: '676df87878',
       titleParts: ['Login', 'Should redirect unauthenticated user to signin page'],
-      instance: {
-        id: '123',
-        groupId: '123',
-        status: 'FAILED',
-        hasScreenshots: false,
-        hasStdout: false,
-        hasVideo: false,
-      },
+      instance: instance1,
     }
 
     cy.mount(() => (
@@ -114,14 +125,7 @@ describe('<DebugFailedTest/>', () => {
     const multipleTitleParts: TestResults = {
       id: '676df87878',
       titleParts: ['Login', 'Describe', 'it', 'context', 'Should redirect unauthenticated user to signin page'],
-      instance: {
-        id: '456',
-        groupId: '456',
-        status: 'FAILED',
-        hasScreenshots: false,
-        hasStdout: false,
-        hasVideo: false,
-      },
+      instance: instance1,
     }
 
     cy.mount(() => (
@@ -138,26 +142,12 @@ describe('<DebugFailedTest/>', () => {
       {
         id: '676df87878',
         titleParts: ['Login', 'Describe', 'it', 'context', 'Should redirect unauthenticated user to signin page'],
-        instance: {
-          id: '456',
-          groupId: '456',
-          status: 'FAILED',
-          hasScreenshots: false,
-          hasStdout: false,
-          hasVideo: false,
-        },
+        instance: instance1,
       },
       {
         id: '676df87878',
         titleParts: ['Login', 'Should redirect unauthenticated user to signin page'],
-        instance: {
-          id: '123',
-          groupId: '123',
-          status: 'FAILED',
-          hasScreenshots: false,
-          hasStdout: false,
-          hasVideo: false,
-        },
+        instance: instance2,
       },
     ]
 
@@ -179,14 +169,7 @@ describe('<DebugFailedTest/>', () => {
     const testResult: TestResults = {
       id: '676df87874',
       titleParts: ['Test content', 'Test content 2', 'Test content 3', 'Test content 4', 'onMount() should be called once', 'hook() should be called twice and then'],
-      instance: {
-        id: '123',
-        groupId: '123',
-        status: 'FAILED',
-        hasScreenshots: false,
-        hasStdout: false,
-        hasVideo: false,
-      },
+      instance: instance1,
     }
 
     cy.mount(() => (
@@ -202,4 +185,39 @@ describe('<DebugFailedTest/>', () => {
 
     cy.percySnapshot()
   })
+
+  it('conditionally renders artifacts', () => {
+    const render = (testResult: TestResults) => cy.mount(() =>
+      (<div data-cy="test-group">
+        <DebugFailedTest failedTestsResult={[testResult]} groups={[group1]} expandable={false}/>
+      </div>))
+
+    const testResult: TestResults = {
+      id: '676df87874',
+      titleParts: ['Test content', 'Test content 2', 'Test content 3', 'Test content 4', 'onMount() should be called once', 'hook() should be called twice and then'],
+      instance: instance1,
+    }
+
+    const artifactFreeInstance: TestResults['instance'] = {
+      ...instance1,
+      hasStdout: false,
+      hasScreenshots: false,
+      hasVideo: false,
+    }
+
+    render({ ...testResult, instance: artifactFreeInstance })
+    cy.findByTestId('debug-artifacts').children().should('have.length', 0)
+
+    render({ ...testResult, instance: { ...artifactFreeInstance, hasStdout: true } })
+    cy.findByTestId('debug-artifacts').children().should('have.length', 1)
+    cy.findByTestId('TERMINAL_LOG-button').should('exist')
+
+    render({ ...testResult, instance: { ...artifactFreeInstance, hasScreenshots: true } })
+    cy.findByTestId('debug-artifacts').children().should('have.length', 1)
+    cy.findByTestId('IMAGE_SCREENSHOT-button').should('exist')
+
+    render({ ...testResult, instance: { ...artifactFreeInstance, hasVideo: true } })
+    cy.findByTestId('debug-artifacts').children().should('have.length', 1)
+    cy.findByTestId('PLAY-button').should('exist')
+  })
 })
diff --git a/packages/app/src/debug/DebugFailedTest.vue b/packages/app/src/debug/DebugFailedTest.vue
index 55c93feb7428..9f5750f07c38 100644
--- a/packages/app/src/debug/DebugFailedTest.vue
+++ b/packages/app/src/debug/DebugFailedTest.vue
@@ -79,9 +79,13 @@ import { SolidStatusIcon } from '@cypress-design/vue-statusicon'
 import DebugArtifactLink from './DebugArtifactLink.vue'
 import GroupedDebugFailedTestVue from './GroupedDebugFailedTest.vue'
 import { computed } from 'vue'
-import type { TestResults } from './DebugSpec.vue'
 import type { StatsMetadata_GroupsFragment } from '../generated/graphql'
 import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
+import { getDebugArtifacts } from './utils/debugArtifacts'
+import type { TestResults } from './DebugSpec.vue'
+import { useI18n } from '@cy/i18n'
+
+const { t } = useI18n()
 
 const props = defineProps<{
   failedTestsResult: TestResults[]
@@ -163,12 +167,10 @@ const failedTestData = computed(() => {
   })
   .flat() // flatten the array since one of the internal items may itself be an array.
 
+  const debugArtifacts = getDebugArtifacts(runInstance, t)
+
   return {
-    debugArtifacts: [
-      { icon: 'TERMINAL_LOG', text: 'View Log', url: runInstance?.stdoutUrl! },
-      { icon: 'IMAGE_SCREENSHOT', text: 'View Screenshot', url: runInstance?.screenshotsUrl! },
-      { icon: 'PLAY', text: 'View Video', url: runInstance?.videoUrl! },
-    ],
+    debugArtifacts,
     mappedTitleParts,
   }
 })
diff --git a/packages/app/src/debug/DebugOverLimit.vue b/packages/app/src/debug/DebugOverLimit.vue
index ec1aab296764..67e4586096fd 100644
--- a/packages/app/src/debug/DebugOverLimit.vue
+++ b/packages/app/src/debug/DebugOverLimit.vue
@@ -27,7 +27,7 @@ import type { DebugReasonsRunIsHiddenFragment, OverLimitActionTypeEnum } from '.
 import { getUtmSource } from '@packages/frontend-shared/src/utils/getUtmSource'
 import { useI18n } from '@cy/i18n'
 import { getUrlWithParams } from '@packages/frontend-shared/src/utils/getUrlWithParams'
-import { computed } from '@vue/reactivity'
+import { computed } from 'vue'
 
 export type CloudRunHidingReason = DebugReasonsRunIsHiddenFragment['reasonsRunIsHidden'][number]
 
diff --git a/packages/app/src/debug/DebugPageDetails.vue b/packages/app/src/debug/DebugPageDetails.vue
index 1ed86387b701..85e45025fc4f 100644
--- a/packages/app/src/debug/DebugPageDetails.vue
+++ b/packages/app/src/debug/DebugPageDetails.vue
@@ -33,7 +33,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed } from '@vue/reactivity'
+import { computed } from 'vue'
 import { gql } from '@urql/vue'
 import type { CloudRunStatus, OverLimitActionTypeEnum, DebugSpecListSpecFragment, DebugPageDetails_CloudCiBuildInfoFragment } from '../generated/graphql'
 import DebugCancelledAlert from './DebugCancelledAlert.vue'
diff --git a/packages/app/src/debug/DebugPendingRunCounts.vue b/packages/app/src/debug/DebugPendingRunCounts.vue
index ded30d24aa87..ba6fb6237714 100644
--- a/packages/app/src/debug/DebugPendingRunCounts.vue
+++ b/packages/app/src/debug/DebugPendingRunCounts.vue
@@ -9,7 +9,7 @@
 
 <script setup lang="ts">
 import { gql } from '@urql/core'
-import { computed } from '@vue/reactivity'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { CloudSpecStatus } from '../generated/graphql'
 
diff --git a/packages/app/src/debug/DebugRunNumber.vue b/packages/app/src/debug/DebugRunNumber.vue
index b5dec6a88dfd..eda2561aab9c 100644
--- a/packages/app/src/debug/DebugRunNumber.vue
+++ b/packages/app/src/debug/DebugRunNumber.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from '@vue/reactivity'
+import { computed } from 'vue'
 import type { CloudRunStatus } from '../generated/graphql'
 import { SolidStatusIcon, StatusType } from '@cypress-design/vue-statusicon'
 
diff --git a/packages/app/src/debug/DebugSpec.cy.tsx b/packages/app/src/debug/DebugSpec.cy.tsx
index 2b9f4a65004c..5a8045bf0235 100644
--- a/packages/app/src/debug/DebugSpec.cy.tsx
+++ b/packages/app/src/debug/DebugSpec.cy.tsx
@@ -1,5 +1,4 @@
-import type { TestResults, Spec } from './DebugSpec.vue'
-import DebugSpec from './DebugSpec.vue'
+import DebugSpec, { Spec, TestResults } from './DebugSpec.vue'
 import { defaultMessages } from '@cy/i18n'
 
 const resultCounts = (min: number, max: number) => {
diff --git a/packages/app/src/debug/DebugSpec.vue b/packages/app/src/debug/DebugSpec.vue
index 1c395d9931f4..95f4041afd2d 100644
--- a/packages/app/src/debug/DebugSpec.vue
+++ b/packages/app/src/debug/DebugSpec.vue
@@ -42,7 +42,7 @@
           </div>
           <ul
             data-cy="spec-header-metadata"
-            class="flex flex-wrap items-center gap-x-3 text-gray-700 whitespace-nowrap children:flex children:items-center font-normal text-sm"
+            class="flex flex-wrap font-normal text-sm text-gray-700 gap-x-3 items-center whitespace-nowrap children:flex children:items-center"
           >
             <li
               :data-cy="'debugHeader-results'"
@@ -141,6 +141,20 @@
 </template>
 <script lang="ts" setup>
 
+import { computed, unref } from 'vue'
+import { IconActionRefresh, IconDocumentText } from '@cypress-design/vue-icon'
+import type { SpecDataAggregate, CloudRunInstance } from '@packages/data-context/src/gen/graphcache-config.gen'
+import DebugFailedTest from './DebugFailedTest.vue'
+import StatsMetaData from './StatsMetadata.vue'
+import ResultCounts from '@packages/frontend-shared/src/components/ResultCounts.vue'
+import Button from '@packages/frontend-shared/src/components/Button.vue'
+import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
+import SpecNameDisplay from '../specs/SpecNameDisplay.vue'
+import { useI18n } from '@cy/i18n'
+import { useDurationFormat } from '../composables/useDurationFormat'
+import { posixify } from '../paths'
+import type { StatsMetadata_GroupsFragment, TestingTypeEnum } from '../generated/graphql'
+
 export interface Spec {
   id: string
   path: string
@@ -159,20 +173,6 @@ export interface TestResults {
   readonly instance: CloudRunInstance | null
 }
 
-import { computed, unref } from 'vue'
-import { IconActionRefresh, IconDocumentText } from '@cypress-design/vue-icon'
-import type { SpecDataAggregate, CloudRunInstance } from '@packages/data-context/src/gen/graphcache-config.gen'
-import DebugFailedTest from './DebugFailedTest.vue'
-import StatsMetaData from './StatsMetadata.vue'
-import ResultCounts from '@packages/frontend-shared/src/components/ResultCounts.vue'
-import Button from '@packages/frontend-shared/src/components/Button.vue'
-import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
-import SpecNameDisplay from '../specs/SpecNameDisplay.vue'
-import { useI18n } from '@cy/i18n'
-import { useDurationFormat } from '../composables/useDurationFormat'
-import { posixify } from '../paths'
-import type { StatsMetadata_GroupsFragment, TestingTypeEnum } from '../generated/graphql'
-
 const { t } = useI18n()
 
 const props = defineProps<{
diff --git a/packages/app/src/debug/DebugSpecList.vue b/packages/app/src/debug/DebugSpecList.vue
index fee9524cfce0..29bdf5f2aece 100644
--- a/packages/app/src/debug/DebugSpecList.vue
+++ b/packages/app/src/debug/DebugSpecList.vue
@@ -20,7 +20,7 @@
 <script setup lang="ts">
 import { gql } from '@urql/core'
 import { useMutation } from '@urql/vue'
-import { computed } from '@vue/reactivity'
+import { computed } from 'vue'
 import { SwitchTestingTypeAndRelaunchDocument, TestingTypeEnum } from '../generated/graphql'
 import DebugSpec from './DebugSpec.vue'
 import type { CloudDebugSpec } from './utils/DebugMapping'
diff --git a/packages/app/src/debug/GroupedDebugFailedTest.cy.tsx b/packages/app/src/debug/GroupedDebugFailedTest.cy.tsx
index e5a559753305..f053a88ec354 100644
--- a/packages/app/src/debug/GroupedDebugFailedTest.cy.tsx
+++ b/packages/app/src/debug/GroupedDebugFailedTest.cy.tsx
@@ -1,5 +1,5 @@
-import GroupedDebugFailedTest from './GroupedDebugFailedTest.vue'
 import type { TestResults } from './DebugSpec.vue'
+import GroupedDebugFailedTest from './GroupedDebugFailedTest.vue'
 
 describe('<GroupedDebugFailedTest/>', () => {
   const testResult: TestResults[] = [
@@ -8,14 +8,14 @@ describe('<GroupedDebugFailedTest/>', () => {
       titleParts: ['Login', 'Should redirect unauthenticated user to signin page'],
       instance: {
         id: '123',
-        status: 'FAILED',
         groupId: '123',
+        status: 'FAILED',
         hasScreenshots: true,
-        screenshotsUrl: 'www.cypress.io',
+        screenshotsUrl: 'https://cloud.cypress.io/projects/123/runs/456/overview/789/screenshots',
         hasStdout: true,
-        stdoutUrl: 'www.cypress.io',
+        stdoutUrl: 'https://cloud.cypress.io/projects/123/runs/456/overview/789/stdout',
         hasVideo: true,
-        videoUrl: 'www.cypress.io',
+        videoUrl: 'https://cloud.cypress.io/projects/123/runs/456/overview/789/video',
       },
     },
     {
@@ -26,11 +26,11 @@ describe('<GroupedDebugFailedTest/>', () => {
         status: 'FAILED',
         groupId: '456',
         hasScreenshots: true,
-        screenshotsUrl: 'cloud.cypress.io',
+        screenshotsUrl: 'https://cloud.cypress.io/projects/123/runs/456/overview/789/screenshots',
         hasStdout: true,
-        stdoutUrl: 'cloud.cypress.io',
+        stdoutUrl: 'https://cloud.cypress.io/projects/123/runs/456/overview/789/stdout',
         hasVideo: true,
-        videoUrl: 'cloud.cypress.io',
+        videoUrl: 'https://cloud.cypress.io/projects/123/runs/456/overview/789/video',
       },
     },
   ]
@@ -73,15 +73,12 @@ describe('<GroupedDebugFailedTest/>', () => {
       </div>
     ))
 
-    cy.findAllByTestId(`grouped-row`).should('have.length', 2)
-    .each((el) => {
-      cy.wrap(el).findByTestId('debug-artifacts').should('not.be.visible')
-      cy.wrap(el).realHover().then(() => {
-        cy.wrap(el).findByTestId('debug-artifacts').should('be.visible').children().should('have.length', 3)
-      })
-
-      cy.wrap(el).findByTestId('stats-metadata').children().should('have.length', 3)
-    })
+    cy.findAllByTestId(`grouped-row`).should('have.length', 2).each((el) => cy.wrap(el).within(() => {
+      cy.findByTestId('debug-artifacts').should('not.be.visible')
+      cy.wrap(el).realHover()
+      cy.findByTestId('debug-artifacts').should('be.visible').children().should('have.length', 3)
+      cy.findByTestId('stats-metadata').children().should('have.length', 3)
+    }))
 
     cy.percySnapshot()
   })
diff --git a/packages/app/src/debug/GroupedDebugFailedTest.vue b/packages/app/src/debug/GroupedDebugFailedTest.vue
index c9d630ed9a0d..7a3506b3b822 100644
--- a/packages/app/src/debug/GroupedDebugFailedTest.vue
+++ b/packages/app/src/debug/GroupedDebugFailedTest.vue
@@ -34,25 +34,24 @@
   </div>
 </template>
 <script lang="ts" setup>
-import type { TestResults } from './DebugSpec.vue'
 import StatsMetadata from './StatsMetadata.vue'
 import DebugArtifactLink from './DebugArtifactLink.vue'
 import { computed } from 'vue'
 import type { StatsMetadata_GroupsFragment } from '../generated/graphql'
+import { DebugArtifact, getDebugArtifacts } from './utils/debugArtifacts'
+import type { TestResults } from './DebugSpec.vue'
+import { useI18n } from '@cy/i18n'
 
 const props = defineProps<{
   failedTests: TestResults[]
   groups: StatsMetadata_GroupsFragment[]
 }>()
 
+const { t } = useI18n()
+
 const debugArtifacts = computed(() => {
-  return props.failedTests.reduce<{[groupID: string]: {icon: string, text: string, url: string | null | undefined }[] }>((acc, curr) => {
-    //TODO Update logic to not rely on defaulting to empty strings and only render appropriate links See https://github.com/cypress-io/cypress/issues/25319
-    acc[curr.instance?.groupId ?? ''] = [
-      { icon: 'TERMINAL_LOG', text: 'View Log', url: curr.instance!.stdoutUrl ?? '' },
-      { icon: 'IMAGE_SCREENSHOT', text: 'View Screenshot', url: curr.instance!.screenshotsUrl ?? '' },
-      { icon: 'PLAY', text: 'View Video', url: curr.instance!.videoUrl ?? '' },
-    ]
+  return props.failedTests.reduce<{[groupID: string]: DebugArtifact[] }>((acc, curr) => {
+    acc[curr.instance?.groupId ?? ''] = getDebugArtifacts(curr.instance, t)
 
     return acc
   }, {})
diff --git a/packages/app/src/debug/utils/debugArtifacts.ts b/packages/app/src/debug/utils/debugArtifacts.ts
new file mode 100644
index 000000000000..7be7b0424603
--- /dev/null
+++ b/packages/app/src/debug/utils/debugArtifacts.ts
@@ -0,0 +1,24 @@
+import type { CloudRunInstance } from '@packages/data-context/src/gen/graphcache-config.gen'
+import type { useI18n } from '@cy/i18n'
+
+export type ArtifactType = 'TERMINAL_LOG' | 'IMAGE_SCREENSHOT' | 'PLAY'
+
+export type DebugArtifact = { icon: ArtifactType, text: string, url: string }
+
+export const getDebugArtifacts = (instance: CloudRunInstance | null, t: ReturnType<typeof useI18n>['t']): DebugArtifact[] => {
+  const debugArtifacts: DebugArtifact[] = []
+
+  if (instance?.hasStdout && instance.stdoutUrl) {
+    debugArtifacts.push({ icon: 'TERMINAL_LOG', text: t('debugPage.artifacts.stdout'), url: instance.stdoutUrl })
+  }
+
+  if (instance?.hasScreenshots && instance.screenshotsUrl) {
+    debugArtifacts.push({ icon: 'IMAGE_SCREENSHOT', text: t('debugPage.artifacts.screenshots'), url: instance.screenshotsUrl })
+  }
+
+  if (instance?.hasVideo && instance.videoUrl) {
+    debugArtifacts.push({ icon: 'PLAY', text: t('debugPage.artifacts.video'), url: instance.videoUrl })
+  }
+
+  return debugArtifacts
+}
diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json
index 40f70fac3534..4eeaf294c2ae 100644
--- a/packages/frontend-shared/src/locales/en-US.json
+++ b/packages/frontend-shared/src/locales/en-US.json
@@ -693,6 +693,11 @@
       "groups": "{n} group | {n} groups",
       "operatingSystems": "{n} operating system | {n} operating systems",
       "browsers": "{n} browser | {n} browsers"
+    },
+    "artifacts": {
+      "stdout": "View Log",
+      "screenshots": "View Screenshots",
+      "video": "View Video"
     }
   },
   "testingType": {