feat(ui): devtools suggestion

Author: Guillaume Chau

docs/dev-guide/ui-api.md

@@ -1154,6 +1154,8 @@ api.addSuggestion({
   // This will be displayed in a details modal
   message: 'A longer message for the modal',
   link: 'http://link-to-docs-in-the-modal',
+  // Optional image
+  image: '/_plugin/my-package/screenshot.png',
   // Function called when suggestion is activated by user
   async handler () {
     // ...
@@ -1173,6 +1175,18 @@ Then you can remove the suggestion:
 api.removeSuggestion('my-suggestion')
 ```
 
+You can also open a page instead when the user activates the suggestion with `actionLink`:
+
+```js
+api.addSuggestion({
+  id: 'my-suggestion',
+  type: 'action', // Required 
+  label: 'Add vue-router',
+  // Open a new tab
+  actionLink: 'https://vuejs.org/'
+})
+```
+
 Typically, you will use hooks to display the suggestion in the right context:
 
 ```js

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

@@ -359,6 +359,10 @@
         "label": "Add vuex",
         "message": "Official centralized State Management solution for large-scale apps. Very useful if multiple components need to access the same data."
       },
+      "vue-devtools": {
+        "label": "Install devtools",
+        "message": "Browser devtools official extension for debugging Vue.js applications where you can inspect your components, vuex store and events."
+      },
       "progress": "Installing {arg0}..."
     }
   },

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

@@ -34,7 +34,7 @@
 
     <template slot-scope="{ result: { data } }" v-if="data">
       <VueDropdown
-        v-for="suggestion of data.suggestions"
+        v-for="suggestion of withBuiltins(data.suggestions)"
         :key="suggestion.id"
         :disabled="!suggestion.message && !suggestion.link"
         class="suggestion"
@@ -60,6 +60,13 @@
             v-html="$t(suggestion.message)"
           />
 
+          <div
+            v-if="suggestion.image"
+            class="info image"
+          >
+            <img :src="suggestion.image" alt="image">
+          </div>
+
           <div class="actions-bar">
             <VueButton
               :href="suggestion.link"
@@ -94,15 +101,54 @@ import SUGGESTION_ACTIVATE from '../graphql/suggestionActivate.gql'
 export default {
   methods: {
     async activate (suggestion) {
-      this.showDetails = false
-      await this.$apollo.mutate({
-        mutation: SUGGESTION_ACTIVATE,
-        variables: {
-          input: {
-            id: suggestion.id
+      if (suggestion.actionLink) {
+        const win = window.open(
+          suggestion.actionLink,
+          '_blank'
+        )
+        win.focus()
+      } else {
+        await this.$apollo.mutate({
+          mutation: SUGGESTION_ACTIVATE,
+          variables: {
+            input: {
+              id: suggestion.id
+            }
           }
+        })
+      }
+    },
+
+    // Builtin suggestions
+    withBuiltins (suggestions) {
+      let list = suggestions
+
+      // Install devtools
+      if (!Object.prototype.hasOwnProperty.call(window, '__VUE_DEVTOOLS_GLOBAL_HOOK__')) {
+        let devtoolsLink = null
+        if (/Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor)) {
+          devtoolsLink = 'https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd'
+        } else if (/Firefox/.test(navigator.userAgent)) {
+          devtoolsLink = 'https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/'
         }
-      })
+
+        if (devtoolsLink) {
+          list = [
+            ...list,
+            {
+              id: 'vue-devtools',
+              type: 'action',
+              label: 'cli-service.suggestions.vue-devtools.label',
+              message: 'cli-service.suggestions.vue-devtools.message',
+              link: 'https://github.com/vuejs/vue-devtools',
+              image: 'https://raw.githubusercontent.com/vuejs/vue-devtools/master/media/screenshot.png',
+              actionLink: devtoolsLink
+            }
+          ]
+        }
+      }
+
+      return list
     }
   }
 }
@@ -130,4 +176,8 @@ export default {
   .info
     &:not(:last-child)
       margin-bottom $padding-item
+
+    &.image
+      >>> img
+        max-width 100%
 </style>

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

@@ -4,10 +4,12 @@ const schema = createSchema(joi => ({
   id: joi.string().required(),
   label: joi.string().required(),
   type: joi.string().required(),
-  handler: joi.func().required(),
+  handler: joi.func(),
+  actionLink: joi.string(),
   importance: joi.string(),
   message: joi.string(),
-  link: joi.string()
+  link: joi.string(),
+  image: joi.string()
 }))
 
 exports.validateSuggestion = (options) => {