feat(technical user management): enhance table with status column (#967)

eclipse-tractusx · Aug 12, 2024 · 10b8fd6 · 10b8fd6
1 parent 6c767a3
commit 10b8fd6
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,9 @@
 - Use scroll to top button from shared components
 - Subscription Overlay
   - implement loading state for provider subscription detail overlay
+- Technical User Management
+  - Enhance technical user table by adding StatusTag to the status column
+  - Enhance technical user table status column by adding new status 'pending deletion'
 
 ### Bugfixes
 

diff --git a/DEPENDENCIES b/DEPENDENCIES
@@ -601,7 +601,7 @@ npm/npmjs/@babel/template/7.24.0, MIT, approved, clearlydefined
 npm/npmjs/@babel/traverse/7.24.1, MIT AND (BSD-2-Clause AND ISC AND MIT) AND BSD-2-Clause AND BSD-3-Clause, approved, #13926
 npm/npmjs/@babel/types/7.24.0, MIT, approved, clearlydefined
 npm/npmjs/@bcoe/v8-coverage/0.2.3, ISC AND MIT, approved, clearlydefined
-npm/npmjs/@catena-x/portal-shared-components/3.0.28, Apache-2.0 AND CC-BY-4.0 AND OFL-1.1, approved, #14247
+npm/npmjs/@catena-x/portal-shared-components/3.0.29, Apache-2.0 AND CC-BY-4.0 AND OFL-1.1, approved, #14247
 npm/npmjs/@cspotcode/source-map-support/0.8.1, MIT, approved, clearlydefined
 npm/npmjs/@date-io/core/3.0.0, MIT, approved, clearlydefined
 npm/npmjs/@date-io/date-fns/3.0.0, MIT, approved, #14023

diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
     ]
   },
   "dependencies": {
-    "@catena-x/portal-shared-components": "^3.0.28",
+    "@catena-x/portal-shared-components": "^3.0.29",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@hookform/error-message": "^2.0.1",

diff --git a/src/assets/locales/de/main.json b/src/assets/locales/de/main.json
@@ -923,6 +923,13 @@
           "spoc": "SPOC",
           "permission": "Berechtigungen"
         },
+        "status": {
+          "ACTIVE": "AKTIV",
+          "INACTIVE": "INAKTIV",
+          "PENDING": "AUSSTEHEND",
+          "DELETED": "GELÖSCHT",
+          "PENDING_DELETION": "PENDING_DELETION"
+        },
         "confirmDeleteUser": "Sind Sie sicher, dass Sie user '{{ user }}' löschen möchten?",
         "noteDeleteUser": "Diese Aktion kann nicht rückgängig gemacht werden.",
         "confirmDeleteNotificationTitle": "Das Löschen des Benutzers war erfolgreich.",

diff --git a/src/assets/locales/en/main.json b/src/assets/locales/en/main.json
@@ -927,6 +927,13 @@
           "spoc": "SPOC",
           "permission": "Permission"
         },
+        "status": {
+          "ACTIVE": "ACTIVE",
+          "INACTIVE": "INACTIVE",
+          "PENDING": "PENDING",
+          "DELETED": "DELETED",
+          "PENDING_DELETION": "PENDING_DELETION"
+        },
         "confirmDeleteUser": "Are you sure you want to delete technical user {{ user }}?",
         "noteDeleteUser": "Note: The deletion will be permanently. It is not possible the reactive the user again.",
         "confirmDeleteNotificationTitle": "User deletion was successful.",

diff --git a/src/components/pages/TechnicalUserManagement/TechnicalUserTable.tsx b/src/components/pages/TechnicalUserManagement/TechnicalUserTable.tsx
@@ -21,11 +21,13 @@
 import {
   IconButton,
   PageLoadingTable,
+  StatusTag,
 } from '@catena-x/portal-shared-components'
 import { useTranslation } from 'react-i18next'
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
 import {
   type ServiceAccountListEntry,
+  ServiceAccountStatus,
   ServiceAccountStatusFilter,
   useFetchServiceAccountListQuery,
 } from 'features/admin/serviceApiSlice'
@@ -40,6 +42,13 @@ interface FetchHookArgsType {
   statusFilter: string
   expr: string
 }
+type StatusTagColor =
+  | 'pending'
+  | 'confirmed'
+  | 'declined'
+  | 'label'
+  | 'deleted'
+  | undefined
 
 export const TechnicalUserTable = () => {
   const { t } = useTranslation()
@@ -89,6 +98,14 @@ export const TechnicalUserTable = () => {
     },
   ]
 
+  const statusColorMap: Record<ServiceAccountStatus, StatusTagColor> = {
+    [ServiceAccountStatus.ACTIVE]: 'confirmed',
+    [ServiceAccountStatus.INACTIVE]: 'declined',
+    [ServiceAccountStatus.DELETED]: 'deleted',
+    [ServiceAccountStatus.PENDING]: 'pending',
+    [ServiceAccountStatus.PENDING_DELETION]: 'pending',
+  }
+
   return (
     <div style={{ paddingTop: '30px' }}>
       <PageLoadingTable<ServiceAccountListEntry, FetchHookArgsType>
@@ -126,7 +143,7 @@ export const TechnicalUserTable = () => {
           {
             field: 'serviceAccountType',
             headerName: t('global.field.type'),
-            flex: 1,
+            flex: 1.2,
           },
           {
             field: 'offer',
@@ -138,10 +155,23 @@ export const TechnicalUserTable = () => {
           {
             field: 'isOwner',
             headerName: t('global.field.owner'),
-            flex: 1,
+            flex: 0.8,
             valueGetter: ({ row }: { row: ServiceAccountListEntry }) =>
               row.isOwner ? 'Yes' : 'No',
           },
+          {
+            field: 'status',
+            headerName: t('global.field.status'),
+            flex: 1.2,
+            renderCell: ({ row }: { row: ServiceAccountListEntry }) => (
+              <StatusTag
+                color={statusColorMap[row.status]}
+                label={t(
+                  `content.usermanagement.technicalUser.status.${row.status}`
+                )}
+              />
+            ),
+          },
           {
             field: 'details',
             headerName: t('global.field.details'),

diff --git a/src/features/admin/serviceApiSlice.ts b/src/features/admin/serviceApiSlice.ts
@@ -48,10 +48,19 @@ export interface ServiceAccountCreate {
   roleIds: string[]
 }
 
+export enum ServiceAccountStatus {
+  ACTIVE = 'ACTIVE',
+  INACTIVE = 'INACTIVE',
+  PENDING = 'PENDING',
+  DELETED = 'DELETED',
+  PENDING_DELETION = 'PENDING_DELETION',
+}
+
 export interface ServiceAccountListEntry {
   serviceAccountId: string
   clientId: string
   name: string
+  status: ServiceAccountStatus
   isOwner?: boolean
   offer?: {
     name?: string

diff --git a/yarn.lock b/yarn.lock
@@ -329,10 +329,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@catena-x/portal-shared-components@^3.0.28":
-  version "3.0.28"
-  resolved "https://registry.yarnpkg.com/@catena-x/portal-shared-components/-/portal-shared-components-3.0.28.tgz#efb60e91e34bf9221e565f19b258db913f5712be"
-  integrity sha512-XLHgksVGtg16Vm567NhpM9QZBCBLS9QOTEjr9zqwjI3Rq+7/0iH/7SLtpoHBAeEfKSgBaBX5yktKXdyX59D01A==
+"@catena-x/portal-shared-components@^3.0.29":
+  version "3.0.29"
+  resolved "https://registry.yarnpkg.com/@catena-x/portal-shared-components/-/portal-shared-components-3.0.29.tgz#85f83ce4a3d7b8d19c9719af9cd138a93070269a"
+  integrity sha512-VFzU+Krmt6doZWPLMn91FvqTXbF/bACKkdm7e+cAyGkiarTs4hL1iv4wjtgwSp/Uq0qZUKBL46N6Ouxyw5p3iQ==
   dependencies:
     "@date-io/date-fns" "^3.0.0"
     "@emotion/react" "^11.11.4"