From acd4ab44d92268940a68ec35a7388eb3ccf2834f Mon Sep 17 00:00:00 2001
From: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Thu, 26 Apr 2018 02:39:29 +0200
Subject: [PATCH] fix(ui): various bugs

---
 .../src/components/WebpackAnalyzer.vue        | 17 +++++++++++---
 .../src/graphql-api/connectors/plugins.js     | 22 ++++++++++---------
 .../cli-ui/src/views/ProjectTaskDetails.vue   |  2 +-
 3 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/packages/@vue/cli-ui-addon-webpack/src/components/WebpackAnalyzer.vue b/packages/@vue/cli-ui-addon-webpack/src/components/WebpackAnalyzer.vue
index f28d5a56af..c885c00777 100644
--- a/packages/@vue/cli-ui-addon-webpack/src/components/WebpackAnalyzer.vue
+++ b/packages/@vue/cli-ui-addon-webpack/src/components/WebpackAnalyzer.vue
@@ -63,7 +63,7 @@
         </svg>
       </template>
 
-      <div class="described-module">
+      <div v-if="describedModule" class="described-module">
         <div class="wrapper">
           <div class="path" v-html="modulePath"/>
           <div
@@ -137,6 +137,7 @@ export default {
     },
 
     modulePath () {
+      if (!this.describedModule) return
       let path = `<b>${this.describedModule.id}</b>`
       let module = this.describedModule
       while (module.parent && module !== this.currentTree) {
@@ -154,12 +155,22 @@ export default {
   watch: {
     modulesTrees: {
       handler (value) {
-        if (!this.selectedChunk && value) {
+        if (value) {
           const keys = Object.keys(value)
           if (keys.length) {
-            this.selectedChunk = keys[0]
+            if (!this.selectedChunk || !keys.includes(this.selectedChunk)) {
+              if (keys.length) {
+                this.selectedChunk = keys[0]
+              }
+            }
+            this.goToHome()
+            return
           }
         }
+
+        // Clear
+        this.currentTree = null
+        this.selectedChunk = null
       },
       immediate: true
     },
diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/plugins.js b/packages/@vue/cli-ui/src/graphql-api/connectors/plugins.js
index 4b34c1b157..d9098f2920 100644
--- a/packages/@vue/cli-ui/src/graphql-api/connectors/plugins.js
+++ b/packages/@vue/cli-ui/src/graphql-api/connectors/plugins.js
@@ -24,7 +24,6 @@ const cwd = require('./cwd')
 const folders = require('./folders')
 const prompts = require('./prompts')
 const progress = require('./progress')
-const projects = require('./projects')
 const logs = require('./logs')
 const clientAddons = require('./client-addons')
 const views = require('./views')
@@ -96,15 +95,18 @@ function resetPluginApi (context) {
   // Add views
   pluginApi.views.forEach(view => views.add(view, context))
 
-  const project = projects.getCurrent(context)
-  if (!project) return
-  if (projectId !== project.id) {
-    projectId = project.id
-    pluginApi.projectOpenHooks.forEach(fn => fn(project, projects.getLast(context)))
-    pluginApi.project = project
-  } else {
-    pluginApi.pluginReloadHooks.forEach(fn => fn(project))
-  }
+  setTimeout(() => {
+    const projects = require('./projects')
+    const project = projects.getCurrent(context)
+    if (!project) return
+    if (projectId !== project.id) {
+      projectId = project.id
+      pluginApi.projectOpenHooks.forEach(fn => fn(project, projects.getLast(context)))
+      pluginApi.project = project
+    } else {
+      pluginApi.pluginReloadHooks.forEach(fn => fn(project))
+    }
+  })
 }
 
 function runPluginApi (id, context, fileName = 'ui') {
diff --git a/packages/@vue/cli-ui/src/views/ProjectTaskDetails.vue b/packages/@vue/cli-ui/src/views/ProjectTaskDetails.vue
index 0bc8e78d61..e5e482fcd2 100644
--- a/packages/@vue/cli-ui/src/views/ProjectTaskDetails.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectTaskDetails.vue
@@ -182,7 +182,7 @@ export default {
       },
       fetchPolicy: 'cache-and-network',
       async result ({ data, loading }) {
-        if (!this.$_init && !loading && data && data.task.defaultView) {
+        if (!this.$_init && !loading && data && data.task && data.task.defaultView) {
           this.$_init = true
           await this.$nextTick()
           this.currentView = data.task.defaultView