Merge pull request cylc#1794 from MetRonnie/router

Fix router issues

Author: wxtim

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

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

@@ -254,7 +254,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/workspace/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

@@ -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>
@@ -42,6 +40,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 +56,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

@@ -30,8 +30,8 @@ import { i18n } from '@/i18n/index'
 import router from '@/router/index'
 import { store } from '@/store/index'
 import { createVuetify } from 'vuetify'
-import { createHead, VueHeadMixin } from '@unhead/vue'
 
+import 'nprogress/css/nprogress.css'
 import '@/styles/index.scss'
 
 if (location.search) {
@@ -50,13 +50,10 @@ if (location.search) {
   // Normal app start
   const app = createApp(App)
 
-  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)
 

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

src/router/index.js

@@ -23,35 +23,41 @@
  * 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'
+import { i18n } from '@/i18n'
 
-// Routes
-import paths from './paths'
+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 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`)
+  }
+}
+
+/**
+ * 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(),
-  routes: paths.map(path => route(path)),
-  //  .concat([{ path: '*', redirect: '/dashboard' }]),
+  routes: paths.map(getRoute),
   scrollBehavior (to, from, savedPosition) {
     if (savedPosition) {
       return savedPosition
@@ -66,34 +72,40 @@ 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) {
-    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
+  if (to.meta.toolbar) {
+    // When a workflow is being displayed, we set the title to a
+    // different value.
+    title = to.params.workflowName
   }
+  store.commit('app/setTitle', title)
+  store.dispatch('setAlert', null)
 })
 
 router.afterEach(() => {
   NProgress.done()
 })
 
+router.onError((err, to, from) => {
+  store.dispatch('setAlert', new Alert(err, 'error'))
+  NProgress.done()
+})
+
 export default router