Merge pull request #127 from TNG/bugfix/kick-typo

Change wording: Remove instead of kick

backend/sendmessage/src/remove-user.ts

@@ -27,7 +27,7 @@ export const removeUser = async (user: string, config: ConfigWithHandler): Promi
       broadcastState(updatedGroupItem, config),
       userConnectionId &&
         sendMessageToConnection(
-          { type: 'not-logged-in', payload: { reason: `You have been kicked by ${userId}.` } },
+          { type: 'not-logged-in', payload: { reason: `You have been removed by ${userId}.` } },
           { ...config, connectionId: userConnectionId },
         ),
     ]);

e2e/pages/card-page.ts

@@ -63,8 +63,8 @@ export class CardPage {
     await expect(this.votes).toHaveCount(states.length);
   }
 
-  async kickUser(name: string) {
-    await this.votes.getByTitle(`Kick ${name}`).click();
+  async removeUser(name: string) {
+    await this.votes.getByTitle(`Remove ${name}`).click();
   }
 
   async selectCard(value: CardValue) {

e2e/pages/login-page.ts

@@ -25,8 +25,8 @@ export class LoginPage {
     await this.loginButton.click();
   }
 
-  async assertKickedBy(name: string) {
-    await expect(this.alertText).toHaveText(`You have been kicked by ${name}.`);
+  async assertRemovedBy(name: string) {
+    await expect(this.alertText).toHaveText(`You have been removed by ${name}.`);
   }
 
   async assertSessionTakeover() {

e2e/kicking.spec.ts → e2e/remove-users.spec.ts

@@ -2,15 +2,15 @@ import { test } from '@playwright/test';
 import { assertOnCardPage } from './pages/card-page';
 import { assertOnLoginPage, login, loginWithSameSession } from './pages/login-page';
 
-test('allows to kick users', async ({ page, context }) => {
+test('allows to remove users', async ({ page, context }) => {
   await login(page, 'User 1');
   const secondPage = await context.newPage();
   await loginWithSameSession(secondPage, 'User 2', page);
 
   const cardPage = await assertOnCardPage(page);
-  await cardPage.kickUser('User 2');
+  await cardPage.removeUser('User 2');
   await cardPage.assertVotingStateIs([{ name: 'User 1', state: 'Not voted', pending: false }]);
 
   const secondLoginPage = await assertOnLoginPage(secondPage);
-  await secondLoginPage.assertKickedBy('User 1');
+  await secondLoginPage.assertRemovedBy('User 1');
 });

frontend/src/Components/App/App.test.tsx

@@ -107,7 +107,7 @@ describe('The App component', () => {
     expect(container.querySelector('input[type=submit]')).not.toBeDisabled();
   });
 
-  it('logs the user in and displays the voting page, then displays the login page if the user is kicked out', async () => {
+  it('logs the user in and displays the voting page, then displays the login page if the user is removed', async () => {
     // given
     const logoutReason = 'You were removed!';
     const { socket, container, getByText } = await loginUser();
@@ -132,15 +132,15 @@ describe('The App component', () => {
     expect(container.querySelector('input[type=submit]')).toBeVisible();
   });
 
-  it('updates, reveals and resets votes and kicks optimistically once the first state message arrived', async () => {
+  it('updates, reveals and resets votes and removes users optimistically once the first state message arrived', async () => {
     // given
     const { socket, container, getByRole, getAllByTitle } = await loginUser();
 
     // then
     const revealButton = getByRole('button', { name: 'reveal votes' });
     expect(revealButton).toBeDisabled();
     container.querySelectorAll('button.largeCard').forEach((card) => expect(card).toBeDisabled());
-    getAllByTitle(/^Kick/).forEach((button) => expect(button).toBeDisabled());
+    getAllByTitle(/^Remove/).forEach((button) => expect(button).toBeDisabled());
     const changeScaleButton = getByRole('button', { name: 'Change Scale' });
     expect(changeScaleButton).toBeDisabled();
 
@@ -166,7 +166,7 @@ describe('The App component', () => {
     // then
     expect(revealButton).toBeEnabled();
     container.querySelectorAll('button.largeCard').forEach((card) => expect(card).toBeEnabled());
-    getAllByTitle(/^Kick/).forEach((button) => expect(button).toBeEnabled());
+    getAllByTitle(/^Remove/).forEach((button) => expect(button).toBeEnabled());
     expect(changeScaleButton).toBeEnabled();
 
     // when
@@ -193,7 +193,7 @@ describe('The App component', () => {
     socket.test_messages = [];
 
     // when
-    fireEvent.click(getByRole('button', { name: 'Kick Non-voting User' }));
+    fireEvent.click(getByRole('button', { name: 'Remove Non-voting User' }));
 
     // then
     expect(container.querySelector('tbody')).toHaveTextContent('Happy UserVoting User');

frontend/src/Components/KickButton/KickButton.tsx → frontend/src/Components/RemoveUserButton/RemoveUserButton.tsx

@@ -1,16 +1,16 @@
-import { BUTTON_KICK } from '../../constants';
+import { BUTTON_REMOVE_USER } from '../../constants';
 import { connectToWebSocket } from '../WebSocket/WebSocket';
-import classes from './KickButton.module.css';
+import classes from './RemoveUserButton.module.css';
 
 interface Props {
   user: string;
 }
 
-export const KickButton = connectToWebSocket<Props>(
+export const RemoveUserButton = connectToWebSocket<Props>(
   ({ socket: { connected, removeUser }, user }) => (
     <button
       class={classes.root}
-      title={BUTTON_KICK(user)}
+      title={BUTTON_REMOVE_USER(user)}
       disabled={!connected}
       onClick={() => removeUser(user)}
     >

frontend/src/Components/VotingStateDisplay/VotingStateDisplay.tsx

@@ -1,16 +1,16 @@
 import {
-  COLUMN_KICK,
   COLUMN_NAME,
+  COLUMN_REMOVE,
   COLUMN_VOTED,
   TOOLTIP_PENDING_CONNECTION,
 } from '../../constants';
+import { UserState, getVotingState } from '../../helpers/getVotingState';
 import sharedClasses from '../../styles.module.css';
 import { WebSocketApi } from '../../types/WebSocket';
 import { IconNotVoted } from '../IconNotVoted/IconNotVoted';
 import { IconObserver } from '../IconObserver/IconObserver';
 import { IconVoted } from '../IconVoted/IconVoted';
-import { KickButton } from '../KickButton/KickButton';
-import { UserState, getVotingState } from '../../helpers/getVotingState';
+import { RemoveUserButton } from '../RemoveUserButton/RemoveUserButton';
 import { connectToWebSocket } from '../WebSocket/WebSocket';
 import classes from './VotingStateDisplay.module.css';
 
@@ -65,7 +65,7 @@ export const VotingStateDisplay = connectToWebSocket(({ socket }) => (
         <tr class={sharedClasses.headerRow}>
           <th>{COLUMN_NAME}</th>
           <th>{COLUMN_VOTED}</th>
-          <th>{COLUMN_KICK}</th>
+          <th>{COLUMN_REMOVE}</th>
         </tr>
       </thead>
       <tbody>
@@ -80,7 +80,7 @@ export const VotingStateDisplay = connectToWebSocket(({ socket }) => (
               </td>
               <td>{getIcon(userState)}</td>
               <td>
-                <KickButton user={userState.user} />
+                <RemoveUserButton user={userState.user} />
               </td>
             </tr>
           );

frontend/src/constants.ts

@@ -11,7 +11,7 @@ export const LABEL_SESSION = 'Session:';
 
 export const BUTTON_CONNECTING = 'Connecting…';
 export const BUTTON_COPY_TO_CLIPBOARD = 'Copy Link to Clipboard';
-export const BUTTON_KICK = (user: string) => `Kick ${user}`;
+export const BUTTON_REMOVE_USER = (user: string) => `Remove ${user}`;
 export const BUTTON_LOGIN = 'Login';
 export const BUTTON_OBSERVER = 'Observer';
 export const BUTTON_REFRESH_SESSION = 'Refresh Session';
@@ -31,7 +31,7 @@ export const TOOLTIP_PENDING_CONNECTION = 'Pending connection';
 export const COLUMN_NAME = 'Name';
 export const COLUMN_VOTE = 'Vote';
 export const COLUMN_VOTED = 'Voted';
-export const COLUMN_KICK = 'Kick';
+export const COLUMN_REMOVE = 'Remove';
 
 export const SWITCH_TO_DARK = 'Switch to dark color mode';
 export const SWITCH_TO_LIGHT = 'Switch to light color mode';