feat: wire up add project button

packages/data-context/src/actions/ProjectActions.ts

@@ -1,4 +1,4 @@
-import type { MutationAppCreateConfigFileArgs, SpecType } from '@packages/graphql/src/gen/nxs.gen'
+import type { MutationAddProjectArgs, MutationAppCreateConfigFileArgs, SpecType } from '@packages/graphql/src/gen/nxs.gen'
 import type { FindSpecs, FoundBrowser, FoundSpec, FullConfig, LaunchArgs, LaunchOpts, OpenProjectLaunchOptions } from '@packages/types'
 import path from 'path'
 import type { Maybe } from '../data/coreDataShape'
@@ -17,6 +17,7 @@ export interface ProjectApiShape {
   launchProject(browser: FoundBrowser, spec: Cypress.Spec, options: LaunchOpts): void
   insertProjectToCache(projectRoot: string): void
   getProjectRootsFromCache(): Promise<string[]>
+  clearLatestProjectsCache(): Promise<unknown>
 }
 
 export class ProjectActions {
@@ -26,6 +27,12 @@ export class ProjectActions {
     return this.ctx._apis.projectApi
   }
 
+  clearActiveProject () {
+    this.ctx.appData.activeProject = null
+
+    return
+  }
+
   async setActiveProject (projectRoot: string) {
     this.ctx.coreData.app.activeProject = {
       projectRoot,
@@ -93,15 +100,23 @@ export class ProjectActions {
     //
   }
 
-  async addProject (projectRoot: string) {
-    const found = this.ctx.projectsList.find((x) => x.projectRoot === projectRoot)
+  async addProject (args: MutationAddProjectArgs) {
+    const dirStat = await this.ctx.fs.stat(args.path)
+
+    if (!dirStat.isDirectory()) {
+      throw new Error(`Cannot add ${args.path} as a project, it is not a directory`)
+    }
+
+    const found = this.ctx.projectsList.find((x) => x.projectRoot === args.path)
 
     if (!found) {
-      this.ctx.coreData.app.projects.push({ projectRoot })
-      this.ctx._apis.projectApi.insertProjectToCache(projectRoot)
+      this.ctx.coreData.app.projects.push({ projectRoot: args.path })
+      this.api.insertProjectToCache(args.path)
     }
 
-    await this.setActiveProject(projectRoot)
+    if (args.open) {
+      await this.setActiveProject(args.path)
+    }
   }
 
   async launchProject () {
@@ -138,4 +153,8 @@ export class ProjectActions {
 
     this.ctx.fs.writeFileSync(path.resolve(project.projectRoot, args.configFilename), args.code)
   }
+
+  async clearLatestProjectCache () {
+    await this.api.clearLatestProjectsCache()
+  }
 }

packages/frontend-shared/cypress/support/common.ts

@@ -9,12 +9,12 @@ import * as stubCloudData from '../../src/graphql/testStubCloudTypes'
 import * as stubData from '../../src/graphql/testStubData'
 
 import type { CodegenTypeMap } from '@packages/frontend-shared/src/generated/test-graphql-types.gen'
-import { each } from 'lodash'
+import { each, cloneDeep } from 'lodash'
 import 'cypress-file-upload'
-import { navigationMenu } from '../../src/graphql/testNavigationMenu'
-import { query as stubQuery } from '../../src/graphql/testQuery'
-import { wizard as stubWizard } from '../../src/graphql/testWizard'
-import { app as stubApp } from '../../src/graphql/testApp'
+import { navigationMenu as stubNavigationMenu } from '../../src/graphql/testNavigationMenu'
+import { stubQuery } from '../../src/graphql/testQuery'
+import { stubWizard } from '../../src/graphql/testWizard'
+import { stubApp as stubApp } from '../../src/graphql/testApp'
 import { createI18n } from '@cy/i18n'
 
 /**
@@ -28,14 +28,14 @@ import { createI18n } from '@cy/i18n'
 }
 
 const createContext = (): ClientTestContext => {
-  return {
+  return cloneDeep({
     stubApp,
     stubWizard,
     stubCloudData,
     stubData,
     stubQuery,
-    navigationMenu,
-  }
+    stubNavigationMenu,
+  })
 }
 
 export interface MountFnOptions {

packages/frontend-shared/src/composables/index.ts

@@ -16,5 +16,3 @@ export function useModelWrapper<T, N extends string = 'modelValue'> (
     },
   })
 }
-
-export { useSetActiveProject } from './useSetActiveProject'

packages/frontend-shared/src/graphql/clientTestSchema.ts

@@ -1,5 +1,21 @@
-import { buildClientSchema } from 'graphql'
+import { buildClientSchema, GraphQLObjectType } from 'graphql'
 import schemaForTests from '../generated/schema-for-tests.gen.json'
+import { stubMutation } from './testMutation'
+import { stubQuery } from './testQuery'
 
 // @ts-expect-error - for some reason the JSON type isn't strict enough
 export const clientTestSchema = buildClientSchema(schemaForTests, { assumeValid: true })
+
+const mutationType = clientTestSchema.getMutationType() as GraphQLObjectType
+const mutationFields = mutationType.getFields()
+
+for (const [fieldName, definition] of Object.entries(mutationFields)) {
+  definition.resolve = typeof stubMutation[fieldName] === 'function' ? stubMutation[fieldName] : definition.resolve
+}
+
+const queryType = clientTestSchema.getMutationType() as GraphQLObjectType
+const queryFields = queryType.getFields()
+
+for (const [fieldName, definition] of Object.entries(queryFields)) {
+  definition.resolve = typeof stubQuery[fieldName] === 'function' ? stubQuery[fieldName] : definition.resolve
+}

packages/frontend-shared/src/graphql/testApp.ts

@@ -134,7 +134,7 @@ const allBrowsers = longBrowsersList.map((browser, idx) => {
   }
 })
 
-export const app: CodegenTypeMap['App'] = {
+export const stubApp: CodegenTypeMap['App'] = {
   __typename: 'App',
   healthCheck: 'OK',
   isInGlobalMode: false,

packages/frontend-shared/src/graphql/testMutation.ts

@@ -0,0 +1,35 @@
+import type { App, Mutation, Project } from '../generated/test-graphql-types.gen'
+import type { GraphQLResolveInfo } from 'graphql'
+import path from 'path'
+
+import { stubApp } from './testApp'
+import type { ClientTestContext } from '..'
+import { stubQuery } from './testQuery'
+
+type MaybeResolver<T> = {
+  [K in keyof T]: K extends 'id' | '__typename' ? T[K] : T[K] | ((source: unknown, args: any, ctx: ClientTestContext, info: GraphQLResolveInfo) => MaybeResolver<T[K]>)
+}
+
+export const stubMutation: MaybeResolver<Mutation> = {
+  __typename: 'Mutation',
+  addProject (source, args, ctx): App {
+    const project: Project = {
+      id: `project:${args.path}`,
+      title: path.basename(args.path),
+      projectRoot: args.path,
+      isFirstTimeCT: true,
+      isFirstTimeE2E: true,
+      __typename: 'Project',
+    }
+
+    ctx.stubApp.projects = [...ctx.stubApp.projects, project]
+
+    return ctx.stubApp
+  },
+  setActiveProject (source, args) {
+    return stubApp
+  },
+  clearActiveProject () {
+    return stubQuery
+  },
+}

packages/frontend-shared/src/graphql/testQuery.ts

@@ -1,9 +1,9 @@
 import type { CodegenTypeMap } from '../generated/test-graphql-types.gen'
-import { app } from './testApp'
-import { wizard } from './testWizard'
+import { stubApp } from './testApp'
+import { stubWizard } from './testWizard'
 
-export const query: CodegenTypeMap['Query'] = {
+export const stubQuery: CodegenTypeMap['Query'] = {
   __typename: 'Query',
-  app,
-  wizard,
+  app: stubApp,
+  wizard: stubWizard,
 }

packages/frontend-shared/src/graphql/testUrqlClient.ts

@@ -3,17 +3,17 @@ import { executeExchange } from '@urql/exchange-execute'
 import { makeCacheExchange } from './urqlClient'
 import type * as stubCloudData from './testStubCloudTypes'
 import type * as stubData from './testStubData'
-import type { app as stubApp } from './testApp'
-import type { wizard as stubWizard } from './testWizard'
-import type { query as stubQuery } from './testQuery'
-import type { navigationMenu } from './testNavigationMenu'
+import type { stubApp } from './testApp'
+import type { stubWizard } from './testWizard'
+import type { stubQuery } from './testQuery'
+import type { navigationMenu as stubNavigationMenu } from './testNavigationMenu'
 import { clientTestSchema } from './clientTestSchema'
 
 export interface ClientTestContext {
   stubData: typeof stubData
   stubCloudData: typeof stubCloudData
   stubApp: typeof stubApp
-  navigationMenu: typeof navigationMenu
+  stubNavigationMenu: typeof stubNavigationMenu
   stubWizard: typeof stubWizard
   stubQuery: typeof stubQuery
 }

packages/frontend-shared/src/graphql/testWizard.ts

@@ -4,7 +4,7 @@ import { testNodeId } from './testUtils'
 
 type Writeable<T> = { -readonly [P in keyof T]: T[P] };
 
-export const wizard: CodegenTypeMap['Wizard'] = {
+export const stubWizard: CodegenTypeMap['Wizard'] = {
   __typename: 'Wizard',
   canNavigateForward: true,
   step: 'welcome',

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

@@ -68,7 +68,7 @@
       "browseManually": "browse manually."
     },
     "searchPlaceholder": "Search Projects",
-    "newProjectButton": "New Project"
+    "addProjectButton": "New Project"
   },
   "welcomeGuide": {
     "header": {

packages/graphql/schemas/schema.graphql

@@ -263,15 +263,21 @@ scalar JSON
 
 type Mutation {
   """Add project to projects array and cache it"""
-  addProject(path: String!): App!
+  addProject(
+    """Whether to open the project when added"""
+    open: Boolean
+    path: String!
+  ): App!
 
   """Create a Cypress config file for a new project"""
   appCreateConfigFile(code: String!, configFilename: String!): App
+  clearActiveProject: Query!
 
   """
   Initializes open_project global singleton to manager current project state
   """
   initializeOpenProject: Wizard
+  internal_clearLatestProjectCache: Boolean
 
   """Launches project from open_project global singleton"""
   launchOpenProject: App

packages/graphql/src/schemaTypes/objectTypes/gql-Mutation.ts

@@ -1,9 +1,27 @@
-import { idArg, mutationType, nonNull, stringArg } from 'nexus'
+import { booleanArg, idArg, mutationType, nonNull, stringArg } from 'nexus'
 import { FrontendFrameworkEnum, NavItemEnum, SupportedBundlerEnum, TestingTypeEnum, WizardNavigateDirectionEnum } from '../enumTypes/gql-WizardEnums'
 import { Wizard } from './gql-Wizard'
 
 export const mutation = mutationType({
   definition (t) {
+    t.field('internal_clearLatestProjectCache', {
+      type: 'Boolean',
+      resolve: (source, args, ctx) => {
+        ctx.actions.project.clearLatestProjectCache()
+
+        return true
+      },
+    })
+
+    t.nonNull.field('clearActiveProject', {
+      type: 'Query',
+      resolve: (root, args, ctx) => {
+        ctx.actions.project.clearActiveProject()
+
+        return {}
+      },
+    })
+
     t.field('wizardSetTestingType', {
       type: Wizard,
       description: 'Sets the current testing type we want to use',
@@ -143,9 +161,10 @@ export const mutation = mutationType({
       description: 'Add project to projects array and cache it',
       args: {
         path: nonNull(stringArg()),
+        open: booleanArg({ description: 'Whether to open the project when added' }),
       },
       async resolve (_root, args, ctx) {
-        await ctx.actions.project.addProject(args.path)
+        await ctx.actions.project.addProject(args)
 
         return ctx.appData
       },

packages/launchpad/cypress/component/support/attachFileWithPath.ts

@@ -0,0 +1,26 @@
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      attachFileWithPath: (path: string) => Chainable<HTMLInputElement>
+    }
+  }
+}
+
+export function attachedFileWithPath (subject: HTMLInputElement, path: string) {
+  const attachedFile = new File([new Blob()], 'cypress.json')
+
+  Object.defineProperty(attachedFile, 'path', { value: path })
+
+  const dataTransfer = new DataTransfer()
+
+  dataTransfer.items.add(attachedFile)
+  subject[0].files = dataTransfer.files
+
+  return cy.wrap(subject)
+}
+
+Cypress.Commands.add(
+  'attachFileWithPath',
+  { prevSubject: true },
+  attachedFileWithPath,
+)

packages/launchpad/cypress/component/support/index.ts

@@ -21,3 +21,4 @@ import '@iconify/iconify'
 import '@purge-icons/generated'
 
 import './commands'
+import './attachFileWithPath'

packages/launchpad/cypress/fixtures/test-project/cypress.json

@@ -0,0 +1,3 @@
+{
+  "projectId": "test01"
+}

packages/launchpad/src/global/GlobalEmpty.spec.tsx

@@ -22,9 +22,4 @@ describe('<GlobalEmpty />', () => {
 
     cy.get('input[type=file]').should('have.length', 1)
   })
-
-  it('handles a file upload', () => {
-    cy.get('input[type=file]').attachFile('project-upload.json')
-    cy.get('[data-testid=upload-name]').should('have.text', 'project-upload.json')
-  })
 })