From 32568fd421311925982a041316faf1c458ba7edd Mon Sep 17 00:00:00 2001
From: jnsdls <jonas.daniels@outlook.com>
Date: Thu, 17 Apr 2025 08:06:51 +0000
Subject: [PATCH] Add "Invite Team Members" button to team overview page
 (#6755)

# Add "Invite Team Members" Button to Team Overview Page

This PR adds a new "Invite Team Members" button to the Team Overview page, replacing the previous implementation. The changes include:

- Created a new reusable `InviteTeamMembersButton` component
- Added the button to the Team Overview page header
- Removed the old "Share Button" component from the TeamProjectsPage
- Improved the layout of the Team Overview page header to accommodate the new button
- Maintained analytics tracking for the invite action

The button links to the team members settings page and includes a user plus icon for better visual indication of its purpose.
---
 .../invite-team-members-button.tsx            | 29 +++++++++++++++++++
 .../src/app/team/[team_slug]/(team)/page.tsx  | 14 +++++----
 .../(team)/~/projects/TeamProjectsPage.tsx    | 29 +------------------
 3 files changed, 39 insertions(+), 33 deletions(-)
 create mode 100644 apps/dashboard/src/app/team/[team_slug]/(team)/_components/invite-team-members-button.tsx

diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/_components/invite-team-members-button.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/_components/invite-team-members-button.tsx
new file mode 100644
index 00000000000..f9da4f417fa
--- /dev/null
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/_components/invite-team-members-button.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { useTrack } from "hooks/analytics/useTrack";
+import { UserPlusIcon } from "lucide-react";
+import Link from "next/link";
+
+export function InviteTeamMembersButton(props: { teamSlug: string }) {
+  const trackEvent = useTrack();
+  return (
+    <Button
+      asChild
+      variant="outline"
+      className="gap-2"
+      onClick={() =>
+        trackEvent({
+          category: "inviteTeam",
+          action: "click",
+          label: "invite-team",
+        })
+      }
+    >
+      <Link href={`/team/${props.teamSlug}/~/settings/members`}>
+        <UserPlusIcon className="size-4" />
+        <span>Invite Team Members</span>
+      </Link>
+    </Button>
+  );
+}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/page.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/page.tsx
index 53481e7db65..1a90700bc6d 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/page.tsx
@@ -6,6 +6,7 @@ import { subDays } from "date-fns";
 import { redirect } from "next/navigation";
 import { getAuthToken } from "../../../api/lib/getAuthToken";
 import { loginRedirect } from "../../../login/loginRedirect";
+import { InviteTeamMembersButton } from "./_components/invite-team-members-button";
 import {
   type ProjectWithAnalytics,
   TeamProjectsPage,
@@ -33,11 +34,14 @@ export default async function Page(props: {
 
   return (
     <div className="flex grow flex-col">
-      <div className="border-border border-b py-10">
-        <div className="container">
-          <h1 className="font-semibold text-3xl tracking-tight">
-            Team Overview
-          </h1>
+      <div className="border-border border-b">
+        <div className="container flex flex-col items-start gap-3 py-10 md:flex-row md:items-center">
+          <div className="flex-1">
+            <h1 className="font-semibold text-3xl tracking-tight">
+              Team Overview
+            </h1>
+          </div>
+          <InviteTeamMembersButton teamSlug={params.team_slug} />
         </div>
       </div>
 
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx
index 1b875603129..e7df993ad30 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx
@@ -26,8 +26,7 @@ import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { cn } from "@/lib/utils";
 import { LazyCreateProjectDialog } from "components/settings/ApiKeys/Create/LazyCreateAPIKeyDialog";
 import { formatDate } from "date-fns";
-import { useTrack } from "hooks/analytics/useTrack";
-import { PlusIcon, SearchIcon, UserPlus } from "lucide-react";
+import { PlusIcon, SearchIcon } from "lucide-react";
 import Link from "next/link";
 import { useMemo, useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
@@ -120,9 +119,6 @@ export function TeamProjectsPage(props: {
               createProject={() => setIsCreateProjectDialogOpen(true)}
               teamMembersSettingsPath={`/team/${props.team.slug}/~/settings/members`}
             />
-            <Link href={`/team/${props.team.slug}/~/settings/members`}>
-              <ShareButton />
-            </Link>
           </div>
         </div>
       </div>
@@ -283,29 +279,6 @@ function AddNewButton(props: {
   );
 }
 
-function ShareButton() {
-  //track event click
-  const trackEvent = useTrack();
-  return (
-    <Button
-      variant="default"
-      className="absolute top-0 right-0 gap-2 lg:static"
-      onClick={() =>
-        trackEvent({
-          category: "inviteTeam",
-          action: "click",
-          label: "invite-team",
-        })
-      }
-    >
-      <UserPlus className="size-4" />
-      <span>
-        <span className="hidden lg:inline">Invite</span>to Team
-      </span>
-    </Button>
-  );
-}
-
 function SelectBy(props: {
   value: SortById;
   onChange: (value: SortById) => void;