[Dashboard] Add self-service dedicated engine deployment option (#7325)

Author: jnsdls

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

@@ -60,7 +60,7 @@ function TransactionsLayout(props: {
               </div>
             </div>
             <Link href={`${engineBaseSlug}/dedicated`}>
-              <Button variant="outline">View dedicated engines</Button>
+              <Button variant="outline">View Dedicated Engine</Button>
             </Link>
           </div>
         </div>

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

@@ -5,8 +5,8 @@ const meta = {
   title: "Engine/EngineFooterCard",
   component: EngineFooterCard,
   args: {
-    team_slug: "demo-team",
-    project_slug: "demo-project",
+    teamSlug: "demo-team",
+    projectSlug: "demo-project",
   },
   decorators: [
     (Story) => (
@@ -20,26 +20,8 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Growth: Story = {
-  args: {
-    teamPlan: "growth",
-  },
-};
+export const Growth: Story = {};
 
-export const Accelerate: Story = {
-  args: {
-    teamPlan: "accelerate",
-  },
-};
+export const Scale: Story = {};
 
-export const Scale: Story = {
-  args: {
-    teamPlan: "scale",
-  },
-};
-
-export const Pro: Story = {
-  args: {
-    teamPlan: "pro",
-  },
-};
+export const Pro: Story = {};

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

@@ -1,4 +1,3 @@
-import type { Team } from "@/api/team";
 import { Button } from "@/components/ui/button";
 import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { ArrowRightIcon, DownloadIcon, ExternalLinkIcon } from "lucide-react";
@@ -75,15 +74,14 @@ function EngineInfoSection(props: { team_slug: string; project_slug: string }) {
 }
 
 export function EngineFooterCard(props: {
-  teamPlan: Team["billingPlan"];
-  team_slug: string;
-  project_slug: string;
+  teamSlug: string;
+  projectSlug: string;
 }) {
   return (
     <div className="relative rounded-lg border p-6">
       <EngineInfoSection
-        team_slug={props.team_slug}
-        project_slug={props.project_slug}
+        team_slug={props.teamSlug}
+        project_slug={props.projectSlug}
       />
     </div>
   );

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

@@ -1,5 +1,6 @@
 import type { EngineInstance } from "@3rdweb-sdk/react/hooks/useEngine";
 import type { Meta, StoryObj } from "@storybook/react";
+import { teamStub } from "../../../../../../../../../../stories/stubs";
 import { EngineInstancesTableUI } from "./engine-instances-table";
 
 const meta: Meta<typeof Story> = {
@@ -109,15 +110,15 @@ export const NoInstancesProPlan: Story = {
   args: {
     instances: [],
     engineLinkPrefix: "/team/test/engine",
-    teamPlan: "pro",
+    team: teamStub("1", "pro"),
   },
 };
 
 export const NoInstancesGrowthPlan: Story = {
   args: {
     instances: [],
     engineLinkPrefix: "/team/test/engine",
-    teamPlan: "growth",
+    team: teamStub("2", "growth"),
   },
 };
 
@@ -127,7 +128,7 @@ export const NoInstancesAcceleratePlan: Story = {
   args: {
     instances: [],
     engineLinkPrefix: "/team/test/engine",
-    teamPlan: "accelerate",
+    team: teamStub("3", "accelerate"),
   },
 };