chore: Update version flow updates deployment (#4852)

## Problem solved

Changes the "update Engine version" flow to query the infra backend to perform the version upgrade.

Previously this would ping Slack for a thirdweb staff to update.

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on improving the code quality and user interface across various components in the dashboard. It includes updates to placeholders, text content, and the handling of engine updates.

### Detailed summary
- Updated `placeholder` in `ip-allowlist.tsx` to use curly braces.
- Added periods to sentences in `EngineImportPage.tsx` and `CreateEnginePage.tsx`.
- Simplified conditional rendering in `engine-instances-table.tsx`.
- Changed `cloudDeployedAt` to `deploymentId` in `useEngine.ts`.
- Renamed `useEngineUpdateVersion` to `useEngineUpdateServerVersion`.
- Updated fetch method to `PUT` for engine updates.
- Changed variable names for clarity in `EngineVersionBadge.tsx`.
- Updated props in `UpdateVersionModal` to use `latestVersion`.
- Adjusted toast messages for better user feedback during engine updates.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: arcoraven

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

@@ -18,14 +18,14 @@ export type EngineInstance = {
   name: string;
   url: string;
   lastAccessedAt: string;
-  cloudDeployedAt?: string;
   status:
     | "active"
     | "pending"
     | "requested"
     | "deploying"
     | "paymentFailed"
     | "deploymentFailed";
+  deploymentId?: string;
 };
 
 // Not checking for null token because the token is required the tanstack useQuery hook
@@ -189,23 +189,26 @@ export function useEngineLatestVersion() {
 
 interface UpdateVersionInput {
   engineId: string;
+  serverVersion: string;
 }
 
-export function useEngineUpdateVersion() {
+export function useEngineUpdateServerVersion() {
   return useMutation({
     mutationFn: async (input: UpdateVersionInput) => {
       invariant(input.engineId, "engineId is required");
 
-      const res = await fetch(`${THIRDWEB_API_HOST}/v1/engine/update-version`, {
-        method: "POST",
-
-        headers: {
-          "Content-Type": "application/json",
+      const res = await fetch(
+        `${THIRDWEB_API_HOST}/v2/engine/${input.engineId}/infrastructure`,
+        {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            serverVersion: input.serverVersion,
+          }),
         },
-        body: JSON.stringify({
-          engineId: input.engineId,
-        }),
-      });
+      );
       // we never use the response body
       res.body?.cancel();
       if (!res.ok) {

apps/dashboard/src/components/engine/badges/version.tsx

@@ -4,7 +4,7 @@ import {
   type EngineInstance,
   useEngineLatestVersion,
   useEngineSystemHealth,
-  useEngineUpdateVersion,
+  useEngineUpdateServerVersion,
 } from "@3rdweb-sdk/react/hooks/useEngine";
 import { CircleArrowDownIcon, CloudDownloadIcon } from "lucide-react";
 import { useState } from "react";
@@ -30,15 +30,15 @@ export const EngineVersionBadge = ({
   const latestVersionQuery = useEngineLatestVersion();
   const [isModalOpen, setModalOpen] = useState(false);
 
-  const current = healthQuery.data?.engineVersion ?? "...";
-  const latest = latestVersionQuery.data ?? "...";
-  const isStale = current !== latest;
+  const currentVersion = healthQuery.data?.engineVersion ?? "...";
+  const latestVersion = latestVersionQuery.data;
+  const isStale = latestVersion && currentVersion !== latestVersion;
 
   if (!isStale) {
     return (
       <ToolTipLabel label="Latest Version">
         <Button variant="outline" asChild className="hover:bg-transparent">
-          <div>{current}</div>
+          <div>{currentVersion}</div>
         </Button>
       </ToolTipLabel>
     );
@@ -57,7 +57,7 @@ export const EngineVersionBadge = ({
           className="relative"
           onClick={() => setModalOpen(true)}
         >
-          {current}
+          {currentVersion}
 
           {/* Notification Dot */}
           <span className="-top-1 -right-1 absolute">
@@ -66,26 +66,28 @@ export const EngineVersionBadge = ({
         </Button>
       </ToolTipLabel>
 
-      <UpdateVersionModal
-        open={isModalOpen}
-        onOpenChange={setModalOpen}
-        latest={latest ?? ""}
-        instance={instance}
-      />
+      {latestVersion && (
+        <UpdateVersionModal
+          open={isModalOpen}
+          onOpenChange={setModalOpen}
+          latestVersion={latestVersion}
+          instance={instance}
+        />
+      )}
     </>
   );
 };
 
 const UpdateVersionModal = (props: {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  latest: string;
+  latestVersion: string;
   instance: EngineInstance;
 }) => {
-  const { open, onOpenChange, latest, instance } = props;
-  const updateEngine = useEngineUpdateVersion();
+  const { open, onOpenChange, latestVersion, instance } = props;
+  const updateEngineServerMutation = useEngineUpdateServerVersion();
 
-  if (!instance.cloudDeployedAt) {
+  if (!instance.deploymentId) {
     // For self-hosted, show a prompt to the Github release page.
     return (
       <Dialog open={open} onOpenChange={onOpenChange}>
@@ -95,19 +97,20 @@ const UpdateVersionModal = (props: {
         >
           <DialogHeader>
             <DialogTitle className="mb-6 pr-4 font-semibold text-2xl tracking-tight">
-              Update your self-hosted Engine to {latest}
+              Update your self-hosted Engine to {latestVersion}
             </DialogTitle>
             <DialogDescription>
-              View the changelog in the
+              View the{" "}
               <TrackedLinkTW
                 href="https://github.com/thirdweb-dev/engine/releases"
                 category="engine"
                 label="clicked-engine-releases"
                 target="_blank"
                 className="text-link-foreground hover:text-foreground"
               >
-                Engine Github repository
+                latest changelog
               </TrackedLinkTW>
+              .
             </DialogDescription>
           </DialogHeader>
         </DialogContent>
@@ -117,11 +120,13 @@ const UpdateVersionModal = (props: {
 
   const onClick = async () => {
     try {
-      const promise = updateEngine.mutateAsync({ engineId: instance.id });
+      const promise = updateEngineServerMutation.mutateAsync({
+        engineId: instance.id,
+        serverVersion: latestVersion,
+      });
       toast.promise(promise, {
-        success:
-          "Submitted a request to update your Engine instance. Please allow 1-2 business days for this process.",
-        error: "Unexpected error updating your Engine instance.",
+        success: `Upgrading your Engine to ${latestVersion}. Please confirm after a few minutes.`,
+        error: "Unexpected error updating your Engine.",
       });
       await promise;
     } finally {
@@ -136,7 +141,12 @@ const UpdateVersionModal = (props: {
         dialogOverlayClassName="z-[10000]"
       >
         <DialogHeader>
-          <DialogTitle>Update Engine to {latest}?</DialogTitle>
+          <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>
         </DialogHeader>
 
         <DialogFooter className="mt-5">
@@ -153,7 +163,7 @@ const UpdateVersionModal = (props: {
             variant="primary"
             className="gap-2"
           >
-            {updateEngine.isPending ? (
+            {updateEngineServerMutation.isPending ? (
               <Spinner className="size-4" />
             ) : (
               <CloudDownloadIcon className="size-4" />

apps/dashboard/src/components/engine/configuration/ip-allowlist.tsx

@@ -87,7 +87,7 @@ export const EngineIpAllowlistConfig: React.FC<
       </Flex>
 
       <Textarea
-        placeholder="8.8.8.8\nff06:0:0:0:0:0:0:c3"
+        placeholder={"8.8.8.8\nff06:0:0:0:0:0:0:c3"}
         rows={4}
         {...form.register("raw")}
       />

apps/dashboard/src/components/engine/create/CreateEnginePage.tsx

@@ -112,7 +112,7 @@ export const CreateEnginePage = () => {
       </h1>
 
       <p className="mb-7 text-muted-foreground">
-        Host Engine on thirdweb with no setup or maintenance required
+        Host Engine on thirdweb with no setup or maintenance required.
       </p>
 
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">

apps/dashboard/src/components/engine/engine-instances-table.tsx

@@ -266,11 +266,7 @@ const EditModal = (props: {
               className="gap-2"
               disabled={!form.formState.isDirty}
             >
-              {editInstance.isPending ? (
-                <Spinner className="size-4" />
-              ) : (
-                <SendIcon className="size-4" />
-              )}
+              {editInstance.isPending && <Spinner className="size-4" />}
               Update
             </Button>
           </DialogFooter>
@@ -292,7 +288,7 @@ const RemoveModal = (props: {
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="z-[10001]" dialogOverlayClassName="z-[10000]">
         {instance.status === "paymentFailed" ||
-        (instance.status === "active" && !instance.cloudDeployedAt) ? (
+        (instance.status === "active" && !instance.deploymentId) ? (
           <RemoveFromDashboardModalContent
             refetch={refetch}
             instance={instance}

apps/dashboard/src/components/engine/import/EngineImportPage.tsx

@@ -114,7 +114,7 @@ export const EngineImportPage = () => {
             <div className="mt-2 flex items-center gap-2">
               <CircleAlertIcon className="!static size-3 text-warning-foreground" />
               <p className="text-muted-foreground text-sm">
-                Do not import a URL you do not recognize
+                Do not import a URL you do not recognize.
               </p>
             </div>
           </FormControl>