feat(webapp): highlight microVM regions on the regions page

Author: nicktrn

.server-changes/highlight-microvm-regions.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Show a `MicroVM` badge next to the region name on the regions page.

apps/webapp/app/presenters/v3/RegionsPresenter.server.ts

@@ -1,3 +1,4 @@
+import { type WorkloadType } from "@trigger.dev/database";
 import { type Project } from "~/models/project.server";
 import { type User } from "~/models/user.server";
 import { FEATURE_FLAG } from "~/v3/featureFlags";
@@ -15,6 +16,7 @@ export type Region = {
   staticIPs?: string | null;
   isDefault: boolean;
   isHidden: boolean;
+  workloadType: WorkloadType;
 };
 
 export class RegionsPresenter extends BasePresenter {
@@ -76,6 +78,7 @@ export class RegionsPresenter extends BasePresenter {
         location: true,
         staticIPs: true,
         hidden: true,
+        workloadType: true,
       },
       where: isAdmin
         ? undefined
@@ -99,6 +102,7 @@ export class RegionsPresenter extends BasePresenter {
       staticIPs: region.staticIPs ?? undefined,
       isDefault: region.id === defaultWorkerInstanceGroupId,
       isHidden: region.hidden,
+      workloadType: region.workloadType,
     }));
 
     if (project.defaultWorkerGroupId) {
@@ -111,6 +115,7 @@ export class RegionsPresenter extends BasePresenter {
           location: true,
           staticIPs: true,
           hidden: true,
+          workloadType: true,
         },
         where: { id: project.defaultWorkerGroupId },
       });
@@ -131,6 +136,7 @@ export class RegionsPresenter extends BasePresenter {
           staticIPs: defaultWorkerGroup.staticIPs ?? undefined,
           isDefault: true,
           isHidden: defaultWorkerGroup.hidden,
+          workloadType: defaultWorkerGroup.workloadType,
         });
       }
     }

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.regions/route.tsx

@@ -204,7 +204,12 @@ export default function Page() {
                         return (
                           <TableRow key={region.id}>
                             <TableCell isTabbableCell>
-                              <CopyableText value={region.name} />
+                              <span className="flex items-center gap-2">
+                                <CopyableText value={region.name} />
+                                {region.workloadType === "MICROVM" && (
+                                  <Badge variant="small">MicroVM</Badge>
+                                )}
+                              </span>
                             </TableCell>
                             <TableCell>
                               {region.cloudProvider ? (