Skip to content

Commit

Permalink
refactor: move servers pages one level higher
Browse files Browse the repository at this point in the history
  • Loading branch information
jog1t committed Nov 25, 2024
1 parent 5e1e5fd commit 93ee6de
Show file tree
Hide file tree
Showing 8 changed files with 182 additions and 179 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
faCodeBranch,
faGear,
faGlobe,
faHammer,
faJoystick,
faKey,
faLink,
Expand Down Expand Up @@ -72,6 +73,17 @@ export function EnvironmentCommandPanelPage({
<Icon icon={faServer} />
Servers
</CommandItem>
<CommandItem
onSelect={() => {
navigate({
to: "/projects/$projectId/environments/$environmentId/builds",
params: { projectId, environmentId },
});
}}
>
<Icon icon={faHammer} />
Builds
</CommandItem>
<GuardEnterprise>
<CommandItem
onSelect={() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
faChessKnight,
faCodeBranch,
faGlobe,
faHammer,
faKey,
faPuzzle,
faPuzzlePiece,
Expand Down Expand Up @@ -47,6 +48,14 @@ export function HeaderEnvironmentLinks({
Servers
</Link>
</HeaderLink>
<HeaderLink icon={faHammer}>
<Link
to="/projects/$projectId/environments/$environmentId/builds"
params={{ projectId, environmentId }}
>
Builds
</Link>
</HeaderLink>
<GuardEnterprise>
<HeaderLink icon={faPuzzle}>
<Link
Expand Down
102 changes: 52 additions & 50 deletions apps/hub/src/routeTree.gen.ts

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,7 @@ function ProjectBuildLatestButton({
}

export const Route = createFileRoute(
"/_authenticated/_layout/projects/$projectId/environments/$environmentId/servers/builds",
"/_authenticated/_layout/projects/$projectId/environments/$environmentId/builds",
)({
component: ProjectBuildsRoute,
pendingComponent: Layout.Content.Skeleton,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ function CurrentBuildCard() {
</Button>
<Button asChild variant="outline">
<Link
to="/projects/$projectId/environments/$environmentId/servers/builds"
to="/projects/$projectId/environments/$environmentId/builds"
params={{
projectId,
environmentId: environmentId,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,34 +1,106 @@
import { ErrorComponent } from "@/components/error-component";
import { ServersListPreview } from "@/domains/project/components/servers/servers-list-preview";
import * as Layout from "@/domains/project/layouts/servers-layout";
import { projectServersQueryOptions } from "@/domains/project/queries";
import {
type ErrorComponentProps,
Outlet,
createFileRoute,
} from "@tanstack/react-router";
Button,
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
Flex,
WithTooltip,
} from "@rivet-gg/components";
import { Icon, faPlus, faRefresh } from "@rivet-gg/icons";
import { useSuspenseInfiniteQuery } from "@tanstack/react-query";
import { Link, createFileRoute } from "@tanstack/react-router";
import { zodSearchValidator } from "@tanstack/router-zod-adapter";
import { z } from "zod";

function ServersLayoutErrorComponent(props: ErrorComponentProps) {
const { environmentId, projectId } = Route.useParams();
return (
<Layout.Root environmentId={environmentId} projectId={projectId}>
<ErrorComponent {...props} />
</Layout.Root>
function ProjectServersRoute() {
const { projectId, environmentId } = Route.useParams();
const { data, refetch, isRefetching } = useSuspenseInfiniteQuery(
projectServersQueryOptions({ projectId, environmentId: environmentId }),
);
}

function ServersLayoutView() {
const { environmentId, projectId } = Route.useParams();
const { serverId } = Route.useSearch();

return (
<Layout.Root environmentId={environmentId} projectId={projectId}>
<Outlet />
</Layout.Root>
<Card w="full" h="full" className="flex flex-col">
<CardHeader className="border-b ">
<CardTitle className="flex flex-row justify-between items-center">
Servers
<Flex gap="2">
<WithTooltip
content="Refresh"
trigger={
<Button
size="icon"
isLoading={isRefetching}
variant="outline"
onClick={() => refetch()}
>
<Icon icon={faRefresh} />
</Button>
}
/>
<WithTooltip
content="Create a new server"
trigger={
<Button
asChild
size="icon"
variant="outline"
onClick={() => refetch()}
>
<Link
to="."
search={{
modal: "create-server",
}}
>
<Icon icon={faPlus} />
</Link>
</Button>
}
/>
</Flex>
</CardTitle>
<CardDescription>
Servers are created & destroyed automatically as players connect &
disconnect.
</CardDescription>
</CardHeader>
<CardContent className="flex-1 min-h-0 w-full p-0">
{data.length === 0 ? (
<div className="flex items-center mx-auto flex-col gap-2 my-10">
<span>No servers created.</span>
<span className="text-xs">
Run your project client & connect to start a server.
</span>
</div>
) : (
<ServersListPreview
projectId={projectId}
environmentId={environmentId}
serverId={serverId}
/>
)}
</CardContent>
</Card>
);
}

const searchSchema = z.object({
serverId: z.string().optional(),
});

export const Route = createFileRoute(
"/_authenticated/_layout/projects/$projectId/environments/$environmentId/servers",
)({
component: ServersLayoutView,
errorComponent: ServersLayoutErrorComponent,
pendingComponent: Layout.Root.Skeleton,
validateSearch: zodSearchValidator(searchSchema),
staticData: {
layout: "full",
},
component: ProjectServersRoute,
pendingComponent: Layout.Content.Skeleton,
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { createFileRoute, redirect } from "@tanstack/react-router";

export const Route = createFileRoute(
"/_authenticated/_layout/projects/$projectId/environments/$environmentId/servers/$",
)({
beforeLoad: ({ params, location }) => {
if (location.href.endsWith("/builds")) {
throw redirect({
to: "/projects/$projectId/environments/$environmentId/builds",
params,
});
}
},
});

This file was deleted.

0 comments on commit 93ee6de

Please sign in to comment.