feat(ui): Redesign, dashboard, local plugins (#2806)

* feat: basic fonctionality, welcome and kill port widgets

* fix: contrast improvements

* feat: plugin/dep/vulnerability widgets design

* fix: widget add/remove animation

* feat: run task widget

* feat: news + wip resizing

* feat: nuxt

* chore: removed widget example

* fix: visual polish for widget transform

* feat(widget): overlap detection

* fix: news default/max size

* feat(dashboard): sidepane transition

* chore: dev api server port

* fix(widget): configure tooltip

* refactor(widget): generic Movable mixin

* refactor(widget): resizable mixin

* feat(widget): resize transition

* feat(widget): resize improvements

* refactor(widget): zoom factor

* refactor(widget): OnGrid mixin

* refactor(widget): resize handler style moved to global

* chore: remove console.log

* refactor: files structure

* feat: improved design and layout

* fix: content background vars

* fix: status bar / view nav z-indexes

* fix: webpack dashboard grid gap

* feat(news feed): handle errors

* fix(card): dimmed box shadow

* fix: view nav & status bar z-index

* fix: remove (wip)

* feat(widget): style tweaks

* feat(widget): details pane (wip)

* feat: news feed widget improvements

* feat(widget): custom header button

* feat(news): item details pane

* feat(widget): custom title

* fix(news): better cache and misc fixes

* feat(widget): resize left and top handles

* feat(widget): transparent widget while moving/resizing

* feat(news): better "big size" style

* fix(news): media sizes in rich content

* feat(plugin): local plugins support

* fix: scrolling issue in Fx

* fix: colors

* fix(nav bar): more item overflowing

* feat(vuln): frontend

* chore: locale update

* fix: image in suggestion dropdown (dev)

* fix(suggestion): missing custom image

* feat(view): user default plugin logo if no provided icon

* feat(view): better loading UX

* feat(view): button background if view is selected

* feat(view): new nav indicator

* feat(widget): use plugin logo as default icon

* feat(widget): better widget modal

* feat(widget): longDescription

* fix(widget): news validate url param

* feat(widget): filter widgets in add pane

* feat(widget): tease upcoming widgets

* chore: fix merge dev

* chore: yarn install

* chore: sync versions

* chore: update apollo

* docs: widget

* fix(progress): graphql error

* fix(deps): localPath

* perf(plugin): faster local plugin refresh

* fix(nav): center active indicator

* feat(task): improved header

* feat(client addon): custom component load timeout message

* feat(suggestion): ping animation to improve discoverability

* chore: update vue-apollo

* feat(api): requestRoute

* fix(suggestion): hide more info link if no link

* fix(style): ul padding

* test(e2e): fix plugin path

* chore: change test scripts

* chore(deps): upgrade

* fix: build error

* fix(widget): removed moving scale transform

* fix(widget): resize handles style

* chore(deps): unpin apollo-utilities

* chore(deps): lock fix

* test(e2e): fix server

* fix: issue with writeQuery

See: apollographql/apollo-client#4031 (comment)

* test(e2e): fix tests

* test(e2e): missing widgets build

* fix: missing widgets dep

Author: Akryum

docs/dev-guide/ui-api.md

@@ -1288,6 +1288,58 @@ In this example we only display the vue-router suggestion in the plugins view an
 
 Note: `addSuggestion` and `removeSuggestion` can be namespaced with `api.namespace()`.
 
+## Widgets
+
+You can register a widget for the project dashboard in your plugin ui file:
+
+```js
+registerWidget({
+  // Unique ID
+  id: 'org.vue.widgets.news',
+  // Basic infos
+  title: 'org.vue.widgets.news.title',
+  description: 'org.vue.widgets.news.description',
+  icon: 'rss_feed',
+  // Main component used to render the widget
+  component: 'org.vue.widgets.components.news',
+  // (Optional) Secondary component for widget 'fullscreen' view
+  detailsComponent: 'org.vue.widgets.components.news',
+  // Size
+  minWidth: 2,
+  minHeight: 1,
+  maxWidth: 6,
+  maxHeight: 6,
+  defaultWidth: 2,
+  defaultHeight: 3,
+  // (Optional) Limit the maximum number of this widget on the dashboard
+  maxCount: 1,
+  // (Optional) Add a 'fullscreen' button in widget header
+  openDetailsButton: true,
+  // (Optional) Default configuration for the widget
+  defaultConfig: () => ({
+    url: 'https://vuenews.fireside.fm/rss'
+  }),
+  // (Optional) Require user to configure widget when added
+  // You shouldn't use `defaultConfig` with this
+  needsUserConfig: true,
+  // (Optional) Display prompts to configure the widget
+  onConfigOpen: async ({ context }) => {
+    return {
+      prompts: [
+        {
+          name: 'url',
+          type: 'input',
+          message: 'org.vue.widgets.news.prompts.url',
+          validate: input => !!input // Required
+        }
+      ]
+    }
+  }
+})
+```
+
+Note: `registerWidget` can be namespaced with `api.namespace()`.
+
 ## Other methods
 
 ### hasPlugin
@@ -1324,6 +1376,21 @@ Get currently open project.
 api.getProject()
 ```
 
+### requestRoute
+
+Switch the user on a specific route in the web client.
+
+```js
+api.requestRoute({
+  name: 'foo',
+  params: {
+    id: 'bar'
+  }
+})
+
+api.requestRoute('/foobar')
+```
+
 ## Public static files
 
 You may need to expose some static files over the cli-ui builtin HTTP server (typically if you want to specify an icon to a custom view).

packages/@vue/cli-ui-addon-webpack/src/components/AssetList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="asset-list list-block">
+  <div class="asset-list card list-block">
     <div class="content">
       <div class="title">
         {{ $t('org.vue.vue-webpack.dashboard.asset-list.title') }}

packages/@vue/cli-ui-addon-webpack/src/components/BuildProgress.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="build-progress"
+    class="build-progress card"
     :class="{
       [`mode-${mode}`]: true
     }"

packages/@vue/cli-ui-addon-webpack/src/components/BuildStatus.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="build-status">
+  <div class="build-status card">
     <div class="content">
       <div class="info-block status">
         <div class="label">

packages/@vue/cli-ui-addon-webpack/src/components/ModuleList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="module-list list-block">
+  <div class="module-list card list-block">
     <div class="content">
       <div class="title">
         {{ $t('org.vue.vue-webpack.dashboard.module-list.title') }}

packages/@vue/cli-ui-addon-webpack/src/components/SpeedStats.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="speed-stats">
+  <div class="speed-stats card">
     <div class="content">
       <div class="title">
         {{ $t('org.vue.vue-webpack.dashboard.speed-stats.title') }}

packages/@vue/cli-ui-addon-webpack/src/components/WebpackAnalyzer.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="vue-webpack-analyzer">
-    <div class="pane-toolbar">
+    <div class="pane-toolbar card">
       <VueIcon icon="donut_large"/>
       <div class="title">{{ $t('org.vue.vue-webpack.analyzer.title') }}</div>
 
@@ -84,7 +84,7 @@
       </template>
 
       <div v-if="describedModule" class="described-module">
-        <div class="wrapper">
+        <div class="wrapper card">
           <div class="path" v-html="modulePath"/>
           <div
             class="stats size"
@@ -345,10 +345,6 @@ export default {
   .pane-toolbar,
   .described-module .wrapper
     padding $padding-item
-    background $vue-ui-color-light-neutral
-    border-radius $br
-    .vue-ui-dark-mode &
-      background $vue-ui-color-dark
 
   .content
     display flex

packages/@vue/cli-ui-addon-webpack/src/components/WebpackDashboard.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="vue-webpack-dashboard">
-    <div class="pane-toolbar">
+    <div class="pane-toolbar card">
       <VueIcon icon="dashboard"/>
       <div class="title">{{ $t('org.vue.vue-webpack.dashboard.title') }}</div>
 
@@ -40,7 +40,7 @@
       />
     </div>
 
-    <div class="content vue-ui-grid default-gap">
+    <div class="content vue-ui-grid">
       <BuildStatus />
       <BuildProgress />
       <SpeedStats class="span-2"/>
@@ -90,6 +90,7 @@ export default {
 .vue-webpack-dashboard
   .content
     grid-template-columns 9fr 4fr
+    grid-gap $padding-item
 
     >>>
       .title
@@ -124,13 +125,8 @@ export default {
             opacity .75
             font-size 16px
 
-  .pane-toolbar,
-  .content >>> > div
+  /deep/ .card
     padding $padding-item
-    background $vue-ui-color-light-neutral
-    border-radius $br
-    .vue-ui-dark-mode &
-      background $vue-ui-color-dark
 
   .pane-toolbar
     margin-bottom $padding-item

packages/@vue/cli-ui-addon-widgets/.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not ie <= 8

packages/@vue/cli-ui-addon-widgets/.eslintrc.js

@@ -0,0 +1,22 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/essential',
+    '@vue/standard'
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  globals: {
+    ClientAddonApi: false,
+    mapSharedData: false,
+    Vue: false
+  }
+}