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
+  }
+}

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

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

packages/@vue/cli-ui-addon-widgets/README.md

@@ -0,0 +1,21 @@
+# cli-ui-addon-widgets
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn run serve
+```
+
+### Compiles and minifies for production
+```
+yarn run build
+```
+
+### Lints and fixes files
+```
+yarn run lint
+```

packages/@vue/cli-ui-addon-widgets/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}

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

@@ -0,0 +1,26 @@
+{
+  "name": "@vue/cli-ui-addon-widgets",
+  "version": "3.0.5",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "prepublishOnly": "yarn run lint --no-fix && yarn run build"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.0.5",
+    "@vue/cli-plugin-eslint": "^3.0.5",
+    "@vue/cli-service": "^3.0.5",
+    "@vue/eslint-config-standard": "^3.0.5",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.2",
+    "vue-template-compiler": "^2.5.17"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/@vue/cli-ui-addon-widgets/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}

packages/@vue/cli-ui-addon-widgets/public/favicon.ico

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>cli-ui-addon-widgets</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but cli-ui-addon-widgets doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

packages/@vue/cli-ui-addon-widgets/public/index.html

@@ -0,0 +1,49 @@
+<template>
+  <div class="dependency-updates">
+    <StatusWidget
+      v-if="status"
+      :icon="icons[status.status]"
+      :icon-class="iconClasses[status.status]"
+      :title="$t(`org.vue.widgets.dependency-updates.messages.${status.status}`)"
+      :status="status"
+      @check="checkForUpdates()"
+    >
+      <template slot="more-actions">
+        <VueButton
+          :to="{ name: 'project-dependencies' }"
+          :label="$t('org.vue.widgets.dependency-updates.page')"
+          icon-left="collections_bookmark"
+        />
+      </template>
+    </StatusWidget>
+  </div>
+</template>
+
+<script>
+import { UPDATES_ICONS, UPDATES_ICON_CLASSES } from '../util/consts'
+
+import StatusWidget from './StatusWidget.vue'
+
+export default {
+  components: {
+    StatusWidget
+  },
+
+  sharedData () {
+    return mapSharedData('org.vue.widgets.dependency-updates.', {
+      status: 'status'
+    })
+  },
+
+  created () {
+    this.icons = UPDATES_ICONS
+    this.iconClasses = UPDATES_ICON_CLASSES
+  },
+
+  methods: {
+    checkForUpdates () {
+      // TODO
+    }
+  }
+}
+</script>