fix(vexhub): Fix UX/UI bugs for VEX Management - Detail #121

Author: rushk014

pkg/sbombastic-image-vulnerability-scanner/detail/sbombastic.rancher.io.vexhub.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import DetailPage from '@shell/components/Resource/Detail/Page.vue';
 import Masthead from '@shell/components/Resource/Detail/Masthead/index.vue';
+import Date from '@shell/components/formatter/Date.vue';
 import { useStore } from 'vuex';
 import { useI18n } from '@shell/composables/useI18n';
 import UriExternalLink from '@sbombastic-image-vulnerability-scanner/formatters/UriExternalLink.vue';
@@ -21,6 +22,7 @@ const defaultMastheadProps = computed(() => {
       resourceName: vexhub.metadata.name,
       resourceTypeLabel: t('imageScanner.vexManagement.title'),
       resourceTo: vexhub.listLocation,
+      description: t('imageScanner.vexManagement.detail.description'),
       badge: {
         color: vexhub.spec.enabled ? ('bg-success' as 'bg-success') : ('bg-error' as 'bg-error'),
         label: t(`imageScanner.enum.status.${vexhub.spec.enabled ? 'enabled' : 'disabled'}`)
@@ -47,11 +49,17 @@ const defaultMastheadProps = computed(() => {
         },
         {
           label: 'Last sync',
-          value: null
+          value: undefined, // TODO: Add last sync time when backend supports it
         },
         {
           label: 'Updated',
-          value: vexhub.metadata.creationTimestamp
+          value: vexhub.metadata.creationTimestamp,
+          valueOverride: {
+            component: Date,
+            props: {
+              value: vexhub.metadata.creationTimestamp,
+            }
+          }
         }
       ],
       annotations: [],

pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml

@@ -136,6 +136,8 @@ imageScanner:
       enable:
         label: Enabled
         tooltip: Controls whether this VEX entry is active in vulnerability assessments.
+    detail:
+      description: VEX management hub description, if any
   enum:
     cve:
       critical: Critical

pkg/sbombastic-image-vulnerability-scanner/models/sbombastic.rancher.io.vexhub.js

@@ -14,7 +14,8 @@ export default class SbombasticRancherIoVexhub extends SteveModel {
 			'downloadyaml',
 			'viewYaml',
 			'goToViewYaml',
-			'viewInApi'
+			'viewInApi',
+			'showConfiguration',
 		]);
 		out = out.filter((a) => !a?.action || !remove.has(a.action));