Switch VPC tab bar to route tabs

[benjaminleonard]

Prerequisite to a "New firewall rule from existing" feature so we can pass the initial values in through the loader.

Also part of #1913

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
console	✅ Ready (Inspect)	Visit Preview	Jun 26, 2024 10:25pm

[benjaminleonard]

@david-crespo I'm getting "react-router-dom.js?v=0ae1b1b1:215 Matched leaf route at location "/projects/mock-project/vpcs/mock-vpc/firewall-rules" does not have an element or Component. This means it will render an with a null value by default resulting in an "empty" page." – unsure on how to fix this? I might have Outlet in the wrong place.

[david-crespo]

Yeah I can definitely figure that out.

[david-crespo]

Missing element for leaf route was simple (373feda): you were missing an element. It doesn't have one because it just uses the parent, so you have to say element={null}. We do this in a bunch of other spots:

console/app/routes.tsx

Lines 182 to 195 in a228b75

	<Route
	element={<IpPoolsPage />}
	loader={IpPoolsPage.loader}
	handle={{ crumb: 'IP pools' }}
	>
	<Route path="ip-pools" element={null} />
	<Route path="ip-pools-new" element={<CreateIpPoolSideModalForm />} />
	<Route
	path="ip-pools/:pool/edit"
	element={<EditIpPoolSideModalForm />}
	loader={EditIpPoolSideModalForm.loader}
	handle={{ crumb: 'Edit IP pool' }}
	/>
	</Route>

[david-crespo]

Github actions. Why do you do this to me. This is an error that can only happen on main. The change that adds this check is not in this PR.