fix(ui): folder loading indicator + e2e tests

Author: Guillaume Chau

packages/@vue/cli-ui/src/components/FolderExplorer.vue

@@ -127,7 +127,11 @@
     </div>
 
     <div ref="folders" class="folders">
-      <template v-if="folderCurrent.children">
+      <VueLoadingIndicator
+        v-if="loading"
+        class="overlay"
+      />
+      <template v-else-if="folderCurrent.children">
         <FolderExplorerItem
           v-for="folder of folderCurrent.children"
           v-if="showHidden || !folder.hidden"
@@ -153,6 +157,7 @@ const SHOW_HIDDEN = 'vue-ui.show-hidden-folders'
 export default {
   data () {
     return {
+      loading: 0,
       error: false,
       editingPath: false,
       editedPath: '',
@@ -166,6 +171,7 @@ export default {
     folderCurrent: {
       query: FOLDER_CURRENT,
       fetchPolicy: 'network-only',
+      loadingKey: 'loading',
       async result () {
         await this.$nextTick()
         this.$refs.folders.scrollTop = 0
@@ -374,4 +380,5 @@ export default {
     flex 100% 1 1
     overflow-x hidden
     overflow-y auto
+    position relative
 </style>

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

@@ -5,6 +5,7 @@ const path = require('path')
 let cwd = process.cwd()
 
 function normalize (value) {
+  if (value.length === 1) return value
   const lastChar = value.charAt(value.length - 1)
   if (lastChar === path.sep) {
     value = value.substr(0, value.length - 1)

packages/@vue/cli-ui/src/util/folders.js

@@ -0,0 +1,3 @@
+export function isValidName (name) {
+  return !name.match(/[/@\s+%:]/) && encodeURIComponent(name) === name
+}

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

@@ -418,6 +418,7 @@
 
 <script>
 import Prompts from '../mixins/Prompts'
+import { isValidName } from '../util/folders'
 
 import CWD from '../graphql/cwd.gql'
 import PROJECT_CREATION from '../graphql/projectCreation.gql'
@@ -486,8 +487,7 @@ export default {
 
   computed: {
     folderNameValid () {
-      const name = this.formData.folder
-      return !name.match(/[/@\s+%:]/) && encodeURIComponent(name) === name
+      return isValidName(this.formData.folder)
     },
 
     detailsValid () {

packages/@vue/cli-ui/tests/e2e/specs/g1-projects.js

@@ -19,7 +19,7 @@ describe('Vue project manager', () => {
     cy.get('.change-folder').click()
     cy.get('.create').within(() => {
       cy.get('.folder-explorer').should('be.visible')
-      cy.get('.current-path').click()
+      cy.get('.edit-path-button').click()
       cy.get('.path-input input').clear().type(Cypress.env('cwd') + '{enter}')
       cy.get('.create-project').click()
     })
@@ -71,7 +71,7 @@ describe('Vue project manager', () => {
     cy.get('.tab-button').eq(2).click()
     cy.get('.import').within(() => {
       cy.get('.folder-explorer').should('be.visible')
-      cy.get('.current-path').click()
+      cy.get('.edit-path-button').click()
       cy.get('.path-input input').clear().type(Cypress.env('cwd') + '{enter}')
       cy.get(`.folder-explorer-item:contains('cli-ui-test')`).click()
       cy.get('.import-project').should('not.have.class', 'disabled').click()