From b6deb15e79edfddb6ded04c802c460ae03a33d2e Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Mon, 16 Dec 2024 22:00:37 +0000
Subject: [PATCH] [DASH-638] Improve page load speed for <project>/connect tab
 by skipping a redirect (#5758)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem solved

DASH-638

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new `ProjectTabs` component to replace the existing `TabPathLinks` usage in the `TeamLayout`. It enhances tab management by allowing custom active tab logic and streamlining the tab structure.

### Detailed summary
- Added `isActive` prop to the `links` array in `tabs.tsx`.
- Introduced `ProjectTabs` component in `tabs.tsx` for managing project-related tabs.
- Replaced `TabPathLinks` with `ProjectTabs` in `layout.tsx`.
- Removed unused code for project fetching and not found handling in `page.tsx`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 apps/dashboard/src/@/components/ui/tabs.tsx   |  9 ++--
 .../[project_slug]/connect/page.tsx           |  8 +--
 .../[team_slug]/[project_slug]/layout.tsx     | 38 ++------------
 .../team/[team_slug]/[project_slug]/tabs.tsx  | 49 +++++++++++++++++++
 4 files changed, 60 insertions(+), 44 deletions(-)
 create mode 100644 apps/dashboard/src/app/team/[team_slug]/[project_slug]/tabs.tsx

diff --git a/apps/dashboard/src/@/components/ui/tabs.tsx b/apps/dashboard/src/@/components/ui/tabs.tsx
index f74a9e74e6c..e06596e4540 100644
--- a/apps/dashboard/src/@/components/ui/tabs.tsx
+++ b/apps/dashboard/src/@/components/ui/tabs.tsx
@@ -199,6 +199,7 @@ export function TabPathLinks(props: {
     path: string;
     exactMatch?: boolean;
     isDisabled?: boolean;
+    isActive?: (pathname: string) => boolean;
   }[];
   className?: string;
   tabContainerClassName?: string;
@@ -212,9 +213,11 @@ export function TabPathLinks(props: {
       links={links.map((l) => ({
         name: l.name,
         href: l.path,
-        isActive: l.exactMatch
-          ? pathname === l.path
-          : pathname.startsWith(l.path),
+        isActive: l.isActive
+          ? l.isActive(pathname)
+          : l.exactMatch
+            ? pathname === l.path
+            : pathname.startsWith(l.path),
         isDisabled: l.isDisabled,
       }))}
     />
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/page.tsx
index e8c8a734c52..1b134327574 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/page.tsx
@@ -1,5 +1,4 @@
-import { getProject } from "@/api/projects";
-import { notFound, redirect } from "next/navigation";
+import { redirect } from "next/navigation";
 
 export default async function Page(props: {
   params: Promise<{
@@ -8,11 +7,6 @@ export default async function Page(props: {
   }>;
 }) {
   const params = await props.params;
-  const project = await getProject(params.team_slug, params.project_slug);
-
-  if (!project) {
-    notFound();
-  }
 
   redirect(
     `/team/${params.team_slug}/${params.project_slug}/connect/in-app-wallets`,
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/layout.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/layout.tsx
index 1f092a1a322..82e97357209 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/layout.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/layout.tsx
@@ -1,9 +1,9 @@
 import { getProjects } from "@/api/projects";
 import { getTeamNebulaWaitList, getTeams } from "@/api/team";
-import { TabPathLinks } from "@/components/ui/tabs";
 import { notFound, redirect } from "next/navigation";
 import { getValidAccount } from "../../../account/settings/getAccount";
 import { TeamHeaderLoggedIn } from "../../components/TeamHeader/team-header-logged-in.client";
+import { ProjectTabs } from "./tabs";
 
 export default async function TeamLayout(props: {
   children: React.ReactNode;
@@ -55,39 +55,9 @@ export default async function TeamLayout(props: {
           teamsAndProjects={teamsAndProjects}
           account={account}
         />
-        <TabPathLinks
-          tabContainerClassName="px-4 lg:px-6"
-          links={[
-            {
-              path: `/team/${params.team_slug}/${params.project_slug}`,
-              exactMatch: true,
-              name: "Overview",
-            },
-            {
-              path: `/team/${params.team_slug}/${params.project_slug}/connect`,
-              name: "Connect",
-            },
-            {
-              path: `/team/${params.team_slug}/${params.project_slug}/contracts`,
-              name: "Contracts",
-            },
-            ...(isOnNebulaWaitList
-              ? [
-                  {
-                    path: `/team/${params.team_slug}/${params.project_slug}/nebula`,
-                    name: "Nebula",
-                  },
-                ]
-              : []),
-            {
-              path: `/team/${params.team_slug}/${params.project_slug}/insight`,
-              name: "Insight",
-            },
-            {
-              path: `/team/${params.team_slug}/${params.project_slug}/settings`,
-              name: "Settings",
-            },
-          ]}
+        <ProjectTabs
+          layoutPath={`/team/${params.team_slug}/${params.project_slug}`}
+          isOnNebulaWaitList={!!isOnNebulaWaitList}
         />
       </div>
       <div className="flex grow flex-col">{props.children}</div>
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/tabs.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/tabs.tsx
new file mode 100644
index 00000000000..dfa2212db26
--- /dev/null
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/tabs.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { TabPathLinks } from "@/components/ui/tabs";
+
+export function ProjectTabs(props: {
+  layoutPath: string;
+  isOnNebulaWaitList: boolean;
+}) {
+  const { layoutPath, isOnNebulaWaitList } = props;
+
+  return (
+    <TabPathLinks
+      tabContainerClassName="px-4 lg:px-6"
+      links={[
+        {
+          path: layoutPath,
+          exactMatch: true,
+          name: "Overview",
+        },
+        {
+          // directly link to /in-app-wallets to skip 1 redirect and use `isActive` for checking if the tab is active or not
+          path: `${layoutPath}/connect/in-app-wallets`,
+          name: "Connect",
+          isActive: (path) => path.startsWith(`${layoutPath}/connect`),
+        },
+        {
+          path: `${layoutPath}/contracts`,
+          name: "Contracts",
+        },
+        ...(isOnNebulaWaitList
+          ? [
+              {
+                path: `${layoutPath}/nebula`,
+                name: "Nebula",
+              },
+            ]
+          : []),
+        {
+          path: `${layoutPath}/insight`,
+          name: "Insight",
+        },
+        {
+          path: `${layoutPath}/settings`,
+          name: "Settings",
+        },
+      ]}
+    />
+  );
+}