Merge branch 'main' into cy/modal_classname

Author: calvin-codecov

src/pages/OwnerPage/OwnerPage.jsx

@@ -90,12 +90,12 @@ function OwnerPage() {
       </Suspense>
       <div>
         {showOnboardingContainer ? <OnboardingOrg /> : null}
-        {ownerData?.isCurrentUserPartOfOrg && (
+        {ownerData?.isCurrentUserPartOfOrg ? (
           <Tabs owner={ownerData} provider={provider} />
-        )}
+        ) : null}
         <ActiveContext.Provider value={params?.repoDisplay}>
           <ListRepo
-            canRefetch={ownerData?.isCurrentUserPartOfOrg}
+            canRefetch={!!ownerData?.isCurrentUserPartOfOrg}
             hasGhApp={hasGhApp}
           />
         </ActiveContext.Provider>

src/shared/ListRepo/ListRepo.test.tsx

@@ -127,7 +127,10 @@ const wrapper =
 
 describe('ListRepo', () => {
   function setup(
-    { isTeamPlan = false }: { isTeamPlan?: boolean },
+    {
+      isTeamPlan = false,
+      isAdmin = true,
+    }: { isTeamPlan?: boolean; isAdmin?: boolean },
     me = mockUser
   ) {
     const user = userEvent.setup()
@@ -140,6 +143,11 @@ describe('ListRepo', () => {
       }),
       graphql.query('CurrentUser', () => {
         return HttpResponse.json({ data: me })
+      }),
+      graphql.query('DetailOwner', () => {
+        return HttpResponse.json({
+          data: { owner: { username: 'janedoe', isAdmin } },
+        })
       })
     )
 
@@ -329,5 +337,27 @@ describe('ListRepo', () => {
         expect(banner).not.toBeInTheDocument()
       })
     })
+    it('does not display github app config banner if isAdmin is false', async () => {
+      setup({ isAdmin: false })
+      render(<ListRepo canRefetch hasGhApp={false} />, {
+        wrapper: wrapper({
+          url: '/gh/janedoe',
+          path: '/:provider/:owner',
+        }),
+      })
+      const banner = screen.queryByText("Codecov's GitHub app")
+      expect(banner).not.toBeInTheDocument()
+    })
+  })
+  describe('user has gh app installed', () => {
+    it('does not display github app config banner if hasGhApp is true', async () => {
+      setup({})
+      render(<ListRepo canRefetch hasGhApp={true} />, {
+        wrapper: wrapper({
+          url: '/gh/janedoe',
+          path: '/:provider/:owner',
+        }),
+      })
+    })
   })
 })

src/shared/ListRepo/ListRepo.jsx renamed to src/shared/ListRepo/ListRepo.tsx

@@ -1,5 +1,3 @@
-/* */
-import PropTypes from 'prop-types'
 import { Suspense, useContext } from 'react'
 import { useParams } from 'react-router-dom'
 
@@ -8,7 +6,8 @@ import { ONBOARDING_SOURCE } from 'pages/TermsOfService/constants'
 import { useLocationParams } from 'services/navigation'
 import { orderingOptions } from 'services/repos/orderingOptions'
 import { useIsTeamPlan } from 'services/useIsTeamPlan'
-import { useUser } from 'services/user'
+import { useIsCurrentUserAnAdmin, useUser } from 'services/user'
+import { Provider } from 'shared/api/helpers'
 import { ActiveContext } from 'shared/context'
 import { Alert } from 'ui/Alert'
 import Spinner from 'ui/Spinner'
@@ -30,40 +29,47 @@ export const repoDisplayOptions = Object.freeze({
   ALL: { text: 'All', status: undefined },
 })
 
-function ListRepo({ canRefetch, hasGhApp }) {
-  const { provider, owner } = useParams()
+interface ListRepoProps {
+  canRefetch: boolean
+  hasGhApp?: boolean
+}
+
+interface URLParams {
+  provider: Provider
+  owner: string
+}
+
+function ListRepo({ canRefetch, hasGhApp }: ListRepoProps) {
+  const { provider, owner } = useParams<URLParams>()
   const { params, updateParams } = useLocationParams(defaultQueryParams)
+  // @ts-expect-error useLocationParams needs to be typed
+  const { search, source } = params
   const { data: isTeamPlan } = useIsTeamPlan({ provider, owner })
   const { data: currentUser } = useUser({
     options: {
       suspense: false,
     },
   })
+  const isAdmin = useIsCurrentUserAnAdmin({ owner })
 
   const repoDisplay = useContext(ActiveContext)
 
-  const sortItem = orderingOptions.find(
-    (option) =>
-      option.ordering === params.ordering &&
-      option.direction === params.direction
-  )
-
   const loadingState = (
     <div className="flex justify-center py-8">
       <Spinner />
     </div>
   )
 
-  const cameFromOnboarding = params['source'] === ONBOARDING_SOURCE
+  const cameFromOnboarding = source === ONBOARDING_SOURCE
   const isMyOwnerPage = currentUser?.user?.username === owner
   const showDemoAlert = cameFromOnboarding && isMyOwnerPage
 
   return (
     <>
-      {/* we only want one of these two banners to show at a time */}
-      {!hasGhApp && !showDemoAlert && <GithubConfigBanner />}
+      {/* we only want one of this or DemoAlert banners to show at a time */}
+      {isAdmin && !hasGhApp && !showDemoAlert ? <GithubConfigBanner /> : null}
       <OrgControlTable
-        searchValue={params.search}
+        searchValue={search}
         repoDisplay={repoDisplay}
         setRepoDisplay={(repoDisplay) =>
           updateParams({
@@ -90,23 +96,13 @@ function ListRepo({ canRefetch, hasGhApp }) {
 
       <Suspense fallback={loadingState}>
         {isTeamPlan ? (
-          <ReposTableTeam searchValue={params.search} />
+          <ReposTableTeam searchValue={search} />
         ) : (
-          <ReposTable
-            sortItem={sortItem}
-            owner={owner}
-            searchValue={params.search}
-            mayIncludeDemo
-          />
+          <ReposTable owner={owner} searchValue={search} mayIncludeDemo />
         )}
       </Suspense>
     </>
   )
 }
 
-ListRepo.propTypes = {
-  canRefetch: PropTypes.bool.isRequired,
-  hasGhApp: PropTypes.bool,
-}
-
 export default ListRepo

src/ui/Icon/svg/outline/index.jsx

@@ -185,7 +185,7 @@ import search from './search.svg?react'
 // import shoppingCart from './shopping-cart.svg?react'
 // import sortAscending from './sort-ascending.svg?react'
 // import sortDescending from './sort-descending.svg?react'
-// import sparkles from './sparkles.svg?react'
+import sparkles from './sparkles.svg?react'
 import speakerphone from './speakerphone.svg?react'
 // import star from './star.svg?react'
 // import statusOffline from './status-offline.svg?react'
@@ -266,6 +266,7 @@ export {
   questionMarkCircle,
   refresh,
   search,
+  sparkles,
   speakerphone,
   sun,
   trash,