feat: Add recently visited repo at top of list

Author: calvin-codecov

src/shared/ListRepo/RepoTitleLink/RepoTitleLink.jsx

@@ -1,13 +1,20 @@
 import PropTypes from 'prop-types'
 
 import AppLink from 'shared/AppLink'
+import { transformStringToLocalStorageKey } from 'shared/utils/transformStringToLocalStorageKey'
 import Icon from 'ui/Icon'
 import Label from 'ui/Label'
 
 const getRepoIconName = ({ activated, isRepoPrivate, active }) =>
   !activated && active ? 'ban' : isRepoPrivate ? 'lock-closed' : 'globe-alt'
 
-function RepoTitleLink({ repo, showRepoOwner, pageName, disabledLink }) {
+function RepoTitleLink({
+  repo,
+  showRepoOwner,
+  pageName,
+  disabledLink,
+  isRecentlyVisited,
+}) {
   const options = {
     owner: repo.author.username,
     repo: repo.name,
@@ -49,6 +56,12 @@ function RepoTitleLink({ repo, showRepoOwner, pageName, disabledLink }) {
         pageName={pageName}
         options={options}
         className="flex items-center text-ds-gray-quinary hover:underline"
+        onClick={() => {
+          if (repo?.name && repo?.author?.username && repo?.active) {
+            const key = transformStringToLocalStorageKey(repo.author.username)
+            localStorage.setItem(`${key}_recently_visited`, repo.name)
+          }
+        }}
       >
         <Icon
           size="sm"
@@ -75,6 +88,11 @@ function RepoTitleLink({ repo, showRepoOwner, pageName, disabledLink }) {
           System generated
         </Label>
       )}
+      {isRecentlyVisited && (
+        <Label variant="plain" className="ml-2">
+          recently visited
+        </Label>
+      )}
     </div>
   )
 }
@@ -93,6 +111,7 @@ RepoTitleLink.propTypes = {
   showRepoOwner: PropTypes.bool.isRequired,
   pageName: PropTypes.string.isRequired,
   disabledLink: PropTypes.bool.isRequired,
+  isRecentlyVisited: PropTypes.bool,
 }
 
 export default RepoTitleLink

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

@@ -17,6 +17,7 @@ import { mockIsIntersecting } from 'react-intersection-observer/test-utils'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import { ActiveContext } from 'shared/context'
+import { transformStringToLocalStorageKey } from 'shared/utils/transformStringToLocalStorageKey'
 
 import ReposTable from './ReposTable'
 
@@ -1083,4 +1084,96 @@ describe('ReposTable', () => {
       expect(demoLink.length).toBe(0)
     })
   })
+
+  describe('handles recently visited repo', () => {
+    beforeEach(() => {
+      setup({})
+      localStorage.clear()
+      localStorage.setItem(
+        `${transformStringToLocalStorageKey('owner1')}_recently_visited`,
+        'gazebo'
+      )
+      server.use(
+        graphql.query('ReposForOwner', async (info) => {
+          const recentlyVisitedRepo = [
+            {
+              node: {
+                private: false,
+                activated: true,
+                author: {
+                  username: 'owner1',
+                },
+                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 1',
+                latestCommitAt: subDays(new Date(), 3).toISOString(),
+                coverageAnalytics: {
+                  percentCovered: 10,
+                  lines: 123,
+                },
+                active: true,
+                updatedAt: '2020-08-25T16:36:19.67986800:00',
+                repositoryConfig: null,
+                coverageEnabled: true,
+                bundleAnalysisEnabled: false,
+              },
+            },
+          ]
+
+          let reposToReturn = myRepos.filter(
+            (repo) =>
+              !info.variables.filters.term ||
+              repo.node.name.includes(info.variables.filters.term)
+          )
+
+          if (info.variables.filters.repoNames) {
+            reposToReturn = recentlyVisitedRepo
+          }
+
+          return HttpResponse.json({
+            data: {
+              owner: {
+                repositories: {
+                  edges: reposToReturn,
+                  pageInfo: {
+                    hasNextPage: false,
+                    endCursor: '3',
+                  },
+                },
+              },
+            },
+          })
+        })
+      )
+    })
+
+    it('shows recently visited repo', async () => {
+      render(<ReposTable searchValue="" owner="owner1" />, {
+        wrapper: wrapper('', '/github/owner1', '/:provider/:owner'),
+      })
+      const recentlyVisitedRepo = await screen.findByText(/recently visited/)
+      expect(recentlyVisitedRepo).toBeInTheDocument()
+    })
+  })
 })

src/shared/ListRepo/ReposTable/ReposTable.tsx

@@ -22,6 +22,8 @@ import { useIsTeamPlan } from 'services/useIsTeamPlan'
 import { useOwner, useUser } from 'services/user'
 import { ActiveContext } from 'shared/context'
 import { DEMO_REPO, formatDemoRepos, isNotNull } from 'shared/utils/demo'
+import { getFilteredRecentlyVisitedRepo } from 'shared/utils/getFilteredRecentlyVisitedRepo'
+import { transformStringToLocalStorageKey } from 'shared/utils/transformStringToLocalStorageKey'
 import Icon from 'ui/Icon'
 import Spinner from 'ui/Spinner'
 
@@ -159,6 +161,18 @@ const ReposTable = ({
     })
   )
 
+  const recentlyVisitedRepoName = localStorage.getItem(
+    `${transformStringToLocalStorageKey(owner)}_recently_visited`
+  )
+
+  const { data: recentlyVisitedRepoData } = useInfiniteQueryV5(
+    ReposQueryOpts({
+      provider,
+      owner,
+      repoNames: recentlyVisitedRepoName ? [recentlyVisitedRepoName] : [],
+    })
+  )
+
   const isMyOwnerPage = currentUser?.user?.username === owner
 
   const tableData = useMemo(() => {
@@ -180,13 +194,30 @@ const ReposTable = ({
       ? formatDemoRepos(demoReposData, searchValue)
       : []
 
-    return [...demoRepos, ...repos]
+    const filteredRecentlyVisitedRepo = getFilteredRecentlyVisitedRepo(
+      recentlyVisitedRepoData,
+      searchValue,
+      owner
+    )
+    // only filter out the recently visited repo from the repos list if we are including it
+    const filteredRepos = filteredRecentlyVisitedRepo
+      ? repos.filter((repo) => recentlyVisitedRepoName !== repo.name)
+      : repos
+
+    return [
+      ...demoRepos,
+      ...(filteredRecentlyVisitedRepo ? [filteredRecentlyVisitedRepo] : []),
+      ...filteredRepos,
+    ]
   }, [
     reposData?.pages,
     demoReposData,
     searchValue,
     isMyOwnerPage,
     mayIncludeDemo,
+    recentlyVisitedRepoData,
+    recentlyVisitedRepoName,
+    owner,
   ])
 
   useEffect(() => {
@@ -202,6 +233,7 @@ const ReposTable = ({
       owner,
     }),
     getCoreRowModel: getCoreRowModel(),
+    // @ts-expect-error taking in both ReposQueryData and ReposTeamQueryData
     data: tableData,
     state: {
       sorting,

src/shared/ListRepo/ReposTable/getReposColumnsHelper.tsx

@@ -2,6 +2,7 @@ import { createColumnHelper } from '@tanstack/react-table'
 
 import { RepositoryResult } from 'services/repos/ReposQueryOpts'
 import { formatTimeToNow } from 'shared/utils/dates'
+import { transformStringToLocalStorageKey } from 'shared/utils/transformStringToLocalStorageKey'
 import TotalsNumber from 'ui/TotalsNumber'
 
 import NoRepoCoverage from './NoRepoCoverage'
@@ -21,6 +22,9 @@ export const getReposColumnsHelper = ({
   const columnHelper = createColumnHelper<
     RepositoryResult & { isDemo?: boolean }
   >()
+  const recentlyVisitedRepoName = localStorage.getItem(
+    `${transformStringToLocalStorageKey(owner)}_recently_visited`
+  )
   const nameColumn = columnHelper.accessor('name', {
     header: 'Name',
     id: 'name',
@@ -42,6 +46,9 @@ export const getReposColumnsHelper = ({
           showRepoOwner={!owner}
           pageName={pageName}
           disabledLink={!isCurrentUserPartOfOrg && !repo?.active}
+          isRecentlyVisited={
+            !!recentlyVisitedRepoName && recentlyVisitedRepoName === repo?.name
+          }
         />
       )
     },