Dashboard: Fix Import Engine form submit not working #8064
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
WalkthroughRefactors the ImportEngine dialog to a controlled component using Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant B as ImportEngineButton
participant D as ControlledDialog
participant F as ImportForm
participant S as ImportService
participant R as Router
U->>B: Click "Import engine"
B->>D: setIsOpen(true)
D-->>U: Dialog opens
U->>F: Fill fields and Submit
F->>S: call import(...)
S-->>F: success
F->>B: signal success
B->>D: setIsOpen(false)
B->>R: router.refresh()
note over F,S: on error -> dialog stays open for correction
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Comment |
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8064 +/- ##
=======================================
Coverage 56.53% 56.53%
=======================================
Files 904 904
Lines 58873 58873
Branches 4165 4165
=======================================
Hits 33283 33283
Misses 25484 25484
Partials 106 106
🚀 New features to boost your workflow:
|
size-limit report 📦
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx (1)
44-48: Add explicit return types (guideline).Make component and async util explicit.
-async function importEngine({ +async function importEngine({ teamIdOrSlug, ...data -}: ImportEngineParams & { teamIdOrSlug: string }) { +}: ImportEngineParams & { teamIdOrSlug: string }): Promise<void> {-export function ImportEngineButton(props: { +export function ImportEngineButton(props: { prefillImportUrl: string | undefined; teamSlug: string; projectSlug: string; -}) { +}): JSX.Element {Also applies to: 68-72
🧹 Nitpick comments (6)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx (6)
75-81: Prefer defaultValues to avoid unintended controlled resets.Using
valuescan reset on re-renders;defaultValuesis sufficient here.- const form = useForm<ImportEngineParams>({ - resolver: zodResolver(formSchema), - values: { + const form = useForm<ImportEngineParams>({ + resolver: zodResolver(formSchema), + defaultValues: { name: "", url: props.prefillImportUrl || "", }, });
37-40: Tighten validation (trim + enforce http/https).Prevents whitespace and non-web schemes.
-const formSchema = z.object({ - name: z.string().min(1, "Name is required"), - url: z.string().url("Please enter a valid URL").min(1, "URL is required"), -}); +const formSchema = z.object({ + name: z.string().trim().min(1, "Name is required"), + url: z + .string() + .trim() + .url("Please enter a valid URL") + .refine((v) => /^https?:\/\//i.test(v), "URL must start with http:// or https://") + .min(1, "URL is required"), +});
48-55: Trailing slash logic breaks URLs with query/hash. Use URL API.Current concatenation can produce
...?x=1/. Safer to adjust pathname.- // Instance URLs should end with a /. - const url = data.url.endsWith("/") ? data.url : `${data.url}/`; + // Ensure trailing slash on pathname without breaking query/hash. + const u = new URL(data.url); + if (!u.pathname.endsWith("/")) { + u.pathname = `${u.pathname}/`; + } + const url = u.toString();
96-103: Provide a fallback message on unknown errors.Avoid empty toasts.
- const message = e instanceof Error ? e.message : undefined; + const message = + e instanceof Error && e.message ? e.message : "Unknown error";
107-117: Optional: drop DialogTrigger when using controlledopen.Simplifies state; open via button click.
- <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> + <Dialog open={isOpen} onOpenChange={setIsOpen}> + <Button + className="gap-2 rounded-full bg-card" + size="sm" + variant="outline" + onClick={() => setIsOpen(true)} + > + <ArrowDownToLineIcon className="size-3.5" /> + Import Engine + </Button>Note: Remove
DialogTriggerfrom the imports as well.
68-72: Optional: exposeclassNameper apps/dashboard guideline.Pass through to the trigger button (lightweight, no extra wrapper).
-export function ImportEngineButton(props: { +export function ImportEngineButton(props: { prefillImportUrl: string | undefined; teamSlug: string; projectSlug: string; + className?: string; }): JSX.Element {- <Button - className="gap-2 rounded-full bg-card" + <Button + className={cn("gap-2 rounded-full bg-card", props.className)} size="sm" variant="outline" >Add import (outside the shown hunk):
import { cn } from "@/lib/utils";Also applies to: 109-116
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx(7 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/_(e.g., Button, Input, Tabs, Card)
UseNavLinkfor internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names withcn()from@/lib/utilsfor conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start withimport "server-only"; usenext/headers, server‑only env, heavy data fetching, andredirect()where appropriate
Client Components must start with'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: callgetAuthToken()from cookies, sendAuthorization: Bearer <token>header, and return typed results (avoidany)
Client-side data fetching: wrap calls in React Query with descriptive, stablequeryKeysand set sensiblestaleTime/cacheTime(≥ 60s default); keep tokens secret via internal routes or server actions
Do not importposthog-jsin server components (client-side only)
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx
apps/{dashboard,playground}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Expose a
classNameprop on the root element of every component
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx
🧠 Learnings (4)
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx
📚 Learning: 2025-06-18T04:30:04.326Z
Learnt from: jnsdls
PR: thirdweb-dev/js#7365
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx:16-17
Timestamp: 2025-06-18T04:30:04.326Z
Learning: Next.js Link component fully supports both internal and external URLs and works appropriately with all standard anchor attributes including target="_blank", rel="noopener noreferrer", etc. Using Link for external URLs is completely appropriate and recommended.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx
📚 Learning: 2025-06-18T04:27:16.172Z
Learnt from: jnsdls
PR: thirdweb-dev/js#7365
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx:16-17
Timestamp: 2025-06-18T04:27:16.172Z
Learning: Next.js Link component supports external URLs without throwing errors. When used with absolute URLs (like https://...), it behaves like a regular anchor tag without client-side routing, but does not cause runtime crashes or errors as previously believed.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx
📚 Learning: 2025-06-24T21:38:03.155Z
Learnt from: MananTank
PR: thirdweb-dev/js#7434
File: apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/components/project-selector.tsx:62-76
Timestamp: 2025-06-24T21:38:03.155Z
Learning: In the project-selector.tsx component for contract imports, the addToProject.mutate() call is intentionally not awaited (fire-and-forget pattern) to allow immediate navigation to the contract page while the import happens in the background. This is a deliberate design choice to prioritize user experience.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx
🧬 Code graph analysis (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx (2)
apps/playground-web/src/components/ui/dialog.tsx (6)
Dialog(112-112)DialogTrigger(116-116)DialogContent(117-117)DialogHeader(118-118)DialogTitle(120-120)DialogDescription(121-121)packages/thirdweb/src/react/web/ui/components/text.tsx (1)
Link(44-62)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx (1)
83-88: Verify router.refresh() sufficiency.Ensure the page derives engine list from server data so refresh reflects the import; otherwise consider invalidating relevant React Query keys instead.
| const importMutation = useMutation({ | ||
| mutationFn: async (importParams: ImportEngineParams) => { | ||
| await importEngine({ ...importParams, teamIdOrSlug: props.teamSlug }); | ||
| router.push(`/team/${props.teamSlug}/${props.projectSlug}/engine`); | ||
| router.refresh(); | ||
| }, | ||
| }); |
There was a problem hiding this comment.
Prevent duplicate submissions; disable UI while pending.
Multiple clicks can create duplicate imports. Guard submit and disable inputs/button during mutation.
- const importMutation = useMutation({
+ const importMutation = useMutation({
mutationFn: async (importParams: ImportEngineParams) => {
await importEngine({ ...importParams, teamIdOrSlug: props.teamSlug });
router.refresh();
},
});
- const onSubmit = async (data: ImportEngineParams) => {
+ const onSubmit = async (data: ImportEngineParams) => {
+ if (importMutation.isPending) return;
try {
await importMutation.mutateAsync(data);
toast.success("Engine imported successfully");
setIsOpen(false);
} catch (e) {
const message = e instanceof Error ? e.message : undefined;
toast.error(
"Error importing Engine. Please check if the details are correct.",
{
description: message,
},
);
}
};- <Input
+ <Input
className="bg-card"
+ disabled={importMutation.isPending}
autoFocus
placeholder="Enter a descriptive label"
{...field}
/>- <Input
+ <Input
className="bg-card"
+ disabled={importMutation.isPending}
placeholder="Enter your Engine URL"
type="url"
{...field}
/>- <Button className="gap-2 rounded-full" type="submit">
+ <Button
+ className="gap-2 rounded-full"
+ type="submit"
+ disabled={importMutation.isPending}
+ aria-busy={importMutation.isPending}
+ >Also applies to: 90-104, 148-153, 167-173, 187-196
🤖 Prompt for AI Agents
In
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx
around lines 83-88 (and similarly for 90-104, 148-153, 167-173, 187-196): the
mutation allows multiple clicks causing duplicate imports; use the useMutation
status (isLoading/isPending) to guard submissions and disable the form controls
and submit button while the mutation is in flight. Update handlers to return
early if the mutation is already loading, await mutateAsync (or check isLoading)
to ensure a single in-flight request, and pass the mutation state to the UI so
inputs/buttons have disabled={isLoading} and show a loading indicator.
Merge activity
|
<!--
## 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 -->
graphite-app
bot
force-pushed
the
09-17-dashboard_fix_import_engine_form_submit_not_working
branch
from
d82ab78 to
552f702
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx (1)
75-81: Use defaultValues instead of values to avoid unintended form resetsPassing a new object to useForm.values each render can reset user input on re-renders (e.g., while a mutation is pending). Switch to defaultValues and explicitly reset when the dialog opens.
- const form = useForm<ImportEngineParams>({ - resolver: zodResolver(formSchema), - values: { - name: "", - url: props.prefillImportUrl || "", - }, - }); + const form = useForm<ImportEngineParams>({ + resolver: zodResolver(formSchema), + defaultValues: { + name: "", + url: props.prefillImportUrl || "", + }, + });
♻️ Duplicate comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx (1)
90-104: Prevent duplicate submissions; disable UI while pendingGuard submit and disable inputs/button during the mutation. This avoids duplicate imports and improves a11y with aria-busy.
const onSubmit = async (data: ImportEngineParams) => { + if (importMutation.isPending) return; try { await importMutation.mutateAsync(data); toast.success("Engine imported successfully"); setIsOpen(false);- <Input + <Input className="bg-card" + disabled={importMutation.isPending} autoFocus placeholder="Enter a descriptive label" {...field} />- <Input + <Input className="bg-card" + disabled={importMutation.isPending} placeholder="Enter your Engine URL" type="url" {...field} />- <Button className="gap-2 rounded-full" type="submit"> + <Button + className="gap-2 rounded-full" + type="submit" + disabled={importMutation.isPending} + aria-busy={importMutation.isPending} + >Also applies to: 148-153, 168-172, 188-195
🧹 Nitpick comments (4)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx (4)
107-108: Reset form when opening the dialog to honor prefill and start cleanResetting on open ensures prefillImportUrl is applied and stale input isn’t carried over between sessions.
- <Dialog open={isOpen} onOpenChange={setIsOpen}> + <Dialog + open={isOpen} + onOpenChange={(open) => { + setIsOpen(open); + if (open) { + form.reset({ name: "", url: props.prefillImportUrl || "" }); + } + }} + >
44-66: Add explicit return types and type the mutation for stronger TS guaranteesConforms to repo guidelines and improves DX.
-async function importEngine({ +async function importEngine({ teamIdOrSlug, ...data -}: ImportEngineParams & { teamIdOrSlug: string }) { +}: ImportEngineParams & { teamIdOrSlug: string }): Promise<void> {-export function ImportEngineButton(props: { +export function ImportEngineButton(props: { prefillImportUrl: string | undefined; teamSlug: string; projectSlug: string; -}) { +}): JSX.Element {- const importMutation = useMutation({ + const importMutation = useMutation<void, Error, ImportEngineParams>({ mutationFn: async (importParams: ImportEngineParams) => { await importEngine({ ...importParams, teamIdOrSlug: props.teamSlug }); router.refresh(); }, });- const onSubmit = async (data: ImportEngineParams) => { + const onSubmit = async (data: ImportEngineParams): Promise<void> => {Also applies to: 68-72, 83-88, 90-90
68-72: Expose className on the component root (apps/ guideline)*Allow styling from callers by forwarding a className to the root wrapper.
-export function ImportEngineButton(props: { +export function ImportEngineButton(props: { prefillImportUrl: string | undefined; teamSlug: string; projectSlug: string; -}) { + className?: string; +}) {- return ( - <Dialog + return ( + <div className={cn(props.className)}> + <Dialog open={isOpen} onOpenChange={(open) => { setIsOpen(open); if (open) { form.reset({ name: "", url: props.prefillImportUrl || "" }); } }} > ... - </Dialog> - </Dialog> + </Dialog> + </div>Additional change (outside selected ranges): add cn import at top.
import { cn } from "@/lib/utils";Also applies to: 106-201
37-40: Trim inputs in schema to avoid whitespace-only valuesPrevents " " passing min(1) and normalizes url/name.
-const formSchema = z.object({ - name: z.string().min(1, "Name is required"), - url: z.string().url("Please enter a valid URL").min(1, "URL is required"), -}); +const formSchema = z.object({ + name: z.string().trim().min(1, "Name is required"), + url: z.string().trim().url("Please enter a valid URL").min(1, "URL is required"), +});
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx(7 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/_(e.g., Button, Input, Tabs, Card)
UseNavLinkfor internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names withcn()from@/lib/utilsfor conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start withimport "server-only"; usenext/headers, server‑only env, heavy data fetching, andredirect()where appropriate
Client Components must start with'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: callgetAuthToken()from cookies, sendAuthorization: Bearer <token>header, and return typed results (avoidany)
Client-side data fetching: wrap calls in React Query with descriptive, stablequeryKeysand set sensiblestaleTime/cacheTime(≥ 60s default); keep tokens secret via internal routes or server actions
Do not importposthog-jsin server components (client-side only)
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx
apps/{dashboard,playground}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Expose a
classNameprop on the root element of every component
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx
🧠 Learnings (3)
📚 Learning: 2025-06-24T21:38:03.155Z
Learnt from: MananTank
PR: thirdweb-dev/js#7434
File: apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/components/project-selector.tsx:62-76
Timestamp: 2025-06-24T21:38:03.155Z
Learning: In the project-selector.tsx component for contract imports, the addToProject.mutate() call is intentionally not awaited (fire-and-forget pattern) to allow immediate navigation to the contract page while the import happens in the background. This is a deliberate design choice to prioritize user experience.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx
📚 Learning: 2025-06-18T04:27:16.172Z
Learnt from: jnsdls
PR: thirdweb-dev/js#7365
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx:16-17
Timestamp: 2025-06-18T04:27:16.172Z
Learning: Next.js Link component supports external URLs without throwing errors. When used with absolute URLs (like https://...), it behaves like a regular anchor tag without client-side routing, but does not cause runtime crashes or errors as previously believed.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx
📚 Learning: 2025-06-18T04:30:04.326Z
Learnt from: jnsdls
PR: thirdweb-dev/js#7365
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx:16-17
Timestamp: 2025-06-18T04:30:04.326Z
Learning: Next.js Link component fully supports both internal and external URLs and works appropriately with all standard anchor attributes including target="_blank", rel="noopener noreferrer", etc. Using Link for external URLs is completely appropriate and recommended.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx (2)
86-87: LGTM: router.refresh + closing dialog on successPost‑import refresh and explicit close align with the PR goals and improve UX.
Also applies to: 94-94
107-118: LGTM: Controlled Dialog conversion and layout cleanupControlled open/onOpenChange, trigger-as-child, and content structure look consistent with our UI primitives.
Also applies to: 119-121
graphite-app
bot
deleted the
09-17-dashboard_fix_import_engine_form_submit_not_working
branch
vercel
bot
temporarily deployed
to
Production – thirdweb_playground
PR-Codex overview
This PR enhances the
ImportEngineButtoncomponent by introducing a dialog for importing engine instances. It improves state management, updates the UI layout, and modifies the form submission process.Detailed summary
useStateto manage dialog open state.DialogFooterand replaced with a styled div.Summary by CodeRabbit
New Features
Style