Dashboard: Fix Import Engine form submit not working (#8064)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a dialog for importing engine instances in the `ImportEngineButton` component, enhancing user interaction by managing the dialog state and updating UI elements.

### Detailed summary
- Added `useState` to manage the dialog's open state.
- Changed navigation from `router.push` to `router.refresh` after import.
- Wrapped the dialog in a conditional open state.
- Updated the layout and styling of the dialog content and links.
- Modified form field styles for better UI consistency.

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

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

* New Features
  * Import dialog now closes automatically after a successful import and refreshes the current page.
  * Added an in-dialog warning beneath the URL field for clearer guidance.
  * Updated “Get started” link destination.

* Style
  * Redesigned import dialog with improved layout, spacing, rounded content, and a bottom action bar; inputs use card styling.
  * Refined labels, placeholders, and header padding for clearer readability.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx

@@ -8,6 +8,7 @@ import {
   ExternalLinkIcon,
 } from "lucide-react";
 import Link from "next/link";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -17,7 +18,6 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
-  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
@@ -70,6 +70,7 @@ export function ImportEngineButton(props: {
   teamSlug: string;
   projectSlug: string;
 }) {
+  const [isOpen, setIsOpen] = useState(false);
   const router = useDashboardRouter();
   const form = useForm<ImportEngineParams>({
     resolver: zodResolver(formSchema),
@@ -82,14 +83,15 @@ export function ImportEngineButton(props: {
   const importMutation = useMutation({
     mutationFn: async (importParams: ImportEngineParams) => {
       await importEngine({ ...importParams, teamIdOrSlug: props.teamSlug });
-      router.push(`/team/${props.teamSlug}/${props.projectSlug}/engine`);
+      router.refresh();
     },
   });
 
   const onSubmit = async (data: ImportEngineParams) => {
     try {
       await importMutation.mutateAsync(data);
       toast.success("Engine imported successfully");
+      setIsOpen(false);
     } catch (e) {
       const message = e instanceof Error ? e.message : undefined;
       toast.error(
@@ -102,42 +104,40 @@ export function ImportEngineButton(props: {
   };
 
   return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button
-              className="gap-2 rounded-full bg-card"
-              size="sm"
-              variant="outline"
-            >
-              <ArrowDownToLineIcon className="size-3.5" />
-              Import Engine
-            </Button>
-          </DialogTrigger>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button
+          className="gap-2 rounded-full bg-card"
+          size="sm"
+          variant="outline"
+        >
+          <ArrowDownToLineIcon className="size-3.5" />
+          Import Engine
+        </Button>
+      </DialogTrigger>
 
-          <DialogContent>
-            <DialogHeader>
+      <DialogContent className="p-0 rounded-lg overflow-hidden">
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <DialogHeader className="p-4 lg:p-6">
               <DialogTitle>Import Engine Instance</DialogTitle>
               <DialogDescription>
                 Import an Engine instance hosted on your infrastructure.
               </DialogDescription>
             </DialogHeader>
 
-            <div>
-              <div>
-                <Link
-                  className="flex items-center justify-between gap-2 rounded-lg border border-border bg-card p-3 text-sm hover:bg-accent"
-                  href="https://portal.thirdweb.com/infrastructure/engine/get-started"
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  Get help setting up Engine for free
-                  <ExternalLinkIcon className="size-4 text-muted-foreground" />
-                </Link>
-              </div>
+            <div className="px-4 lg:px-6 pb-6">
+              <Link
+                className="mb-4 flex items-center justify-between gap-2 rounded-full border border-border bg-card p-3 text-sm hover:bg-accent"
+                href="https://portal.thirdweb.com/engine/v2/get-started"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                Get help setting up Engine for free
+                <ExternalLinkIcon className="size-4 text-muted-foreground" />
+              </Link>
 
-              <div className="mt-6 flex flex-col gap-4">
+              <div className="space-y-5">
                 <FormField
                   control={form.control}
                   name="name"
@@ -146,6 +146,7 @@ export function ImportEngineButton(props: {
                       <FormLabel>Name</FormLabel>
                       <FormControl>
                         <Input
+                          className="bg-card"
                           autoFocus
                           placeholder="Enter a descriptive label"
                           {...field}
@@ -164,6 +165,7 @@ export function ImportEngineButton(props: {
                       <FormLabel>URL</FormLabel>
                       <FormControl>
                         <Input
+                          className="bg-card"
                           placeholder="Enter your Engine URL"
                           type="url"
                           {...field}
@@ -182,19 +184,19 @@ export function ImportEngineButton(props: {
               </div>
             </div>
 
-            <DialogFooter>
-              <Button className="min-w-28 gap-1.5 rounded-full" type="submit">
+            <div className="border-t bg-card p-6 flex justify-end">
+              <Button className="gap-2 rounded-full" type="submit">
                 {importMutation.isPending ? (
                   <Spinner className="size-4" />
                 ) : (
                   <ArrowDownToLineIcon className="size-4" />
                 )}
                 Import
               </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-      </form>
-    </Form>
+            </div>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
   );
 }