[Dashboard] Refactor team engines UI (#6892)

Author: joaquim-verges

apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts

@@ -7,12 +7,12 @@ import {
   useQuery,
   useQueryClient,
 } from "@tanstack/react-query";
-import type { ResultItem } from "app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/components/StatusCodes";
 import type { EngineBackendWalletType } from "lib/engine";
 import { useState } from "react";
 import { useActiveAccount } from "thirdweb/react";
 import invariant from "tiny-invariant";
-import type { EngineStatus } from "../../../app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transactions-table";
+import type { ResultItem } from "../../../app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/components/StatusCodes";
+import type { EngineStatus } from "../../../app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/transactions-table";
 import { engineKeys } from "../cache-keys";
 
 // Engine instances
@@ -1641,15 +1641,19 @@ interface EngineResourceMetrics {
   };
 }
 
-export function useEngineSystemMetrics(engineId: string, teamIdOrSlug: string) {
+export function useEngineSystemMetrics(
+  engineId: string,
+  teamIdOrSlug: string,
+  projectSlug: string,
+) {
   const [enabled, setEnabled] = useState(true);
 
   return useQuery({
     queryKey: engineKeys.systemMetrics(engineId),
     queryFn: async () => {
       const res = await apiServerProxy({
         method: "GET",
-        pathname: `/v1/teams/${teamIdOrSlug}/engine/${engineId}/metrics`,
+        pathname: `/v1/teams/${teamIdOrSlug}/${projectSlug}/engine/dedicated/${engineId}/metrics`,
       });
 
       if (!res.ok) {

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/layout.tsx

@@ -5,7 +5,6 @@ import { TabPathLinks } from "@/components/ui/tabs";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { AnnouncementBanner } from "components/notices/AnnouncementBanner";
 import { redirect } from "next/navigation";
-import { Badge } from "../../../../../@/components/ui/badge";
 import { getValidAccount } from "../../../account/settings/getAccount";
 import {
   getAuthToken,
@@ -75,15 +74,6 @@ export default async function TeamLayout(props: {
               path: `/team/${params.team_slug}/~/analytics`,
               name: "Analytics",
             },
-            {
-              path: `/team/${params.team_slug}/~/engine`,
-              name: (
-                <span className="flex items-center gap-2">
-                  Engines
-                  <Badge variant="warning">Legacy</Badge>
-                </span>
-              ),
-            },
             {
               path: `/team/${params.team_slug}/~/ecosystem`,
               name: "Ecosystems",

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/components/ProjectSidebarLayout.tsx

@@ -12,7 +12,6 @@ import { EngineIcon } from "../../../../(dashboard)/(chain)/components/server/ic
 import { InsightIcon } from "../../../../(dashboard)/(chain)/components/server/icons/InsightIcon";
 import { PayIcon } from "../../../../(dashboard)/(chain)/components/server/icons/PayIcon";
 import { SmartAccountIcon } from "../../../../(dashboard)/(chain)/components/server/icons/SmartAccountIcon";
-import { Badge } from "../../../../../../@/components/ui/badge";
 import { NebulaIcon } from "../../../../../nebula-app/(app)/icons/NebulaIcon";
 
 export function ProjectSidebarLayout(props: {
@@ -63,11 +62,7 @@ export function ProjectSidebarLayout(props: {
         },
         {
           href: `${layoutPath}/engine`,
-          label: (
-            <span>
-              Engine <Badge>Beta</Badge>
-            </span>
-          ),
+          label: "Engine",
           icon: EngineIcon,
           tracking: tracking("engine"),
         },

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/analytics-page.tsx renamed to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/analytics-page.tsx

@@ -5,8 +5,8 @@ import {
   useResponsiveSearchParams,
   useSetResponsiveSearchParams,
 } from "responsive-rsc";
-import { DateRangeSelector } from "../../../../../../../components/analytics/date-range-selector";
-import { IntervalSelector } from "../../../../../../../components/analytics/interval-selector";
+import { DateRangeSelector } from "../../../../../../../../components/analytics/date-range-selector";
+import { IntervalSelector } from "../../../../../../../../components/analytics/interval-selector";
 import { getTxAnalyticsFiltersFromSearchParams } from "../lib/utils";
 
 export function TransactionAnalyticsFilter() {

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/filter.tsx renamed to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/filter.tsx

@@ -3,7 +3,7 @@ import type { Project } from "@/api/projects";
 import { type Step, StepsCard } from "components/dashboard/StepsCard";
 import Link from "next/link";
 import { useMemo, useState } from "react";
-import { Button } from "../../../../../../../@/components/ui/button";
+import { Button } from "../../../../../../../../@/components/ui/button";
 import CreateServerWallet from "../server-wallets/components/create-server-wallet.client";
 import type { Wallet } from "../server-wallets/wallet-table/types";
 import CreateVaultAccountButton from "../vault/components/create-vault-account.client";