refactor(ui): improved quick project switching

packages/@vue/cli-ui/apollo-server/connectors/projects.js

@@ -38,6 +38,14 @@ function list (context) {
   return projects
 }
 
+function findOne (id, context) {
+  return context.db.get('projects').find({ id }).value()
+}
+
+function findByPath (file, context) {
+  return context.db.get('projects').find({ path: file }).value()
+}
+
 function autoClean (projects, context) {
   let result = []
   for (const project of projects) {
@@ -352,9 +360,7 @@ async function importProject (input, context) {
 }
 
 async function open (id, context) {
-  const project = context.db.get('projects').find({
-    id
-  }).value()
+  const project = findOne(id, context)
 
   if (!project) {
     log('Project not found', id)
@@ -399,10 +405,6 @@ function resetCwd (context) {
   }
 }
 
-function findOne (id, context) {
-  return context.db.get('projects').find({ id }).value()
-}
-
 function setFavorite ({ id, favorite }, context) {
   context.db.get('projects').find({ id }).assign({ favorite }).write()
   return findOne(id, context)
@@ -429,6 +431,8 @@ autoOpenLastProject()
 
 module.exports = {
   list,
+  findOne,
+  findByPath,
   getCurrent,
   getLast,
   getCreation,

packages/@vue/cli-ui/apollo-server/connectors/tasks.js

@@ -50,6 +50,7 @@ function list ({ file = null, api = true } = {}, context) {
           index: list.findIndex(t => t.id === id),
           prompts: [],
           views: [],
+          path: file,
           ...moreData
         }
       }
@@ -65,6 +66,7 @@ function list ({ file = null, api = true } = {}, context) {
             index: list.findIndex(t => t.id === id),
             prompts: [],
             views: [],
+            path: file,
             uiOnly: true,
             ...task
           }

packages/@vue/cli-ui/apollo-server/schema/plugin.js

@@ -2,11 +2,13 @@ const gql = require('graphql-tag')
 // Subs
 const channels = require('../channels')
 // Connectors
+const cwd = require('../connectors/cwd')
 const plugins = require('../connectors/plugins')
 
 exports.types = gql`
 extend type Query {
   pluginInstallation: PluginInstallation
+  plugins: [Plugin]
   plugin (id: ID!): Plugin
 }
 
@@ -73,6 +75,7 @@ exports.resolvers = {
 
   Query: {
     pluginInstallation: (root, args, context) => plugins.getInstallation(context),
+    plugins: (root, args, context) => plugins.list(cwd.get(), context),
     plugin: (root, { id }, context) => plugins.findOne(id, context)
   },
 

packages/@vue/cli-ui/apollo-server/schema/task.js

@@ -5,6 +5,7 @@ const channels = require('../channels')
 // Connectors
 const tasks = require('../connectors/tasks')
 const plugins = require('../connectors/plugins')
+const projects = require('../connectors/projects')
 
 exports.types = gql`
 extend type Query {
@@ -37,6 +38,7 @@ type Task implements DescribedEntity {
   views: [TaskView]
   defaultView: String
   plugin: Plugin
+  project: Project
 }
 
 enum TaskStatus {
@@ -69,7 +71,8 @@ type TaskView {
 exports.resolvers = {
   Task: {
     prompts: (task, args, context) => tasks.getPrompts(task.id, context),
-    plugin: (task, args, context) => plugins.findOne(task.pluginId, context)
+    plugin: (task, args, context) => plugins.findOne(task.pluginId, context),
+    project: (task, args, context) => projects.findByPath(task.path, context)
   },
 
   Query: {

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

@@ -62,6 +62,8 @@ export default {
 
   methods: {
     async openProject (project) {
+      this.$bus('quickOpenProject', project)
+
       await this.$apollo.mutate({
         mutation: PROJECT_OPEN,
         variables: {

packages/@vue/cli-ui/src/graphql/plugins.gql

@@ -0,0 +1,7 @@
+#import "./pluginFragment.gql"
+
+query plugins {
+  plugins {
+    ...plugin
+  }
+}

packages/@vue/cli-ui/src/graphql/projectPlugins.gql

@@ -1,10 +0,0 @@
-#import "./pluginFragment.gql"
-
-query projectPlugins {
-  projectCurrent {
-    id
-    plugins {
-      ...plugin
-    }
-  }
-}

packages/@vue/cli-ui/src/graphql/taskFragment.gql

@@ -9,4 +9,7 @@ fragment task on Task {
     id
     logo
   }
+  project {
+    id
+  }
 }

packages/@vue/cli-ui/src/mixins/RestoreRoute.js

@@ -1,8 +1,29 @@
-export default function () {
+
+import PROJECT_CURRENT from '../graphql/projectCurrent.gql'
+
+export default function ({
+  baseRoute = null
+} = {}) {
   let lastRoute
 
   // @vue/component
   return {
+    apollo: {
+      projectCurrent: PROJECT_CURRENT
+    },
+
+    watch: {
+      projectCurrent (value) {
+        this.replaceBaseRoute()
+      }
+    },
+
+    bus: {
+      quickOpenProject (project) {
+        this.replaceBaseRoute()
+      }
+    },
+
     beforeRouteEnter (to, from, next) {
       if (lastRoute) {
         const { name, params, query } = lastRoute
@@ -16,6 +37,12 @@ export default function () {
     beforeRouteLeave (to, from, next) {
       lastRoute = from
       next()
+    },
+
+    methods: {
+      replaceBaseRoute () {
+        if (baseRoute) this.$router.replace(baseRoute)
+      }
     }
   }
 }

packages/@vue/cli-ui/src/plugins.js

@@ -10,6 +10,7 @@ import PluginAction from './util/plugin-action'
 import ClientState from './mixins/ClientState'
 import SetSize from './util/set-size'
 import Focus from './util/focus'
+import Bus from './util/bus'
 
 Vue.use(InstantSearch)
 Vue.use(VueMeta)
@@ -33,6 +34,7 @@ Vue.use(VueUi)
 Vue.use(PortalVue)
 Vue.use(SharedData)
 Vue.use(PluginAction)
+Vue.use(Bus)
 
 for (const key in Filters) {
   Vue.filter(key, Filters[key])

packages/@vue/cli-ui/src/util/bus.js

@@ -0,0 +1,50 @@
+import Vue from 'vue'
+
+const bus = new Vue()
+
+export default {
+  install (Vue) {
+    Vue.prototype.$bus = (type, ...args) => {
+      bus.$emit(type, ...args)
+    }
+
+    Vue.mixin({
+      beforeCreate () {
+        const busOptions = this.$options.bus
+        if (busOptions) {
+          this.$_bus = []
+
+          const addListeners = map => {
+            for (const event in map) {
+              const handler = map[event].bind(this)
+              bus.$on(event, handler)
+              this.$_bus.push({ event, handler })
+            }
+          }
+
+          if (Array.isArray(busOptions)) {
+            busOptions.forEach(addListeners)
+          } else {
+            addListeners(busOptions)
+          }
+        }
+      },
+
+      beforeDestroy () {
+        if (this.$_bus) {
+          for (const listener of this.$_bus) {
+            bus.$off(listener.event, listener.handler)
+          }
+        }
+      }
+    })
+
+    Vue.config.optionMergeStrategies.bus = (parent, child, vm) => {
+      if (Array.isArray(parent)) {
+        parent.push(child)
+        return parent
+      }
+      return [parent, child]
+    }
+  }
+}

packages/@vue/cli-ui/src/views/ProjectConfigurations.vue

@@ -10,7 +10,7 @@
       >
         <template slot-scope="{ result: { data, loading } }">
           <VueLoadingIndicator
-            v-if="loading && !data"
+            v-if="loading && (!data || !data.configurations)"
             class="overlay"
           />
 
@@ -34,9 +34,13 @@
 <script>
 import RestoreRoute from '../mixins/RestoreRoute'
 
+import CONFIGS from '../graphql/configurations.gql'
+
 export default {
   mixins: [
-    RestoreRoute()
+    RestoreRoute({
+      baseRoute: { name: 'project-configurations' }
+    })
   ],
 
   metaInfo () {
@@ -45,8 +49,20 @@ export default {
     }
   },
 
+  bus: {
+    quickOpenProject (project) {
+      this.$apollo.getClient().writeQuery({
+        query: CONFIGS,
+        data: {
+          configurations: null
+        }
+      })
+    }
+  },
+
   methods: {
     generateItems (configurations) {
+      if (!configurations) return []
       return configurations.map(
         configuration => ({
           route: {

packages/@vue/cli-ui/src/views/ProjectPlugins.vue

@@ -4,7 +4,7 @@
       :title="$t('org.vue.views.project-plugins.title')"
       class="limit-width"
     >
-      <template v-if="projectCurrent.type === 'vue'" slot="actions">
+      <template slot="actions">
         <VueButton
           icon-left="add"
           :label="$t('org.vue.views.project-plugins.button')"
@@ -29,20 +29,19 @@
       </template>
 
       <ApolloQuery
-        v-if="projectCurrent.type === 'vue'"
-        :query="require('../graphql/projectPlugins.gql')"
+        :query="require('../graphql/plugins.gql')"
       >
         <template slot-scope="{ result: { data, loading } }">
           <div class="cta-text">{{ $t('org.vue.views.project-plugins.heading') }}</div>
 
           <VueLoadingIndicator
-            v-if="loading && !data"
+            v-if="loading && (!data || !data.plugins)"
             class="overlay"
           />
 
           <div v-else-if="data" class="plugins">
             <ProjectPluginItem
-              v-for="plugin of data.projectCurrent.plugins"
+              v-for="plugin of data.plugins"
               :key="plugin.id"
               :plugin="plugin"
             />
@@ -59,6 +58,7 @@
 <script>
 import PLUGINS_UPDATE from '../graphql/pluginsUpdate.gql'
 import PROJECT_CURRENT from '../graphql/projectCurrent.gql'
+import PLUGINS from '../graphql/plugins.gql'
 
 export default {
   name: 'ProjectPlugins',
@@ -73,6 +73,17 @@ export default {
     projectCurrent: PROJECT_CURRENT
   },
 
+  bus: {
+    quickOpenProject (project) {
+      this.$apollo.getClient().writeQuery({
+        query: PLUGINS,
+        data: {
+          plugins: null
+        }
+      })
+    }
+  },
+
   methods: {
     updateAll () {
       return this.$apollo.mutate({

packages/@vue/cli-ui/src/views/ProjectTasks.vue

@@ -9,7 +9,7 @@
       >
         <template slot-scope="{ result: { data, loading } }">
           <VueLoadingIndicator
-            v-if="loading && !data"
+            v-if="loading && (!data || !data.tasks)"
             class="overlay"
           />
 
@@ -34,10 +34,13 @@
 import RestoreRoute from '../mixins/RestoreRoute'
 
 import TASK_CHANGED from '../graphql/taskChanged.gql'
+import TASKS from '../graphql/tasks.gql'
 
 export default {
   mixins: [
-    RestoreRoute()
+    RestoreRoute({
+      baseRoute: { name: 'project-tasks' }
+    })
   ],
 
   metaInfo () {
@@ -54,8 +57,20 @@ export default {
     }
   },
 
+  bus: {
+    quickOpenProject (project) {
+      this.$apollo.getClient().writeQuery({
+        query: TASKS,
+        data: {
+          tasks: null
+        }
+      })
+    }
+  },
+
   methods: {
     generateItems (tasks) {
+      if (!tasks) return []
       return tasks.map(
         task => ({
           route: {