feat(ui): FolderExplorer path edit + folder isPackage/isVueProject

Author: Guillaume Chau

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

@@ -1,15 +1,36 @@
 <template>
-  <div class="folder-explorer">
+  <div
+    class="folder-explorer"
+    :class="{
+      error
+    }"
+  >
     <div class="toolbar">
       <VueButton
         class="icon-button"
         icon-left="keyboard_arrow_up"
+        v-tooltip="'Open parent folder'"
         @click="openParentFolder"
       />
 
+      <div v-if="editingPath" class="path-edit">
+        <VueInput
+          ref="pathInput"
+          v-model="editedPath"
+          placeholder="Enter the full path to a folder"
+          icon-left="edit"
+          @keyup.esc="editingPath = false"
+          @keyup.enter="submitPathEdit()"
+        />
+      </div>
+
       <ApolloQuery
+        v-else
+        ref="cwd"
         :query="require('@/graphql/cwd.gql')"
         class="current-path"
+        v-tooltip="'Edit path'"
+        @click.native="openPathEdit()"
       >
         <ApolloSubscribeToMore
           :document="require('@/graphql/cwdChanged.gql')"
@@ -20,6 +41,19 @@
           <span v-if="data">{{ data.cwd }}</span>
         </template>
       </ApolloQuery>
+
+      <VueIcon
+        v-if="error"
+        icon="error"
+        class="error-icon big"
+      />
+
+      <VueButton
+        class="icon-button"
+        icon-left="refresh"
+        v-tooltip="'Refresh'"
+        @click="refreshFolder"
+      />
     </div>
 
     <ApolloQuery
@@ -32,7 +66,7 @@
             v-for="folder of data.folderCurrent.children"
             :key="folder.name"
             :folder="folder"
-            @click.native="openFolder(folder)"
+            @click.native="openFolder(folder.path)"
           />
         </template>
       </template>
@@ -51,32 +85,67 @@ export default {
     FolderExplorerItem,
   },
 
+  data () {
+    return {
+      error: false,
+      editingPath: false,
+      editedPath: '',
+    }
+  },
+
   methods: {
-    openFolder (folder) {
-      this.$apollo.mutate({
-        mutation: FOLDER_OPEN,
-        variables: {
-          path: folder.path
-        },
-        update: (store, { data: { folderOpen } }) => {
-          store.writeQuery({ query: FOLDER_CURRENT, data: { folderCurrent: folderOpen } })
-        }
-      })
+    async openFolder (path) {
+      this.editingPath = false
+      this.error = false
+      try {
+        await this.$apollo.mutate({
+          mutation: FOLDER_OPEN,
+          variables: {
+            path
+          },
+          update: (store, { data: { folderOpen } }) => {
+            store.writeQuery({ query: FOLDER_CURRENT, data: { folderCurrent: folderOpen } })
+          }
+        })
+      } catch (e) {
+        this.error = true
+      }
     },
 
-    openParentFolder (folder) {
-      this.$apollo.mutate({
-        mutation: FOLDER_OPEN_PARENT,
-        update: (store, { data: { folderOpenParent } }) => {
-          store.writeQuery({ query: FOLDER_CURRENT, data: { folderCurrent: folderOpenParent } })
-        }
-      })
+    async openParentFolder (folder) {
+      this.editingPath = false
+      this.error = false
+      try {
+        await this.$apollo.mutate({
+          mutation: FOLDER_OPEN_PARENT,
+          update: (store, { data: { folderOpenParent } }) => {
+            store.writeQuery({ query: FOLDER_CURRENT, data: { folderCurrent: folderOpenParent } })
+          }
+        })
+      } catch (e) {
+        this.error = true
+      }
     },
 
     cwdChangedUpdate (previousResult, { subscriptionData }) {
       return {
         cwd: subscriptionData.data.cwd
       }
+    },
+
+    async openPathEdit () {
+      this.editedPath = this.$refs.cwd.result.data.cwd
+      this.editingPath = true
+      await this.$nextTick()
+      this.$refs.pathInput.focus()
+    },
+
+    submitPathEdit () {
+      this.openFolder(this.editedPath)
+    },
+
+    refreshFolder () {
+      this.openFolder(this.$refs.cwd.result.data.cwd)
     }
   }
 }
@@ -91,8 +160,25 @@ export default {
   h-box()
   align-items center
 
+  >>> > *
+    space-between-x(12px)
+
 .current-path
   flex 100% 1 1
   ellipsis()
-  margin-left 12px
+  cursor pointer
+
+.path-edit
+  flex 100% 1 1
+  > .vue-input
+    width 100%
+
+.error-icon
+  >>> svg
+    fill $vue-color-danger
+
+.folder-explorer
+  &.error
+    .current-path
+      color $vue-color-danger
 </style>

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

@@ -1,7 +1,14 @@
 <template>
   <div class="foder-explorer-item">
-    <VueIcon icon="folder" class="folder-icon big"/>
-    <div class="folder-name">{{ folder.name }}</div>
+    <VueIcon :icon="folder.isPackage ? 'folder' : 'folder_open'" class="folder-icon big"/>
+    <div class="folder-name">
+      {{ folder.name }}
+      <img
+        v-if="folder.isVueProject"
+        class="vue-project-icon"
+        src="~@/assets/logo.png"
+      >
+    </div>
   </div>
 </template>
 
@@ -29,12 +36,20 @@ export default {
   margin-left 12px
   ellipsis()
 
+.vue-project-icon
+  width 14px
+  height @width
+  vertical-align top
+  position relative
+  top 5px
+
 .foder-explorer-item
   padding 12px
   h-box()
   align-items center
   user-select none
   cursor pointer
+  position relative
 
   &:hover
     background rgba($vue-color-primary, .1)

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

@@ -45,9 +45,22 @@ function openParent (file, context) {
   return generateFolder(newFile)
 }
 
+function isPackage (file, context) {
+  return fs.existsSync(path.join(file, 'package.json'))
+}
+
+function isVueProject (file, context) {
+  if (!isPackage(file)) return false
+
+  const contents = fs.readFileSync(path.join(file, 'package.json'), { encoding: 'utf8' })
+  return contents.includes('@vue/cli-service')
+}
+
 module.exports = {
   getCurrent,
   list,
   open,
-  openParent
+  openParent,
+  isPackage,
+  isVueProject
 }

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

@@ -5,7 +5,9 @@ const projects = require('./connectors/projects')
 
 module.exports = {
   Folder: {
-    children: (folder, args, context) => folders.list(folder.path, context)
+    children: (folder, args, context) => folders.list(folder.path, context),
+    isPackage: (folder, args, context) => folders.isPackage(folder.path, context),
+    isVueProject: (folder, args, context) => folders.isVueProject(folder.path, context)
   },
 
   Query: {

packages/@vue/cli-ui/src/graphql-api/type-defs.js

@@ -19,6 +19,8 @@ enum ConsoleLogType {
 type Folder {
   name: String!
   path: String!
+  isPackage: Boolean
+  isVueProject: Boolean
   children: [Folder]
 }
 
@@ -122,6 +124,7 @@ type Mutation {
   folderOpenParent: Folder
   projectCreate (input: ProjectCreateInput!): Project!
   projectImport (input: ProjectImportInput!): Project!
+  projectOpen (id: ID!): Project!
   projectSetFavorite (id: ID!, favorite: Int!): Project!
   pluginAdd (id: ID!): Plugin
   promptAnswer (input: PromptInput!): Prompt

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

@@ -1,10 +1,7 @@
+#import "./folderCurrentFragment.gql"
+
 {
   folderCurrent {
-    name
-    path
-    children {
-      name
-      path
-    }
+    ...folderCurrent
   }
 }

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

@@ -0,0 +1,10 @@
+fragment folderCurrent on Folder {
+  name
+  path
+  children {
+    name
+    path
+    isPackage
+    isVueProject
+  }
+}

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

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

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

@@ -1,10 +1,7 @@
+#import "./folderCurrentFragment.gql"
+
 mutation {
   folderOpenParent {
-    name
-    path
-    children {
-      name
-      path
-    }
+    ...folderCurrent
   }
 }