Set page title per-route rather than per-view

Multiple views may be included in a page, so the previous approach was flawed

Author: MetRonnie

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",

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,

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
           }

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"

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()
 

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):

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(() => {

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,75 +17,82 @@
 
 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
     },
     props: true
   },
   {
     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'
     }
   },
   {
     path: '/graphiql',
     view: 'GraphiQL',
     meta: {
+      title: 'GraphiQL',
       layout: 'empty'
     }
   },
   {
     path: '/:catchAll(.*)',
     view: 'NotFound',
     meta: {
+      title: i18n.global.t('App.notFound'),
       layout: 'empty'
     }
   },
 
   // 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',
     },
-  }
+  },
 ]

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).

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()
   },