feat(ui): plugin add prompts

Author: Guillaume Chau

packages/@vue/cli-ui/package.json

@@ -6,7 +6,8 @@
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "graphql-api": "vue-cli-service graphql-api",
-    "run-graphql-api": "vue-cli-service run-graphql-api"
+    "run-graphql-api": "vue-cli-service run-graphql-api",
+    "prod-graphql-api": "cross-env NODE_ENV=production vue-cli-service run-graphql-api"
   },
   "dependencies": {
     "graphql": "^0.13.0",
@@ -38,7 +39,7 @@
     "subscriptions-transport-ws": "^0.9.5",
     "vue": "^2.5.13",
     "vue-apollo": "^3.0.0-beta.5",
-    "vue-cli-plugin-apollo": "^0.4.1",
+    "vue-cli-plugin-apollo": "^0.6.1",
     "vue-instantsearch": "^1.5.1",
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.5.13",

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

@@ -0,0 +1,27 @@
+<template>
+  <div class="prompt prompt-input">
+    <div class="prompt-content">
+      <ListItemInfo
+        :name="prompt.message"
+        :description="prompt.description"
+        :link="prompt.link"
+      />
+
+      <div class="prompt-input">
+        <VueInput
+          :value="value(prompt.value)"
+          :type="prompt.type === 'password' ? 'password' : 'text'"
+          @input="value => answer(value)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Prompt from './Prompt'
+
+export default {
+  extends: Prompt
+}
+</script>

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

@@ -14,6 +14,11 @@
 </template>
 
 <script>
+const types = {
+  rawlist: 'list',
+  password: 'input'
+}
+
 export default {
   props: {
     prompts: {
@@ -24,7 +29,11 @@ export default {
 
   methods: {
     getModule (prompt) {
-      const type = prompt.type.charAt(0).toUpperCase() + prompt.type.substr(1)
+      let type = prompt.type
+      if (types[type]) {
+        type = types[type]
+      }
+      type = type.charAt(0).toUpperCase() + type.substr(1)
       return require(`./Prompt${type}.vue`).default
     }
   }

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

@@ -162,6 +162,8 @@ function install (id, context) {
     const packageManager = loadOptions().packageManager || (hasYarn() ? 'yarn' : 'npm')
     await installPackage(cwd.get(), packageManager, null, id)
 
+    await initPrompts(id, context)
+
     return getInstallation(context)
   })
 }
@@ -178,6 +180,8 @@ function uninstall (id, context) {
     const packageManager = loadOptions().packageManager || (hasYarn() ? 'yarn' : 'npm')
     await uninstallPackage(cwd.get(), packageManager, null, id)
 
+    currentPluginId = null
+
     return getInstallation(context)
   })
 }
@@ -190,11 +194,25 @@ function invoke (id, context) {
     })
 
     currentPluginId = id
+
     // TODO
+
+    currentPluginId = null
+
     return getInstallation(context)
   })
 }
 
+async function initPrompts (id, context) {
+  prompts.reset()
+  let data = require(path.join(getPath(id), 'prompts.js'))
+  if (typeof data === 'function') {
+    data = await data()
+  }
+  data.forEach(prompts.add)
+  prompts.start()
+}
+
 module.exports = {
   list,
   getVersion,

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

@@ -126,6 +126,7 @@ function initCreator (context) {
   // Prompts
   prompts.reset()
   creator.injectedPrompts.forEach(prompts.add)
+  prompts.start()
 
   return creator
 }

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

@@ -41,7 +41,7 @@ function getDefaultValue (prompt) {
 function getEnabled (value) {
   const type = typeof value
   if (type === 'function') {
-    return value(answers)
+    return !!value(answers)
   } else if (type === 'boolean') {
     return value
   } else {
@@ -198,6 +198,10 @@ function add (data) {
   prompts.push(generatePrompt(data))
 }
 
+function start () {
+  updatePrompts()
+}
+
 function remove (id) {
   const index = prompts.findIndex(p => p.id === id)
   index !== -1 && prompts.splice(index, 1)
@@ -232,5 +236,6 @@ module.exports = {
   list,
   add,
   remove,
+  start,
   setValue
 }

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

@@ -2,6 +2,7 @@
 
 fragment pluginInstallation on PluginInstallation {
   id
+  pluginId
   prompts {
     ...prompt
   }

packages/@vue/cli-ui/src/views/ProjectPluginsAdd.vue

@@ -33,7 +33,7 @@
                     'name',
                     'description'
                   ],
-                  // filters: `keywords:vue-cli-plugin`
+                  filters: `keywords:vue-cli-plugin`
                 }"
               >
                 <InstantSearchInput ref="searchInput"/>
@@ -163,7 +163,6 @@ export default {
     return {
       tabId: 'search',
       selectedId: null,
-      enabledPrompts: [],
       showCancelInstall: false,
       pluginInstallation: null
     }
@@ -172,13 +171,29 @@ export default {
   apollo: {
     pluginInstallation: {
       query: PLUGIN_INSTALLATION,
-      fetchPolicy: 'netork-only'
+      fetchPolicy: 'netork-only',
+      result () {
+        if (this.pluginInstallation.pluginId) {
+          this.tabId = 'config'
+        } else {
+          this.tabId = 'search'
+        }
+      },
     }
   },
 
   computed: {
     configurationValid () {
       return false
+    },
+
+    enabledPrompts () {
+      if (!this.pluginInstallation) {
+        return []
+      }
+      return this.pluginInstallation.prompts.filter(
+        p => p.enabled
+      )
     }
   },