chore(API): only return available tabs as an array for the [page] route

Author: wise-king-sullyman

src/pages/text/[version]/[section]/[page].ts

@@ -3,7 +3,6 @@ import type { CollectionEntry, CollectionKey } from 'astro:content'
 import { getCollection } from 'astro:content'
 import { content } from '../../../../content'
 import { kebabCase, getDefaultTab, addDemosOrDeprecated } from '../../../../utils'
-import { tabNames } from '../../../../globals'
 
 export const prerender = false
 
@@ -43,8 +42,8 @@ export const GET: APIRoute = async ({ params }) => {
   const tabsDictionary: Record<string, string[]> = {}
 
   collections.flat().forEach((entry: ContentEntry) => {
-    const { tab, source, tabName } = entry.data
-    const hasTab = !!tab || !!source || !!tabName
+    const { tab, source } = entry.data
+    const hasTab = !!tab || !!source
     let finalTab = tab
 
     if (!hasTab) {
@@ -63,10 +62,6 @@ export const GET: APIRoute = async ({ params }) => {
         tabsDictionary[entry.data.id] = [...tabEntry, finalTab]
       }
     }
-
-    if (tabName) {
-      tabNames[tab] = tabName
-    }
   })
 
   // Sort tabs
@@ -117,12 +112,7 @@ export const GET: APIRoute = async ({ params }) => {
   const tabs = tabsDictionary[matchingEntry.data.id] || []
 
   return new Response(
-    JSON.stringify(
-      tabs.map((tab) => ({
-        slug: tab,
-        name: tabNames[tab] || tab,
-      })),
-    ),
+    JSON.stringify(tabs),
     {
       status: 200,
       headers: {

src/pages/text/__tests__/[version]/[section]/[page].test.ts

@@ -34,14 +34,6 @@ jest.mock('../../../../../utils', () => {
   return mockUtils
 })
 
-/**
- * Mock tab name dictionary for display names
- */
-jest.mock('../../../../../globals', () => {
-  const { mockTabNames } = jest.requireActual('../../testHelpers')
-  return { tabNames: mockTabNames }
-})
-
 beforeEach(() => {
   jest.clearAllMocks()
 })
@@ -58,17 +50,14 @@ it('returns all tabs available for a page', async () => {
   expect(body.length).toBeGreaterThan(0)
 })
 
-it('includes slug and display name for each tab', async () => {
+it('returns tab slugs as strings', async () => {
   const response = await GET({
     params: { version: 'v6', section: 'components', page: 'alert' },
   } as any)
   const body = await response.json()
 
   body.forEach((tab: any) => {
-    expect(tab).toHaveProperty('slug')
-    expect(tab).toHaveProperty('name')
-    expect(typeof tab.slug).toBe('string')
-    expect(typeof tab.name).toBe('string')
+    expect(typeof tab).toBe('string')
   })
 })
 
@@ -79,9 +68,8 @@ it('sorts tabs by priority (React before HTML, design guidelines last)', async (
   const body = await response.json()
 
   // Check that tabs are in expected order (react before html, design guidelines near end)
-  const slugs = body.map((t: any) => t.slug)
-  const reactIndex = slugs.indexOf('react')
-  const htmlIndex = slugs.indexOf('html')
+  const reactIndex = body.indexOf('react')
+  const htmlIndex = body.indexOf('html')
 
   if (reactIndex !== -1 && htmlIndex !== -1) {
     expect(reactIndex).toBeLessThan(htmlIndex)
@@ -138,6 +126,5 @@ it('aggregates tabs from multiple collections for the same page', async () => {
   const body = await response.json()
 
   // Should have tabs from both react-component-docs and core-docs
-  const slugs = body.map((t: any) => t.slug)
-  expect(slugs.length).toBeGreaterThan(1)
+  expect(body.length).toBeGreaterThan(1)
 })

src/pages/text/index.ts

@@ -112,18 +112,9 @@ export const GET: APIRoute = async () => new Response(
           ],
           returns: {
             type: 'array',
-            items: {
-              type: 'object',
-              properties: {
-                slug: 'string',
-                name: 'string',
-              },
-            },
-            example: [
-              { slug: 'react', name: 'React' },
-              { slug: 'react-demos', name: 'React demos' },
-              { slug: 'html', name: 'HTML' },
-            ],
+            items: 'string',
+            description: 'Array of tab slugs',
+            example: ['react', 'react-demos', 'html'],
           },
         },
         {
@@ -173,7 +164,7 @@ export const GET: APIRoute = async () => new Response(
           'GET /text/versions → ["v6"]',
           'GET /text/v6 → ["components", "layouts", ...]',
           'GET /text/v6/components → ["alert", "button", ...]',
-          'GET /text/v6/components/alert → [{slug: "react", name: "React"}, ...]',
+          'GET /text/v6/components/alert → ["react", "html", ...]',
           'GET /text/v6/components/alert/react → (markdown content)',
         ],
       },

src/pages/text/openapi.json.ts

@@ -222,7 +222,7 @@ export const GET: APIRoute = async () => {
         get: {
           summary: 'List tabs for a page',
           description:
-            'Returns an array of available tabs for the specified page with slug and display name',
+            'Returns an array of available tab slugs for the specified page',
           operationId: 'getTabs',
           parameters: [
             {
@@ -259,31 +259,16 @@ export const GET: APIRoute = async () => {
           ],
           responses: {
             '200': {
-              description: 'List of available tabs',
+              description: 'List of available tab slugs',
               content: {
                 'application/json': {
                   schema: {
                     type: 'array',
                     items: {
-                      type: 'object',
-                      properties: {
-                        slug: {
-                          type: 'string',
-                          description: 'Tab identifier',
-                        },
-                        name: {
-                          type: 'string',
-                          description: 'Tab display name',
-                        },
-                      },
-                      required: ['slug', 'name'],
+                      type: 'string',
                     },
                   },
-                  example: [
-                    { slug: 'react', name: 'React' },
-                    { slug: 'react-demos', name: 'React demos' },
-                    { slug: 'html', name: 'HTML' },
-                  ],
+                  example: ['react', 'react-demos', 'html'],
                 },
               },
             },