fix(plg): Cody Pro routes conditions & add links to the user nav dropdown (#63378)

Closes https://github.com/sourcegraph/sourcegraph/issues/63264

1. Adds Cody Pro section to the user nav dropdown on dotcom:
- team admins have links to "cody/subscription/manage" and
"cody/team/manage" pages
   - team members have only link only to the "cody/team/manage" page
2. Makes subscription management page only available for team admins. If
team members try to navigate this page by changing the URL, they will be
redirected to the "/cody/manage" page.
- Makes "Manage subscription" link on the "/cody/manage" available only
for the team admins (previously - any Pro user)
3. Lifts `QueryClientProvider` (wrapper around react-query
`ClientProvider` higher in the component tree so that Cody Pro API query
and mutations can be used not only on the Cody Pro routes.


[Design](https://www.figma.com/design/FMSdn1oKccJRHQPgf7053o/Cody-PLG-GA?node-id=5351-19126&t=LfNQR7vUCJhlNvyT-4)

| Role | Screenshot |
|--|--|
|Admin|<img width="1605" alt="Screenshot 2024-06-20 at 12 57 13"
src="https://github.com/sourcegraph/sourcegraph/assets/25318659/e7b995fd-4322-4f7f-86bb-c7027cacd644"><img
width="1605" alt="Screenshot 2024-06-20 at 13 10 28"
src="https://github.com/sourcegraph/sourcegraph/assets/25318659/84be111c-76e2-4b14-9b73-ebdd5f8cbb9a">|
|Member|<img width="1605" alt="Screenshot 2024-06-20 at 12 56 50"
src="https://github.com/sourcegraph/sourcegraph/assets/25318659/aefd8b3b-29fe-4957-87ee-b493eb489922"><img
width="1605" alt="Screenshot 2024-06-20 at 13 09 51"
src="https://github.com/sourcegraph/sourcegraph/assets/25318659/8209e7a0-4deb-4681-9f6b-3cfde8110842">|




<!-- 💡 To write a useful PR description, make sure that your description
covers:
- WHAT this PR is changing:
    - How was it PREVIOUSLY.
    - How it will be from NOW on.
- WHY this PR is needed.
- CONTEXT, i.e. to which initiative, project or RFC it belongs.

The structure of the description doesn't matter as much as covering
these points, so use
your best judgement based on your context.
Learn how to write good pull request description:
https://www.notion.so/sourcegraph/Write-a-good-pull-request-description-610a7fd3e613496eb76f450db5a49b6e?pvs=4
-->


## Test plan
- Start Sourcegraph instance in dotcom mode
  - sign in as a Cody Pro team admin 
- ensure that "Manage subscription" and "Manage team" links are present
in the user nav dropdown
    - ensure "/cody/manage" page has "Manage subscription" link
  - sign in as a Cody Pro team member (not admin)
    - ensure "Manage team" link is present in the user nav dropdown
    - navigate to "/cody/subscription/manage/ page by changing the URL
    - ensure you've been redirected to the "/cody/manage" page
    - ensure "/cody/manage" page doesn't have "Manage subscription" link
- start Sourcegraph in the enterprise mode
  - ensure the mentioned links are not rendered
<!-- All pull requests REQUIRE a test plan:
https://docs-legacy.sourcegraph.com/dev/background-information/testing_principles
-->


## Changelog

<!--
1. Ensure your pull request title is formatted as: $type($domain): $what
2. Add bullet list items for each additional detail you want to cover
(see example below)
3. You can edit this after the pull request was merged, as long as
release shipping it hasn't been promoted to the public.
4. For more information, please see this how-to
https://www.notion.so/sourcegraph/Writing-a-changelog-entry-dd997f411d524caabf0d8d38a24a878c?

Audience: TS/CSE > Customers > Teammates (in that order).

Cheat sheet: $type = chore|fix|feat $domain:
source|search|ci|release|plg|cody|local|...
-->

<!--
Example:

Title: fix(search): parse quotes with the appropriate context
Changelog section:

## Changelog

- When a quote is used with regexp pattern type, then ...
- Refactored underlying code.
-->

Author: taras-yemets

client/web/BUILD.bazel

@@ -240,7 +240,7 @@ ts_project(
         "src/cody/management/UseCodyInEditorSection.tsx",
         "src/cody/management/api/client.ts",
         "src/cody/management/api/components/CodyProApiClient.ts",
-        "src/cody/management/api/react-query/QueryClientProvider.tsx",
+        "src/cody/management/api/react-query/CodyProApiProvider.tsx",
         "src/cody/management/api/react-query/callCodyProApi.ts",
         "src/cody/management/api/react-query/invites.ts",
         "src/cody/management/api/react-query/queryKeys.ts",

client/web/src/LegacySourcegraphWebApp.tsx

@@ -41,6 +41,7 @@ import { WildcardThemeContext, type WildcardTheme } from '@sourcegraph/wildcard'
 import { authenticatedUser as authenticatedUserSubject, type AuthenticatedUser, authenticatedUserValue } from './auth'
 import { getWebGraphQLClient } from './backend/graphql'
 import { isBatchChangesExecutionEnabled } from './batches'
+import { CodyProApiProvider } from './cody/management/api/react-query/CodyProApiProvider'
 import { ComponentsComposer } from './components/ComponentsComposer'
 import { ErrorBoundary } from './components/ErrorBoundary'
 import { FeatureFlagsLocalOverrideAgent } from './featureFlags/FeatureFlagsProvider'
@@ -260,6 +261,7 @@ export class LegacySourcegraphWebApp extends React.Component<StaticAppConfig, Le
                     <SearchResultsCacheProvider />,
                     <SearchQueryStateStoreProvider useSearchQueryState={useNavbarQueryState} />,
                     <LegacyRouteContextProvider context={legacyContext} />,
+                    <CodyProApiProvider isSourcegraphDotCom={window.context.sourcegraphDotComMode} />,
                     /* eslint-enable react/no-children-prop, react/jsx-key */
                 ]}
             >

client/web/src/SourcegraphWebApp.tsx

@@ -29,6 +29,7 @@ import type { TelemetryV2Props } from '@sourcegraph/shared/src/telemetry'
 import { WildcardThemeContext, type WildcardTheme } from '@sourcegraph/wildcard'
 
 import { authenticatedUser as authenticatedUserSubject, type AuthenticatedUser, authenticatedUserValue } from './auth'
+import { CodyProApiProvider } from './cody/management/api/react-query/CodyProApiProvider'
 import { ComponentsComposer } from './components/ComponentsComposer'
 import { ErrorBoundary, RouteError } from './components/ErrorBoundary'
 import { FeatureFlagsLocalOverrideAgent } from './featureFlags/FeatureFlagsProvider'
@@ -283,6 +284,7 @@ export const SourcegraphWebApp: FC<SourcegraphWebAppProps> = props => {
                         ...props,
                     }}
                 />,
+                <CodyProApiProvider isSourcegraphDotCom={props.isSourcegraphDotCom} />,
                 /* eslint-enable react/no-children-prop, react/jsx-key */
             ]}
         >

client/web/src/cody/codyProRoutes.tsx

@@ -4,7 +4,6 @@ import { lazyComponent } from '@sourcegraph/shared/src/util/lazyComponent'
 
 import { type LegacyLayoutRouteContext, LegacyRoute } from '../LegacyRouteContext'
 
-import { QueryClientProvider } from './management/api/react-query/QueryClientProvider'
 import { isEmbeddedCodyProUIEnabled } from './util'
 
 export enum CodyProRoutes {
@@ -78,9 +77,5 @@ interface CodyProPageProps extends Pick<LegacyLayoutRouteContext, 'authenticated
  */
 const CodyProPage: React.FC<CodyProPageProps> = props => {
     const Component = routeComponents[props.path]
-    return (
-        <QueryClientProvider>
-            <Component authenticatedUser={props.authenticatedUser} telemetryRecorder={props.telemetryRecorder} />
-        </QueryClientProvider>
-    )
+    return <Component authenticatedUser={props.authenticatedUser} telemetryRecorder={props.telemetryRecorder} />
 }

client/web/src/cody/management/CodyManagementPage.tsx

@@ -175,7 +175,7 @@ export const CodyManagementPage: React.FunctionComponent<CodyManagementPageProps
                                 )}
                             </Text>
                         </div>
-                        {isUserOnProTier && (
+                        {isAdmin && (
                             <div>
                                 <ButtonLink
                                     variant="primary"

client/web/src/cody/management/api/react-query/CodyProApiProvider.tsx

@@ -0,0 +1,32 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+// Tweak the default queries and mutations behavior.
+// See defaults here: https://tanstack.com/query/latest/docs/framework/react/guides/important-defaults
+const queryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            // If query failed, it's not likely that refetching it will succeed, so don't retry.
+            retry: false,
+        },
+        mutations: {
+            // If query failed, it's not likely that refetching it will succeed, so don't retry.
+            retry: false,
+        },
+    },
+})
+
+/**
+ * CodyProApiProvider wraps its children with the react-query QueryClientProvider.
+ * It is used to access the Cody Pro API and is only utilized on dotcom.
+ * In enterprise mode, it simply passes through the children.
+ */
+export const CodyProApiProvider: React.FC<React.PropsWithChildren<{ isSourcegraphDotCom: boolean }>> = ({
+    isSourcegraphDotCom,
+    children,
+}) => {
+    if (!isSourcegraphDotCom) {
+        return <>{children}</>
+    }
+
+    return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+}

client/web/src/cody/management/api/react-query/QueryClientProvider.tsx

@@ -20,7 +20,7 @@ import type { LegacyLayoutRouteContext } from '../../../../LegacyRouteContext'
 import { CodyProRoutes } from '../../../codyProRoutes'
 import { PageHeaderIcon } from '../../../components/PageHeaderIcon'
 import { USER_CODY_PLAN } from '../../../subscription/queries'
-import { useCurrentSubscription } from '../../api/react-query/subscriptions'
+import { useCurrentSubscription, useSubscriptionSummary } from '../../api/react-query/subscriptions'
 
 import { InvoiceHistory } from './InvoiceHistory'
 import { PaymentDetails } from './PaymentDetails'
@@ -38,6 +38,7 @@ const AuthenticatedCodySubscriptionManagePage: React.FC<Props> = ({ telemetryRec
         error: useCodyPlanError,
         data: userCodyPlanData,
     } = useQuery<UserCodyPlanResult, UserCodyPlanVariables>(USER_CODY_PLAN, {})
+    const subscriptionSummaryQuery = useSubscriptionSummary()
 
     useEffect(
         function recordViewEvent() {
@@ -46,7 +47,7 @@ const AuthenticatedCodySubscriptionManagePage: React.FC<Props> = ({ telemetryRec
         [telemetryRecorder]
     )
 
-    if (userCodyPlanLoading) {
+    if (userCodyPlanLoading || subscriptionSummaryQuery.isLoading) {
         return <LoadingSpinner />
     }
 
@@ -55,18 +56,32 @@ const AuthenticatedCodySubscriptionManagePage: React.FC<Props> = ({ telemetryRec
         return null
     }
 
+    if (subscriptionSummaryQuery.isError) {
+        logger.error('Failed to fetch Cody subscription summary', subscriptionSummaryQuery.error)
+        return null
+    }
+
     const subscriptionData = userCodyPlanData?.currentUser?.codySubscription
     if (!subscriptionData) {
         logger.error('Cody subscription data is not available.')
         return null
     }
 
+    if (!subscriptionSummaryQuery.data) {
+        logger.error('Cody subscription summary is not available.')
+        return null
+    }
+
     // This page only applies to users who have a Cody Pro subscription to manage.
     // Otherwise, direct them to the ./new page to sign up.
     if (subscriptionData.plan !== CodySubscriptionPlan.PRO) {
         return <Navigate to={CodyProRoutes.NewProSubscription} replace={true} />
     }
 
+    if (subscriptionSummaryQuery.data.userRole !== 'admin') {
+        return <Navigate to={CodyProRoutes.Manage} replace={true} />
+    }
+
     return (
         <Page className="d-flex flex-column">
             <PageTitle title="Manage subscription" />

client/web/src/cody/management/subscription/manage/CodySubscriptionManagePage.tsx

@@ -9,6 +9,8 @@ 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 { UserNavItem, type UserNavItemProps } from './UserNavItem'
 
 vi.mock('../util/license', () => ({
@@ -56,18 +58,22 @@ describe('UserNavItem', () => {
         emails: [],
     }
 
+    const isSourcegraphDotCom = true
+
     test('simple', () => {
         expect(
             render(
                 <MemoryRouter>
                     <MockedTestProvider>
-                        <UserNavItem
-                            showKeyboardShortcutsHelp={() => undefined}
-                            authenticatedUser={USER}
-                            isSourcegraphDotCom={true}
-                            showFeedbackModal={() => undefined}
-                            telemetryService={NOOP_TELEMETRY_SERVICE}
-                        />
+                        <CodyProApiProvider isSourcegraphDotCom={isSourcegraphDotCom}>
+                            <UserNavItem
+                                showKeyboardShortcutsHelp={() => undefined}
+                                authenticatedUser={USER}
+                                isSourcegraphDotCom={true}
+                                showFeedbackModal={() => undefined}
+                                telemetryService={NOOP_TELEMETRY_SERVICE}
+                            />
+                        </CodyProApiProvider>
                     </MockedTestProvider>
                 </MemoryRouter>
             ).asFragment()
@@ -77,13 +83,15 @@ describe('UserNavItem', () => {
     test('logout click triggers page refresh instead of performing client-side only navigation', async () => {
         const result = renderWithBrandedContext(
             <MockedTestProvider>
-                <UserNavItem
-                    showKeyboardShortcutsHelp={() => undefined}
-                    authenticatedUser={USER}
-                    isSourcegraphDotCom={true}
-                    showFeedbackModal={() => undefined}
-                    telemetryService={NOOP_TELEMETRY_SERVICE}
-                />
+                <CodyProApiProvider isSourcegraphDotCom={isSourcegraphDotCom}>
+                    <UserNavItem
+                        showKeyboardShortcutsHelp={() => undefined}
+                        authenticatedUser={USER}
+                        isSourcegraphDotCom={isSourcegraphDotCom}
+                        showFeedbackModal={() => undefined}
+                        telemetryService={NOOP_TELEMETRY_SERVICE}
+                    />
+                </CodyProApiProvider>
             </MockedTestProvider>
         )
 

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

@@ -26,6 +26,8 @@ import {
 } from '@sourcegraph/wildcard'
 
 import type { AuthenticatedUser } from '../auth'
+import { CodyProRoutes } from '../cody/codyProRoutes'
+import { useSubscriptionSummary } from '../cody/management/api/react-query/subscriptions'
 import { enableDevSettings, isSourcegraphDev, useDeveloperSettings } from '../stores'
 
 import { useNewSearchNavigation } from './new-global-navigation'
@@ -130,6 +132,7 @@ export const UserNavItem: FC<UserNavItemProps> = props => {
                             <MenuHeader className={styles.dropdownHeader}>
                                 Signed in as <strong>@{authenticatedUser.username}</strong>
                             </MenuHeader>
+                            {isSourcegraphDotCom && <CodyProSection />}
                             <MenuDivider className={styles.dropdownDivider} />
                             <MenuLink as={Link} to={authenticatedUser.settingsURL!}>
                                 Settings
@@ -241,3 +244,28 @@ export const UserNavItem: FC<UserNavItemProps> = props => {
         </>
     )
 }
+
+const CodyProSection: React.FC = () => {
+    const { data } = useSubscriptionSummary()
+
+    if (!data) {
+        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
+                </MenuLink>
+            )}
+        </>
+    )
+}