fix: Add back sync repos feature in list (#3790)

Author: calvin-codecov

src/shared/ListRepo/ListRepo.test.tsx

@@ -157,7 +157,7 @@ describe('ListRepo', () => {
   describe('renders', () => {
     it('renders the children', () => {
       setup({})
-      render(<ListRepo />, {
+      render(<ListRepo canRefetch />, {
         wrapper: wrapper({}),
       })
 
@@ -166,7 +166,7 @@ describe('ListRepo', () => {
 
     it('renders the repo table', () => {
       setup({})
-      render(<ListRepo />, {
+      render(<ListRepo canRefetch />, {
         wrapper: wrapper({}),
       })
 
@@ -177,7 +177,7 @@ describe('ListRepo', () => {
   describe('reads URL parameters', () => {
     it('reads search parameter from URL', () => {
       setup({})
-      render(<ListRepo />, {
+      render(<ListRepo canRefetch />, {
         wrapper: wrapper({ url: '?search=thisisaquery' }),
       })
 
@@ -189,7 +189,7 @@ describe('ListRepo', () => {
   describe('update params after typing', () => {
     it('calls setSearchValue', async () => {
       const { user } = setup({})
-      render(<ListRepo />, {
+      render(<ListRepo canRefetch />, {
         wrapper: wrapper({}),
       })
 
@@ -207,7 +207,7 @@ describe('ListRepo', () => {
   describe('when rendered for team plan', () => {
     it('renders the team table', async () => {
       setup({ isTeamPlan: true })
-      render(<ListRepo />, {
+      render(<ListRepo canRefetch />, {
         wrapper: wrapper({}),
       })
       const table = await screen.findByText(/ReposTableTeam/)
@@ -218,7 +218,7 @@ describe('ListRepo', () => {
   describe('welcome demo alert banner', () => {
     it('shows alert banner if it is my owner page and I came from onboarding', async () => {
       const { me } = setup({})
-      render(<ListRepo />, {
+      render(<ListRepo canRefetch />, {
         wrapper: wrapper({
           url: '/gh/janedoe?source=onboarding',
           path: '/:provider/:owner',
@@ -231,7 +231,7 @@ describe('ListRepo', () => {
 
     it('does not show alert banner if I did not come from onboarding', async () => {
       const { me } = setup({})
-      render(<ListRepo />, {
+      render(<ListRepo canRefetch />, {
         wrapper: wrapper({
           url: '/gh/janedoe',
           path: '/:provider/:owner',
@@ -246,7 +246,7 @@ describe('ListRepo', () => {
   describe('user does not have gh app installed', () => {
     it('displays github app config banner if showDemoAlert is false', async () => {
       setup({})
-      render(<ListRepo hasGhApp={false} />, {
+      render(<ListRepo canRefetch hasGhApp={false} />, {
         wrapper: wrapper({
           url: '/gh/janedoe',
           path: '/:provider/:owner',
@@ -258,7 +258,7 @@ describe('ListRepo', () => {
     })
     it('does not display github app config banner if showDemoAlert is true', async () => {
       setup({})
-      render(<ListRepo hasGhApp={false} />, {
+      render(<ListRepo canRefetch hasGhApp={false} />, {
         wrapper: wrapper({
           url: '/gh/janedoe?source=onboarding',
           path: '/:provider/:owner',
@@ -272,7 +272,7 @@ describe('ListRepo', () => {
     })
     it('does not display github app config banner if isAdmin is false', async () => {
       setup({ isAdmin: false })
-      render(<ListRepo hasGhApp={false} />, {
+      render(<ListRepo canRefetch hasGhApp={false} />, {
         wrapper: wrapper({
           url: '/gh/janedoe',
           path: '/:provider/:owner',
@@ -285,7 +285,7 @@ describe('ListRepo', () => {
   describe('user has gh app installed', () => {
     it('does not display github app config banner if hasGhApp is true', async () => {
       setup({})
-      render(<ListRepo hasGhApp={true} />, {
+      render(<ListRepo canRefetch hasGhApp={true} />, {
         wrapper: wrapper({
           url: '/gh/janedoe',
           path: '/:provider/:owner',

src/shared/ListRepo/ListRepo.tsx

@@ -23,6 +23,7 @@ const defaultQueryParams = {
 }
 
 interface ListRepoProps {
+  canRefetch: boolean
   hasGhApp?: boolean
 }
 
@@ -31,7 +32,7 @@ interface URLParams {
   owner: string
 }
 
-function ListRepo({ hasGhApp }: ListRepoProps) {
+function ListRepo({ canRefetch, hasGhApp }: ListRepoProps) {
   const { provider, owner } = useParams<URLParams>()
   const { params, updateParams } = useLocationParams(defaultQueryParams)
   // @ts-expect-error useLocationParams needs to be typed
@@ -63,6 +64,7 @@ function ListRepo({ hasGhApp }: ListRepoProps) {
         setSearchValue={(search) => {
           updateParams({ search })
         }}
+        canRefetch={canRefetch}
       />
 
       {showDemoAlert ? (

src/shared/ListRepo/OrgControlTable/OrgControlTable.test.tsx

@@ -15,7 +15,13 @@ describe('OrgControlTable', () => {
     it(`doesn't call setSearchValue yet`, async () => {
       const { user } = setup()
       const setSearchValue = vi.fn()
-      render(<OrgControlTable setSearchValue={setSearchValue} searchValue="" />)
+      render(
+        <OrgControlTable
+          canRefetch={true}
+          setSearchValue={setSearchValue}
+          searchValue=""
+        />
+      )
 
       const searchInput = screen.getByRole('textbox', {
         name: /search/i,
@@ -30,7 +36,11 @@ describe('OrgControlTable', () => {
         const { user } = setup()
         const setSearchValue = vi.fn()
         render(
-          <OrgControlTable setSearchValue={setSearchValue} searchValue="" />
+          <OrgControlTable
+            canRefetch={true}
+            setSearchValue={setSearchValue}
+            searchValue=""
+          />
         )
 
         const searchInput = screen.getByRole('textbox', {
@@ -43,9 +53,42 @@ describe('OrgControlTable', () => {
     })
   })
 
+  describe('when the user can refetch', () => {
+    it('renders the RepoOrgNotFound', () => {
+      render(
+        <OrgControlTable
+          setSearchValue={vi.fn()}
+          searchValue=""
+          canRefetch={true}
+        />
+      )
+      expect(screen.getByText(/RepoOrgNotFound/)).toBeInTheDocument()
+    })
+  })
+
+  describe('when the user cannot refetch', () => {
+    it(`doesn't render the RepoOrgNotFound`, () => {
+      render(
+        <OrgControlTable
+          setSearchValue={vi.fn()}
+          searchValue=""
+          canRefetch={false}
+        />
+      )
+
+      expect(screen.queryByText(/RepoOrgNotFound/)).not.toBeInTheDocument()
+    })
+  })
+
   describe('when show team plan passed in', () => {
     it('does not render the ordering select', () => {
-      render(<OrgControlTable setSearchValue={vi.fn()} searchValue="" />)
+      render(
+        <OrgControlTable
+          canRefetch={false}
+          setSearchValue={vi.fn()}
+          searchValue=""
+        />
+      )
 
       const select = screen.queryByRole('combobox', {
         name: /Sort Order/i,

src/shared/ListRepo/OrgControlTable/OrgControlTable.tsx

@@ -3,14 +3,18 @@ import useDebounce from 'react-use/lib/useDebounce'
 
 import TextInput from 'ui/TextInput'
 
+import RepoOrgNotFound from './RepoOrgNotFound'
+
 interface OrgControlTableProps {
   setSearchValue: (search: string) => void
   searchValue: string
+  canRefetch: boolean
 }
 
 function OrgControlTable({
   setSearchValue,
   searchValue,
+  canRefetch,
 }: OrgControlTableProps) {
   const [search, setSearch] = useState(searchValue)
 
@@ -34,6 +38,7 @@ function OrgControlTable({
         }
         data-testid="org-control-search"
       />
+      {canRefetch && <RepoOrgNotFound />}
     </div>
   )
 }