fix: connect to dashboard page when there are no existing projects (#20188)

Co-authored-by: Barthélémy Ledoux <[email protected]>

Author: ryanthemanuel

packages/app/src/runs/modals/SelectCloudProjectModal.spec.tsx renamed to packages/app/src/runs/modals/SelectCloudProjectModal.cy.tsx

@@ -40,5 +40,15 @@ describe('<SelectCloudProjectModal />', () => {
     cy.contains('a', defaultMessages.runs.connect.modal.selectProject.createNewProject).click()
     cy.findByLabelText(`${defaultMessages.runs.connect.modal.selectProject.projectName }*${defaultMessages.runs.connect.modal.selectProject.projectNameDisclaimer}`)
     .should('have.value', 'Test Project')
+
+    cy.contains('a', defaultMessages.runs.connect.modal.selectProject.chooseExistingProject).should('be.visible')
+  })
+
+  it('can only choose an existing project if the organization has a project', () => {
+    mountDialog()
+    cy.get('[data-cy="selectOrganization"]').click()
+    cy.findByRole('listbox').within(() => cy.findAllByText('Test Org 2').click())
+
+    cy.contains('a', defaultMessages.runs.connect.modal.selectProject.chooseExistingProject).should('not.exist')
   })
 })

packages/app/src/runs/modals/SelectCloudProjectModal.vue

@@ -36,7 +36,7 @@
         </template>
       </Select>
       <Select
-        v-if="!newProject && projects.length > 0"
+        v-if="!newProject"
         v-model="pickedProject"
         class="mt-16px transition-all"
         :class="pickedOrganization ? undefined : 'opacity-50'"
@@ -85,6 +85,7 @@
             </span>
           </label>
           <a
+            v-if="projects.length > 0"
             class="cursor-pointer text-indigo-500 hover:underline"
             @click="newProject = false"
           >
@@ -230,7 +231,6 @@ const emit = defineEmits<{
   (event: 'update-projectId-failed', projectId: string): void
 }>()
 
-const newProject = ref(false)
 const projectName = ref(props.gql.currentProject?.title || '')
 const projectAccess = ref<'private' | 'public'>('private')
 const organizations = computed(() => {
@@ -244,6 +244,7 @@ const organizations = computed(() => {
 const pickedOrganization = ref(organizations.value.length >= 1 ? organizations.value[0] : undefined)
 
 const projects = computed(() => pickedOrganization.value?.projects?.nodes || [])
+const newProject = ref(projects.value.length === 0)
 const pickedProject = ref()
 
 const orgPlaceholder = t('runs.connect.modal.selectProject.placeholderOrganizations')

packages/frontend-shared/src/locales/en-US.json

@@ -445,7 +445,7 @@
           "connectProject": "Connect project",
           "createProject": "Create project",
           "placeholderOrganizations": "Pick an organization",
-          "placeholderProjects": "Pick an project",
+          "placeholderProjects": "Pick a project",
           "placeholderProjectsPending": "Pick an organization first"
         },
         "connectManually": {