move to teamSlug

Author: arcoraven

apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts

@@ -192,7 +192,7 @@ export function useEngineQueueMetrics(
 }
 
 interface GetDeploymentPublicConfigurationInput {
-  teamId: string;
+  teamSlug: string;
 }
 
 interface DeploymentPublicConfigurationResponse {
@@ -209,7 +209,7 @@ export function useEngineGetDeploymentPublicConfiguration(
     queryKey: engineKeys.deploymentPublicConfiguration(),
     queryFn: async () => {
       const res = await fetch(
-        `${THIRDWEB_API_HOST}/v1/teams/${input.teamId}/engine/deployments/public-configuration`,
+        `${THIRDWEB_API_HOST}/v1/teams/${input.teamSlug}/engine/deployments/public-configuration`,
         { method: "GET" },
       );
       if (!res.ok) {
@@ -223,7 +223,7 @@ export function useEngineGetDeploymentPublicConfiguration(
 }
 
 interface UpdateDeploymentInput {
-  teamId: string;
+  teamSlug: string;
   deploymentId: string;
   serverVersion: string;
 }
@@ -232,7 +232,7 @@ export function useEngineUpdateDeployment() {
   return useMutation({
     mutationFn: async (input: UpdateDeploymentInput) => {
       const res = await fetch(
-        `${THIRDWEB_API_HOST}/v1/teams/${input.teamId}/engine/deployments/${input.deploymentId}`,
+        `${THIRDWEB_API_HOST}/v1/teams/${input.teamSlug}/engine/deployments/${input.deploymentId}`,
         {
           method: "PUT",
           headers: {

apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/_components/EnginePageLayout.tsx

@@ -119,6 +119,7 @@ export function WithEngineInstance(props: {
         instance={sandboxEngine}
         content={props.content}
         rootPath={rootPath}
+        teamSlug={props.teamSlug}
       />
     );
   }
@@ -128,6 +129,7 @@ export function WithEngineInstance(props: {
       content={props.content}
       engineId={props.engineId}
       rootPath={rootPath}
+      teamSlug={props.teamSlug}
     />
   );
 }
@@ -136,6 +138,7 @@ function QueryAndRenderInstanceHeader(props: {
   engineId: string;
   content: React.FC<{ instance: EngineInstance }>;
   rootPath: string;
+  teamSlug: string;
 }) {
   const instancesQuery = useEngineInstances();
   const instance = instancesQuery.data?.find((x) => x.id === props.engineId);
@@ -157,6 +160,7 @@ function QueryAndRenderInstanceHeader(props: {
       instance={instance}
       content={props.content}
       rootPath={props.rootPath}
+      teamSlug={props.teamSlug}
     />
   );
 }
@@ -165,6 +169,7 @@ function EnsurePermissionAndRenderInstance(props: {
   content: React.FC<{ instance: EngineInstance }>;
   instance: EngineInstance;
   rootPath: string;
+  teamSlug: string;
 }) {
   const permissionQuery = useHasEnginePermission({
     instanceUrl: props.instance.url,
@@ -210,6 +215,7 @@ function EnsurePermissionAndRenderInstance(props: {
       rootPath={props.rootPath}
       instance={props.instance}
       content={props.content}
+      teamSlug={props.teamSlug}
     />
   );
 }
@@ -218,6 +224,7 @@ function RenderEngineInstanceHeader(props: {
   instance: EngineInstance;
   content: React.FC<{ instance: EngineInstance }>;
   rootPath: string;
+  teamSlug: string;
 }) {
   const { instance } = props;
 
@@ -261,7 +268,7 @@ function RenderEngineInstanceHeader(props: {
             )}
           </div>
         </div>
-        <EngineVersionBadge instance={instance} teamId={instance.accountId} />
+        <EngineVersionBadge instance={instance} teamSlug={props.teamSlug} />
       </div>
 
       <div className="h-5" />

apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/_components/version.tsx

@@ -27,38 +27,32 @@ import {
   useEngineUpdateDeployment,
 } from "@3rdweb-sdk/react/hooks/useEngine";
 import { formatDistanceToNow } from "date-fns";
-import {
-  CircleArrowDownIcon,
-  CloudDownloadIcon,
-  TriangleAlertIcon,
-} from "lucide-react";
+import { CircleArrowUpIcon, TriangleAlertIcon } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import invariant from "tiny-invariant";
 
 export const EngineVersionBadge = ({
   instance,
-  teamId,
+  teamSlug,
 }: {
   instance: EngineInstance;
-  teamId: string;
+  teamSlug: string;
 }) => {
   const healthQuery = useEngineSystemHealth(instance.url);
   const publicConfigurationQuery = useEngineGetDeploymentPublicConfiguration({
-    teamId,
+    teamSlug,
   });
   const [isModalOpen, setModalOpen] = useState(false);
 
-  if (
-    !healthQuery.data ||
-    publicConfigurationQuery.data.serverVersions?.length === 0
-  ) {
+  if (!healthQuery.data || !publicConfigurationQuery.data) {
     return null;
   }
 
   const serverVersions = publicConfigurationQuery.data.serverVersions;
+  const latestVersion = serverVersions[0];
   const currentVersion = healthQuery.data.engineVersion ?? "N/A";
-  const hasNewerVersion = serverVersions[0].name !== currentVersion;
+  const hasNewerVersion = latestVersion?.name !== currentVersion;
 
   // Hide the change version modal unless owner.
   if (!instance.deploymentId) {
@@ -75,11 +69,9 @@ export const EngineVersionBadge = ({
         label={
           hasNewerVersion
             ? "An update is available"
-            : "You are on the latest version"
-        }
-        leftIcon={
-          <CircleArrowDownIcon className="size-4 text-link-foreground" />
+            : "Engine is on the latest update"
         }
+        leftIcon={<CircleArrowUpIcon className="size-4 text-link-foreground" />}
       >
         <Button
           variant="outline"
@@ -103,7 +95,7 @@ export const EngineVersionBadge = ({
         instance={instance}
         currentVersion={currentVersion}
         serverVersions={serverVersions}
-        teamId={teamId}
+        teamSlug={teamSlug}
       />
     </>
   );
@@ -115,15 +107,15 @@ const ChangeVersionModal = (props: {
   instance: EngineInstance;
   currentVersion: string;
   serverVersions: { name: string; createdAt: string }[];
-  teamId: string;
+  teamSlug: string;
 }) => {
   const {
     open,
     onOpenChange,
     instance,
     currentVersion,
     serverVersions,
-    teamId,
+    teamSlug,
   } = props;
   const [selectedVersion, setSelectedVersion] = useState(
     serverVersions[0]?.name,
@@ -162,11 +154,12 @@ const ChangeVersionModal = (props: {
   }
 
   const onClickUpdate = async () => {
+    invariant(selectedVersion, "No version selected.");
     invariant(instance.deploymentId, "Engine is missing deploymentId.");
 
     try {
       const promise = updateDeploymentMutation.mutateAsync({
-        teamId,
+        teamSlug,
         deploymentId: instance.deploymentId,
         serverVersion: selectedVersion,
       });
@@ -271,11 +264,12 @@ const ChangeVersionModal = (props: {
             onClick={onClickUpdate}
             variant="primary"
             className="gap-2"
+            disabled={selectedVersion === currentVersion}
           >
             {updateDeploymentMutation.isPending ? (
               <Spinner className="size-4" />
             ) : (
-              <CloudDownloadIcon className="size-4" />
+              <CircleArrowUpIcon className="size-4" />
             )}
             Update to {selectedVersion}
           </Button>

apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/overview-page.client.tsx

@@ -6,15 +6,14 @@ import { EngineOverview } from "./components/engine-overview";
 export function EngineOverviewPage(props: {
   engineId: string;
   teamSlug: string;
-  teamId: string;
 }) {
   return (
     <WithEngineInstance
       engineId={props.engineId}
       content={(res) => (
         <EngineOverview instance={res.instance} teamSlug={props.teamSlug} />
       )}
-      teamId={props.teamId}
+      teamSlug={props.teamSlug}
     />
   );
 }

apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/page.tsx

@@ -1,20 +1,12 @@
-import { getTeamBySlug } from "@/api/team";
-import { redirect } from "next/navigation";
 import { EngineOverviewPage } from "./overview/overview-page.client";
 import type { EngineInstancePageProps } from "./types";
 
 export default async function Page(props: EngineInstancePageProps) {
   const params = await props.params;
-  const team = await getTeamBySlug(params.team_slug);
-  if (!team) {
-    redirect("/team");
-  }
-
   return (
     <EngineOverviewPage
       engineId={params.engineId}
       teamSlug={params.team_slug}
-      teamId={team.id}
     />
   );
 }