feat: enhance technical user detail page (#1093)

eclipse-tractusx · Sep 17, 2024 · fd9dca0 · fd9dca0
1 parent 6c4a0f9
commit fd9dca0
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 2 deletions.
diff --git a/src/assets/locales/de/main.json b/src/assets/locales/de/main.json
@@ -954,7 +954,10 @@
           "spoc": "SPOC",
           "permission": "Berechtigungen",
           "companyServiceAccountTypeID": "Firmenservicekontotyp",
-          "authenticationType": "Authentifizierungstyp"
+          "authenticationType": "Authentifizierungstyp",
+          "userType": "Benutzertyp",
+          "serviceEndpoint": "Dienstendpunkt",
+          "missingInfoHint": "Diese Informationen stehen älteren Benutzern möglicherweise nicht zur Verfügung. Erstellen Sie den Benutzer neu, um die vollständigen Details zu erhalten."
         },
         "status": {
           "ACTIVE": "AKTIV",

diff --git a/src/assets/locales/en/main.json b/src/assets/locales/en/main.json
@@ -959,7 +959,10 @@
           "spoc": "SPOC",
           "permission": "Permission",
           "companyServiceAccountTypeID": "Company Service Account Type",
-          "authenticationType": "Authentication Type"
+          "authenticationType": "Authentication Type",
+          "userType": "User Type",
+          "serviceEndpoint": "Service Endpoint",
+          "missingInfoHint": "This information may not be available to older users. Recreate the user to get the complete details."
         },
         "status": {
           "ACTIVE": "ACTIVE",

diff --git a/src/components/pages/TechnicalUserDetails/TechnicalUserDetailsContent.tsx b/src/components/pages/TechnicalUserDetails/TechnicalUserDetailsContent.tsx
@@ -22,6 +22,7 @@ import {
   Button,
   CircleProgress,
   StatusTag,
+  Tooltips,
 } from '@catena-x/portal-shared-components'
 import { useTranslation } from 'react-i18next'
 import { Box } from '@mui/material'
@@ -30,6 +31,7 @@ import {
   type ServiceAccountDetail,
   type ServiceAccountRole,
   useResetCredentialMutation,
+  UserType,
 } from 'features/admin/serviceApiSlice'
 import { OVERLAYS } from 'types/Constants'
 import { useDispatch } from 'react-redux'
@@ -39,6 +41,7 @@ import SyncIcon from '@mui/icons-material/Sync'
 import { type ComponentProps, useState } from 'react'
 import { error, success } from 'services/NotifyService'
 import { ServiceAccountStatus } from 'features/admin/serviceApiSlice'
+import Info from '@mui/icons-material/Info'
 
 export const statusColorMap: Record<
   ServiceAccountStatus,
@@ -49,6 +52,44 @@ export const statusColorMap: Record<
   [ServiceAccountStatus.PENDING_DELETION]: 'pending',
 }
 
+const userTypeMapping = {
+  [UserType.INTERNAL]: 'INTERNAL',
+  [UserType.EXTERNAL]: 'EXTERNAL',
+}
+
+const getValueWithTooltip = (value: string, tooltipTitle: string) => {
+  return (
+    value || (
+      <Tooltips
+        color="dark"
+        tooltipPlacement="bottom-start"
+        tooltipText={tooltipTitle}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            marginRight: '-38px',
+          }}
+        >
+          N/A
+          <Info
+            sx={{
+              width: '2em',
+              fontSize: '19px',
+              color: '#888888',
+              cursor: 'pointer',
+              '&:hover': {
+                color: '#0088CC',
+              },
+            }}
+          />
+        </Box>
+      </Tooltips>
+    )
+  )
+}
+
 export default function TechnicalUserDetailsContent({
   data,
 }: {
@@ -60,6 +101,9 @@ export default function TechnicalUserDetailsContent({
   const [loading, setLoading] = useState<boolean>(false)
   const [newData, setNewData] = useState<ServiceAccountDetail>(data)
 
+  const missingInformationHint = t(
+    'content.usermanagement.technicalUser.detailsPage.missingInfoHint'
+  )
   const connectedData = [
     {
       key: t('content.usermanagement.technicalUser.detailsPage.connectorLink'),
@@ -83,6 +127,14 @@ export default function TechnicalUserDetailsContent({
       ),
       copy: false,
     },
+    {
+      key: t('content.usermanagement.technicalUser.detailsPage.userType'),
+      value: getValueWithTooltip(
+        userTypeMapping[newData.usertype],
+        missingInformationHint
+      ),
+      copy: false,
+    },
     {
       key: 'ID',
       value: newData.serviceAccountId,
@@ -95,6 +147,16 @@ export default function TechnicalUserDetailsContent({
       value: newData.name,
       copy: true,
     },
+    {
+      key: t(
+        'content.usermanagement.technicalUser.detailsPage.serviceEndpoint'
+      ),
+      value: getValueWithTooltip(
+        newData.authenticationServiceUrl,
+        missingInformationHint
+      ),
+      copy: !!newData.authenticationServiceUrl,
+    },
     {
       key: t(
         'content.usermanagement.technicalUser.detailsPage.companyServiceAccountTypeID'

diff --git a/src/features/admin/serviceApiSlice.ts b/src/features/admin/serviceApiSlice.ts
@@ -58,6 +58,7 @@ export enum UserType {
   INTERNAL = 'internal',
   EXTERNAL = 'external',
 }
+
 export interface ServiceAccountListEntry {
   serviceAccountId: string
   clientId: string
@@ -83,6 +84,8 @@ export interface ServiceAccountDetail extends ServiceAccountListEntry {
   connector: ConnectedObject
   offer: ConnectedObject
   companyServiceAccountTypeId: companyServiceAccountType
+  usertype: UserType
+  authenticationServiceUrl: string
 }
 
 export type AppRoleCreate = {