Merge pull request #1643 from thunderstore-io/team-settings-cleanup

Team settings cleanup

Author: anttimaki

apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.tsx

@@ -74,31 +74,6 @@ function PackageTeamListItem(props: PackageTeamListItemProps) {
       </div>
     </div>
   );
-
-  // TODO: Enable when user page is available
-  // return (
-  //   <NewLink
-  //     primitiveType="cyberstormLink"
-  //     linkId="User"
-  //     user={teamMember.username}
-  //     rootClasses={styles.item}
-  //   >
-  //     <Avatar username={teamMember.username} src={teamMember.avatar} />
-  //     <div className={styles.itemTitleWrapper}>
-  //       <div className={styles.itemTitle}>
-  //         <span className={styles.itemTitleUsername}>
-  //           {teamMember.username}
-  //         </span>
-  //         {teamMember.role === "owner" ? (
-  //           <NewIcon csMode="inline" noWrapper rootClasses={styles.crown}>
-  //             <FontAwesomeIcon icon={faCrown} />
-  //           </NewIcon>
-  //         ) : null}
-  //       </div>
-  //       <div className={styles.itemDescription}>{teamMember.role}</div>
-  //     </div>
-  //   </NewLink>
-  // );
 }
 
 function compare(a: TeamMember, b: TeamMember) {

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

@@ -24,6 +24,7 @@ import {
 import { ApiAction } from "@thunderstore/ts-api-react-actions";
 
 import { type OutletContextShape } from "app/root";
+import { isTeamOwner } from "cyberstorm/utils/permissions";
 
 const teamMemberColumns = [
   { value: "User", disableSort: false },
@@ -47,8 +48,7 @@ export function MembersTable(props: {
   const toast = useToast();
 
   const currentUser = outletContext.currentUser;
-  const membership = currentUser?.teams_full.find((t) => t.name === teamName);
-  const isOwner = membership?.role === "owner";
+  const isOwner = isTeamOwner(teamName, currentUser);
 
   const canManageMember = (username: string) =>
     isOwner && currentUser?.username !== username;
@@ -85,20 +85,17 @@ export function MembersTable(props: {
     return [
       {
         value: (
-          <NewLink
-            primitiveType="cyberstormLink"
-            linkId="User"
+          <div
             key={`user_${member.username}_${index}`}
-            user={member.username}
-            rootClasses="members__user"
+            className="members__user"
           >
             <NewAvatar
               src={member.avatar}
               username={member.username}
               csSize="small"
             />
             <span>{member.username}</span>
-          </NewLink>
+          </div>
         ),
         sortValue: member.username,
       },

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

@@ -1,12 +1,22 @@
-import "./ServiceAccounts.css";
-import { NewAlert, NewButton, Modal, NewIcon } from "@thunderstore/cyberstorm";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTrash } from "@fortawesome/free-solid-svg-icons";
-import { useToast } from "@thunderstore/cyberstorm";
-import { teamServiceAccountRemove } from "@thunderstore/thunderstore-api";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+  NewAlert,
+  NewButton,
+  Modal,
+  NewIcon,
+  useToast,
+} from "@thunderstore/cyberstorm";
+import {
+  type TeamServiceAccount,
+  teamServiceAccountRemove,
+} from "@thunderstore/thunderstore-api";
 import { ApiAction } from "@thunderstore/ts-api-react-actions";
-import { type OutletContextShape } from "~/root";
-import { type TeamServiceAccount } from "@thunderstore/thunderstore-api";
+
+import { type OutletContextShape } from "app/root";
+import { isTeamOwner } from "cyberstorm/utils/permissions";
+import "./ServiceAccounts.css";
 
 interface ServiceAccountRemoveModalProps {
   serviceAccount: TeamServiceAccount;
@@ -23,15 +33,6 @@ export function ServiceAccountRemoveModal({
 }: ServiceAccountRemoveModalProps) {
   const toast = useToast();
 
-  const canDelete = () => {
-    const teams = outletContext.currentUser?.teams_full || [];
-    const belongingTeam = teams.find((team) => team.name === teamName);
-    if (!belongingTeam) {
-      return false;
-    }
-    return belongingTeam.role === "owner";
-  };
-
   const removeServiceAccountAction = ApiAction({
     endpoint: teamServiceAccountRemove,
     onSubmitSuccess: () => {
@@ -55,7 +56,7 @@ export function ServiceAccountRemoveModal({
     <Modal
       titleContent="Confirm service account removal"
       trigger={
-        canDelete() && ( // Only show trigger if user can delete
+        isTeamOwner(teamName, outletContext.currentUser) && ( // Only show trigger if user can delete
           <NewButton csVariant="danger" csSize="xsmall">
             <NewIcon csMode="inline" noWrapper>
               <FontAwesomeIcon icon={faTrash} />

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

@@ -23,6 +23,7 @@ import {
 
 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";
 import { ServiceAccountsTable } from "./ServiceAccountsTable";
 import "./ServiceAccounts.css";
@@ -84,11 +85,7 @@ function AddServiceAccountForm(props: {
     useState("");
   const [error, setError] = useState<string | null>(null);
 
-  const currentUserTeam = outletContext.currentUser?.teams_full?.find(
-    (team) => team.name === props.teamName
-  );
-
-  if (currentUserTeam?.role !== "owner") {
+  if (!isTeamOwner(props.teamName, outletContext.currentUser)) {
     return null;
   }
 
@@ -182,7 +179,9 @@ function AddServiceAccountForm(props: {
         </NewButton>
       }
       csSize="small"
-      titleContent="Add service account"
+      titleContent={
+        serviceAccountAdded ? "Service Account Added" : "Add Service Account"
+      }
     >
       {serviceAccountAdded ? (
         <Modal.Body>