From d3f3c2afde1d7afd1e7a006303a5f046e17c2c8f Mon Sep 17 00:00:00 2001
From: jog1t <39823706+jog1t@users.noreply.github.com>
Date: Thu, 26 Sep 2024 06:42:37 +0000
Subject: [PATCH] feat: move game tokens page under settings (#359)

Closes MIS-265
---
 .../header/links/header-game-links.tsx        |  7 +---
 .../game/layouts/game-settings-layout.tsx     | 10 ++++-
 apps/hub/src/routeTree.gen.ts                 | 20 ++++++++++
 .../_layout/games/$gameId/settings/tokens.tsx | 37 ++++++++++++++++++
 .../_layout/games/$gameId/tokens.tsx          | 39 ++++---------------
 apps/hub/tailwind.config.js                   |  1 +
 6 files changed, 75 insertions(+), 39 deletions(-)
 create mode 100644 apps/hub/src/routes/_authenticated/_layout/games/$gameId/settings/tokens.tsx

diff --git a/apps/hub/src/components/header/links/header-game-links.tsx b/apps/hub/src/components/header/links/header-game-links.tsx
index aa27fc63..e8b8dea2 100644
--- a/apps/hub/src/components/header/links/header-game-links.tsx
+++ b/apps/hub/src/components/header/links/header-game-links.tsx
@@ -1,4 +1,4 @@
-import { faCircleDollar, faFolder, faGear, faKey } from "@rivet-gg/icons";
+import { faCircleDollar, faFolder, faGear } from "@rivet-gg/icons";
 import { Link } from "@tanstack/react-router";
 import { HeaderLink } from "../header-link";
 
@@ -18,11 +18,6 @@ export function HeaderGameLinks({ gameId }: HeaderGameLinksProps) {
           Environments
         </Link>
       </HeaderLink>
-      <HeaderLink icon={faKey}>
-        <Link to="/games/$gameId/tokens" params={{ gameId }}>
-          Tokens
-        </Link>
-      </HeaderLink>
       <HeaderLink icon={faCircleDollar}>
         <Link to="/games/$gameId/billing" params={{ gameId }}>
           Billing
diff --git a/apps/hub/src/domains/game/layouts/game-settings-layout.tsx b/apps/hub/src/domains/game/layouts/game-settings-layout.tsx
index b4338aae..8255dde6 100644
--- a/apps/hub/src/domains/game/layouts/game-settings-layout.tsx
+++ b/apps/hub/src/domains/game/layouts/game-settings-layout.tsx
@@ -14,11 +14,19 @@ function GroupSettingsPage({ children, gameId }: GroupPageProps) {
         <SidebarNavigation>
           <Link
             to="/games/$gameId/settings"
+            activeOptions={{ exact: true }}
             params={{ gameId }}
-            className="text-foreground font-semibold"
+            className="aria-current-page:text-foreground aria-current-page:font-semibold"
           >
             General
           </Link>
+          <Link
+            to="/games/$gameId/settings/tokens"
+            params={{ gameId }}
+            className="aria-current-page:text-foreground aria-current-page:font-semibold"
+          >
+            Tokens
+          </Link>
         </SidebarNavigation>
       }
     >
diff --git a/apps/hub/src/routeTree.gen.ts b/apps/hub/src/routeTree.gen.ts
index 9680fb94..9b447d7c 100644
--- a/apps/hub/src/routeTree.gen.ts
+++ b/apps/hub/src/routeTree.gen.ts
@@ -36,6 +36,7 @@ import { Route as AuthenticatedLayoutGamesGameIdBillingImport } from './routes/_
 import { Route as AuthenticatedLayoutTeamsGroupIdSettingsIndexImport } from './routes/_authenticated/_layout/teams/$groupId/settings/index'
 import { Route as AuthenticatedLayoutGamesGameIdSettingsIndexImport } from './routes/_authenticated/_layout/games/$gameId/settings/index'
 import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId'
+import { Route as AuthenticatedLayoutGamesGameIdSettingsTokensImport } from './routes/_authenticated/_layout/games/$gameId/settings/tokens'
 import { Route as AuthenticatedLayoutGamesGameIdNamespacesSplatImport } from './routes/_authenticated/_layout/games/$gameId/namespaces/$'
 import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdIndexImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/index'
 import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdVersionsImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/versions'
@@ -197,6 +198,12 @@ const AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdRoute =
     getParentRoute: () => AuthenticatedLayoutRoute,
   } as any)
 
+const AuthenticatedLayoutGamesGameIdSettingsTokensRoute =
+  AuthenticatedLayoutGamesGameIdSettingsTokensImport.update({
+    path: '/tokens',
+    getParentRoute: () => AuthenticatedLayoutGamesGameIdSettingsRoute,
+  } as any)
+
 const AuthenticatedLayoutGamesGameIdNamespacesSplatRoute =
   AuthenticatedLayoutGamesGameIdNamespacesSplatImport.update({
     path: '/namespaces/$',
@@ -495,6 +502,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthenticatedLayoutGamesGameIdNamespacesSplatImport
       parentRoute: typeof AuthenticatedLayoutGamesGameIdImport
     }
+    '/_authenticated/_layout/games/$gameId/settings/tokens': {
+      id: '/_authenticated/_layout/games/$gameId/settings/tokens'
+      path: '/tokens'
+      fullPath: '/games/$gameId/settings/tokens'
+      preLoaderRoute: typeof AuthenticatedLayoutGamesGameIdSettingsTokensImport
+      parentRoute: typeof AuthenticatedLayoutGamesGameIdSettingsImport
+    }
     '/_authenticated/_layout/games/$gameId/environments/$namespaceId': {
       id: '/_authenticated/_layout/games/$gameId/environments/$namespaceId'
       path: '/games/$gameId/environments/$namespaceId'
@@ -654,6 +668,7 @@ export const routeTree = rootRoute.addChildren({
           AuthenticatedLayoutGamesGameIdBillingRoute,
           AuthenticatedLayoutGamesGameIdSettingsRoute:
             AuthenticatedLayoutGamesGameIdSettingsRoute.addChildren({
+              AuthenticatedLayoutGamesGameIdSettingsTokensRoute,
               AuthenticatedLayoutGamesGameIdSettingsIndexRoute,
             }),
           AuthenticatedLayoutGamesGameIdTokensRoute,
@@ -807,6 +822,7 @@ export const routeTree = rootRoute.addChildren({
       "filePath": "_authenticated/_layout/games/$gameId/settings.tsx",
       "parent": "/_authenticated/_layout/games/$gameId",
       "children": [
+        "/_authenticated/_layout/games/$gameId/settings/tokens",
         "/_authenticated/_layout/games/$gameId/settings/"
       ]
     },
@@ -841,6 +857,10 @@ export const routeTree = rootRoute.addChildren({
       "filePath": "_authenticated/_layout/games/$gameId/namespaces/$.tsx",
       "parent": "/_authenticated/_layout/games/$gameId"
     },
+    "/_authenticated/_layout/games/$gameId/settings/tokens": {
+      "filePath": "_authenticated/_layout/games/$gameId/settings/tokens.tsx",
+      "parent": "/_authenticated/_layout/games/$gameId/settings"
+    },
     "/_authenticated/_layout/games/$gameId/environments/$namespaceId": {
       "filePath": "_authenticated/_layout/games/$gameId_/environments/$namespaceId.tsx",
       "parent": "/_authenticated/_layout",
diff --git a/apps/hub/src/routes/_authenticated/_layout/games/$gameId/settings/tokens.tsx b/apps/hub/src/routes/_authenticated/_layout/games/$gameId/settings/tokens.tsx
new file mode 100644
index 00000000..c4bbb257
--- /dev/null
+++ b/apps/hub/src/routes/_authenticated/_layout/games/$gameId/settings/tokens.tsx
@@ -0,0 +1,37 @@
+import { Button, DocsCard, Grid, Text } from "@rivet-gg/components";
+import { Link, createFileRoute } from "@tanstack/react-router";
+
+function CloudTokenCard() {
+  return (
+    <>
+      <DocsCard
+        title="Cloud token"
+        href="https://rivet.gg/docs/general/concepts/token-types#cloud"
+        footer={
+          <Button asChild>
+            <Link search={{ modal: "cloud-token" }}>Generate</Link>
+          </Button>
+        }
+      >
+        <Text>
+          Cloud tokens are used to access Rivet Cloud. They are used by the
+          client to access Rivet Cloud.
+        </Text>
+      </DocsCard>
+    </>
+  );
+}
+
+function GameTokensRoute() {
+  return (
+    <Grid columns={{ initial: "1", md: "2" }} gap="4" items="start">
+      <CloudTokenCard />
+    </Grid>
+  );
+}
+
+export const Route = createFileRoute(
+  "/_authenticated/_layout/games/$gameId/settings/tokens",
+)({
+  component: GameTokensRoute,
+});
diff --git a/apps/hub/src/routes/_authenticated/_layout/games/$gameId/tokens.tsx b/apps/hub/src/routes/_authenticated/_layout/games/$gameId/tokens.tsx
index 56b082ca..d4d2c309 100644
--- a/apps/hub/src/routes/_authenticated/_layout/games/$gameId/tokens.tsx
+++ b/apps/hub/src/routes/_authenticated/_layout/games/$gameId/tokens.tsx
@@ -1,37 +1,12 @@
-import { Button, DocsCard, Grid, Text } from "@rivet-gg/components";
-import { Link, createFileRoute } from "@tanstack/react-router";
-
-function CloudTokenCard() {
-  return (
-    <>
-      <DocsCard
-        title="Cloud token"
-        href="https://rivet.gg/docs/general/concepts/token-types#cloud"
-        footer={
-          <Button asChild>
-            <Link search={{ modal: "cloud-token" }}>Generate</Link>
-          </Button>
-        }
-      >
-        <Text>
-          Cloud tokens are used to access Rivet Cloud. They are used by the
-          client to access Rivet Cloud.
-        </Text>
-      </DocsCard>
-    </>
-  );
-}
-
-function GameTokensRoute() {
-  return (
-    <Grid columns={{ initial: "1", md: "2" }} gap="4" items="start">
-      <CloudTokenCard />
-    </Grid>
-  );
-}
+import { createFileRoute, redirect } from "@tanstack/react-router";
 
 export const Route = createFileRoute(
   "/_authenticated/_layout/games/$gameId/tokens",
 )({
-  component: GameTokensRoute,
+  loader: ({ params }) => {
+    throw redirect({
+      to: "/games/$gameId/settings/tokens",
+      params,
+    });
+  },
 });
diff --git a/apps/hub/tailwind.config.js b/apps/hub/tailwind.config.js
index 5745c486..0bc636d3 100644
--- a/apps/hub/tailwind.config.js
+++ b/apps/hub/tailwind.config.js
@@ -7,6 +7,7 @@ module.exports = {
     "./src/lib/**/*.{ts,tsx}",
     "./src/**/hooks/**/*.{ts,tsx}",
     "./src/**/forms/**/*.{ts,tsx}",
+    "./src/**/layouts/**/*.{ts,tsx}",
     "../../node_modules/@rivet-gg/components/**/*.{ts,tsx}",
   ],
   presets: [require("@rivet-gg/components/tailwind-base")],