From 1fcee59b24880c39e48686e55aa2e68abb3ec08d Mon Sep 17 00:00:00 2001 From: David Kasper Date: Wed, 30 Aug 2023 18:21:42 -0500 Subject: [PATCH 01/67] basic card visuals, working on click --- packages/app/src/layouts/CommonResults.vue | 59 ++++++ packages/app/src/layouts/CommonRunNumber.vue | 45 +++++ packages/app/src/runs/RunCard.vue | 181 ++++++++++++------- packages/app/src/runs/RunsContainer.vue | 1 + 4 files changed, 218 insertions(+), 68 deletions(-) create mode 100644 packages/app/src/layouts/CommonResults.vue create mode 100644 packages/app/src/layouts/CommonRunNumber.vue diff --git a/packages/app/src/layouts/CommonResults.vue b/packages/app/src/layouts/CommonResults.vue new file mode 100644 index 000000000000..7718d41e27e5 --- /dev/null +++ b/packages/app/src/layouts/CommonResults.vue @@ -0,0 +1,59 @@ + + + diff --git a/packages/app/src/layouts/CommonRunNumber.vue b/packages/app/src/layouts/CommonRunNumber.vue new file mode 100644 index 000000000000..5420655f6773 --- /dev/null +++ b/packages/app/src/layouts/CommonRunNumber.vue @@ -0,0 +1,45 @@ + + + diff --git a/packages/app/src/runs/RunCard.vue b/packages/app/src/runs/RunCard.vue index 177f015d8b5c..a87e6f5e6a32 100644 --- a/packages/app/src/runs/RunCard.vue +++ b/packages/app/src/runs/RunCard.vue @@ -1,83 +1,109 @@ diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json index 6084e023860b..ee6672bfcdcd 100644 --- a/packages/frontend-shared/src/locales/en-US.json +++ b/packages/frontend-shared/src/locales/en-US.json @@ -765,6 +765,11 @@ "link": "Support page", "button": "Try again" } + }, + "card": { + "branchName": "Branch Name: {name}", + "commitAuthor": "Commit Author:", + "totalDuration": "Run Total Duration:" } }, "debugPage": { From 5f6e2fafea2c411b1a90500189ca99e77d1df73b Mon Sep 17 00:00:00 2001 From: David Kasper Date: Wed, 30 Aug 2023 19:55:29 -0500 Subject: [PATCH 03/67] match other i18n --- packages/app/src/runs/RunCard.vue | 8 ++------ packages/frontend-shared/src/locales/en-US.json | 2 +- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/app/src/runs/RunCard.vue b/packages/app/src/runs/RunCard.vue index 32001f805783..ca13dbb8fe6f 100644 --- a/packages/app/src/runs/RunCard.vue +++ b/packages/app/src/runs/RunCard.vue @@ -36,11 +36,7 @@ > {{ tag.srLabel }} - - {{ tag.label }} - + {{ tag.label }} + + {{ t('runs.card.debugLabel') }} + + + + @@ -151,7 +149,8 @@ mutation RunCard_showDebugForCloudRun($runNumber: Int!) { const props = defineProps<{ gql: RunCardFragment - canDebug?: boolean + showDebug?: boolean + debugEnabled?: boolean }>() const run = computed(() => props.gql) @@ -182,7 +181,7 @@ const { relativeCreatedAt, totalDuration } = useRunDateTimeInterval(run) const showDebugForCloudRun = useMutation(RunCard_ShowDebugForCloudRunDocument) -async function showDebug () { +async function showDebugForRun () { if (run.value.runNumber) { await showDebugForCloudRun.executeMutation({ runNumber: run.value.runNumber }) } @@ -220,7 +219,7 @@ const onDebugClick = (event) => { event.preventDefault() event.stopPropagation() - showDebug() + showDebugForRun() } diff --git a/packages/app/src/runs/RunsComposable.ts b/packages/app/src/runs/RunsComposable.ts index 74de6a22efbb..3e23dae3f8d7 100644 --- a/packages/app/src/runs/RunsComposable.ts +++ b/packages/app/src/runs/RunsComposable.ts @@ -5,4 +5,5 @@ export type RunsComposable = { runs: Ref reExecuteRunsQuery: () => void query: any + allRunIds?: Ref } diff --git a/packages/app/src/runs/RunsContainer.cy.tsx b/packages/app/src/runs/RunsContainer.cy.tsx index f120d782f49b..6a11a52a434c 100644 --- a/packages/app/src/runs/RunsContainer.cy.tsx +++ b/packages/app/src/runs/RunsContainer.cy.tsx @@ -17,7 +17,7 @@ describe('', { keystrokeDelay: 0 }, () => { render (gqlVal) { const runs = gqlVal.currentProject?.cloudProject?.__typename === 'CloudProject' ? gqlVal.currentProject.cloudProject.runs?.nodes : undefined - return + return }, }) diff --git a/packages/app/src/runs/RunsContainer.vue b/packages/app/src/runs/RunsContainer.vue index 4d8f73d36fd5..288df1c36430 100644 --- a/packages/app/src/runs/RunsContainer.vue +++ b/packages/app/src/runs/RunsContainer.vue @@ -60,13 +60,28 @@ > {{ t('runs.empty.ensureGitSetupCorrectly') }} - - + + @@ -90,27 +105,6 @@ import { BannerIds } from '@packages/types/src' import { useMarkdown } from '@packages/frontend-shared/src/composables/useMarkdown' import type { RunCardFragment, RunsContainerFragment, RunsGitTreeQuery } from '../generated/graphql' -import { useRelevantRun } from '../composables/useRelevantRun' -const relevantRuns = useRelevantRun('DEBUG') - -const canDebug = (runId: string) => { - const allRuns = relevantRuns.value.all - - if (!allRuns) { - return false - } - - for (let i = 0; i < allRuns?.length; i += 1) { - const tempRun = allRuns[i] - - if (runId === tempRun.runId) { - return true - } - } - - return false -} - const { t } = useI18n() const markdownTarget = ref() @@ -127,6 +121,8 @@ const props = defineProps<{ gql: RunsContainerFragment | RunsGitTreeQuery runs?: RunCardFragment[] online: boolean + allRunIds?: string[] + isUsingGit?: boolean }>() const showConnectSuccessAlert = ref(false) @@ -152,6 +148,16 @@ const { markdown } = useMarkdown(markdownTarget, noRunsForBranchMessage.value, { const userProjectStatusStore = useUserProjectStatusStore() +const enableDebugging = (runId: string) => { + const allRunIds = props.allRunIds + + if (!allRunIds) { + return false + } + + return allRunIds.some((allRunId) => runId === allRunId) +} + // TODO-KASPER: use this logic for layout, matches debug // const groupByCommit = computed(() => { // const grouped = groupBy(compact(props.runs), (run) => { diff --git a/packages/app/src/runs/useGitTreeRuns.ts b/packages/app/src/runs/useGitTreeRuns.ts index 5871798a03c9..a067e4a52e08 100644 --- a/packages/app/src/runs/useGitTreeRuns.ts +++ b/packages/app/src/runs/useGitTreeRuns.ts @@ -52,6 +52,10 @@ export const useGitTreeRuns = (online: Ref): RunsComposable => { return nodes }) + const allRunIds = computed(() => { + return relevantRuns?.value.all?.map((run) => run.runId) || [] + }) + function reExecuteRunsQuery () { query.executeQuery() } @@ -60,5 +64,6 @@ export const useGitTreeRuns = (online: Ref): RunsComposable => { runs, reExecuteRunsQuery, query, + allRunIds, } } From 7e49d7b502ba899199afd9fc872e8add01cba980 Mon Sep 17 00:00:00 2001 From: David Kasper Date: Thu, 31 Aug 2023 21:24:49 -0500 Subject: [PATCH 08/67] working grouping, needs subcomponent --- packages/app/src/runs/RunCard.cy.tsx | 2 +- packages/app/src/runs/RunCard.vue | 5 +- packages/app/src/runs/RunsComposable.ts | 1 + packages/app/src/runs/RunsContainer.vue | 127 +++++++++++++++++------- packages/app/src/runs/useGitTreeRuns.ts | 5 + 5 files changed, 102 insertions(+), 38 deletions(-) diff --git a/packages/app/src/runs/RunCard.cy.tsx b/packages/app/src/runs/RunCard.cy.tsx index 0b1a8f46f81e..eaffdf3f96eb 100644 --- a/packages/app/src/runs/RunCard.cy.tsx +++ b/packages/app/src/runs/RunCard.cy.tsx @@ -18,7 +18,7 @@ describe('', { viewportHeight: 400 }, () => { render: (gqlVal) => { return (
- +
) }, diff --git a/packages/app/src/runs/RunCard.vue b/packages/app/src/runs/RunCard.vue index 15d9813d22c4..9a686b8f9365 100644 --- a/packages/app/src/runs/RunCard.vue +++ b/packages/app/src/runs/RunCard.vue @@ -1,7 +1,7 @@ From 09dedd576bdb4f998a08fcee9f7c00c0b01937d9 Mon Sep 17 00:00:00 2001 From: David Kasper Date: Tue, 5 Sep 2023 14:36:09 -0500 Subject: [PATCH 19/67] add component test for new layout and cleanup --- packages/app/src/runs/RunCard.vue | 4 +- packages/app/src/runs/RunsLayout.cy.tsx | 175 ++++++++++++++++++ packages/app/src/runs/RunsLayout.vue | 40 ++-- .../frontend-shared/src/locales/en-US.json | 5 +- 4 files changed, 200 insertions(+), 24 deletions(-) create mode 100644 packages/app/src/runs/RunsLayout.cy.tsx diff --git a/packages/app/src/runs/RunCard.vue b/packages/app/src/runs/RunCard.vue index 27b1f2c0da7a..bc6b06727c2c 100644 --- a/packages/app/src/runs/RunCard.vue +++ b/packages/app/src/runs/RunCard.vue @@ -4,7 +4,7 @@ class="p-[16px] w-full block overflow-hidden" >
', () => { + context('grouped runs when isUsingGit is true', () => { + it('displays commits grouped by sha', () => { + const shas: string[] = [] + + cy.mountFragment(RunsContainerFragmentDoc, { + render (gqlVal) { + const runs = gqlVal.currentProject?.cloudProject?.__typename === 'CloudProject' ? gqlVal.currentProject.cloudProject.runs?.nodes : undefined + + for (let i = 0; i < statuses.length; i += 1) { + const runSha = runs?.[i]?.commitInfo?.sha + + if (runSha) { + shas.push(runSha) + } + } + + return ( + + ) + }, + }) + + cy.get(`[data-cy="runsLayout-git"`).should('be.visible') + cy.get(`[data-cy="runsLayout-no-git"`).should('not.exist') + cy.wrap(shas).each((sha: string, index) => { + cy.get(`[data-cy="commit-${sha}"`) + .should('be.visible') + .contains(`fix: make gql work ${statuses[index]}`).should('be.visible') + }) + }) + + it('hides View Runs button when latestRunUrl not present', () => { + cy.mountFragment(RunsContainerFragmentDoc, { + render (gqlVal) { + const runs = gqlVal.currentProject?.cloudProject?.__typename === 'CloudProject' ? gqlVal.currentProject.cloudProject.runs?.nodes : undefined + + return ( + + ) + }, + }) + + cy.get('[data-cy="open-cloud-latest').should('not.exist') + }) + + it('displays newer commit checked out', () => { + cy.mountFragment(RunsContainerFragmentDoc, { + render (gqlVal) { + const runs = gqlVal.currentProject?.cloudProject?.__typename === 'CloudProject' ? gqlVal.currentProject.cloudProject.runs?.nodes : undefined + + return ( + + ) + }, + }) + + cy.get('[data-cy="commit-new-sha"]').should('exist').contains('Checked out') + cy.get('[data-cy="open-cloud-latest').should('be.visible').contains('View runs in Cypress Cloud') + cy.wrap(statuses).each((status: string) => { + cy.contains(`fix: make gql work ${ status}`).should('be.visible') + }) + }) + + it('displays first commit checked out', () => { + let firstRunSha: string | null | undefined = null + + cy.mountFragment(RunsContainerFragmentDoc, { + render (gqlVal) { + const runs = gqlVal.currentProject?.cloudProject?.__typename === 'CloudProject' ? gqlVal.currentProject.cloudProject.runs?.nodes : undefined + + firstRunSha = runs?.[0].commitInfo?.sha + + return ( + + ) + }, + }) + + cy.then(() => { + cy.get(`[data-cy="commit-${firstRunSha}"`).should('exist').contains('Checked out') + }) + + cy.get('[href="http://local.com"]').should('be.visible').contains('View runs in Cypress Cloud') + cy.wrap(statuses).each((status: string) => { + cy.contains(`fix: make gql work ${ status}`).should('be.visible') + }) + }) + + it('displays debug button enabled when allRunIds populated', () => { + let firstRunId: string | undefined = undefined + let secondRunId: string | undefined = undefined + let thirdRunId: string | undefined = undefined + + cy.mountFragment(RunsContainerFragmentDoc, { + render (gqlVal) { + const runs = gqlVal.currentProject?.cloudProject?.__typename === 'CloudProject' ? gqlVal.currentProject.cloudProject.runs?.nodes : undefined + + firstRunId = runs?.[0].id + secondRunId = runs?.[1].id + thirdRunId = runs?.[2].id + + return ( + + ) + }, + }) + + cy.then(() => { + cy.get(`[data-cy="runCard-${firstRunId}"`).should('exist').contains('Debug').should('be.enabled') + cy.get(`[data-cy="runCard-${secondRunId}"`).should('exist').contains('Debug').should('be.enabled') + cy.get(`[data-cy="runCard-${thirdRunId}"`).should('exist').contains('Debug').should('not.be.enabled') + }) + + cy.get('[href="http://local.com"]').should('be.visible').contains('View runs in Cypress Cloud') + cy.wrap(statuses).each((status: string) => { + cy.contains(`fix: make gql work ${ status}`).should('be.visible') + }) + }) + }) + + context('block runs when isUsingGit is false', () => { + it('displays in block layout', () => { + cy.mountFragment(RunsContainerFragmentDoc, { + render (gqlVal) { + const runs = gqlVal.currentProject?.cloudProject?.__typename === 'CloudProject' ? gqlVal.currentProject.cloudProject.runs?.nodes : undefined + + return ( + + ) + }, + }) + + cy.get(`[data-cy="runsLayout-git"`).should('not.exist') + cy.get(`[data-cy="runsLayout-no-git"`).should('be.visible') + }) + }) +}) diff --git a/packages/app/src/runs/RunsLayout.vue b/packages/app/src/runs/RunsLayout.vue index d39c1d32b4ef..07491aa7934a 100644 --- a/packages/app/src/runs/RunsLayout.vue +++ b/packages/app/src/runs/RunsLayout.vue @@ -1,9 +1,11 @@ diff --git a/packages/app/src/debug/DebugRunNavigation.vue b/packages/app/src/debug/DebugRunNavigation.vue index ff2a1c4a260f..18c19a11b232 100644 --- a/packages/app/src/debug/DebugRunNavigation.vue +++ b/packages/app/src/debug/DebugRunNavigation.vue @@ -38,12 +38,12 @@