feat(ui): FileDiff open in editor

Author: Guillaume Chau

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

@@ -20,6 +20,14 @@
 
       <div class="vue-ui-spacer"/>
 
+      <VueButton
+        v-if="!fileDiff.deleted"
+        icon-left="edit"
+        class="icon-button"
+        v-tooltip="$t('components.file-diff.actions.open')"
+        @click.stop="openInEditor()"
+      />
+
       <VueButton
         :icon-left="collapsed ? 'keyboard_arrow_down' : 'keyboard_arrow_up'"
         class="icon-button"
@@ -43,7 +51,18 @@
 </template>
 
 <script>
+import FILE_OPEN_IN_EDITOR from '../graphql/fileOpenInEditor.gql'
+
 export default {
+  provide () {
+    const vm = this
+    return {
+      FileDiffInjection: {
+        get data () { return vm.fileDiff }
+      }
+    }
+  },
+
   props: {
     fileDiff: {
       type: Object,
@@ -65,6 +84,20 @@ export default {
       }
       return 'insert_drive_file'
     }
+  },
+
+  methods: {
+    openInEditor () {
+      this.$apollo.mutate({
+        mutation: FILE_OPEN_IN_EDITOR,
+        variables: {
+          input: {
+            file: this.fileDiff.to,
+            gitPath: true
+          }
+        }
+      })
+    }
   }
 }
 </script>

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

@@ -9,7 +9,13 @@
       <div class="ln ln1">
         {{ ln1 }}
       </div>
-      <div class="ln ln2">
+      <div
+        :class="{
+          disabled: !ln2
+        }"
+        class="ln ln2"
+        @click="openInEditor()"
+      >
         {{ ln2 }}
       </div>
     </div>
@@ -18,7 +24,13 @@
 </template>
 
 <script>
+import FILE_OPEN_IN_EDITOR from '../graphql/fileOpenInEditor.gql'
+
 export default {
+  inject: [
+    'FileDiffInjection'
+  ],
+
   props: {
     change: {
       type: Object,
@@ -42,6 +54,23 @@ export default {
         return this.change.ln
       }
     }
+  },
+
+  methods: {
+    openInEditor () {
+      if (!this.ln2) return
+
+      this.$apollo.mutate({
+        mutation: FILE_OPEN_IN_EDITOR,
+        variables: {
+          input: {
+            file: this.FileDiffInjection.data.to,
+            line: this.ln2,
+            gitPath: true
+          }
+        }
+      })
+    }
   }
 }
 </script>
@@ -70,6 +99,13 @@ export default {
       width 0
       overflow hidden
 
+    .ln2
+      cursor pointer
+      &:hover
+        text-decoration underline
+      &.disabled
+        pointer-events none
+
   .content
     flex auto 1 1
     white-space pre

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

@@ -0,0 +1,33 @@
+const launch = require('launch-editor')
+const path = require('path')
+// Connectors
+const cwd = require('./cwd')
+const git = require('./git')
+const logs = require('./logs')
+
+async function openInEditor (input, context) {
+  let query
+  if (input.gitPath) {
+    query = await git.resolveFile(input.file, context)
+  } else {
+    path.resolve(cwd.get(), input.file)
+  }
+  if (input.line) {
+    query += `:${input.line}`
+    if (input.column) {
+      query += `:${input.column}`
+    }
+  }
+  logs.add({
+    message: `Opening file '${query}' in code editor...`,
+    type: 'info'
+  }, context)
+  launch(query, (fileName, errorMessage) => {
+    console.error(`Unable to open '${fileName}'`, errorMessage)
+  })
+  return true
+}
+
+module.exports = {
+  openInEditor
+}

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

@@ -1,4 +1,5 @@
 const execa = require('execa')
+const path = require('path')
 const parseDiff = require('../utils/parse-diff')
 // Connectors
 const cwd = require('./cwd')
@@ -55,8 +56,25 @@ async function reset (context) {
   return true
 }
 
+async function getRoot (context) {
+  const { stdout } = await execa('git', [
+    'rev-parse',
+    '--show-toplevel'
+  ], {
+    cwd: cwd.get()
+  })
+  return stdout
+}
+
+async function resolveFile (file, context) {
+  const root = await getRoot(context)
+  return path.resolve(root, file)
+}
+
 module.exports = {
   getDiffs,
   commit,
-  reset
+  reset,
+  getRoot,
+  resolveFile
 }

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

@@ -13,6 +13,7 @@ const plugins = require('./connectors/plugins')
 const tasks = require('./connectors/tasks')
 const configurations = require('./connectors/configurations')
 const git = require('./connectors/git')
+const files = require('./connectors/files')
 
 // Prevent code from exiting server process
 exit.exitProcess = false
@@ -90,7 +91,8 @@ module.exports = {
     taskLogsClear: (root, { id }, context) => tasks.clearLogs(id, context),
     configurationSave: (root, { id }, context) => configurations.save(id, context),
     configurationCancel: (root, { id }, context) => configurations.cancel(id, context),
-    gitCommit: (root, { message }, context) => git.commit(message, context)
+    gitCommit: (root, { message }, context) => git.commit(message, context),
+    fileOpenInEditor: (root, { input }, context) => files.openInEditor(input, context)
   },
 
   Subscription: {

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

@@ -242,6 +242,13 @@ enum FileDiffChangeType {
   del
 }
 
+input OpenInEditorInput {
+  file: String!
+  line: Int
+  column: Int
+  gitPath: Boolean
+}
+
 type Query {
   progress (id: ID!): Progress
   cwd: String!
@@ -286,6 +293,7 @@ type Mutation {
   configurationSave (id: ID!): Configuration
   configurationCancel (id: ID!): Configuration
   gitCommit (message: String!): Boolean
+  fileOpenInEditor (input: OpenInEditorInput!): Boolean
 }
 
 type Subscription {

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

@@ -0,0 +1,3 @@
+mutation fileOpenInEditor ($input: OpenInEditorInput!) {
+  fileOpenInEditor (input: $input)
+}

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

@@ -1,7 +1,10 @@
 {
   "components": {
     "file-diff": {
-      "binary": "Binary file not shown"
+      "binary": "Binary file not shown",
+      "actions": {
+        "open": "Open in editor"
+      }
     },
     "file-diff-view": {
       "files-changed": "Files changed",

packages/@vue/cli-ui/src/locales/fr.json

@@ -1,7 +1,10 @@
 {
   "components": {
     "file-diff": {
-      "binary": "Fichier binaire non affiché"
+      "binary": "Fichier binaire non affiché",
+      "actions": {
+        "open": "Open in editor"
+      }
     },
     "file-diff-view": {
       "files-changed": "Fichiers modifiés",