feat(portal): hide default tag when all tagged [TDX-4666] (#1719)

* feat: hide default tag if all endpoints are tagged [TDX-4666] * test: added test for default tag hidden [TDX-4666] * chore: update comment [TDX-4666]
Kong · Oct 15, 2024 · 5d37392 · 5d37392
1 parent 6306141
commit 5d37392
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 2 deletions.
diff --git a/packages/portal/spec-renderer/fixtures/spec-data.ts b/packages/portal/spec-renderer/fixtures/spec-data.ts
@@ -74,6 +74,46 @@ export const operationsList = [
   specOp,
 ] as Operation[]
 
+export const operationsAllTaggedList = [
+  {
+    path: '/pet',
+    method: 'get',
+    operationId: 'getPets',
+    tags: ['pet'],
+    summary: 'Get all pets',
+    deprecated: false,
+  },
+  // non-unique path
+  {
+    path: '/pet',
+    method: 'post',
+    operationId: 'addPet',
+    tags: ['pet'],
+    summary: 'Add a new pet to the store',
+    deprecated: false,
+  },
+  // different tag
+  {
+    path: '/pet/{petId}',
+    method: 'get',
+    operationId: 'getPetById',
+    tags: ['dog-go'],
+    summary: 'Find pet by ID',
+    deprecated: false,
+  },
+  // untagged
+  {
+    path: '/pet/{petId}',
+    method: 'post',
+    operationId: 'updatePet',
+    tags: ['pet'],
+    summary: 'Update an existing pet',
+    deprecated: false,
+  },
+  // multiple tags
+  specOp,
+] as Operation[]
+
 export const jsonSpec = {
   openapi: '3.0.3',
   info: {

diff --git a/packages/portal/spec-renderer/src/components/SpecOperationsList.cy.ts b/packages/portal/spec-renderer/src/components/SpecOperationsList.cy.ts
@@ -1,7 +1,7 @@
 // Cypress component test spec file
 
 import { h } from 'vue'
-import { operationsList, tags, specOp } from '../../fixtures/spec-data'
+import { operationsList, operationsAllTaggedList, tags, specOp } from '../../fixtures/spec-data'
 import SpecOperationsList from './SpecOperationsList.vue'
 
 describe('<SpecOperationsList />', () => {
@@ -39,6 +39,36 @@ describe('<SpecOperationsList />', () => {
     cy.get('[data-testid="spec-operations-list-untagged-items"] .spec-operations-list-item').should('have.length', 1)
   })
 
+  it('doesnt render default tags section when empty', () => {
+    cy.mount(SpecOperationsList, {
+      props: {
+        isFilterable: true,
+        operations: operationsAllTaggedList,
+        tags,
+      },
+    })
+
+    // renders filter input
+    cy.getTestId('spec-operations-list-filter').should('be.visible')
+
+    // renders collapsible sections of operations with correct count of operations
+    cy.getTestId('spec-operations-list-section-pet').should('be.visible')
+    cy.get('[data-testid="spec-operations-list-section-pet"] .spec-operations-list-item').should('have.length', 4)
+    cy.getTestId('spec-operations-list-section-dog-go').should('be.visible')
+    cy.get('[data-testid="spec-operations-list-section-dog-go"] .spec-operations-list-item').should('have.length', 2)
+    cy.getTestId('spec-operations-list-section-other').should('be.visible')
+    cy.get('[data-testid="spec-operations-list-section-other"] .spec-operations-list-item').should('have.length', 1)
+
+    // reacts correctly to collapse toggle
+    cy.getTestId('spec-operations-list-section-pet-collapse-trigger').click()
+    cy.get('[data-testid="spec-operations-list-section-pet"] .spec-operations-list-item').should('not.be.visible')
+    cy.getTestId('spec-operations-list-section-pet-collapse-trigger').click()
+    cy.get('[data-testid="spec-operations-list-section-pet"] .spec-operations-list-item').should('have.length', 4)
+
+    // doesn't render untagged section
+    cy.getTestId('spec-operations-list-untagged-items').should('not.exist')
+  })
+
   it('renders with correct px width', () => {
     const width = 350
 

diff --git a/packages/portal/spec-renderer/src/components/SpecOperationsList.vue b/packages/portal/spec-renderer/src/components/SpecOperationsList.vue
@@ -75,7 +75,7 @@
 
         <!-- Items without any tags -->
         <div
-          v-if="!isFilterable || !filterQuery"
+          v-if="(!isFilterable || !filterQuery) && untaggedItems.length"
           class="section"
           data-testid="spec-operations-list-untagged-items"
         >