satellite/admin-ui: clean up routing

Related: #7601

Change-Id: Idc6dc0eff6e59e78e186de53d7801e86550ad982

Author: wilfred-asomanii

satellite/admin/back-office/ui/src/components/AccountProjectsTableComponent.vue

@@ -219,7 +219,10 @@ const projects = computed<ProjectTableItem[]>(() => {
 */
 async function selectProject(id: string): Promise<void> {
     await appStore.selectProject(id);
-    router.push(`${router.currentRoute.value.path}/projects/${id}`);
+    router.push({
+        name: ROUTES.AccountProject.name,
+        params: { email: appStore.state.userAccount?.email, id },
+    });
 }
 
 function getPercentColor(percent: number) {

satellite/admin/back-office/ui/src/router/index.ts

@@ -4,6 +4,21 @@
 import { watch } from 'vue';
 import { createRouter, createWebHistory } from 'vue-router';
 
+import { NavigationLink } from '@/router/navigation';
+
+export abstract class ROUTES {
+    public static AccountSearch = new NavigationLink('/account-search', 'Account Search');
+    public static Accounts = new NavigationLink('/accounts', 'Accounts');
+    public static Account = new NavigationLink(':email', 'Account');
+    public static AccountProject = new NavigationLink('projects/:id', 'Account Project');
+
+    public static Projects = new NavigationLink('/projects', 'Projects');
+    public static ProjectDetail = new NavigationLink('/projects-details', 'Project Details');
+
+    public static BucketDetail = new NavigationLink('/bucket-details', 'Bucket Details');
+    public static AdminSettings = new NavigationLink('/admin-settings', 'Admin Settings');
+}
+
 const routes = [
     {
         path: '/',
@@ -18,7 +33,7 @@ const routes = [
         // ],
         // TODO: once the switch satellite feature is implemented, remove the redirection below and
         // uncomment the above code.
-        redirect: '/account-search', // directly redirect
+        redirect: ROUTES.AccountSearch.path, // directly redirect
     },
     {
         path: '/admin',
@@ -30,53 +45,53 @@ const routes = [
                 component: () => import(/* webpackChunkName: "Dashboard" */ '@/views/Dashboard.vue'),
             },
             {
-                path: '/accounts',
+                path: ROUTES.Accounts.path,
                 children: [
                     {
                         path: '',
-                        name: 'Accounts',
+                        name: ROUTES.Accounts.name,
                         component: () => import(/* webpackChunkName: "Users" */ '@/views/Accounts.vue'),
                     },
                     {
-                        path: ':email',
+                        path: ROUTES.Account.path,
                         children: [
                             {
                                 path: '',
-                                name: 'Account Details',
+                                name: ROUTES.Account.name,
                                 component: () => import(/* webpackChunkName: "Users" */ '@/views/AccountDetails.vue'),
                             },
                             {
-                                path: 'projects/:id',
-                                name: 'User Project Details',
+                                path: ROUTES.AccountProject.path,
+                                name: ROUTES.AccountProject.name,
                                 component: () => import(/* webpackChunkName: "Users" */ '@/views/ProjectDetails.vue'),
                             },
                         ],
                     },
                 ],
             },
             {
-                path: '/account-search',
-                name: 'Search Account',
+                path: ROUTES.AccountSearch.path,
+                name: ROUTES.AccountSearch.name,
                 component: () => import(/* webpackChunkName: "Users" */ '@/views/AccountSearch.vue'),
             },
             {
-                path: '/projects',
-                name: 'Projects',
+                path: ROUTES.Projects.path,
+                name: ROUTES.Projects.name,
                 component: () => import(/* webpackChunkName: "Projects" */ '@/views/Projects.vue'),
             },
             {
-                path: '/project-details',
-                name: 'Project Details',
+                path: ROUTES.ProjectDetail.path,
+                name: ROUTES.ProjectDetail.name,
                 component: () => import(/* webpackChunkName: "ProjectDetails" */ '@/views/ProjectDetails.vue'),
             },
             {
-                path: '/bucket-details',
-                name: 'Bucket Details',
+                path: ROUTES.BucketDetail.path,
+                name: ROUTES.BucketDetail.name,
                 component: () => import(/* webpackChunkName: "BucketDetails" */ '@/views/BucketDetails.vue'),
             },
             {
-                path: '/admin-settings',
-                name: 'Admin Settings',
+                path: ROUTES.AdminSettings.path,
+                name: ROUTES.AdminSettings.name,
                 component: () => import(/* webpackChunkName: "AdminSettings" */ '@/views/AdminSettings.vue'),
             },
         ],

satellite/admin/back-office/ui/src/router/navigation.ts

@@ -0,0 +1,20 @@
+// Copyright (C) 2025 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+export class NavigationLink {
+    private readonly _path: string;
+    private readonly _name: string;
+
+    public constructor(path: string, name: string) {
+        this._path = path;
+        this._name = name;
+    }
+
+    public get path(): string {
+        return this._path;
+    }
+
+    public get name(): string {
+        return this._name;
+    }
+}

satellite/admin/back-office/ui/src/store/app.ts

@@ -27,12 +27,6 @@ export const useAppStore = defineStore('app', () => {
         return state.userAccount;
     }
 
-    async function getProject(id: string): Promise<Project> {
-        state.selectedProject = await projectApi.getProject(id);
-
-        return state.selectedProject;
-    }
-
     function clearUser(): void {
         state.userAccount = null;
     }
@@ -53,8 +47,10 @@ export const useAppStore = defineStore('app', () => {
         return `Unknown (${code})`;
     }
 
-    async function selectProject(id: string): Promise<void> {
+    async function selectProject(id: string): Promise<Project> {
         state.selectedProject = await projectApi.getProject(id);
+
+        return state.selectedProject;
     }
 
     async function updateProjectLimits(id: string, limits: ProjectLimitsUpdate): Promise<void> {
@@ -84,7 +80,6 @@ export const useAppStore = defineStore('app', () => {
     return {
         state,
         getUserByEmail,
-        getProject,
         clearUser,
         getPlacements,
         getPlacementText,

satellite/admin/back-office/ui/src/views/AccountDetails.vue

@@ -192,6 +192,7 @@ import {
 import { FeatureFlags, UserAccount } from '@/api/client.gen';
 import { useAppStore } from '@/store/app';
 import { sizeToBase10String } from '@/utils/memory';
+import { ROUTES } from '@/router';
 
 import PageTitleComponent from '@/components/PageTitleComponent.vue';
 import AccountProjectsTableComponent from '@/components/AccountProjectsTableComponent.vue';
@@ -275,7 +276,7 @@ onBeforeMount(async () => {
         const email = router.currentRoute.value.params.email as string;
         await appStore.getUserByEmail(email);
     } catch {
-        router.push('/account-search');
+        router.push({ name: ROUTES.AccountSearch.name });
     }
 });
 

satellite/admin/back-office/ui/src/views/AccountSearch.vue

@@ -59,6 +59,7 @@ import { VContainer, VRow, VCol, VBtn, VCard, VCardText, VForm, VTextField } fro
 import { FeatureFlags } from '@/api/client.gen';
 import { useAppStore } from '@/store/app';
 import { useNotificationsStore } from '@/store/notifications';
+import { ROUTES } from '@/router';
 
 import PageTitleComponent from '@/components/PageTitleComponent.vue';
 import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
@@ -91,7 +92,7 @@ async function goToUser(): Promise<void> {
     for (let attempt = 0; attempt < maxAttempts; attempt++) {
         try {
             const user = await appStore.getUserByEmail(email.value);
-            router.push(`/accounts/${user.email}`);
+            router.push({ name: ROUTES.Account.name, params: { email: user.email } });
             isLoading.value = false;
             return;
         } catch (error) {

satellite/admin/back-office/ui/src/views/ProjectDetails.vue

@@ -189,6 +189,7 @@ import { useRouter } from 'vue-router';
 
 import { FeatureFlags, Project, UserAccount } from '@/api/client.gen';
 import { useAppStore } from '@/store/app';
+import { ROUTES } from '@/router';
 
 import PageTitleComponent from '@/components/PageTitleComponent.vue';
 import UsageProgressComponent from '@/components/UsageProgressComponent.vue';
@@ -229,12 +230,12 @@ onMounted(async () => {
 
     try {
         await Promise.all([
-            appStore.getProject(projectID),
+            appStore.selectProject(projectID),
             appStore.getUserByEmail(userEmail),
         ]);
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
     } catch (error) {
-        router.push('/account-search');
+        router.push({ name: ROUTES.AccountSearch.name });
     }
 });
 </script>