From c703c426030dfacabdaa4e4d24363ddaa39a07fd Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Wed, 4 Dec 2024 13:15:48 -0500
Subject: [PATCH 1/2] fix(spec-renderer): tolowercase is not a function
 [KHCP-14300]

---
 .../spec-renderer/src/components/SpecOperationsList.vue     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/portal/spec-renderer/src/components/SpecOperationsList.vue b/packages/portal/spec-renderer/src/components/SpecOperationsList.vue
index f9c183f642..f42ef969f9 100644
--- a/packages/portal/spec-renderer/src/components/SpecOperationsList.vue
+++ b/packages/portal/spec-renderer/src/components/SpecOperationsList.vue
@@ -32,7 +32,7 @@
           v-for="section in sectionHeadings"
           :key="section"
           class="section-wrapper"
-          :data-testid="`spec-operations-list-section-${section.toLowerCase().replaceAll(' ', '-')}`"
+          :data-testid="`spec-operations-list-section-${String(section).toLowerCase().replaceAll(' ', '-')}`"
         >
           <KCollapse
             :model-value="false"
@@ -41,7 +41,7 @@
             <template #trigger="{ isCollapsed, toggle }">
               <OperationsListSectionHeader
                 :content-element-id="getSectionContentId(section)"
-                :data-testid="`spec-operations-list-section-${section.toLowerCase().replaceAll(' ', '-')}-collapse-trigger`"
+                :data-testid="`spec-operations-list-section-${String(section).toLowerCase().replaceAll(' ', '-')}-collapse-trigger`"
                 :description="getSectionDescription(section)"
                 :is-collapsed="isCollapsed"
                 :name="section"
@@ -256,7 +256,7 @@ const isSelected = (item: OperationListItem): boolean => {
   return !!s && s.path === item.path && s.method === item.method && s.operationId === item.operationId && s.tag === item.tag
 }
 
-const getSectionContentId = (section: string) => `${uid.value}-section-${section.toLowerCase()}`
+const getSectionContentId = (section: string) => `${uid.value}-section-${String(section).toLowerCase()}`
 
 const handleSelection = (item: OperationListItem) => {
   if (!props.disableSelection) {

From 831a7a5f50ede9cd76c6ba6cd9fe93630b15fc4c Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Wed, 4 Dec 2024 13:28:05 -0500
Subject: [PATCH 2/2] fix(spec-renderer): minor fix [KHCP-14300]

---
 .../spec-renderer/src/components/SpecOperationsList.vue   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/portal/spec-renderer/src/components/SpecOperationsList.vue b/packages/portal/spec-renderer/src/components/SpecOperationsList.vue
index f42ef969f9..f57979e667 100644
--- a/packages/portal/spec-renderer/src/components/SpecOperationsList.vue
+++ b/packages/portal/spec-renderer/src/components/SpecOperationsList.vue
@@ -32,7 +32,7 @@
           v-for="section in sectionHeadings"
           :key="section"
           class="section-wrapper"
-          :data-testid="`spec-operations-list-section-${String(section).toLowerCase().replaceAll(' ', '-')}`"
+          :data-testid="`spec-operations-list-section-${section.toLowerCase().replaceAll(' ', '-')}`"
         >
           <KCollapse
             :model-value="false"
@@ -41,7 +41,7 @@
             <template #trigger="{ isCollapsed, toggle }">
               <OperationsListSectionHeader
                 :content-element-id="getSectionContentId(section)"
-                :data-testid="`spec-operations-list-section-${String(section).toLowerCase().replaceAll(' ', '-')}-collapse-trigger`"
+                :data-testid="`spec-operations-list-section-${section.toLowerCase().replaceAll(' ', '-')}-collapse-trigger`"
                 :description="getSectionDescription(section)"
                 :is-collapsed="isCollapsed"
                 :name="section"
@@ -227,7 +227,7 @@ const sectionHeadings = computed<string[]>(() => {
 
   filteredItems.value.forEach((item: OperationListItem) => {
     if (item.tag && !headings.includes(item.tag)) {
-      headings.push(item.tag)
+      headings.push(String(item.tag))
     }
   })
 
@@ -256,7 +256,7 @@ const isSelected = (item: OperationListItem): boolean => {
   return !!s && s.path === item.path && s.method === item.method && s.operationId === item.operationId && s.tag === item.tag
 }
 
-const getSectionContentId = (section: string) => `${uid.value}-section-${String(section).toLowerCase()}`
+const getSectionContentId = (section: string) => `${uid.value}-section-${section.toLowerCase()}`
 
 const handleSelection = (item: OperationListItem) => {
   if (!props.disableSelection) {