web/satellite/vuetify-poc: include project and route name in page title

This change adds the name of the current route and the name of the
currently-selected project to the webpage title.

Resolves #6331

Change-Id: Ia42f6a5f9411e92a8217b21757ff7581bac2c3be

web/satellite/vuetify-poc/src/plugins/index.ts

@@ -11,7 +11,7 @@
 import { App } from 'vue';
 import { createPinia, setActivePinia } from 'pinia';
 
-import router from '../router';
+import { router, startTitleWatcher } from '../router';
 
 import vuetify from './vuetify';
 
@@ -26,4 +26,5 @@ export function registerPlugins(app: App<Element>) {
         .use(router)
         .use(pinia)
         .use(NotificatorPlugin);
+    startTitleWatcher();
 }

web/satellite/vuetify-poc/src/router/index.ts

@@ -1,10 +1,27 @@
 // Copyright (C) 2023 Storj Labs, Inc.
 // See LICENSE for copying information.
 
+import { watch } from 'vue';
 import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router';
 
+import { useProjectsStore } from '@/store/modules/projectsStore';
+import { useConfigStore } from '@/store/modules/configStore';
 import { useAppStore } from '@poc/store/appStore';
 
+export enum RouteName {
+    Billing = 'Billing',
+    AccountSettings = 'Account Settings',
+    DesignLibrary = 'Design Library',
+    Projects = 'Projects',
+    Project = 'Project',
+    Dashboard = 'Dashboard',
+    Buckets = 'Buckets',
+    Bucket = 'Bucket',
+    Access = 'Access',
+    Team = 'Team',
+    ProjectSettings = 'Project Settings',
+}
+
 const routes: RouteRecordRaw[] = [
     {
         path: '/',
@@ -17,17 +34,17 @@ const routes: RouteRecordRaw[] = [
         children: [
             {
                 path: 'billing',
-                name: 'Billing',
+                name: RouteName.Billing,
                 component: () => import(/* webpackChunkName: "Billing" */ '@poc/views/Billing.vue'),
             },
             {
                 path: 'settings',
-                name: 'Account Settings',
+                name: RouteName.AccountSettings,
                 component: () => import(/* webpackChunkName: "MyAccount" */ '@poc/views/AccountSettings.vue'),
             },
             {
                 path: 'design-library',
-                name: 'Design Library',
+                name: RouteName.DesignLibrary,
                 component: () => import(/* webpackChunkName: "DesignLibrary" */ '@poc/views/DesignLibrary.vue'),
             },
         ],
@@ -38,52 +55,72 @@ const routes: RouteRecordRaw[] = [
         children: [
             {
                 path: '',
-                name: 'Projects',
+                name: RouteName.Projects,
                 component: () => import(/* webpackChunkName: "Projects" */ '@poc/views/Projects.vue'),
             },
         ],
     },
     {
         path: '/projects/:projectId',
+        name: RouteName.Project,
         component: () => import('@poc/layouts/default/Default.vue'),
         children: [
             {
                 path: 'dashboard',
-                name: 'Dashboard',
+                name: RouteName.Dashboard,
                 component: () => import(/* webpackChunkName: "home" */ '@poc/views/Dashboard.vue'),
             },
             {
                 path: 'buckets',
-                name: 'Buckets',
+                name: RouteName.Buckets,
                 component: () => import(/* webpackChunkName: "Buckets" */ '@poc/views/Buckets.vue'),
             },
             {
                 path: 'buckets/:browserPath+',
-                name: 'Bucket',
+                name: RouteName.Bucket,
                 component: () => import(/* webpackChunkName: "Bucket" */ '@poc/views/Bucket.vue'),
             },
             {
                 path: 'access',
-                name: 'Access',
+                name: RouteName.Access,
                 component: () => import(/* webpackChunkName: "Access" */ '@poc/views/Access.vue'),
             },
             {
                 path: 'team',
-                name: 'Team',
+                name: RouteName.Team,
                 component: () => import(/* webpackChunkName: "Team" */ '@poc/views/Team.vue'),
             },
             {
                 path: 'settings',
-                name: 'Project Settings',
+                name: RouteName.ProjectSettings,
                 component: () => import(/* webpackChunkName: "ProjectSettings" */ '@poc/views/ProjectSettings.vue'),
             },
         ],
     },
 ];
 
-const router = createRouter({
+export const router = createRouter({
     history: createWebHistory(import.meta.env.VITE_VUETIFY_PREFIX),
     routes,
 });
 
+export function startTitleWatcher(): void {
+    const projectsStore = useProjectsStore();
+    const configStore = useConfigStore();
+
+    watch(
+        () => [router.currentRoute.value, projectsStore.state.selectedProject.name] as const,
+        ([route, projectName]) => {
+            const parts = [configStore.state.config.satelliteName];
+
+            if (route.name) parts.unshift(route.name as string);
+            if (route.matched.some(route => route.name === RouteName.Project) && projectName) {
+                parts.unshift(projectName);
+            }
+
+            document.title = parts.join(' | ');
+        },
+    );
+}
+
 export default router;