From ebaf3c366019c383f1dfa50d7d409419b558c31c Mon Sep 17 00:00:00 2001
From: Andrew Wylde <andrew.wylde@konghq.com>
Date: Fri, 29 Nov 2024 13:49:43 -0600
Subject: [PATCH] feat(catalog): add support for displaying public labels

---
 cypress/e2e/specs/catalog.spec.ts   | 103 +++++++++++++++++++++++++++-
 package.json                        |   2 +-
 src/components/CatalogItem.vue      |  43 ++++++++++--
 src/components/CatalogTableList.vue |  22 ++++++
 src/constants/feature-flags.ts      |   1 +
 src/locales/ca_ES.ts                |   3 +-
 src/locales/de.ts                   |   3 +-
 src/locales/en.ts                   |   1 +
 src/locales/es_ES.ts                |   3 +-
 src/locales/fr.ts                   |   3 +-
 src/locales/i18n-type.d.ts          |   1 +
 src/stores/product.ts               |   1 +
 src/views/ProductCatalogWrapper.vue |  13 +++-
 yarn.lock                           |  39 ++---------
 14 files changed, 192 insertions(+), 46 deletions(-)

diff --git a/cypress/e2e/specs/catalog.spec.ts b/cypress/e2e/specs/catalog.spec.ts
index bc01ac39..6db04930 100644
--- a/cypress/e2e/specs/catalog.spec.ts
+++ b/cypress/e2e/specs/catalog.spec.ts
@@ -1,5 +1,6 @@
 import { ProductCatalogIndexSourceLatestVersion, SearchResults, SearchResultsDataInner } from '@kong/sdk-portal-js'
 import { generateProducts } from '../support/utils/generateProducts'
+import { FeatureFlags } from '@/constants/feature-flags'
 
 const mockProductSearchQuery = (searchQuery: string) => {
   const searchResults: SearchResultsDataInner[] = ([
@@ -25,7 +26,8 @@ const mockProductSearchQuery = (searchQuery: string) => {
         latest_version: {
           name: versions[0],
           id: crypto.randomUUID()
-        }
+        },
+        public_labels: {}
       }
     }))
 
@@ -197,6 +199,105 @@ describe('Catalog', () => {
         cy.get('.k-table tbody td:nth-of-type(4) a').should('exist').should('contain', 'Documentation')
       })
     })
+
+    describe('Catalog Item Public Labels (feature flag enabled)', () => {
+      beforeEach(() => {
+        cy.mockPublicPortal()
+        cy.mockLaunchDarklyFlags([
+          { name: FeatureFlags.publicLabelsUI, value: true }
+        ])
+        cy.visit('/')
+        // click view toggle to table mode
+        cy.get('[data-testid="view-switcher"]:not(:disabled)').click()
+      })
+
+      it('renders public labels correctly', () => {
+        const productWithLabels = {
+          id: 'test-product',
+          title: 'Test Product',
+          description: 'A test product with public labels',
+          public_labels: {
+            category: 'test',
+            version: '1.0'
+          },
+          showSpecLink: true,
+          documentCount: 1,
+          latestVersion: { name: 'v1' }
+        }
+
+        cy.mockProductsCatalog(1, [productWithLabels])
+
+        cy.visit('/')
+
+        cy.get('.catalog-item').eq(0).within(() => {
+          // Check if the public labels section exists
+          cy.contains('Labels:').should('exist')
+
+          // Check if all public labels are rendered
+          cy.get('.product-public-label').should('have.length', 2)
+
+          // Check the content of each label
+          cy.get('.product-public-label').eq(0).should('contain', 'category: test')
+          cy.get('.product-public-label').eq(1).should('contain', 'version: 1.0')
+        })
+      })
+
+      it('does not render public labels section when product has no labels', () => {
+        const productWithoutLabels = {
+          id: 'test-product-no-labels',
+          title: 'Test Product Without Labels',
+          description: 'A test product without public labels',
+          public_labels: {},
+          showSpecLink: true,
+          documentCount: 1,
+          latestVersion: { name: 'v1' }
+        }
+
+        cy.mockProductsCatalog(1, [productWithoutLabels])
+
+        cy.visit('/')
+
+        cy.get('.catalog-item').eq(0).within(() => {
+          // Check that the public labels section does not exist
+          cy.contains('Labels:').should('not.exist')
+          cy.get('.product-public-label').should('not.exist')
+        })
+      })
+    })
+    describe('Catalog Item Public Labels (feature flag disabled)', () => {
+      beforeEach(() => {
+        cy.mockPublicPortal()
+        cy.mockLaunchDarklyFlags([
+          { name: FeatureFlags.publicLabelsUI, value: false }
+        ])
+        cy.visit('/')
+      })
+
+      it('renders no labels ', () => {
+        const productWithLabels = {
+          id: 'test-product',
+          title: 'Test Product',
+          description: 'A test product with public labels',
+          public_labels: {
+            category: 'test',
+            version: '1.0'
+          },
+          showSpecLink: true,
+          documentCount: 1,
+          latestVersion: { name: 'v1' }
+        }
+
+        cy.mockProductsCatalog(1, [productWithLabels])
+
+        cy.visit('/')
+
+        cy.get('.catalog-item').within(() => {
+          // Check if the public labels section exists
+          cy.contains('Labels:').should('not.exist')
+          cy.get('.product-public-label').should('not.exist')
+        })
+      })
+    })
   })
 
   describe('Catalog versions', () => {
diff --git a/package.json b/package.json
index 825b567d..011478c1 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     "@kong/kong-auth-elements": "2.12.6",
     "@kong/kongponents": "8.127.0",
     "@kong/markdown": "1.7.8",
-    "@kong/sdk-portal-js": "2.15.4",
+    "@kong/sdk-portal-js": "2.16.0",
     "@unhead/vue": "1.11.6",
     "@xstate/vue": "2.0.0",
     "axios": "1.6.7",
diff --git a/src/components/CatalogItem.vue b/src/components/CatalogItem.vue
index c668b5a6..c89d485b 100644
--- a/src/components/CatalogItem.vue
+++ b/src/components/CatalogItem.vue
@@ -18,9 +18,7 @@
     </template>
     <template #body>
       <p class="description color-text_colors-secondary">
-        <template
-          v-if="loading"
-        >
+        <template v-if="loading">
           <KSkeletonBox width="100" />
           <KSkeletonBox width="50" />
           <KSkeletonBox width="75" />
@@ -35,9 +33,7 @@
             v-if="version"
             class="my-2 color-text_colors-secondary"
           >
-            <template
-              v-if="loading"
-            >
+            <template v-if="loading">
               <KSkeletonBox width="2" />
             </template>
             <template v-else>
@@ -52,6 +48,33 @@
             </template>
           </span>
         </li>
+        <li
+          v-if="publicLabelsUIEnabled"
+          class="details-item"
+        >
+          <span
+            v-if="product.publicLabels.length"
+            class="my-2 color-text_colors-secondary"
+          >
+            <template v-if="loading">
+              <KSkeletonBox width="2" />
+            </template>
+            <template v-else>
+              <span class="mr-2">{{ helpText.publicLabels }}</span>
+              <div>
+                <KBadge
+                  v-for="label in product.publicLabels"
+                  :key="label.key"
+                  color="var(--text_colors-secondary)"
+                  background-color="var(--section_colors-accent)"
+                  class="product-public-label"
+                >
+                  {{ label.key }}: {{ label.value }}
+                </KBadge>
+              </div>
+            </template>
+          </span>
+        </li>
         <li class="docs-links">
           <div
             v-if="product.showSpecLink"
@@ -104,6 +127,8 @@
 </template>
 
 <script lang="ts">
+import { FeatureFlags } from '@/constants/feature-flags'
+import useLDFeatureFlag from '@/hooks/useLDFeatureFlag'
 import { CatalogItemModel, useI18nStore } from '@/stores'
 import { PropType } from 'vue'
 
@@ -122,8 +147,12 @@ export default {
   data () {
     const helpText = useI18nStore().state.helpText.catalogItem
 
+    // check for feature flag
+    const publicLabelsUIEnabled = useLDFeatureFlag(FeatureFlags.publicLabelsUI, false)
+
     return {
-      helpText
+      helpText,
+      publicLabelsUIEnabled
     }
   },
   computed: {
diff --git a/src/components/CatalogTableList.vue b/src/components/CatalogTableList.vue
index 92a4656e..48d89d88 100644
--- a/src/components/CatalogTableList.vue
+++ b/src/components/CatalogTableList.vue
@@ -14,6 +14,22 @@
       <template #title="{ rowValue }">
         {{ rowValue }}
       </template>
+      <template #publicLabels="{ row }">
+        <div v-if="publicLabelsUIEnabled">
+          <div
+            v-for="label in row.publicLabels"
+            :key="label.key"
+          >
+            <KBadge
+              color="var(--text_colors-secondary)"
+              background-color="var(--section_colors-accent)"
+              class="product-version"
+            >
+              {{ label.key }}: {{ label.value }}
+            </KBadge>
+          </div>
+        </div>
+      </template>
       <template #latestVersion="{ row }">
         <div>
           <KBadge
@@ -47,6 +63,8 @@
 </template>
 
 <script lang="ts">
+import { FeatureFlags } from '@/constants/feature-flags'
+import useLDFeatureFlag from '@/hooks/useLDFeatureFlag'
 import { useI18nStore, CatalogItemModel } from '@/stores'
 import { defineComponent, ref, computed, watch, PropType } from 'vue'
 import { useRouter } from 'vue-router'
@@ -95,11 +113,15 @@ export default defineComponent({
     }
   },
   data () {
+    const publicLabelsUIEnabled = useLDFeatureFlag(FeatureFlags.publicLabelsUI, false)
+
     return {
+      publicLabelsUIEnabled,
       tableHeaders: [
         { label: 'Title', key: 'title' },
         { label: 'Description', key: 'description' },
         { label: 'Latest Version', key: 'latestVersion' },
+        { label: 'Labels', key: 'publicLabels' },
         { label: 'Details', key: 'links' }
       ]
     }
diff --git a/src/constants/feature-flags.ts b/src/constants/feature-flags.ts
index 5bface8c..c7ebb094 100644
--- a/src/constants/feature-flags.ts
+++ b/src/constants/feature-flags.ts
@@ -1,3 +1,4 @@
 export enum FeatureFlags {
   newMarkdownRender = 'tdx-4186-new-markdown',
+  publicLabelsUI = 'tdx-4824-public-labels-ui'
 }
diff --git a/src/locales/ca_ES.ts b/src/locales/ca_ES.ts
index 98050054..d405d850 100644
--- a/src/locales/ca_ES.ts
+++ b/src/locales/ca_ES.ts
@@ -256,7 +256,8 @@ export const ca_ES: I18nType = {
   catalogItem: {
     latestVersion: 'Última versió:',
     specificationLink: 'Especificació',
-    documentationLink: 'Documentació'
+    documentationLink: 'Documentació',
+    publicLabels: translationNeeded(en.catalogItem.publicLabels)
   },
   catalogTable: {
     specificationLink: 'Especificació',
diff --git a/src/locales/de.ts b/src/locales/de.ts
index 65b8172b..fbdfaf64 100644
--- a/src/locales/de.ts
+++ b/src/locales/de.ts
@@ -256,7 +256,8 @@ export const de: I18nType = {
   catalogItem: {
     latestVersion: 'Aktuelle Version:',
     specificationLink: 'Spezifikation',
-    documentationLink: 'Dokumentation'
+    documentationLink: 'Dokumentation',
+    publicLabels: translationNeeded(en.catalogItem.publicLabels)
   },
   catalogTable: {
     specificationLink: 'Spezifikation',
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 8099e7ed..01855910 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -251,6 +251,7 @@ export const en = {
   },
   catalogItem: {
     latestVersion: 'Latest Version:',
+    publicLabels: 'Labels:',
     specificationLink: 'Specification',
     documentationLink: 'Documentation'
   },
diff --git a/src/locales/es_ES.ts b/src/locales/es_ES.ts
index fbcdfbee..19350a79 100644
--- a/src/locales/es_ES.ts
+++ b/src/locales/es_ES.ts
@@ -256,7 +256,8 @@ export const es_ES: I18nType = {
   catalogItem: {
     latestVersion: 'Última versión: ',
     specificationLink: 'Especificación',
-    documentationLink: 'Documentación'
+    documentationLink: 'Documentación',
+    publicLabels: translationNeeded(en.catalogItem.publicLabels)
   },
   catalogTable: {
     specificationLink: 'Especificación',
diff --git a/src/locales/fr.ts b/src/locales/fr.ts
index f3d079a4..3c6bfd5c 100644
--- a/src/locales/fr.ts
+++ b/src/locales/fr.ts
@@ -256,7 +256,8 @@ export const fr: I18nType = {
   catalogItem: {
     latestVersion: 'Dernière version :',
     specificationLink: 'Spécification',
-    documentationLink: 'Documentation'
+    documentationLink: 'Documentation',
+    publicLabels: translationNeeded(en.catalogItem.publicLabels)
   },
   catalogTable: {
     specificationLink: 'Spécification',
diff --git a/src/locales/i18n-type.d.ts b/src/locales/i18n-type.d.ts
index b3ef73ac..ced91c86 100644
--- a/src/locales/i18n-type.d.ts
+++ b/src/locales/i18n-type.d.ts
@@ -251,6 +251,7 @@ export interface I18nType {
   };
   catalogItem: {
     latestVersion: string;
+    publicLabels: string;
     specificationLink: string;
     documentationLink: string;
   };
diff --git a/src/stores/product.ts b/src/stores/product.ts
index b82303ea..264e156e 100644
--- a/src/stores/product.ts
+++ b/src/stores/product.ts
@@ -14,6 +14,7 @@ export interface CatalogItemModel {
   description: string;
   documentCount: number;
   versionCount: number;
+  publicLabels: Array<{key: string; value: string}>;
 }
 
 export type CustomOperation = Operation & {tag?: string}
diff --git a/src/views/ProductCatalogWrapper.vue b/src/views/ProductCatalogWrapper.vue
index f488bb20..bc7576d4 100644
--- a/src/views/ProductCatalogWrapper.vue
+++ b/src/views/ProductCatalogWrapper.vue
@@ -152,6 +152,16 @@ export default defineComponent({
               })
             }
 
+            // convert source public_labels from key/value to array
+            const publicLabels = source.public_labels
+              ? Object.entries(source.public_labels).map(([key, value]) => {
+                return {
+                  key,
+                  value
+                }
+              })
+              : []
+
             return {
               id: source.id,
               title: source.name,
@@ -159,7 +169,8 @@ export default defineComponent({
               showSpecLink,
               description: source.description,
               documentCount: source.document_count,
-              versionCount: source.version_count
+              versionCount: source.version_count,
+              publicLabels
             }
           }))
           totalCount.value = meta.page.total
diff --git a/yarn.lock b/yarn.lock
index 6e3b8503..016012c6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1207,10 +1207,10 @@
     mermaid "^10.9.1"
     uuid "^10.0.0"
 
-"@kong/sdk-portal-js@2.15.4":
-  version "2.15.4"
-  resolved "https://registry.yarnpkg.com/@kong/sdk-portal-js/-/sdk-portal-js-2.15.4.tgz#0020c4b2f892df656bda615e078f8ad7db908037"
-  integrity sha512-zRgjA518C9g5Pyv3oksHK/f4MastP/KBbkgMahUe9LdOWrUFdUScy0jC/8W1PihK6Szd8VhNVgScSfG/2OYy+A==
+"@kong/sdk-portal-js@2.16.0":
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/@kong/sdk-portal-js/-/sdk-portal-js-2.16.0.tgz#0a780ae6a3bf910a1025b57996e381b0ba1cd896"
+  integrity sha512-+BGhyen5I9eB+HgQlavWa0H9+3vr/YMpPV3j9y49wTWExZfvOK6Dm3AH7R1o4wUIGu0ap7D8j92rAW1Tq5DgZA==
   dependencies:
     axios "1.7.4"
 
@@ -11781,16 +11781,7 @@ stream@^0.0.2:
   dependencies:
     emitter-component "^1.1.1"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -11858,7 +11849,7 @@ stringify-object@^3.2.1, stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -11872,13 +11863,6 @@ strip-ansi@^3.0.0:
   dependencies:
     ansi-regex "^2.0.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -13054,7 +13038,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -13072,15 +13056,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"