diff --git a/apps/meteor/client/sidebar/header/CreateTeam/CreateTeamModal.tsx b/apps/meteor/client/sidebar/header/CreateTeam/CreateTeamModal.tsx index 1f12c2b59b495..9907aa7888943 100644 --- a/apps/meteor/client/sidebar/header/CreateTeam/CreateTeamModal.tsx +++ b/apps/meteor/client/sidebar/header/CreateTeam/CreateTeamModal.tsx @@ -1,15 +1,16 @@ -import { Box, Modal, Button, TextInput, Field, ToggleSwitch, FieldGroup, Icon } from '@rocket.chat/fuselage'; +import { Box, Button, Field, FieldGroup, Icon, Modal, TextInput, ToggleSwitch } from '@rocket.chat/fuselage'; +import { useUniqueId } from '@rocket.chat/fuselage-hooks'; import { - useTranslation, - useSetting, - usePermission, useEndpoint, - useToastMessageDispatch, + usePermission, usePermissionWithScopedRoles, + useSetting, + useToastMessageDispatch, + useTranslation, } from '@rocket.chat/ui-contexts'; import type { ComponentProps, ReactElement } from 'react'; -import React, { memo, useMemo, useEffect } from 'react'; -import { useForm, Controller } from 'react-hook-form'; +import React, { memo, useEffect, useMemo } from 'react'; +import { Controller, useForm } from 'react-hook-form'; import UserAutoCompleteMultiple from '../../../components/UserAutoCompleteMultiple'; import { goToRoomById } from '../../../lib/utils/goToRoomById'; @@ -129,18 +130,35 @@ const CreateTeamModal = ({ onClose }: { onClose: () => void }): ReactElement => } }; + const createTeamFormId = useUniqueId(); + const nameId = useUniqueId(); + const topicId = useUniqueId(); + const privateId = useUniqueId(); + const readOnlyId = useUniqueId(); + const encryptedId = useUniqueId(); + const broadcastId = useUniqueId(); + const addMembersId = useUniqueId(); + return ( - ) => }> + ) => ( + + )} + > - {t('Teams_New_Title')} + {t('Teams_New_Title')} - {t('Teams_New_Name_Label')} + + {t('Teams_New_Name_Label')} + void }): ReactElement => placeholder={t('Team_Name')} addon={} error={errors.name?.message} + aria-describedby={`${nameId}-error`} + aria-required='true' /> - {errors?.name && {errors.name.message}} + {errors?.name && ( + + {errors.name.message} + + )} - + {t('Teams_New_Description_Label')}{' '} ({t('optional')}) - + - {t('Teams_New_Private_Label')} - + {t('Teams_New_Private_Label')} + {isPrivate ? t('Teams_New_Private_Description_Enabled') : t('Teams_New_Private_Description_Disabled')} @@ -176,7 +205,7 @@ const CreateTeamModal = ({ onClose }: { onClose: () => void }): ReactElement => control={control} name='isPrivate' render={({ field: { onChange, value, ref } }): ReactElement => ( - + )} /> @@ -184,8 +213,8 @@ const CreateTeamModal = ({ onClose }: { onClose: () => void }): ReactElement => - {t('Teams_New_Read_only_Label')} - + {t('Teams_New_Read_only_Label')} + {readOnly ? t('Only_authorized_users_can_write_new_messages') : t('Teams_New_Read_only_Description')} @@ -193,7 +222,14 @@ const CreateTeamModal = ({ onClose }: { onClose: () => void }): ReactElement => control={control} name='readOnly' render={({ field: { onChange, value, ref } }): ReactElement => ( - + )} /> @@ -201,8 +237,8 @@ const CreateTeamModal = ({ onClose }: { onClose: () => void }): ReactElement => - {t('Teams_New_Encrypted_Label')} - + {t('Teams_New_Encrypted_Label')} + {isPrivate ? t('Teams_New_Encrypted_Description_Enabled') : t('Teams_New_Encrypted_Description_Disabled')} @@ -210,7 +246,14 @@ const CreateTeamModal = ({ onClose }: { onClose: () => void }): ReactElement => control={control} name='encrypted' render={({ field: { onChange, value, ref } }): ReactElement => ( - + )} /> @@ -218,20 +261,20 @@ const CreateTeamModal = ({ onClose }: { onClose: () => void }): ReactElement => - {t('Teams_New_Broadcast_Label')} - {t('Teams_New_Broadcast_Description')} + {t('Teams_New_Broadcast_Label')} + {t('Teams_New_Broadcast_Description')} ( - + )} /> - + {t('Teams_New_Add_members_Label')}{' '} ({t('optional')}) diff --git a/apps/meteor/tests/e2e/page-objects/home-team.ts b/apps/meteor/tests/e2e/page-objects/home-team.ts index 24e8396979c9a..9c890da05db8c 100644 --- a/apps/meteor/tests/e2e/page-objects/home-team.ts +++ b/apps/meteor/tests/e2e/page-objects/home-team.ts @@ -1,6 +1,6 @@ import type { Locator, Page } from '@playwright/test'; -import { HomeContent, HomeSidenav, HomeFlextab } from './fragments'; +import { HomeContent, HomeFlextab, HomeSidenav } from './fragments'; export class HomeTeam { private readonly page: Page; @@ -30,4 +30,12 @@ export class HomeTeam { get btnTeamCreate(): Locator { return this.page.locator('role=dialog >> role=group >> role=button[name=Create]'); } + + get textPrivate(): Locator { + return this.page.locator('role=dialog[name="Create Team"] >> label >> text="Private"'); + } + + get textReadOnly(): Locator { + return this.page.locator('role=dialog[name="Create Team"] >> label >> text="Read Only"'); + } } diff --git a/apps/meteor/tests/e2e/team-management.spec.ts b/apps/meteor/tests/e2e/team-management.spec.ts index ee2220966d8d4..338f5c5eb0ef4 100644 --- a/apps/meteor/tests/e2e/team-management.spec.ts +++ b/apps/meteor/tests/e2e/team-management.spec.ts @@ -3,7 +3,7 @@ import { faker } from '@faker-js/faker'; import { Users } from './fixtures/userStates'; import { HomeTeam } from './page-objects'; import { createTargetChannel } from './utils'; -import { test, expect } from './utils/test'; +import { expect, test } from './utils/test'; test.use({ storageState: Users.admin.state }); @@ -11,6 +11,8 @@ test.describe.serial('teams-management', () => { let poHomeTeam: HomeTeam; let targetChannel: string; const targetTeam = faker.string.uuid(); + const targetTeamNonPrivate = faker.string.uuid(); + const targetTeamReadOnly = faker.string.uuid(); test.beforeAll(async ({ api }) => { targetChannel = await createTargetChannel(api); @@ -22,7 +24,7 @@ test.describe.serial('teams-management', () => { await page.goto('/home'); }); - test('expect create "targetTeam"', async ({ page }) => { + test('expect create "targetTeam" private', async ({ page }) => { await poHomeTeam.sidenav.openNewByLabel('Team'); await poHomeTeam.inputTeamName.type(targetTeam); await poHomeTeam.addMember('user1'); @@ -31,6 +33,26 @@ test.describe.serial('teams-management', () => { await expect(page).toHaveURL(`/group/${targetTeam}`); }); + test('expect create "targetTeamNonPrivate" non private', async ({ page }) => { + await poHomeTeam.sidenav.openNewByLabel('Team'); + await poHomeTeam.inputTeamName.type(targetTeamNonPrivate); + await poHomeTeam.textPrivate.click(); + await poHomeTeam.addMember('user1'); + await poHomeTeam.btnTeamCreate.click(); + + await expect(page).toHaveURL(`/channel/${targetTeamNonPrivate}`); + }); + + test('expect create "targetTeamReadOnly" readonly', async ({ page }) => { + await poHomeTeam.sidenav.openNewByLabel('Team'); + await poHomeTeam.inputTeamName.type(targetTeamReadOnly); + await poHomeTeam.textReadOnly.click(); + await poHomeTeam.addMember('user1'); + await poHomeTeam.btnTeamCreate.click(); + + await expect(page).toHaveURL(`/group/${targetTeamReadOnly}`); + }); + test('expect throw validation error if team name already exists', async () => { await poHomeTeam.sidenav.openNewByLabel('Team'); await poHomeTeam.inputTeamName.type(targetTeam);