From 82035fd0b760f7269ed75f69dbec86b4f6f62d3d Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Tue, 3 Jun 2025 22:21:32 +0000
Subject: [PATCH] [TOOL-4670] Dashboard: Update Managed Engine CTA, UI tweaks
 (#7266)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## 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 -->
---
 apps/dashboard/src/@/components/ui/tabs.tsx   |   9 +-
 .../engine/dedicated/(general)/layout.tsx     | 129 ++++++++++--------
 .../overview/engine-instances-table.tsx       |  38 ++----
 3 files changed, 86 insertions(+), 90 deletions(-)

diff --git a/apps/dashboard/src/@/components/ui/tabs.tsx b/apps/dashboard/src/@/components/ui/tabs.tsx
index c2ff5d947a3..2fd9d76629b 100644
--- a/apps/dashboard/src/@/components/ui/tabs.tsx
+++ b/apps/dashboard/src/@/components/ui/tabs.tsx
@@ -22,6 +22,7 @@ export function TabLinks(props: {
   tabContainerClassName?: string;
   shadowColor?: string;
   scrollableClassName?: string;
+  bottomLineClassName?: string;
 }) {
   const { containerRef, lineRef, activeTabRef } =
     useUnderline<HTMLAnchorElement>();
@@ -29,7 +30,12 @@ export function TabLinks(props: {
   return (
     <div className={cn("relative", props.className)}>
       {/* Bottom line */}
-      <div className="absolute right-0 bottom-0 left-0 h-[1px] bg-border" />
+      <div
+        className={cn(
+          "absolute right-0 bottom-0 left-0 h-[1px] bg-border",
+          props.bottomLineClassName,
+        )}
+      />
 
       <ScrollShadow
         scrollableClassName={cn("pb-[8px] relative", props.scrollableClassName)}
@@ -216,6 +222,7 @@ export function TabPathLinks(props: {
   tabContainerClassName?: string;
   shadowColor?: string;
   scrollableClassName?: string;
+  bottomLineClassName?: string;
 }) {
   const pathname = usePathname() || "";
   const { links, ...restProps } = props;
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/layout.tsx
index 42d48b09124..51a1099dec2 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/layout.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/layout.tsx
@@ -1,11 +1,10 @@
-import type { SidebarLink } from "@/components/blocks/Sidebar";
-import { SidebarLayout } from "@/components/blocks/SidebarLayout";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { DatabaseIcon } from "lucide-react";
+import { DatabaseIcon, ExternalLinkIcon } from "lucide-react";
 import Link from "next/link";
 import { EngineIcon } from "../../../../../../../(dashboard)/(chain)/components/server/icons/EngineIcon";
+import { TabPathLinks } from "../../../../../../../../../@/components/ui/tabs";
 import { ImportEngineLink } from "./_components";
 
 export default async function Layout(props: {
@@ -17,46 +16,35 @@ export default async function Layout(props: {
 }) {
   const params = await props.params;
   const linkPrefix = `/team/${params.team_slug}/${params.project_slug}/engine/dedicated`;
-  const sidebarLinks: SidebarLink[] = [
-    {
-      label: "Engine Instances",
-      href: `${linkPrefix}`,
-      exactMatch: true,
-    },
-    {
-      label: "Import Engine",
-      href: `${linkPrefix}/import`,
-    },
-  ];
 
   return (
-    <div className="container flex max-w-7xl grow flex-col">
+    <div className="flex grow flex-col">
       {/* header */}
-      <header className="border-border border-b py-10">
-        <div className="container flex flex-col justify-between gap-4 lg:flex-row lg:items-center">
-          <div className="flex flex-col gap-2">
-            <h1 className="flex items-center gap-2 font-semibold text-3xl tracking-tight">
-              Engine{" "}
-              <Badge
-                variant="warning"
-                className="flex items-center gap-2 text-sm"
-              >
-                <DatabaseIcon className="size-4" /> Dedicated
-              </Badge>
-            </h1>
-            <p className="flex flex-col text-muted-foreground text-sm">
-              Manage your deployed Engine instances
-            </p>
+      <header className="pt-10 pb-6">
+        <div className="container max-w-7xl">
+          <div className="flex flex-col justify-between gap-4 lg:flex-row lg:items-center">
+            <div className="flex flex-col gap-2">
+              <h1 className="flex items-center gap-2 font-semibold text-3xl tracking-tight">
+                Engine{" "}
+                <Badge
+                  variant="warning"
+                  className="flex items-center gap-2 text-sm"
+                >
+                  <DatabaseIcon className="size-4" /> Dedicated
+                </Badge>
+              </h1>
+              <p className="flex flex-col text-muted-foreground text-sm">
+                Manage your deployed Engine instances
+              </p>
+            </div>
+            <div className="flex items-center gap-3">
+              <ImportEngineLink
+                label="Import Engine"
+                engineLinkPrefix={linkPrefix}
+              />
+            </div>
           </div>
-          <div className="flex items-center gap-3">
-            <ImportEngineLink
-              label="Import Engine"
-              engineLinkPrefix={linkPrefix}
-            />
-          </div>
-        </div>
-        <div className="h-6" />
-        <div className="container">
+          <div className="h-6" />
           <EngineLegacyBannerUI
             teamSlug={params.team_slug}
             projectSlug={params.project_slug}
@@ -64,10 +52,28 @@ export default async function Layout(props: {
         </div>
       </header>
 
-      {/* sidebar layout */}
-      <SidebarLayout sidebarLinks={sidebarLinks}>
-        {props.children}
-      </SidebarLayout>
+      <div className="relative">
+        <div className="absolute right-0 bottom-0 left-0 h-[1px] bg-border" />
+        <div className="container max-w-7xl">
+          <TabPathLinks
+            className="pt-2"
+            bottomLineClassName="hidden"
+            links={[
+              {
+                name: "Engine Instances",
+                path: `${linkPrefix}`,
+                exactMatch: true,
+              },
+              {
+                name: "Import Engine",
+                path: `${linkPrefix}/import`,
+              },
+            ]}
+          />
+        </div>
+      </div>
+
+      <div className="container max-w-7xl pt-8 pb-10">{props.children}</div>
     </div>
   );
 }
@@ -78,32 +84,37 @@ function EngineLegacyBannerUI(props: {
 }) {
   return (
     <Alert variant="info">
-      <EngineIcon className="size-5" />
       <AlertTitle>Engine Cloud (Beta)</AlertTitle>
-      <AlertDescription>
-        <div className="h-2" />
-        <p className="text-primary-foreground text-sm">
+      <AlertDescription className="pt-1">
+        <p className="text-foreground text-sm">
           Try Engine Cloud (Beta) - now included for free in every thirdweb
           project.
         </p>
         <div className="h-2" />
-        <ul className="list-disc pl-4 text-muted-foreground text-sm">
+        <ul className="list-disc space-y-1.5 pl-4 text-muted-foreground text-sm">
           <li>No recurring monthly cost, pay-per-request model</li>
           <li>Powered by Vault: our new TEE based key management system</li>
           <li>Improved performance and simplified transaction API</li>
         </ul>
-        <div className="h-4" />
-        <div className="flex justify-end gap-2">
-          <Link href={"https://portal.thirdweb.com/engine/v3"} target="_blank">
-            <Button variant="outline">Learn More</Button>
-          </Link>
-          <Link
-            href={`/team/${props.teamSlug}/${props.projectSlug}/engine/cloud`}
-          >
-            <Button variant={"primary"} className="flex items-center gap-2">
+        <div className="h-6" />
+        <div className="flex justify-start gap-3">
+          <Button className="flex items-center gap-2" asChild size="sm">
+            <Link
+              href={`/team/${props.teamSlug}/${props.projectSlug}/engine/cloud`}
+            >
               <EngineIcon className="size-4" /> Try Engine Cloud
-            </Button>
-          </Link>
+            </Link>
+          </Button>
+
+          <Button variant="outline" asChild size="sm">
+            <Link
+              href={"https://portal.thirdweb.com/engine/v3"}
+              target="_blank"
+              className="gap-2 bg-background"
+            >
+              Learn More <ExternalLinkIcon className="size-4" />
+            </Link>
+          </Button>
         </div>
       </AlertDescription>
     </Alert>
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/overview/engine-instances-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/overview/engine-instances-table.tsx
index 395bdf2fa4e..de58eae9213 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/overview/engine-instances-table.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/overview/engine-instances-table.tsx
@@ -2,7 +2,6 @@
 
 import type { Team } from "@/api/team";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge, type BadgeProps } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -53,7 +52,6 @@ import {
 } from "@3rdweb-sdk/react/hooks/useEngine";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation } from "@tanstack/react-query";
-import { PRO_CONTACT_US_URL } from "constants/pro";
 import { useTrack } from "hooks/analytics/useTrack";
 import {
   CheckIcon,
@@ -895,37 +893,17 @@ function EmptyEngineState(props: {
                   Managed Engine
                 </h3>
                 <p className="text-muted-foreground text-sm">
-                  {props.teamPlan !== "pro" ? (
-                    <>
-                      Upgrade your team plan to Accelerate or Scale to get a
-                      fully managed engine instance.{" "}
-                      <UnderlineLink href="/pricing" target="_blank">
-                        View pricing
-                      </UnderlineLink>
-                    </>
-                  ) : (
-                    <>
-                      Contact us to add a managed engine instance to your team
-                    </>
-                  )}
+                  Contact us to add a managed engine instance to your team.{" "}
+                  <br /> We recommend using Engine Cloud in most cases
                 </p>
                 <div className="h-4" />
                 <div className="mt-auto">
-                  {props.teamPlan !== "pro" ? (
-                    <Button className="w-full gap-2" size="sm" asChild>
-                      <Link href={`/team/${props.teamSlug}/~/settings/billing`}>
-                        Upgrade Plan
-                        <ArrowRightIcon size={16} />
-                      </Link>
-                    </Button>
-                  ) : (
-                    <Button className="w-full gap-2" size="sm" asChild>
-                      <Link href={PRO_CONTACT_US_URL} target="_blank">
-                        Contact Us
-                        <ArrowRightIcon size={16} />
-                      </Link>
-                    </Button>
-                  )}
+                  <Button className="w-full gap-2" size="sm" asChild>
+                    <Link href={"/contact-us"} target="_blank">
+                      Contact Us
+                      <ArrowRightIcon size={16} />
+                    </Link>
+                  </Button>
                 </div>
               </div>
             )}