feat(entities-shared): add the get endpoint in the config tables [KHC…

…P-9930]
Kong · Dec 11, 2023 · a56ce8f · a56ce8f
1 parent 4e4cf1a
commit a56ce8f
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 1 deletion.
diff --git a/packages/entities/entities-shared/sandbox/pages/ConfigCardDisplayPage.vue b/packages/entities/entities-shared/sandbox/pages/ConfigCardDisplayPage.vue
@@ -9,6 +9,7 @@
 
     <h2>Format: JSON</h2>
     <ConfigCardDisplay
+      fetch-url="/gateway-manager/ee96fdf4-130b-4e50-bc6e-9f68d6446e1b/gateway-services/15dea234-1725-4f5e-9564-ecb097a8f448"
       format="json"
       :record="record"
     />

diff --git a/...ges/entities/entities-shared/src/components/entity-base-config-card/ConfigCardDisplay.vue b/...ges/entities/entities-shared/src/components/entity-base-config-card/ConfigCardDisplay.vue
@@ -51,8 +51,24 @@
     v-if="format === 'json'"
     class="config-card-display-json"
   >
+    <div
+      v-if="getEndpoint"
+      class="config-card-display-json-endpoint"
+    >
+      <KBadge appearance="get">
+        {{ t('baseConfigCard.endpoints.get') }}
+      </KBadge>
+      <KCodeBlock
+        id="config-card-endpoint-codeblock"
+        :code="getEndpoint"
+        is-single-line
+        language="json"
+        theme="dark"
+      />
+    </div>
     <KCodeBlock
       id="config-card-codeblock"
+      :class="{ 'config-card-display-json-content': getEndpoint }"
       :code="jsonContent"
       language="json"
       theme="dark"
@@ -74,7 +90,7 @@
 
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import { useSlots, watch, ref } from 'vue'
+import { useSlots, watch, ref, computed } from 'vue'
 import type { RecordItem } from '../../types'
 import '@kong-ui-public/copy-uuid/dist/style.css'
 import ConfigCardItem from './ConfigCardItem.vue'
@@ -109,6 +125,10 @@ const props = defineProps({
     required: false,
     default: () => null,
   },
+  fetchUrl: {
+    type: String,
+    required: true,
+  },
 })
 
 const slots = useSlots()
@@ -119,6 +139,17 @@ const hasTooltip = (item: RecordItem): boolean => !!(item.tooltip || slots[`${it
 const jsonContent = ref('')
 const yamlContent = ref('')
 
+const getEndpoint = computed(() => {
+  if (!props.fetchUrl) {
+    return ''
+  }
+  const url = props.fetchUrl.split('/')
+  if (url.length < 2) {
+    return ''
+  }
+  return '/'.concat(url[url.length - 2]).concat('/').concat(url[url.length - 1])
+})
+
 watch(() => props.format, (format: string) => {
   if (format !== 'structured') {
     // remove dates from JSON/YAML config [KHCP-9837]
@@ -139,6 +170,7 @@ watch(() => props.format, (format: string) => {
 <style lang="scss">
 .config-card-display-json,
 .config-card-display-yaml {
+  #config-card-endpoint-codeblock,
   #config-card-codeblock {
     .k-highlighted-code-block {
       code {
@@ -147,6 +179,28 @@ watch(() => props.format, (format: string) => {
     }
   }
 }
+
+.config-card-display-json-content {
+  .k-highlighted-code-block {
+    border-top-left-radius: $kui-border-radius-0 !important;
+    border-top-right-radius: $kui-border-radius-0 !important;
+  }
+}
+
+.config-card-display-json-endpoint {
+  align-items: baseline;
+  border-bottom: $kui-border-width-10 solid $kui-navigation-color-border-divider;
+  border-top-left-radius: $kui-border-radius-40;
+  border-top-right-radius: $kui-border-radius-40;
+  display: flex;
+  padding-left: $kui-space-50;
+  .k-badge {
+    height: 24px;
+  }
+  .k-code-block {
+    flex: auto;
+  }
+}
 </style>
 
 <style lang="scss" scoped>

diff --git a/.../entities/entities-shared/src/components/entity-base-config-card/EntityBaseConfigCard.vue b/.../entities/entities-shared/src/components/entity-base-config-card/EntityBaseConfigCard.vue
@@ -90,6 +90,7 @@
       class="config-card-details-section"
     >
       <ConfigCardDisplay
+        :fetch-url="fetcherUrl"
         :format="configFormat"
         :prop-list-types="propListTypes"
         :property-collections="propertyLists"

diff --git a/packages/entities/entities-shared/src/locales/en.json b/packages/entities/entities-shared/src/locales/en.json
@@ -51,6 +51,9 @@
       "enabledLabel": "Enabled",
       "disabledLabel": "Disabled"
     },
+    "endpoints": {
+      "get": "Get"
+    },
     "copy": {
       "tooltip": "Copy {label}",
       "success": "Copied!"