feat: Auto select project when an organization only has one project (#…

…23266) * feat: Auto select project when an organization only has one project * Fix failing e2e test * Code review changes * Resolve side effect of adding additional project to gql stub * Fix issue with selected project not being set * misc improvements to types * Revert changes based on product decision Co-authored-by: Lachlan Miller <[email protected]>
cypress-io · Aug 15, 2022 · 2899b21 · 2899b21 · cypress-bot · Aug 15, 2022
1 parent e5e79cf
commit 2899b21
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 15 deletions.
diff --git a/packages/app/cypress/e2e/runs.cy.ts b/packages/app/cypress/e2e/runs.cy.ts
@@ -389,8 +389,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
     it('opens Connect Project modal after clicking Reconnect Project button', () => {
       cy.findByText(defaultMessages.runs.errors.notFound.button).should('be.visible').click()
       cy.get('[aria-modal="true"]').should('exist')
-      cy.get('[data-cy="selectProject"] button').click()
-      cy.findByText('Mock Project').click()
+      cy.get('[data-cy="selectProject"] button').should('have.text', 'Mock Project')
       cy.findByText(defaultMessages.runs.connect.modal.selectProject.connectProject).click()
       cy.get('[data-cy="runs"]', { timeout: 7500 })
     })

diff --git a/packages/app/src/runs/modals/SelectCloudProjectModal.cy.tsx b/packages/app/src/runs/modals/SelectCloudProjectModal.cy.tsx
@@ -1,5 +1,8 @@
 import { defaultMessages } from '@cy/i18n'
-import { CloudOrganizationConnectionStubs, CloudUserStubs } from '@packages/graphql/test/stubCloudTypes'
+import {
+  CloudOrganizationConnectionStubs,
+  CloudUserStubs,
+} from '@packages/graphql/test/stubCloudTypes'
 import { SelectCloudProjectModalFragmentDoc } from '../../generated/graphql-test'
 import SelectCloudProjectModal from '../modals/SelectCloudProjectModal.vue'
 
@@ -65,4 +68,30 @@ describe('<SelectCloudProjectModal />', () => {
 
     cy.contains('a', defaultMessages.runs.connect.modal.selectProject.chooseExistingProject).should('not.exist')
   })
+
+  it('auto selects a project if it is the only project in the organization', () => {
+    mountDialog()
+    cy.get('[data-cy="selectOrganization"]').click()
+    cy.findByRole('listbox').within(() => cy.findAllByText('Test Org 3').click())
+
+    cy.get('[data-cy="selectProject"] button').should('have.text', 'Test Project 3')
+  })
+
+  it(`doesn't auto select a project if there are more than 1 projects in the org`, () => {
+    mountDialog()
+    cy.get('[data-cy="selectOrganization"]').click()
+    cy.findByRole('listbox').within(() => cy.findAllByText('Test Org 1').click())
+    cy.get('[data-cy="selectProject"] button').should('have.text', 'Pick a project')
+  })
+
+  it('shows the selected project when selecting from a list of >= 2 projects', () => {
+    mountDialog()
+    cy.get('[data-cy="selectOrganization"]').click()
+    cy.findByRole('listbox').within(() => cy.findAllByText('Test Org 1').click())
+    cy.get('[data-cy="selectProject"] button').click()
+    cy.contains('Test Project 2').click()
+    cy.get('[data-cy="selectProject"] button').should('have.text', 'Test Project 2').click()
+    cy.contains('Test Project 1').click()
+    cy.get('[data-cy="selectProject"] button').should('have.text', 'Test Project 1')
+  })
 })
diff --git a/packages/app/src/runs/modals/SelectCloudProjectModal.vue b/packages/app/src/runs/modals/SelectCloudProjectModal.vue
@@ -48,12 +48,12 @@
         data-cy="selectOrganization"
       >
         <template #label>
-          <span class="flex font-normal my-8px text-16px leading-24px items-end">
+          <span class="flex font-normal my-8px text-16px leading-24px items-end justify-between">
             <span class="">
               {{ t('runs.connect.modal.selectProject.organization') }}
             </span>
             <ExternalLink
-              class="cursor-pointer flex-grow text-right text-indigo-500 hover:underline"
+              class="cursor-pointer text-right text-indigo-500 hover:underline"
               :href="organizationUrl"
             >
               {{ t('runs.connect.modal.selectProject.manageOrgs') }}
@@ -80,13 +80,13 @@
         data-cy="selectProject"
       >
         <template #label>
-          <div class="flex font-normal text-16px leading-24px items-center">
+          <div class="flex font-normal text-16px leading-24px items-center justify-between">
             <p class="text-gray-800">
               {{ t('runs.connect.modal.selectProject.project') }}
+              <span class="text-red-500">*</span>
             </p>
-            <span class="ml-4px text-red-500">*</span>
             <a
-              class="cursor-pointer flex-grow my-8px text-right text-indigo-500 hover:underline"
+              class="cursor-pointer my-8px text-right text-indigo-500 hover:underline"
               @click="newProject = true"
             >
               {{ t('runs.connect.modal.selectProject.createNewProject') }}
@@ -179,7 +179,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
 import { gql, useMutation } from '@urql/vue'
 import StandardModal from '@cy/components/StandardModal.vue'
 import Button from '@cy/components/Button.vue'
@@ -194,7 +194,7 @@ import CreateIcon from '~icons/cy/add-large_x16.svg'
 import FolderIcon from '~icons/cy/folder-outline_x16.svg'
 import OrganizationIcon from '~icons/cy/office-building_x16.svg'
 import { SelectCloudProjectModal_CreateCloudProjectDocument, SelectCloudProjectModal_SetProjectIdDocument } from '../../generated/graphql'
-import type { SelectCloudProjectModalFragment } from '../../generated/graphql'
+import type { SelectCloudProjectModalFragment, CloudProjectNodeFragment } from '../../generated/graphql'
 import { useI18n } from '@cy/i18n'
 import { sortBy } from 'lodash'
 import { useOnline } from '@vueuse/core'
@@ -204,6 +204,14 @@ import { clearPendingError } from '@packages/frontend-shared/src/graphql/urqlCli
 const { t } = useI18n()
 const online = useOnline()
 
+gql`
+fragment CloudProjectNode on CloudProject {
+  id
+  slug
+  name
+}
+`
+
 gql`
 fragment SelectCloudProjectModal on Query {
   cloudViewer {
@@ -216,8 +224,7 @@ fragment SelectCloudProjectModal on Query {
         projects(first: 100) { # Not expecting there will be > 100 projects. If there are we will implement pagination
           nodes {
             id
-            slug
-            name
+            ...CloudProjectNode
           }
         }
       }
@@ -294,7 +301,15 @@ const pickedOrganization = ref(organizations.value.length >= 1 ? organizations.v
 
 const projects = computed(() => pickedOrganization.value?.projects?.nodes || [])
 const newProject = ref(projects.value.length === 0)
-const pickedProject = ref(pickedOrganization.value?.projects ? pickedOrganization.value.projects.nodes.find((p) => p.name === projectName.value) : undefined)
+const pickedProject = ref<CloudProjectNodeFragment>()
+
+watchEffect(() => {
+  if (pickedOrganization.value?.projects?.nodes?.length === 1) {
+    pickedProject.value = pickedOrganization.value.projects.nodes[0]
+  } else {
+    pickedProject.value = pickedOrganization.value?.projects?.nodes?.find((p) => p.name === projectName.value)
+  }
+})
 
 const orgPlaceholder = t('runs.connect.modal.selectProject.placeholderOrganizations')
 const projectPlaceholder = computed(() => {

diff --git a/packages/data-context/test/unit/sources/GraphQLDataSource.spec.ts b/packages/data-context/test/unit/sources/GraphQLDataSource.spec.ts
@@ -92,7 +92,7 @@ describe('GraphQLDataSource', () => {
         __typename: 'CurrentProject',
         cloudProject: {
           __typename: 'CloudProject',
-          id: 'Q2xvdWRQcm9qZWN0OjU=',
+          id: 'Q2xvdWRQcm9qZWN0OjY=',
           name: 'cloud-project-abc123',
         },
         id: Buffer.from(`CurrentProject:${projectPath}`, 'utf8').toString('base64'),

diff --git a/packages/graphql/test/stubCloudTypes.ts b/packages/graphql/test/stubCloudTypes.ts
@@ -258,7 +258,22 @@ export const CloudOrganizationConnectionStubs = {
             name: 'Test Project 1',
             slug: 'test-project',
           }),
-
+        ],
+      },
+    }),
+    // Organization with single project for auto select test
+    createCloudOrganization({
+      id: '3',
+      name: 'Test Org 3',
+      projects: {
+        __typename: 'CloudProjectConnection' as const,
+        edges: [] as any,
+        pageInfo: {} as any,
+        nodes: [
+          createCloudProject({
+            name: 'Test Project 3',
+            slug: 'test-project-3',
+          }),
         ],
       },
     }),