[cache components]: show cache components enabled in DevTools (#85048)

Similar to how in DevTools we show if Turbopack is enabled, this shows
that Cache Components is enabled. In the future, we might have a similar
CTA to suggest enabling the feature. For now it only shows if it's
actually enabled.

Author: ztanner

packages/next/src/next-devtools/dev-overlay/menu/panel-router.tsx

@@ -92,6 +92,11 @@ const MenuPanel = () => {
               value: <ChevronRight />,
               onClick: () => setPanel('turbo-info'),
             },
+        !!process.env.__NEXT_CACHE_COMPONENTS && {
+          title: 'Cache Components is enabled.',
+          label: 'Cache Components',
+          value: 'Enabled',
+        },
         isAppRouter && {
           label: 'Route Info',
           value: <ChevronRight />,

test/development/client-dev-overlay/index.test.ts

@@ -156,3 +156,64 @@ describe('client-dev-overlay', () => {
     }
   })
 })
+
+describe('client-dev-overlay with Cache Components', () => {
+  const { next, isTurbopack } = nextTestSetup({
+    files: {
+      pages: new FileRef(join(__dirname, 'pages')),
+      'next.config.js': `
+        module.exports = {
+          cacheComponents: true,
+        }
+      `,
+    },
+    env: {
+      __NEXT_DEV_INDICATOR_COOLDOWN_MS: '0',
+    },
+  })
+
+  it('should show Cache Components as enabled in the devtools menu', async () => {
+    const browser = await next.browser('/')
+
+    const devToolsIndicator = await assertHasDevToolsIndicator(browser)
+    try {
+      await devToolsIndicator.click()
+    } catch (cause) {
+      const error = new Error('No DevTools Indicator to open.', { cause })
+      throw error
+    }
+
+    const devtoolsMenu = await browser.elementByCss('#nextjs-dev-tools-menu')
+    const menuText = await devtoolsMenu.innerText()
+
+    // Should include Cache Components
+    expect(menuText).toContain('Cache Components')
+    expect(menuText).toContain('Enabled')
+
+    // Should also include Turbopack info
+    if (isTurbopack) {
+      expect(menuText).toMatchInlineSnapshot(`
+       "Issues
+       1
+       Route
+       Static
+       Turbopack
+       Enabled
+       Cache Components
+       Enabled
+       Preferences"
+      `)
+    } else {
+      expect(menuText).toMatchInlineSnapshot(`
+       "Issues
+       1
+       Route
+       Static
+       Try Turbopack
+       Cache Components
+       Enabled
+       Preferences"
+      `)
+    }
+  })
+})