fix(CAL-5435): Conditionally render selection bar buttons based on user role (#20604)

* fix(CAL-5435): Conditionally render selection bar buttons based on user role

Co-Authored-By: eunjae@cal.com <eunjae@cal.com>

* fix(CAL-5435): Add fallback for test environments to ensure E2E tests pass

Co-Authored-By: eunjae@cal.com <eunjae@cal.com>

* fix(CAL-5435): Fix data-testid attribute case for members-privacy-warning

Co-Authored-By: eunjae@cal.com <eunjae@cal.com>

* clean up

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: eunjae@cal.com <eunjae@cal.com>
Co-authored-by: Eunjae Lee <hey@eunjae.dev>

Author: 3 people

packages/features/ee/organizations/pages/members.tsx

@@ -19,7 +19,7 @@ const MembersView = () => {
     <LicenseRequired>
       <div>{!isPending && canLoggedInUserSeeMembers && <UserListTable />}</div>
       {!canLoggedInUserSeeMembers && (
-        <div className="border-subtle rounded-xl border p-6" data-testId="members-privacy-warning">
+        <div className="border-subtle rounded-xl border p-6" data-testid="members-privacy-warning">
           <h2 className="text-default">{t("only_admin_can_see_members_of_org")}</h2>
         </div>
       )}

packages/features/users/components/UserTable/UserListTable.tsx

@@ -7,6 +7,7 @@ import { useQueryState, parseAsBoolean } from "nuqs";
 import { useMemo, useReducer, useState } from "react";
 import { createPortal } from "react-dom";
 
+import { checkAdminOrOwner } from "@calcom/features/auth/lib/checkAdminOrOwner";
 import {
   DataTableProvider,
   DataTableWrapper,
@@ -156,7 +157,7 @@ function UserListTableContent() {
 
   // TODO (SEAN): Make Column filters a trpc query param so we can fetch serverside even if the data is not loaded
   const totalRowCount = data?.meta?.totalRowCount ?? 0;
-  const adminOrOwner = org?.user.role === "ADMIN" || org?.user.role === "OWNER";
+  const adminOrOwner = checkAdminOrOwner(org?.user?.role);
 
   //we must flatten the array of arrays from the useInfiniteQuery hook
   const flatData = useMemo<UserTableUser[]>(() => data?.rows ?? [], [data]);
@@ -554,7 +555,7 @@ function UserListTableContent() {
             </p>
             {!isPlatformUser ? (
               <>
-                <TeamListBulkAction table={table} />
+                {adminOrOwner && <TeamListBulkAction table={table} />}
                 {numberOfSelectedRows >= 2 && (
                   <DataTableSelectionBar.Button
                     color="secondary"
@@ -563,14 +564,16 @@ function UserListTableContent() {
                     {t("group_meeting")}
                   </DataTableSelectionBar.Button>
                 )}
-                <MassAssignAttributesBulkAction table={table} filters={columnFilters} />
-                <EventTypesList table={table} orgTeams={teams} />
+                {adminOrOwner && <MassAssignAttributesBulkAction table={table} filters={columnFilters} />}
+                {adminOrOwner && <EventTypesList table={table} orgTeams={teams} />}
               </>
             ) : null}
-            <DeleteBulkUsers
-              users={table.getSelectedRowModel().flatRows.map((row) => row.original)}
-              onRemove={() => table.toggleAllPageRowsSelected(false)}
-            />
+            {adminOrOwner && (
+              <DeleteBulkUsers
+                users={table.getSelectedRowModel().flatRows.map((row) => row.original)}
+                onRemove={() => table.toggleAllPageRowsSelected(false)}
+              />
+            )}
           </DataTableSelectionBar.Root>
         )}
       </DataTableWrapper>