🚚(frontend) move to members/members-add

Move addUsers to members/members-add.
Rename some of the occurences of user to member.
This commit is contained in:
Anthony LC
2024-05-31 11:10:29 +02:00
committed by Anthony LC
parent 327a5f2ed4
commit e2586b1d8e
14 changed files with 60 additions and 50 deletions

View File

@@ -16,9 +16,9 @@ test.describe('Document add users', () => {
await createPad(page, 'select-multi-users', browserName, 1); await createPad(page, 'select-multi-users', browserName, 1);
await page.getByLabel('Open the document options').click(); await page.getByLabel('Open the document options').click();
await page.getByRole('button', { name: 'Add a user' }).click(); await page.getByRole('button', { name: 'Add members' }).click();
const inputSearch = page.getByLabel(/Find a user to add to the document/); const inputSearch = page.getByLabel(/Find a member to add to the document/);
await expect(inputSearch).toBeVisible(); await expect(inputSearch).toBeVisible();
// Select user 1 // Select user 1
@@ -77,9 +77,9 @@ test.describe('Document add users', () => {
await createPad(page, 'user-invitation', browserName, 1); await createPad(page, 'user-invitation', browserName, 1);
await page.getByLabel('Open the document options').click(); await page.getByLabel('Open the document options').click();
await page.getByRole('button', { name: 'Add a user' }).click(); await page.getByRole('button', { name: 'Add members' }).click();
const inputSearch = page.getByLabel(/Find a user to add to the document/); const inputSearch = page.getByLabel(/Find a member to add to the document/);
const email = randomName('test@test.fr', browserName, 1)[0]; const email = randomName('test@test.fr', browserName, 1)[0];
await inputSearch.fill(email); await inputSearch.fill(email);
@@ -127,9 +127,9 @@ test.describe('Document add users', () => {
await createPad(page, 'user-twice', browserName, 1); await createPad(page, 'user-twice', browserName, 1);
await page.getByLabel('Open the document options').click(); await page.getByLabel('Open the document options').click();
await page.getByRole('button', { name: 'Add a user' }).click(); await page.getByRole('button', { name: 'Add members' }).click();
const inputSearch = page.getByLabel(/Find a user to add to the document/); const inputSearch = page.getByLabel(/Find a member to add to the document/);
await inputSearch.fill('user'); await inputSearch.fill('user');
const responseSearchUser = await responsePromiseSearchUser; const responseSearchUser = await responsePromiseSearchUser;
const users = (await responseSearchUser.json()).results as { const users = (await responseSearchUser.json()).results as {
@@ -152,7 +152,7 @@ test.describe('Document add users', () => {
expect(responseAddMember.ok()).toBeTruthy(); expect(responseAddMember.ok()).toBeTruthy();
await page.getByLabel('Open the document options').click(); await page.getByLabel('Open the document options').click();
await page.getByRole('button', { name: 'Add a user' }).click(); await page.getByRole('button', { name: 'Add members' }).click();
await inputSearch.fill('user'); await inputSearch.fill('user');
await expect( await expect(
@@ -167,9 +167,9 @@ test.describe('Document add users', () => {
await createPad(page, 'invitation-twice', browserName, 1); await createPad(page, 'invitation-twice', browserName, 1);
await page.getByLabel('Open the document options').click(); await page.getByLabel('Open the document options').click();
await page.getByRole('button', { name: 'Add a user' }).click(); await page.getByRole('button', { name: 'Add members' }).click();
const inputSearch = page.getByLabel(/Find a user to add to the document/); const inputSearch = page.getByLabel(/Find a member to add to the document/);
const email = randomName('test@test.fr', browserName, 1)[0]; const email = randomName('test@test.fr', browserName, 1)[0];
await inputSearch.fill(email); await inputSearch.fill(email);
@@ -191,7 +191,7 @@ test.describe('Document add users', () => {
expect(responseCreateInvitation.ok()).toBeTruthy(); expect(responseCreateInvitation.ok()).toBeTruthy();
await page.getByLabel('Open the document options').click(); await page.getByLabel('Open the document options').click();
await page.getByRole('button', { name: 'Add a user' }).click(); await page.getByRole('button', { name: 'Add members' }).click();
await inputSearch.fill(email); await inputSearch.fill(email);
await expect(page.getByRole('option', { name: email })).toBeHidden(); await expect(page.getByRole('option', { name: email })).toBeHidden();

View File

@@ -177,7 +177,7 @@ test.describe('Pad Tools', () => {
await page.getByLabel('Open the document options').click(); await page.getByLabel('Open the document options').click();
await expect( await expect(
page.getByRole('button', { name: 'Add a user' }), page.getByRole('button', { name: 'Add members' }),
).toBeVisible(); ).toBeVisible();
await expect( await expect(
page.getByRole('button', { name: 'Generate PDF' }), page.getByRole('button', { name: 'Generate PDF' }),
@@ -230,7 +230,9 @@ test.describe('Pad Tools', () => {
await page.getByLabel('Open the document options').click(); await page.getByLabel('Open the document options').click();
await expect(page.getByRole('button', { name: 'Add a user' })).toBeHidden(); await expect(
page.getByRole('button', { name: 'Add members' }),
).toBeHidden();
await expect( await expect(
page.getByRole('button', { name: 'Generate PDF' }), page.getByRole('button', { name: 'Generate PDF' }),
).toBeVisible(); ).toBeVisible();
@@ -282,7 +284,9 @@ test.describe('Pad Tools', () => {
await page.getByLabel('Open the document options').click(); await page.getByLabel('Open the document options').click();
await expect(page.getByRole('button', { name: 'Add a user' })).toBeHidden(); await expect(
page.getByRole('button', { name: 'Add members' }),
).toBeHidden();
await expect( await expect(
page.getByRole('button', { name: 'Generate PDF' }), page.getByRole('button', { name: 'Generate PDF' }),
).toBeVisible(); ).toBeVisible();

View File

@@ -1 +0,0 @@
export * from './components/ModalAddUsers';

View File

@@ -2,8 +2,13 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
import { APIError, errorCauses, fetchAPI } from '@/api'; import { APIError, errorCauses, fetchAPI } from '@/api';
import { User } from '@/core/auth'; import { User } from '@/core/auth';
import {
Access,
KEY_LIST_PAD,
Pad,
Role,
} from '@/features/pads/pad-management';
import { Access, KEY_LIST_PAD, Pad, Role } from '../../pad-management';
import { OptionType } from '../types'; import { OptionType } from '../types';
import { KEY_LIST_USER } from './useUsers'; import { KEY_LIST_USER } from './useUsers';
@@ -11,27 +16,27 @@ import { KEY_LIST_USER } from './useUsers';
interface CreateDocAccessParams { interface CreateDocAccessParams {
role: Role; role: Role;
docId: Pad['id']; docId: Pad['id'];
userId: User['id']; memberId: User['id'];
} }
export const createDocAccess = async ({ export const createDocAccess = async ({
userId, memberId,
role, role,
docId, docId,
}: CreateDocAccessParams): Promise<Access> => { }: CreateDocAccessParams): Promise<Access> => {
const response = await fetchAPI(`documents/${docId}/accesses/`, { const response = await fetchAPI(`documents/${docId}/accesses/`, {
method: 'POST', method: 'POST',
body: JSON.stringify({ body: JSON.stringify({
user: userId, user: memberId,
role, role,
}), }),
}); });
if (!response.ok) { if (!response.ok) {
throw new APIError( throw new APIError(
`Failed to add the user in the doc.`, `Failed to add the member in the doc.`,
await errorCauses(response, { await errorCauses(response, {
type: OptionType.NEW_USER, type: OptionType.NEW_MEMBER,
}), }),
); );
} }

View File

@@ -18,10 +18,10 @@ import { useCreateDocAccess, useCreateInvitation } from '../api';
import IconAddUser from '../assets/add-user.svg'; import IconAddUser from '../assets/add-user.svg';
import { import {
OptionInvitation, OptionInvitation,
OptionNewUser, OptionNewMember,
OptionSelect, OptionSelect,
OptionType, OptionType,
isOptionNewUser, isOptionNewMember,
} from '../types'; } from '../types';
import { ChooseRole } from './ChooseRole'; import { ChooseRole } from './ChooseRole';
@@ -38,17 +38,17 @@ type APIErrorUser = APIError<{
type: OptionType; type: OptionType;
}>; }>;
interface ModalAddUsersProps { interface ModalAddMembersProps {
currentRole: Role; currentRole: Role;
onClose: () => void; onClose: () => void;
doc: Pad; doc: Pad;
} }
export const ModalAddUsers = ({ export const ModalAddMembers = ({
currentRole, currentRole,
onClose, onClose,
doc, doc,
}: ModalAddUsersProps) => { }: ModalAddMembersProps) => {
const { colorsTokens } = useCunninghamTheme(); const { colorsTokens } = useCunninghamTheme();
const { t } = useTranslation(); const { t } = useTranslation();
const [selectedUsers, setSelectedUsers] = useState<OptionsSelect>([]); const [selectedUsers, setSelectedUsers] = useState<OptionsSelect>([]);
@@ -70,11 +70,11 @@ export const ModalAddUsers = ({
}); });
break; break;
case OptionType.NEW_USER: case OptionType.NEW_MEMBER:
await createDocAccess({ await createDocAccess({
role: selectedRole, role: selectedRole,
docId: doc.id, docId: doc.id,
userId: selectedUser.value.id, memberId: selectedUser.value.id,
}); });
break; break;
} }
@@ -92,13 +92,13 @@ export const ModalAddUsers = ({
? t(`Failed to create the invitation for {{email}}.`, { ? t(`Failed to create the invitation for {{email}}.`, {
email: dataError?.value, email: dataError?.value,
}) })
: t(`Failed to add the user in the document.`); : t(`Failed to add the member in the document.`);
toast(messageError, VariantType.ERROR, toastOptions); toast(messageError, VariantType.ERROR, toastOptions);
}; };
const onSuccess = (option: OptionSelect) => { const onSuccess = (option: OptionSelect) => {
const message = !isOptionNewUser(option) const message = !isOptionNewMember(option)
? t('Invitation sent to {{email}}.', { ? t('Invitation sent to {{email}}.', {
email: option.value.email, email: option.value.email,
}) })
@@ -111,7 +111,7 @@ export const ModalAddUsers = ({
setIsPending(true); setIsPending(true);
const settledPromises = await Promise.allSettled< const settledPromises = await Promise.allSettled<
OptionInvitation | OptionNewUser OptionInvitation | OptionNewMember
>(switchActions(selectedUsers)); >(switchActions(selectedUsers));
onClose(); onClose();
@@ -161,7 +161,7 @@ export const ModalAddUsers = ({
<Box $align="center" $gap="1rem"> <Box $align="center" $gap="1rem">
<IconAddUser width={48} color={colorsTokens()['primary-text']} /> <IconAddUser width={48} color={colorsTokens()['primary-text']} />
<Text $size="h3" $margin="none"> <Text $size="h3" $margin="none">
{t('Add users to the document')} {t('Add members to the document')}
</Text> </Text>
</Box> </Box>
} }

View File

@@ -55,7 +55,7 @@ export const SearchUsers = ({
let users: OptionsSelect = optionsFiltered.map((user) => ({ let users: OptionsSelect = optionsFiltered.map((user) => ({
value: user, value: user,
label: user.email, label: user.email,
type: OptionType.NEW_USER, type: OptionType.NEW_MEMBER,
})); }));
if (userQuery && isValidEmail(userQuery)) { if (userQuery && isValidEmail(userQuery)) {
@@ -103,17 +103,17 @@ export const SearchUsers = ({
return ( return (
<AsyncSelect <AsyncSelect
isDisabled={disabled} isDisabled={disabled}
aria-label={t('Find a user to add to the document')} aria-label={t('Find a member to add to the document')}
isMulti isMulti
loadOptions={loadOptions} loadOptions={loadOptions}
defaultOptions={[]} defaultOptions={[]}
onInputChange={onInputChangeHandle} onInputChange={onInputChangeHandle}
inputValue={input} inputValue={input}
placeholder={t('Search new users by email')} placeholder={t('Search new members by email')}
noOptionsMessage={() => noOptionsMessage={() =>
input input
? t("We didn't find something matching, try to be more accurate") ? t("We didn't find a mail matching, try to be more accurate")
: t('Invite new users to {{title}}', { title: doc.title }) : t('Invite new members to {{title}}', { title: doc.title })
} }
onChange={(value) => { onChange={(value) => {
setInput(''); setInput('');

View File

@@ -0,0 +1 @@
export * from './components/ModalAddMembers';

View File

@@ -1,13 +1,14 @@
import { User } from '@/core/auth'; import { User } from '@/core/auth';
import { Pad, Role } from '@/features/pads/pad-management';
import { Pad, Role } from '../pad-management';
export enum OptionType { export enum OptionType {
INVITATION = 'invitation', INVITATION = 'invitation',
NEW_USER = 'new_user', NEW_MEMBER = 'new_member',
} }
export const isOptionNewUser = (data: OptionSelect): data is OptionNewUser => { export const isOptionNewMember = (
data: OptionSelect,
): data is OptionNewMember => {
return 'id' in data.value; return 'id' in data.value;
}; };
@@ -17,13 +18,13 @@ export interface OptionInvitation {
type: OptionType.INVITATION; type: OptionType.INVITATION;
} }
export interface OptionNewUser { export interface OptionNewMember {
value: User; value: User;
label: string; label: string;
type: OptionType.NEW_USER; type: OptionType.NEW_MEMBER;
} }
export type OptionSelect = OptionNewUser | OptionInvitation; export type OptionSelect = OptionNewMember | OptionInvitation;
export interface DocInvitation { export interface DocInvitation {
id: string; id: string;

View File

@@ -3,6 +3,7 @@ import React, { useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Box, DropButton, IconOptions, Text } from '@/components'; import { Box, DropButton, IconOptions, Text } from '@/components';
import { ModalAddMembers } from '@/features/pads/members/members-add';
import { import {
ModalRemovePad, ModalRemovePad,
ModalUpdatePad, ModalUpdatePad,
@@ -10,7 +11,6 @@ import {
currentDocRole, currentDocRole,
} from '@/features/pads/pad-management'; } from '@/features/pads/pad-management';
import { ModalAddUsers } from '../../addUsers';
import { TemplatesOrdering, useTemplates } from '../api/useTemplates'; import { TemplatesOrdering, useTemplates } from '../api/useTemplates';
import { ModalPDF } from './ModalPDF'; import { ModalPDF } from './ModalPDF';
@@ -24,7 +24,7 @@ export const PadToolBox = ({ pad }: PadToolBoxProps) => {
const { data: templates } = useTemplates({ const { data: templates } = useTemplates({
ordering: TemplatesOrdering.BY_CREATED_ON_DESC, ordering: TemplatesOrdering.BY_CREATED_ON_DESC,
}); });
const [isModalAddUserOpen, setIsModalAddUserOpen] = useState(false); const [isModalAddMembersOpen, setIsModalAddMembersOpen] = useState(false);
const [isModalUpdateOpen, setIsModalUpdateOpen] = useState(false); const [isModalUpdateOpen, setIsModalUpdateOpen] = useState(false);
const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false); const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false);
const [isModalPDFOpen, setIsModalPDFOpen] = useState(false); const [isModalPDFOpen, setIsModalPDFOpen] = useState(false);
@@ -63,13 +63,13 @@ export const PadToolBox = ({ pad }: PadToolBoxProps) => {
{pad.abilities.manage_accesses && ( {pad.abilities.manage_accesses && (
<Button <Button
onClick={() => { onClick={() => {
setIsModalAddUserOpen(true); setIsModalAddMembersOpen(true);
setIsDropOpen(false); setIsDropOpen(false);
}} }}
color="primary-text" color="primary-text"
icon={<span className="material-icons">person_add</span>} icon={<span className="material-icons">person_add</span>}
> >
<Text $theme="primary">{t('Add a user')}</Text> <Text $theme="primary">{t('Add members')}</Text>
</Button> </Button>
)} )}
{pad.abilities.partial_update && ( {pad.abilities.partial_update && (
@@ -108,9 +108,9 @@ export const PadToolBox = ({ pad }: PadToolBoxProps) => {
</Button> </Button>
</Box> </Box>
</DropButton> </DropButton>
{isModalAddUserOpen && ( {isModalAddMembersOpen && (
<ModalAddUsers <ModalAddMembers
onClose={() => setIsModalAddUserOpen(false)} onClose={() => setIsModalAddMembersOpen(false)}
doc={pad} doc={pad}
currentRole={currentDocRole(pad)} currentRole={currentDocRole(pad)}
/> />