Skip to content

Commit 82035fd

Browse files
MananTankMananTank
committed
[TOOL-4670] Dashboard: Update Managed Engine CTA, UI tweaks (#7266)
<!-- ## 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 new `bottomLineClassName` prop to the `TabLinks` and `TabPathLinks` components, enhancing customization options for styling. It also simplifies the UI in the `EmptyEngineState` component and updates the layout for better structure and readability. ### Detailed summary - Added `bottomLineClassName` prop to `TabLinks` and `TabPathLinks`. - Updated `TabLinks` to use `bottomLineClassName` for styling. - Simplified `EmptyEngineState` content and button structure. - Refactored layout in `Layout` component for improved organization. - Adjusted `EngineLegacyBannerUI` for better spacing and button layout. > ✨ 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 - **Refactor** - Updated navigation layout for the engine section with new tabbed navigation and improved header structure. - Adjusted container layouts for more consistent spacing and alignment. - **Style** - Restyled the legacy banner, including button order, alignment, and icon adjustments for a clearer appearance. - Enhanced tab navigation with customizable bottom line styling for better visual integration. - **Bug Fixes** - Unified the messaging and actions for adding a managed engine instance, removing plan-based differences for a more consistent user experience. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
1 parent 8b32459 commit 82035fd

File tree

3 files changed

+86
-90
lines changed

3 files changed

+86
-90
lines changed

‎apps/dashboard/src/@/components/ui/tabs.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,20 @@ export function TabLinks(props: {
2222
tabContainerClassName?: string;
2323
shadowColor?: string;
2424
scrollableClassName?: string;
25+
bottomLineClassName?: string;
2526
}) {
2627
const { containerRef, lineRef, activeTabRef } =
2728
useUnderline<HTMLAnchorElement>();
2829

2930
return (
3031
<div className={cn("relative", props.className)}>
3132
{/* Bottom line */}
32-
<div className="absolute right-0 bottom-0 left-0 h-[1px] bg-border" />
33+
<div
34+
className={cn(
35+
"absolute right-0 bottom-0 left-0 h-[1px] bg-border",
36+
props.bottomLineClassName,
37+
)}
38+
/>
3339

3440
<ScrollShadow
3541
scrollableClassName={cn("pb-[8px] relative", props.scrollableClassName)}
@@ -216,6 +222,7 @@ export function TabPathLinks(props: {
216222
tabContainerClassName?: string;
217223
shadowColor?: string;
218224
scrollableClassName?: string;
225+
bottomLineClassName?: string;
219226
}) {
220227
const pathname = usePathname() || "";
221228
const { links, ...restProps } = props;

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/layout.tsx‎

Lines changed: 70 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import type { SidebarLink } from "@/components/blocks/Sidebar";
2-
import { SidebarLayout } from "@/components/blocks/SidebarLayout";
31
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
42
import { Badge } from "@/components/ui/badge";
53
import { Button } from "@/components/ui/button";
6-
import { DatabaseIcon } from "lucide-react";
4+
import { DatabaseIcon, ExternalLinkIcon } from "lucide-react";
75
import Link from "next/link";
86
import { EngineIcon } from "../../../../../../../(dashboard)/(chain)/components/server/icons/EngineIcon";
7+
import { TabPathLinks } from "../../../../../../../../../@/components/ui/tabs";
98
import { ImportEngineLink } from "./_components";
109

1110
export default async function Layout(props: {
@@ -17,57 +16,64 @@ export default async function Layout(props: {
1716
}) {
1817
const params = await props.params;
1918
const linkPrefix = `/team/${params.team_slug}/${params.project_slug}/engine/dedicated`;
20-
const sidebarLinks: SidebarLink[] = [
21-
{
22-
label: "Engine Instances",
23-
href: `${linkPrefix}`,
24-
exactMatch: true,
25-
},
26-
{
27-
label: "Import Engine",
28-
href: `${linkPrefix}/import`,
29-
},
30-
];
3119

3220
return (
33-
<div className="container flex max-w-7xl grow flex-col">
21+
<div className="flex grow flex-col">
3422
{/* header */}
35-
<header className="border-border border-b py-10">
36-
<div className="container flex flex-col justify-between gap-4 lg:flex-row lg:items-center">
37-
<div className="flex flex-col gap-2">
38-
<h1 className="flex items-center gap-2 font-semibold text-3xl tracking-tight">
39-
Engine{" "}
40-
<Badge
41-
variant="warning"
42-
className="flex items-center gap-2 text-sm"
43-
>
44-
<DatabaseIcon className="size-4" /> Dedicated
45-
</Badge>
46-
</h1>
47-
<p className="flex flex-col text-muted-foreground text-sm">
48-
Manage your deployed Engine instances
49-
</p>
23+
<header className="pt-10 pb-6">
24+
<div className="container max-w-7xl">
25+
<div className="flex flex-col justify-between gap-4 lg:flex-row lg:items-center">
26+
<div className="flex flex-col gap-2">
27+
<h1 className="flex items-center gap-2 font-semibold text-3xl tracking-tight">
28+
Engine{" "}
29+
<Badge
30+
variant="warning"
31+
className="flex items-center gap-2 text-sm"
32+
>
33+
<DatabaseIcon className="size-4" /> Dedicated
34+
</Badge>
35+
</h1>
36+
<p className="flex flex-col text-muted-foreground text-sm">
37+
Manage your deployed Engine instances
38+
</p>
39+
</div>
40+
<div className="flex items-center gap-3">
41+
<ImportEngineLink
42+
label="Import Engine"
43+
engineLinkPrefix={linkPrefix}
44+
/>
45+
</div>
5046
</div>
51-
<div className="flex items-center gap-3">
52-
<ImportEngineLink
53-
label="Import Engine"
54-
engineLinkPrefix={linkPrefix}
55-
/>
56-
</div>
57-
</div>
58-
<div className="h-6" />
59-
<div className="container">
47+
<div className="h-6" />
6048
<EngineLegacyBannerUI
6149
teamSlug={params.team_slug}
6250
projectSlug={params.project_slug}
6351
/>
6452
</div>
6553
</header>
6654

67-
{/* sidebar layout */}
68-
<SidebarLayout sidebarLinks={sidebarLinks}>
69-
{props.children}
70-
</SidebarLayout>
55+
<div className="relative">
56+
<div className="absolute right-0 bottom-0 left-0 h-[1px] bg-border" />
57+
<div className="container max-w-7xl">
58+
<TabPathLinks
59+
className="pt-2"
60+
bottomLineClassName="hidden"
61+
links={[
62+
{
63+
name: "Engine Instances",
64+
path: `${linkPrefix}`,
65+
exactMatch: true,
66+
},
67+
{
68+
name: "Import Engine",
69+
path: `${linkPrefix}/import`,
70+
},
71+
]}
72+
/>
73+
</div>
74+
</div>
75+
76+
<div className="container max-w-7xl pt-8 pb-10">{props.children}</div>
7177
</div>
7278
);
7379
}
@@ -78,32 +84,37 @@ function EngineLegacyBannerUI(props: {
7884
}) {
7985
return (
8086
<Alert variant="info">
81-
<EngineIcon className="size-5" />
8287
<AlertTitle>Engine Cloud (Beta)</AlertTitle>
83-
<AlertDescription>
84-
<div className="h-2" />
85-
<p className="text-primary-foreground text-sm">
88+
<AlertDescription className="pt-1">
89+
<p className="text-foreground text-sm">
8690
Try Engine Cloud (Beta) - now included for free in every thirdweb
8791
project.
8892
</p>
8993
<div className="h-2" />
90-
<ul className="list-disc pl-4 text-muted-foreground text-sm">
94+
<ul className="list-disc space-y-1.5 pl-4 text-muted-foreground text-sm">
9195
<li>No recurring monthly cost, pay-per-request model</li>
9296
<li>Powered by Vault: our new TEE based key management system</li>
9397
<li>Improved performance and simplified transaction API</li>
9498
</ul>
95-
<div className="h-4" />
96-
<div className="flex justify-end gap-2">
97-
<Link href={"https://portal.thirdweb.com/engine/v3"} target="_blank">
98-
<Button variant="outline">Learn More</Button>
99-
</Link>
100-
<Link
101-
href={`/team/${props.teamSlug}/${props.projectSlug}/engine/cloud`}
102-
>
103-
<Button variant={"primary"} className="flex items-center gap-2">
99+
<div className="h-6" />
100+
<div className="flex justify-start gap-3">
101+
<Button className="flex items-center gap-2" asChild size="sm">
102+
<Link
103+
href={`/team/${props.teamSlug}/${props.projectSlug}/engine/cloud`}
104+
>
104105
<EngineIcon className="size-4" /> Try Engine Cloud
105-
</Button>
106-
</Link>
106+
</Link>
107+
</Button>
108+
109+
<Button variant="outline" asChild size="sm">
110+
<Link
111+
href={"https://portal.thirdweb.com/engine/v3"}
112+
target="_blank"
113+
className="gap-2 bg-background"
114+
>
115+
Learn More <ExternalLinkIcon className="size-4" />
116+
</Link>
117+
</Button>
107118
</div>
108119
</AlertDescription>
109120
</Alert>

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/overview/engine-instances-table.tsx‎

Lines changed: 8 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
import type { Team } from "@/api/team";
44
import { Spinner } from "@/components/ui/Spinner/Spinner";
5-
import { UnderlineLink } from "@/components/ui/UnderlineLink";
65
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
76
import { Badge, type BadgeProps } from "@/components/ui/badge";
87
import { Button } from "@/components/ui/button";
@@ -53,7 +52,6 @@ import {
5352
} from "@3rdweb-sdk/react/hooks/useEngine";
5453
import { zodResolver } from "@hookform/resolvers/zod";
5554
import { useMutation } from "@tanstack/react-query";
56-
import { PRO_CONTACT_US_URL } from "constants/pro";
5755
import { useTrack } from "hooks/analytics/useTrack";
5856
import {
5957
CheckIcon,
@@ -895,37 +893,17 @@ function EmptyEngineState(props: {
895893
Managed Engine
896894
</h3>
897895
<p className="text-muted-foreground text-sm">
898-
{props.teamPlan !== "pro" ? (
899-
<>
900-
Upgrade your team plan to Accelerate or Scale to get a
901-
fully managed engine instance.{" "}
902-
<UnderlineLink href="/pricing" target="_blank">
903-
View pricing
904-
</UnderlineLink>
905-
</>
906-
) : (
907-
<>
908-
Contact us to add a managed engine instance to your team
909-
</>
910-
)}
896+
Contact us to add a managed engine instance to your team.{" "}
897+
<br /> We recommend using Engine Cloud in most cases
911898
</p>
912899
<div className="h-4" />
913900
<div className="mt-auto">
914-
{props.teamPlan !== "pro" ? (
915-
<Button className="w-full gap-2" size="sm" asChild>
916-
<Link href={`/team/${props.teamSlug}/~/settings/billing`}>
917-
Upgrade Plan
918-
<ArrowRightIcon size={16} />
919-
</Link>
920-
</Button>
921-
) : (
922-
<Button className="w-full gap-2" size="sm" asChild>
923-
<Link href={PRO_CONTACT_US_URL} target="_blank">
924-
Contact Us
925-
<ArrowRightIcon size={16} />
926-
</Link>
927-
</Button>
928-
)}
901+
<Button className="w-full gap-2" size="sm" asChild>
902+
<Link href={"/contact-us"} target="_blank">
903+
Contact Us
904+
<ArrowRightIcon size={16} />
905+
</Link>
906+
</Button>
929907
</div>
930908
</div>
931909
)}

0 commit comments

Comments
 (0)