feat(technical user management): enhance creation page by role type (#…

…1303)

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## Unreleased
 
+### Change
+
+- **Technical Uaer Management**
+  - enhanced technical user management creation page by role type [#1303](https://github.com/eclipse-tractusx/portal-frontend/pull/1303)
+
 ### Bugfixes
 
 - **Home Page**

src/assets/locales/de/main.json

@@ -1096,15 +1096,19 @@
       "technicalUser": {
         "addOverlay": {
           "service": "Technical User Role",
-          "serviceSubHeading": "Select one of the following service roles:",
+          "note": "<strong>Notiz:</strong> Die Auswahl sowohl interner als auch externer Benutzer für denselben Dienst ist nicht möglich.",
+          "internalRoles": "Interne Rollen:",
+          "externalRoles": "Externe Rollen:",
           "username": "Username*",
           "description": "Beschreibung*",
           "spocHeadline": "Single Point of Contact (SPoC)",
           "org": "Organization name",
           "email": "E-Mail Address",
           "name": "Username",
+          "roleMandatory": "Die Rolle des technischen Benutzers ist obligatorisch",
           "error": {
             "select": "Bitte wählen Sie einen Wert.",
+            "username": "Bitte geben Sie den Benutzernamen ein.",
             "description": "Bitte geben Sie eine Beschreibung ein."
           }
         }

src/assets/locales/en/main.json

@@ -1101,16 +1101,20 @@
       "technicalUser": {
         "addOverlay": {
           "service": "Technical User Role",
-          "serviceSubHeading": "Select one of the following service roles:",
+          "note": "<strong>Note:</strong> Selection of both internal and external users for the same service is not possible.",
+          "internalRoles": "Internal Roles :",
+          "externalRoles": "External Roles :",
           "username": "Username*",
           "description": "Description*",
           "spocHeadline": "Single Point of Contact (SPoC)",
           "org": "Organization name",
           "email": "E-Mail Address",
           "name": "Username",
+          "roleMandatory": "Technical user Role is mandatory",
           "error": {
             "select": "Please select a value.",
-            "description": "Please enter a description."
+            "username": "Please enter username.",
+            "description": "Please enter description."
           }
         }
       }

src/components/overlays/AddTechnicalUser/TechnicalUserAddForm.tsx

@@ -20,22 +20,21 @@
 
 import { useState } from 'react'
 import Box from '@mui/material/Box'
-import { useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import InputLabel from '@mui/material/InputLabel'
 import { type Control, Controller, type FieldErrors } from 'react-hook-form'
-import FormHelperText from '@mui/material/FormHelperText'
 import TextField from '@mui/material/TextField'
 import InputAdornment from '@mui/material/InputAdornment'
 import ErrorOutlineOutlinedIcon from '@mui/icons-material/ErrorOutlineOutlined'
-import { Radio, Typography } from '@catena-x/portal-shared-components'
+import { Checkbox, Radio, Typography } from '@catena-x/portal-shared-components'
 import {
   type ServiceAccountRole,
   useFetchServiceAccountRolesQuery,
 } from 'features/admin/serviceApiSlice'
 
 export type DefaultFormFieldValuesType = {
   TechnicalUserName: string
-  TechnicalUserService: string
+  TechnicalUserService: string[]
   TechnicalUserDescription: string
 }
 
@@ -49,7 +48,7 @@ export type FormSelectType = {
   ) => void
   errors: FieldErrors<{
     TechnicalUserName: string
-    TechnicalUserService: string
+    TechnicalUserService: string[]
     TechnicalUserDescription: string
   }>
   name:
@@ -69,7 +68,7 @@ export type FormAddType = {
   ) => void
   errors: FieldErrors<{
     TechnicalUserName: string
-    TechnicalUserService: string
+    TechnicalUserService: string[]
     TechnicalUserDescription: string
   }>
   helperText: string
@@ -92,7 +91,51 @@ const TechnicalUserAddFormSelect = ({
 }: FormSelectType) => {
   const { t } = useTranslation()
   const roles = useFetchServiceAccountRolesQuery().data
-  const [selectedValue, setSelectedValue] = useState<string>()
+  const internalRoles = roles?.filter((role) => role.roleType === 'Internal')
+  const externalRoles = roles?.filter((role) => role.roleType === 'External')
+  const [roleError, setRoleError] = useState<boolean>(false)
+  const [selectedRoles, setSelectedRoles] = useState<string[]>([])
+
+  const selectCheckboxRoles = (role: string, select: boolean) => {
+    if (selectedRoles && selectedRoles[0] === externalRoles?.[0].roleId) {
+      setSelectedRoles([...[], role])
+    } else {
+      const isSelected = selectedRoles?.includes(role)
+      if (isSelected && selectedRoles.length === 1) setRoleError(true)
+      if (!isSelected && select) {
+        setSelectedRoles([...selectedRoles, role])
+      } else if (isSelected && !select) {
+        const oldRoles = [...selectedRoles]
+        oldRoles.splice(oldRoles.indexOf(role), 1)
+        setSelectedRoles([...oldRoles])
+      }
+    }
+  }
+
+  const selectRoles = (role: string, select: boolean, type: string) => {
+    if (type === 'checkbox') {
+      selectCheckboxRoles(role, select)
+    } else if (type === 'radio') {
+      setSelectedRoles([...[], role])
+    }
+    if (selectedRoles.length === 0) setRoleError(false)
+  }
+
+  const selectCheckboxOnChange = (role: string, select: boolean) => {
+    if (selectedRoles && selectedRoles[0] === externalRoles?.[0].roleId) {
+      return [...[], role]
+    } else {
+      const isSelected = selectedRoles?.includes(role)
+      if (isSelected && selectedRoles.length === 1) setRoleError(true)
+      if (!isSelected && select) {
+        return [...selectedRoles, role]
+      } else if (isSelected && !select) {
+        const oldRoles = [...selectedRoles]
+        oldRoles.splice(oldRoles.indexOf(role), 1)
+        return [...oldRoles]
+      }
+    }
+  }
 
   return (
     <Controller
@@ -106,39 +149,70 @@ const TechnicalUserAddFormSelect = ({
               {t('content.addUser.technicalUser.addOverlay.service')}
             </Typography>
           </InputLabel>
-          <Typography variant="body2">
-            {t('content.addUser.technicalUser.addOverlay.serviceSubHeading')}
-          </Typography>
-          {roles?.map((role: ServiceAccountRole) => (
-            <>
-              <Radio
-                key={role.roleId}
-                name="radio-buttons"
-                label={role.roleName}
-                checked={selectedValue === role.roleId}
-                value={role.roleId}
-                onChange={(event) => {
-                  setSelectedValue(event.target.value)
-                  trigger(name)
-                  onChange(event)
-                }}
-                size="small"
-                sx={{
-                  display: 'flex',
-                  fontFamily: 'LibreFranklin-Light !important',
-                }}
-              />
-              <Typography variant="body3" className="roleDescription">
-                {role.roleDescription ?? '-'}
-              </Typography>
-            </>
-          ))}
-          {!!errors[name as keyof Object] && (
-            <FormHelperText
-              sx={{ marginBottom: '23px', color: 'danger.danger' }}
-            >
-              {t('content.addUser.technicalUser.addOverlay.error.select')}
-            </FormHelperText>
+          <Trans>
+            <Typography variant="body2">
+              {t('content.addUser.technicalUser.addOverlay.note')}
+            </Typography>
+          </Trans>
+          <Box sx={{ margin: '10px 0px' }}>
+            <Typography variant="body2" sx={{ fontWeight: 'bold' }}>
+              {t('content.addUser.technicalUser.addOverlay.internalRoles')}
+            </Typography>
+            {internalRoles?.map((role: ServiceAccountRole) => (
+              <>
+                <Checkbox
+                  key={role.roleId}
+                  label={role.roleName}
+                  checked={selectedRoles.indexOf(role.roleId) !== -1}
+                  onChange={(e) => {
+                    selectRoles(role.roleId, e.target.checked, 'checkbox')
+                    trigger(name)
+                    onChange(
+                      selectCheckboxOnChange(role.roleId, e.target.checked)
+                    )
+                  }}
+                  size="small"
+                  value={selectedRoles}
+                />
+                <Typography variant="body3" className="roleDescription">
+                  {role.roleDescription ?? '-'}
+                </Typography>
+              </>
+            ))}
+          </Box>
+          <Box sx={{ margin: '10px 0px' }}>
+            <Typography variant="body2" sx={{ fontWeight: 'bold' }}>
+              {t('content.addUser.technicalUser.addOverlay.externalRoles')}
+            </Typography>
+            {externalRoles?.map((role: ServiceAccountRole) => (
+              <>
+                <Radio
+                  label={role.roleName}
+                  key={role.roleId}
+                  checked={
+                    selectedRoles &&
+                    selectedRoles[0] === externalRoles?.[0].roleId
+                  }
+                  onChange={(e) => {
+                    selectRoles(role.roleId, e.target.checked, 'radio')
+                    trigger(name)
+                    onChange([...[], role.roleId])
+                  }}
+                  name="radio-buttons"
+                  value={selectedRoles}
+                  size="small"
+                />
+
+                <Typography variant="body3" className="roleDescription">
+                  {role.roleDescription ?? '-'}
+                </Typography>
+              </>
+            ))}
+          </Box>
+          {roleError && (
+            <Typography variant="body2" className="file-error-msg">
+              {t('content.addUser.technicalUser.addOverlay.roleMandatory')}
+            </Typography>
           )}
         </Box>
       )}
@@ -220,7 +294,7 @@ export const TechnicalUserAddForm = ({
   control: Control<DefaultFormFieldValuesType>
   errors: FieldErrors<{
     TechnicalUserName: string
-    TechnicalUserService: string
+    TechnicalUserService: string[]
     TechnicalUserDescription: string
   }>
   // Add an ESLint exception until there is a solution
@@ -253,7 +327,7 @@ export const TechnicalUserAddForm = ({
               ),
               label: t('content.addUser.technicalUser.addOverlay.username'),
               helperText: t(
-                'content.addUser.technicalUser.addOverlay.error.description'
+                'content.addUser.technicalUser.addOverlay.error.username'
               ),
             }}
           />
@@ -288,7 +362,6 @@ export const TechnicalUserAddForm = ({
               name: 'TechnicalUserService',
               rules: {
                 required: true,
-                validate: (value: string) => value !== 'none',
               },
             }}
           />

src/components/overlays/AddTechnicalUser/index.tsx

@@ -61,7 +61,7 @@ export const AddTechnicalUser = () => {
         name: formValues.TechnicalUserName,
         description: formValues.TechnicalUserDescription,
         authenticationType: ServiceAccountType.SECRET,
-        roleIds: [formValues.TechnicalUserService],
+        roleIds: formValues.TechnicalUserService,
       }).unwrap()
       setResponse(result)
       setLoading(false)
@@ -77,7 +77,7 @@ export const AddTechnicalUser = () => {
 
   const defaultFormFieldValues = {
     TechnicalUserName: '',
-    TechnicalUserService: 'none',
+    TechnicalUserService: [''],
     TechnicalUserDescription: '',
   }
   const {

src/features/admin/serviceApiSlice.ts

@@ -39,6 +39,7 @@ export interface ServiceAccountRole {
   roleId: string
   roleDescription: string
   roleName: string
+  roleType: string
 }
 
 export interface ServiceAccountCreate {