feat(ui): folder explorer: create new folders

Author: Guillaume Chau

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

@@ -46,6 +46,16 @@
         "placeholder": "Enter the full path to a folder",
         "empty": "No favorite folders yet.",
         "show-hidden": "Show hidden folders"
+      },
+      "new-folder": {
+        "action": "New folder",
+        "title": "Create new folder",
+        "field": {
+          "title": "New folder",
+          "subtitle": "You can use the folder separator to create multiple nested folders at once."
+        },
+        "cancel": "Cancel",
+        "create": "Create"
       }
     },
     "list-item-info": {

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

@@ -116,6 +116,12 @@
           class="icon-button"
         />
 
+        <VueDropdownButton
+          :label="$t('components.folder-explorer.new-folder.action')"
+          icon-left="create_new_folder"
+          @click="showNewFolder = true"
+        />
+
         <VueSwitch
           icon="visibility"
           v-model="showHidden"
@@ -141,16 +147,55 @@
         />
       </template>
     </div>
+
+    <VueModal
+      v-if="showNewFolder"
+      :title="$t('components.folder-explorer.new-folder.title')"
+      class="small new-folder-modal"
+      @close="showNewFolder = false"
+    >
+      <div class="default-body">
+        <VueFormField
+          :title="$t('components.folder-explorer.new-folder.field.title')"
+          :subtitle="$t('components.folder-explorer.new-folder.field.subtitle')"
+        >
+          <VueInput
+            v-model="newFolderName"
+            icon-left="folder"
+            @keyup.enter="createFolder()"
+          />
+        </VueFormField>
+      </div>
+
+      <div slot="footer" class="actions space-between">
+        <VueButton
+          :label="$t('components.folder-explorer.new-folder.cancel')"
+          class="flat close"
+          @click="showNewFolder = false"
+        />
+
+        <VueButton
+          :label="$t('components.folder-explorer.new-folder.create')"
+          icon-left="create_new_folder"
+          class="primary save"
+          :disabled="!newFolderValid"
+          @click="createFolder()"
+        />
+      </div>
+    </VueModal>
   </div>
 </template>
 
 <script>
+import { isValidMultiName } from '../util/folders'
+
 import FOLDER_CURRENT from '../graphql/folderCurrent.gql'
 import FOLDERS_FAVORITE from '../graphql/foldersFavorite.gql'
 import FOLDER_OPEN from '../graphql/folderOpen.gql'
 import FOLDER_OPEN_PARENT from '../graphql/folderOpenParent.gql'
 import FOLDER_SET_FAVORITE from '../graphql/folderSetFavorite.gql'
 import PROJECT_CWD_RESET from '../graphql/projectCwdReset.gql'
+import FOLDER_CREATE from '../graphql/folderCreate.gql'
 
 const SHOW_HIDDEN = 'vue-ui.show-hidden-folders'
 
@@ -163,7 +208,9 @@ export default {
       editedPath: '',
       folderCurrent: {},
       foldersFavorite: [],
-      showHidden: localStorage.getItem(SHOW_HIDDEN) === 'true'
+      showHidden: localStorage.getItem(SHOW_HIDDEN) === 'true',
+      showNewFolder: false,
+      newFolderName: ''
     }
   },
 
@@ -181,6 +228,12 @@ export default {
     foldersFavorite: FOLDERS_FAVORITE
   },
 
+  computed: {
+    newFolderValid () {
+      return isValidMultiName(this.newFolderName)
+    }
+  },
+
   watch: {
     showHidden (value) {
       if (value) {
@@ -311,6 +364,22 @@ export default {
       if (startIndex < path.length) addPart(path.length)
 
       return parts
+    },
+
+    async createFolder () {
+      if (!this.newFolderValid) return
+
+      const result = await this.$apollo.mutate({
+        mutation: FOLDER_CREATE,
+        variables: {
+          name: this.newFolderName
+        }
+      })
+
+      this.openFolder(result.data.folderCreate.path)
+
+      this.newFolderName = ''
+      this.showNewFolder = false
     }
   }
 }

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

@@ -135,6 +135,12 @@ async function deleteFolder (file) {
   await fs.remove(file)
 }
 
+function createFolder (name, context) {
+  const file = path.join(cwd.get(), name)
+  fs.mkdirpSync(file)
+  return generateFolder(file, context)
+}
+
 module.exports = {
   isDirectory,
   getCurrent,
@@ -148,5 +154,6 @@ module.exports = {
   isFavorite,
   listFavorite,
   setFavorite,
-  delete: deleteFolder
+  delete: deleteFolder,
+  create: createFolder
 }

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

@@ -14,6 +14,7 @@ extend type Mutation {
   folderOpen (path: String!): Folder
   folderOpenParent: Folder
   folderSetFavorite (path: String!, favorite: Boolean!): Folder
+  folderCreate(name: String!): Folder
 }
 
 type Folder {
@@ -47,6 +48,7 @@ exports.resolvers = {
     folderSetFavorite: (root, args, context) => folders.setFavorite({
       file: args.path,
       favorite: args.favorite
-    }, context)
+    }, context),
+    folderCreate: (root, { name }, context) => folders.create(name, context)
   }
 }

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

@@ -0,0 +1,7 @@
+#import "./folderCurrentFragment.gql"
+
+mutation folderCreate ($name: String!) {
+  folderCreate (name: $name) {
+    ...folderCurrent
+  }
+}

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

@@ -1,3 +1,8 @@
 export function isValidName (name) {
   return !name.match(/[/@\s+%:]/) && encodeURIComponent(name) === name
 }
+
+export function isValidMultiName (name) {
+  name = name.replace(/\\/g, '/')
+  return name.split('/').every(isValidName)
+}