feat: Update Repo Page Pulls Tab for Team Plan

src/pages/RepoPage/PullsTab/PullsTab.spec.jsx → src/pages/RepoPage/PullsTab/PullsTab.spec.tsx

@@ -2,39 +2,84 @@ import userEvent from '@testing-library/user-event'
 import { graphql } from 'msw'
 import { setupServer } from 'msw/node'
 
+import { TierNames } from 'services/tier'
+
 import PullsTab from './PullsTab'
 
 import { repoPageRender, screen } from '../repo-jest-setup'
 
-jest.mock('./PullsTable/PullsTable', () => () => 'PullsTable')
+jest.mock('./PullsTable', () => () => 'PullsTable')
+jest.mock('./PullsTableTeam', () => () => 'PullsTableTeam')
+
+const mockRepoSettings = (isPrivate = false) => ({
+  owner: {
+    repository: {
+      defaultBranch: 'master',
+      private: isPrivate,
+      uploadToken: 'token',
+      graphToken: 'token',
+      yaml: 'yaml',
+      bot: {
+        username: 'test',
+      },
+    },
+  },
+})
 
 const server = setupServer()
 
 beforeAll(() => {
   server.listen({ onUnhandledRequest: 'warn' })
 })
+
 afterEach(() => {
   server.resetHandlers()
 })
+
 afterAll(() => {
   server.close()
 })
 
+interface SetupArgs {
+  tierValue?: 'pro' | 'team'
+  isPrivate?: boolean
+}
+
 describe('Pulls Tab', () => {
-  function setup() {
+  function setup({ tierValue = 'pro', isPrivate = false }: SetupArgs) {
     const user = userEvent.setup()
 
     server.use(
-      graphql.query('GetRepo', (req, res, ctx) =>
-        res(ctx.status(200), ctx.data({}))
-      )
+      graphql.query('GetRepo', (req, res, ctx) => {
+        return res(ctx.status(200), ctx.data({}))
+      }),
+      graphql.query('OwnerTier', (req, res, ctx) => {
+        if (tierValue === TierNames.TEAM) {
+          return res(
+            ctx.status(200),
+            ctx.data({
+              owner: { plan: { tierName: TierNames.TEAM } },
+            })
+          )
+        }
+
+        return res(
+          ctx.status(200),
+          ctx.data({
+            owner: { plan: { tierName: 'pro' } },
+          })
+        )
+      }),
+      graphql.query('GetRepoSettingsTeam', (req, res, ctx) => {
+        return res(ctx.status(200), ctx.data(mockRepoSettings(isPrivate)))
+      })
     )
 
     return { user }
   }
 
-  describe('when rendered', () => {
-    beforeEach(() => setup())
+  describe('rendering table controls', () => {
+    beforeEach(() => setup({}))
 
     it('renders select by updatestamp label', () => {
       repoPageRender({
@@ -77,9 +122,52 @@ describe('Pulls Tab', () => {
     })
   })
 
+  describe('rendering table', () => {
+    describe('on non-team tier', () => {
+      it('renders PullsTable component', async () => {
+        setup({})
+        repoPageRender({
+          initialEntries: ['/gh/codecov/gazebo/pulls'],
+          renderPulls: () => <PullsTab />,
+        })
+
+        const table = await screen.findByText('PullsTable')
+        expect(table).toBeInTheDocument()
+      })
+    })
+
+    describe('on team tier', () => {
+      describe('repo is public', () => {
+        it('renders PullsTable component', async () => {
+          setup({ tierValue: TierNames.TEAM, isPrivate: false })
+          repoPageRender({
+            initialEntries: ['/gh/codecov/gazebo/pulls'],
+            renderPulls: () => <PullsTab />,
+          })
+
+          const table = await screen.findByText('PullsTable')
+          expect(table).toBeInTheDocument()
+        })
+      })
+
+      describe('repo is private', () => {
+        it('renders PullsTableTeam component', async () => {
+          setup({ tierValue: TierNames.TEAM, isPrivate: true })
+          repoPageRender({
+            initialEntries: ['/gh/codecov/gazebo/pulls'],
+            renderPulls: () => <PullsTab />,
+          })
+
+          const table = await screen.findByText('PullsTableTeam')
+          expect(table).toBeInTheDocument()
+        })
+      })
+    })
+  })
+
   describe('view by state', () => {
     it('renders all options', async () => {
-      const { user } = setup()
+      const { user } = setup({})
       repoPageRender({
         initialEntries: ['/gh/codecov/gazebo/pulls'],
         renderPulls: () => <PullsTab />,
@@ -101,7 +189,7 @@ describe('Pulls Tab', () => {
 
   describe('order by updatestamp', () => {
     it('renders all options', async () => {
-      const { user } = setup()
+      const { user } = setup({})
       repoPageRender({
         initialEntries: ['/gh/codecov/gazebo/pulls'],
         renderPulls: () => <PullsTab />,
@@ -115,9 +203,9 @@ describe('Pulls Tab', () => {
     })
   })
 
-  describe('order by Oldest', () => {
+  describe('order by oldest', () => {
     it('renders the selected option', async () => {
-      const { user } = setup()
+      const { user } = setup({})
       repoPageRender({
         initialEntries: ['/gh/codecov/gazebo/pulls'],
         renderPulls: () => <PullsTab />,
@@ -137,9 +225,9 @@ describe('Pulls Tab', () => {
     })
   })
 
-  describe('view by Merged', () => {
+  describe('view by merged', () => {
     it('renders the number of selected options', async () => {
-      const { user } = setup()
+      const { user } = setup({})
       repoPageRender({
         initialEntries: ['/gh/codecov/gazebo/pulls'],
         renderPulls: () => <PullsTab />,
@@ -149,7 +237,10 @@ describe('Pulls Tab', () => {
       await user.click(select)
 
       const state = screen.getAllByRole('option')[2]
-      await user.click(state)
+
+      if (state) {
+        await user.click(state)
+      }
 
       const itemSelected = await screen.findByText(/1 selected/)
       expect(itemSelected).toBeInTheDocument()

src/pages/RepoPage/PullsTab/PullsTab.jsx → src/pages/RepoPage/PullsTab/PullsTab.tsx

@@ -1,6 +1,9 @@
 import { lazy, Suspense, useLayoutEffect, useState } from 'react'
+import { useParams } from 'react-router-dom'
 
 import { useLocationParams } from 'services/navigation'
+import { useRepoSettingsTeam } from 'services/repo'
+import { TierNames, useTier } from 'services/tier'
 import MultiSelect from 'ui/MultiSelect'
 import Select from 'ui/Select'
 import Spinner from 'ui/Spinner'
@@ -17,21 +20,29 @@
 import { useSetCrumbs } from '../context'
 
 const PullsTable = lazy(() => import('./PullsTable'))
+const PullsTableTeam = lazy(() => import('./PullsTableTeam'))
 
-const Loader = (
+const Loader = () => (
   <div className="flex flex-1 justify-center">
-    <Spinner size={60} />
+    <Spinner />
   </div>
 )
 
+type Order = keyof typeof orderNames
+type SelectedStatesNames = Array<keyof typeof stateNames>
+type SelectedStatesEnum = Array<keyof typeof stateEnum>
+
 const defaultParams = {
   order: orderingEnum.Newest.order,
   prStates: [],
 }
 
 function useControlParams() {
   const { params, updateParams } = useLocationParams(defaultParams)
-  const { order, prStates } = params
+  const { order, prStates } = params as {
+    order: Order
+    prStates: SelectedStatesNames
+  }
   const paramOrderName = orderNames[order]
 
   const paramStatesNames = prStates.map((filter) => {
@@ -51,9 +62,18 @@
   }
 }
 
+interface URLParams {
+  provider: string
+  owner: string
+}
+
 function PullsTab() {
+  const { provider, owner } = useParams<URLParams>()
   const setCrumbs = useSetCrumbs()
 
+  const { data: repoSettingsTeam } = useRepoSettingsTeam()
+  const { data: tierData } = useTier({ provider, owner })
+
   const {
     updateParams,
     selectedOrder,
@@ -66,13 +86,13 @@
     setCrumbs()
   }, [setCrumbs])
 
-  const handleOrderChange = (selectedOrder) => {
+  const handleOrderChange = (selectedOrder: keyof typeof orderingEnum) => {
     const { order } = orderingEnum[selectedOrder]
     setSelectedOrder(selectedOrder)
     updateParams({ order })
   }
 
-  const handleStatesChange = (selectedStates) => {
+  const handleStatesChange = (selectedStates: SelectedStatesEnum) => {
     const prStates = selectedStates.map((filter) => {
       const { state } = stateEnum[filter]
       return state
@@ -81,13 +101,17 @@
     updateParams({ prStates })
   }
 
+  const showTeamTable =
+    repoSettingsTeam?.repository?.private && tierData === TierNames.TEAM
+
   return (
     <div className="flex flex-1 flex-col gap-4">
       <div className="flex flex-row gap-3">
         <div className="flex items-center justify-center gap-3">
           <label className="text-sm font-semibold">View:</label>
           <div>
             <MultiSelect
+              // @ts-expect-error - need to play around with forward refs and types
               dataMarketing="pulls-filter-by-state"
               ariaName="Filter by state"
               value={selectedStates}
@@ -101,6 +125,7 @@
           <label className="text-sm font-semibold ">Sort by:</label>
           <div>
             <Select
+              // @ts-expect-error - need to play around with forward refs and types
               dataMarketing="pulls-sort-by-selector"
               ariaName="Sort order"
               value={selectedOrder}
@@ -110,8 +135,8 @@
           </div>
         </div>
       </div>
-      <Suspense fallback={Loader}>
-        <PullsTable />
+      <Suspense fallback={<Loader />}>
+        {showTeamTable ? <PullsTableTeam /> : <PullsTable />}
       </Suspense>
     </div>
   )