From e3ac8a17757c2669f75411273c6d05e098f7fcde Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Wed, 22 May 2024 18:17:26 +0100
Subject: [PATCH 1/4] Improve router error handling & tidy

---
 src/router/index.js | 47 +++++++++++++++++++++++----------------------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index aaa8ecee3..596110f20 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -23,35 +23,29 @@
  * https://router.vuejs.org/en/
  */
 
-// Lib imports
 import { createRouter, createWebHashHistory } from 'vue-router'
 import NProgress from 'nprogress'
-import { store } from '@/store/index'
 
 import 'nprogress/css/nprogress.css'
 
-// Routes
-import paths from './paths'
+import paths from '@/router/paths'
+import { store } from '@/store/index'
 import { Alert } from '@/model/Alert.model'
 
 NProgress.configure({ showSpinner: false })
 
-function route (path) {
-  const copy = Object.assign({}, path)
-  const view = copy.view
-  return Object.assign(copy, {
-    name: path.name || view,
-    component: (resolve) => import(
-      `@/views/${view}.vue`
-    ).then(resolve)
-  })
+function getRoute (path) {
+  return {
+    ...path,
+    name: path.name || path.view,
+    component: () => import(`@/views/${path.view}.vue`)
+  }
 }
 
 // Create a new router
 const router = createRouter({
   history: createWebHashHistory(),
-  routes: paths.map(path => route(path)),
-  //  .concat([{ path: '*', redirect: '/dashboard' }]),
+  routes: paths.map(getRoute),
   scrollBehavior (to, from, savedPosition) {
     if (savedPosition) {
       return savedPosition
@@ -66,15 +60,17 @@ const router = createRouter({
 router.beforeEach(async (to, from) => {
   NProgress.start()
   if (!store.state.user.user) {
-    try {
-      const user = await router.app.config.globalProperties.$userService.getUserProfile()
-      store.commit('user/SET_USER', user)
-    } catch (err) {
-      store.dispatch('setAlert', new Alert(err, 'error'))
-    }
+    const user = await router.app.config.globalProperties.$userService.getUserProfile()
+    // TODO: catch error getting user profile and redirect to static error page
+    store.commit('user/SET_USER', user)
   }
-  if (!store.state.user.user.permissions.includes('read') && to.name !== 'noAuth') {
-    return { name: 'noAuth' }
+  if (!store.state.user.user.permissions?.includes('read')) {
+    if (to.name !== 'noAuth') { // Avoid infinite redirect?
+      return { name: 'noAuth' }
+    }
+  } else if (to.name === 'noAuth') {
+    // If authorized, redirect no-auth page to home page
+    return { path: '/' }
   }
 
   if (to.name) {
@@ -96,4 +92,9 @@ router.afterEach(() => {
   NProgress.done()
 })
 
+router.onError((err, to, from) => {
+  store.dispatch('setAlert', new Alert(err, 'error'))
+  NProgress.done()
+})
+
 export default router

From b16d196b1f78da2e24656d96efd7c0dffec627c7 Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Wed, 22 May 2024 18:17:26 +0100
Subject: [PATCH 2/4] Set page title per-route rather than per-view

Multiple views may be included in a page, so the previous approach was flawed
---
 package.json                             |  1 -
 renovate.json                            |  5 --
 src/components/cylc/commandMenu/Menu.vue |  2 +-
 src/components/cylc/workflow/Toolbar.vue |  2 +-
 src/layouts/Default.vue                  |  9 ++-
 src/main.js                              |  8 +--
 src/router/index.js                      | 48 ++++++++++------
 src/router/paths.js                      | 37 ++++++++-----
 src/utils/index.js                       | 14 +----
 src/views/Analysis.vue                   |  7 ---
 src/views/Dashboard.vue                  |  7 ---
 src/views/Gantt.vue                      |  7 ---
 src/views/Graph.vue                      |  7 ---
 src/views/GraphiQL.vue                   |  5 --
 src/views/Guide.vue                      |  6 --
 src/views/Log.vue                        |  8 ---
 src/views/NotFound.vue                   | 12 ----
 src/views/SimpleTree.vue                 |  8 ---
 src/views/Table.vue                      |  7 ---
 src/views/Tree.vue                       |  7 ---
 src/views/UserProfile.vue                |  7 ---
 src/views/Workflows.vue                  |  7 ---
 src/views/WorkflowsTable.vue             |  7 ---
 src/views/Workspace.vue                  |  7 ---
 tests/unit/router/index.spec.js          | 48 ++++++++++++++++
 tests/unit/utils/index.spec.js           | 10 +---
 yarn.lock                                | 70 ------------------------
 27 files changed, 112 insertions(+), 251 deletions(-)
 create mode 100644 tests/unit/router/index.spec.js

diff --git a/package.json b/package.json
index 4b13072ce..b9d56528b 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,6 @@
     "@lumino/default-theme": "2.1.5",
     "@lumino/widgets": "2.3.2",
     "@mdi/js": "7.4.47",
-    "@unhead/vue": "1.9.9",
     "@vueuse/core": "10.9.0",
     "apexcharts": "3.41.0",
     "axios": "1.6.8",
diff --git a/renovate.json b/renovate.json
index 6e463f058..e81604e4e 100644
--- a/renovate.json
+++ b/renovate.json
@@ -55,11 +55,6 @@
       "matchPackageNames": ["sass"],
       "schedule": ["on the 25th day of the month"]
     },
-    {
-      "matchPackageNames": ["@unhead/vue"],
-      "automerge": true,
-      "schedule": ["on the 3rd day of the month"]
-    },
     {
       "matchPackageNames": ["@vueuse/core"],
       "automerge": true,
diff --git a/src/components/cylc/commandMenu/Menu.vue b/src/components/cylc/commandMenu/Menu.vue
index 83b290238..3030325da 100644
--- a/src/components/cylc/commandMenu/Menu.vue
+++ b/src/components/cylc/commandMenu/Menu.vue
@@ -253,7 +253,7 @@ export default {
         // Navigate to the corresponding workflow then open the log view
         // (no nav occurs if already on the correct workflow page)
         this.$router.push({
-          name: 'workspace',
+          name: 'Workspace',
           params: {
             workflowName: this.node.tokens.workflow
           }
diff --git a/src/components/cylc/workflow/Toolbar.vue b/src/components/cylc/workflow/Toolbar.vue
index e5d37692e..ae44c9a4e 100644
--- a/src/components/cylc/workflow/Toolbar.vue
+++ b/src/components/cylc/workflow/Toolbar.vue
@@ -131,7 +131,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <v-spacer class="mx-0" />
 
       <v-btn
-        v-if="$route.name === 'workspace'"
+        v-if="$route.name === 'Workspace'"
         class="add-view"
         color="primary"
         data-cy="add-view-btn"
diff --git a/src/layouts/Default.vue b/src/layouts/Default.vue
index 85ac54f29..0a98bae28 100644
--- a/src/layouts/Default.vue
+++ b/src/layouts/Default.vue
@@ -42,6 +42,7 @@ import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { mapState } from 'vuex'
 import { store } from '@/store/index'
+import { allViews } from '@/views/views'
 import { Alert as AlertModel } from '@/model/Alert.model'
 import Alert from '@/components/core/Alert.vue'
 import Drawer from '@/components/cylc/Drawer.vue'
@@ -57,17 +58,15 @@ export default {
     const route = useRoute()
     /**
      * Views that display workflows. For these views, we do not
-     * want to display the default Toolbar—the Workflow view
+     * want to display the default Toolbar—the Workspace view
      * has its own Toolbar that communicates with the Workflow
      * component (e.g. the Workflow Toolbar owns a button that
      * triggers the action to add a new Tree or Table View, so the events
      * are passed down from the parent Workflow View).
      */
     const workflowViews = [
-      'workspace',
-      'tree',
-      'table',
-      'graph',
+      ...allViews.keys(),
+      'Workspace',
     ]
     const { showNavBtn } = useNavBtn()
 
diff --git a/src/main.js b/src/main.js
index 54b333645..a3d1e19b9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -31,8 +31,8 @@ import router from '@/router/index'
 import { store } from '@/store/index'
 import { createVuetify } from 'vuetify'
 import mitt from 'mitt'
-import { createHead, VueHeadMixin } from '@unhead/vue'
 
+import 'nprogress/css/nprogress.css'
 import '@/styles/index.scss'
 
 if (location.search) {
@@ -51,18 +51,14 @@ if (location.search) {
   // Normal app start
   const app = createApp(App)
 
-  const emitter = mitt()
-
-  app.mixin(VueHeadMixin)
-
   app.use(store)
   app.use(router)
   app.use(createVuetify(vuetifyOptions))
   app.use(i18n)
-  app.use(createHead())
   app.use(ServicesPlugin)
   app.use(CommandMenuPlugin)
 
+  const emitter = mitt()
   // Composition API:
   app.provide('eventBus', emitter)
   // Options API (legacy):
diff --git a/src/router/index.js b/src/router/index.js
index 596110f20..ea6d2451a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -25,13 +25,14 @@
 
 import { createRouter, createWebHashHistory } from 'vue-router'
 import NProgress from 'nprogress'
-
-import 'nprogress/css/nprogress.css'
+import { i18n } from '@/i18n'
 
 import paths from '@/router/paths'
 import { store } from '@/store/index'
 import { Alert } from '@/model/Alert.model'
 
+const defaultPageTitle = i18n.global.t('App.name')
+
 NProgress.configure({ showSpinner: false })
 
 function getRoute (path) {
@@ -42,6 +43,17 @@ function getRoute (path) {
   }
 }
 
+/**
+ * Return the page title for a particular route.
+ * @param {import('vue-router').RouteLocation} route
+ */
+export function getPageTitle ({ meta, params }) {
+  const extra = meta.getTitle?.(params) || meta.title
+  return extra
+    ? `${defaultPageTitle} | ${extra}`
+    : defaultPageTitle
+}
+
 // Create a new router
 const router = createRouter({
   history: createWebHashHistory(),
@@ -65,27 +77,29 @@ router.beforeEach(async (to, from) => {
     store.commit('user/SET_USER', user)
   }
   if (!store.state.user.user.permissions?.includes('read')) {
-    if (to.name !== 'noAuth') { // Avoid infinite redirect?
-      return { name: 'noAuth' }
+    if (to.name !== 'NoAuth') { // Avoid infinite redirect?
+      return { name: 'NoAuth' }
     }
-  } else if (to.name === 'noAuth') {
+  } else if (to.name === 'NoAuth') {
     // If authorized, redirect no-auth page to home page
     return { path: '/' }
   }
 
-  if (to.name) {
-    let title = to.name
-    let workflowName = null
-    if (to.meta.toolbar) {
-      // When a workflow is being displayed, we set the title to a
-      // different value.
-      title = to.params.workflowName
-      workflowName = to.params.workflowName
-    }
-    store.commit('app/setTitle', title)
-    store.commit('workflows/SET_WORKFLOW_NAME', workflowName)
-    store.dispatch('setAlert', null)
+  // Set page title:
+  document.title = getPageTitle(to)
+
+  // Set toolbar title:
+  let title = to.name
+  let workflowName = null
+  if (to.meta.toolbar) {
+    // When a workflow is being displayed, we set the title to a
+    // different value.
+    title = to.params.workflowName
+    workflowName = to.params.workflowName
   }
+  store.commit('app/setTitle', title)
+  store.commit('workflows/SET_WORKFLOW_NAME', workflowName)
+  store.dispatch('setAlert', null)
 })
 
 router.afterEach(() => {
diff --git a/src/router/paths.js b/src/router/paths.js
index 9339a8816..8b70e8a83 100644
--- a/src/router/paths.js
+++ b/src/router/paths.js
@@ -1,4 +1,4 @@
-/**
+/*
  * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
  *
  * This program is free software: you can redistribute it and/or modify
@@ -17,33 +17,38 @@
 
 import { i18n } from '@/i18n'
 
+const workflowTitle = ({ workflowName: name }) => i18n.global.t('App.workflow', { name })
+
 /**
  * Define all of your application routes here
  * for more information on routes, see the
  * official documentation https://router.vuejs.org/en/
+ *
+ * @type {import('vue-router').RouteRecordRaw[]} - except the `name` and
+ * `component` fields which are automatically added in @/src/router/index.js
  */
 export default [
   {
     path: '/',
     view: 'Dashboard',
-    name: i18n.global.t('App.dashboard'),
     meta: {
+      title: i18n.global.t('App.dashboard'),
       layout: 'default'
     }
   },
   {
     path: '/workflow-table',
-    name: 'Workflow Table',
     view: 'WorkflowsTable',
     meta: {
+      title: 'Workflow Table',
       layout: 'default'
     }
   },
   {
     path: '/workspace/:workflowName(.*)',
     view: 'Workspace',
-    name: 'workspace',
     meta: {
+      getTitle: workflowTitle,
       layout: 'default',
       toolbar: true
     },
@@ -51,17 +56,17 @@ export default [
   },
   {
     path: '/user-profile',
-    name: i18n.global.t('App.userProfile'),
     view: 'UserProfile',
     meta: {
+      title: i18n.global.t('App.userProfile'),
       layout: 'default'
     }
   },
   {
     path: '/guide',
-    name: 'Guide',
     view: 'Guide',
     meta: {
+      title: i18n.global.t('App.guide'),
       layout: 'default'
     }
   },
@@ -69,6 +74,7 @@ export default [
     path: '/graphiql',
     view: 'GraphiQL',
     meta: {
+      title: 'GraphiQL',
       layout: 'empty'
     }
   },
@@ -76,6 +82,7 @@ export default [
     path: '/:catchAll(.*)',
     view: 'NotFound',
     meta: {
+      title: i18n.global.t('App.notFound'),
       layout: 'empty'
     }
   },
@@ -83,9 +90,9 @@ export default [
   // the standalone views
   {
     path: '/workflows',
-    name: i18n.global.t('App.workflows'),
     view: 'Workflows',
     meta: {
+      title: i18n.global.t('App.workflows'),
       layout: 'default',
       toolbar: false,
       showSidebar: false
@@ -94,8 +101,8 @@ export default [
   {
     path: '/tree/:workflowName(.*)',
     view: 'Tree',
-    name: 'tree',
     meta: {
+      getTitle: workflowTitle,
       layout: 'default',
       toolbar: true,
       showSidebar: false
@@ -105,8 +112,8 @@ export default [
   {
     path: '/table/:workflowName(.*)',
     view: 'Table',
-    name: 'table',
     meta: {
+      getTitle: workflowTitle,
       layout: 'default',
       toolbar: true,
       showSidebar: false
@@ -116,8 +123,8 @@ export default [
   {
     path: '/graph/:workflowName(.*)',
     view: 'Graph',
-    name: 'graph',
     meta: {
+      getTitle: workflowTitle,
       layout: 'default',
       toolbar: true,
       showSidebar: false
@@ -127,8 +134,8 @@ export default [
   {
     path: '/log/:workflowName(.*)',
     view: 'Log',
-    name: 'log',
     meta: {
+      getTitle: workflowTitle,
       layout: 'default',
       toolbar: true,
       showSidebar: false
@@ -138,8 +145,8 @@ export default [
   {
     path: '/analysis/:workflowName(.*)',
     view: 'Analysis',
-    name: 'analysis',
     meta: {
+      getTitle: workflowTitle,
       layout: 'default',
       toolbar: true,
       showSidebar: false
@@ -149,8 +156,8 @@ export default [
   {
     path: '/gantt/:workflowName(.*)',
     view: 'Gantt',
-    name: 'gantt',
     meta: {
+      getTitle: workflowTitle,
       layout: 'default',
       toolbar: true,
       showSidebar: false
@@ -160,9 +167,9 @@ export default [
   {
     path: '/noAuth',
     view: 'NoAuth',
-    name: 'noAuth',
     meta: {
+      title: 'Unauthorized',
       layout: 'noAuth',
     },
-  }
+  },
 ]
diff --git a/src/utils/index.js b/src/utils/index.js
index dcbb6a1b1..0d794751b 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -1,4 +1,4 @@
-/**
+/*
  * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
  *
  * This program is free software: you can redistribute it and/or modify
@@ -16,18 +16,6 @@
  */
 
 import { watch } from 'vue'
-import { i18n } from '@/i18n'
-
-/**
- * i18n-enabled operation, to get the title respecting the locale used
- * in the application settings.
- * @param {string} key - i18n key
- * @param {Object} params - optional object key=value used in the i18n message
- * @returns {string}
- */
-export const getPageTitle = (key, params = {}) => {
-  return `${i18n.global.t('App.name')} | ${i18n.global.t(key, params)}`
-}
 
 /**
  * Watch source until it is truthy, then call the callback (and stop watching).
diff --git a/src/views/Analysis.vue b/src/views/Analysis.vue
index 243a87219..d83dc805c 100644
--- a/src/views/Analysis.vue
+++ b/src/views/Analysis.vue
@@ -144,7 +144,6 @@ import {
   pick,
 } from 'lodash'
 import gql from 'graphql-tag'
-import { getPageTitle } from '@/utils/index'
 import graphqlMixin from '@/mixins/graphql'
 import {
   initialOptions,
@@ -248,12 +247,6 @@ export default {
     TimeSeries
   },
 
-  head () {
-    return {
-      title: getPageTitle('App.workflow', { name: this.workflowName })
-    }
-  },
-
   beforeMount () {
     this.tasksQuery()
   },
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 8c76abde7..62a2ee101 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -141,7 +141,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script>
 import { mapState, mapGetters } from 'vuex'
 import { mdiBook, mdiBookMultiple, mdiBookOpenVariant, mdiCog, mdiHubspot, mdiTable } from '@mdi/js'
-import { getPageTitle } from '@/utils/index'
 import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
 import { createUrl } from '@/utils/urls'
 import { WorkflowState, WorkflowStateOrder } from '@/model/WorkflowState.model'
@@ -191,12 +190,6 @@ export default {
     subscriptionComponentMixin
   ],
 
-  head () {
-    return {
-      title: getPageTitle('App.dashboard')
-    }
-  },
-
   data () {
     return {
       query: new SubscriptionQuery(
diff --git a/src/views/Gantt.vue b/src/views/Gantt.vue
index e26b0b775..56b6d3b75 100644
--- a/src/views/Gantt.vue
+++ b/src/views/Gantt.vue
@@ -95,7 +95,6 @@ import {
   debounce
 } from 'lodash'
 import gql from 'graphql-tag'
-import { getPageTitle } from '@/utils/index'
 import graphqlMixin from '@/mixins/graphql'
 import {
   initialOptions,
@@ -170,12 +169,6 @@ export default {
     GanttChart,
   },
 
-  head () {
-    return {
-      title: getPageTitle('App.workflow', { name: this.workflowName })
-    }
-  },
-
   props: {
     initialOptions,
   },
diff --git a/src/views/Graph.vue b/src/views/Graph.vue
index 74d8a9f9f..2c149952c 100644
--- a/src/views/Graph.vue
+++ b/src/views/Graph.vue
@@ -101,7 +101,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script>
 import gql from 'graphql-tag'
 import { mapGetters } from 'vuex'
-import { getPageTitle } from '@/utils/index'
 import { useJobTheme } from '@/composables/localStorage'
 import graphqlMixin from '@/mixins/graphql'
 import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
@@ -231,12 +230,6 @@ export default {
     ViewToolbar
   },
 
-  head () {
-    return {
-      title: getPageTitle('App.workflow', { name: this.workflowName })
-    }
-  },
-
   props: { initialOptions },
 
   setup (props, { emit }) {
diff --git a/src/views/GraphiQL.vue b/src/views/GraphiQL.vue
index 1360b7429..6147d5978 100644
--- a/src/views/GraphiQL.vue
+++ b/src/views/GraphiQL.vue
@@ -27,11 +27,6 @@ import { fallbackGraphQLFetcher, graphQLFetcher } from '@/graphql/graphiql'
 
 export default {
   name: 'GraphiQL',
-  head () {
-    return {
-      title: 'GraphiQL'
-    }
-  },
   data () {
     return {
       fetcher: null,
diff --git a/src/views/Guide.vue b/src/views/Guide.vue
index cd45f659b..46d6af493 100644
--- a/src/views/Guide.vue
+++ b/src/views/Guide.vue
@@ -187,15 +187,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import Task from '@/components/cylc/Task.vue'
 import Job from '@/components/cylc/Job.vue'
 import { TaskStateUserOrder } from '@/model/TaskState.model'
-import { getPageTitle } from '@/utils'
 
 export default {
   name: 'Guide',
-  head () {
-    return {
-      title: getPageTitle('App.guide')
-    }
-  },
   components: {
     task: Task,
     job: Job
diff --git a/src/views/Log.vue b/src/views/Log.vue
index 2e2660b16..7243eba6a 100644
--- a/src/views/Log.vue
+++ b/src/views/Log.vue
@@ -183,7 +183,6 @@ import {
   mdiPowerPlug,
   mdiWrap,
 } from '@mdi/js'
-import { getPageTitle } from '@/utils/index'
 import { btnProps } from '@/utils/viewToolbar'
 import graphqlMixin from '@/mixins/graphql'
 import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
@@ -318,13 +317,6 @@ export default {
     LogComponent,
     ViewToolbar
   },
-
-  head () {
-    return {
-      title: getPageTitle('App.workflow', { name: this.workflowName })
-    }
-  },
-
   emits: [
     updateInitialOptionsEvent,
   ],
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
index 067482c5c..d4d8ff974 100644
--- a/src/views/NotFound.vue
+++ b/src/views/NotFound.vue
@@ -43,15 +43,3 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </v-card>
   </div>
 </template>
-
-<script>
-import { getPageTitle } from '@/utils/index'
-
-export default {
-  head () {
-    return {
-      title: getPageTitle('App.notFound')
-    }
-  }
-}
-</script>
diff --git a/src/views/SimpleTree.vue b/src/views/SimpleTree.vue
index d0ba70638..ca2565a58 100644
--- a/src/views/SimpleTree.vue
+++ b/src/views/SimpleTree.vue
@@ -106,7 +106,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script>
 import gql from 'graphql-tag'
 import { mapState, mapGetters } from 'vuex'
-import { getPageTitle } from '@/utils/index'
 import graphqlMixin from '@/mixins/graphql'
 import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
 import SubscriptionQuery from '@/model/SubscriptionQuery.model'
@@ -193,13 +192,6 @@ export default {
     subscriptionComponentMixin
   ],
 
-  // This sets the page title.
-  head () {
-    return {
-      title: getPageTitle('App.workflow', { name: this.workflowName })
-    }
-  },
-
   computed: {
     // This gives us direct access to the data store if we need it:
     ...mapState('workflows', ['cylcTree']),
diff --git a/src/views/Table.vue b/src/views/Table.vue
index 7530adf3f..4830ffdb9 100644
--- a/src/views/Table.vue
+++ b/src/views/Table.vue
@@ -56,7 +56,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import { getPageTitle } from '@/utils/index'
 import graphqlMixin from '@/mixins/graphql'
 import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
 import {
@@ -163,12 +162,6 @@ export default {
     TaskFilter
   },
 
-  head () {
-    return {
-      title: getPageTitle('App.workflow', { name: this.workflowName })
-    }
-  },
-
   emits: [updateInitialOptionsEvent],
 
   props: {
diff --git a/src/views/Tree.vue b/src/views/Tree.vue
index af08d4b74..a411713c8 100644
--- a/src/views/Tree.vue
+++ b/src/views/Tree.vue
@@ -85,7 +85,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { mapState, mapGetters } from 'vuex'
 import { mdiPlus, mdiMinus } from '@mdi/js'
 import gql from 'graphql-tag'
-import { getPageTitle } from '@/utils/index'
 import graphqlMixin from '@/mixins/graphql'
 import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
 import {
@@ -214,12 +213,6 @@ export default {
     TreeComponent
   },
 
-  head () {
-    return {
-      title: getPageTitle('App.workflow', { name: this.workflowName })
-    }
-  },
-
   props: { initialOptions },
 
   setup (props, { emit }) {
diff --git a/src/views/UserProfile.vue b/src/views/UserProfile.vue
index 83f6e92dd..ff3524f24 100644
--- a/src/views/UserProfile.vue
+++ b/src/views/UserProfile.vue
@@ -244,7 +244,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { mapState } from 'vuex'
 import { mdiCog, mdiFormatFontSizeDecrease, mdiFormatFontSizeIncrease } from '@mdi/js'
 import { useCyclePointsOrderDesc, useJobTheme, useReducedAnimation } from '@/composables/localStorage'
-import { getPageTitle } from '@/utils/index'
 import { decreaseFontSize, getCurrentFontSize, increaseFontSize, resetFontSize } from '@/utils/font-size'
 import { allViews, useDefaultView } from '@/views/views.js'
 import Job from '@/components/cylc/Job.vue'
@@ -272,12 +271,6 @@ export default {
     ...mapState('user', ['user']),
   },
 
-  head () {
-    return {
-      title: getPageTitle('App.userProfile')
-    }
-  },
-
   methods: {
     resetFontSize,
     decreaseFontSize,
diff --git a/src/views/Workflows.vue b/src/views/Workflows.vue
index 684d1deae..13e1fde05 100644
--- a/src/views/Workflows.vue
+++ b/src/views/Workflows.vue
@@ -22,7 +22,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script>
 import { mapState } from 'vuex'
 import GScan from '@/components/cylc/gscan/GScan.vue'
-import { getPageTitle } from '@/utils/index'
 import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
 import SubscriptionQuery from '@/model/SubscriptionQuery.model'
 import gql from 'graphql-tag'
@@ -86,12 +85,6 @@ export default {
     GScan
   },
 
-  head () {
-    return {
-      title: getPageTitle('App.workflows')
-    }
-  },
-
   data () {
     return {
       query: new SubscriptionQuery(
diff --git a/src/views/WorkflowsTable.vue b/src/views/WorkflowsTable.vue
index 6d95e43fe..a09ffe7aa 100644
--- a/src/views/WorkflowsTable.vue
+++ b/src/views/WorkflowsTable.vue
@@ -75,7 +75,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { mapState, mapGetters } from 'vuex'
 import { i18n } from '@/i18n'
 import { mdiTable } from '@mdi/js'
-import { getPageTitle } from '@/utils/index'
 import subscriptionMixin from '@/mixins/subscription'
 import SubscriptionQuery from '@/model/SubscriptionQuery.model'
 import WorkflowIcon from '@/components/cylc/gscan/WorkflowIcon.vue'
@@ -117,12 +116,6 @@ export default {
     subscriptionMixin
   ],
 
-  head () {
-    return {
-      title: getPageTitle('App.workflows')
-    }
-  },
-
   components: {
     WorkflowIcon
   },
diff --git a/src/views/Workspace.vue b/src/views/Workspace.vue
index c8dfb9c3b..32746b774 100644
--- a/src/views/Workspace.vue
+++ b/src/views/Workspace.vue
@@ -39,7 +39,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { ref } from 'vue'
 import { onBeforeRouteUpdate } from 'vue-router'
 import { allViews } from '@/views/views.js'
-import { getPageTitle } from '@/utils/index'
 import graphqlMixin from '@/mixins/graphql'
 import subscriptionMixin from '@/mixins/subscription'
 import ViewState from '@/model/ViewState.model'
@@ -60,12 +59,6 @@ export default {
     Toolbar
   },
 
-  head () {
-    return {
-      title: getPageTitle('App.workflow', { name: this.workflowName })
-    }
-  },
-
   setup () {
     /** Template ref */
     const lumino = ref(null)
diff --git a/tests/unit/router/index.spec.js b/tests/unit/router/index.spec.js
new file mode 100644
index 000000000..bb7be5ea0
--- /dev/null
+++ b/tests/unit/router/index.spec.js
@@ -0,0 +1,48 @@
+/*
+ * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { getPageTitle } from '@/router'
+
+describe('getPageTitle()', () => {
+  it.each([
+    {
+      route: {
+        meta: {},
+      },
+      expected: 'Cylc UI',
+      id: 'default',
+    },
+    {
+      route: {
+        meta: { title: 'Page Title' },
+        params: { foo: 22 },
+      },
+      expected: 'Cylc UI | Page Title',
+      id: 'meta.title',
+    },
+    {
+      route: {
+        meta: { getTitle: (params) => `Dynamic Page Title ${params.foo}` },
+        params: { foo: 22 },
+      },
+      expected: 'Cylc UI | Dynamic Page Title 22',
+      id: 'meta.getTitle',
+    },
+  ])('$id', ({ route, expected, id }) => {
+    expect(getPageTitle(route)).toEqual(expected)
+  })
+})
diff --git a/tests/unit/utils/index.spec.js b/tests/unit/utils/index.spec.js
index ab6ba4662..25fa72bf5 100644
--- a/tests/unit/utils/index.spec.js
+++ b/tests/unit/utils/index.spec.js
@@ -1,4 +1,4 @@
-/**
+/*
  * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
  *
  * This program is free software: you can redistribute it and/or modify
@@ -16,13 +16,7 @@
  */
 
 import { nextTick, ref } from 'vue'
-import { getPageTitle, when, until } from '@/utils/index'
-
-describe('getPageTitle()', () => {
-  it('displays the application title correctly', () => {
-    expect(getPageTitle('App.dashboard')).to.equal('Cylc UI | Dashboard')
-  })
-})
+import { when, until } from '@/utils/index'
 
 describe.each([
   { func: when, description: 'watches source until true and then stops watching' },
diff --git a/yarn.lock b/yarn.lock
index 222ec8a48..5f28b1799 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2316,49 +2316,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@unhead/dom@npm:1.9.9":
-  version: 1.9.9
-  resolution: "@unhead/dom@npm:1.9.9"
-  dependencies:
-    "@unhead/schema": "npm:1.9.9"
-    "@unhead/shared": "npm:1.9.9"
-  checksum: 10c0/492e2c300e87ce9b0b952a62a26b62c88f00bd90ba1a334dc51fd9f74e5aacd1edc128a578788120ec5f193a517a76736d1a80395aa5ac951d0fb7d93dfa2793
-  languageName: node
-  linkType: hard
-
-"@unhead/schema@npm:1.9.9":
-  version: 1.9.9
-  resolution: "@unhead/schema@npm:1.9.9"
-  dependencies:
-    hookable: "npm:^5.5.3"
-    zhead: "npm:^2.2.4"
-  checksum: 10c0/5cff3830f3a593013422c64c47548c7d7e9a8310b7aedf9957b7afd3c9fb3f709e0af7e6815564ad0bc79ea880df03ba4e30b20ed66f615bc40612952ef43c35
-  languageName: node
-  linkType: hard
-
-"@unhead/shared@npm:1.9.9":
-  version: 1.9.9
-  resolution: "@unhead/shared@npm:1.9.9"
-  dependencies:
-    "@unhead/schema": "npm:1.9.9"
-  checksum: 10c0/6723a54f6724915dd86e41649eb899d557366b806feed4976ff1f9264871f1343a7ad43fca3eb0ae4d6fe678084b3e377a34b164c46a76d1f129d4eb12feaff4
-  languageName: node
-  linkType: hard
-
-"@unhead/vue@npm:1.9.9":
-  version: 1.9.9
-  resolution: "@unhead/vue@npm:1.9.9"
-  dependencies:
-    "@unhead/schema": "npm:1.9.9"
-    "@unhead/shared": "npm:1.9.9"
-    hookable: "npm:^5.5.3"
-    unhead: "npm:1.9.9"
-  peerDependencies:
-    vue: ">=2.7 || >=3"
-  checksum: 10c0/dbd0975eb6b96cbb59e4e8d02d2f58cec538c3399c6f2dc6fddf7f62b43f85e52b9d8f6eea433e9b1013df8ffd9eb6fa68fdbe90e128cfe89e90a5986363b3eb
-  languageName: node
-  linkType: hard
-
 "@vitejs/plugin-vue@npm:5.0.4":
   version: 5.0.4
   resolution: "@vitejs/plugin-vue@npm:5.0.4"
@@ -3827,7 +3784,6 @@ __metadata:
     "@lumino/default-theme": "npm:2.1.5"
     "@lumino/widgets": "npm:2.3.2"
     "@mdi/js": "npm:7.4.47"
-    "@unhead/vue": "npm:1.9.9"
     "@vitejs/plugin-vue": "npm:5.0.4"
     "@vitest/coverage-istanbul": "npm:1.6.0"
     "@vue/test-utils": "npm:2.4.6"
@@ -6042,13 +5998,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hookable@npm:^5.5.3":
-  version: 5.5.3
-  resolution: "hookable@npm:5.5.3"
-  checksum: 10c0/275f4cc84d27f8d48c5a5cd5685b6c0fea9291be9deea5bff0cfa72856ed566abde1dcd8cb1da0f9a70b4da3d7ec0d60dc3554c4edbba647058cc38816eced3d
-  languageName: node
-  linkType: hard
-
 "html-encoding-sniffer@npm:^4.0.0":
   version: 4.0.0
   resolution: "html-encoding-sniffer@npm:4.0.0"
@@ -10181,18 +10130,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unhead@npm:1.9.9":
-  version: 1.9.9
-  resolution: "unhead@npm:1.9.9"
-  dependencies:
-    "@unhead/dom": "npm:1.9.9"
-    "@unhead/schema": "npm:1.9.9"
-    "@unhead/shared": "npm:1.9.9"
-    hookable: "npm:^5.5.3"
-  checksum: 10c0/6e87cca3a147dd3fa6844c929827f9091b518ad07646aa658d3118e991a260d5321c91097a6ff6f639a470baa5c5df1371140204bcca4035b884cbb112d56023
-  languageName: node
-  linkType: hard
-
 "unique-filename@npm:^3.0.0":
   version: 3.0.0
   resolution: "unique-filename@npm:3.0.0"
@@ -11073,10 +11010,3 @@ __metadata:
   checksum: 10c0/71cc2f2bbb537300c3f569e25693d37b3bc91f225cefce251a71c30bc6bb3e7f8e9420ca0eb57f2ac9e492b085b8dfa075fd1e8195c40b83c951dd59c6e4fbf8
   languageName: node
   linkType: hard
-
-"zhead@npm:^2.2.4":
-  version: 2.2.4
-  resolution: "zhead@npm:2.2.4"
-  checksum: 10c0/3d166fb661f1b7fdf8a0ef2222d9e574ab241e72141f2f1fda62a9250ca73aabf2eaf0d66046a3984cd24d1dd9bac231338c6271684d6b8caa6b66af7c45f275
-  languageName: node
-  linkType: hard

From b0204f2d7d2d4848bd5f6d7ec9972f4ef23fc691 Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Wed, 22 May 2024 18:17:26 +0100
Subject: [PATCH 3/4] Remove unused code & tidy

---
 src/mixins/graphql.js                          |  9 +++++----
 src/router/index.js                            |  3 ---
 src/store/workflows.module.js                  | 14 --------------
 tests/unit/components/cylc/toolbar.vue.spec.js |  1 -
 4 files changed, 5 insertions(+), 22 deletions(-)

diff --git a/src/mixins/graphql.js b/src/mixins/graphql.js
index 97363c4f7..26d208000 100644
--- a/src/mixins/graphql.js
+++ b/src/mixins/graphql.js
@@ -1,6 +1,4 @@
-import { mapState } from 'vuex'
-
-/**
+/*
  * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
  *
  * This program is free software: you can redistribute it and/or modify
@@ -17,15 +15,18 @@ import { mapState } from 'vuex'
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { mapState } from 'vuex'
+
 /**
  * A mixin that contains data used for a GraphQL subscription, such as the
  * query variables.
  *
- * To be used in Views that are bound to VueRouter routes that contain the
+ * To be used in Views that are bound to Vue-Router routes that contain the
  * :workflowName param.
  */
 export default {
   props: {
+    /** This is set by vue-router */
     workflowName: {
       type: String,
       required: true
diff --git a/src/router/index.js b/src/router/index.js
index ea6d2451a..4d3f00b57 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -90,15 +90,12 @@ router.beforeEach(async (to, from) => {
 
   // Set toolbar title:
   let title = to.name
-  let workflowName = null
   if (to.meta.toolbar) {
     // When a workflow is being displayed, we set the title to a
     // different value.
     title = to.params.workflowName
-    workflowName = to.params.workflowName
   }
   store.commit('app/setTitle', title)
-  store.commit('workflows/SET_WORKFLOW_NAME', workflowName)
   store.dispatch('setAlert', null)
 })
 
diff --git a/src/store/workflows.module.js b/src/store/workflows.module.js
index bd68fd89f..7fcd95797 100644
--- a/src/store/workflows.module.js
+++ b/src/store/workflows.module.js
@@ -33,16 +33,6 @@ const state = () => ({
     $index: {},
     children: []
   },
-  /**
-   * This holds the name of the current workflow. This is set by VueRouter
-   * and is used to decide what's the current workflow. It is used in conjunction
-   * with the workflows/workflows (above) when finding the current workflow and
-   * using it, for instance, to create the GraphQL variables of a workflow
-   * view (see mixins used in the Tree View).
-   *
-   * @type {String}
-   */
-  workflowName: null
 })
 
 const getters = {
@@ -475,10 +465,6 @@ function remove (state, prunedID) {
 }
 
 const mutations = {
-  // the old callback methods
-  SET_WORKFLOW_NAME (state, data) {
-    state.workflowName = data
-  },
   // the new cylc tree methods
   CREATE: createTree,
   UPDATE: update,
diff --git a/tests/unit/components/cylc/toolbar.vue.spec.js b/tests/unit/components/cylc/toolbar.vue.spec.js
index ccefc99df..a615d3617 100644
--- a/tests/unit/components/cylc/toolbar.vue.spec.js
+++ b/tests/unit/components/cylc/toolbar.vue.spec.js
@@ -48,7 +48,6 @@ describe('Toolbar component', () => {
         status: WorkflowState.RUNNING.name
       }
     ]
-    store.state.workflows.workflowName = 'test'
   })
 
   it('should mount the component', async () => {

From d5bb767844793d73902364b4f0878e2dfc316102 Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Wed, 22 May 2024 18:17:26 +0100
Subject: [PATCH 4/4] Remove semi-broken navigation fade transition

---
 src/layouts/Default.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/layouts/Default.vue b/src/layouts/Default.vue
index 0a98bae28..533be965e 100644
--- a/src/layouts/Default.vue
+++ b/src/layouts/Default.vue
@@ -29,9 +29,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         class="overflow-auto"
         :style="coreViewStyle"
       >
-        <v-fade-transition mode="out-in">
-          <slot/>
-        </v-fade-transition>
+        <slot/>
       </div>
     </v-main>
   </div>