ref: Convert DirEntry to TSX (#3775)

Author: spalmurray-codecov

src/shared/ContentsTable/TableEntries/BaseEntries/DirEntry.test.jsx renamed to src/shared/ContentsTable/TableEntries/BaseEntries/DirEntry.test.tsx

@@ -4,22 +4,16 @@ import { MemoryRouter, Route } from 'react-router-dom'
 
 import DirEntry from './DirEntry'
 
-const wrapper = ({ children }) => (
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <MemoryRouter initialEntries={['/gh/codecov/test-repo']}>
     <Route path="/:provider/:owner/:repo/">{children}</Route>
   </MemoryRouter>
 )
 
 describe('DirEntry', () => {
   it('displays the directory name', () => {
-    const runPrefetchMock = vi.fn()
     render(
-      <DirEntry
-        linkRef="branch"
-        name="dir"
-        urlPath="path/to/directory"
-        runPrefetch={runPrefetchMock}
-      />,
+      <DirEntry linkRef="branch" name="dir" urlPath="path/to/directory" />,
       { wrapper }
     )
 
@@ -29,14 +23,8 @@ describe('DirEntry', () => {
 
   describe('path is given', () => {
     it('sets the correct href', () => {
-      const runPrefetchMock = vi.fn()
       render(
-        <DirEntry
-          linkRef="branch"
-          name="dir"
-          urlPath="path/to/directory"
-          runPrefetch={runPrefetchMock}
-        />,
+        <DirEntry linkRef="branch" name="dir" urlPath="path/to/directory" />,
         { wrapper }
       )
 
@@ -50,11 +38,7 @@ describe('DirEntry', () => {
 
   describe('no path is given', () => {
     it('sets the correct href', () => {
-      const runPrefetchMock = vi.fn()
-      render(
-        <DirEntry linkRef="branch" name="dir" runPrefetch={runPrefetchMock} />,
-        { wrapper }
-      )
+      render(<DirEntry linkRef="branch" name="dir" />, { wrapper })
 
       const a = screen.getByRole('link')
       expect(a).toHaveAttribute('href', '/gh/codecov/test-repo/tree/branch/dir')
@@ -63,12 +47,10 @@ describe('DirEntry', () => {
 
   describe('query params value is passed', () => {
     it('sets the correct href', () => {
-      const runPrefetchMock = vi.fn()
       render(
         <DirEntry
           linkRef="branch"
           name="dir"
-          runPrefetch={runPrefetchMock}
           queryParams={{ flags: ['flag-1'] }}
         />,
         { wrapper }
@@ -102,13 +84,11 @@ describe('DirEntry', () => {
 
   describe('pageName prop is passed', () => {
     it('sets the correct href', () => {
-      const runPrefetchMock = vi.fn()
       render(
         <DirEntry
           commitSha="coolCommitSha"
           name="dir"
           urlPath="path/to/directory"
-          runPrefetch={runPrefetchMock}
           pageName="commitTreeView"
         />,
         { wrapper }

src/shared/ContentsTable/TableEntries/BaseEntries/DirEntry.jsx renamed to src/shared/ContentsTable/TableEntries/BaseEntries/DirEntry.tsx

@@ -1,17 +1,15 @@
-import PropTypes from 'prop-types'
-
 import A from 'ui/A'
 import Icon from 'ui/Icon'
 
 function DirEntry({
   linkRef,
   name,
   urlPath,
-  runPrefetch,
+  runPrefetch = () => Promise.resolve(),
   pageName = 'treeView',
   commitSha,
   queryParams,
-}) {
+}: DirEntryProps) {
   return (
     <div className="flex gap-3" onMouseEnter={async () => await runPrefetch()}>
       <A
@@ -24,6 +22,8 @@ function DirEntry({
             queryParams,
           },
         }}
+        hook="expand-dir-entry"
+        isExternal={false}
       >
         <Icon name="folder" size="md" variant="solid" />
         <span className="whitespace-pre">{name}</span>
@@ -32,14 +32,14 @@ function DirEntry({
   )
 }
 
-DirEntry.propTypes = {
-  linkRef: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  urlPath: PropTypes.string,
-  runPrefetch: PropTypes.func,
-  pageName: PropTypes.string,
-  commitSha: PropTypes.string,
-  queryParams: PropTypes.object,
+interface DirEntryProps {
+  linkRef?: string
+  name: string
+  urlPath?: string
+  runPrefetch?: () => Promise<void>
+  pageName?: string
+  commitSha?: string
+  queryParams?: any
 }
 
 export default DirEntry