feat(ui): project create: folder already exists warning

Author: Guillaume Chau

packages/@vue/cli-ui/locales/en.json

@@ -190,7 +190,8 @@
               "label": "Project folder",
               "placeholder": "my-app",
               "tooltip": "Change base folder",
-              "action": "Select this folder"
+              "action": "Select this folder",
+              "folder-exists": "This folder already exists"
             },
             "manager": {
               "label": "Package manager",
@@ -199,6 +200,7 @@
             "options": {
               "label": "Additional options",
               "force": "Overwrite target folder if it exists",
+              "git-title": "Git repository",
               "git": "Initialize git repository (recommended)",
               "git-commit-message": "Initial commit message (optional)"
             }

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

@@ -10,10 +10,11 @@ const pkgCache = new LRU({
 const cwd = require('./cwd')
 
 function isDirectory (file) {
+  file = file.replace(/\\/g, path.sep)
   try {
-    return fs.statSync(file.path).isDirectory()
+    return fs.statSync(file).isDirectory()
   } catch (e) {
-    console.warn(e.message)
+    if (process.env.VUE_APP_CLI_UI_DEV) console.warn(e.message)
   }
   return false
 }
@@ -26,7 +27,7 @@ async function list (base, context) {
       name: file
     })
   ).filter(
-    file => isDirectory(file)
+    file => isDirectory(file.path)
   )
 }
 
@@ -110,6 +111,7 @@ async function deleteFolder (file) {
 }
 
 module.exports = {
+  isDirectory,
   getCurrent,
   list,
   open,

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

@@ -7,6 +7,7 @@ exports.types = gql`
 extend type Query {
   folderCurrent: Folder
   foldersFavorite: [Folder]
+  folderExists (file: String!): Boolean
 }
 
 extend type Mutation {
@@ -34,7 +35,8 @@ exports.resolvers = {
 
   Query: {
     folderCurrent: (root, args, context) => folders.getCurrent(args, context),
-    foldersFavorite: (root, args, context) => folders.listFavorite(context)
+    foldersFavorite: (root, args, context) => folders.listFavorite(context),
+    folderExists: (root, { file }, context) => folders.isDirectory(file)
   },
 
   Mutation: {

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

@@ -0,0 +1,3 @@
+query folderExists ($file: String!) {
+  folderExists(file: $file)
+}

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

@@ -49,6 +49,24 @@
                         }"
                       />
                     </div>
+
+                    <ApolloQuery
+                      v-if="formData.folder"
+                      :query="require('../graphql/folderExists.gql')"
+                      :variables="{
+                        file: `${cwd}/${formData.folder}`
+                      }"
+                      fetch-policy="no-cache"
+                    >
+                      <div
+                        slot-scope="{ result: { data } }"
+                        v-if="data && data.folderExists"
+                        class="vue-ui-text warning banner"
+                      >
+                        <VueIcon icon="warning" class="big"/>
+                        <span>{{ $t('views.project-create.tabs.details.form.folder.folder-exists') }}</span>
+                      </div>
+                    </ApolloQuery>
                   </div>
                 </VueFormField>
 
@@ -84,7 +102,9 @@
                   </VueSwitch>
                 </VueFormField>
 
-                <VueFormField>
+                <VueFormField
+                  :title="$t('views.project-create.tabs.details.form.options.git-title')"
+                >
                   <VueSwitch
                     v-model="formData.enableGit"
                     class="extend-left git"
@@ -568,6 +588,9 @@ export default {
   width 100%
   margin 42px auto
 
+  .vue-ui-text.banner
+    margin-top 6px
+
 .project-path
   h-box()
   box-center()