feat(plg): add Cody Pro routes to the user nav dropdown

Author: taras-yemets

client/web/src/cody/useCodyProNavLinks.ts

@@ -0,0 +1,22 @@
+import { useMemo } from 'react'
+
+import { CodyProRoutes } from './codyProRoutes'
+import { useSubscriptionSummary } from './management/api/react-query/subscriptions'
+import { getManageSubscriptionPageURL, isEmbeddedCodyProUIEnabled } from './util'
+
+export const useCodyProNavLinks = (): { to: string; label: string }[] => {
+    const { data } = useSubscriptionSummary()
+
+    return useMemo(() => {
+        if (!data || data.userRole !== 'admin') {
+            return []
+        }
+        const items = [{ to: getManageSubscriptionPageURL(), label: 'Manage subscription' }]
+
+        if (isEmbeddedCodyProUIEnabled()) {
+            items.push({ to: CodyProRoutes.ManageTeam, label: 'Manage team' })
+        }
+
+        return items
+    }, [data])
+}

client/web/src/nav/UserNavItem.test.tsx

@@ -2,14 +2,14 @@ import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { MemoryRouter } from 'react-router-dom'
 import sinon from 'sinon'
-import { afterAll, beforeAll, describe, expect, test, vi } from 'vitest'
+import { afterAll, beforeAll, afterEach, describe, expect, test, vi, beforeEach } from 'vitest'
 
 import { NOOP_TELEMETRY_SERVICE } from '@sourcegraph/shared/src/telemetry/telemetryService'
 import { MockedTestProvider } from '@sourcegraph/shared/src/testing/apollo'
 import { AnchorLink, RouterLink, setLinkComponent } from '@sourcegraph/wildcard'
 import { renderWithBrandedContext } from '@sourcegraph/wildcard/src/testing'
 
-import { CodyProApiProvider } from '../cody/management/api/react-query/CodyProApiProvider'
+import * as codyProHooks from '../cody/useCodyProNavLinks'
 
 import { UserNavItem, type UserNavItemProps } from './UserNavItem'
 
@@ -28,6 +28,14 @@ describe('UserNavItem', () => {
         setLinkComponent(AnchorLink)
     })
 
+    const useCodyProNavLinksMock = vi.spyOn(codyProHooks, 'useCodyProNavLinks')
+    beforeEach(() => {
+        useCodyProNavLinksMock.mockReturnValue([])
+    })
+    afterEach(() => {
+        useCodyProNavLinksMock.mockReset()
+    })
+
     const USER: UserNavItemProps['authenticatedUser'] = {
         username: 'alice',
         displayName: 'alice doe',
@@ -58,22 +66,18 @@ describe('UserNavItem', () => {
         emails: [],
     }
 
-    const isSourcegraphDotCom = true
-
     test('simple', () => {
         expect(
             render(
                 <MemoryRouter>
                     <MockedTestProvider>
-                        <CodyProApiProvider isSourcegraphDotCom={isSourcegraphDotCom}>
-                            <UserNavItem
-                                showKeyboardShortcutsHelp={() => undefined}
-                                authenticatedUser={USER}
-                                isSourcegraphDotCom={true}
-                                showFeedbackModal={() => undefined}
-                                telemetryService={NOOP_TELEMETRY_SERVICE}
-                            />
-                        </CodyProApiProvider>
+                        <UserNavItem
+                            showKeyboardShortcutsHelp={() => undefined}
+                            authenticatedUser={USER}
+                            isSourcegraphDotCom={true}
+                            showFeedbackModal={() => undefined}
+                            telemetryService={NOOP_TELEMETRY_SERVICE}
+                        />
                     </MockedTestProvider>
                 </MemoryRouter>
             ).asFragment()
@@ -83,15 +87,13 @@ describe('UserNavItem', () => {
     test('logout click triggers page refresh instead of performing client-side only navigation', async () => {
         const result = renderWithBrandedContext(
             <MockedTestProvider>
-                <CodyProApiProvider isSourcegraphDotCom={isSourcegraphDotCom}>
-                    <UserNavItem
-                        showKeyboardShortcutsHelp={() => undefined}
-                        authenticatedUser={USER}
-                        isSourcegraphDotCom={isSourcegraphDotCom}
-                        showFeedbackModal={() => undefined}
-                        telemetryService={NOOP_TELEMETRY_SERVICE}
-                    />
-                </CodyProApiProvider>
+                <UserNavItem
+                    showKeyboardShortcutsHelp={() => undefined}
+                    authenticatedUser={USER}
+                    isSourcegraphDotCom={true}
+                    showFeedbackModal={() => undefined}
+                    telemetryService={NOOP_TELEMETRY_SERVICE}
+                />
             </MockedTestProvider>
         )
 
@@ -104,4 +106,54 @@ describe('UserNavItem', () => {
         expect(result.locationRef.entries.length).toBe(1)
         expect(result.locationRef.entries.find(({ pathname }) => pathname.includes('sign-out'))).toBe(undefined)
     })
+
+    describe('Cody Pro section', () => {
+        const setup = (isSourcegraphDotCom: boolean) => {
+            renderWithBrandedContext(
+                <MockedTestProvider>
+                    <UserNavItem
+                        showKeyboardShortcutsHelp={() => undefined}
+                        authenticatedUser={USER}
+                        isSourcegraphDotCom={isSourcegraphDotCom}
+                        showFeedbackModal={() => undefined}
+                        telemetryService={NOOP_TELEMETRY_SERVICE}
+                    />
+                </MockedTestProvider>
+            )
+            userEvent.click(screen.getByRole('button'))
+        }
+
+        describe('dotcom', () => {
+            test('renders provided links', () => {
+                const links = [
+                    { to: '/foo', label: 'Foo' },
+                    { to: '/bar', label: 'Bar' },
+                ]
+                useCodyProNavLinksMock.mockReturnValue(links)
+                setup(true)
+
+                for (const link of links) {
+                    const el = screen.getByText(link.label)
+                    expect(el).toHaveAttribute('href', link.to)
+                }
+            })
+
+            test('is not rendered if no links provided', () => {
+                useCodyProNavLinksMock.mockReturnValue([])
+                setup(true)
+
+                expect(useCodyProNavLinksMock).toHaveBeenCalled()
+                expect(screen.queryByText('Cody Pro')).not.toBeInTheDocument()
+            })
+        })
+
+        describe('enterprise', () => {
+            test('is not rendered', () => {
+                setup(false)
+
+                // Cody Pro section is not rendered thus useCodyProNavLinks hook is not called
+                expect(useCodyProNavLinksMock).not.toHaveBeenCalled()
+            })
+        })
+    })
 })

client/web/src/nav/UserNavItem.tsx

@@ -26,8 +26,7 @@ import {
 } from '@sourcegraph/wildcard'
 
 import type { AuthenticatedUser } from '../auth'
-import { CodyProRoutes } from '../cody/codyProRoutes'
-import { useSubscriptionSummary } from '../cody/management/api/react-query/subscriptions'
+import { useCodyProNavLinks } from '../cody/useCodyProNavLinks'
 import { enableDevSettings, isSourcegraphDev, useDeveloperSettings } from '../stores'
 
 import { useNewSearchNavigation } from './new-global-navigation'
@@ -246,26 +245,22 @@ export const UserNavItem: FC<UserNavItemProps> = props => {
 }
 
 const CodyProSection: React.FC = () => {
-    const { data } = useSubscriptionSummary()
+    const links = useCodyProNavLinks()
 
-    if (!data) {
+    if (!links.length) {
         return null
     }
 
     return (
         <>
             <MenuDivider className={styles.dropdownDivider} />
             <MenuHeader className={styles.dropdownHeader}>Cody PRO</MenuHeader>
-            <MenuLink as={Link} to={CodyProRoutes.ManageTeam}>
-                Manage team
-            </MenuLink>
 
-            {/* only team admins can manage subscription */}
-            {data.userRole === 'admin' && (
-                <MenuLink as={Link} to={CodyProRoutes.SubscriptionManage}>
-                    Manage subscription
+            {links.map(({ to, label }) => (
+                <MenuLink as={Link} key={to} to={to}>
+                    {label}
                 </MenuLink>
-            )}
+            ))}
         </>
     )
 }