[UXE-6210] feat: enhance digital certificates list with status details and tooltip

src/services/digital-certificates-services/v4/list-digital-certificates-service.js

@@ -69,14 +69,21 @@ const adapt = (httpResponse) => {
           trusted_ca_certificate: TRUSTED_CA_CERTIFICATE
         }
 
+        const formattedStatus = item?.status ? parseStatusData(item.status) : '-'
+
+        let statusColumn = {
+          status: formattedStatus,
+          statusDetail: item?.status_detail
+        }
+
         return {
           id: checkIfFieldExist(item?.id, null),
           name: checkIfFieldExist(item?.name),
           issuer: checkIfFieldExist(item?.issuer),
           subjectName: subjectNames,
           type: checkIfFieldExist(typeMap[item?.type]),
           validity: item?.validity ? parseValidityDate(item.validity) : '-',
-          status: item?.status ? parseStatusData(item.status) : '-'
+          status: statusColumn
         }
       })
     : []

src/templates/list-table-block/columns/column-builder.js

@@ -13,6 +13,8 @@ import LanguageIconWithTextColumn from './language-icon-with-text-column.vue'
 import TextWithTagColumn from './text-with-tag-column.vue'
 import CreditCardColumn from './credit-card-column.vue'
 import CountryFlagColumn from './country-flag-column.vue'
+import TagWithTooltip from './tag-with-tooltip'
+
 /**
  * Build and return a specific column based on the given appearance.
  *
@@ -101,6 +103,15 @@ export const columnBuilder = ({ data, columnAppearance, dependencies }) => {
         country: data?.country,
         code: data?.code
       })
+    case 'tag-with-tooltip':
+      return h(TagWithTooltip, {
+        tagProps: {
+          value: data.content,
+          icon: data.icon,
+          severity: data.severity
+        },
+        tooltipText: data.tooltipText
+      })
     default:
       throw new Error('Invalid column appearance')
   }

src/templates/list-table-block/columns/tag-with-tooltip.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <PrimeTag
+      v-tooltip.top="{ value: tooltipText, showDelay: 200 }"
+      v-bind="tagProps"
+      v-if="displayTag"
+    />
+  </div>
+</template>
+
+<script setup>
+  import PrimeTag from 'primevue/tag'
+  import { computed } from 'vue'
+
+  const props = defineProps({
+    tooltipText: String,
+    tagProps: Object
+  })
+
+  const displayTag = computed(() => {
+    return !!Object.keys(props.tagProps).length
+  })
+</script>

src/tests/services/digital-certificates-services/v4/list-digital-certificates-service.test.js

@@ -12,7 +12,8 @@ const fixtures = {
     subject_name: ['Subject 1', 'Subject 2'],
     type: 'edge_certificate',
     validity: new Date(2023, 10, 10),
-    status: 'active'
+    status: 'active',
+    status_detail: ''
   },
   trustedCertificateMock: {
     id: 3,
@@ -21,15 +22,17 @@ const fixtures = {
     subject_name: ['Subject 1', 'Subject 2'],
     type: 'trusted_ca_certificate',
     validity: new Date(2023, 10, 10),
-    status: 'active'
+    status: 'active',
+    status_detail: ''
   },
   certificateWithMissingData: {
     id: 2,
     name: 'Certificate 2',
     subject_name: null,
     type: null,
     validity: null,
-    status: 'pending'
+    status: 'pending',
+    status_detail: 'Pending by error'
   }
 }
 
@@ -90,17 +93,23 @@ describe('DigitalCertificatesServices', () => {
       subjectName: 'Subject 1,Subject 2',
       validity: 'Nov 10, 2023, 12:00 AM',
       status: {
-        content: 'Active',
-        severity: 'success'
+        status: {
+          content: 'Active',
+          severity: 'success'
+        },
+        statusDetail: ''
       }
     })
     expect(parsedDomainMissingValues).toEqual({
       id: 2,
       issuer: '-',
       name: 'Certificate 2',
       status: {
-        content: 'Pending',
-        severity: 'danger'
+        status: {
+          content: 'Pending',
+          severity: 'danger'
+        },
+        statusDetail: 'Pending by error'
       },
       subjectName: '-',
       type: '-',
@@ -141,8 +150,11 @@ describe('DigitalCertificatesServices', () => {
         issuer: '-',
         name: 'Certificate 2',
         status: {
-          content: 'Inactive',
-          severity: 'danger'
+          status: {
+            content: 'Active',
+            severity: 'success'
+          },
+          statusDetail: ''
         },
         subjectName: '-',
         type: '-',
@@ -186,8 +198,11 @@ describe('DigitalCertificatesServices', () => {
         subjectName: 'Subject 1,Subject 2',
         validity: 'Nov 10, 2023, 12:00 AM',
         status: {
-          content: 'Active',
-          severity: 'success'
+          status: {
+            content: 'Active',
+            severity: 'success'
+          },
+          statusDetail: ''
         }
       }
     ])
@@ -216,8 +231,11 @@ describe('DigitalCertificatesServices', () => {
         subjectName: 'Subject 1,Subject 2',
         validity: 'Nov 10, 2023, 12:00 AM',
         status: {
-          content: 'Active',
-          severity: 'success'
+          status: {
+            content: 'Active',
+            severity: 'success'
+          },
+          statusDetail: ''
         }
       }
     ])

src/views/DigitalCertificates/ListView.vue

@@ -71,6 +71,7 @@
     'subject_name',
     'issuer',
     'status',
+    'status_detail',
     'validity',
     'type'
   ]
@@ -140,8 +141,8 @@
         type: 'component',
         component: (columnData) =>
           columnBuilder({
-            data: columnData,
-            columnAppearance: 'tag'
+            data: { ...columnData.status, tooltipText: columnData.statusDetail },
+            columnAppearance: 'tag-with-tooltip'
           })
       }
     ]