feat(entities-shared): improve display for config card json text (#2040)

Author: Justineo

packages/entities/entities-shared/fixtures/mockData.ts

@@ -119,6 +119,7 @@ export const gatewayServiceRecord = {
   tls_verify: true,
   updated_at: 1686157266,
   write_timeout: 60000,
+  extra: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
 }
 
 export const emptyKey = 'preferred_chain'

packages/entities/entities-shared/sandbox/pages/ConfigCardItemPage.vue

@@ -133,6 +133,21 @@
       }"
     />
 
+    <h2>JSON Text</h2>
+    <ConfigCardItem
+      :item="{
+        type: ConfigurationSchemaType.Text,
+        key: 'json-code',
+        label: 'Cat Data',
+        value: {
+          name: 'TK Meowstersmith',
+          species: 'Awesome cat',
+          color: 'All black',
+          awesome: 'true',
+        }
+      }"
+    />
+
     <h2>JSON Object Array</h2>
     <ConfigCardItem
       :item="{

packages/entities/entities-shared/src/components/entity-base-config-card/ConfigCardItem.cy.ts

@@ -246,6 +246,31 @@ describe('<ConfigCardItem />', () => {
       }
     })
 
+    it('renders JSON text field correctly', () => {
+      const obj: Record<string, string> = {
+        name: 'TK Meowstersmith',
+        species: 'Awesome cat',
+        color: 'All black',
+        awesome: 'true',
+      }
+      const item: RecordItem = {
+        type: ConfigurationSchemaType.Text,
+        key: 'cat_data',
+        label: 'Cat Data',
+        value: obj,
+      }
+
+      cy.mount(ConfigCardItem, {
+        props: {
+          item,
+        },
+      })
+
+      cy.get('.config-card-details-row').should('be.visible')
+      cy.getTestId(`${item.key}-json-code`).should('be.visible')
+      cy.getTestId(`${item.key}-json-code`).should('contain.text', JSON.stringify(obj, null, 2))
+    })
+
     it('renders a JSON Array field correctly', () => {
       const obj: Record<string, string>[] = [{
         name: 'TK Meowstersmith',

packages/entities/entities-shared/src/components/entity-base-config-card/ConfigCardItem.vue

@@ -68,7 +68,7 @@
             </div>
 
             <div
-              v-if="componentAttrsData.additionalComponent === 'KCopy'"
+              v-else-if="componentAttrsData.additionalComponent === 'KCopy'"
               class="copy-uuid-array"
               :data-testid="`${item.key}-copy-uuid-array`"
             >
@@ -98,7 +98,7 @@
             </div>
 
             <div
-              v-if="componentAttrsData.additionalComponent === 'JsonCardItem'"
+              v-else-if="componentAttrsData.additionalComponent === 'JsonCardItem'"
               :data-testid="`${props.item.key}-json-array-content`"
             >
               <JsonCardItem
@@ -131,7 +131,7 @@
 
 <script setup lang="ts">
 import type { PropType, Ref } from 'vue'
-import { computed, ref, useSlots } from 'vue'
+import { computed, ref, useId, useSlots } from 'vue'
 import type { RecordItem, ComponentAttrsData } from '../../types'
 import { ConfigurationSchemaType } from '../../types'
 import composables from '../../composables'
@@ -162,6 +162,8 @@ const emit = defineEmits<{
   (e: 'navigation-click', record: RecordItem): void,
 }>()
 
+const uniqueId = useId()
+
 const slots = useSlots()
 const { i18n: { t, formatUnixTimeStamp } } = composables.useI18n()
 
@@ -306,6 +308,20 @@ const componentAttrsData = computed((): ComponentAttrsData => {
       }
 
     default:
+      // Before fallback to plain text, check if the value is an object, if so, render it as a code block
+      if (props.item.value != null && typeof props.item.value === 'object') {
+        return {
+          tag: 'KCodeBlock',
+          attrs: {
+            'data-testid': `${props.item.key}-json-code`,
+            id: `json-code-${uniqueId}`,
+            language: 'json',
+            code: JSON.stringify(props.item.value, null, '  '),
+            maxHeight: '480px',
+            showLineNumbers: false,
+          },
+        }
+      }
       return {
         tag: 'div',
         attrs: {

packages/entities/entities-shared/src/components/entity-base-config-card/EntityBaseConfigCard.cy.ts

@@ -29,6 +29,7 @@ const customizedKey = 'ca_certificates'
 const customTooltip = 'Custom tooltip'
 const customLabel = 'CA Certificates'
 const unconfiguredKey = 'client_certificate'
+const untypedKey = 'extra'
 const configSchema: ConfigurationSchema = {
   protocol: {
     section: ConfigurationSchemaSection.Basic,
@@ -68,6 +69,9 @@ const configSchema: ConfigurationSchema = {
     order: 6,
     section: ConfigurationSchemaSection.Advanced,
   },
+  [untypedKey]: {
+    order: 5,
+  },
   [unconfiguredKey]: {
     // leave this object empty for tests!!
   },
@@ -221,7 +225,16 @@ describe('<EntityBaseConfigCard />', () => {
       // no tooltip
       cy.getTestId(`${unconfiguredKey}-label-tooltip`).should('not.exist')
       // type defaults to plain text
-      cy.getTestId(`${unconfiguredKey}-plain-text`).should('be.visible')
+      cy.getTestId(`${unconfiguredKey}-json-code`).should('be.visible')
+
+      // section defaults to Advanced (and hidden defaults to false)
+      cy.get(`[data-testid="config-card-details-advanced-props"] [data-testid="${untypedKey}-label"]`).should('exist')
+      // title cases key for the label
+      cy.getTestId(`${untypedKey}-label`).should('contain.text', convertKeyToTitle(untypedKey))
+      // no tooltip
+      cy.getTestId(`${untypedKey}-label-tooltip`).should('not.exist')
+      // type defaults to plain text
+      cy.getTestId(`${untypedKey}-plain-text`).should('be.visible')
     })
 
     it('allows customizing label and label tooltip', () => {