From e614095d6c8a7fa00e08b350cdabf11e9e14d48a Mon Sep 17 00:00:00 2001
From: Mo <24444046+schogges@users.noreply.github.com>
Date: Mon, 24 Feb 2025 14:28:31 +0100
Subject: [PATCH] feat(policy-summary): add spec to structured view (#3579)

This is the first part and in a follow-up I'll add more view types for
the config. Here I added the spec in a code block to the structured
view, so the user can still get all information in this view and doesn't
need to switch to YAML.

---

I added a prop to hide the `Copy as K8s` button from the code block. I
think the spec is agnostic to universal and k8s.

---


![image](https://github.com/user-attachments/assets/d7449a69-911f-405f-9be5-2c3e844a1fd0)

Part of #3489

---------

Signed-off-by: schogges <moritz.fleck@konghq.com>
---
 .../app/policies/components/PolicySummary.vue |  7 ++
 .../src/app/policies/locales/en-us/index.yaml |  1 +
 .../x-code-block/ResourceCodeBlock.vue        | 85 ++++++++++---------
 3 files changed, 51 insertions(+), 42 deletions(-)

diff --git a/packages/kuma-gui/src/app/policies/components/PolicySummary.vue b/packages/kuma-gui/src/app/policies/components/PolicySummary.vue
index eeb4d46a4b..92555d651e 100644
--- a/packages/kuma-gui/src/app/policies/components/PolicySummary.vue
+++ b/packages/kuma-gui/src/app/policies/components/PolicySummary.vue
@@ -67,6 +67,12 @@
           </template>
         </DefinitionCard>
       </div>
+
+      <ResourceCodeBlock
+        v-if="policy.spec"
+        :resource="{ spec: policy.spec }"
+        :show-k8s-copy-button="false"
+      />
     </template>
     <template v-else>
       <div>
@@ -83,6 +89,7 @@
 import type { Policy } from '../data'
 import { useI18n, useCan } from '@/app/application'
 import DefinitionCard from '@/app/common/DefinitionCard.vue'
+import ResourceCodeBlock from '@/app/x/components/x-code-block/ResourceCodeBlock.vue'
 
 const { t } = useI18n()
 const can = useCan()
diff --git a/packages/kuma-gui/src/app/policies/locales/en-us/index.yaml b/packages/kuma-gui/src/app/policies/locales/en-us/index.yaml
index 82531eb5c6..cc32848222 100644
--- a/packages/kuma-gui/src/app/policies/locales/en-us/index.yaml
+++ b/packages/kuma-gui/src/app/policies/locales/en-us/index.yaml
@@ -15,6 +15,7 @@ policies:
       navigation:
         policy-detail-view: Overview
         policy-detail-config-view: YAML
+      spec: Spec
     items:
       empty: "This policy type does not exist."
     types:
diff --git a/packages/kuma-gui/src/app/x/components/x-code-block/ResourceCodeBlock.vue b/packages/kuma-gui/src/app/x/components/x-code-block/ResourceCodeBlock.vue
index d0918bf10a..cd39f0649d 100644
--- a/packages/kuma-gui/src/app/x/components/x-code-block/ResourceCodeBlock.vue
+++ b/packages/kuma-gui/src/app/x/components/x-code-block/ResourceCodeBlock.vue
@@ -1,50 +1,49 @@
 <template>
-  <div>
-    <XCodeBlock
-      language="yaml"
-      :code="yamlUniversal"
-      :is-searchable="props.isSearchable"
-      :code-max-height="props.codeMaxHeight"
-      :query="props.query"
-      :is-filter-mode="props.isFilterMode"
-      :is-reg-exp-mode="props.isRegExpMode"
-      @query-change="emit('query-change', $event)"
-      @filter-mode-change="emit('filter-mode-change', $event)"
-      @reg-exp-mode-change="emit('reg-exp-mode-change', $event)"
-    >
-      <template #secondary-actions>
-        <XDisclosure
-          v-slot="{ expanded, toggle }"
+  <XCodeBlock
+    language="yaml"
+    :code="yamlUniversal"
+    :is-searchable="props.isSearchable"
+    :code-max-height="props.codeMaxHeight"
+    :query="props.query"
+    :is-filter-mode="props.isFilterMode"
+    :is-reg-exp-mode="props.isRegExpMode"
+    @query-change="emit('query-change', $event)"
+    @filter-mode-change="emit('filter-mode-change', $event)"
+    @reg-exp-mode-change="emit('reg-exp-mode-change', $event)"
+  >
+    <template #secondary-actions>
+      <XDisclosure
+        v-slot="{ expanded, toggle }"
+      >
+        <KCodeBlockIconButton
+          v-if="props.showK8sCopyButton"
+          :copy-tooltip="t('common.copyKubernetesText')"
+          theme="dark"
+          @click="() => {
+            if (!expanded) {
+              toggle()
+            }
+          }"
         >
-          <KCodeBlockIconButton
-            :copy-tooltip="t('common.copyKubernetesText')"
-            theme="dark"
-            @click="() => {
-              if (!expanded) {
+          <XIcon name="copy" />{{ t('common.copyKubernetesShortText') }}
+        </KCodeBlockIconButton>
+        <XCopyButton
+          format="hidden"
+          v-slot="{ copy }"
+        >
+          <slot
+            :copy="(cb: CopyCallback) => {
+              if (expanded) {
                 toggle()
               }
+              cb((text: object) => copy(toYamlRepresentation(text)), onCopyReject)
             }"
-          >
-            <XIcon name="copy" />{{ t('common.copyKubernetesShortText') }}
-          </KCodeBlockIconButton>
-          <XCopyButton
-            format="hidden"
-            v-slot="{ copy }"
-          >
-            <slot
-              :copy="(cb: CopyCallback) => {
-                if (expanded) {
-                  toggle()
-                }
-                cb((text: object) => copy(toYamlRepresentation(text)), onCopyReject)
-              }"
-              :copying="expanded"
-            />
-          </XCopyButton>
-        </XDisclosure>
-      </template>
-    </XCodeBlock>
-  </div>
+            :copying="expanded"
+          />
+        </XCopyButton>
+      </XDisclosure>
+    </template>
+  </XCodeBlock>
 </template>
 
 <script lang="ts" setup>
@@ -64,12 +63,14 @@ const props = withDefaults(defineProps<{
   query?: string
   isFilterMode?: boolean
   isRegExpMode?: boolean
+  showK8sCopyButton?: boolean
 }>(), {
   codeMaxHeight: undefined,
   isSearchable: false,
   query: '',
   isFilterMode: false,
   isRegExpMode: false,
+  showK8sCopyButton: true,
 })
 
 const emit = defineEmits<{