Improves the region switch modal with more info

Author: samejr

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

@@ -1,3 +1,4 @@
+import { ArrowRightIcon } from "@heroicons/react/20/solid";
 import { Form } from "@remix-run/react";
 import { type ActionFunctionArgs, type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { tryCatch } from "@trigger.dev/core";
@@ -225,7 +226,7 @@ export default function Page() {
                                     Default
                                   </Badge>
                                 ) : (
-                                  <SetDefaultDialog region={region} />
+                                  <SetDefaultDialog regions={regions} newDefaultRegion={region} />
                                 )
                               }
                             />
@@ -244,8 +245,15 @@ export default function Page() {
   );
 }
 
-function SetDefaultDialog({ region }: { region: Region }) {
+function SetDefaultDialog({
+  regions,
+  newDefaultRegion,
+}: {
+  regions: Region[];
+  newDefaultRegion: Region;
+}) {
   const [isOpen, setIsOpen] = useState(false);
+  const currentDefaultRegion = regions.find((r) => r.isDefault);
 
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
@@ -254,21 +262,104 @@ function SetDefaultDialog({ region }: { region: Region }) {
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Set as default</DialogTitle>
+          <DialogTitle>Set as default region</DialogTitle>
         </DialogHeader>
         <DialogDescription>
           <Paragraph>
-            When you trigger a run it will execute in your default region, unless you{" "}
-            <TextLink to={docsPath("triggering#region")}>specify a region when triggering</TextLink>
-            .
+            Are you sure you want to set {newDefaultRegion.name} as your default region?
+          </Paragraph>
+
+          <div className="my-4 flex">
+            <div className="flex flex-1 flex-col rounded-md border border-grid-dimmed">
+              <div className="border-b border-grid-dimmed bg-charcoal-800 p-3 font-medium">
+                <Paragraph variant="small/bright">Current default</Paragraph>
+              </div>
+              <div className="border-b border-grid-dimmed p-3">
+                <Paragraph variant="small">{currentDefaultRegion?.name ?? "–"}</Paragraph>
+              </div>
+              <div className="border-b border-grid-dimmed p-3">
+                <Paragraph variant="small" className="flex items-center gap-2">
+                  {currentDefaultRegion?.cloudProvider ? (
+                    <>
+                      <CloudProviderIcon
+                        provider={currentDefaultRegion.cloudProvider}
+                        className="size-6"
+                      />
+                      {cloudProviderTitle(currentDefaultRegion.cloudProvider)}
+                    </>
+                  ) : (
+                    "–"
+                  )}
+                </Paragraph>
+              </div>
+              <div className="p-3">
+                <Paragraph variant="small" className="flex items-center gap-2">
+                  {currentDefaultRegion?.location ? (
+                    <FlagIcon region={currentDefaultRegion.location} className="size-5" />
+                  ) : null}
+                  {currentDefaultRegion?.description ?? "–"}
+                </Paragraph>
+              </div>
+            </div>
+
+            {/* Middle column with arrow */}
+            <div className="flex items-center justify-center px-3">
+              <div className="flex size-10 items-center justify-center rounded-full border border-grid-dimmed bg-charcoal-800 p-2">
+                <ArrowRightIcon className="size-4 text-text-dimmed" />
+              </div>
+            </div>
+
+            {/* Right column */}
+            <div className="flex flex-1 flex-col rounded-md border border-grid-dimmed">
+              <div className="border-b border-grid-dimmed bg-charcoal-800 p-3 font-medium">
+                <Paragraph variant="small/bright">New default</Paragraph>
+              </div>
+              <div className="border-b border-grid-dimmed p-3">
+                <Paragraph variant="small">{newDefaultRegion.name}</Paragraph>
+              </div>
+              <div className="border-b border-grid-dimmed p-3">
+                <Paragraph variant="small" className="flex items-center gap-2">
+                  {newDefaultRegion.cloudProvider ? (
+                    <>
+                      <CloudProviderIcon
+                        provider={newDefaultRegion.cloudProvider}
+                        className="size-6"
+                      />
+                      {cloudProviderTitle(newDefaultRegion.cloudProvider)}
+                    </>
+                  ) : (
+                    "–"
+                  )}
+                </Paragraph>
+              </div>
+              <div className="p-3">
+                <Paragraph variant="small" className="flex items-center gap-2">
+                  {newDefaultRegion.location ? (
+                    <FlagIcon region={newDefaultRegion.location} className="size-5" />
+                  ) : null}
+                  {newDefaultRegion.description ?? "–"}
+                </Paragraph>
+              </div>
+            </div>
+          </div>
+
+          <Paragraph>
+            Runs triggered from now on will execute in "{newDefaultRegion.name}", unless you{" "}
+            <TextLink to={docsPath("triggering#region")}>override when triggering</TextLink>.
           </Paragraph>
         </DialogDescription>
         <DialogFooter>
-          <Button variant="secondary/small" onClick={() => setIsOpen(false)}>
+          <Button variant="secondary/medium" onClick={() => setIsOpen(false)}>
             Cancel
           </Button>
           <Form method="post">
-            <Button variant="secondary/small" type="submit" name="regionId" value={region.id}>
+            <Button
+              variant="primary/medium"
+              type="submit"
+              name="regionId"
+              shortcut={{ modifiers: ["mod"], key: "enter" }}
+              value={newDefaultRegion.id}
+            >
               Set as default
             </Button>
           </Form>