chore: Convert to TS - shared context, plan, propTypes, treePaths (#3438

)

src/layouts/EnterpriseLoginLayout/EnterpriseLoginLayout.test.tsx

@@ -33,7 +33,7 @@ const queryClient = new QueryClient({
   },
 })
 
-const wrapper = ({ children }: { children: React.ReactNode }) => (
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <QueryClientProvider client={queryClient}>
     <MemoryRouter initialEntries={['/']}>
       <Route path="/">

src/layouts/EnterpriseLoginLayout/Header/Header.test.tsx

@@ -3,7 +3,7 @@ import { MemoryRouter, Route } from 'react-router-dom'
 
 import Header from './Header'
 
-const wrapper = ({ children }: { children: React.ReactNode }) => (
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <MemoryRouter initialEntries={['/']}>
     <Route path="/" exact>
       {children}

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressCard.test.tsx

@@ -43,7 +43,7 @@ const subscriptionDetail = {
   cancelAtPeriodEnd: false,
 } as z.infer<typeof SubscriptionDetailSchema>
 
-const wrapper = ({ children }: { children: React.ReactNode }) => (
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <ThemeContextProvider>{children}</ThemeContextProvider>
 )
 

src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/PaidPlanCard/PaidPlanCard.test.tsx

@@ -2,7 +2,6 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen } from '@testing-library/react'
 import { graphql, http, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
-import { ReactNode } from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import { Plan, PretrialPlan, TrialStatuses } from 'services/account'
@@ -67,7 +66,7 @@ const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 })
 
-const wrapper = ({ children }: { children: ReactNode }) => (
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <QueryClientProvider client={queryClient}>
     <MemoryRouter initialEntries={['/plan/bb/critical-role']}>
       <Route path="/plan/:provider/:owner">{children}</Route>

src/pages/RepoPage/CoverageTab/ComponentsTab/BackfillBanners/BackfillBanners.test.tsx

@@ -13,7 +13,7 @@ const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 })
 
-const wrapper = ({ children }: { children: React.ReactNode }) => (
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <MemoryRouter initialEntries={['/gh/codecov/gazebo']}>
     <Route path="/:provider/:owner/:repo">
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>

src/services/pull/useSingularImpactedFileComparison.test.tsx

@@ -12,7 +12,7 @@ const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 })
 
-const wrapper = ({ children }: { children: React.ReactNode }) => (
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 )
 

src/services/repo/useActivateMeasurements.test.tsx

@@ -12,7 +12,7 @@ const queryClient = new QueryClient({
 
 const server = setupServer()
 
-const wrapper = ({ children }: { children: React.ReactNode }) => (
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 )
 

src/services/repo/useRepoComponentsSelect.test.tsx

@@ -17,7 +17,7 @@ const queryClient = new QueryClient({
   },
 })
 
-const wrapper = ({ children }: { children: React.ReactNode }) => (
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <MemoryRouter initialEntries={['/gh/codecov/gazebo/flags']}>
     <Route path="/:provider/:owner/:repo/flags">
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>

src/services/repo/useRepoFlagsSelect.test.tsx

@@ -15,7 +15,7 @@ const queryClient = new QueryClient({
   },
 })
 
-const wrapper = ({ children }: { children: React.ReactNode }) => (
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <MemoryRouter initialEntries={['/gh/codecov/gazebo/flags']}>
     <Route path="/:provider/:owner/:repo/flags">
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>

src/services/repo/useRepoOverview.tsx

@@ -17,7 +17,7 @@ const RepositorySchema = z.object({
   languages: z.array(z.string()).nullable(),
 })
 
-const RequestSchema = z.object({
+export const RequestSchema = z.object({
   owner: z
     .object({
       isCurrentUserActivated: z.boolean().nullable(),

src/services/repo/useRepoSettings.test.tsx

@@ -11,7 +11,7 @@ const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 })
 
-const wrapper = ({ children }: { children: React.ReactNode }) => (
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <MemoryRouter initialEntries={['/gh/codecov/gazebo']}>
     <Route path="/:provider/:owner/:repo">
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>

src/services/repo/useRepoSettingsTeam.test.tsx

@@ -13,7 +13,7 @@ const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 })
 
-const wrapper = ({ children }: { children: React.ReactNode }) => (
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <MemoryRouter initialEntries={['/gh/codecov/gazebo']}>
     <Route path="/:provider/:owner/:repo">
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>

src/shared/GlobalTopBanners/TokenlessBanner/TokenRequiredBanner/TokenRequired.test.tsx

@@ -33,7 +33,7 @@ beforeEach(() => {
 })
 afterAll(() => server.close())
 
-const wrapper = ({ children }: { children: React.ReactNode }) => (
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <QueryClientProvider client={queryClient}>
     <MemoryRouter initialEntries={['/gh/codecov']}>
       <Route path="/:provider/:owner">{children}</Route>

src/shared/plan/BenefitList/BenefitList.jsx → src/shared/plan/BenefitList/BenefitList.tsx

@@ -1,8 +1,14 @@
-import PropType from 'prop-types'
-
 import Icon from 'old_ui/Icon'
 
-function BenefitList({ benefits, iconName, iconColor }) {
+function BenefitList({
+  benefits,
+  iconName,
+  iconColor,
+}: {
+  benefits: string[]
+  iconName: string
+  iconColor?: string
+}) {
   return (
     <ul className="flex flex-col gap-3">
       {benefits?.map((benefit) => (
@@ -16,10 +22,4 @@ function BenefitList({ benefits, iconName, iconColor }) {
   )
 }
 
-BenefitList.propTypes = {
-  benefits: PropType.arrayOf(PropType.string).isRequired,
-  iconName: PropType.string.isRequired,
-  iconColor: PropType.string,
-}
-
 export default BenefitList

src/shared/plan/ScheduledPlanDetails/ScheduledPlanDetails.test.jsx → src/shared/plan/ScheduledPlanDetails/ScheduledPlanDetails.test.tsx

@@ -8,7 +8,7 @@ const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 })
 
-const wrapper = ({ children }) => (
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <QueryClientProvider client={queryClient}>
     <MemoryRouter>{children}</MemoryRouter>
   </QueryClientProvider>

src/shared/plan/ScheduledPlanDetails/ScheduledPlanDetails.jsx → src/shared/plan/ScheduledPlanDetails/ScheduledPlanDetails.tsx

@@ -1,12 +1,21 @@
 import { format, fromUnixTime } from 'date-fns'
-import PropType from 'prop-types'
 
-export function getScheduleStart(scheduledPhase) {
+interface ScheduledPhase {
+  quantity: number
+  plan: string
+  startDate: number
+}
+
+export function getScheduleStart(scheduledPhase: ScheduledPhase): string {
   const scheduleStart = fromUnixTime(scheduledPhase?.startDate)
   return format(scheduleStart, 'MMMM do yyyy, h:mm aaaa')
 }
 
-function ScheduledPlanDetails({ scheduledPhase }) {
+function ScheduledPlanDetails({
+  scheduledPhase,
+}: {
+  scheduledPhase: ScheduledPhase
+}) {
   const { plan, quantity } = scheduledPhase
   const scheduleStart = getScheduleStart(scheduledPhase)
 
@@ -23,12 +32,4 @@ function ScheduledPlanDetails({ scheduledPhase }) {
   )
 }
 
-ScheduledPlanDetails.propTypes = {
-  scheduledPhase: PropType.shape({
-    quantity: PropType.number.isRequired,
-    plan: PropType.string.isRequired,
-    startDate: PropType.number.isRequired,
-  }),
-}
-
 export default ScheduledPlanDetails

src/shared/propTypes/dataMarketingType.js → src/shared/propTypes/dataMarketingType.ts

@@ -1,4 +1,7 @@
-export function dataMarketingType(props, propName) {
+export function dataMarketingType(
+  props: { [x: string]: any },
+  propName: string
+) {
   if (props[propName] === undefined || typeof props[propName] != 'string') {
     return new Error('You must provide prop "dataMarketing" of type string.')
   }

src/shared/treePaths/useCommitTreePath.js → src/shared/treePaths/useCommitTreePath.ts

@@ -1,27 +1,33 @@
 import dropRight from 'lodash/dropRight'
-import qs from 'qs'
+import qs, { ParsedQs } from 'qs'
 import { useMemo } from 'react'
 import { useLocation, useParams } from 'react-router-dom'
 
 import { getFilePathParts } from 'shared/utils/url'
 
-function getTreeLocation(paths, location, index) {
+function getTreeLocation(paths: string[], location: string, index: number) {
   return dropRight(paths, paths.length - index - 1).join('/')
 }
 
+interface URLParams {
+  repo: string
+  path: string
+  commit: string
+}
+
 export function useCommitTreePaths() {
-  const { repo, path, commit } = useParams()
+  const { repo, path, commit } = useParams<URLParams>()
   const location = useLocation()
 
-  const params = useMemo(() => {
+  const params: ParsedQs = useMemo(() => {
     return qs.parse(location.search, {
       ignoreQueryPrefix: true,
       depth: 1,
     })
   }, [location.search])
 
   const treePaths = useMemo(() => {
-    let queryParams = undefined
+    let queryParams: ParsedQs | undefined = undefined
     if (Object.keys(params).length > 0) {
       queryParams = params
     }

src/shared/treePaths/useCommitTreePaths.test.jsx → src/shared/treePaths/useCommitTreePaths.test.tsx

@@ -7,7 +7,7 @@ import { useCommitTreePaths } from './useCommitTreePath'
 describe('useCommitTreePaths', () => {
   describe('a path is provided', () => {
     describe('no duplicate names in path', () => {
-      const wrapper = ({ children }) => (
+      const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
         <MemoryRouter
           initialEntries={['/gh/owner/cool-repo/commit/sha256/tree/src/tests']}
         >
@@ -43,7 +43,7 @@ describe('useCommitTreePaths', () => {
     })
 
     describe('path has duplicate names', () => {
-      const wrapper = ({ children }) => (
+      const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
         <MemoryRouter
           initialEntries={[
             '/gh/owner/cool-repo/commit/sha256/tree/src/temp/src/temp/component',
@@ -98,7 +98,7 @@ describe('useCommitTreePaths', () => {
   })
 
   describe('no path is given', () => {
-    const wrapper = ({ children }) => (
+    const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
       <MemoryRouter initialEntries={['/gh/owner/cool-repo/commit/sha256/tree']}>
         <Route path="/:provider/:owner/:repo/commit/:commit/tree/">
           <div>{children}</div>
@@ -121,7 +121,7 @@ describe('useCommitTreePaths', () => {
 
   describe('viewing a file', () => {
     describe('a path is provided', () => {
-      const wrapper = ({ children }) => (
+      const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
         <MemoryRouter
           initialEntries={[
             '/gh/owner/cool-repo/commit/sha256/tree/src/file.js',
@@ -158,7 +158,7 @@ describe('useCommitTreePaths', () => {
   })
 
   describe('query string params are passed along', () => {
-    const wrapper = ({ children }) => (
+    const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
       <MemoryRouter
         initialEntries={[
           `/gh/owner/cool-repo/commit/sha256/tree/src/tests${qs.stringify(

src/shared/treePaths/useTreePaths.test.jsx → src/shared/treePaths/useTreePaths.test.tsx

@@ -3,7 +3,11 @@ import { renderHook, waitFor } from '@testing-library/react'
 import { graphql, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
 import qs from 'qs'
+import { ReactNode } from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
+import { z } from 'zod'
+
+import { RequestSchema } from 'services/repo'
 
 import { useTreePaths } from './useTreePaths'
 
@@ -18,7 +22,7 @@ const queryClient = new QueryClient({
 
 const wrapper =
   (initialEntries = '/gh/owner/coolrepo/tree/main/src%2Ftests') =>
-  ({ children }) => (
+  ({ children }: { children: ReactNode }) => (
     <QueryClientProvider client={queryClient}>
       <MemoryRouter initialEntries={[initialEntries]}>
         <Route path="/:provider/:owner/:repo">
@@ -57,7 +61,7 @@ const overviewMock = {
   owner: {
     isCurrentUserActivated: true,
     repository: {
-      __typename: 'Repository',
+      __typename: 'Repository' as const,
       private: false,
       defaultBranch: 'main',
       oldestCommitAt: '2022-10-10T11:59:59',
@@ -69,8 +73,12 @@ const overviewMock = {
   },
 }
 
+interface SetupArgs {
+  repoOverviewData?: z.infer<typeof RequestSchema>
+}
+
 describe('useTreePaths', () => {
-  function setup({ repoOverviewData }) {
+  function setup({ repoOverviewData }: SetupArgs) {
     server.use(
       graphql.query('GetRepoOverview', (info) => {
         return HttpResponse.json({ data: repoOverviewData })