feat(ui): file diffs after plugin invoke + fixes

vuejs · Mar 28, 2018 · e7198a4 · e7198a4
1 parent a5b1822
commit e7198a4
Show file tree

Hide file tree

Showing 18 changed files with 361 additions and 26 deletions.
diff --git a/packages/@vue/cli-ui/package.json b/packages/@vue/cli-ui/package.json
@@ -28,7 +28,6 @@
     "lowdb": "^1.0.0",
     "lru-cache": "^4.1.2",
     "mkdirp": "^0.5.1",
-    "parse-diff": "^0.4.2",
     "rimraf": "^2.6.2",
     "semver": "^5.5.0",
     "shortid": "^2.2.8",
@@ -51,7 +50,7 @@
     "lint-staged": "^6.0.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
-    "vue-cli-plugin-apollo": "^0.6.1",
+    "vue-cli-plugin-apollo": "^0.7.1",
     "vue-template-compiler": "^2.5.13"
   },
   "browserslist": [

diff --git a/packages/@vue/cli-ui/src/components/FileDiff.vue b/packages/@vue/cli-ui/src/components/FileDiff.vue
@@ -27,11 +27,17 @@
     </div>
 
     <div v-if="!collapsed" class="content">
-      <FileDiffChunk
-        v-for="(chunk, index) in fileDiff.chunks"
-        :key="index"
-        :chunk="chunk"
-      />
+      <div v-if="fileDiff.binary" class="is-binary">
+        <VueIcon icon="memory" class="icon"/>
+        <span>{{ $t('components.file-diff.binary') }}</span>
+      </div>
+      <template v-else>
+        <FileDiffChunk
+          v-for="(chunk, index) in fileDiff.chunks"
+          :key="index"
+          :chunk="chunk"
+        />
+      </template>
     </div>
   </div>
 </template>
@@ -102,8 +108,14 @@ status-color($color)
         flex 100% 1 1
         width 0
 
-    .content
-      overflow-x auto
+  .is-binary
+    h-box()
+    box-center()
+    padding $padding-item
+    opacity .5
+
+    .icon
+      margin-right 4px
 
   &.new
     status-color($vue-ui-color-success)

diff --git a/packages/@vue/cli-ui/src/components/FileDiffChunk.vue b/packages/@vue/cli-ui/src/components/FileDiffChunk.vue
@@ -25,6 +25,11 @@ export default {
 @import "~@/style/imports"
 
 .file-diff-chunk
+  .changes
+    overflow-x auto
+    display grid
+    grid-template-column 1fr
+
   &:not(:last-child)
     &::after
       content '•••'

diff --git a/packages/@vue/cli-ui/src/components/FileDiffView.vue b/packages/@vue/cli-ui/src/components/FileDiffView.vue
@@ -115,6 +115,11 @@ import PageVisibility from '../mixins/PageVisibility'
 import FILE_DIFFS from '../graphql/fileDiffs.gql'
 import GIT_COMMIT from '../graphql/gitCommit.gql'
 
+const defaultCollapsed = [
+  'yarn.lock',
+  'package-lock.json'
+]
+
 export default {
   mixins: [
     PageVisibility
@@ -135,7 +140,18 @@ export default {
     fileDiffs: {
       query: FILE_DIFFS,
       loadingKey: 'loading',
-      fetchPolicy: 'cahe-and-network'
+      fetchPolicy: 'cahe-and-network',
+      result () {
+        this.fileDiffs.forEach(fileDiff => {
+          if (typeof this.collapsed[fileDiff.id] === 'undefined' && (
+            fileDiff.binary ||
+            defaultCollapsed.includes(fileDiff.from) ||
+            defaultCollapsed.includes(fileDiff.to)
+          )) {
+            this.$set(this.collapsed, fileDiff.id, true)
+          }
+        })
+      }
     }
   },
 

diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/git.js b/packages/@vue/cli-ui/src/graphql-api/connectors/git.js
@@ -1,18 +1,41 @@
 const execa = require('execa')
-const parseDiff = require('parse-diff')
+const parseDiff = require('../utils/parse-diff')
 // Connectors
 const cwd = require('./cwd')
 
+async function getNewFiles (context) {
+  const { stdout } = await execa('git', [
+    'ls-files',
+    '-o',
+    '--exclude-standard',
+    '--full-name'
+  ], {
+    cwd: cwd.get()
+  })
+  if (stdout.trim()) {
+    return stdout.split(/\r?\n/g)
+  }
+  return []
+}
+
 async function getDiffs (context) {
-  const { stdout } = await execa('git', ['diff', 'HEAD'], {
+  const newFiles = await getNewFiles(context)
+  await execa('git', ['add', '-N', '*'], {
+    cwd: cwd.get()
+  })
+  const { stdout } = await execa('git', ['diff'], {
     cwd: cwd.get()
   })
-  return parseDiff(stdout).map(
+  await reset(context)
+  const list = parseDiff(stdout).map(
     fileDiff => ({
       id: fileDiff.index.join(' '),
-      ...fileDiff
+      ...fileDiff,
+      new: newFiles.includes(fileDiff.to)
     })
   )
+
+  return list
 }
 
 async function commit (message, context) {
@@ -25,7 +48,15 @@ async function commit (message, context) {
   return true
 }
 
+async function reset (context) {
+  await execa('git', ['reset'], {
+    cwd: cwd.get()
+  })
+  return true
+}
+
 module.exports = {
   getDiffs,
-  commit
+  commit,
+  reset
 }
diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/plugins.js b/packages/@vue/cli-ui/src/graphql-api/connectors/plugins.js
@@ -43,6 +43,7 @@ let currentPluginId
 let eventsInstalled = false
 let plugins = []
 let pluginApi
+let installationStep
 
 function getPath (id) {
   return path.dirname(resolveModule(id, cwd.get()))
@@ -181,6 +182,7 @@ function getInstallation (context) {
   return {
     id: 'plugin-install',
     pluginId: currentPluginId,
+    step: installationStep,
     prompts: prompts.list()
   }
 }
@@ -192,8 +194,10 @@ function install (id, context) {
       args: [id]
     })
     currentPluginId = id
+    installationStep = 'install'
     await installPackage(cwd.get(), getCommand(), null, id)
     await initPrompts(id, context)
+    installationStep = 'config'
     return getInstallation(context)
   })
 }
@@ -204,9 +208,11 @@ function uninstall (id, context) {
       status: 'plugin-uninstall',
       args: [id]
     })
+    installationStep = 'uninstall'
     currentPluginId = id
     await uninstallPackage(cwd.get(), getCommand(), null, id)
     currentPluginId = null
+    installationStep = null
     return getInstallation(context)
   })
 }
@@ -224,11 +230,17 @@ function runInvoke (id, context) {
     }
     // Run plugin api
     runPluginApi(id, context)
-    currentPluginId = null
+    installationStep = 'diff'
     return getInstallation(context)
   })
 }
 
+function finishInstall (context) {
+  installationStep = null
+  currentPluginId = null
+  return getInstallation(context)
+}
+
 async function initPrompts (id, context) {
   prompts.reset()
   try {
@@ -278,5 +290,6 @@ module.exports = {
   update,
   runInvoke,
   resetPluginApi,
-  getApi
+  getApi,
+  finishInstall
 }
diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/prompts.js b/packages/@vue/cli-ui/src/graphql-api/connectors/prompts.js
@@ -72,7 +72,9 @@ function getChoices (prompt) {
   } else {
     result = data
   }
-  const defaultValue = getDefaultValue(prompt)
+  const defaultValue = prompt.type === 'list' || prompt.type === 'rawlist'
+    ? getDefaultValue(prompt)
+    : undefined
   return result.map(
     item => generatePromptChoice(prompt, item, defaultValue)
   )

diff --git a/packages/@vue/cli-ui/src/graphql-api/resolvers.js b/packages/@vue/cli-ui/src/graphql-api/resolvers.js
@@ -83,6 +83,7 @@ module.exports = {
     pluginInstall: (root, { id }, context) => plugins.install(id, context),
     pluginUninstall: (root, { id }, context) => plugins.uninstall(id, context),
     pluginInvoke: (root, { id }, context) => plugins.runInvoke(id, context),
+    pluginFinishInstall: (root, args, context) => plugins.finishInstall(context),
     pluginUpdate: (root, { id }, context) => plugins.update(id, context),
     taskRun: (root, { id }, context) => tasks.run(id, context),
     taskStop: (root, { id }, context) => tasks.stop(id, context),

diff --git a/packages/@vue/cli-ui/src/graphql-api/type-defs.js b/packages/@vue/cli-ui/src/graphql-api/type-defs.js
@@ -97,9 +97,17 @@ type Plugin {
 type PluginInstallation {
   id: ID!
   pluginId: ID
+  step: PluginInstallationStep
   prompts: [Prompt]
 }
 
+enum PluginInstallationStep {
+  install
+  uninstall
+  config
+  diff
+}
+
 type Feature implements DescribedEntity {
   id: ID!
   name: String
@@ -207,6 +215,7 @@ type FileDiff {
   to: String
   new: Boolean
   deleted: Boolean
+  binary: Boolean
   chunks: [FileDiffChunk]
 }
 
@@ -269,6 +278,7 @@ type Mutation {
   pluginInstall (id: ID!): PluginInstallation
   pluginUninstall (id: ID!): PluginInstallation
   pluginInvoke (id: ID!): PluginInstallation
+  pluginFinishInstall: PluginInstallation
   pluginUpdate (id: ID!): Plugin
   taskRun (id: ID!): Task
   taskStop (id: ID!): Task