feat(ui): tasks dropdown: open task details

Author: Guillaume Chau

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

@@ -30,22 +30,28 @@
           v-for="task of tasks"
           :key="task.id"
           :task="task"
+          @click.native="openTask(task)"
         >
           <VueButton
             v-if="task.status !== 'running'"
             icon-left="play_arrow"
             class="icon-button"
             v-tooltip="$t('org.vue.views.project-task-details.actions.play')"
-            @click="runTask(task)"
+            @click.stop="openTask(task, true)"
           />
           <VueButton
             v-else
             icon-left="stop"
             class="icon-button"
             v-tooltip="$t('org.vue.views.project-task-details.actions.stop')"
-            @click="stopTask(task)"
+            @click.stop="stopTask(task)"
           />
         </TaskItem>
+
+        <VueLoadingIndicator
+          v-if="loading"
+          class="overlay"
+        />
       </div>
     </div>
   </VueDropdown>
@@ -55,6 +61,8 @@
 import TASK_CHANGED from '../graphql/taskChanged.gql'
 import TASK_RUN from '../graphql/taskRun.gql'
 import TASK_STOP from '../graphql/taskStop.gql'
+import PROJECT_CURRENT from '../graphql/projectCurrent.gql'
+import PROJECT_OPEN from '../graphql/projectOpen.gql'
 
 export default {
   props: {
@@ -69,7 +77,15 @@ export default {
     }
   },
 
+  data () {
+    return {
+      loading: false
+    }
+  },
+
   apollo: {
+    projectCurrent: PROJECT_CURRENT,
+
     $subscribe: {
       taskChanged: {
         query: TASK_CHANGED
@@ -99,13 +115,31 @@ export default {
   },
 
   methods: {
-    runTask (task) {
-      this.$apollo.mutate({
-        mutation: TASK_RUN,
-        variables: {
-          id: task.id
-        }
+    async openTask (task, run = false) {
+      this.loading = true
+
+      if (task.project.id !== this.projectCurrent.id) {
+        await this.$apollo.mutate({
+          mutation: PROJECT_OPEN,
+          variables: {
+            id: task.project.id
+          }
+        })
+      }
+
+      this.$router.push({
+        name: 'project-tasks',
+        query: { id: task.id }
       })
+
+      if (run) {
+        await this.$apollo.mutate({
+          mutation: TASK_RUN,
+          variables: {
+            id: task.id
+          }
+        })
+      }
     },
 
     stopTask (task) {

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

@@ -7,6 +7,9 @@ query projects {
       id
       name
       status
+      project {
+        id
+      }
     }
   }
 }

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

@@ -1,3 +1,4 @@
+import { isSameRoute } from '../util/route'
 
 import PROJECT_CURRENT from '../graphql/projectCurrent.gql'
 
@@ -26,12 +27,14 @@ export default function ({
 
     beforeRouteEnter (to, from, next) {
       if (lastRoute) {
-        const { name, params, query } = lastRoute
-        next({ name, params, query })
+        if (!to.query) {
+          const { name, params, query } = lastRoute
+          next({ name, params, query })
+          return
+        }
         lastRoute = null
-      } else {
-        next()
       }
+      next()
     },
 
     beforeRouteLeave (to, from, next) {
@@ -41,7 +44,9 @@ export default function ({
 
     methods: {
       replaceBaseRoute () {
-        if (baseRoute) this.$router.replace(baseRoute)
+        if (baseRoute && !isSameRoute(this.$route, baseRoute, false)) {
+          this.$router.replace(baseRoute)
+        }
       }
     }
   }

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

@@ -41,10 +41,19 @@ export default {
 
     Vue.config.optionMergeStrategies.bus = (parent, child, vm) => {
       if (Array.isArray(parent)) {
-        parent.push(child)
-        return parent
-      } else if (parent) {
+        if (Array.isArray(child)) {
+          return parent.concat(child)
+        } else {
+          parent.push(child)
+          return parent
+        }
+      } else if (Array.isArray(child)) {
+        child.push(parent)
+        return child
+      } else if (parent && child) {
         return [parent, child]
+      } else if (parent) {
+        return parent
       }
       return child
     }

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

@@ -1,20 +1,20 @@
 const trailingSlashRE = /\/?$/
 
-export function isSameRoute (a, b) {
+export function isSameRoute (a, b, checkQuery = true) {
   if (!b) {
     return false
   } else if (a.path && b.path) {
     return (
       a.path.replace(trailingSlashRE, '') === b.path.replace(trailingSlashRE, '') &&
       a.hash === b.hash &&
-      isObjectEqual(a.query, b.query)
+      (!checkQuery || isObjectEqual(a.query, b.query))
     )
   } else if (a.name && b.name) {
     return (
       a.name === b.name &&
       a.hash === b.hash &&
-      isObjectEqual(a.query, b.query) &&
-      isObjectEqual(a.params, b.params)
+      isObjectEqual(a.params, b.params) &&
+      (!checkQuery || isObjectEqual(a.query, b.query))
     )
   } else {
     return false

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

@@ -6,6 +6,7 @@
       <ApolloQuery
         :query="require('../graphql/tasks.gql')"
         class="fill-height"
+        @result="onResult"
       >
         <template slot-scope="{ result: { data, loading } }">
           <VueLoadingIndicator
@@ -82,6 +83,15 @@ export default {
           task
         })
       )
+    },
+
+    onResult ({ loading }) {
+      if (!loading && this.$route.query.id) {
+        this.$router.replace({
+          name: 'project-task-details',
+          params: { id: this.$route.query.id }
+        })
+      }
     }
   }
 }