feat(technical integration): ui enhancement

src/assets/locales/de/main.json

@@ -782,11 +782,13 @@
       "technicalUserSubheadlineSuccess": "Der technische Benutzer wurde mit den folgenden Daten angelegt:",
       "technicalUserSubheadlineError": "Something went wrong. The technical user did not got created due to a system error. Please try it later again or contact your administrator.",
       "chooseUserRole": "Benutzer-Rolle für den Portalzugriff auswählen",
+      "help": "Help",
       "helperText": "Bitte geben Sie alle erforderlichen Informationen ein, bevor Sie fortfahren.",
       "roleDesc": "Role Description Details",
       "technicalUser": {
         "addOverlay": {
           "service": "Dienst",
+          "serviceSubHeading": "Select one service roles:",
           "username": "Username",
           "description": "Beschreibung",
           "spocHeadline": "Single Point of Contact (SPoC)",

src/assets/locales/en/main.json

@@ -780,11 +780,13 @@
       "technicalUserSubheadlineSuccess": "Congratulations, the technical user got successfully created. Below you can find all the relevant details needed to apply the technical user for your service connection. Please ensure that you keep this secrets confidential.",
       "technicalUserSubheadlineError": "Something went wrong. The technical user did not got created due to a system error. Please try it later again or contact your administrator.",
       "chooseUserRole": "Select CX Portal User Role",
+      "help": "Help",
       "helperText": "Please enter all required information before proceeding.",
       "roleDesc": "Role Description Details",
       "technicalUser": {
         "addOverlay": {
           "service": "Service",
+          "serviceSubHeading": "Select one service roles:",
           "username": "Username",
           "description": "Description",
           "spocHeadline": "Single Point of Contact (SPoC)",

src/components/overlays/AddTechnicalUser/TechnicalUserAddForm.scss

@@ -17,7 +17,27 @@
  *
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
-
 .form-input {
   padding: 0;
 }
+
+.helpText {
+  display: flex;
+  color: #0d55af !important;
+  margin-top: 30px !important;
+  text-decoration: none;
+  margin-bottom: 20px !important;
+
+  svg {
+    font-size: 20px;
+  }
+}
+
+.technicalUserForm {
+  display: grid;
+
+  .roleDescription {
+    line-height: 0;
+    margin: 5px 27px 20px;
+  }
+}

src/components/overlays/AddTechnicalUser/TechnicalUserAddForm.tsx

@@ -18,16 +18,16 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
+import { useState } from 'react'
 import Box from '@mui/material/Box'
 import { useTranslation } from 'react-i18next'
 import InputLabel from '@mui/material/InputLabel'
 import { Controller } from 'react-hook-form'
-import Select from '@mui/material/Select'
-import MenuItem from '@mui/material/MenuItem'
 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 {
   ServiceAccountRole,
   useFetchServiceAccountRolesQuery,
@@ -48,44 +48,51 @@ const TechnicalUserAddFormSelect = ({
 }: any) => {
   const { t } = useTranslation()
   const roles = useFetchServiceAccountRolesQuery().data
+  const [selectedValue, setSelectedValue] = useState<string>()
 
   return (
     <Controller
       render={({ field: { onChange, value } }) => (
-        <>
+        <Box className="technicalUserForm">
           <InputLabel error={!!errors[name]} sx={{ marginBottom: '7px' }}>
             {t('content.addUser.technicalUser.addOverlay.service')}
           </InputLabel>
-          <Select
-            error={!!errors[name]}
-            onChange={(event) => {
-              trigger(name)
-              onChange(event)
-            }}
-            value={value}
-            variant="filled"
-            fullWidth
-            sx={{
-              color: value === 'none' ? 'gray' : '',
-            }}
-          >
-            <MenuItem disabled value="none">
-              {t('global.actions.pleaseSelect')}
-            </MenuItem>
-            {roles?.map((role: ServiceAccountRole) => (
-              <MenuItem key={role.roleId} value={role.roleId}>
-                {role.roleName}
-              </MenuItem>
-            ))}
-          </Select>
+          <Typography variant="caption3">
+            {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',
+                }}
+              />
+              {role.roleDescription && (
+                <Typography variant="caption3" className="roleDescription">
+                  {role.roleDescription}
+                </Typography>
+              )}
+            </>
+          ))}
           {!!errors[name] && (
             <FormHelperText
               sx={{ marginBottom: '23px', color: 'danger.danger' }}
             >
               {t('content.addUser.technicalUser.addOverlay.error.select')}
             </FormHelperText>
           )}
-        </>
+        </Box>
       )}
       name={name}
       control={control}

src/components/overlays/AddTechnicalUser/index.tsx

@@ -27,6 +27,7 @@ import {
   CircleProgress,
   Typography,
 } from '@catena-x/portal-shared-components'
+import { Link } from 'react-router-dom'
 import { Box } from '@mui/material'
 import { useDispatch } from 'react-redux'
 import { closeOverlay } from 'features/control/overlay'
@@ -44,6 +45,8 @@ import { UserDetailCard } from 'components/shared/basic/UserDetailInfo/UserDetai
 import { ServerResponseOverlay } from '../ServerResponse'
 import { useFetchOwnUserDetailsQuery } from 'features/admin/userApiSlice'
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline'
+import './TechnicalUserAddForm.scss'
 
 export const AddTechnicalUser = () => {
   const { t } = useTranslation()
@@ -186,15 +189,18 @@ export const AddTechnicalUser = () => {
             onCloseWithIcon={handleDispatch}
           />
           <DialogContent>
+            <Link
+              to="/documentation/?path=docs%2F03.+User+Management%2F03.+Technical+User"
+              target="_blank"
+            >
+              <Typography variant="caption2" className="helpText">
+                <HelpOutlineIcon />
+                {t('content.addUser.help')}
+              </Typography>
+            </Link>
             <TechnicalUserAddForm
               {...{ handleSubmit, control, errors, trigger }}
             />
-            <Box sx={{ paddingTop: '25px' }}>
-              <UserDetailCard
-                cardContentItems={userDetailsData.cardContentItems}
-                variant="wide"
-              />
-            </Box>
           </DialogContent>
           <DialogActions>
             <Button variant="outlined" onClick={handleDispatch}>

src/features/admin/serviceApiSlice.ts

@@ -29,7 +29,7 @@ export enum ServiceAccountType {
 
 export interface ServiceAccountRole {
   roleId: string
-  clientId: string
+  roleDescription: string
   roleName: string
 }