feat(ui): devtools suggestion

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) => {