Merge pull request #1637 from thunderstore-io/team-settings-pt5-disband

Use API request to determine if user can leave or disband a team

Author: anttimaki

apps/cyberstorm-remix/app/settings/teams/team/tabs/Settings/Settings.tsx

@@ -26,25 +26,23 @@ import {
 } from "@thunderstore/thunderstore-api";
 import { ApiAction } from "@thunderstore/ts-api-react-actions";
 
-import { NotLoggedIn } from "app/commonComponents/NotLoggedIn/NotLoggedIn";
 import { type OutletContextShape } from "app/root";
 import { makeTeamSettingsTabLoader } from "cyberstorm/utils/dapperClientLoaders";
+import { isTeamOwner } from "cyberstorm/utils/permissions";
 import { useStrongForm } from "cyberstorm/utils/StrongForm/useStrongForm";
 
 export const clientLoader = makeTeamSettingsTabLoader(
-  // TODO: add end point for checking can leave/disband status.
-  async (dapper, teamName) => ({ teamName })
+  async (dapper, teamName) => ({
+    permissions: dapper.getCurrentUserTeamPermissions(teamName),
+  })
 );
 
 export default function Settings() {
-  const { teamName } = useLoaderData<typeof clientLoader>();
+  const { permissions, teamName } = useLoaderData<typeof clientLoader>();
   const outletContext = useOutletContext() as OutletContextShape;
   const toast = useToast();
   const navigate = useNavigate();
 
-  const currentUser = outletContext.currentUser?.username;
-  if (!currentUser) return <NotLoggedIn />;
-
   async function moveToTeams() {
     toast.addToast({
       csVariant: "info",
@@ -56,56 +54,51 @@ export default function Settings() {
 
   return (
     <Suspense fallback={<div>Loading...</div>}>
-      <Await resolve={teamName}>
-        {(resolvedTeamName) => (
+      <Await resolve={permissions}>
+        {(resolvedPermissions) => (
           <div className="settings-items">
             <div className="settings-items__item">
               <div className="settings-items__meta">
                 <p className="settings-items__title">Leave team</p>
-                <p className="settings-items__description">Leave your team</p>
+                <p className="settings-items__description">
+                  Resign from the team
+                </p>
               </div>
               <div className="settings-items__content">
-                <NewAlert csVariant="danger">
-                  You cannot currently leave this team as you are it&apos;s last
-                  owner.
-                </NewAlert>
-                <p>
-                  If you are the owner of the team, you can only leave if the
-                  team has another owner assigned.
-                </p>
-                <LeaveTeamForm
-                  userName={currentUser}
-                  teamName={resolvedTeamName}
-                  toast={toast}
-                  config={outletContext.requestConfig}
-                  updateTrigger={moveToTeams}
-                />
+                {resolvedPermissions.can_leave_team ? (
+                  <LeaveTeamForm
+                    userName={outletContext.currentUser?.username ?? ""}
+                    teamName={teamName}
+                    toast={toast}
+                    config={outletContext.requestConfig}
+                    updateTrigger={moveToTeams}
+                  />
+                ) : (
+                  <LastOwnerAlert />
+                )}
               </div>
             </div>
             <div className="settings-items__separator" />
             <div className="settings-items__item">
               <div className="settings-items__meta">
                 <p className="settings-items__title">Disband team</p>
                 <p className="settings-items__description">
-                  Disband your team completely
+                  Remove the team completely
                 </p>
               </div>
               <div className="settings-items__content">
-                <NewAlert csVariant="danger">
-                  You cannot currently disband this team as it has packages.
-                </NewAlert>
-                <p>You are about to disband the team {resolvedTeamName}.</p>
-                <p>
-                  Be aware you can currently only disband teams with no
-                  packages. If you need to archive a team with existing pages,
-                  contact Mythic#0001 on the Thunderstore Discord.
-                </p>
-                <DisbandTeamForm
-                  teamName={resolvedTeamName}
-                  updateTrigger={moveToTeams}
-                  config={outletContext.requestConfig}
-                  toast={toast}
-                />
+                {resolvedPermissions.can_disband_team ? (
+                  <DisbandTeamForm
+                    teamName={teamName}
+                    updateTrigger={moveToTeams}
+                    config={outletContext.requestConfig}
+                    toast={toast}
+                  />
+                ) : isTeamOwner(teamName, outletContext.currentUser) ? (
+                  <TeamHasPackagesAlert />
+                ) : (
+                  <NotTeamOwnerAlert />
+                )}
               </div>
             </div>
           </div>
@@ -115,6 +108,28 @@ export default function Settings() {
   );
 }
 
+const LastOwnerAlert = () => (
+  <NewAlert csVariant="info">
+    You cannot currently leave this team as you are its last owner.
+    <br />
+    To leave the team, you need to assign another owner to it. Alternatively,
+    you can disband the whole team.
+  </NewAlert>
+);
+
+const TeamHasPackagesAlert = () => (
+  <NewAlert csVariant="info">
+    You cannot currently disband this team as it has packages.
+    <br />
+    If you need to archive this team, contact #support in the{" "}
+    <a href="https://discord.thunderstore.io/">Thunderstore Discord</a>.
+  </NewAlert>
+);
+
+const NotTeamOwnerAlert = () => (
+  <NewAlert csVariant="info">Only team owners can disband teams.</NewAlert>
+);
+
 function LeaveTeamForm(props: {
   userName: string;
   teamName: string;
@@ -147,7 +162,7 @@ function LeaveTeamForm(props: {
     <Modal
       open={open}
       onOpenChange={setOpen}
-      titleContent="Leave team"
+      titleContent="Leave team?"
       csSize="small"
       trigger={
         <NewButton
@@ -170,7 +185,7 @@ function LeaveTeamForm(props: {
             team={teamName}
             csVariant="cyber"
           >
-            {teamName}
+            {teamName}.
           </NewLink>
         </span>
       </Modal.Body>
@@ -269,7 +284,7 @@ function DisbandTeamForm(props: {
     <Modal
       open={open}
       onOpenChange={setOpen}
-      titleContent="Disband team"
+      titleContent="Disband team?"
       csSize="small"
       trigger={
         <NewButton
@@ -292,7 +307,7 @@ function DisbandTeamForm(props: {
             team={teamName}
             csVariant="cyber"
           >
-            {teamName}
+            {teamName}.
           </NewLink>
         </div>
         <div>

apps/cyberstorm-remix/cyberstorm/utils/__tests__/permissions.test.ts

@@ -0,0 +1,46 @@
+import { assert, describe, it } from "vitest";
+
+import type { CurrentUser } from "@thunderstore/dapper/types";
+
+import { isTeamOwner } from "../permissions";
+
+describe("utils.permissions.isTeamOwner", () => {
+  it("returns false if user is unauthenticated", () => {
+    const actual = isTeamOwner("test-team", undefined);
+
+    assert.isFalse(actual);
+  });
+
+  it("returns false if user does not belong to team", () => {
+    const user = {
+      teams_full: [{ name: "other-team", role: "owner", member_count: 1 }],
+    };
+
+    const actual = isTeamOwner("test-team", user as CurrentUser);
+
+    assert.isFalse(actual);
+  });
+
+  it("returns false if user is non-owner member", () => {
+    const user = {
+      teams_full: [{ name: "test-team", role: "member", member_count: 2 }],
+    };
+
+    const actual = isTeamOwner("test-team", user as CurrentUser);
+
+    assert.isFalse(actual);
+  });
+
+  it("returns true if user is owner of team", () => {
+    const user = {
+      teams_full: [
+        { name: "other-team", role: "member", member_count: 1 },
+        { name: "test-team", role: "owner", member_count: 3 },
+      ],
+    };
+
+    const actual = isTeamOwner("test-team", user as CurrentUser);
+
+    assert.isTrue(actual);
+  });
+});

apps/cyberstorm-remix/cyberstorm/utils/permissions.ts

@@ -0,0 +1,7 @@
+import type { CurrentUser } from "@thunderstore/dapper/types";
+
+export const isTeamOwner = (
+  teamName: string,
+  currentUser: CurrentUser | undefined
+) =>
+  currentUser?.teams_full?.find((t) => t.name === teamName)?.role === "owner";

packages/dapper-fake/src/fakers/user.ts

@@ -42,3 +42,12 @@ const getFakeOAuthConnection = (provider: string) => ({
   username: faker.internet.userName(),
   avatar: faker.helpers.maybe(getFakeImg) ?? null,
 });
+
+export const getFakeCurrentUserTeamPermissions = async (teamName: string) => {
+  setSeed(teamName);
+
+  return {
+    can_disband_team: faker.datatype.boolean(),
+    can_leave_team: faker.datatype.boolean(),
+  };
+};

packages/dapper-fake/src/index.ts

@@ -21,7 +21,10 @@ import {
   getFakeTeamMembers,
   postFakeTeamCreate,
 } from "./fakers/team";
-import { getFakeCurrentUser } from "./fakers/user";
+import {
+  getFakeCurrentUser,
+  getFakeCurrentUserTeamPermissions,
+} from "./fakers/user";
 import { postFakePackageSubmissionMetadata } from "./fakers/submission";
 import { getFakePackageSubmissionStatus } from "./fakers/submission";
 
@@ -30,6 +33,7 @@ export class DapperFake implements DapperInterface {
   public getCommunity = getFakeCommunity;
   public getCommunityFilters = getFakeCommunityFilters;
   public getCurrentUser = getFakeCurrentUser;
+  public getCurrentUserTeamPermissions = getFakeCurrentUserTeamPermissions;
   public getPackageChangelog = getFakeChangelog;
   public getPackagePermissions = getFakePackagePermissions;
   public getPackageListingDetails = getFakePackageListingDetails;

packages/dapper-ts/src/index.ts

@@ -5,7 +5,10 @@ import { getDynamicHTML } from "./methods/dynamicHTML";
 import { getCommunities, getCommunity } from "./methods/communities";
 import { getCommunityFilters } from "./methods/communityFilters";
 import { getRatedPackages } from "./methods/ratedPackages";
-import { getCurrentUser } from "./methods/currentUser";
+import {
+  getCurrentUser,
+  getCurrentUserTeamPermissions,
+} from "./methods/currentUser";
 import {
   getPackageChangelog,
   getPackageReadme,
@@ -48,6 +51,8 @@ export class DapperTs implements DapperTsInterface {
     this.getCommunityFilters = this.getCommunityFilters.bind(this);
     this.getRatedPackages = this.getRatedPackages.bind(this);
     this.getCurrentUser = this.getCurrentUser.bind(this);
+    this.getCurrentUserTeamPermissions =
+      this.getCurrentUserTeamPermissions.bind(this);
     this.getPackageChangelog = this.getPackageChangelog.bind(this);
     this.getPackageListings = this.getPackageListings.bind(this);
     this.getPackageListingDetails = this.getPackageListingDetails.bind(this);
@@ -76,6 +81,7 @@ export class DapperTs implements DapperTsInterface {
   public getCommunityFilters = getCommunityFilters;
   public getRatedPackages = getRatedPackages;
   public getCurrentUser = getCurrentUser;
+  public getCurrentUserTeamPermissions = getCurrentUserTeamPermissions;
   public getPackageChangelog = getPackageChangelog;
   public getPackageListings = getPackageListings;
   public getPackageListingDetails = getPackageListingDetails;

packages/dapper-ts/src/methods/currentUser.ts

@@ -1,4 +1,8 @@
-import { ApiError, fetchCurrentUser } from "@thunderstore/thunderstore-api";
+import {
+  ApiError,
+  fetchCurrentUser,
+  fetchCurrentUserTeamPermissions,
+} from "@thunderstore/thunderstore-api";
 
 import { DapperTsInterface } from "../index";
 
@@ -22,3 +26,15 @@ export async function getCurrentUser(this: DapperTsInterface) {
     }
   }
 }
+
+export async function getCurrentUserTeamPermissions(
+  this: DapperTsInterface,
+  teamName: string
+) {
+  return await fetchCurrentUserTeamPermissions({
+    config: this.config,
+    params: { team_name: teamName },
+    data: {},
+    queryParams: {},
+  });
+}

packages/dapper/src/dapper.ts

@@ -5,6 +5,7 @@ export interface DapperInterface {
   getCommunity: methods.GetCommunity;
   getCommunityFilters: methods.GetCommunityFilters;
   getCurrentUser: methods.GetCurrentUser;
+  getCurrentUserTeamPermissions: methods.GetCurrentUserTeamPermissions;
   getPackageChangelog: methods.GetPackageChangelog;
   getPackageListingDetails: methods.GetPackageListingDetails;
   getPackageListings: methods.GetPackageListings;

packages/dapper/src/types/methods.ts

@@ -15,7 +15,7 @@ import {
 import { type PackageListingType } from "./props";
 import { type HTMLContentResponse, type MarkdownResponse } from "./shared";
 import { type TeamDetails, type ServiceAccount, type TeamMember } from "./team";
-import { type CurrentUser } from "./user";
+import { type CurrentUser, type CurrentUserTeamPermissions } from "./user";
 
 export type GetCommunities = (
   page?: number,
@@ -31,6 +31,10 @@ export type GetCommunityFilters = (
 
 export type GetCurrentUser = () => Promise<null | CurrentUser>;
 
+export type GetCurrentUserTeamPermissions = (
+  teamName: string
+) => Promise<CurrentUserTeamPermissions>;
+
 export type GetPackageChangelog = (
   namespace: string,
   name: string,

packages/dapper/src/types/user.ts

@@ -46,3 +46,8 @@ interface Badge {
   description: string;
   imageSource: string;
 }
+
+export interface CurrentUserTeamPermissions {
+  can_disband_team: boolean;
+  can_leave_team: boolean;
+}