[Dashboard] feat: Add allowed operations to partner access control (#6478)

Author: joaquim-verges

apps/dashboard/src/app/account/settings/getAccount.ts

@@ -22,6 +22,11 @@ export async function getRawAccount() {
     },
   });
 
+  if (!res.ok) {
+    console.error("Error fetching account", res.status, res.statusText);
+    return undefined;
+  }
+
   const json = await res.json();
 
   if (json.error) {

apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/add-partner/page.tsx

@@ -0,0 +1,50 @@
+import {} from "@/components/ui/breadcrumb";
+import { getAuthToken } from "../../../../../../../../../api/lib/getAuthToken";
+import { loginRedirect } from "../../../../../../../../../login/loginRedirect";
+import { AddPartnerForm } from "../components/client/add-partner-form.client";
+import { fetchEcosystem } from "../hooks/fetchEcosystem";
+
+export default async function AddPartnerPage({
+  params,
+}: {
+  params: Promise<{ slug: string; team_slug: string }>;
+}) {
+  const { slug, team_slug } = await params;
+  const authToken = await getAuthToken();
+
+  if (!authToken) {
+    loginRedirect(`/team/${team_slug}/~/ecosystem/${slug}`);
+  }
+
+  const teamSlug = team_slug;
+  const ecosystemSlug = slug;
+
+  try {
+    const ecosystem = await fetchEcosystem({
+      teamIdOrSlug: teamSlug,
+      slug: ecosystemSlug,
+      authToken,
+    });
+
+    return (
+      <div className="flex flex-col">
+        <div className="container">
+          <h1 className="mb-6 font-semibold text-2xl tracking-tight">
+            Add New Partner
+          </h1>
+          <AddPartnerForm ecosystem={ecosystem} authToken={authToken} />
+        </div>
+      </div>
+    );
+  } catch (error) {
+    console.error("Error fetching ecosystem:", error);
+    return (
+      <div className="container py-8">
+        <div className="mx-auto max-w-3xl">
+          <h1 className="mb-6 font-semibold text-2xl tracking-tight">Error</h1>
+          <p>Could not load ecosystem. Please try again.</p>
+        </div>
+      </div>
+    );
+  }
+}

apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/AddPartnerDialogButton.tsx

@@ -1,43 +1,23 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
 import { PlusIcon } from "lucide-react";
-import { useState } from "react";
+import Link from "next/link";
 import type { Ecosystem } from "../../../../../types";
-import { AddPartnerForm } from "./add-partner-form.client";
 
 export function AddPartnerDialogButton(props: {
+  teamSlug: string;
   ecosystem: Ecosystem;
   authToken: string;
 }) {
-  const [open, setOpen] = useState(false);
+  const addPartnerUrl = `/team/${props.teamSlug}/~/ecosystem/${props.ecosystem.slug}/configuration/add-partner`;
+
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button className="gap-2 max-sm:w-full" variant="outline" size="sm">
-          <PlusIcon className="size-4" />
-          Add Partner
-        </Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader className="mb-2">
-          <DialogTitle className="font-semibold text-2xl tracking-tight">
-            Add Partner
-          </DialogTitle>
-        </DialogHeader>
-        <AddPartnerForm
-          ecosystem={props.ecosystem}
-          onPartnerAdded={() => setOpen(false)}
-          authToken={props.authToken}
-        />
-      </DialogContent>
-    </Dialog>
+    <Link href={addPartnerUrl} passHref>
+      <Button className="gap-2 max-sm:w-full" variant="outline" size="sm">
+        <PlusIcon className="size-4" />
+        Add Partner
+      </Button>
+    </Link>
   );
 }

apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/EcosystemPermissionsPage.tsx

@@ -21,7 +21,11 @@ export function EcosystemPermissionsPage({
       />
       <AuthOptionsSection ecosystem={ecosystem} authToken={authToken} />
       {ecosystem?.permission === "PARTNER_WHITELIST" && (
-        <EcosystemPartnersSection ecosystem={ecosystem} authToken={authToken} />
+        <EcosystemPartnersSection
+          teamSlug={params.team_slug}
+          ecosystem={ecosystem}
+          authToken={authToken}
+        />
       )}
     </div>
   );

apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/add-partner-form.client.tsx

@@ -1,24 +1,36 @@
+"use client";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { useParams } from "next/navigation";
 import { toast } from "sonner";
 import type { Ecosystem, Partner } from "../../../../../types";
 import { useAddPartner } from "../../hooks/use-add-partner";
 import { PartnerForm, type PartnerFormValues } from "./partner-form.client";
 
 export function AddPartnerForm({
   ecosystem,
-  onPartnerAdded,
   authToken,
 }: {
-  authToken: string;
   ecosystem: Ecosystem;
-  onPartnerAdded: () => void;
+  authToken: string;
 }) {
+  const router = useDashboardRouter();
+  const params = useParams();
+  const teamSlug = params.team_slug as string;
+  const ecosystemSlug = params.slug as string;
+
   const { mutateAsync: addPartner, isPending } = useAddPartner(
     {
       authToken,
     },
     {
       onSuccess: () => {
-        onPartnerAdded();
+        toast.success("Partner added successfully", {
+          description: "The partner has been added to your ecosystem.",
+        });
+
+        // Redirect to the redirect page that will take us back to the configuration page
+        const redirectPath = `/team/${teamSlug}/~/ecosystem/${ecosystemSlug}`;
+        router.push(redirectPath);
       },
       onError: (error) => {
         const message =