Fix bug where subscriptions would not update on query change (#1249)

MetRonnie · web-flow · commit 8bfbfacce13d · 2023-04-21T10:20:13.000+01:00
Fix bug where subscriptions would not update on query change

* Ensure lumino tabs are created with unique IDs
diff --git a/CHANGES.md b/CHANGES.md
@@ -18,6 +18,12 @@ ones in. -->
 [#1187](https://github.com/cylc/cylc-ui/pull/1187) - Improved the workflow
 filtering menu in the sidebar.
 
+### Fixes
+
+[#1249](https://github.com/cylc/cylc-ui/pull/1249) - Fix tasks not loading
+when navigating between workflows in the standalone `#/tree/` and `#/table/`
+views.
+
 -------------------------------------------------------------------------------
 ## __cylc-ui-1.5.0 (<span actions:bind='release-date'>Released 2023-02-20</span>)__
 
diff --git a/src/components/cylc/workflow/index.js b/src/components/cylc/workflow/index.js
diff --git a/src/mixins/subscriptionComponent.js b/src/mixins/subscriptionComponent.js
@@ -35,8 +35,17 @@ export default {
   ],
   beforeMount () {
     this.$workflowService.subscribe(this)
+    this.$workflowService.startSubscriptions()
   },
   beforeDestroy () {
     this.$workflowService.unsubscribe(this)
+  },
+  watch: {
+    query () {
+      // if the query changes, unsubscribe & re-subscribe
+      this.$workflowService.unsubscribe(this)
+      this.$workflowService.subscribe(this)
+      this.$workflowService.startSubscriptions()
+    }
   }
 }
diff --git a/src/mixins/subscriptionView.js b/src/mixins/subscriptionView.js
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
@@ -168,7 +168,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { mapState, mapGetters } from 'vuex'
 import { mdiBook, mdiBookMultiple, mdiBookOpenVariant, mdiCog, mdiHubspot, mdiTable } from '@mdi/js'
 import pageMixin from '@/mixins/index'
-import subscriptionViewMixin from '@/mixins/subscriptionView'
 import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
 import { createUrl } from '@/utils/urls'
 import { WorkflowState, WorkflowStateOrder } from '@/model/WorkflowState.model'
@@ -179,8 +178,7 @@ export default {
   name: 'Dashboard',
   mixins: [
     pageMixin,
-    subscriptionComponentMixin,
-    subscriptionViewMixin
+    subscriptionComponentMixin
   ],
   metaInfo () {
     return {
diff --git a/src/views/Graph.vue b/src/views/Graph.vue
@@ -96,7 +96,6 @@ import gql from 'graphql-tag'
 import { mapGetters } from 'vuex'
 import pageMixin from '@/mixins/index'
 import graphqlMixin from '@/mixins/graphql'
-import subscriptionViewMixin from '@/mixins/subscriptionView'
 import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
 import SubscriptionQuery from '@/model/SubscriptionQuery.model'
 // import CylcTreeCallback from '@/services/treeCallback'
@@ -203,8 +202,7 @@ export default {
   mixins: [
     pageMixin,
     graphqlMixin,
-    subscriptionComponentMixin,
-    subscriptionViewMixin
+    subscriptionComponentMixin
   ],
   name: 'Graph',
   components: {
diff --git a/src/views/Guide.vue b/src/views/Guide.vue
@@ -191,11 +191,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import Task from '@/components/cylc/Task'
 import Job from '@/components/cylc/Job'
 import { TaskStateUserOrder } from '@/model/TaskState.model'
-import subscriptionViewMixin from '@/mixins/subscriptionView'
 
 export default {
   name: 'Guide',
-  mixins: [subscriptionViewMixin],
   components: {
     task: Task,
     job: Job
diff --git a/src/views/Log.vue b/src/views/Log.vue
@@ -89,8 +89,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { mdiFileDocumentMultipleOutline } from '@mdi/js'
 import pageMixin from '@/mixins/index'
 import graphqlMixin from '@/mixins/graphql'
-import subscriptionViewMixin from '@/mixins/subscriptionView'
-import subscriptionMixin from '@/mixins/subscriptionComponent'
+import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
 import LogComponent from '@/components/cylc/log/Log'
 import SubscriptionQuery from '@/model/SubscriptionQuery.model'
 import { LOGS_SUBSCRIPTION } from '@/graphql/queries'
@@ -116,8 +115,7 @@ export default {
   mixins: [
     pageMixin,
     graphqlMixin,
-    subscriptionMixin,
-    subscriptionViewMixin
+    subscriptionComponentMixin
   ],
   name: 'Log',
   components: {
diff --git a/src/views/Table.vue b/src/views/Table.vue
@@ -32,7 +32,6 @@ import { mapState, mapGetters } from 'vuex'
 import { mdiTable } from '@mdi/js'
 import pageMixin from '@/mixins/index'
 import graphqlMixin from '@/mixins/graphql'
-import subscriptionViewMixin from '@/mixins/subscriptionView'
 import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
 import TableComponent from '@/components/cylc/table/Table.vue'
 import SubscriptionQuery from '@/model/SubscriptionQuery.model'
@@ -43,8 +42,7 @@ export default {
   mixins: [
     pageMixin,
     graphqlMixin,
-    subscriptionComponentMixin,
-    subscriptionViewMixin
+    subscriptionComponentMixin
   ],
   name: 'Table',
   components: {
diff --git a/src/views/Tree.vue b/src/views/Tree.vue
@@ -38,7 +38,6 @@ import { mapState, mapGetters } from 'vuex'
 import { mdiFileTree } from '@mdi/js'
 import pageMixin from '@/mixins/index'
 import graphqlMixin from '@/mixins/graphql'
-import subscriptionViewMixin from '@/mixins/subscriptionView'
 import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
 import SubscriptionQuery from '@/model/SubscriptionQuery.model'
 import TreeComponent from '@/components/cylc/tree/Tree'
@@ -48,8 +47,7 @@ export default {
   mixins: [
     pageMixin,
     graphqlMixin,
-    subscriptionComponentMixin,
-    subscriptionViewMixin
+    subscriptionComponentMixin
   ],
   name: 'Tree',
   components: {
diff --git a/src/views/UserProfile.vue b/src/views/UserProfile.vue
@@ -215,15 +215,13 @@ import { decreaseFontSize, getCurrentFontSize, increaseFontSize, resetFontSize }
 import { mdiCog, mdiFormatFontSizeDecrease, mdiFormatFontSizeIncrease } from '@mdi/js'
 import Job from '@/components/cylc/Job'
 import JobState from '@/model/JobState.model'
-import subscriptionViewMixin from '@/mixins/subscriptionView'
 
 // TODO: update where user preferences are stored after #335
 
 export default {
   name: 'UserProfile',
   mixins: [
-    pageMixin,
-    subscriptionViewMixin
+    pageMixin
   ],
   components: {
     Job
diff --git a/src/views/Workflows.vue b/src/views/Workflows.vue
@@ -25,16 +25,14 @@ import GScan from '@/components/cylc/gscan/GScan'
 import { GSCAN_DELTAS_SUBSCRIPTION } from '@/graphql/queries'
 import pageMixin from '@/mixins/index'
 import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
-import subscriptionViewMixin from '@/mixins/subscriptionView'
 import SubscriptionQuery from '@/model/SubscriptionQuery.model'
 
 export default {
   name: 'Workflows',
 
   mixins: [
     pageMixin,
-    subscriptionComponentMixin,
-    subscriptionViewMixin
+    subscriptionComponentMixin
   ],
 
   components: {
diff --git a/src/views/WorkflowsTable.vue b/src/views/WorkflowsTable.vue
@@ -72,7 +72,7 @@ import { mapState, mapGetters } from 'vuex'
 import i18n from '@/i18n'
 import { mdiTable } from '@mdi/js'
 import pageMixin from '@/mixins/index'
-import subscriptionViewMixin from '@/mixins/subscriptionView'
+import subscriptionMixin from '@/mixins/subscription'
 import SubscriptionQuery from '@/model/SubscriptionQuery.model'
 import { WORKFLOWS_TABLE_DELTAS_SUBSCRIPTION } from '@/graphql/queries'
 import WorkflowIcon from '@/components/cylc/gscan/WorkflowIcon'
@@ -81,7 +81,7 @@ export default {
   name: 'WorkflowsTable',
   mixins: [
     pageMixin,
-    subscriptionViewMixin
+    subscriptionMixin
   ],
   metaInfo () {
     return {
diff --git a/src/views/Workspace.vue b/src/views/Workspace.vue
@@ -51,12 +51,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <script>
 import Vue from 'vue'
+import { uniqueId } from 'lodash'
 import { each, iter } from '@lumino/algorithm'
 import pageMixin from '@/mixins'
 import graphqlMixin from '@/mixins/graphql'
-import subscriptionViewMixin from '@/mixins/subscriptionView'
+import subscriptionMixin from '@/mixins/subscription'
 import ViewState from '@/model/ViewState.model'
-import { createWidgetId } from '@/components/cylc/workflow/index'
 import Lumino from '@/components/cylc/workflow/Lumino'
 import Toolbar from '@/components/cylc/workflow/Toolbar'
 import TableView from '@/views/Table'
@@ -70,7 +70,7 @@ export default {
   mixins: [
     pageMixin,
     graphqlMixin,
-    subscriptionViewMixin
+    subscriptionMixin
   ],
 
   components: {
@@ -176,16 +176,9 @@ export default {
       }
       Vue.set(
         this.widgets,
-        createWidgetId(),
+        uniqueId(),
         { view, initialOptions }
       )
-      this.$nextTick(() => {
-        // Views use navigation-guards to start the pending subscriptions. But we don't have
-        // this in this view. We must pretend we are doing the beforeRouteEnter here, and
-        // call the .startSubscriptions function, so that the WorkflowService will take care
-        // of loading the pending subscriptions (like the ones created by the new view).
-        this.$workflowService.startSubscriptions()
-      })
     },
     /**
      * Remove all the widgets present in the UI.
diff --git a/tests/unit/components/cylc/drawer.vue.spec.js b/tests/unit/components/cylc/drawer.vue.spec.js
@@ -17,7 +17,7 @@
 
 import { expect } from 'chai'
 import { createLocalVue, mount } from '@vue/test-utils'
-import Drawer from '../../../../src/components/cylc/Drawer'
+import Drawer from '@/components/cylc/Drawer'
 
 import Vue from 'vue'
 import Vuetify from 'vuetify'
@@ -37,6 +37,7 @@ const mountFunction = options => {
     register () {},
     unregister () {},
     subscribe () {},
+    startSubscriptions () {},
     introspection: Promise.resolve({
       mutations: [
         { args: [] }
diff --git a/tests/unit/components/cylc/workflow/index.spec.js b/tests/unit/components/cylc/workflow/index.spec.js
diff --git a/tests/unit/mixins/subscriptionComponent.spec.js b/tests/unit/mixins/subscriptionComponent.spec.js
diff --git a/tests/unit/mixins/subscriptionView.spec.js b/tests/unit/mixins/subscriptionView.spec.js
