From 376e4bbbf0548373e5a88849ae1cd37c58f68f5a Mon Sep 17 00:00:00 2001
From: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Mon, 5 Mar 2018 16:05:59 +0100
Subject: [PATCH] feat(ui): FolderExplorer favorites + Project select page

---
 packages/@vue/cli-ui/package.json             |   7 +-
 packages/@vue/cli-ui/public/index.html        |   2 +-
 packages/@vue/cli-ui/src/apollo.js            |  10 +-
 .../cli-ui/src/components/FolderExplorer.vue  | 102 +++++++--
 .../@vue/cli-ui/src/components/ProjectNav.vue |  58 +++++
 .../src/components/ProjectSelectList.vue      |  19 ++
 .../@vue/cli-ui/src/components/StatusBar.vue  |  45 ++++
 .../src/graphql-api/connectors/folders.js     |  31 ++-
 .../@vue/cli-ui/src/graphql-api/resolvers.js  |   7 +-
 .../@vue/cli-ui/src/graphql-api/type-defs.js  |   3 +
 .../@vue/cli-ui/src/graphql-api/utils/db.js   |   3 +-
 packages/@vue/cli-ui/src/graphql/cwd.gql      |   2 +-
 .../@vue/cli-ui/src/graphql/cwdChanged.gql    |   2 +-
 .../cli-ui/src/graphql/featureFragment.gql    |   7 +
 .../@vue/cli-ui/src/graphql/folderCurrent.gql |   2 +-
 .../src/graphql/folderCurrentFragment.gql     |   3 +
 .../@vue/cli-ui/src/graphql/folderOpen.gql    |   2 +-
 .../cli-ui/src/graphql/folderOpenParent.gql   |   2 +-
 .../cli-ui/src/graphql/folderSetFavorite.gql  |   7 +
 .../cli-ui/src/graphql/foldersFavorite.gql    |   5 +
 .../cli-ui/src/graphql/pluginFragment.gql     |  11 +
 .../cli-ui/src/graphql/projectCurrent.gql     |   7 +
 .../src/graphql/projectCurrentFragment.gql    |  15 ++
 packages/@vue/cli-ui/src/graphql/projects.gql |   8 +
 packages/@vue/cli-ui/src/main.js              |  12 +-
 packages/@vue/cli-ui/src/router.js            |  34 ++-
 packages/@vue/cli-ui/src/state/defaults.js    |   3 +
 packages/@vue/cli-ui/src/state/resolvers.js   |   3 +
 packages/@vue/cli-ui/src/store.js             |  16 --
 packages/@vue/cli-ui/src/style/colors.styl    |   1 +
 packages/@vue/cli-ui/src/style/imports.styl   |   1 +
 packages/@vue/cli-ui/src/style/main.styl      |   6 +
 packages/@vue/cli-ui/src/views/Home.vue       |  32 ++-
 .../@vue/cli-ui/src/views/ProjectSelect.vue   | 106 +++++++++
 yarn.lock                                     | 211 ++++++++++--------
 35 files changed, 623 insertions(+), 162 deletions(-)
 create mode 100644 packages/@vue/cli-ui/src/components/ProjectNav.vue
 create mode 100644 packages/@vue/cli-ui/src/components/ProjectSelectList.vue
 create mode 100644 packages/@vue/cli-ui/src/components/StatusBar.vue
 create mode 100644 packages/@vue/cli-ui/src/graphql/featureFragment.gql
 create mode 100644 packages/@vue/cli-ui/src/graphql/folderSetFavorite.gql
 create mode 100644 packages/@vue/cli-ui/src/graphql/foldersFavorite.gql
 create mode 100644 packages/@vue/cli-ui/src/graphql/pluginFragment.gql
 create mode 100644 packages/@vue/cli-ui/src/graphql/projectCurrent.gql
 create mode 100644 packages/@vue/cli-ui/src/graphql/projectCurrentFragment.gql
 create mode 100644 packages/@vue/cli-ui/src/graphql/projects.gql
 create mode 100644 packages/@vue/cli-ui/src/state/defaults.js
 create mode 100644 packages/@vue/cli-ui/src/state/resolvers.js
 delete mode 100644 packages/@vue/cli-ui/src/store.js
 create mode 100644 packages/@vue/cli-ui/src/style/colors.styl
 create mode 100644 packages/@vue/cli-ui/src/views/ProjectSelect.vue

diff --git a/packages/@vue/cli-ui/package.json b/packages/@vue/cli-ui/package.json
index e8de720291..0445ea4618 100644
--- a/packages/@vue/cli-ui/package.json
+++ b/packages/@vue/cli-ui/package.json
@@ -20,6 +20,7 @@
     "apollo-link-context": "^1.0.5",
     "apollo-link-http": "^1.0.0",
     "apollo-link-persisted-queries": "^0.1.0",
+    "apollo-link-state": "^0.4.0",
     "apollo-link-ws": "^1.0.0",
     "apollo-upload-client": "^7.0.0-alpha.4",
     "apollo-utilities": "^1.0.1",
@@ -36,8 +37,7 @@
     "vue-apollo": "^3.0.0-alpha.1",
     "vue-cli-plugin-apollo": "^0.4.1",
     "vue-router": "^3.0.1",
-    "vue-template-compiler": "^2.5.13",
-    "vuex": "^3.0.1"
+    "vue-template-compiler": "^2.5.13"
   },
   "browserslist": [
     "> 1%",
@@ -62,5 +62,8 @@
       "vue-cli-service lint",
       "git add"
     ]
+  },
+  "dependencies": {
+    "eslint": "^4.16.0"
   }
 }
diff --git a/packages/@vue/cli-ui/public/index.html b/packages/@vue/cli-ui/public/index.html
index 7bd4154690..96098ec9c7 100644
--- a/packages/@vue/cli-ui/public/index.html
+++ b/packages/@vue/cli-ui/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
-    <title>cli-ui</title>
+    <title>Vue CLI</title>
           <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
   <body>
     <noscript>
diff --git a/packages/@vue/cli-ui/src/apollo.js b/packages/@vue/cli-ui/src/apollo.js
index d398446154..9a6a0ada4a 100644
--- a/packages/@vue/cli-ui/src/apollo.js
+++ b/packages/@vue/cli-ui/src/apollo.js
@@ -1,5 +1,5 @@
 import { ApolloClient } from 'apollo-client'
-import { split } from 'apollo-link'
+import { split, ApolloLink } from 'apollo-link'
 import { HttpLink } from 'apollo-link-http'
 import { createUploadLink } from 'apollo-upload-client'
 import { InMemoryCache } from 'apollo-cache-inmemory'
@@ -8,6 +8,9 @@ import { WebSocketLink } from 'apollo-link-ws'
 import { getMainDefinition } from 'apollo-utilities'
 import { createPersistedQueryLink } from 'apollo-link-persisted-queries'
 import { setContext } from 'apollo-link-context'
+import { withClientState } from 'apollo-link-state'
+import defaults from './state/defaults'
+import resolvers from './state/resolvers'
 
 function getAuth () {
   // get the authentication token from local storage if it exists
@@ -63,6 +66,9 @@ export default function createApolloClient ({ ssr, base, endpoints, persisting }
   // Apollo cache
   const cache = new InMemoryCache()
 
+  // Client-side state
+  const stateLink = withClientState({ defaults, cache, resolvers })
+
   if (!ssr) {
     // If on the client, recover the injected state
     if (typeof window !== 'undefined') {
@@ -115,7 +121,7 @@ export default function createApolloClient ({ ssr, base, endpoints, persisting }
   }
 
   const apolloClient = new ApolloClient({
-    link,
+    link: ApolloLink.from([stateLink, link]),
     cache,
     // Additional options
     ...(ssr ? {
diff --git a/packages/@vue/cli-ui/src/components/FolderExplorer.vue b/packages/@vue/cli-ui/src/components/FolderExplorer.vue
index 137b70cf25..cc1b1d5a8c 100644
--- a/packages/@vue/cli-ui/src/components/FolderExplorer.vue
+++ b/packages/@vue/cli-ui/src/components/FolderExplorer.vue
@@ -26,7 +26,6 @@
 
       <ApolloQuery
         v-else
-        ref="cwd"
         :query="require('@/graphql/cwd.gql')"
         class="current-path"
         v-tooltip="'Edit path'"
@@ -48,6 +47,36 @@
         class="error-icon big"
       />
 
+      <VueButton
+        class="icon-button favorite-button"
+        :icon-left="folderCurrent.favorite ? 'star' : 'star_border'"
+        v-tooltip="'Toggle favorite'"
+        @click="toggleFavorite"
+      />
+
+      <VueDropdown>
+        <VueButton
+          slot="trigger"
+          icon-left="arrow_drop_down"
+          class="icon-button"
+          v-tooltip="'Favorite folders'"
+        />
+
+        <template v-if="foldersFavorite.length">
+          <VueDropdownButton
+            v-for="folder of foldersFavorite"
+            :key="folder.path"
+            :label="folder.path"
+            icon-left="folder"
+            @click="openFolder(folder.path)"
+          />
+        </template>
+
+        <div v-else class="vue-empty">
+          No favorite folders yet.
+        </div>
+      </VueDropdown>
+
       <VueButton
         class="icon-button"
         icon-left="refresh"
@@ -56,29 +85,26 @@
       />
     </div>
 
-    <ApolloQuery
-      :query="require('@/graphql/folderCurrent.gql')"
-      class="folders"
-    >
-      <template slot-scope="{ result: { data } }">
-        <template v-if="data">
-          <FolderExplorerItem
-            v-for="folder of data.folderCurrent.children"
-            :key="folder.name"
-            :folder="folder"
-            @click.native="openFolder(folder.path)"
-          />
-        </template>
+    <div class="folders">
+      <template v-if="folderCurrent.children">
+        <FolderExplorerItem
+          v-for="folder of folderCurrent.children"
+          :key="folder.name"
+          :folder="folder"
+          @click.native="openFolder(folder.path)"
+        />
       </template>
-    </ApolloQuery>
+    </div>
   </div>
 </template>
 
 <script>
 import FolderExplorerItem from './FolderExplorerItem'
-import FOLDER_OPEN from '@/graphql/folderOpen.gql'
-import FOLDER_OPEN_PARENT from '@/graphql/folderOpenParent.gql'
-import FOLDER_CURRENT from '@/graphql/folderCurrent.gql'
+import FOLDER_CURRENT from '../graphql/folderCurrent.gql'
+import FOLDERS_FAVORITE from '../graphql/foldersFavorite.gql'
+import FOLDER_OPEN from '../graphql/folderOpen.gql'
+import FOLDER_OPEN_PARENT from '../graphql/folderOpenParent.gql'
+import FOLDER_SET_FAVORITE from '../graphql/folderSetFavorite.gql'
 
 export default {
   components: {
@@ -90,9 +116,16 @@ export default {
       error: false,
       editingPath: false,
       editedPath: '',
+      folderCurrent: {},
+      foldersFavorite: [],
     }
   },
 
+  apollo: {
+    folderCurrent: FOLDER_CURRENT,
+    foldersFavorite: FOLDERS_FAVORITE
+  },
+
   methods: {
     async openFolder (path) {
       this.editingPath = false
@@ -127,6 +160,30 @@ export default {
       }
     },
 
+    async toggleFavorite () {
+      await this.$apollo.mutate({
+        mutation: FOLDER_SET_FAVORITE,
+        variables: {
+          path: this.folderCurrent.path,
+          favorite: !this.folderCurrent.favorite
+        },
+        update: (store, { data: { folderSetFavorite } }) => {
+          store.writeQuery({ query: FOLDER_CURRENT, data: { folderCurrent: folderSetFavorite } })
+
+          const data = store.readQuery({ query: FOLDERS_FAVORITE })
+          if (folderSetFavorite.favorite) {
+            data.foldersFavorite.push(folderSetFavorite)
+          } else {
+            const index = data.foldersFavorite.findIndex(
+              f => f.path === folderSetFavorite.path
+            )
+            index !== -1 && data.foldersFavorite.splice(index, 1)
+          }
+          store.writeQuery({ query: FOLDERS_FAVORITE, data })
+        }
+      })
+    },
+
     cwdChangedUpdate (previousResult, { subscriptionData }) {
       return {
         cwd: subscriptionData.data.cwd
@@ -134,7 +191,7 @@ export default {
     },
 
     async openPathEdit () {
-      this.editedPath = this.$refs.cwd.result.data.cwd
+      this.editedPath = this.folderCurrent.path
       this.editingPath = true
       await this.$nextTick()
       this.$refs.pathInput.focus()
@@ -145,7 +202,7 @@ export default {
     },
 
     refreshFolder () {
-      this.openFolder(this.$refs.cwd.result.data.cwd)
+      this.openFolder(this.folderCurrent.path)
     }
   }
 }
@@ -156,7 +213,7 @@ export default {
 
 .toolbar
   padding 12px
-  background rgba($vue-color-light-neutral, .2)
+  background $color-light-background
   h-box()
   align-items center
 
@@ -173,6 +230,9 @@ export default {
   > .vue-input
     width 100%
 
+.favorite-button
+  margin-right 4px
+
 .error-icon
   >>> svg
     fill $vue-color-danger
diff --git a/packages/@vue/cli-ui/src/components/ProjectNav.vue b/packages/@vue/cli-ui/src/components/ProjectNav.vue
new file mode 100644
index 0000000000..1f2a3ed700
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/ProjectNav.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="project-nav">
+    <div class="content">
+      <VueGroup
+        v-model="currentRoute"
+        class="vertical small-indicator left-indicator primary"
+        indicator
+      >
+        <VueGroupButton
+          class="flat big icon-button"
+          value="plugins"
+          icon-left="widgets"
+          v-tooltip.right="'Plugins'"
+        />
+        <VueGroupButton
+          class="flat big icon-button"
+          value="config"
+          icon-left="settings_applications"
+          v-tooltip.right="'Configurations'"
+        />
+        <VueGroupButton
+          class="flat big icon-button"
+          value="tasks"
+          icon-left="assignment"
+          v-tooltip.right="'Tasks'"
+        />
+      </VueGroup>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      currentRoute: 'plugins'
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.project-nav
+  background $vue-color-dark
+
+  .content
+    v-box()
+
+    >>> .vue-button
+      button-colors(rgba($vue-color-light, .7), transparent)
+      border-radius 0
+      &:hover
+        button-colors($vue-color-light, lighten($vue-color-dark, 10%))
+        &.selected
+          button-colors($vue-color-primary, lighten($vue-color-dark, 10%))
+</style>
diff --git a/packages/@vue/cli-ui/src/components/ProjectSelectList.vue b/packages/@vue/cli-ui/src/components/ProjectSelectList.vue
new file mode 100644
index 0000000000..be54355b12
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/ProjectSelectList.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="project-select-list">
+    <ApolloQuery
+      :query="require('@/graphql/projects.gql')"
+    >
+      <template slot-scope="{ result: { data } }">
+        <template v-if="data">
+          <div v-if="data.projects.length">
+            TODO
+          </div>
+          <div v-else class="vue-empty">
+            <VueIcon icon="attach_file" class="empty-icon"/>
+            <div>No existing projects</div>
+          </div>
+        </template>
+      </template>
+    </ApolloQuery>
+  </div>
+</template>
diff --git a/packages/@vue/cli-ui/src/components/StatusBar.vue b/packages/@vue/cli-ui/src/components/StatusBar.vue
new file mode 100644
index 0000000000..690951eca9
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/StatusBar.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="status-bar">
+    <div class="section current-project">
+      <span>Current Project:</span>
+    </div>
+
+    <div class="section console-log" v-tooltip="'Console'">
+      <VueIcon icon="subtitles"/>
+      <span>{{ consoleLog }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      consoleLog: ''
+    }
+  }
+}
+</script>
+
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.status-bar
+  h-box()
+  align-items center
+  background $vue-color-light-neutral
+  font-size 12px
+
+  .section
+    h-box()
+    align-items center
+    opacity .5
+    padding 0 8px
+    height 100%
+    cursor default
+
+    &:hover
+      opacity 1
+      background lighten(@background, 40%)
+</style>
diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/folders.js b/packages/@vue/cli-ui/src/graphql-api/connectors/folders.js
index e42f56039c..55f369691a 100644
--- a/packages/@vue/cli-ui/src/graphql-api/connectors/folders.js
+++ b/packages/@vue/cli-ui/src/graphql-api/connectors/folders.js
@@ -22,27 +22,28 @@ function list (base, context) {
   })
 }
 
-function generateFolder (file) {
+function generateFolder (file, context) {
   return {
     name: path.basename(file),
-    path: file
+    path: file,
+    favorite: context.db.get('foldersFavorite').find({ id: file }).size().value()
   }
 }
 
 function getCurrent (args, context) {
   const base = cwd.get()
-  return generateFolder(base)
+  return generateFolder(base, context)
 }
 
 function open (file, context) {
   cwd.set(file, context)
-  return generateFolder(file)
+  return generateFolder(file, context)
 }
 
 function openParent (file, context) {
   const newFile = path.dirname(file)
   cwd.set(newFile, context)
-  return generateFolder(newFile)
+  return generateFolder(newFile, context)
 }
 
 function isPackage (file, context) {
@@ -56,11 +57,29 @@ function isVueProject (file, context) {
   return contents.includes('@vue/cli-service')
 }
 
+function listFavorite (context) {
+  return context.db.get('foldersFavorite').value().map(
+    file => generateFolder(file.id, context)
+  )
+}
+
+function setFavorite ({ file, favorite }, context) {
+  const collection = context.db.get('foldersFavorite')
+  if (favorite) {
+    collection.push({ id: file }).write()
+  } else {
+    collection.remove({ id: file }).write()
+  }
+  return generateFolder(file, context)
+}
+
 module.exports = {
   getCurrent,
   list,
   open,
   openParent,
   isPackage,
-  isVueProject
+  isVueProject,
+  listFavorite,
+  setFavorite
 }
diff --git a/packages/@vue/cli-ui/src/graphql-api/resolvers.js b/packages/@vue/cli-ui/src/graphql-api/resolvers.js
index 083564eda5..41e840f5c3 100644
--- a/packages/@vue/cli-ui/src/graphql-api/resolvers.js
+++ b/packages/@vue/cli-ui/src/graphql-api/resolvers.js
@@ -13,13 +13,18 @@ module.exports = {
   Query: {
     cwd: () => cwd.get(),
     folderCurrent: (root, args, context) => folders.getCurrent(args, context),
+    foldersFavorite: (root, args, context) => folders.listFavorite(context),
     projects: (root, args, context) => projects.list(context),
     projectCurrent: (root, args, context) => projects.getCurrent(context)
   },
 
   Mutation: {
     folderOpen: (root, { path }, context) => folders.open(path, context),
-    folderOpenParent: (root, args, context) => folders.openParent(cwd.get(), context)
+    folderOpenParent: (root, args, context) => folders.openParent(cwd.get(), context),
+    folderSetFavorite: (root, args, context) => folders.setFavorite({
+      file: args.path,
+      favorite: args.favorite
+    }, context)
   },
 
   Subscription: {
diff --git a/packages/@vue/cli-ui/src/graphql-api/type-defs.js b/packages/@vue/cli-ui/src/graphql-api/type-defs.js
index 5333389c26..31adbcc7aa 100644
--- a/packages/@vue/cli-ui/src/graphql-api/type-defs.js
+++ b/packages/@vue/cli-ui/src/graphql-api/type-defs.js
@@ -21,6 +21,7 @@ type Folder {
   path: String!
   isPackage: Boolean
   isVueProject: Boolean
+  favorite: Boolean
   children: [Folder]
 }
 
@@ -114,6 +115,7 @@ input PromptInput {
 type Query {
   cwd: String!
   folderCurrent: Folder
+  foldersFavorite: [Folder]
   projects: [Project]
   projectCurrent: Project
   pluginSearch (input: PluginSearchInput!): [Plugin]
@@ -122,6 +124,7 @@ type Query {
 type Mutation {
   folderOpen (path: String!): Folder
   folderOpenParent: Folder
+  folderSetFavorite (path: String!, favorite: Boolean!): Folder
   projectCreate (input: ProjectCreateInput!): Project!
   projectImport (input: ProjectImportInput!): Project!
   projectOpen (id: ID!): Project!
diff --git a/packages/@vue/cli-ui/src/graphql-api/utils/db.js b/packages/@vue/cli-ui/src/graphql-api/utils/db.js
index 565aa236be..2f2b6954cb 100644
--- a/packages/@vue/cli-ui/src/graphql-api/utils/db.js
+++ b/packages/@vue/cli-ui/src/graphql-api/utils/db.js
@@ -9,7 +9,8 @@ const db = new Lowdb(new FileSync(resolve(__dirname, '../../../live/db.json')))
 
 // Seed an empty DB
 db.defaults({
-  projects: []
+  projects: [],
+  foldersFavorite: []
 }).write()
 
 module.exports = {
diff --git a/packages/@vue/cli-ui/src/graphql/cwd.gql b/packages/@vue/cli-ui/src/graphql/cwd.gql
index 0f307cf123..5411d95335 100644
--- a/packages/@vue/cli-ui/src/graphql/cwd.gql
+++ b/packages/@vue/cli-ui/src/graphql/cwd.gql
@@ -1,3 +1,3 @@
-{
+query cwd {
   cwd
 }
diff --git a/packages/@vue/cli-ui/src/graphql/cwdChanged.gql b/packages/@vue/cli-ui/src/graphql/cwdChanged.gql
index d3dfb9d83a..9fa6178e96 100644
--- a/packages/@vue/cli-ui/src/graphql/cwdChanged.gql
+++ b/packages/@vue/cli-ui/src/graphql/cwdChanged.gql
@@ -1,3 +1,3 @@
-subscription {
+subscription cwdChanged {
   cwd: cwdChanged
 }
diff --git a/packages/@vue/cli-ui/src/graphql/featureFragment.gql b/packages/@vue/cli-ui/src/graphql/featureFragment.gql
new file mode 100644
index 0000000000..7ea1a9e9db
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/featureFragment.gql
@@ -0,0 +1,7 @@
+fragment feature on Feature {
+  id
+  label
+  description
+  link
+  enabled
+}
diff --git a/packages/@vue/cli-ui/src/graphql/folderCurrent.gql b/packages/@vue/cli-ui/src/graphql/folderCurrent.gql
index de603cb7f8..e18533371f 100644
--- a/packages/@vue/cli-ui/src/graphql/folderCurrent.gql
+++ b/packages/@vue/cli-ui/src/graphql/folderCurrent.gql
@@ -1,6 +1,6 @@
 #import "./folderCurrentFragment.gql"
 
-{
+query folderCurrent {
   folderCurrent {
     ...folderCurrent
   }
diff --git a/packages/@vue/cli-ui/src/graphql/folderCurrentFragment.gql b/packages/@vue/cli-ui/src/graphql/folderCurrentFragment.gql
index 08f6dd8c94..a63ddfe137 100644
--- a/packages/@vue/cli-ui/src/graphql/folderCurrentFragment.gql
+++ b/packages/@vue/cli-ui/src/graphql/folderCurrentFragment.gql
@@ -1,6 +1,9 @@
 fragment folderCurrent on Folder {
   name
   path
+  favorite
+  isPackage
+  isVueProject
   children {
     name
     path
diff --git a/packages/@vue/cli-ui/src/graphql/folderOpen.gql b/packages/@vue/cli-ui/src/graphql/folderOpen.gql
index 77b75e354e..cc92466c66 100644
--- a/packages/@vue/cli-ui/src/graphql/folderOpen.gql
+++ b/packages/@vue/cli-ui/src/graphql/folderOpen.gql
@@ -1,6 +1,6 @@
 #import "./folderCurrentFragment.gql"
 
-mutation ($path: String!) {
+mutation folderOpen ($path: String!) {
   folderOpen(path: $path) {
     ...folderCurrent
   }
diff --git a/packages/@vue/cli-ui/src/graphql/folderOpenParent.gql b/packages/@vue/cli-ui/src/graphql/folderOpenParent.gql
index 7167d562ba..dd2396ccf0 100644
--- a/packages/@vue/cli-ui/src/graphql/folderOpenParent.gql
+++ b/packages/@vue/cli-ui/src/graphql/folderOpenParent.gql
@@ -1,6 +1,6 @@
 #import "./folderCurrentFragment.gql"
 
-mutation {
+mutation folderOpenParent {
   folderOpenParent {
     ...folderCurrent
   }
diff --git a/packages/@vue/cli-ui/src/graphql/folderSetFavorite.gql b/packages/@vue/cli-ui/src/graphql/folderSetFavorite.gql
new file mode 100644
index 0000000000..8b41025f1d
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/folderSetFavorite.gql
@@ -0,0 +1,7 @@
+#import "./folderCurrentFragment.gql"
+
+mutation folderSetFavorite ($path: String!, $favorite: Boolean!) {
+  folderSetFavorite (path: $path, favorite: $favorite) {
+    ...folderCurrent
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/foldersFavorite.gql b/packages/@vue/cli-ui/src/graphql/foldersFavorite.gql
new file mode 100644
index 0000000000..238cb28bd4
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/foldersFavorite.gql
@@ -0,0 +1,5 @@
+query foldersFavorite {
+  foldersFavorite {
+    path
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/pluginFragment.gql b/packages/@vue/cli-ui/src/graphql/pluginFragment.gql
new file mode 100644
index 0000000000..93583ee72a
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/pluginFragment.gql
@@ -0,0 +1,11 @@
+fragment plugin on Plugin {
+  id
+  version {
+    current
+    latest
+  }
+  official
+  installed
+  website
+  description
+}
diff --git a/packages/@vue/cli-ui/src/graphql/projectCurrent.gql b/packages/@vue/cli-ui/src/graphql/projectCurrent.gql
new file mode 100644
index 0000000000..42b7d13ba9
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/projectCurrent.gql
@@ -0,0 +1,7 @@
+#import "./projectCurrentFragment.gql"
+
+query projectCurrent {
+  projectCurrent {
+    ...projectCurrent
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/projectCurrentFragment.gql b/packages/@vue/cli-ui/src/graphql/projectCurrentFragment.gql
new file mode 100644
index 0000000000..91e4c67177
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/projectCurrentFragment.gql
@@ -0,0 +1,15 @@
+#import "./featureFragment.gql"
+#import "./pluginFragment.gql"
+
+fragment projectCurrent on Project {
+  id
+  name
+  path
+  favorite
+  features {
+    ...feature
+  }
+  plugins {
+    ...plugin
+  }
+}
diff --git a/packages/@vue/cli-ui/src/graphql/projects.gql b/packages/@vue/cli-ui/src/graphql/projects.gql
new file mode 100644
index 0000000000..8e04ee88a1
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/projects.gql
@@ -0,0 +1,8 @@
+query projects {
+  projects {
+    id
+    name
+    path
+    favorite
+  }
+}
diff --git a/packages/@vue/cli-ui/src/main.js b/packages/@vue/cli-ui/src/main.js
index c7e09400ee..de607c3ec4 100644
--- a/packages/@vue/cli-ui/src/main.js
+++ b/packages/@vue/cli-ui/src/main.js
@@ -1,7 +1,6 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
-import store from './store'
 import { apolloProvider } from './vue-apollo'
 import VueUi from '@vue/ui'
 
@@ -9,9 +8,14 @@ Vue.use(VueUi)
 
 Vue.config.productionTip = false
 
-new Vue({
+const app = new Vue({
   provide: apolloProvider.provide(),
   router,
-  store,
   render: h => h(App)
-}).$mount('#app')
+})
+
+async function start () {
+  app.$mount('#app')
+}
+
+start()
diff --git a/packages/@vue/cli-ui/src/router.js b/packages/@vue/cli-ui/src/router.js
index 9e03a620e6..a5ab98a27b 100644
--- a/packages/@vue/cli-ui/src/router.js
+++ b/packages/@vue/cli-ui/src/router.js
@@ -1,16 +1,30 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+import { apolloClient } from './vue-apollo'
+
 import Home from './views/Home.vue'
+import ProjectSelect from './views/ProjectSelect.vue'
 import About from './views/About.vue'
 
+import PROJECT_CURRENT from './graphql/projectCurrent.gql'
+
 Vue.use(Router)
 
-export default new Router({
+const router = new Router({
+  mode: 'history',
   routes: [
     {
       path: '/',
       name: 'home',
-      component: Home
+      component: Home,
+      meta: {
+        needProject: true
+      }
+    },
+    {
+      path: '/project/select',
+      name: 'project-select',
+      component: ProjectSelect
     },
     {
       path: '/about',
@@ -19,3 +33,19 @@ export default new Router({
     }
   ]
 })
+
+router.beforeEach(async (to, from, next) => {
+  if (to.matched.some(m => m.meta.needProject)) {
+    const result = await apolloClient.query({
+      query: PROJECT_CURRENT,
+      fetchPolicy: 'network-only'
+    })
+    if (!result.data.projectCurrent) {
+      next({ name: 'project-select' })
+      return
+    }
+  }
+  next()
+})
+
+export default router
diff --git a/packages/@vue/cli-ui/src/state/defaults.js b/packages/@vue/cli-ui/src/state/defaults.js
new file mode 100644
index 0000000000..03048022aa
--- /dev/null
+++ b/packages/@vue/cli-ui/src/state/defaults.js
@@ -0,0 +1,3 @@
+export default {
+
+}
diff --git a/packages/@vue/cli-ui/src/state/resolvers.js b/packages/@vue/cli-ui/src/state/resolvers.js
new file mode 100644
index 0000000000..03048022aa
--- /dev/null
+++ b/packages/@vue/cli-ui/src/state/resolvers.js
@@ -0,0 +1,3 @@
+export default {
+
+}
diff --git a/packages/@vue/cli-ui/src/store.js b/packages/@vue/cli-ui/src/store.js
deleted file mode 100644
index 3c7424edc4..0000000000
--- a/packages/@vue/cli-ui/src/store.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-Vue.use(Vuex)
-
-export default new Vuex.Store({
-  state: {
-
-  },
-  mutations: {
-
-  },
-  actions: {
-
-  }
-})
diff --git a/packages/@vue/cli-ui/src/style/colors.styl b/packages/@vue/cli-ui/src/style/colors.styl
new file mode 100644
index 0000000000..f1ee08c99a
--- /dev/null
+++ b/packages/@vue/cli-ui/src/style/colors.styl
@@ -0,0 +1 @@
+$color-light-background = lighten($vue-color-light-neutral, 80%)
diff --git a/packages/@vue/cli-ui/src/style/imports.styl b/packages/@vue/cli-ui/src/style/imports.styl
index e0ef9afc72..a97d1bf9af 100644
--- a/packages/@vue/cli-ui/src/style/imports.styl
+++ b/packages/@vue/cli-ui/src/style/imports.styl
@@ -1 +1,2 @@
 @import "~@vue/ui/src/style/imports"
+@import "colors"
diff --git a/packages/@vue/cli-ui/src/style/main.styl b/packages/@vue/cli-ui/src/style/main.styl
index 9859164b83..b8142c534b 100644
--- a/packages/@vue/cli-ui/src/style/main.styl
+++ b/packages/@vue/cli-ui/src/style/main.styl
@@ -5,3 +5,9 @@ body,
 #app,
 .page
   height 100%
+
+.empty-icon
+  display block
+  margin 24px auto
+  width 48px
+  height @width
diff --git a/packages/@vue/cli-ui/src/views/Home.vue b/packages/@vue/cli-ui/src/views/Home.vue
index 25079a6b00..03a759858b 100644
--- a/packages/@vue/cli-ui/src/views/Home.vue
+++ b/packages/@vue/cli-ui/src/views/Home.vue
@@ -1,22 +1,44 @@
 <template>
   <div class="home page">
-    <FolderExplorer/>
+    <ProjectNav/>
+
+    <div class="content">
+      <router-view/>
+    </div>
+
+    <StatusBar/>
   </div>
 </template>
 
 <script>
-import FolderExplorer from '../components/FolderExplorer'
+import ProjectNav from '../components/ProjectNav'
+import StatusBar from '../components/StatusBar'
 
 export default {
   name: 'home',
 
   components: {
-    FolderExplorer
+    ProjectNav,
+    StatusBar
   }
 }
 </script>
 
 <style lang="stylus" scoped>
-.folder-explorer
-  height 100%
+@import "~@/style/imports"
+
+.home
+  display grid
+  grid-template-columns 46px 1fr
+  grid-template-rows auto 28px
+  grid-template-areas "side-left content" "footer footer"
+
+.project-nav
+  grid-area side-left
+
+.content
+  grid-area content
+
+.status-bar
+  grid-area footer
 </style>
diff --git a/packages/@vue/cli-ui/src/views/ProjectSelect.vue b/packages/@vue/cli-ui/src/views/ProjectSelect.vue
new file mode 100644
index 0000000000..4e8b219718
--- /dev/null
+++ b/packages/@vue/cli-ui/src/views/ProjectSelect.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="project-select">
+    <VueTabs class="main-tabs" group-class="accent">
+      <VueTab
+        id="existing"
+        label="Projects"
+        icon="storage"
+      >
+        <ProjectSelectList/>
+      </VueTab>
+
+      <VueTab
+        id="create"
+        label="Create"
+        icon="add_box"
+      >
+        <FolderExplorer/>
+
+        <div class="actions">
+          <VueButton
+            icon-left="add"
+            label="Create new project here"
+            class="big primary"
+          />
+        </div>
+      </VueTab>
+
+      <VueTab
+        id="import"
+        label="Import"
+        icon="unarchive"
+      >
+        <FolderExplorer/>
+
+        <div class="actions">
+          <VueButton
+            icon-left="unarchive"
+            label="Import this folder"
+            class="big primary"
+            :disabled="!folderCurrent.isVueProject"
+          />
+        </div>
+      </VueTab>
+    </VueTabs>
+  </div>
+</template>
+
+<script>
+import ProjectSelectList from '../components/ProjectSelectList'
+import FolderExplorer from '../components/FolderExplorer'
+
+import FOLDER_CURRENT from '../graphql/folderCurrent.gql'
+
+export default {
+  components: {
+    ProjectSelectList,
+    FolderExplorer
+  },
+
+  data () {
+    return {
+      folderCurrent: {}
+    }
+  },
+
+  apollo: {
+    folderCurrent: FOLDER_CURRENT
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.main-tabs
+  height 100%
+  >>> .tabs
+    background $vue-color-light-neutral
+    .vue-icon
+      width 24px
+      height @width
+
+  >>>.tabs-content
+    height 0
+
+.vue-tab,
+>>> .vue-tab-content,
+.folder-explorer
+  height 100%
+
+>>> .vue-tab-content
+  overflow-y auto
+  v-box()
+
+.folder-explorer
+  flex 100% 1 1
+
+.actions
+  padding 12px
+  background $color-light-background
+  h-box()
+  box-center()
+
+.project-select
+  height 100%
+</style>
diff --git a/yarn.lock b/yarn.lock
index 66a7085aef..4e9178a931 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -696,8 +696,8 @@
     "@types/sinon" "*"
 
 "@types/sinon@*":
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/@types/sinon/-/sinon-4.1.4.tgz#2e334094d680d488c073524938bf734f2639a378"
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/@types/sinon/-/sinon-4.3.0.tgz#7f53915994a00ccea24f4e0c24709822ed11a3b1"
 
 "@types/sinon@4.0.0":
   version "4.0.0"
@@ -722,8 +722,8 @@
     lodash "^4.17.4"
 
 "@vue/ui@^0.1.6":
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/@vue/ui/-/ui-0.1.6.tgz#5f10a89c655749dd950e670032dd443c53c5f8e1"
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/@vue/ui/-/ui-0.1.7.tgz#33445921e6bdcaad92b83d3d27b06b0457319229"
   dependencies:
     focus-visible "^4.1.0"
     material-design-icons "^3.0.1"
@@ -754,10 +754,10 @@ absolute@0.0.1:
   resolved "https://registry.yarnpkg.com/absolute/-/absolute-0.0.1.tgz#c22822f87e1c939f579887504d9c109c4173829d"
 
 accepts@~1.3.4:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.4.tgz#86246758c7dd6d21a6474ff084a4740ec05eb21f"
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.5.tgz#eb777df6011723a3b14e8a72c0805c8e86746bd2"
   dependencies:
-    mime-types "~2.1.16"
+    mime-types "~2.1.18"
     negotiator "0.6.1"
 
 acorn-dynamic-import@^2.0.0:
@@ -786,7 +786,7 @@ acorn@^4.0.3:
   version "4.0.13"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
 
-acorn@^5.0.0, acorn@^5.3.0, acorn@^5.4.0:
+acorn@^5.0.0, acorn@^5.3.0, acorn@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.5.0.tgz#1abb587fbf051f94e3de20e6b26ef910b1828298"
 
@@ -811,7 +811,11 @@ agent-base@^4.1.0:
   dependencies:
     es6-promisify "^5.0.0"
 
-ajv-keywords@^3.0.0, ajv-keywords@^3.1.0:
+ajv-keywords@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
+
+ajv-keywords@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.1.0.tgz#ac2b27939c543e95d2c06e7f7f5c27be4aa543be"
 
@@ -822,7 +826,7 @@ ajv@^4.9.1:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
 
-ajv@^5.0.0, ajv@^5.1.0, ajv@^5.3.0:
+ajv@^5.0.0, ajv@^5.1.0, ajv@^5.2.3, ajv@^5.3.0:
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
   dependencies:
@@ -831,9 +835,9 @@ ajv@^5.0.0, ajv@^5.1.0, ajv@^5.3.0:
     fast-json-stable-stringify "^2.0.0"
     json-schema-traverse "^0.3.0"
 
-ajv@^6.0.1, ajv@^6.1.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.2.0.tgz#afac295bbaa0152449e522742e4547c1ae9328d2"
+ajv@^6.1.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.2.1.tgz#28a6abc493a2abe0fb4c8507acaedb43fa550671"
   dependencies:
     fast-deep-equal "^1.0.0"
     fast-json-stable-stringify "^2.0.0"
@@ -891,9 +895,9 @@ ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
 
-ansi-styles@^3.1.0, ansi-styles@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.0.tgz#c159b8d5be0f9e5a6f346dab94f16ce022161b88"
+ansi-styles@^3.1.0, ansi-styles@^3.2.0, ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
   dependencies:
     color-convert "^1.9.0"
 
@@ -1008,6 +1012,13 @@ apollo-link-persisted-queries@^0.1.0:
     apollo-link "^1.0.3"
     hash.js "^1.1.3"
 
+apollo-link-state@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/apollo-link-state/-/apollo-link-state-0.4.0.tgz#916dab5fa4ecc18d99dd9664b1d22476f4b280a6"
+  dependencies:
+    apollo-utilities "^1.0.6"
+    graphql-anywhere "^4.1.0-alpha.0"
+
 apollo-link-ws@^1.0.0:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/apollo-link-ws/-/apollo-link-ws-1.0.7.tgz#6cc3903cbfbbefe213ea9fc8121f5fed3cef1823"
@@ -1069,7 +1080,7 @@ apollo-upload-server@^4.0.0-alpha.1:
     busboy "^0.2.14"
     object-path "^0.11.4"
 
-apollo-utilities@^1.0.0, apollo-utilities@^1.0.1, apollo-utilities@^1.0.8:
+apollo-utilities@^1.0.0, apollo-utilities@^1.0.1, apollo-utilities@^1.0.6, apollo-utilities@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/apollo-utilities/-/apollo-utilities-1.0.8.tgz#74d797d38953d2ba35e16f880326e2abcbc8b016"
 
@@ -1299,14 +1310,14 @@ autoprefixer@^6.3.1:
     postcss-value-parser "^3.2.3"
 
 autoprefixer@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-8.0.0.tgz#c19e480f061013127c373df0b01cf46919943f74"
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-8.1.0.tgz#374cf35be1c0e8fce97408d876f95f66f5cb4641"
   dependencies:
-    browserslist "^3.0.0"
-    caniuse-lite "^1.0.30000808"
+    browserslist "^3.1.1"
+    caniuse-lite "^1.0.30000810"
     normalize-range "^0.1.2"
     num2fraction "^1.2.2"
-    postcss "^6.0.17"
+    postcss "^6.0.19"
     postcss-value-parser "^3.2.3"
 
 aws-lambda@^0.1.2:
@@ -1815,7 +1826,7 @@ browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
     caniuse-db "^1.0.30000639"
     electron-to-chromium "^1.2.7"
 
-browserslist@^3.0.0:
+browserslist@^3.0.0, browserslist@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-3.1.1.tgz#d380fc048bc3a33e60fb87dc135110ebaaa6320a"
   dependencies:
@@ -1990,12 +2001,12 @@ caniuse-api@^1.5.2:
     lodash.uniq "^4.5.0"
 
 caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
-  version "1.0.30000810"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000810.tgz#bd25830c41efab64339a2e381f49677343c84509"
+  version "1.0.30000812"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000812.tgz#29c28dd6927ee43e8c2ab648e5236ac916c97d69"
 
-caniuse-lite@^1.0.30000808, caniuse-lite@^1.0.30000809:
-  version "1.0.30000810"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000810.tgz#47585fffce0e9f3593a6feea4673b945424351d9"
+caniuse-lite@^1.0.30000809, caniuse-lite@^1.0.30000810:
+  version "1.0.30000812"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000812.tgz#d173b686b49bc941fa18ff2e7e533048e20ed92c"
 
 capture-stack-trace@^1.0.0:
   version "1.0.0"
@@ -2062,12 +2073,12 @@ chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
     supports-color "^2.0.0"
 
 chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.1.tgz#523fe2678aec7b04e8041909292fe8b17059b796"
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.2.tgz#250dc96b07491bfd601e648d66ddf5f60c7a5c65"
   dependencies:
-    ansi-styles "^3.2.0"
+    ansi-styles "^3.2.1"
     escape-string-regexp "^1.0.5"
-    supports-color "^5.2.0"
+    supports-color "^5.3.0"
 
 chardet@^0.4.0:
   version "0.4.2"
@@ -2423,7 +2434,7 @@ concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
 
-concat-stream@1.6.0, concat-stream@^1.4.10, concat-stream@^1.5.0, concat-stream@^1.6.0:
+concat-stream@1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
   dependencies:
@@ -2431,6 +2442,14 @@ concat-stream@1.6.0, concat-stream@^1.4.10, concat-stream@^1.5.0, concat-stream@
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
+concat-stream@^1.4.10, concat-stream@^1.5.0, concat-stream@^1.6.0:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.1.tgz#261b8f518301f1d834e36342b9fea095d2620a26"
+  dependencies:
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
+
 condense-newlines@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/condense-newlines/-/condense-newlines-0.2.1.tgz#3de985553139475d32502c83b02f60684d24c55f"
@@ -2511,11 +2530,11 @@ conventional-changelog-atom@^0.2.4:
     q "^1.5.1"
 
 conventional-changelog-cli@^1.3.13:
-  version "1.3.15"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-cli/-/conventional-changelog-cli-1.3.15.tgz#cd7f0e64473f1cecee902ee5ee00548ea91bcc9e"
+  version "1.3.16"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-cli/-/conventional-changelog-cli-1.3.16.tgz#69acdcc4b68b4d123c5945868dffe394960cea9d"
   dependencies:
     add-stream "^1.0.0"
-    conventional-changelog "^1.1.17"
+    conventional-changelog "^1.1.18"
     lodash "^4.2.1"
     meow "^4.0.0"
     tempfile "^1.1.1"
@@ -2550,9 +2569,9 @@ conventional-changelog-ember@^0.3.6:
   dependencies:
     q "^1.5.1"
 
-conventional-changelog-eslint@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-eslint/-/conventional-changelog-eslint-1.0.4.tgz#333456d1884d96f3a49cc0984a745095e9d56288"
+conventional-changelog-eslint@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-eslint/-/conventional-changelog-eslint-1.0.5.tgz#8bae05ebbf574e6506caf7b37dc51ca21b74d220"
   dependencies:
     q "^1.5.1"
 
@@ -2600,16 +2619,16 @@ conventional-changelog-writer@^3.0.4:
     split "^1.0.0"
     through2 "^2.0.0"
 
-conventional-changelog@^1.1.17:
-  version "1.1.17"
-  resolved "https://registry.yarnpkg.com/conventional-changelog/-/conventional-changelog-1.1.17.tgz#9019503d51328d8b33b0be6d425ab7f065918332"
+conventional-changelog@^1.1.18:
+  version "1.1.18"
+  resolved "https://registry.yarnpkg.com/conventional-changelog/-/conventional-changelog-1.1.18.tgz#ffe28798e4ddef5f6e2f74398e8248bcb233360b"
   dependencies:
     conventional-changelog-angular "^1.6.6"
     conventional-changelog-atom "^0.2.4"
     conventional-changelog-codemirror "^0.3.4"
     conventional-changelog-core "^2.0.5"
     conventional-changelog-ember "^0.3.6"
-    conventional-changelog-eslint "^1.0.4"
+    conventional-changelog-eslint "^1.0.5"
     conventional-changelog-express "^0.3.4"
     conventional-changelog-jquery "^0.1.0"
     conventional-changelog-jscs "^0.1.0"
@@ -2675,14 +2694,14 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
 
 copy-webpack-plugin@^4.4.2:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.4.2.tgz#c92bcd7df4d5e42c51398cc36b23820d0d10446a"
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.5.0.tgz#9cb012163317666ea47479d2a8c57daca3557da5"
   dependencies:
     cacache "^10.0.1"
     find-cache-dir "^1.0.0"
     globby "^7.1.1"
     is-glob "^4.0.0"
-    loader-utils "^0.2.15"
+    loader-utils "^1.1.0"
     minimatch "^3.0.4"
     p-limit "^1.0.0"
     serialize-javascript "^1.4.0"
@@ -2949,8 +2968,8 @@ cyclist@~0.2.2:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
 
 cypress@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-2.0.4.tgz#1d19eddc4bf5eb235a6327c60dd2deac2aad6ccd"
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-2.1.0.tgz#a8bd7d9b89c38a1e380db83b57d9bba0dbb95ba4"
   dependencies:
     "@cypress/listr-verbose-renderer" "0.4.1"
     "@cypress/xvfb" "1.1.3"
@@ -3286,8 +3305,8 @@ diff@3.3.1:
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.3.1.tgz#aa8567a6eed03c531fc89d3f711cd0e5259dec75"
 
 diff@^3.2.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-3.4.0.tgz#b1d85507daf3964828de54b37d0d73ba67dda56c"
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
 
 diffie-hellman@^5.0.0:
   version "5.0.2"
@@ -3442,8 +3461,8 @@ duplexer@^0.1.1, duplexer@~0.1.1:
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
 
 duplexify@^3.4.2, duplexify@^3.5.3:
-  version "3.5.3"
-  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.5.3.tgz#8b5818800df92fd0125b27ab896491912858243e"
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.5.4.tgz#4bb46c1796eabebeec4ca9a2e66b808cb7a3d8b4"
   dependencies:
     end-of-stream "^1.0.0"
     inherits "^2.0.1"
@@ -3809,8 +3828,8 @@ eslint-visitor-keys@^1.0.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
 
 eslint@^4.16.0, eslint@^4.18.1:
-  version "4.18.1"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.18.1.tgz#b9138440cb1e98b2f44a0d578c6ecf8eae6150b0"
+  version "4.18.2"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.18.2.tgz#0f81267ad1012e7d2051e186a9004cc2267b8d45"
   dependencies:
     ajv "^5.3.0"
     babel-code-frame "^6.22.0"
@@ -3847,14 +3866,14 @@ eslint@^4.16.0, eslint@^4.18.1:
     semver "^5.3.0"
     strip-ansi "^4.0.0"
     strip-json-comments "~2.0.1"
-    table "^4.0.1"
+    table "4.0.2"
     text-table "~0.2.0"
 
 espree@^3.5.2:
-  version "3.5.3"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.3.tgz#931e0af64e7fbbed26b050a29daad1fc64799fa6"
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.4.tgz#b0f447187c8a8bed944b815a660bddf5deb5d1a7"
   dependencies:
-    acorn "^5.4.0"
+    acorn "^5.5.0"
     acorn-jsx "^3.0.0"
 
 esprima@3.x.x, esprima@^3.1.3:
@@ -4218,8 +4237,8 @@ file-entry-cache@^2.0.0:
     object-assign "^4.0.1"
 
 file-loader@^1.1.10:
-  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.10.tgz#77e97dfeab13da64c7085ab3e3887e29ae588aea"
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.11.tgz#6fe886449b0f2a936e43cabaac0cdbfb369506f8"
   dependencies:
     loader-utils "^1.0.2"
     schema-utils "^0.4.5"
@@ -4807,7 +4826,7 @@ graceful-fs@^4.1.10, graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.3
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
 
-graphql-anywhere@^4.1.5:
+graphql-anywhere@^4.1.0-alpha.0, graphql-anywhere@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/graphql-anywhere/-/graphql-anywhere-4.1.5.tgz#552ccd27b79a13a899022e20f658a2c2cb75e251"
   dependencies:
@@ -5133,8 +5152,8 @@ html-entities@^1.2.0:
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
 
 html-minifier@^3.2.3:
-  version "3.5.9"
-  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.9.tgz#74424014b872598d4bb0e20ac420926ec61024b6"
+  version "3.5.10"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.10.tgz#8522c772c388db81aa5c26f62033302d906ea1c7"
   dependencies:
     camel-case "3.0.x"
     clean-css "4.1.x"
@@ -5150,8 +5169,8 @@ html-tags@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b"
 
 html-webpack-plugin@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-3.0.0.tgz#243b1f4e59ea2e389ebd14f8af140206c719f8a0"
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-3.0.4.tgz#498c10f40f99a339fbf3d87c5a80acf8cbea8e9b"
   dependencies:
     html-minifier "^3.2.3"
     loader-utils "^0.2.16"
@@ -5264,8 +5283,8 @@ https-proxy-agent@1:
     extend "3"
 
 https-proxy-agent@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.1.1.tgz#a7ce4382a1ba8266ee848578778122d491260fd9"
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.2.0.tgz#7fbba856be8cd677986f42ebd3664f6317257887"
   dependencies:
     agent-base "^4.1.0"
     debug "^3.1.0"
@@ -6626,7 +6645,7 @@ loader-runner@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2"
 
-loader-utils@^0.2.15, loader-utils@^0.2.16:
+loader-utils@^0.2.16:
   version "0.2.17"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
   dependencies:
@@ -7156,7 +7175,7 @@ miller-rabin@^4.0.0:
   version "1.33.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.33.0.tgz#a3492050a5cb9b63450541e39d9788d2272783db"
 
-mime-types@^2.1.12, mime-types@~2.1.16, mime-types@~2.1.17, mime-types@~2.1.18, mime-types@~2.1.7:
+mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.18, mime-types@~2.1.7:
   version "2.1.18"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.18.tgz#6f323f60a83d11146f831ff11fd66e2fe5503bb8"
   dependencies:
@@ -7312,8 +7331,8 @@ modify-values@^1.0.0:
   resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.0.tgz#e2b6cdeb9ce19f99317a53722f3dbf5df5eaaab2"
 
 moment@^2.6.0:
-  version "2.20.1"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.20.1.tgz#d6eb1a46cbcc14a2b2f9434112c1ff8907f313fd"
+  version "2.21.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.21.0.tgz#2a114b51d2a6ec9e6d83cf803f838a878d8a023a"
 
 move-concurrently@^1.0.1:
   version "1.0.1"
@@ -7402,8 +7421,8 @@ netmask@~1.0.4:
   resolved "https://registry.yarnpkg.com/netmask/-/netmask-1.0.6.tgz#20297e89d86f6f6400f250d9f4f6b4c1945fcd35"
 
 nightwatch@^0.9.19:
-  version "0.9.19"
-  resolved "https://registry.yarnpkg.com/nightwatch/-/nightwatch-0.9.19.tgz#4bd9757273d30b845f04847a98b71be9bb7c4b3b"
+  version "0.9.20"
+  resolved "https://registry.yarnpkg.com/nightwatch/-/nightwatch-0.9.20.tgz#156d17cd058cbc31f43ab18e915f7ec297fb53e0"
   dependencies:
     chai-nightwatch "~0.1.x"
     ejs "2.5.7"
@@ -8352,7 +8371,7 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
-postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.17, postcss@^6.0.8:
+postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.19, postcss@^6.0.8:
   version "6.0.19"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.19.tgz#76a78386f670b9d9494a655bf23ac012effd1555"
   dependencies:
@@ -8373,8 +8392,8 @@ preserve@^0.2.0:
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
 prettier@^1.11.0, prettier@^1.7.0:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.11.0.tgz#c024f70cab158c993f50fc0c25ffe738cb8b0f85"
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.11.1.tgz#61e43fc4cd44e68f2b0dfc2c38cd4bb0fccdcc75"
 
 pretty-bytes@^4.0.2:
   version "4.0.2"
@@ -8695,8 +8714,8 @@ read-pkg@^3.0.0:
     path-type "^3.0.0"
 
 "readable-stream@1 || 2", readable-stream@2, readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.2.9, readable-stream@^2.3.3:
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.4.tgz#c946c3f47fa7d8eabc0b6150f4a12f69a4574071"
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.5.tgz#b4f85003a938cbb6ecbce2a124fb1012bd1a838d"
   dependencies:
     core-util-is "~1.0.0"
     inherits "~2.0.3"
@@ -9165,8 +9184,8 @@ select-hose@^2.0.0:
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
 
 selenium-server@^3.9.1:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/selenium-server/-/selenium-server-3.9.1.tgz#e582eee011aed9fca5d71735ea18d0d23a30bb56"
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/selenium-server/-/selenium-server-3.10.0.tgz#b7c78be7785f328ae99f7dc66162bfd9c593964c"
 
 selfsigned@^1.9.1:
   version "1.10.2"
@@ -9874,9 +9893,9 @@ supports-color@^4.0.0, supports-color@^4.2.1:
   dependencies:
     has-flag "^2.0.0"
 
-supports-color@^5.1.0, supports-color@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.2.0.tgz#b0d5333b1184dd3666cbe5aa0b45c5ac7ac17a4a"
+supports-color@^5.1.0, supports-color@^5.2.0, supports-color@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.3.0.tgz#5b24ac15db80fa927cf5227a4a33fd3c4c7676c0"
   dependencies:
     has-flag "^3.0.0"
 
@@ -9912,12 +9931,12 @@ symbol-tree@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
 
-table@^4.0.1:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/table/-/table-4.0.3.tgz#00b5e2b602f1794b9acaf9ca908a76386a7813bc"
+table@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/table/-/table-4.0.2.tgz#a33447375391e766ad34d3486e6e2aedc84d2e36"
   dependencies:
-    ajv "^6.0.1"
-    ajv-keywords "^3.0.0"
+    ajv "^5.2.3"
+    ajv-keywords "^2.1.0"
     chalk "^2.1.0"
     lodash "^4.17.4"
     slice-ansi "1.0.0"
@@ -10177,8 +10196,8 @@ trim-right@^1.0.1:
   resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
 
 ts-jest@^22.0.1:
-  version "22.4.0"
-  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-22.4.0.tgz#c9d3f9565696e0ad17e658eee96e06822af96bb9"
+  version "22.4.1"
+  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-22.4.1.tgz#69defb2042d689cff9b4244365ef638ecd35f706"
   dependencies:
     babel-core "^6.24.1"
     babel-plugin-istanbul "^4.1.4"
@@ -10231,8 +10250,8 @@ tslint@^5.9.1:
     tsutils "^2.12.1"
 
 tsutils@^2.12.1:
-  version "2.21.2"
-  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.21.2.tgz#902aa5987e1440c47673543d96752df8d44ab9c7"
+  version "2.22.2"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.22.2.tgz#0b9f3d87aa3eb95bd32d26ce2b88aa329a657951"
   dependencies:
     tslib "^1.8.1"
 
@@ -10294,8 +10313,8 @@ uglify-es@^3.3.4:
     source-map "~0.6.1"
 
 uglify-js@3.3.x:
-  version "3.3.12"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.12.tgz#efd87c16a1f4c674a8a5ede571001ef634dcc883"
+  version "3.3.13"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.13.tgz#8a1a89eeb16e2d6a66b0db2b04cb871af3c669cf"
   dependencies:
     commander "~2.14.1"
     source-map "~0.6.1"
@@ -10692,8 +10711,8 @@ vue-hot-reload-api@^2.2.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.0.tgz#97976142405d13d8efae154749e88c4e358cf926"
 
 vue-jest@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/vue-jest/-/vue-jest-2.1.0.tgz#d106560b070cc1ba76f1e3a702eea3689c1bcf2d"
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/vue-jest/-/vue-jest-2.1.1.tgz#7e78c7731cd581e88f275ae9b7faf8098e53dda0"
   dependencies:
     babel-plugin-transform-es2015-modules-commonjs "^6.26.0"
     chalk "^2.1.0"