diff --git a/CHANGELOG.md b/CHANGELOG.md index 40be9fead..3668d4371 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Change + +- **Technical User Management** + - enhanced UI of technical user management creation page + ## 2.3.0-RC3 ### Change diff --git a/src/assets/locales/de/main.json b/src/assets/locales/de/main.json index 50c8ba011..c3ffd8459 100644 --- a/src/assets/locales/de/main.json +++ b/src/assets/locales/de/main.json @@ -1097,9 +1097,11 @@ "technicalUser": { "addOverlay": { "service": "Technical User Role", - "note": "Notiz: Die Auswahl sowohl interner als auch externer Benutzer für denselben Dienst ist nicht möglich.", - "internalRoles": "Interne Rollen:", - "externalRoles": "Externe Rollen:", + "note": "Notiz: Die Auswahl sowohl interner als auch externer Benutzer für denselben Dienst ist nicht möglich.", + "internalRoles": "Interner technischer Benutzer", + "internalRolesDescription": "Interne technische Benutzer werden in der direkten Umgebung des Portals erstellt und können daher mehrere Rollen haben", + "externalRoles": "Externer technischer Benutzer", + "externalRolesDescription": "Externe technische Benutzer werden in einer externen Umgebung erstellt und können daher nur eine Rolle haben", "username": "Username*", "description": "Beschreibung*", "spocHeadline": "Single Point of Contact (SPoC)", diff --git a/src/assets/locales/en/main.json b/src/assets/locales/en/main.json index 3d77fd040..e319838a9 100644 --- a/src/assets/locales/en/main.json +++ b/src/assets/locales/en/main.json @@ -1102,9 +1102,11 @@ "technicalUser": { "addOverlay": { "service": "Technical User Role", - "note": "Note: Selection of both internal and external users for the same service is not possible.", - "internalRoles": "Internal Roles :", - "externalRoles": "External Roles :", + "note": "Note: Selection of both internal and external users for the same service is not possible.", + "internalRoles": "Internal technical user", + "internalRolesDescription": "Internal technical user are created in the direct environment of the portal therefore can have multiple roles", + "externalRoles": "External technical user", + "externalRolesDescription": "External technical user are created in external environment therefore can only have one role", "username": "Username*", "description": "Description*", "spocHeadline": "Single Point of Contact (SPoC)", diff --git a/src/components/overlays/AddTechnicalUser/TechnicalUserAddForm.scss b/src/components/overlays/AddTechnicalUser/TechnicalUserAddForm.scss index 4d2f7054a..1d2075c6f 100644 --- a/src/components/overlays/AddTechnicalUser/TechnicalUserAddForm.scss +++ b/src/components/overlays/AddTechnicalUser/TechnicalUserAddForm.scss @@ -40,3 +40,9 @@ margin: -5px 27px 10px; } } + +.roles { + .MuiTypography-root { + font-size: 14px !important; + } +} diff --git a/src/components/overlays/AddTechnicalUser/TechnicalUserAddForm.tsx b/src/components/overlays/AddTechnicalUser/TechnicalUserAddForm.tsx index 959e9f0f3..26bd291b0 100644 --- a/src/components/overlays/AddTechnicalUser/TechnicalUserAddForm.tsx +++ b/src/components/overlays/AddTechnicalUser/TechnicalUserAddForm.tsx @@ -18,7 +18,7 @@ * SPDX-License-Identifier: Apache-2.0 ********************************************************************************/ -import { useState } from 'react' +import { useEffect, useState } from 'react' import Box from '@mui/material/Box' import { Trans, useTranslation } from 'react-i18next' import InputLabel from '@mui/material/InputLabel' @@ -82,6 +82,11 @@ export type FormAddType = { limit?: number } +enum RoleType { + Internal = 'Internal', + External = 'External', +} + const TechnicalUserAddFormSelect = ({ control, trigger, @@ -91,10 +96,21 @@ const TechnicalUserAddFormSelect = ({ }: FormSelectType) => { const { t } = useTranslation() const roles = useFetchServiceAccountRolesQuery().data - const internalRoles = roles?.filter((role) => role.roleType === 'Internal') - const externalRoles = roles?.filter((role) => role.roleType === 'External') + const internalRoles = roles?.filter( + (role) => role.roleType === RoleType.Internal + ) + const externalRoles = roles?.filter( + (role) => role.roleType === RoleType.External + ) const [roleError, setRoleError] = useState(false) const [selectedRoles, setSelectedRoles] = useState([]) + const [selectedRoleType, setSelectedRoleType] = useState( + RoleType.Internal + ) + + useEffect(() => { + setSelectedRoles([]) + }, [selectedRoleType]) const selectCheckboxRoles = (role: string, select: boolean) => { if (selectedRoles && selectedRoles[0] === externalRoles?.[0].roleId) { @@ -150,67 +166,100 @@ const TechnicalUserAddFormSelect = ({ - + {t('content.addUser.technicalUser.addOverlay.note')} - - - {t('content.addUser.technicalUser.addOverlay.internalRoles')} - - {internalRoles?.map((role: ServiceAccountRole) => ( - <> - { - selectRoles(role.roleId, e.target.checked, 'checkbox') - trigger(name) - onChange( - selectCheckboxOnChange(role.roleId, e.target.checked) - ) - }} - size="small" - value={selectedRoles} - /> - - {role.roleDescription ?? '-'} - - - ))} + + { setSelectedRoleType(RoleType.Internal) }} + name="radio-buttons" + value={selectedRoleType} + size="small" + /> + + + {t( + 'content.addUser.technicalUser.addOverlay.internalRolesDescription' + )} + + {internalRoles?.map((role: ServiceAccountRole) => ( + <> + + { + selectRoles(role.roleId, e.target.checked, 'checkbox') + trigger(name) + onChange( + selectCheckboxOnChange(role.roleId, e.target.checked) + ) + }} + size="small" + value={selectedRoles} + disabled={selectedRoleType === RoleType.External} + /> + + + {role.roleDescription ?? '-'} + + + ))} + - - - {t('content.addUser.technicalUser.addOverlay.externalRoles')} - - {externalRoles?.map((role: ServiceAccountRole) => ( - <> - { - selectRoles(role.roleId, e.target.checked, 'radio') - trigger(name) - onChange([...[], role.roleId]) - }} - name="radio-buttons" - value={selectedRoles} - size="small" - /> - - - {role.roleDescription ?? '-'} - - - ))} + + { setSelectedRoleType(RoleType.External) }} + name="radio-buttons" + value={selectedRoleType} + size="small" + /> + + + {t( + 'content.addUser.technicalUser.addOverlay.externalRolesDescription' + )} + + {externalRoles?.map((role: ServiceAccountRole) => ( + <> + + { + selectRoles(role.roleId, e.target.checked, 'radio') + trigger(name) + onChange([...[], role.roleId]) + }} + name="radio-buttons" + value={selectedRoles} + size="small" + disabled={selectedRoleType === RoleType.Internal} + /> + + + {role.roleDescription ?? '-'} + + + ))} + {roleError && ( - + {t('content.addUser.technicalUser.addOverlay.roleMandatory')} )}