feat(ui): open project in editor

Author: Guillaume Chau

packages/@vue/cli-ui/apollo-server/connectors/files.js

@@ -10,7 +10,7 @@ async function openInEditor (input, context) {
   if (input.gitPath) {
     query = await git.resolveFile(input.file, context)
   } else {
-    path.resolve(cwd.get(), input.file)
+    query = path.resolve(cwd.get(), input.file)
   }
   if (input.line) {
     query += `:${input.line}`

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

@@ -93,7 +93,8 @@
         "project-select-list-item": {
           "tooltips": {
             "favorite": "Toggle favorite",
-            "delete": "Remove from list"
+            "delete": "Remove from list",
+            "open-in-editor": "Open in editor"
           }
         },
         "project-plugin-item": {

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

@@ -10,6 +10,7 @@
           @click.stop="$emit('favorite')"
         />
       </div>
+
       <div class="info">
         <ListItemInfo
           :description="project.path"
@@ -24,6 +25,7 @@
           </div>
         </ListItemInfo>
       </div>
+
       <div class="actions">
         <VueButton
           v-if="project.homepage"
@@ -34,6 +36,14 @@
           v-tooltip="project.homepage"
           @click.stop
         />
+
+        <VueButton
+          class="icon-button"
+          icon-left="open_in_browser"
+          v-tooltip="$t('org.vue.components.project-select-list-item.tooltips.open-in-editor')"
+          @click.stop="openInEditor()"
+        />
+
         <VueButton
           class="icon-button"
           icon-left="close"
@@ -47,12 +57,27 @@
 </template>
 
 <script>
+import OPEN_IN_EDITOR from '../graphql/fileOpenInEditor.gql'
+
 export default {
   props: {
     project: {
       type: Object,
       required: true
     }
+  },
+
+  methods: {
+    async openInEditor () {
+      await this.$apollo.mutate({
+        mutation: OPEN_IN_EDITOR,
+        variables: {
+          input: {
+            file: this.project.path
+          }
+        }
+      })
+    }
   }
 }
 </script>

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

@@ -17,6 +17,12 @@
           {{ $t('org.vue.components.project-select-list-item.tooltips.favorite') }}
         </VueSwitch>
 
+        <VueDropdownButton
+          :label="$t('org.vue.components.project-select-list-item.tooltips.open-in-editor')"
+          icon-left="open_in_browser"
+          @click="openInEditor(projectCurrent)"
+        />
+
         <VueDropdownButton
           v-if="projectCurrent.homepage"
           :href="projectCurrent.homepage"
@@ -72,6 +78,7 @@ import PROJECT_CURRENT from '../graphql/projectCurrent.gql'
 import PROJECTS from '../graphql/projects.gql'
 import PROJECT_OPEN from '../graphql/projectOpen.gql'
 import PROJECT_SET_FAVORITE from '../graphql/projectSetFavorite.gql'
+import OPEN_IN_EDITOR from '../graphql/fileOpenInEditor.gql'
 
 export default {
   apollo: {
@@ -112,6 +119,17 @@ export default {
           }
         })
       }
+    },
+
+    async openInEditor (project) {
+      await this.$apollo.mutate({
+        mutation: OPEN_IN_EDITOR,
+        variables: {
+          input: {
+            file: project.path
+          }
+        }
+      })
     }
   }
 }