engine version change dropdown

arcoraven · arcoraven · commit e1dfca154d82 · 2024-11-05T09:05:07.000+08:00
diff --git a/apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts b/apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts
@@ -190,24 +190,43 @@ export function useEngineQueueMetrics(
   });
 }
 
-interface GetDeploymentInput {
+interface GetDeploymentPublicConfigurationInput {
   teamId: string;
-  deploymentId: string;
 }
 
-export function useEngineGetDeployment(input: GetDeploymentInput) {
+export function useEngineGetDeploymentPublicConfiguration(
+  input: GetDeploymentPublicConfigurationInput,
+) {
   return useQuery({
     queryKey: engineKeys.deployment(),
     queryFn: async () => {
-      const res = await fetch(
-        `${THIRDWEB_API_HOST}/v1/teams/${input.teamId}/engine/deployments/${input.deploymentId}`,
-        {
-          method: "GET",
+      // 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" },
       );
       if (!res.ok) {
         throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
       }
+
       const json = await res.json();
       return json.data as {
         serverVersions: {
diff --git a/apps/dashboard/src/components/engine/badges/version.tsx b/apps/dashboard/src/components/engine/badges/version.tsx
@@ -1,15 +1,7 @@
-import { Button } from "@/components/ui/button";
-import { ToolTipLabel } from "@/components/ui/tooltip";
-import {
-  type EngineInstance,
-  useEngineGetDeployment,
-  useEngineSystemHealth,
-  useEngineUpdateDeployment,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import { CircleArrowDownIcon, CloudDownloadIcon } from "lucide-react";
-import { useState } from "react";
-
 import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -18,7 +10,28 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { ToolTipLabel } from "@/components/ui/tooltip";
 import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import {
+  type EngineInstance,
+  useEngineGetDeploymentPublicConfiguration,
+  useEngineSystemHealth,
+  useEngineUpdateDeployment,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import {
+  CircleArrowDownIcon,
+  CloudDownloadIcon,
+  TriangleAlertIcon,
+} from "lucide-react";
+import { useState } from "react";
 import { toast } from "sonner";
 import invariant from "tiny-invariant";
 
@@ -27,28 +40,39 @@ export const EngineVersionBadge = ({
 }: {
   instance: EngineInstance;
 }) => {
+  const teamId = "DEBUG - UNIMPLEMENTED";
+
   const healthQuery = useEngineSystemHealth(instance.url);
-  const latestVersionQuery = useEngineGetDeployment();
+  const publicConfigurationQuery = useEngineGetDeploymentPublicConfiguration({
+    teamId,
+  });
   const [isModalOpen, setModalOpen] = useState(false);
 
-  const currentVersion = healthQuery.data?.engineVersion ?? "...";
-  const latestVersion = latestVersionQuery.data;
-  const isStale = latestVersion && currentVersion !== latestVersion;
+  if (!healthQuery.data || !publicConfigurationQuery.data) {
+    return null;
+  }
+
+  const currentVersion = healthQuery.data.engineVersion ?? "N/A";
+  const hasNewerVersion =
+    publicConfigurationQuery.data.serverVersions.latest !== currentVersion;
 
-  if (!isStale) {
+  // Hide the change version modal unless owner.
+  if (!instance.deploymentId) {
     return (
-      <ToolTipLabel label="Latest Version">
-        <Button variant="outline" asChild className="hover:bg-transparent">
-          <div>{currentVersion}</div>
-        </Button>
-      </ToolTipLabel>
+      <Button variant="outline" asChild className="hover:bg-transparent">
+        <div>{currentVersion}</div>
+      </Button>
     );
   }
 
   return (
     <>
       <ToolTipLabel
-        label="New version is available"
+        label={
+          hasNewerVersion
+            ? "An update is available"
+            : "You are on the latest version"
+        }
         leftIcon={
           <CircleArrowDownIcon className="size-4 text-link-foreground" />
         }
@@ -60,38 +84,41 @@ export const EngineVersionBadge = ({
         >
           {currentVersion}
 
-          {/* Notification Dot */}
-          <span className="-top-1 -right-1 absolute">
-            <PulseDot />
-          </span>
+          {/* Notification dot if an update is available */}
+          {hasNewerVersion && (
+            <span className="-top-1 -right-1 absolute">
+              <PulseDot />
+            </span>
+          )}
         </Button>
       </ToolTipLabel>
 
-      {latestVersion && (
-        <UpdateVersionModal
-          open={isModalOpen}
-          onOpenChange={setModalOpen}
-          latestVersion={latestVersion}
-          instance={instance}
-        />
-      )}
+      <ChangeVersionModal
+        open={isModalOpen}
+        onOpenChange={setModalOpen}
+        instance={instance}
+        currentVersion={currentVersion}
+        serverVersions={publicConfigurationQuery.data.serverVersions}
+      />
     </>
   );
 };
 
-const UpdateVersionModal = (props: {
+const ChangeVersionModal = (props: {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  latestVersion: string;
   instance: EngineInstance;
+  currentVersion: string;
+  serverVersions: { latest: string; recent: string[] };
 }) => {
-  const { open, onOpenChange, latestVersion, instance } = props;
-  const updateDeploymentMutation = useEngineUpdateDeployment();
-
   const teamId = "DEBUG - UNIMPLEMENTED";
+  const { open, onOpenChange, instance, currentVersion, serverVersions } =
+    props;
+  const [selectedVersion, setSelectedVersion] = useState(serverVersions.latest);
+  const updateDeploymentMutation = useEngineUpdateDeployment();
 
   if (!instance.deploymentId) {
-    // For self-hosted, show a prompt to the Github release page.
+    // Self-hosted modal: prompt to update manually.
     return (
       <Dialog open={open} onOpenChange={onOpenChange}>
         <DialogContent
@@ -100,7 +127,7 @@ const UpdateVersionModal = (props: {
         >
           <DialogHeader>
             <DialogTitle className="mb-6 pr-4 font-semibold text-2xl tracking-tight">
-              Update your self-hosted Engine to {latestVersion}
+              Update your self-hosted Engine
             </DialogTitle>
             <DialogDescription>
               View the{" "}
@@ -121,40 +148,102 @@ const UpdateVersionModal = (props: {
     );
   }
 
-  const onClick = async () => {
+  const onClickUpdate = async () => {
     invariant(instance.deploymentId, "Engine is missing deploymentId.");
 
     try {
       const promise = updateDeploymentMutation.mutateAsync({
         teamId,
         deploymentId: instance.deploymentId,
-        serverVersion: latestVersion,
+        serverVersion: selectedVersion,
       });
       toast.promise(promise, {
-        success: `Upgrading your Engine to ${latestVersion}. Please confirm after a few minutes.`,
-        error: "Unexpected error updating your Engine.",
+        success: `Updating your Engine to ${selectedVersion}.`,
+        error: "Unexpected error updating Engine.",
       });
       await promise;
     } finally {
       onOpenChange(false);
     }
   };
 
+  // For cloud-hosted, prompt the user to select a version to update to.
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
         className="z-[10001] max-w-[400px]"
         dialogOverlayClassName="z-[10000]"
       >
         <DialogHeader>
-          <DialogTitle>Update Engine to {latestVersion}?</DialogTitle>
-
-          <DialogDescription>
-            It is recommended to pause traffic to Engine before performing this
-            upgrade. There is &lt; 1 minute of expected downtime.
-          </DialogDescription>
+          <DialogTitle>Update Engine version</DialogTitle>
         </DialogHeader>
 
+        <DialogDescription>
+          <Select
+            onValueChange={(value) => setSelectedVersion(value)}
+            value={selectedVersion}
+          >
+            <SelectTrigger>
+              <SelectValue />
+            </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;
+                  return (
+                    <SelectItem
+                      key={version}
+                      value={version}
+                      id={version}
+                      disabled={isCurrentVersion}
+                    >
+                      {version}
+                      {isCurrentVersion && (
+                        <Badge className="ml-2">current</Badge>
+                      )}
+                    </SelectItem>
+                  );
+                })}
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+
+          <div className="h-4" />
+
+          {currentVersion.startsWith("v") && (
+            <div>
+              <TrackedLinkTW
+                href={`https://github.com/thirdweb-dev/engine/compare/${currentVersion}...${selectedVersion}`}
+                category="engine"
+                label="clicked-engine-releases"
+                target="_blank"
+                className="text-link-foreground hover:text-foreground"
+              >
+                View changes: {currentVersion} &rarr; {selectedVersion}
+              </TrackedLinkTW>
+            </div>
+          )}
+
+          <div className="h-4" />
+
+          <Alert variant="warning">
+            <TriangleAlertIcon className="!text-warning-text size-4" />
+            <AlertTitle>There may be up to 1 minute of downtime.</AlertTitle>
+
+            <AlertDescription className="!pl-0 pt-2">
+              We recommended pausing traffic to Engine before performing this
+              version update.
+            </AlertDescription>
+          </Alert>
+        </DialogDescription>
+
         <DialogFooter className="mt-5">
           <Button
             type="button"
@@ -165,7 +254,7 @@ const UpdateVersionModal = (props: {
           </Button>
           <Button
             type="submit"
-            onClick={onClick}
+            onClick={onClickUpdate}
             variant="primary"
             className="gap-2"
           >
@@ -174,7 +263,7 @@ const UpdateVersionModal = (props: {
             ) : (
               <CloudDownloadIcon className="size-4" />
             )}
-            Update
+            Update to {selectedVersion}
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/apps/dashboard/src/components/engine/engine-instances-table.tsx b/apps/dashboard/src/components/engine/engine-instances-table.tsx
@@ -479,7 +479,7 @@ function DeleteSubscriptionModalContent(props: {
         <div className="h-4" />
 
         <Alert variant="destructive">
-          <TriangleAlertIcon className="!text-destructive-text size-5" />
+          <TriangleAlertIcon className="!text-destructive-text size-4" />
           <AlertTitle>This action is irreversible!</AlertTitle>
 
           <AlertDescription className="!pl-0 pt-2">
