fix(entities-vaults): mask token and app role seceret id fields in vault detail page (#2583)

* fix(entities-vaults): mask token and app role seceret id fields in vault detail page

* fix(entities-vaults): simplify the implementation according to suggestion

Author: hangrao

packages/entities/entities-vaults/src/components/VaultConfigCard.vue

@@ -10,7 +10,20 @@
       @fetch:error="(err: any) => $emit('fetch:error', err)"
       @fetch:success="(entity: any) => $emit('fetch:success', entity)"
       @loading="(val: boolean) => $emit('loading', val)"
-    />
+    >
+      <template #config="{ rowValue }">
+        <ConfigCardItem
+          v-for="propKey in Object.keys(rowValue)"
+          :key="propKey"
+          :item="{
+            key: propKey,
+            value: getPropValue(propKey, rowValue),
+            label: getMetadataLabel(propKey),
+            type: (propKey === 'token' || propKey === 'approle_secret_id') ? ConfigurationSchemaType.Redacted : ConfigurationSchemaType.Text,
+          }"
+        />
+      </template>
+    </EntityBaseConfigCard>
   </div>
 </template>
 
@@ -19,7 +32,10 @@ import {
   EntityBaseConfigCard,
   ConfigurationSchemaSection,
   ConfigurationSchemaType,
+  ConfigCardItem,
   SupportedEntityType,
+  useStringHelpers,
+  useHelpers,
 } from '@kong-ui-public/entities-shared'
 import type { AxiosError } from 'axios'
 import type { PropType } from 'vue'
@@ -69,6 +85,8 @@ const props = defineProps({
 const fetchUrl = computed((): string => endpoints.form[props.config?.app]?.edit)
 
 const { i18n: { t } } = composables.useI18n()
+const { convertKeyToTitle } = useStringHelpers()
+const { getPropValue } = useHelpers()
 
 const configSchema = ref<VaultConfigurationSchema>({
   id: {},
@@ -93,4 +111,8 @@ const configSchema = ref<VaultConfigurationSchema>({
     type: ConfigurationSchemaType.Json,
   },
 })
+
+const getMetadataLabel = (propKey: string) => {
+  return configSchema.value?.[propKey as keyof typeof configSchema.value]?.label || convertKeyToTitle(propKey)
+}
 </script>