feat: Team plan repos list

src/pages/OwnerPage/OwnerPage.jsx

@@ -53,10 +53,7 @@ function OwnerPage() {
           <Tabs owner={ownerData} provider={provider} />
         )}
         <ActiveContext.Provider value={params?.repoDisplay}>
-          <ListRepo
-            canRefetch={ownerData?.isCurrentUserPartOfOrg}
-            owner={ownerData?.username}
-          />
+          <ListRepo canRefetch={ownerData?.isCurrentUserPartOfOrg} />
         </ActiveContext.Provider>
       </div>
     </div>

src/services/repos/config.js

@@ -43,3 +43,13 @@ export const nonActiveOrderingOptions = [
     direction: 'DESC',
   },
 ]
+
+export const OrderingDirection = Object.freeze({
+  DESC: 'DESC',
+  ASC: 'ASC',
+})
+
+export const TeamOrdering = Object.freeze({
+  COMMIT_DATE: 'COMMIT_DATE',
+  NAME: 'NAME',
+})

src/services/repos/useReposTeam.spec.tsx

@@ -80,6 +80,7 @@ describe('useReposTeam', () => {
       graphql.query('GetReposTeam', (req, res, ctx) => {
         const data = {
           owner: {
+            isCurrentUserPartOfOrg: true,
             repositories: {
               edges: req.variables.after
                 ? [
@@ -131,7 +132,17 @@ describe('useReposTeam', () => {
 
       await waitFor(() =>
         expect(result.current.data).toEqual({
-          repos: [repo1, repo2],
+          pages: [
+            {
+              repos: [repo1, repo2],
+              isCurrentUserPartOfOrg: true,
+              pageInfo: {
+                hasNextPage: true,
+                endCursor: 'MjAyMC0wOC0xMSAxNzozMDowMiswMDowMHwxMDA=',
+              },
+            },
+          ],
+          pageParams: [undefined],
         })
       )
     })
@@ -165,7 +176,25 @@ describe('useReposTeam', () => {
 
       await waitFor(() =>
         expect(result.current.data).toEqual({
-          repos: [repo1, repo2, repo3, repo4],
+          pages: [
+            {
+              repos: [repo1, repo2],
+              isCurrentUserPartOfOrg: true,
+              pageInfo: {
+                hasNextPage: true,
+                endCursor: 'MjAyMC0wOC0xMSAxNzozMDowMiswMDowMHwxMDA=',
+              },
+            },
+            {
+              repos: [repo3, repo4],
+              isCurrentUserPartOfOrg: true,
+              pageInfo: {
+                hasNextPage: false,
+                endCursor: 'aa',
+              },
+            },
+          ],
+          pageParams: [undefined, 'MjAyMC0wOC0xMSAxNzozMDowMiswMDowMHwxMDA='],
         })
       )
     })

src/services/repos/useReposTeam.tsx

@@ -7,17 +7,21 @@ import { mapEdges } from 'shared/utils/graphql'
 
 import { orderingOptions } from './config'
 
-const RepositorySchema = z.object({
-  name: z.string(),
-  active: z.boolean(),
-  activated: z.boolean(),
-  private: z.boolean(),
-  latestCommitAt: z.string().nullable(),
-  lines: z.number().nullable(),
-  author: z.object({
-    username: z.string().nullable(),
-  }),
-})
+const RepositorySchema = z
+  .object({
+    name: z.string(),
+    active: z.boolean(),
+    activated: z.boolean().nullable(),
+    private: z.boolean(),
+    latestCommitAt: z.string().nullable(),
+    lines: z.number().nullable(),
+    author: z.object({
+      username: z.string().nullable(),
+    }),
+  })
+  .nullable()
+
+export type Repository = z.infer<typeof RepositorySchema>
 
 const repositoryFragment = `
   fragment RepoForList on Repository {
@@ -38,7 +42,7 @@ interface FetchReposTeamArgs {
   owner: string
   variables: {
     filters: {
-      activated: boolean
+      activated?: boolean
       term?: string
       repoNames?: string[]
     }
@@ -53,6 +57,7 @@ interface FetchReposTeamArgs {
 const RequestSchema = z.object({
   owner: z
     .object({
+      isCurrentUserPartOfOrg: z.boolean(),
       repositories: z
         .object({
           edges: z.array(
@@ -80,6 +85,7 @@ function fetchReposForOwner({
   const query = `
     query GetReposTeam($filters: RepositorySetFilters!, $owner: String!, $ordering: RepositoryOrdering!, $direction: OrderingDirection!, $after: String, $first: Int) {
         owner(username: $owner) {
+          isCurrentUserPartOfOrg
           repositories(filters: $filters, ordering: $ordering, orderingDirection: $direction, first: $first, after: $after) {
             edges {
               node {
@@ -120,16 +126,17 @@ function fetchReposForOwner({
     return {
       repos: mapEdges(owner?.repositories),
       pageInfo: owner?.repositories?.pageInfo,
+      isCurrentUserPartOfOrg: !!owner?.isCurrentUserPartOfOrg,
     }
   })
 }
 
 interface UseReposTeamArgs {
-  activated: boolean
+  activated?: boolean
   term?: string
   owner: string
   sortItem?: {
-    ordering: string
+    ordering?: string
     direction: string
   }
   first?: number
@@ -153,7 +160,7 @@ export function useReposTeam({
     first,
   }
 
-  const { data, ...rest } = useInfiniteQuery(
+  return useInfiniteQuery(
     ['GetReposTeam', provider, variables, owner],
     ({ pageParam, signal }) => {
       return fetchReposForOwner({
@@ -170,8 +177,4 @@ export function useReposTeam({
       ...options,
     }
   )
-  return {
-    data: { repos: data?.pages.map((page) => page.repos).flat() },
-    ...rest,
-  }
 }

src/shared/ListRepo/InactiveRepo/index.js

@@ -0,0 +1 @@
+export { default } from './InactiveRepo'

src/shared/ListRepo/ListRepo.jsx

@@ -1,14 +1,18 @@
 /* */
 import PropTypes from 'prop-types'
 import { Suspense, useContext } from 'react'
+import { useParams } from 'react-router-dom'
 
 import { useLocationParams } from 'services/navigation'
 import { nonActiveOrderingOptions, orderingOptions } from 'services/repos'
+import { TierNames, useTier } from 'services/tier'
 import { ActiveContext } from 'shared/context'
+import { useFlags } from 'shared/featureFlags'
 import Spinner from 'ui/Spinner'
 
 import OrgControlTable from './OrgControlTable'
 import ReposTable from './ReposTable'
+import ReposTableTeam from './ReposTableTeam'
 
 const defaultQueryParams = {
   search: '',
@@ -20,11 +24,18 @@ const defaultQueryParams = {
 export const repoDisplayOptions = Object.freeze({
   ACTIVE: { text: 'Active', status: true },
   INACTIVE: { text: 'Inactive', status: false },
-  ALL: { text: 'All', status: null },
+  ALL: { text: 'All', status: undefined },
 })
 
-function ListRepo({ owner, canRefetch }) {
+function ListRepo({ canRefetch }) {
+  const { provider, owner } = useParams()
   const { params, updateParams } = useLocationParams(defaultQueryParams)
+  const { data: tierData } = useTier({ provider, owner })
+  const { multipleTiers } = useFlags({
+    multipleTiers: false,
+  })
+
+  const showTeamRepos = tierData === TierNames.TEAM && multipleTiers
 
   const repoDisplay = useContext(ActiveContext)
 
@@ -67,20 +78,24 @@ function ListRepo({ owner, canRefetch }) {
           updateParams({ search })
         }}
         canRefetch={canRefetch}
+        showTeamRepos={showTeamRepos}
       />
       <Suspense fallback={loadingState}>
-        <ReposTable
-          sortItem={sortItem}
-          owner={owner}
-          searchValue={params.search}
-        />
+        {showTeamRepos ? (
+          <ReposTableTeam searchValue={params.search} />
+        ) : (
+          <ReposTable
+            sortItem={sortItem}
+            owner={owner}
+            searchValue={params.search}
+          />
+        )}
       </Suspense>
     </>
   )
 }
 
 ListRepo.propTypes = {
-  owner: PropTypes.string,
   canRefetch: PropTypes.bool.isRequired,
 }
 

src/shared/ListRepo/ListRepo.spec.jsx

@@ -1,42 +1,91 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { graphql } from 'msw'
+import { setupServer } from 'msw/node'
 import { MemoryRouter, Route } from 'react-router-dom'
 
+import { TierNames } from 'services/tier'
 import { ActiveContext } from 'shared/context'
+import { useFlags } from 'shared/featureFlags'
 
 import ListRepo, { repoDisplayOptions } from './ListRepo'
 
+jest.mock('shared/featureFlags')
+
 jest.mock('./OrgControlTable/RepoOrgNotFound', () => () => 'RepoOrgNotFound')
 jest.mock('./ReposTable', () => () => 'ReposTable')
+jest.mock('./ReposTableTeam', () => () => 'ReposTableTeam.tsx')
+
+const server = setupServer()
+
+beforeAll(() => {
+  server.listen({ onUnhandledRequest: 'warn' })
+  console.error = () => {}
+})
+beforeEach(() => {
+  queryClient.clear()
+  server.resetHandlers()
+})
+afterAll(() => {
+  server.close()
+})
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+})
 
 let testLocation
 
 const wrapper =
   ({ url = '', path = '', repoDisplay = '' } = {}) =>
   ({ children }) =>
     (
-      <MemoryRouter initialEntries={[url]}>
-        <ActiveContext.Provider value={repoDisplay}>
-          {children}
-          <Route
-            path={path}
-            render={({ location }) => {
-              testLocation = location
-              return null
-            }}
-          />
-        </ActiveContext.Provider>
-      </MemoryRouter>
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={[url]}>
+          <ActiveContext.Provider value={repoDisplay}>
+            {children}
+            <Route
+              path={path}
+              render={({ location }) => {
+                testLocation = location
+                return null
+              }}
+            />
+          </ActiveContext.Provider>
+        </MemoryRouter>
+      </QueryClientProvider>
     )
 
 describe('ListRepo', () => {
-  function setup() {
+  function setup({ tierValue = TierNames.PRO } = { tierValue: TierNames.PRO }) {
     const user = userEvent.setup()
 
+    useFlags.mockReturnValue({
+      multipleTiers: true,
+    })
+
+    server.use(
+      graphql.query('OwnerTier', (req, res, ctx) => {
+        return res(
+          ctx.status(200),
+          ctx.data({ owner: { plan: { tierName: tierValue } } })
+        )
+      })
+    )
+
     return { user }
   }
 
   describe('renders', () => {
+    beforeEach(() => {
+      setup()
+    })
+
     it('renders the children', () => {
       render(<ListRepo canRefetch />, {
         wrapper: wrapper(),
@@ -55,6 +104,10 @@ describe('ListRepo', () => {
   })
 
   describe('reads URL parameters', () => {
+    beforeEach(() => {
+      setup()
+    })
+
     it('reads search parameter from URL', () => {
       render(<ListRepo canRefetch />, {
         wrapper: wrapper({ url: '?search=thisisaquery' }),
@@ -256,4 +309,18 @@ describe('ListRepo', () => {
       expect(options.length).toBe(2)
     })
   })
+
+  describe('when rendered for team tier', () => {
+    beforeEach(() => {
+      setup({ tierValue: TierNames.TEAM })
+    })
+
+    it('renders the team table', async () => {
+      render(<ListRepo canRefetch />, {
+        wrapper: wrapper(),
+      })
+      const table = await screen.findByText(/ReposTableTeam/)
+      expect(table).toBeInTheDocument()
+    })
+  })
 })

src/shared/ListRepo/NoReposBlock/index.js

@@ -0,0 +1 @@
+export { default } from './NoReposBlock'