Skip to content

Commit 21714b8

Browse files
dawsontothdawsontoth
committed
fix: Use absolute paths everywhere
Tanstack’s router is being inconsistent about relative routes. Prior to the upgrade, it was inconsistent with the `to` redirects. But now it’s behaving the same way with the `<Link />` components too. Maybe we’ll figure out why one day. I made `/#/sign-in` for signing in, and `orgs` is now the actual top level route, removing `orgs` from the URL entirely. Both cloud and local mode should have consistent, handled routes now. https://harperdb.atlassian.net/browse/STUDIO-395
1 parent f555bd5 commit 21714b8

28 files changed

+152
-166
lines changed

‎src/components/Breadcrumbs.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { isLocalStudio } from '@/config/constants';
21
import { capitalizeWords } from '@/lib/string/capitalizeWords';
32
import { Link, useLocation, useRouteContext } from '@tanstack/react-router';
43
import { HomeIcon } from 'lucide-react';
@@ -12,14 +11,13 @@ export function Breadcrumbs() {
1211
.filter((x) => x && x.length > 0);
1312

1413
const breadcrumbs = [
15-
<Link to={isLocalStudio ? '/' : '/orgs'}>
14+
<Link to="/">
1615
<HomeIcon aria-hidden="true" className="size-5 shrink-0" />
1716
<span className="sr-only">Home</span>
1817
</Link>,
1918
];
2019

21-
// Start at 1 to skip over the first top level route. The home icon will cover that.
22-
for (let index = 1; index < routeHistory.length; index++) {
20+
for (let index = 0; index < routeHistory.length; index++) {
2321
const route = routeHistory[index];
2422
if (route === 'instance') {
2523
continue;

‎src/components/Navbar.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ function MobileNav({ signOut }: { signOut: () => void }) {
6262
{!isLocalStudio && (
6363
<>
6464
<Link
65-
to="/orgs"
65+
to="/"
6666
className="flex flex-row px-3 py-2 text-base font-medium text-white bg-gray-900 rounded-md"
6767
activeProps={activeLinkProps}
6868
>
@@ -72,21 +72,21 @@ function MobileNav({ signOut }: { signOut: () => void }) {
7272
{(showOrgUsersAndRoles || showBilling) ? (
7373
<div className="bg-black rounded-2xl">
7474
{showOrgUsersAndRoles && (<Link
75-
to={`/orgs/${organizationId}/roles`}
75+
to={`/${organizationId}/roles`}
7676
className="flex flex-row px-3 py-2 text-base text-gray-300 font-medium rounded-md"
7777
activeProps={activeLinkProps}
7878
>
7979
<HandshakeIcon className="mr-4" /> Roles
8080
</Link>)}
8181
{showOrgUsersAndRoles && (<Link
82-
to={`/orgs/${organizationId}/users`}
82+
to={`/${organizationId}/users`}
8383
className="flex flex-row px-3 py-2 text-base text-gray-300 font-medium rounded-md"
8484
activeProps={activeLinkProps}
8585
>
8686
<UsersIcon className="mr-4" /> Users
8787
</Link>)}
8888
{showBilling && (<Link
89-
to={`/orgs/${organizationId}/billing`}
89+
to={`/${organizationId}/billing`}
9090
className="flex flex-row px-3 py-2 text-base text-gray-300 font-medium rounded-md"
9191
activeProps={activeLinkProps}
9292
>
@@ -148,7 +148,7 @@ function DesktopNav({ signOut }: { signOut: () => void }) {
148148
<>
149149
<NavigationMenuItem>
150150
<NavigationMenuLink asChild>
151-
<Link to="/orgs" className="flex-row items-center" activeProps={activeLinkProps}>
151+
<Link to="/" className="flex-row items-center" activeProps={activeLinkProps}>
152152
<BuildingIcon /> Organizations
153153
</Link>
154154
</NavigationMenuLink>
@@ -158,7 +158,7 @@ function DesktopNav({ signOut }: { signOut: () => void }) {
158158
{showOrgUsersAndRoles && (<NavigationMenuItem>
159159
<NavigationMenuLink asChild>
160160
<Link
161-
to={`/orgs/${organizationId}/roles`}
161+
to={`/${organizationId}/roles`}
162162
className="flex-row items-center"
163163
activeProps={activeLinkProps}
164164
>
@@ -169,7 +169,7 @@ function DesktopNav({ signOut }: { signOut: () => void }) {
169169
{showOrgUsersAndRoles && (<NavigationMenuItem>
170170
<NavigationMenuLink asChild>
171171
<Link
172-
to={`/orgs/${organizationId}/users`}
172+
to={`/${organizationId}/users`}
173173
className="flex-row items-center"
174174
activeProps={activeLinkProps}
175175
>
@@ -180,7 +180,7 @@ function DesktopNav({ signOut }: { signOut: () => void }) {
180180
{showBilling && (<NavigationMenuItem>
181181
<NavigationMenuLink asChild>
182182
<Link
183-
to={`/orgs/${organizationId}/billing`}
183+
to={`/${organizationId}/billing`}
184184
className="flex-row items-center"
185185
activeProps={activeLinkProps}
186186
>

‎src/config/constants.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@ export const defaultOperationsApiPort = 9925;
44
export const defaultOperationsApiSecure = true;
55
export const defaultClusterUsername = 'HDB_ADMIN';
66

7-
export const defaultInstanceRoute = '/applications';
8-
export const defaultInstanceRouteUpOne = '../applications';
7+
export const defaultInstanceRoute = '/';
8+
export const defaultInstanceRouteUpOne = '../';

‎src/features/auth/ClusterInstanceSignIn.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,10 @@ export function ClusterInstanceSignIn() {
110110
});
111111
}, [cluster, instance, instanceClient, navigate, queryClient, redirect, router, submitInstanceLogin]);
112112

113+
if (cluster && !cluster?.fqdn) {
114+
return <Navigate to="../instances" replace={true} />;
115+
}
116+
113117
if (cluster?.resetPassword) {
114118
return <Navigate to="../set-password" replace={true} />;
115119
}

‎src/features/auth/routes.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const authLayout = createRoute({
1919

2020
const signInRoute = createRoute({
2121
getParentRoute: () => authLayout,
22-
path: '/',
22+
path: 'sign-in',
2323
component: SignIn,
2424
beforeLoad: ({ context, location }) => {
2525
const user = context.authentication[OverallAppSignIn]?.user;
@@ -33,7 +33,7 @@ const signInRoute = createRoute({
3333

3434
const localSignInRoute = createRoute({
3535
getParentRoute: () => rootRoute,
36-
path: '/',
36+
path: 'sign-in',
3737
component: ClusterInstanceSignIn,
3838
beforeLoad: ({ context, location }) => {
3939
if (context.authentication[OverallAppSignIn]?.user) {

‎src/features/cluster/routes.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const clusterLayoutRoute = createRoute({
2020

2121
const clusterIndexRoute = createRoute({
2222
getParentRoute: () => clusterLayoutRoute,
23-
path: '/',
23+
path: '/instances',
2424
component: ClusterIndex,
2525
});
2626

‎src/features/clusters/components/ClusterCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export function ClusterCard({
5858
isActive && update && (
5959
<Link to={`${cluster.id}/edit`}><DropdownMenuItem>Edit</DropdownMenuItem></Link>),
6060
isActive && view && (
61-
<Link to={cluster.id}><DropdownMenuItem>Instances</DropdownMenuItem></Link>),
61+
<Link to={`${cluster.id}/instances`}><DropdownMenuItem>Instances</DropdownMenuItem></Link>),
6262
isActive && view && !!operationsUrl && !auth.isLoading && auth.user && (
6363
<DropdownMenuItem onClick={onSignOutClick}>Sign Out</DropdownMenuItem>),
6464
notTerminated && remove && (

‎src/features/clusters/components/ClusterCardAction.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export function ClusterCardAction({ cluster }: { cluster: Cluster }) {
1515
}
1616

1717
if (!cluster.fqdn) {
18-
return <Link to={cluster.id} className="text-sm" aria-label={`View ${cluster.name}`} title={`View ${cluster.name}`}>
18+
return <Link to={`${cluster.id}/instances`} className="text-sm" aria-label={`View ${cluster.name}`} title={`View ${cluster.name}`}>
1919
<span className="py-2 hover:border-b-2">
2020
Instances <ArrowRight className="inline-block" />
2121
</span>

‎src/features/instance/InstanceNavBar.tsx‎

Lines changed: 42 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -9,36 +9,38 @@ import {
99
DropdownMenuTrigger,
1010
} from '@/components/ui/dropdownMenu';
1111
import { useInstanceManagePermission } from '@/hooks/usePermissions';
12-
import { Link } from '@tanstack/react-router';
12+
import { buildAbsoluteLinkToPage } from '@/lib/urls/buildAbsoluteLinkToPage';
13+
import { Link, useParams } from '@tanstack/react-router';
1314
import { DatabaseIcon, GaugeIcon, Menu, NotepadText, Package, SettingsIcon } from 'lucide-react';
1415

1516
function DesktopInstanceNavBar() {
1617
const canManage = useInstanceManagePermission();
18+
const params = useParams({ strict: false });
1719
return (
1820
<div className="hidden md:flex items-center justify-between h-full text-sm text-white">
1921
<Breadcrumbs />
2022
<div className="flex space-x-2 *:hover:text-grey">
21-
<Link to="applications" className="p-2">
23+
<Link to={buildAbsoluteLinkToPage(params)} className="p-2">
2224
<Package className="inline-block" />
2325
<span className="hidden xl:inline-block ml-1">Applications</span>
2426
<span className="visible xl:hidden ml-1"> Apps</span>
2527

2628
</Link>
27-
<Link to="databases" className="p-2">
29+
<Link to={buildAbsoluteLinkToPage(params, 'databases')} className="p-2">
2830
<DatabaseIcon className="inline-block" />
2931
<span className="hidden xl:inline-block ml-1"> Databases</span>
3032
</Link>
3133
{canManage && (
3234
<>
33-
<Link to="status" className="p-2">
35+
<Link to={buildAbsoluteLinkToPage(params, 'status')} className="p-2">
3436
<GaugeIcon className="inline-block" />
3537
<span className="hidden xl:inline-block ml-1">Status</span>
3638
</Link>
37-
<Link to="logs" className="p-2">
39+
<Link to={buildAbsoluteLinkToPage(params, 'logs')} className="p-2">
3840
<NotepadText className="inline-block" />
3941
<span className="hidden xl:inline-block ml-1">Logs</span>
4042
</Link>
41-
<Link to="config" className="p-2">
43+
<Link to={buildAbsoluteLinkToPage(params, 'config')} className="p-2">
4244
<SettingsIcon className="inline-block" />
4345
<span className="hidden xl:inline-block ml-1">Config</span>
4446
</Link>
@@ -51,41 +53,42 @@ function DesktopInstanceNavBar() {
5153

5254
function MobileInstanceNavBar() {
5355
const canManage = useInstanceManagePermission();
56+
const params = useParams({ strict: false });
5457
return (
5558
<>
56-
<div className="flex md:hidden items-center justify-between p-2 text-white">
57-
<Breadcrumbs />
58-
<DropdownMenu>
59-
<DropdownMenuTrigger asChild>
60-
<Button variant="ghost" className="p-0">
61-
<Menu className="h-8 w-8" />
62-
</Button>
63-
</DropdownMenuTrigger>
64-
<DropdownMenuContent>
65-
<DropdownMenuLabel>Instance Menu</DropdownMenuLabel>
66-
<DropdownMenuSeparator />
67-
<DropdownMenuItem asChild>
68-
<Link to="applications">Applications</Link>
69-
</DropdownMenuItem>
70-
<DropdownMenuItem asChild>
71-
<Link to="databases">Databases</Link>
72-
</DropdownMenuItem>
73-
{canManage && (
74-
<>
75-
<DropdownMenuItem asChild>
76-
<Link to="status">Status</Link>
77-
</DropdownMenuItem>
78-
<DropdownMenuItem asChild>
79-
<Link to="config">Config</Link>
80-
</DropdownMenuItem>
81-
<DropdownMenuItem asChild>
82-
<Link to="logs">Logs</Link>
83-
</DropdownMenuItem>
84-
</>
85-
)}
86-
</DropdownMenuContent>
87-
</DropdownMenu>
88-
</div>
59+
<div className="flex md:hidden items-center justify-between p-2 text-white">
60+
<Breadcrumbs />
61+
<DropdownMenu>
62+
<DropdownMenuTrigger asChild>
63+
<Button variant="ghost" className="p-0">
64+
<Menu className="h-8 w-8" />
65+
</Button>
66+
</DropdownMenuTrigger>
67+
<DropdownMenuContent>
68+
<DropdownMenuLabel>Instance Menu</DropdownMenuLabel>
69+
<DropdownMenuSeparator />
70+
<DropdownMenuItem asChild>
71+
<Link to={buildAbsoluteLinkToPage(params)}>Applications</Link>
72+
</DropdownMenuItem>
73+
<DropdownMenuItem asChild>
74+
<Link to={buildAbsoluteLinkToPage(params, 'databases')}>Databases</Link>
75+
</DropdownMenuItem>
76+
{canManage && (
77+
<>
78+
<DropdownMenuItem asChild>
79+
<Link to={buildAbsoluteLinkToPage(params, 'status')}>Status</Link>
80+
</DropdownMenuItem>
81+
<DropdownMenuItem asChild>
82+
<Link to={buildAbsoluteLinkToPage(params, 'config')}>Config</Link>
83+
</DropdownMenuItem>
84+
<DropdownMenuItem asChild>
85+
<Link to={buildAbsoluteLinkToPage(params, 'logs')}>Logs</Link>
86+
</DropdownMenuItem>
87+
</>
88+
)}
89+
</DropdownMenuContent>
90+
</DropdownMenu>
91+
</div>
8992
</>
9093
);
9194
}

‎src/features/instance/applications/components/ApplicationsSidebar/EmptyApplicationsView.tsx‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

0 commit comments

Comments
 (0)