diff --git a/CHANGELOG.md b/CHANGELOG.md
index 41e8a2b..ff4a795 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,10 @@ and this project adheres to
## [Unreleased]
+### Fixed
+
+- 🐛(frontend) fix update accesses form #448
+
## [1.2.1] - 2024-10-03
### Fixed
diff --git a/src/frontend/apps/desk/src/features/mail-domains/access-management/components/ChooseRole.tsx b/src/frontend/apps/desk/src/features/mail-domains/access-management/components/ChooseRole.tsx
index 7e1b17f..6e2c9ea 100644
--- a/src/frontend/apps/desk/src/features/mail-domains/access-management/components/ChooseRole.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/access-management/components/ChooseRole.tsx
@@ -3,8 +3,11 @@ import { useTranslation } from 'react-i18next';
import { Role } from '../../domains';
+const ORDERED_ROLES = [Role.VIEWER, Role.ADMIN, Role.OWNER];
+
interface ChooseRoleProps {
availableRoles: Role[];
+ roleAccess: Role;
currentRole: Role;
disabled: boolean;
setRole: (role: Role) => void;
@@ -12,55 +15,44 @@ interface ChooseRoleProps {
export const ChooseRole = ({
availableRoles,
+ roleAccess,
disabled,
currentRole,
setRole,
}: ChooseRoleProps) => {
const { t } = useTranslation();
- const rolesToDisplay = Array.from(new Set([currentRole, ...availableRoles]));
+ const rolesToDisplay: Role[] = Array.from(
+ new Set([roleAccess, ...availableRoles]),
+ );
+
+ const translations = {
+ [Role.VIEWER]: t('Viewer'),
+ [Role.ADMIN]: t('Administrator'),
+ [Role.OWNER]: t('Owner'),
+ };
return (
- {rolesToDisplay?.map((role) => {
- switch (role) {
- case Role.VIEWER:
- return (
- setRole(evt.target.value as Role)}
- defaultChecked={currentRole === Role.VIEWER}
- disabled={disabled}
- />
- );
- case Role.ADMIN:
- return (
- setRole(evt.target.value as Role)}
- defaultChecked={currentRole === Role.ADMIN}
- disabled={disabled}
- />
- );
- case Role.OWNER:
- return (
- setRole(evt.target.value as Role)}
- defaultChecked={currentRole === Role.OWNER}
- disabled={disabled || currentRole !== Role.OWNER}
- />
- );
- }
- })}
+ {ORDERED_ROLES.filter((role) => rolesToDisplay.includes(role)).map(
+ (role) => {
+ let disableRadio = disabled;
+ if (role === Role.OWNER) {
+ disableRadio = disableRadio || currentRole !== Role.OWNER;
+ }
+
+ return (
+ setRole(evt.target.value as Role)}
+ defaultChecked={roleAccess === role}
+ disabled={disableRadio}
+ />
+ );
+ },
+ )}
);
};
diff --git a/src/frontend/apps/desk/src/features/mail-domains/access-management/components/ModalRole.tsx b/src/frontend/apps/desk/src/features/mail-domains/access-management/components/ModalRole.tsx
index aed667d..fbb0ce8 100644
--- a/src/frontend/apps/desk/src/features/mail-domains/access-management/components/ModalRole.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/access-management/components/ModalRole.tsx
@@ -7,12 +7,11 @@ import {
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
-import { Box, Text, TextErrors } from '@/components';
+import { Box, TextErrors } from '@/components';
import { Modal } from '@/components/Modal';
import { useUpdateMailDomainAccess } from '@/features/mail-domains/access-management';
import { Role } from '../../domains';
-import { useWhoAmI } from '../hooks/useWhoAmI';
import { Access } from '../types';
import { ChooseRole } from './ChooseRole';
@@ -46,13 +45,10 @@ export const ModalRole = ({
onClose();
},
});
- const { isLastOwner, isOtherOwner } = useWhoAmI(access);
-
- const isNotAllowed = isOtherOwner || isLastOwner;
return (
{t('Validate')}
@@ -93,28 +89,11 @@ export const ModalRole = ({
/>
)}
- {(isLastOwner || isOtherOwner) && (
-
- warning
- {isLastOwner &&
- t(
- 'You are the sole owner of this domain. Make another member the domain owner, before you can change your own role.',
- )}
- {isOtherOwner && t('You cannot update the role of other owner.')}
-
- )}
-
diff --git a/src/frontend/apps/desk/src/features/mail-domains/access-management/components/__tests__/ChooseRole.test.tsx b/src/frontend/apps/desk/src/features/mail-domains/access-management/components/__tests__/ChooseRole.test.tsx
index 57d92d1..42cd2c0 100644
--- a/src/frontend/apps/desk/src/features/mail-domains/access-management/components/__tests__/ChooseRole.test.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/access-management/components/__tests__/ChooseRole.test.tsx
@@ -15,6 +15,7 @@ describe('ChooseRole', () => {
) => {
const defaultProps = {
availableRoles: [Role.VIEWER, Role.ADMIN],
+ roleAccess: Role.ADMIN,
currentRole: Role.ADMIN,
disabled: false,
setRole: mockSetRole,
@@ -28,13 +29,22 @@ describe('ChooseRole', () => {
jest.clearAllMocks();
});
- it('renders available roles correctly', () => {
+ it('renders available roles correctly when we are Administrator', () => {
renderChooseRole();
-
expect(screen.getByLabelText('Viewer')).toBeInTheDocument();
expect(screen.getByLabelText('Administrator')).toBeInTheDocument();
});
+ it('renders available roles correctly when we are owner', () => {
+ renderChooseRole({
+ currentRole: Role.OWNER,
+ roleAccess: Role.OWNER,
+ });
+ expect(screen.getByLabelText('Viewer')).toBeInTheDocument();
+ expect(screen.getByLabelText('Administrator')).toBeInTheDocument();
+ expect(screen.getByLabelText('Owner')).toBeInTheDocument();
+ });
+
it('sets default role checked correctly', () => {
renderChooseRole({ currentRole: Role.ADMIN });
@@ -91,6 +101,7 @@ describe('ChooseRole', () => {
it('renders and checks owner role correctly when currentRole is owner', () => {
renderChooseRole({
currentRole: Role.OWNER,
+ roleAccess: Role.OWNER,
availableRoles: [Role.OWNER, Role.VIEWER, Role.ADMIN],
});
diff --git a/src/frontend/apps/desk/src/features/mail-domains/access-management/components/__tests__/ModalRole.test.tsx b/src/frontend/apps/desk/src/features/mail-domains/access-management/components/__tests__/ModalRole.test.tsx
index 7c42f39..e454075 100644
--- a/src/frontend/apps/desk/src/features/mail-domains/access-management/components/__tests__/ModalRole.test.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/access-management/components/__tests__/ModalRole.test.tsx
@@ -115,26 +115,6 @@ describe('ModalRole', () => {
);
});
- it('disables the Validate button if the user is the last owner', () => {
- renderModalRole(true, false); // isLastOwner = true, isOtherOwner = false
-
- const validateButton = screen.getByRole('button', { name: /Validate/i });
- expect(validateButton).toBeDisabled();
- expect(
- screen.getByText(/You are the sole owner of this domain/i),
- ).toBeInTheDocument();
- });
-
- it('disables the Validate button if the user is another owner', () => {
- renderModalRole(false, true); // isLastOwner = false, isOtherOwner = true
-
- const validateButton = screen.getByRole('button', { name: /Validate/i });
- expect(validateButton).toBeDisabled();
- expect(
- screen.getByText(/You cannot update the role of other owner/i),
- ).toBeInTheDocument();
- });
-
it('shows error message when update fails', async () => {
fetchMock.patch(`end:mail-domains/domain-slug/accesses/1-1-1-1-1-1/`, {
status: 400,
diff --git a/src/frontend/apps/desk/src/features/mail-domains/domains/types.ts b/src/frontend/apps/desk/src/features/mail-domains/domains/types.ts
index 13b9131..8c877bb 100644
--- a/src/frontend/apps/desk/src/features/mail-domains/domains/types.ts
+++ b/src/frontend/apps/desk/src/features/mail-domains/domains/types.ts
@@ -1,4 +1,5 @@
import { UUID } from 'crypto';
+
export interface MailDomain {
id: UUID;
name: string;