fix: Pin demo repo to top during sort (#3598)

Author: spalmurray-codecov

src/shared/ListRepo/ReposTable/ReposTable.test.tsx

@@ -913,53 +913,129 @@ describe('ReposTable', () => {
                 name: 'Repo name 1',
                 latestCommitAt: subDays(new Date(), 3).toISOString(),
                 coverageAnalytics: {
-                  percentCovered: 0,
+                  percentCovered: 10,
                   lines: 123,
                 },
                 active: true,
                 updatedAt: '2020-08-25T16:36:19.67986800:00',
                 repositoryConfig: null,
-                coverageEnabled: false,
+                coverageEnabled: true,
                 bundleAnalysisEnabled: false,
               },
             },
+          ]
+
+          let reposToReturn = myRepos.filter(
+            (repo) =>
+              !info.variables.filters.term ||
+              repo.node.name.includes(info.variables.filters.term)
+          )
+
+          if (info.variables.owner === 'codecov') {
+            reposToReturn = demoRepo
+          }
+
+          return HttpResponse.json({
+            data: {
+              owner: {
+                repositories: {
+                  edges: reposToReturn,
+                  pageInfo: {
+                    hasNextPage: false,
+                    endCursor: '3',
+                  },
+                },
+              },
+            },
+          })
+        })
+      )
+    })
+
+    it('shows demo repo and your repos when on your owner page', async () => {
+      render(<ReposTable searchValue="" owner="owner1" mayIncludeDemo />, {
+        wrapper: wrapper('', '/github/owner1', '/:provider/:owner'),
+      })
+      const demoLink = await screen.findAllByText(/Codecov demo/)
+      expect(demoLink.length).toBe(1)
+      const links = await screen.findAllByText(/Repo name/)
+      expect(links.length).toBe(1)
+    })
+
+    it('shows demo repo when search term includes it', async () => {
+      render(<ReposTable searchValue="dem" owner="owner1" mayIncludeDemo />, {
+        wrapper: wrapper('', '/github/owner1', '/:provider/:owner'),
+      })
+      const repo = screen.queryByText(/Repo name/)
+      expect(repo).not.toBeInTheDocument()
+      const demoLink = await screen.findAllByText(/Codecov demo/)
+      expect(demoLink.length).toBe(1)
+    })
+
+    it('hides demo repo when user has 2 or more repos configured', async () => {
+      server.use(
+        graphql.query('ReposForOwner', async (info) => {
+          const demoRepo = [
             {
               node: {
-                private: true,
+                private: false,
                 activated: true,
+                author: {
+                  username: 'codecov',
+                },
+                name: 'gazebo',
+                latestCommitAt: subDays(new Date(), 3).toISOString(),
+                coverageAnalytics: {
+                  percentCovered: 0,
+                  lines: 123,
+                },
+                active: true,
+                updatedAt: '2020-08-25T16:36:19.67986800:00',
+                repositoryConfig: null,
+                coverageEnabled: true,
+                bundleAnalysisEnabled: true,
+              },
+            },
+          ]
+
+          const myRepos = [
+            {
+              node: {
+                private: false,
+                activated: false,
                 author: {
                   username: 'owner1',
                 },
-                name: 'Repo name 2',
-                latestCommitAt: subDays(new Date(), 2).toISOString(),
+                name: 'Repo name 1',
+                latestCommitAt: subDays(new Date(), 3).toISOString(),
                 coverageAnalytics: {
-                  percentCovered: 100,
+                  percentCovered: 10,
                   lines: 123,
                 },
                 active: true,
                 updatedAt: '2020-08-25T16:36:19.67986800:00',
                 repositoryConfig: null,
-                coverageEnabled: false,
+                coverageEnabled: true,
                 bundleAnalysisEnabled: false,
               },
             },
             {
               node: {
-                private: true,
+                private: false,
                 activated: false,
                 author: {
                   username: 'owner1',
                 },
-                name: 'Repo name 3',
-                latestCommitAt: subDays(new Date(), 5).toISOString(),
+                name: 'Repo name 1',
+                latestCommitAt: subDays(new Date(), 3).toISOString(),
                 coverageAnalytics: {
-                  percentCovered: null,
+                  percentCovered: 0,
                   lines: 123,
                 },
-                active: false,
+                active: true,
                 updatedAt: '2020-08-25T16:36:19.67986800:00',
                 repositoryConfig: null,
-                coverageEnabled: false,
+                coverageEnabled: true,
                 bundleAnalysisEnabled: false,
               },
             },
@@ -990,26 +1066,13 @@ describe('ReposTable', () => {
           })
         })
       )
-    })
-
-    it('shows demo repo and your repos when on your owner page', async () => {
       render(<ReposTable searchValue="" owner="owner1" mayIncludeDemo />, {
         wrapper: wrapper('', '/github/owner1', '/:provider/:owner'),
       })
       const links = await screen.findAllByText(/Repo name/)
-      expect(links.length).toBe(3)
-      const demoLink = await screen.findAllByText(/Codecov demo/)
-      expect(demoLink.length).toBe(1)
-    })
-
-    it('shows demo repo when search term includes it', async () => {
-      render(<ReposTable searchValue="dem" owner="owner1" mayIncludeDemo />, {
-        wrapper: wrapper('', '/github/owner1', '/:provider/:owner'),
-      })
-      const repo = screen.queryByText(/Repo name/)
-      expect(repo).not.toBeInTheDocument()
-      const demoLink = await screen.findAllByText(/Codecov demo/)
-      expect(demoLink.length).toBe(1)
+      expect(links.length).toBe(2)
+      const demoLink = screen.queryAllByText(/Codecov demo/)
+      expect(demoLink.length).toBe(0)
     })
   })
 })

src/shared/ListRepo/ReposTable/ReposTable.tsx

@@ -153,18 +153,34 @@ const ReposTable = ({
   })
 
   const isMyOwnerPage = currentUser?.user?.username === owner
-  const includeDemo = mayIncludeDemo && !config.IS_SELF_HOSTED && isMyOwnerPage
 
   const tableData = useMemo(() => {
     const repos =
       reposData?.pages.flatMap((page) => page?.repos).filter(isNotNull) ?? []
 
+    const configuredRepos = repos.reduce(
+      (acc, repo) => (repo.coverageEnabled ? acc + 1 : acc),
+      0
+    )
+
+    const includeDemo =
+      mayIncludeDemo &&
+      !config.IS_SELF_HOSTED &&
+      isMyOwnerPage &&
+      configuredRepos < 2
+
     const demoRepos = includeDemo
       ? formatDemoRepos(demoReposData, searchValue)
       : []
 
     return [...demoRepos, ...repos]
-  }, [reposData?.pages, demoReposData, includeDemo, searchValue])
+  }, [
+    reposData?.pages,
+    demoReposData,
+    searchValue,
+    isMyOwnerPage,
+    mayIncludeDemo,
+  ])
 
   useEffect(() => {
     if (inView && hasNextPage) {
@@ -186,6 +202,7 @@ const ReposTable = ({
     onSortingChange: setSorting,
     getSortedRowModel: getSortedRowModel(),
     enableSortingRemoval: false,
+    manualSorting: true,
   })
 
   if (!isReposLoading && isEmpty(tableData)) {