select engine version to update to

Author: arcoraven

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

@@ -195,31 +195,19 @@ interface GetDeploymentPublicConfigurationInput {
   teamId: string;
 }
 
+interface DeploymentPublicConfigurationResponse {
+  serverVersions: {
+    name: string;
+    createdAt: string;
+  }[];
+}
+
 export function useEngineGetDeploymentPublicConfiguration(
   input: GetDeploymentPublicConfigurationInput,
 ) {
-  return useQuery({
+  return useQuery<DeploymentPublicConfigurationResponse>({
     queryKey: engineKeys.deployment(),
     queryFn: async () => {
-      // DEBUG
-      return {
-        serverVersions: {
-          latest: "v2.1.0",
-          recent: [
-            "v2.0.35",
-            "v2.0.34",
-            "v2.0.33",
-            "v2.0.32",
-            "v2.0.31",
-            "v2.0.30",
-            "v2.0.29",
-            "v2.0.28",
-            "v2.0.27",
-            "v2.0.26",
-          ],
-        },
-      };
-
       const res = await fetch(
         `${THIRDWEB_API_HOST}/v1/teams/${input.teamId}/engine/deployments/public-configuration`,
         { method: "GET" },
@@ -229,12 +217,7 @@ export function useEngineGetDeploymentPublicConfiguration(
       }
 
       const json = await res.json();
-      return json.data as {
-        serverVersions: {
-          latest: string;
-          recent: string[];
-        };
-      };
+      return json.data as DeploymentPublicConfigurationResponse;
     },
   });
 }

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

@@ -261,7 +261,7 @@ function RenderEngineInstanceHeader(props: {
             )}
           </div>
         </div>
-        <EngineVersionBadge instance={instance} />
+        <EngineVersionBadge instance={instance} teamId={instance.accountId} />
       </div>
 
       <div className="h-5" />

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

@@ -26,6 +26,7 @@ import {
   useEngineSystemHealth,
   useEngineUpdateDeployment,
 } from "@3rdweb-sdk/react/hooks/useEngine";
+import { formatDistanceToNow } from "date-fns";
 import {
   CircleArrowDownIcon,
   CloudDownloadIcon,
@@ -37,24 +38,27 @@ import invariant from "tiny-invariant";
 
 export const EngineVersionBadge = ({
   instance,
+  teamId,
 }: {
   instance: EngineInstance;
+  teamId: string;
 }) => {
-  const teamId = "DEBUG - UNIMPLEMENTED";
-
   const healthQuery = useEngineSystemHealth(instance.url);
   const publicConfigurationQuery = useEngineGetDeploymentPublicConfiguration({
     teamId,
   });
   const [isModalOpen, setModalOpen] = useState(false);
 
-  if (!healthQuery.data || !publicConfigurationQuery.data) {
+  if (
+    !healthQuery.data ||
+    publicConfigurationQuery.data.serverVersions?.length === 0
+  ) {
     return null;
   }
 
+  const serverVersions = publicConfigurationQuery.data.serverVersions;
   const currentVersion = healthQuery.data.engineVersion ?? "N/A";
-  const hasNewerVersion =
-    publicConfigurationQuery.data.serverVersions.latest !== currentVersion;
+  const hasNewerVersion = serverVersions[0].name !== currentVersion;
 
   // Hide the change version modal unless owner.
   if (!instance.deploymentId) {
@@ -98,7 +102,8 @@ export const EngineVersionBadge = ({
         onOpenChange={setModalOpen}
         instance={instance}
         currentVersion={currentVersion}
-        serverVersions={publicConfigurationQuery.data.serverVersions}
+        serverVersions={serverVersions}
+        teamId={teamId}
       />
     </>
   );
@@ -109,12 +114,20 @@ const ChangeVersionModal = (props: {
   onOpenChange: (open: boolean) => void;
   instance: EngineInstance;
   currentVersion: string;
-  serverVersions: { latest: string; recent: string[] };
+  serverVersions: { name: string; createdAt: string }[];
+  teamId: string;
 }) => {
-  const teamId = "DEBUG - UNIMPLEMENTED";
-  const { open, onOpenChange, instance, currentVersion, serverVersions } =
-    props;
-  const [selectedVersion, setSelectedVersion] = useState(serverVersions.latest);
+  const {
+    open,
+    onOpenChange,
+    instance,
+    currentVersion,
+    serverVersions,
+    teamId,
+  } = props;
+  const [selectedVersion, setSelectedVersion] = useState(
+    serverVersions[0]?.name,
+  );
   const updateDeploymentMutation = useEngineUpdateDeployment();
 
   if (!instance.deploymentId) {
@@ -188,26 +201,27 @@ const ChangeVersionModal = (props: {
             </SelectTrigger>
             <SelectContent className="z-[10001]">
               <SelectGroup>
-                <SelectItem
-                  value={serverVersions.latest}
-                  id={serverVersions.latest}
-                >
-                  {serverVersions.latest}
-                  <Badge className="ml-2">latest</Badge>
-                </SelectItem>
-                {serverVersions.recent.map((version) => {
-                  const isCurrentVersion = version === currentVersion;
+                {serverVersions.map(({ name, createdAt }, idx) => {
+                  const isCurrentVersion = name === currentVersion;
+                  const isLatestVersion = idx === 0;
                   return (
                     <SelectItem
-                      key={version}
-                      value={version}
-                      id={version}
+                      key={name}
+                      value={name}
+                      id={name}
                       disabled={isCurrentVersion}
                     >
-                      {version}
-                      {isCurrentVersion && (
+                      <span>{name}</span>
+                      <span className="ml-4 text-muted-foreground">
+                        {formatDistanceToNow(new Date(createdAt), {
+                          addSuffix: true,
+                        })}
+                      </span>
+                      {isCurrentVersion ? (
                         <Badge className="ml-2">current</Badge>
-                      )}
+                      ) : isLatestVersion ? (
+                        <Badge className="ml-2">latest</Badge>
+                      ) : null}
                     </SelectItem>
                   );
                 })}

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

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

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

@@ -1,12 +1,20 @@
+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}
-      team_slug={params.team_slug}
+      teamSlug={params.team_slug}
+      teamId={team.id}
     />
   );
 }

apps/dashboard/src/data/analytics/fetch-analytics.ts

@@ -4,6 +4,8 @@ export async function fetchAnalytics(
   input: string | URL,
   init?: RequestInit,
 ): Promise<Response> {
+  return;
+
   const [pathname, searchParams] = input.toString().split("?");
   if (!pathname) {
     throw new Error("Invalid input, no pathname provided");