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')}
)}