feat(plg): Invite users on Cody Dashboard (#63375)

client/web/BUILD.bazel

@@ -231,6 +231,7 @@ ts_project(
         "src/cody/dashboard/UpsellImage.tsx",
         "src/cody/editorGroups.ts",
         "src/cody/invites/AcceptInviteBanner.tsx",
+        "src/cody/invites/InviteUsers.tsx",
         "src/cody/invites/useInviteParams.ts",
         "src/cody/invites/useInviteState.ts",
         "src/cody/isCodyEnabled.tsx",
@@ -282,7 +283,6 @@ ts_project(
         "src/cody/subscription/queries.tsx",
         "src/cody/switch-account/CodySwitchAccountPage.tsx",
         "src/cody/team/CodyManageTeamPage.tsx",
-        "src/cody/team/InviteUsers.tsx",
         "src/cody/team/TeamMemberList.tsx",
         "src/cody/upsell/ChatBrandIcon.tsx",
         "src/cody/upsell/CodyUpsellPage.tsx",

client/web/src/cody/team/InviteUsers.tsx → client/web/src/cody/invites/InviteUsers.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react'
+import React, { useState, useCallback, useMemo } from 'react'
 
 import { pluralize } from '@sourcegraph/common'
 import type { TelemetryV2Props } from '@sourcegraph/shared/src/telemetry'
@@ -7,21 +7,29 @@ import { ButtonLink, H2, Link, Text, H3, TextArea } from '@sourcegraph/wildcard'
 import { CodyAlert } from '../components/CodyAlert'
 import { CodyContainer } from '../components/CodyContainer'
 import { CodyProBadgeDeck } from '../components/CodyProBadgeDeck'
-import { useSendInvite } from '../management/api/react-query/invites'
+import { useSendInvite, useTeamInvites } from '../management/api/react-query/invites'
+import { useCurrentSubscription, useSubscriptionSummary } from '../management/api/react-query/subscriptions'
+import { useTeamMembers } from '../management/api/react-query/teams'
 import { isValidEmailAddress } from '../util'
 
 import styles from './InviteUsers.module.scss'
 
-interface InviteUsersProps extends TelemetryV2Props {
-    teamId: string
-    remainingInviteCount: number
-}
+export const InviteUsers: React.FunctionComponent<TelemetryV2Props> = ({ telemetryRecorder }) => {
+    const subscriptionQueryResult = useCurrentSubscription()
+    const subscriptionSummaryQueryResult = useSubscriptionSummary()
+    const isAdmin = subscriptionSummaryQueryResult?.data?.userRole === 'admin'
+    const teamId = subscriptionSummaryQueryResult?.data?.teamId
+    const teamMembersQueryResult = useTeamMembers()
+    const teamMembers = teamMembersQueryResult.data?.members
+    const teamInvitesQueryResult = useTeamInvites()
+    const teamInvites = teamInvitesQueryResult.data
+
+    const remainingInviteCount = useMemo(() => {
+        const memberCount = teamMembers?.length ?? 0
+        const invitesUsed = (teamInvites ?? []).filter(invite => invite.status === 'sent').length
+        return Math.max((subscriptionQueryResult.data?.maxSeats ?? 0) - (memberCount + invitesUsed), 0)
+    }, [subscriptionQueryResult.data?.maxSeats, teamMembers, teamInvites])
 
-export const InviteUsers: React.FunctionComponent<InviteUsersProps> = ({
-    teamId,
-    remainingInviteCount,
-    telemetryRecorder,
-}) => {
     const [emailAddressesString, setEmailAddressesString] = useState<string>('')
     const emailAddresses = emailAddressesString.split(',').map(email => email.trim())
     const [emailAddressErrorMessage, setEmailAddressErrorMessage] = useState<string | null>(null)
@@ -92,6 +100,10 @@ export const InviteUsers: React.FunctionComponent<InviteUsersProps> = ({
         })
     }, [emailAddresses, sendInviteMutation.mutateAsync, teamId, telemetryRecorder, verifyEmailList])
 
+    if (!isAdmin || !remainingInviteCount || !subscriptionSummaryQueryResult?.data) {
+        return null
+    }
+
     return (
         <>
             {sendInviteMutation.status === 'success' && (

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

@@ -22,6 +22,7 @@ import { CodyAlert } from '../components/CodyAlert'
 import { ProIcon } from '../components/CodyIcon'
 import { PageHeaderIcon } from '../components/PageHeaderIcon'
 import { AcceptInviteBanner } from '../invites/AcceptInviteBanner'
+import { InviteUsers } from '../invites/InviteUsers'
 import { isCodyEnabled } from '../isCodyEnabled'
 import { CodyOnboarding, type IEditor } from '../onboarding/CodyOnboarding'
 import { USER_CODY_PLAN, USER_CODY_USAGE } from '../subscription/queries'
@@ -143,6 +144,8 @@ export const CodyManagementPage: React.FunctionComponent<CodyManagementPageProps
                     </PageHeader.Heading>
                 </PageHeader>
 
+                {isAdmin && <InviteUsers telemetryRecorder={telemetryRecorder} />}
+
                 {!isUserOnProTier && <UpgradeToProBanner onClick={onClickUpgradeToProCTA} />}
 
                 <div className={classNames('p-4 border bg-1 mt-3', styles.container)}>

client/web/src/cody/team/CodyManageTeamPage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react'
+import React, { useEffect } from 'react'
 
 import { mdiPlusThick } from '@mdi/js'
 import classNames from 'classnames'
@@ -14,11 +14,11 @@ import { PageTitle } from '../../components/PageTitle'
 import { CodyProRoutes } from '../codyProRoutes'
 import { CodyAlert } from '../components/CodyAlert'
 import { PageHeaderIcon } from '../components/PageHeaderIcon'
+import { InviteUsers } from '../invites/InviteUsers'
 import { useTeamInvites } from '../management/api/react-query/invites'
 import { useCurrentSubscription, useSubscriptionSummary } from '../management/api/react-query/subscriptions'
 import { useTeamMembers } from '../management/api/react-query/teams'
 
-import { InviteUsers } from './InviteUsers'
 import { TeamMemberList } from './TeamMemberList'
 
 interface CodyManageTeamPageProps extends TelemetryV2Props {
@@ -57,12 +57,6 @@ const AuthenticatedCodyManageTeamPage: React.FunctionComponent<CodyManageTeamPag
         }
     }, [navigate, subscriptionQueryResult.data])
 
-    const remainingInviteCount = useMemo(() => {
-        const memberCount = teamMembers?.length ?? 0
-        const invitesUsed = (teamInvites ?? []).filter(invite => invite.status === 'sent').length
-        return Math.max((subscriptionQueryResult.data?.maxSeats ?? 0) - (memberCount + invitesUsed), 0)
-    }, [subscriptionQueryResult.data?.maxSeats, teamMembers, teamInvites])
-
     return (
         <>
             <Page className={classNames('d-flex flex-column')}>
@@ -126,13 +120,7 @@ const AuthenticatedCodyManageTeamPage: React.FunctionComponent<CodyManageTeamPag
                     </CodyAlert>
                 )}
 
-                {isAdmin && !!remainingInviteCount && !!subscriptionSummaryQueryResult.data && (
-                    <InviteUsers
-                        teamId={subscriptionSummaryQueryResult.data.teamId}
-                        remainingInviteCount={remainingInviteCount}
-                        telemetryRecorder={telemetryRecorder}
-                    />
-                )}
+                {isAdmin && <InviteUsers telemetryRecorder={telemetryRecorder} />}
                 {!!subscriptionSummaryQueryResult.data && (
                     <TeamMemberList
                         teamId={subscriptionSummaryQueryResult.data.teamId}