feat: promote to moderator instead of transferring moderator role

e2e/pageobjects/Header.ts

@@ -41,17 +41,17 @@ export class HeaderPageObject extends PageObject {
     await this.page.getByRole("listitem").filter({ hasText: username }).isHidden();
   }
 
-  async transferModeratorRole(username: string) {
+  async promoteToModerator(username: string) {
     await this.page
       .getByRole("listitem")
       .filter({ hasText: username })
-      .getByRole("button", { name: "Transfer Moderator Role" })
+      .getByRole("button", { name: "Promote to Moderator" })
       .click();
-    await this.page.getByRole("button", { name: "Yes, transfer" }).click();
+    await this.page.getByRole("button", { name: "Yes, promote" }).click();
     await this.page
       .getByRole("listitem")
       .filter({ hasText: username })
-      .getByRole("button", { name: "Transfer Moderator Role", disabled: true })
+      .getByRole("button", { name: "Promote to Moderator", disabled: true })
       .isVisible();
   }
 

e2e/tests/pokerPage.spec.ts

@@ -99,7 +99,7 @@ test("should kick user and show error page", async ({ page, context }) => {
   expect(newPage.url()).toContain("error");
 });
 
-test("should accept user and transfer moderator role", async ({ page, context }) => {
+test("should accept user and promote to moderator", async ({ page, context }) => {
   const pokerPage = new PokerPagePageObject(page, context);
   const header = new HeaderPageObject(page, context);
   const joinSessionDialog = new JoinSessionDialogPageObject(page, context);
@@ -110,7 +110,7 @@ test("should accept user and transfer moderator role", async ({ page, context })
 
   await header.openParticipants();
   await header.acceptParticipant(newUser);
-  await header.transferModeratorRole(newUser);
+  await header.promoteToModerator(newUser);
   await header.closeParticipants();
 
   await expect(newPage.getByRole("button", { name: "Set User Story" })).toBeVisible();

e2e/tests/retroPage.spec.ts

@@ -80,7 +80,7 @@ test("should kick user and show error page", async ({ context, page }) => {
   expect(newPage.url()).toContain("error");
 });
 
-test("should accept user and transfer moderator role", async ({ context, page }) => {
+test("should accept user and promote to moderator", async ({ context, page }) => {
   const retroPage = new RetroPagePageObject(page, context);
   const header = new HeaderPageObject(page, context);
   const joinSessionDialog = new JoinSessionDialogPageObject(page, context);
@@ -92,7 +92,7 @@ test("should accept user and transfer moderator role", async ({ context, page })
 
   await header.openParticipants();
   await header.acceptParticipant(newUser);
-  await header.transferModeratorRole(newUser);
+  await header.promoteToModerator(newUser);
   await header.closeParticipants();
 
   await expect(newPage.getByRole("heading", { name: "Test Session" })).toBeVisible();

packages/frontend/src/common/components/AppHeader.tsx

@@ -16,7 +16,7 @@ interface AppHeaderProps {
   onKickUser: (userId: string) => void;
   onRejectJoinUser: (userId: string) => void;
   onAcceptJoinUser: (userId: string) => void;
-  onTransferModeratorRole: (userId: string) => void;
+  onPromoteToModerator: (userId: string) => void;
   children?: ReactNode;
 }
 
@@ -26,7 +26,7 @@ export function AppHeader({
   onKickUser,
   onRejectJoinUser,
   onAcceptJoinUser,
-  onTransferModeratorRole,
+  onPromoteToModerator,
   children,
 }: AppHeaderProps) {
   const { user } = useUserContext();
@@ -58,7 +58,7 @@ export function AppHeader({
           handleKickUser={onKickUser}
           onRejectJoinUser={onRejectJoinUser}
           onAcceptJoinUser={onAcceptJoinUser}
-          onTransferModeratorRole={onTransferModeratorRole}
+          onPromoteToModerator={onPromoteToModerator}
         />
         <SettingsButton>{children}</SettingsButton>
       </Toolbar>

packages/frontend/src/common/components/buttons/ParticipantsButton.tsx

@@ -11,7 +11,7 @@ interface ParticipantButtonProps {
   handleKickUser: (userId: string) => void;
   onRejectJoinUser: (userId: string) => void;
   onAcceptJoinUser: (userId: string) => void;
-  onTransferModeratorRole: (userId: string) => void;
+  onPromoteToModerator: (userId: string) => void;
 }
 
 export function ParticipantsButton({
@@ -20,7 +20,7 @@ export function ParticipantsButton({
   handleKickUser,
   onRejectJoinUser,
   onAcceptJoinUser,
-  onTransferModeratorRole,
+  onPromoteToModerator,
 }: ParticipantButtonProps) {
   const { isOpen, openDialog, closeDialog } = useDialog();
   const waitingUsersCount = Object.values(waitingList).length;
@@ -50,7 +50,7 @@ export function ParticipantsButton({
         onKickUser={handleKickUser}
         onAcceptJoinUser={onAcceptJoinUser}
         onRejectJoinUser={onRejectJoinUser}
-        onTransferModeratorRole={onTransferModeratorRole}
+        onPromoteToModerator={onPromoteToModerator}
       />
     </>
   );

packages/frontend/src/common/dialogs/Participant.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Box, Typography } from "@mui/material";
 import { AddModerator, LocalPolice, Person, RemoveCircle } from "@mui/icons-material";
-import { TransferModeratorRoleDialog } from "../../retro/components/dialogs/TransferModeratorRoleDialog";
+import { PromoteToModeratorDialog } from "../../retro/components/dialogs/PromoteToModeratorDialog";
 import { isModerator } from "../utils/participantsUtils";
 import { useUserContext } from "../context/UserContext";
 import { User } from "../types/commonTypes";
@@ -12,12 +12,12 @@ import { TooltipIconButton } from "../components/buttons/TooltipIconButton";
 interface ParticipantProps {
   participant: User;
   handleKickUser: (userId: string) => void;
-  handleTransferModeratorRole: (userId: string) => void;
+  handlePromoteToModerator: (userId: string) => void;
 }
 export function Participant({
   participant,
   handleKickUser,
-  handleTransferModeratorRole,
+  handlePromoteToModerator,
 }: ParticipantProps) {
   const { isOpen, openDialog, closeDialog } = useDialog();
 
@@ -39,10 +39,10 @@ export function Participant({
           {isModerator(user) && (
             <>
               <TooltipIconButton
-                aria-label="Transfer Moderator Role"
+                aria-label="Promote to Moderator"
                 onClick={openDialog}
                 disabled={isModerator(participant)}
-                tooltipText="Transfer Moderator Role"
+                tooltipText="Promote to Moderator"
               >
                 <AddModerator />
               </TooltipIconButton>
@@ -59,11 +59,11 @@ export function Participant({
           )}
         </Box>
       </FlexBox>
-      <TransferModeratorRoleDialog
+      <PromoteToModeratorDialog
         participant={participant}
         isOpen={isOpen}
         close={closeDialog}
-        handleTransferModeratorRole={handleTransferModeratorRole}
+        handlePromoteToModerator={handlePromoteToModerator}
       />
     </>
   );

packages/frontend/src/common/dialogs/Participants.tsx

@@ -5,13 +5,13 @@ import { UserByUserId } from "../../retro/types/retroTypes";
 interface ParticipantsProps {
   participants: UserByUserId;
   handleKickUser: (userId: string) => void;
-  handleTransferModeratorRole: (userId: string) => void;
+  handlePromoteToModerator: (userId: string) => void;
 }
 
 export function Participants({
   participants,
   handleKickUser,
-  handleTransferModeratorRole,
+  handlePromoteToModerator,
 }: ParticipantsProps) {
   return (
     <ul style={{ margin: 0, padding: 0 }}>
@@ -20,7 +20,7 @@ export function Participants({
           <Participant
             participant={participant}
             handleKickUser={handleKickUser}
-            handleTransferModeratorRole={handleTransferModeratorRole}
+            handlePromoteToModerator={handlePromoteToModerator}
           />
         </li>
       ))}

packages/frontend/src/common/dialogs/ParticipantsDialog.tsx

@@ -22,7 +22,7 @@ interface ParticipantDialogProps extends DialogProps {
   onKickUser: (userId: string) => void;
   onRejectJoinUser: (userId: string) => void;
   onAcceptJoinUser: (userId: string) => void;
-  onTransferModeratorRole: (userId: string) => void;
+  onPromoteToModerator: (userId: string) => void;
 }
 
 export function ParticipantsDialog({
@@ -31,7 +31,7 @@ export function ParticipantsDialog({
   onKickUser,
   onRejectJoinUser,
   onAcceptJoinUser,
-  onTransferModeratorRole,
+  onPromoteToModerator,
   participants,
   waitingList,
 }: ParticipantDialogProps) {
@@ -76,7 +76,7 @@ export function ParticipantsDialog({
             <Participants
               participants={participants}
               handleKickUser={onKickUser}
-              handleTransferModeratorRole={onTransferModeratorRole}
+              handlePromoteToModerator={onPromoteToModerator}
             />
           </>
         )}

packages/frontend/src/common/types/peerToPeerTypes.ts

@@ -19,8 +19,8 @@ export interface KickAction extends BaseAction {
   type: "KICK";
 }
 
-export interface TransferModeratorRoleAction extends BaseAction {
-  type: "TRANSFER_MODERATOR_ROLE";
+export interface PromoteToModeratorAction extends BaseAction {
+  type: "PROMOTE_TO_MODERATOR";
   payload: string;
 }
 
@@ -39,6 +39,6 @@ export type PeerToPeerAction<T> =
   | JoinSessionAction
   | DisconnectAction
   | KickAction
-  | TransferModeratorRoleAction
+  | PromoteToModeratorAction
   | RemoveFromWaitingListAction
   | AddToWaitingListAction;

packages/frontend/src/common/utils/participantsUtils.ts

@@ -24,8 +24,8 @@ export function getRemainingParticipantsWithNewModerator<T extends User>(
   };
 }
 
-export function findModerator<T extends User>(participants: Record<string, T>) {
-  return Object.values(participants).find((participant) => isModerator(participant));
+export function findModerators<T extends User>(participants: Record<string, T>) {
+  return Object.values(participants).filter((participant) => isModerator(participant));
 }
 
 export function isModerator(user: User) {

packages/frontend/src/poker/components/PokerPageContent.tsx

@@ -26,7 +26,7 @@ export function PokerPageContent() {
     handleKickUser,
     handleAcceptJoinUser,
     handleRejectJoinUser,
-    handleTransferModeratorRole,
+    handlePromoteToModerator,
     handleAddToWaitingList,
   } = usePokerContext();
   const { user, resetUser } = useUserContext();
@@ -74,7 +74,7 @@ export function PokerPageContent() {
           onKickUser={handleKickUser}
           onAcceptJoinUser={handleAcceptJoinUser}
           onRejectJoinUser={handleRejectJoinUser}
-          onTransferModeratorRole={handleTransferModeratorRole}
+          onPromoteToModerator={handlePromoteToModerator}
         />
         <WaitingForApproval />
       </>
@@ -88,7 +88,7 @@ export function PokerPageContent() {
         onKickUser={handleKickUser}
         onAcceptJoinUser={handleAcceptJoinUser}
         onRejectJoinUser={handleRejectJoinUser}
-        onTransferModeratorRole={handleTransferModeratorRole}
+        onPromoteToModerator={handlePromoteToModerator}
       >
         <EstimationUnitSetupMenuItem />
       </AppHeader>

packages/frontend/src/poker/context/PokerContext.tsx

@@ -12,8 +12,8 @@ import { useErrorContext } from "../../common/context/ErrorContext";
 import {
   AddToWaitingListAction,
   JoinSessionAction,
+  PromoteToModeratorAction,
   RemoveFromWaitingListAction,
-  TransferModeratorRoleAction,
 } from "../../common/types/peerToPeerTypes";
 import { useSyncUser } from "../../common/hooks/useSyncUser";
 import { useUserContext } from "../../common/context/UserContext";
@@ -33,7 +33,7 @@ export interface PokerContextValues {
   handleResetUserStory: () => void;
   handleSetPokerUnit: (payload: SetPokerUnitAction["payload"]) => void;
   handleSendVote: (payload: SendVoteAction["payload"]) => void;
-  handleTransferModeratorRole: (payload: TransferModeratorRoleAction["payload"]) => void;
+  handlePromoteToModerator: (payload: PromoteToModeratorAction["payload"]) => void;
   handleKickUser: (userId: string) => void;
   handleJoinSession: (payload: JoinSessionAction["payload"]) => void;
   handleRejectJoinUser: (userId: string) => void;
@@ -126,8 +126,8 @@ export function PokerContextProvider(props: PokerContextProviderProps) {
     dispatchAndBroadcast({ type: "SEND_VOTE", payload });
   }
 
-  function handleTransferModeratorRole(payload: TransferModeratorRoleAction["payload"]) {
-    dispatchAndBroadcast({ type: "TRANSFER_MODERATOR_ROLE", payload });
+  function handlePromoteToModerator(payload: PromoteToModeratorAction["payload"]) {
+    dispatchAndBroadcast({ type: "PROMOTE_TO_MODERATOR", payload });
   }
 
   function handleKickUser(userId: string) {
@@ -152,7 +152,7 @@ export function PokerContextProvider(props: PokerContextProviderProps) {
     handleResetUserStory,
     handleSetPokerUnit,
     handleSendVote,
-    handleTransferModeratorRole,
+    handlePromoteToModerator,
     handleKickUser,
     handleJoinSession,
     handleAddToWaitingList,

packages/frontend/src/poker/reducers/pokerReducer.ts

@@ -1,7 +1,7 @@
 import { PokerState } from "../types/pokerTypes";
 import { PokerAction } from "../types/pokerActions";
 import {
-  findModerator,
+  findModerators,
   getRemainingParticipants,
   getRemainingParticipantsWithNewModerator,
   hasRemainingModerator,
@@ -63,14 +63,13 @@ export const pokerReducer = (state: PokerState, action: PokerAction): PokerState
         },
       };
     }
-    case "TRANSFER_MODERATOR_ROLE": {
+    case "PROMOTE_TO_MODERATOR": {
       const user = state.participants[action.payload];
-      const currentModerator = findModerator(state.participants);
-      if (!user || !currentModerator) return state;
+      const currentModerators = findModerators(state.participants);
+      if (!user || !currentModerators.length) return state;
       const participants: UserByUserId = {
         ...state.participants,
         [action.payload]: { ...user, role: "moderator" },
-        [currentModerator.id]: { ...currentModerator, role: "participant" },
       };
       return { ...state, participants };
     }

packages/frontend/src/retro/components/RetroPageContent.tsx

@@ -34,7 +34,7 @@ export function RetroPageContent() {
     handleKickUser,
     handleAcceptJoinUser,
     handleRejectJoinUser,
-    handleTransferModeratorRole,
+    handlePromoteToModerator,
     handleAddToWaitingList,
   } = useRetroContext();
   const { user, resetUser } = useUserContext();
@@ -88,7 +88,7 @@ export function RetroPageContent() {
           onKickUser={handleKickUser}
           onAcceptJoinUser={handleAcceptJoinUser}
           onRejectJoinUser={handleRejectJoinUser}
-          onTransferModeratorRole={handleTransferModeratorRole}
+          onPromoteToModerator={handlePromoteToModerator}
         />
         <WaitingForApproval />
       </>
@@ -102,7 +102,7 @@ export function RetroPageContent() {
         onKickUser={handleKickUser}
         onAcceptJoinUser={handleAcceptJoinUser}
         onRejectJoinUser={handleRejectJoinUser}
-        onTransferModeratorRole={handleTransferModeratorRole}
+        onPromoteToModerator={handlePromoteToModerator}
       >
         <ExportRetroImageMenuItem />
         <ExportRetroMenuItem />

packages/frontend/src/retro/components/cards/RetroCardActions.tsx

@@ -19,7 +19,6 @@ export function RetroCardActions({ card, columnIndex, isBlurred }: RetroCardActi
   const { user } = useUserContext();
   const { retroState } = useRetroContext();
   const { isVotingEnabled } = retroState;
-
   const isButtonDisabled = isBlurred && user.role === "participant";
 
   return (