ref: Convert FileEntry to TS (#3772)

Author: spalmurray-codecov

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

@@ -6,7 +6,7 @@ import FileEntry from './FileEntry'
 
 import { displayTypeParameter } from '../../constants'
 
-const wrapper = ({ children }) => (
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <MemoryRouter initialEntries={['/gh/codecov/test-repo']}>
     <Route path="/:provider/:owner/:repo/">{children}</Route>
   </MemoryRouter>
@@ -15,15 +15,13 @@ const wrapper = ({ children }) => (
 describe('FileEntry', () => {
   describe('checking properties on list display', () => {
     it('displays the file path', () => {
-      const runPrefetchMock = vi.fn()
       render(
         <FileEntry
           linkRef="main"
           path="dir/file.js"
           name="file.js"
           urlPath="dir"
           displayType={displayTypeParameter.list}
-          runPrefetch={runPrefetchMock}
         />,
         { wrapper }
       )
@@ -34,15 +32,13 @@ describe('FileEntry', () => {
 
   describe('checking properties on tree display', () => {
     it('displays the file name', () => {
-      const runPrefetchMock = vi.fn()
       render(
         <FileEntry
           linkRef="main"
           path="dir/file.js"
           name="file.js"
           urlPath="dir"
           displayType={displayTypeParameter.tree}
-          runPrefetch={runPrefetchMock}
         />,
         { wrapper }
       )
@@ -51,15 +47,13 @@ describe('FileEntry', () => {
     })
 
     it('does not display the file name', () => {
-      const runPrefetchMock = vi.fn()
       render(
         <FileEntry
           linkRef="main"
           path="dir/file.js"
           name="file.js"
           urlPath="dir"
           displayType={displayTypeParameter.tree}
-          runPrefetch={runPrefetchMock}
         />,
         { wrapper }
       )
@@ -70,15 +64,13 @@ describe('FileEntry', () => {
 
   describe('is displaying a list', () => {
     it('displays the file path label', () => {
-      const runPrefetchMock = vi.fn()
       render(
         <FileEntry
           linkRef="main"
           path="dir/file.js"
           name="file.js"
           urlPath="dir"
           displayType={displayTypeParameter.list}
-          runPrefetch={runPrefetchMock}
         />,
         { wrapper }
       )
@@ -110,7 +102,6 @@ describe('FileEntry', () => {
   })
 
   describe('passed pageName commit props', () => {
-    const runPrefetchMock = vi.fn()
     it('sets the correct href', () => {
       render(
         <FileEntry
@@ -119,7 +110,6 @@ describe('FileEntry', () => {
           urlPath="dir"
           commitSha="coolCommitSha"
           displayType={displayTypeParameter.tree}
-          runPrefetch={runPrefetchMock}
           pageName="commitFileDiff"
         />,
         { wrapper }
@@ -135,15 +125,13 @@ describe('FileEntry', () => {
 
   describe('passed queryParams prop', () => {
     it('sets the correct href', () => {
-      const runPrefetchMock = vi.fn()
       render(
         <FileEntry
           linkRef="main"
           path="dir/file.js"
           name="file.js"
           urlPath="dir"
           displayType={displayTypeParameter.list}
-          runPrefetch={runPrefetchMock}
           queryParams={{ flags: ['flag-1'] }}
         />,
         { wrapper }

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

@@ -1,11 +1,15 @@
-import PropTypes from 'prop-types'
-
 import A from 'ui/A'
 import Icon from 'ui/Icon'
 
 import { displayTypeParameter } from '../../constants'
 
-const FileHeader = ({ displayAsList, path, name }) => {
+interface FileHeaderProps {
+  displayAsList: boolean
+  path: string
+  name: string
+}
+
+const FileHeader = ({ displayAsList, path, name }: FileHeaderProps) => {
   return (
     <div className="flex items-center gap-1 break-all">
       {!displayAsList && <Icon name="document" size="md" />}
@@ -14,23 +18,17 @@ const FileHeader = ({ displayAsList, path, name }) => {
   )
 }
 
-FileHeader.propTypes = {
-  path: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  displayAsList: PropTypes.bool.isRequired,
-}
-
 function FileEntry({
   linkRef,
   path,
   name,
   urlPath,
   displayType,
-  runPrefetch,
+  runPrefetch = () => Promise.resolve(),
   pageName = 'fileViewer',
   commitSha,
-  queryParams,
-}) {
+  queryParams = {},
+}: FileEntryProps) {
   const displayAsList = displayType === displayTypeParameter.list
   return (
     <div
@@ -47,23 +45,25 @@ function FileEntry({
             queryParams,
           },
         }}
+        hook="expand-file-entry"
+        isExternal={false}
       >
         <FileHeader displayAsList={displayAsList} path={path} name={name} />
       </A>
     </div>
   )
 }
 
-FileEntry.propTypes = {
-  linkRef: PropTypes.string,
-  path: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  displayType: PropTypes.oneOf(Object.values(displayTypeParameter)),
-  urlPath: PropTypes.string.isRequired,
-  runPrefetch: PropTypes.func,
-  pageName: PropTypes.string,
-  commitSha: PropTypes.string,
-  queryParams: PropTypes.object,
+interface FileEntryProps {
+  linkRef?: string
+  path: string
+  name: string
+  displayType?: (typeof displayTypeParameter)[keyof typeof displayTypeParameter]
+  urlPath: string
+  runPrefetch?: () => Promise<void>
+  pageName?: string
+  commitSha?: string
+  queryParams?: any
 }
 
 export default FileEntry