Fix empty screen flash before nav on clicking project in top bar (#2156)

fix empty screen flash before nav on clicking project in top bar

Author: david-crespo

app/components/TopBarPicker.tsx

@@ -259,7 +259,7 @@ export function ProjectPicker({ project }: { project?: Project }) {
   const { data: projects } = useApiQuery('projectList', { query: { limit: 200 } })
   const items = (projects?.items || []).map(({ name }) => ({
     label: name,
-    to: pb.instances({ project: name }),
+    to: pb.project({ project: name }),
   }))
 
   return (

app/forms/project-create.tsx

@@ -34,7 +34,7 @@ export function CreateProjectSideModalForm() {
       // avoid the project fetch when the project page loads since we have the data
       queryClient.setQueryData('projectView', { path: { project: project.name } }, project)
       addToast({ content: 'Your project has been created' })
-      navigate(pb.instances({ project: project.name }))
+      navigate(pb.project({ project: project.name }))
     },
   })
 

app/pages/ProjectsPage.tsx

@@ -49,7 +49,7 @@ ProjectsPage.loader = async () => {
 const colHelper = createColumnHelper<Project>()
 const staticCols = [
   colHelper.accessor('name', {
-    cell: makeLinkCell((project) => pb.instances({ project })),
+    cell: makeLinkCell((project) => pb.project({ project })),
   }),
   colHelper.accessor('description', Columns.description),
   colHelper.accessor('timeCreated', Columns.timeCreated),
@@ -107,7 +107,7 @@ export function ProjectsPage() {
         },
         ...(projects?.items || []).map((p) => ({
           value: p.name,
-          onSelect: () => navigate(pb.instances({ project: p.name })),
+          onSelect: () => navigate(pb.project({ project: p.name })),
           navGroup: 'Go to project',
         })),
       ],

app/util/path-builder.spec.ts

@@ -51,7 +51,7 @@ test('path builder', () => {
         "ipPoolsNew": "/system/networking/ip-pools-new",
         "nics": "/projects/p/instances/i/network-interfaces",
         "profile": "/settings/profile",
-        "project": "/projects/p",
+        "project": "/projects/p/instances",
         "projectAccess": "/projects/p/access",
         "projectEdit": "/projects/p/edit",
         "projectImage": "/projects/p/images/im",

app/util/path-builder.ts

@@ -22,20 +22,25 @@ type SiloImage = Required<PP.SiloImage>
 type IpPool = Required<PP.IpPool>
 type FloatingIp = Required<PP.FloatingIp>
 
+// this is used as the basis for many routes, but is itself not a route we ever
+// want to link directly to. so we use this to build the routes but pb.project()
+// is different (includes /instances)
+const projectBase = ({ project }: Project) => `${pb.projects()}/${project}`
+
 export const pb = {
   projects: () => `/projects`,
   projectsNew: () => `/projects-new`,
-  project: ({ project }: Project) => `${pb.projects()}/${project}`,
-  projectEdit: (params: Project) => `${pb.project(params)}/edit`,
+  project: (params: Project) => `${projectBase(params)}/instances`,
+  projectEdit: (params: Project) => `${projectBase(params)}/edit`,
 
-  projectAccess: (params: Project) => `${pb.project(params)}/access`,
-  projectImages: (params: Project) => `${pb.project(params)}/images`,
-  projectImagesNew: (params: Project) => `${pb.project(params)}/images-new`,
+  projectAccess: (params: Project) => `${projectBase(params)}/access`,
+  projectImages: (params: Project) => `${projectBase(params)}/images`,
+  projectImagesNew: (params: Project) => `${projectBase(params)}/images-new`,
   projectImage: (params: Image) => `${pb.projectImages(params)}/${params.image}`,
   projectImageEdit: (params: Image) => `${pb.projectImage(params)}/edit`,
 
-  instances: (params: Project) => `${pb.project(params)}/instances`,
-  instancesNew: (params: Project) => `${pb.project(params)}/instances-new`,
+  instances: (params: Project) => `${projectBase(params)}/instances`,
+  instancesNew: (params: Project) => `${projectBase(params)}/instances-new`,
   instance: (params: Instance) => `${pb.instances(params)}/${params.instance}`,
 
   /**
@@ -55,20 +60,20 @@ export const pb = {
 
   serialConsole: (params: Instance) => `${pb.instance(params)}/serial-console`,
 
-  disksNew: (params: Project) => `${pb.project(params)}/disks-new`,
-  disks: (params: Project) => `${pb.project(params)}/disks`,
+  disksNew: (params: Project) => `${projectBase(params)}/disks-new`,
+  disks: (params: Project) => `${projectBase(params)}/disks`,
 
-  snapshotsNew: (params: Project) => `${pb.project(params)}/snapshots-new`,
-  snapshots: (params: Project) => `${pb.project(params)}/snapshots`,
+  snapshotsNew: (params: Project) => `${projectBase(params)}/snapshots-new`,
+  snapshots: (params: Project) => `${projectBase(params)}/snapshots`,
   snapshotImagesNew: (params: Snapshot) =>
-    `${pb.project(params)}/snapshots/${params.snapshot}/images-new`,
+    `${projectBase(params)}/snapshots/${params.snapshot}/images-new`,
 
-  vpcsNew: (params: Project) => `${pb.project(params)}/vpcs-new`,
-  vpcs: (params: Project) => `${pb.project(params)}/vpcs`,
+  vpcsNew: (params: Project) => `${projectBase(params)}/vpcs-new`,
+  vpcs: (params: Project) => `${projectBase(params)}/vpcs`,
   vpc: (params: Vpc) => `${pb.vpcs(params)}/${params.vpc}`,
   vpcEdit: (params: Vpc) => `${pb.vpc(params)}/edit`,
-  floatingIps: (params: Project) => `${pb.project(params)}/floating-ips`,
-  floatingIpsNew: (params: Project) => `${pb.project(params)}/floating-ips-new`,
+  floatingIps: (params: Project) => `${projectBase(params)}/floating-ips`,
+  floatingIpsNew: (params: Project) => `${projectBase(params)}/floating-ips-new`,
   floatingIp: (params: FloatingIp) => `${pb.floatingIps(params)}/${params.floatingIp}`,
   floatingIpEdit: (params: FloatingIp) => `${pb.floatingIp(params)}/edit`,