refactor(ui): Config & task icons (#1450)

BREAKING CHANGE:

- `file-icon` for the configurations is removed
- Configuration objects `icon` option changed and is now working differently: you can either use a material icon code or a custom image (see Public static files in the UI Plugin docs).
- Task objects have a new `icon` option wich works exactly the same
- By default, if no icon is provided for either the config or the task, the corresponding vue-cli plugin logo will be used instead (if any).

Author: Akryum

docs/plugin-dev-ui.md

@@ -114,16 +114,18 @@ api.describeConfig({
 
 #### Config icon
 
-Specify an icon with either a file type (like `'json'`) or a file name (like `.babelrc` to get the babel icon). This is powered by file-icons.
+It can be either a [Material icon](https://material.io/tools/icons) code or a custom image (see [Public static files](#public-static-files)):
 
 ```js
 api.describeConfig({
   /* ... */
-  // Icon generated using file-icons
-  icon: '.eslintrc.json'
+  // Config icon
+  icon: 'application_settings'
 })
 ```
 
+If you don't specify an icon, the plugin logo will be displayed if any (see [Logo](#logo)).
+
 #### Config file
 
 By default, a configuration UI might read and write to a configuration file, for example `.eslintrc.js`.
@@ -253,6 +255,20 @@ api.describeTask({
 })
 ```
 
+#### Task icon
+
+It can be either a [Material icon](https://material.io/tools/icons) code or a custom image (see [Public static files](#public-static-files)):
+
+```js
+api.describeTask({
+  /* ... */
+  // Task icon
+  icon: 'application_settings'
+})
+```
+
+If you don't specify an icon, the plugin logo will be displayed if any (see [Logo](#logo)).
+
 #### Tasks parameters
 
 You can add prompts to modify the command arguments. They will be displayed in a 'Parameters' modal.
@@ -912,4 +928,12 @@ You may need to expose some static files over the cli-ui builtin HTTP server (ty
 
 Any file in an optional `ui-public` folder in the root of the plugin package folder will be exposed to the `/_plugin/:id/*` HTTP route.
 
-For example, if you put a `my-logo.png` file into the `my-package/ui-public/` folder, it will be available with the `http://localhost:8000/_plugin/my-package/my-logo.png` URL when the cli-ui loads the plugin.
+For example, if you put a `my-logo.png` file into the `my-package/ui-public/` folder, it will be available with the `/_plugin/my-package/my-logo.png` URL when the cli-ui loads the plugin.
+
+```js
+api.describeConfig({
+  /* ... */
+  // Custom image
+  icon: '/_plugin/my-package/my-logo.png'
+})
+```

packages/@vue/cli-plugin-eslint/ui.js

@@ -5,7 +5,6 @@ module.exports = api => {
     name: 'ESLint configuration',
     description: 'eslint.config.eslint.description',
     link: 'https://github.com/vuejs/eslint-plugin-vue',
-    icon: '.eslintrc.json',
     files: {
       json: ['.eslintrc', '.eslintrc.json'],
       js: ['.eslintrc.js'],
@@ -181,7 +180,6 @@ module.exports = api => {
     name: 'ESLint extra',
     description: 'eslint.config.eslint-extra.description',
     link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint#configuration',
-    icon: '.eslintrc.json',
     files: {
       js: ['vue.config.js']
     },

packages/@vue/cli-plugin-pwa/ui.js

@@ -32,7 +32,6 @@ module.exports = api => {
     name: 'PWA',
     description: 'pwa.config.pwa.description',
     link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa#configuration',
-    icon: 'mobile.xm',
     files: {
       js: ['vue.config.js']
     },

packages/@vue/cli-service/ui-public/webpack-inspect-logo.png

@@ -48,6 +48,7 @@ module.exports = api => {
     match: /vue-cli-service serve/,
     description: 'vue-webpack.tasks.serve.description',
     link: 'https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#serve',
+    icon: '/_plugin/%40vue%2Fcli-service/webpack-logo.png',
     prompts: [
       {
         name: 'open',
@@ -120,6 +121,7 @@ module.exports = api => {
     match: /vue-cli-service build/,
     description: 'vue-webpack.tasks.build.description',
     link: 'https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#build',
+    icon: '/_plugin/%40vue%2Fcli-service/webpack-logo.png',
     prompts: [
       {
         name: 'mode',
@@ -210,6 +212,7 @@ module.exports = api => {
     command: 'vue-cli-service inspect',
     description: 'vue-webpack.tasks.inspect.description',
     link: 'https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md#inspecting-the-projects-webpack-config',
+    icon: '/_plugin/%40vue%2Fcli-service/webpack-inspect-logo.png',
     prompts: [
       {
         name: 'mode',

packages/@vue/cli-service/ui-public/webpack-logo.png

@@ -54,7 +54,6 @@
     "cross-env": "^5.1.5",
     "eslint": "^4.16.0",
     "eslint-plugin-graphql": "^2.1.1",
-    "file-icons-js": "^1.0.3",
     "lint-staged": "^6.0.0",
     "portal-vue": "^1.3.0",
     "rimraf": "^2.6.2",

packages/@vue/cli-service/ui.js

@@ -30,7 +30,6 @@ export default {
 
 <style lang="stylus">
 @import "~@vue/ui/dist/vue-ui.css"
-@import "~file-icons-js/css/style.css"
 @import "~@/style/main"
 </style>
 

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

@@ -8,7 +8,8 @@
   >
     <div class="content">
       <ItemLogo
-        :file-icon="iconClass"
+        :image="configuration.icon || (configuration.plugin && configuration.plugin.logo)"
+        fallback-icon="settings_applications"
       />
 
       <ListItemInfo
@@ -21,8 +22,6 @@
 </template>
 
 <script>
-import icons from 'file-icons-js'
-
 export default {
   props: {
     configuration: {
@@ -34,21 +33,6 @@ export default {
       type: Boolean,
       default: false
     }
-  },
-
-  computed: {
-    iconClass () {
-      return icons.getClassWithColor(this.getFileName(this.configuration.icon) || this.configuration.id) || 'gear-icon medium-blue'
-    }
-  },
-
-  methods: {
-    getFileName (icon) {
-      if (icon) {
-        if (!icon.includes('.')) return `f.${icon}`
-        return icon
-      }
-    }
   }
 }
 </script>

packages/@vue/cli-ui/src/App.vue

@@ -14,21 +14,16 @@
         icon="done"
       />
       <img
-        v-else-if="imageEnabled && !error"
+        v-else-if="!isMaterialIcon && !error"
         class="image"
-        :src="imageUrl"
-        :key="imageUrl"
+        :src="image"
+        :key="image"
         @load="loaded = true"
         @error="error = true"
       >
-      <div
-        v-else-if="fileIcon"
-        class="dynamic-file-icon"
-        :class="fileIcon"
-      />
       <VueIcon
         v-else
-        :icon="icon"
+        :icon="error || !image ? fallbackIcon : image"
       />
     </div>
   </div>
@@ -38,18 +33,13 @@
 export default {
   props: {
     image: {
-      type: String,
-      default: null
-    },
-
-    icon: {
       type: String,
       default: 'widgets'
     },
 
-    fileIcon: {
+    fallbackIcon: {
       type: String,
-      default: null
+      default: 'image'
     },
 
     selected: {
@@ -66,12 +56,8 @@ export default {
   },
 
   computed: {
-    imageEnabled () {
-      return this.image || (this.icon && this.icon.indexOf('.') !== -1)
-    },
-
-    imageUrl () {
-      return this.image || this.icon
+    isMaterialIcon () {
+      return /^[a-z0-9_]+$/.test(this.image)
     }
   },
 
@@ -112,10 +98,6 @@ export default {
       >>> svg
         fill rgba($color-text-light, .3)
 
-  .dynamic-file-icon
-    &::before
-      font-size 24px
-
   &.vuejs
     .wrapper
       background lighten($vue-ui-color-primary, 70%)

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

@@ -1,7 +1,10 @@
 <template>
   <div class="project-plugin-item list-item">
     <div class="content">
-      <ItemLogo :image="pluginLogo && pluginLogo.logo"/>
+      <ItemLogo
+        :image="pluginLogo && pluginLogo.logo"
+        fallback-icon="widgets"
+      />
 
       <ListItemInfo
         :name="plugin.id"

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

@@ -11,7 +11,7 @@
   >
     <div class="content">
       <ItemLogo
-        :icon="iconData.icon"
+        :image="logo ? logo : iconData.icon"
         :class="iconData.class"
         v-tooltip="status"
       />
@@ -56,6 +56,10 @@ export default {
 
     iconData () {
       return icons[this.task.status]
+    },
+
+    logo () {
+      return this.task.icon || (this.task.plugin && this.task.plugin.logo)
     }
   },
 

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

@@ -59,7 +59,10 @@ class PluginApi {
   describeConfig (options) {
     try {
       validateConfiguration(options)
-      this.configurations.push(options)
+      this.configurations.push({
+        ...options,
+        pluginId: this.pluginId
+      })
     } catch (e) {
       logs.add({
         type: 'error',
@@ -79,7 +82,10 @@ class PluginApi {
   describeTask (options) {
     try {
       validateDescribeTask(options)
-      this.describedTasks.push(options)
+      this.describedTasks.push({
+        ...options,
+        pluginId: this.pluginId
+      })
     } catch (e) {
       logs.add({
         type: 'error',
@@ -111,7 +117,10 @@ class PluginApi {
   addTask (options) {
     try {
       validateAddTask(options)
-      this.addedTasks.push(options)
+      this.addedTasks.push({
+        ...options,
+        pluginId: this.pluginId
+      })
     } catch (e) {
       logs.add({
         type: 'error',
@@ -143,7 +152,10 @@ class PluginApi {
       if (options.url && options.path) {
         throw new Error(`'url' and 'path' can't be defined at the same time.`)
       }
-      this.clientAddons.push(options)
+      this.clientAddons.push({
+        ...options,
+        pluginId: this.pluginId
+      })
     } catch (e) {
       logs.add({
         type: 'error',
@@ -164,7 +176,10 @@ class PluginApi {
   addView (options) {
     try {
       validateView(options)
-      this.views.push(options)
+      this.views.push({
+        ...options,
+        pluginId: this.pluginId
+      })
     } catch (e) {
       logs.add({
         type: 'error',

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

@@ -3,6 +3,7 @@ const { createSchema, validateSync } = require('@vue/cli-shared-utils')
 const schema = joi => ({
   description: joi.string(),
   link: joi.string().uri(),
+  icon: joi.string(),
   prompts: joi.array(),
   views: joi.array().items(joi.object({
     id: joi.string().required(),

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

@@ -45,7 +45,7 @@ function getUrl (addon, context) {
 
 function serve (req, res) {
   const { id, 0: file } = req.params
-  const addon = findOne(id)
+  const addon = findOne(decodeURIComponent(id))
   if (addon && addon.path) {
     const basePath = resolveModuleRoot(require.resolve(addon.path))
     if (basePath) {

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

@@ -404,7 +404,7 @@ async function callAction ({ id, params }, context) {
 
 function serve (req, res) {
   const { id, 0: file } = req.params
-  const basePath = id === '.' ? cwd.get() : getPath(id)
+  const basePath = id === '.' ? cwd.get() : getPath(decodeURIComponent(id))
   if (basePath) {
     res.sendFile(path.join(basePath, 'ui-public', file))
     return

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

@@ -1,6 +1,7 @@
 const gql = require('graphql-tag')
 // Connectors
 const configurations = require('../connectors/configurations')
+const plugins = require('../connectors/plugins')
 
 exports.types = gql`
 extend type Query {
@@ -20,12 +21,14 @@ type Configuration implements DescribedEntity {
   link: String
   icon: String
   prompts: [Prompt]
+  plugin: Plugin
 }
 `
 
 exports.resolvers = {
   Configuration: {
-    prompts: (configuration, args, context) => configurations.getPrompts(configuration.id, context)
+    prompts: (configuration, args, context) => configurations.getPrompts(configuration.id, context),
+    plugin: (configuration, args, context) => plugins.findOne(configuration.pluginId, context)
   },
 
   Query: {