Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[FIX] Members selection field on creating team modal #25871

Merged
merged 4 commits into from
Jun 20, 2022
Merged

[FIX] Members selection field on creating team modal #25871

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
76c359c
[NEW] Create Team with an username list
pierre-lehnen-rc Jun 14, 2022
7bbe2c9
Merge branch 'new/create-teams-with-usernames' into fix/addMembers-te…
dougfabris Jun 14, 2022
d3a37c7
fix: add members on teams create
dougfabris Jun 14, 2022
c59c0c3
Merge branch 'develop' into fix/addMembers-teams-create
dougfabris Jun 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
211 changes: 8 additions & 203 deletions apps/meteor/client/views/teams/CreateTeamModal/CreateTeamModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,207 +1,13 @@
import type { IUser } from '@rocket.chat/core-typings';
import { Box, Modal, ButtonGroup, Button, TextInput, Field, ToggleSwitch, FieldGroup } from '@rocket.chat/fuselage';
import { useMutableCallback, useDebouncedCallback, useAutoFocus } from '@rocket.chat/fuselage-hooks';
import { useSetting, usePermission, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
import React, { FC, memo, useCallback, useEffect, useMemo, useState } from 'react';
import { useAutoFocus } from '@rocket.chat/fuselage-hooks';
import { useTranslation } from '@rocket.chat/ui-contexts';
import React, { memo, ReactElement } from 'react';

import { useEndpointActionExperimental } from '../../../hooks/useEndpointActionExperimental';
import { useForm } from '../../../hooks/useForm';
import { goToRoomById } from '../../../lib/utils/goToRoomById';
import UserAutoCompleteMultiple from '../../../components/UserAutoCompleteMultiple';
import TeamNameInput from './TeamNameInput';
import UsersInput from './UsersInput';
import { useCreateTeamModalState } from './useCreateTeamModalState';

type CreateTeamModalState = {
name: any;
nameError: any;
onChangeName: any;
description: any;
onChangeDescription: any;
type: any;
onChangeType: any;
readOnly: any;
canChangeReadOnly: any;
onChangeReadOnly: any;
encrypted: any;
canChangeEncrypted: any;
onChangeEncrypted: any;
broadcast: any;
onChangeBroadcast: any;
members: any;
onChangeMembers: any;
hasUnsavedChanges: any;
isCreateButtonEnabled: any;
onCreate: any;
};

const useCreateTeamModalState = (onClose: () => void): CreateTeamModalState => {
const e2eEnabled = useSetting('E2E_Enable');
const e2eEnabledForPrivateByDefault = useSetting('E2E_Enabled_Default_PrivateRooms');
const namesValidation = useSetting('UTF8_Channel_Names_Validation');
const allowSpecialNames = useSetting('UI_Allow_room_names_with_special_chars');

const { values, handlers, hasUnsavedChanges } = useForm({
members: [],
name: '',
description: '',
type: true,
readOnly: false,
encrypted: e2eEnabledForPrivateByDefault ?? false,
broadcast: false,
});

const { name, description, type, readOnly, broadcast, encrypted, members } = values as {
name: string;
description: string;
type: boolean;
readOnly: boolean;
broadcast: boolean;
encrypted: boolean;
members: Exclude<IUser['username'], undefined>[];
};

const { handleMembers, handleEncrypted, handleType, handleBroadcast, handleReadOnly } = handlers;

const t = useTranslation();

const teamNameRegex = useMemo(() => {
if (allowSpecialNames) {
return null;
}

return new RegExp(`^${namesValidation}$`);
}, [allowSpecialNames, namesValidation]);

const [nameError, setNameError] = useState<string>();

const teamNameExists = useMethod('roomNameExists');

const checkName = useDebouncedCallback(
async (name: string) => {
setNameError(undefined);

if (!hasUnsavedChanges) {
return;
}

if (!name || name.length === 0) {
setNameError(t('Field_required'));
return;
}

if (teamNameRegex && !teamNameRegex.test(name)) {
setNameError(t('error-invalid-name'));
return;
}

const isNotAvailable = await teamNameExists(name);
if (isNotAvailable) {
setNameError(t('Teams_Errors_team_name', { name }));
}
},
230,
[name],
);

useEffect(() => {
checkName(name);
}, [checkName, name]);

const canChangeReadOnly = !broadcast;

const canChangeEncrypted = type && !broadcast && e2eEnabled && !e2eEnabledForPrivateByDefault;

const onChangeName = handlers.handleName;

const onChangeDescription = handlers.handleDescription;

const onChangeType = useMutableCallback((value) => {
handleEncrypted(!value);
return handleType(value);
});

const onChangeReadOnly = handlers.handleReadOnly;

const onChangeEncrypted = handlers.handleEncrypted;

const onChangeBroadcast = useCallback(
(value) => {
handleEncrypted(!value);
handleReadOnly(value);
return handleBroadcast(value);
},
[handleBroadcast, handleEncrypted, handleReadOnly],
);

const onChangeMembers = useCallback(
(value, action) => {
if (!action) {
if (members.includes(value)) {
return;
}
return handleMembers([...members, value]);
}
handleMembers(members.filter((current) => current !== value));
},
[handleMembers, members],
);

const canSave = hasUnsavedChanges && !nameError;
const canCreateTeam = usePermission('create-team');
const isCreateButtonEnabled = canSave && canCreateTeam;

const createTeam = useEndpointActionExperimental('POST', '/v1/teams.create');

const onCreate = useCallback(async () => {
const params = {
name,
members,
type: type ? 1 : 0,
room: {
readOnly,
extraData: {
description,
broadcast,
encrypted,
},
},
};

const data = await createTeam(params);

goToRoomById(data.team.roomId);

onClose();
}, [name, members, type, readOnly, description, broadcast, encrypted, createTeam, onClose]);

return {
name,
nameError,
onChangeName,
description,
onChangeDescription,
type,
onChangeType,
readOnly,
canChangeReadOnly,
onChangeReadOnly,
encrypted,
canChangeEncrypted,
onChangeEncrypted,
broadcast,
onChangeBroadcast,
members,
onChangeMembers,
hasUnsavedChanges,
isCreateButtonEnabled,
onCreate,
};
};

type CreateTeamModalProps = {
onClose: () => void;
};

const CreateTeamModal: FC<CreateTeamModalProps> = ({ onClose }) => {
const CreateTeamModal = ({ onClose }: { onClose: () => void }): ReactElement => {
const {
name,
nameError,
Expand All @@ -226,14 +32,13 @@ const CreateTeamModal: FC<CreateTeamModalProps> = ({ onClose }) => {
} = useCreateTeamModalState(onClose);

const t = useTranslation();

const focusRef = useAutoFocus<HTMLInputElement>();

return (
<Modal>
<Modal.Header>
<Modal.Title>{t('Teams_New_Title')}</Modal.Title>
<Modal.Close onClick={onClose} />
<Modal.Close title={t('Close')} onClick={onClose} />
</Modal.Header>
<Modal.Content>
<FieldGroup>
Expand Down Expand Up @@ -310,7 +115,7 @@ const CreateTeamModal: FC<CreateTeamModalProps> = ({ onClose }) => {
({t('optional')})
</Box>
</Field.Label>
<UsersInput value={members} onChange={onChangeMembers} />
<UserAutoCompleteMultiple value={members} onChange={onChangeMembers} />
</Field>
</FieldGroup>
</Modal.Content>
Expand Down
90 changes: 0 additions & 90 deletions apps/meteor/client/views/teams/CreateTeamModal/UsersInput.tsx
View file
Open in desktop

This file was deleted.

Loading