feat(plugin add): feature icons

Author: Guillaume Chau

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

@@ -118,7 +118,11 @@
             "update": "Update {target}",
             "refresh": "Force Refresh {target}<br><i>Press [Shift] for Quick Refresh (node_modules won't be updated)</i>"
           },
-          "local": "Local"
+          "local": "Local",
+          "features": {
+            "generator": "This plugin has a generator and can modify your project files and add new files for you.",
+            "ui-integration": "This plugin includes additional UI features like enhanced tasks, configuration screens, dashboard widgets..."
+          }
         },
         "project-dependency-item": {
           "version": "version",

packages/@vue/cli-ui/src/components/dependency/NpmPackageSearch.vue

@@ -37,7 +37,7 @@
               slot-scope="{ result }"
               :pkg="result"
               :selected="selectedIdModel === result.name"
-              :try-logo="tryLogos"
+              :load-metadata="loadMetadata"
               @click.native="selectedIdModel = result.name"
             />
           </ais-results>
@@ -98,7 +98,7 @@ export default {
       default: 20
     },
 
-    tryLogos: {
+    loadMetadata: {
       type: Boolean,
       default: false
     }

packages/@vue/cli-ui/src/components/dependency/PackageSearchItem.vue

@@ -49,6 +49,27 @@
         </span>
       </template>
     </ListItemInfo>
+
+    <div
+      v-if="hasGenerator"
+      class="feature"
+      v-tooltip="$t('org.vue.components.project-plugin-item.features.generator')"
+    >
+      <VueIcon
+        icon="note_add"
+        class="big"
+      />
+    </div>
+    <div
+      v-if="hasUiIntegration"
+      class="feature"
+      v-tooltip="$t('org.vue.components.project-plugin-item.features.ui-integration')"
+    >
+      <VueIcon
+        icon="brush"
+        class="big"
+      />
+    </div>
   </div>
 </template>
 
@@ -65,15 +86,17 @@ export default {
       default: false
     },
 
-    tryLogo: {
+    loadMetadata: {
       type: Boolean,
       default: false
     }
   },
 
   data () {
     return {
-      logoUrl: null
+      logoUrl: null,
+      hasGenerator: false,
+      hasUiIntegration: false
     }
   },
 
@@ -85,25 +108,38 @@ export default {
 
   watch: {
     'pkg.name': {
-      handler: 'updateLogo',
+      handler: 'updateMetadata',
       immediate: true
     }
   },
 
   methods: {
-    updateLogo () {
+    updateMetadata () {
+      const name = this.pkg.name
+
+      this.hasUiIntegration = false
+      this.hasGenerator = false
       // By default, show the npm user avatar
       this.logoUrl = this.pkg.owner.avatar
 
       // Try to load the logo.png file inside the package
-      if (this.tryLogo) {
-        const name = this.pkg.name
+      if (this.loadMetadata) {
         const img = new Image()
         img.onload = () => {
           if (name !== this.pkg.name) return
           this.logoUrl = img.src
         }
         img.src = `https://unpkg.com/${name}/logo.png`
+
+        fetch(`https://unpkg.com/${name}/ui`).then(response => {
+          if (name !== this.pkg.name) return
+          this.hasUiIntegration = response.ok
+        })
+
+        fetch(`https://unpkg.com/${name}/generator`).then(response => {
+          if (name !== this.pkg.name) return
+          this.hasGenerator = response.ok
+        })
       }
     }
   }
@@ -147,4 +183,10 @@ export default {
     &.owner
       .vue-ui-icon
         margin-right 2px
+
+  .feature
+    margin-right 12px
+    opacity .3
+    &:hover
+      opacity 1
 </style>

packages/@vue/cli-ui/src/components/plugin/ProjectPluginsAdd.vue

@@ -15,7 +15,7 @@
           >
             <NpmPackageSearch
               filters="computedKeywords:vue-cli-plugin"
-              try-logos
+              load-metadata
               @close="close()"
               @install="installPlugin"
             >