fix(ui): project creation not reset

Author: Guillaume Chau

packages/@vue/cli-ui/src/graphql-api/connectors/projects.js

@@ -178,6 +178,7 @@ function removeCreator (context) {
     installProgress.removeListener('log', onInstallLog)
     creator = null
   }
+  return true
 }
 
 async function getCreation (context) {
@@ -426,5 +427,7 @@ module.exports = {
   open,
   remove,
   resetCwd,
-  setFavorite
+  setFavorite,
+  initCreator,
+  removeCreator
 }

packages/@vue/cli-ui/src/graphql-api/schema/project.js

@@ -11,6 +11,8 @@ extend type Query {
 }
 
 extend type Mutation {
+  projectInitCreation: ProjectCreation
+  projectCancelCreation: Boolean
   projectCreate (input: ProjectCreateInput!): Project!
   projectImport (input: ProjectImportInput!): Project!
   projectOpen (id: ID!): Project!
@@ -80,6 +82,8 @@ exports.resolvers = {
   },
 
   Mutation: {
+    projectInitCreation: (root, args, context) => projects.initCreator(context),
+    projectCancelCreation: (root, args, context) => projects.removeCreator(context),
     projectCreate: (root, { input }, context) => projects.create(input, context),
     projectImport: (root, { input }, context) => projects.import(input, context),
     projectOpen: (root, { id }, context) => projects.open(id, context),

packages/@vue/cli-ui/src/graphql/projectCancelCreation.gql

@@ -0,0 +1,3 @@
+mutation projectCancelCreation {
+  projectCancelCreation
+}

packages/@vue/cli-ui/src/graphql/projectInitCreation.gql

@@ -0,0 +1,7 @@
+#import "./projectCreationFragment.gql"
+
+mutation projectInitCreation {
+  projectInitCreation {
+    ...projectCreation
+  }
+}

packages/@vue/cli-ui/src/views/ProjectCreate.vue

@@ -362,7 +362,6 @@
           :label="$t('views.project-create.tabs.details.modal.buttons.clear')"
           icon-left="delete_forever"
           class="danger"
-          @click="reset()"
         />
       </div>
     </VueModal>
@@ -425,6 +424,7 @@ import PROJECT_CREATION from '../graphql/projectCreation.gql'
 import FEATURE_SET_ENABLED from '../graphql/featureSetEnabled.gql'
 import PRESET_APPLY from '../graphql/presetApply.gql'
 import PROJECT_CREATE from '../graphql/projectCreate.gql'
+import PROJECT_CANCEL_CREATION from '../graphql/projectCancelCreation.gql'
 
 function formDataFactory () {
   return {
@@ -510,11 +510,11 @@ export default {
     }
   },
 
-  methods: {
-    reset () {
-      formData = formDataFactory()
-    },
+  beforeDestroy () {
+    this.cancel()
+  },
 
+  methods: {
     async selectPreset (id) {
       if (id === 'remote') {
         this.showRemotePreset = true
@@ -571,14 +571,20 @@ export default {
             }
           }
         })
-        this.reset()
         this.$router.push({ name: 'project-home' })
         await this.$nextTick()
       } catch (e) {
         // eslint-disable-next-line no-console
         console.error(e)
         this.debug = `ERROR: ${e}`
       }
+    },
+
+    async cancel () {
+      formData = formDataFactory()
+      await this.$apollo.mutate({
+        mutation: PROJECT_CANCEL_CREATION
+      })
     }
   }
 }

packages/@vue/cli-ui/src/views/ProjectSelect.vue

@@ -30,7 +30,7 @@
             icon-left="add"
             :label="$route.query.hideTabs ? $t('views.project-create.tabs.details.form.folder.action') : $t('views.project-select.buttons.create')"
             class="big primary create-project"
-            :to="{ name: 'project-create' }"
+            @click="createProject()"
           />
         </div>
       </VueTab>
@@ -70,6 +70,7 @@
 
 <script>
 import FOLDER_CURRENT from '../graphql/folderCurrent.gql'
+import PROJECT_INIT_CREATION from '../graphql/projectInitCreation.gql'
 import PROJECT_IMPORT from '../graphql/projectImport.gql'
 
 export default {
@@ -101,6 +102,14 @@ export default {
   },
 
   methods: {
+    async createProject () {
+      await this.$apollo.mutate({
+        mutation: PROJECT_INIT_CREATION
+      })
+
+      this.$router.push({ name: 'project-create' })
+    },
+
     async importProject () {
       await this.$apollo.mutate({
         mutation: PROJECT_IMPORT,