ref: Convert OptionButton and DisplayTypeButton to TS (#3759)

spalmurray-codecov · web-flow · commit 9e10243072a3 · 2025-02-21T15:27:18.000Z
diff --git a/src/pages/CommitDetailPage/CommitCoverage/routes/CommitDetailFileExplorer/CommitDetailFileExplorer.tsx b/src/pages/CommitDetailPage/CommitCoverage/routes/CommitDetailFileExplorer/CommitDetailFileExplorer.tsx
@@ -1,7 +1,7 @@
 import ToggleHeader from 'pages/CommitDetailPage/Header/ToggleHeader/ToggleHeader'
 import { useLocationParams } from 'services/navigation'
 import ContentsTableHeader from 'shared/ContentsTable/ContentsTableHeader'
-import DisplayTypeButton from 'shared/ContentsTable/DisplayTypeButton'
+import { DisplayTypeButton } from 'shared/ContentsTable/DisplayTypeButton/DisplayTypeButton'
 import { useCommitTreePaths } from 'shared/treePaths'
 import Breadcrumb from 'ui/Breadcrumb'
 import SearchField from 'ui/SearchField'
diff --git a/src/pages/PlanPage/subRoutes/UpgradePlanPage/PlanDetailsControls/PlanDetailsControls.tsx b/src/pages/PlanPage/subRoutes/UpgradePlanPage/PlanDetailsControls/PlanDetailsControls.tsx
@@ -11,7 +11,7 @@ import {
   findTeamPlans,
 } from 'shared/utils/billing'
 import { TEAM_PLAN_MAX_ACTIVE_USERS } from 'shared/utils/upgradeForm'
-import OptionButton from 'ui/OptionButton'
+import { OptionButton } from 'ui/OptionButton/OptionButton'
 
 interface PlanDetailsControlsProps {
   setSelectedPlan: (x?: IndividualPlan) => void
@@ -52,14 +52,16 @@ const PlanDetailsControls: React.FC<PlanDetailsControlsProps> = ({
             }
             setOption(text)
           }}
-          options={[
-            {
-              text: 'Pro',
-            },
-            {
-              text: 'Team',
-            },
-          ]}
+          options={
+            [
+              {
+                text: 'Pro',
+              },
+              {
+                text: 'Team',
+              },
+            ] as const
+          }
         />
         {option === 'Team' && <p>Up to {TEAM_PLAN_MAX_ACTIVE_USERS} users</p>}
       </div>
diff --git a/src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/Controllers/ProPlanController/BillingOptions/BillingOptions.tsx b/src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/Controllers/ProPlanController/BillingOptions/BillingOptions.tsx
@@ -8,7 +8,7 @@ import {
 } from 'services/account/useAvailablePlans'
 import { usePlanData } from 'services/account/usePlanData'
 import { BillingRate, findProPlans } from 'shared/utils/billing'
-import OptionButton from 'ui/OptionButton'
+import { OptionButton } from 'ui/OptionButton/OptionButton'
 
 import { OptionPeriod, TimePeriods } from '../../../constants'
 import { UpgradeFormFields } from '../../../UpgradeForm'
@@ -78,14 +78,16 @@ const BillingControls: React.FC<BillingControlsProps> = ({
 
             setOption(text)
           }}
-          options={[
-            {
-              text: TimePeriods.ANNUAL,
-            },
-            {
-              text: TimePeriods.MONTHLY,
-            },
-          ]}
+          options={
+            [
+              {
+                text: TimePeriods.ANNUAL,
+              },
+              {
+                text: TimePeriods.MONTHLY,
+              },
+            ] as const
+          }
         />
         <p>
           <span className="font-semibold">${baseUnitPrice}</span> per
diff --git a/src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/Controllers/SentryPlanController/BillingOptions/BillingOptions.tsx b/src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/Controllers/SentryPlanController/BillingOptions/BillingOptions.tsx
@@ -8,7 +8,7 @@ import {
 } from 'services/account/useAvailablePlans'
 import { usePlanData } from 'services/account/usePlanData'
 import { BillingRate, findSentryPlans } from 'shared/utils/billing'
-import OptionButton from 'ui/OptionButton'
+import { OptionButton } from 'ui/OptionButton/OptionButton'
 
 import { OptionPeriod, TimePeriods } from '../../../constants'
 import { UpgradeFormFields } from '../../../UpgradeForm'
@@ -79,14 +79,16 @@ const BillingControls: React.FC<BillingControlsProps> = ({
 
             setOption(text)
           }}
-          options={[
-            {
-              text: TimePeriods.ANNUAL,
-            },
-            {
-              text: TimePeriods.MONTHLY,
-            },
-          ]}
+          options={
+            [
+              {
+                text: TimePeriods.ANNUAL,
+              },
+              {
+                text: TimePeriods.MONTHLY,
+              },
+            ] as const
+          }
         />
         <p>
           <span className="font-semibold">${baseUnitPrice}</span> per
diff --git a/src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/Controllers/TeamPlanController/BillingOptions/BillingOptions.tsx b/src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/Controllers/TeamPlanController/BillingOptions/BillingOptions.tsx
@@ -8,7 +8,7 @@ import {
 } from 'services/account/useAvailablePlans'
 import { usePlanData } from 'services/account/usePlanData'
 import { BillingRate, findTeamPlans } from 'shared/utils/billing'
-import OptionButton from 'ui/OptionButton'
+import { OptionButton } from 'ui/OptionButton/OptionButton'
 
 import { OptionPeriod, TimePeriods } from '../../../constants'
 import { UpgradeFormFields } from '../../../UpgradeForm'
@@ -78,14 +78,16 @@ const BillingControls: React.FC<BillingControlsProps> = ({
 
             setOption(text)
           }}
-          options={[
-            {
-              text: TimePeriods.ANNUAL,
-            },
-            {
-              text: TimePeriods.MONTHLY,
-            },
-          ]}
+          options={
+            [
+              {
+                text: TimePeriods.ANNUAL,
+              },
+              {
+                text: TimePeriods.MONTHLY,
+              },
+            ] as const
+          }
         />
         <p>
           <span className="font-semibold">${baseUnitPrice}</span> per
diff --git a/src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/PlanTypeOptions/PlanTypeOptions.tsx b/src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/PlanTypeOptions/PlanTypeOptions.tsx
@@ -17,7 +17,7 @@ import {
   TierNames,
 } from 'shared/utils/billing'
 import { TEAM_PLAN_MAX_ACTIVE_USERS } from 'shared/utils/upgradeForm'
-import OptionButton from 'ui/OptionButton'
+import { OptionButton } from 'ui/OptionButton/OptionButton'
 
 import { TierName } from '../constants'
 import { usePlanParams } from '../hooks/usePlanParams'
@@ -94,14 +94,16 @@ const PlanTypeOptions: React.FC<PlanTypeOptionsProps> = ({
                 updateParams({ plan: TierNames.TEAM })
               }
             }}
-            options={[
-              {
-                text: TierName.PRO,
-              },
-              {
-                text: TierName.TEAM,
-              },
-            ]}
+            options={
+              [
+                {
+                  text: TierName.PRO,
+                },
+                {
+                  text: TierName.TEAM,
+                },
+              ] as const
+            }
           />
           {planOption === TierName.TEAM && (
             <p>Up to {TEAM_PLAN_MAX_ACTIVE_USERS} users</p>
diff --git a/src/pages/PullRequestPage/PullCoverage/routes/FileExplorer/FileExplorer.tsx b/src/pages/PullRequestPage/PullCoverage/routes/FileExplorer/FileExplorer.tsx
@@ -1,7 +1,7 @@
 import ToggleHeader from 'pages/PullRequestPage/Header/ToggleHeader/ToggleHeader'
 import { useLocationParams } from 'services/navigation'
 import ContentsTableHeader from 'shared/ContentsTable/ContentsTableHeader'
-import DisplayTypeButton from 'shared/ContentsTable/DisplayTypeButton'
+import { DisplayTypeButton } from 'shared/ContentsTable/DisplayTypeButton/DisplayTypeButton'
 import { usePullTreePaths } from 'shared/treePaths'
 import Breadcrumb from 'ui/Breadcrumb'
 import SearchField from 'ui/SearchField'
diff --git a/src/pages/RepoPage/CoverageTab/OverviewTab/subroute/FileExplorer/FileExplorer.jsx b/src/pages/RepoPage/CoverageTab/OverviewTab/subroute/FileExplorer/FileExplorer.jsx
@@ -1,5 +1,5 @@
 import { useLocationParams } from 'services/navigation'
-import DisplayTypeButton from 'shared/ContentsTable/DisplayTypeButton'
+import { DisplayTypeButton } from 'shared/ContentsTable/DisplayTypeButton/DisplayTypeButton'
 import FileBreadcrumb from 'shared/ContentsTable/FileBreadcrumb'
 import SearchField from 'ui/SearchField'
 
diff --git a/src/pages/RepoPage/CoverageTab/OverviewTab/subroute/FileExplorer/FileExplorer.test.jsx b/src/pages/RepoPage/CoverageTab/OverviewTab/subroute/FileExplorer/FileExplorer.test.jsx
@@ -9,8 +9,8 @@ import FileExplorer from './FileExplorer'
 
 vi.mock('./FileListTable', () => ({ default: () => 'File list table' }))
 vi.mock('./CodeTreeTable', () => ({ default: () => 'Code tree table' }))
-vi.mock('shared/ContentsTable/DisplayTypeButton', () => ({
-  default: () => 'Display type button',
+vi.mock('shared/ContentsTable/DisplayTypeButton/DisplayTypeButton', () => ({
+  DisplayTypeButton: () => 'Display type button',
 }))
 vi.mock('shared/ContentsTable/FileBreadcrumb', () => ({
   default: () => 'File breadcrumb',
diff --git a/src/shared/ContentsTable/DisplayTypeButton/DisplayTypeButton.test.tsx b/src/shared/ContentsTable/DisplayTypeButton/DisplayTypeButton.test.tsx
@@ -1,10 +1,11 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { Mock } from 'vitest'
 
 import { useLocationParams } from 'services/navigation'
 
-import DisplayTypeButton from './DisplayTypeButton'
+import { DisplayTypeButton } from './DisplayTypeButton'
 
 vi.mock('services/navigation', () => {
   const originalModule = vi.importActual('services/navigation')
@@ -14,6 +15,8 @@ vi.mock('services/navigation', () => {
   }
 })
 
+const mockedUseLocationParams = useLocationParams as Mock
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -54,7 +57,7 @@ const mockUrlParams = {
 describe('Coverage Tab', () => {
   function setup(urlParams = mockUrlParams) {
     const user = userEvent.setup()
-    useLocationParams.mockReturnValue({
+    mockedUseLocationParams.mockReturnValue({
       updateParams: vi.fn(),
       params: urlParams,
     })
diff --git a/src/shared/ContentsTable/DisplayTypeButton/DisplayTypeButton.tsx b/src/shared/ContentsTable/DisplayTypeButton/DisplayTypeButton.tsx
@@ -1,8 +1,7 @@
-import PropTypes from 'prop-types'
 import { useState } from 'react'
 
 import { useLocationParams } from 'services/navigation'
-import OptionButton from 'ui/OptionButton'
+import { OptionButton } from 'ui/OptionButton/OptionButton'
 
 import { displayTypeParameter } from '../constants'
 
@@ -15,21 +14,31 @@ const options = [
     text: 'File list',
     displayType: displayTypeParameter.list,
   },
-]
+] as const
+type Options = (typeof options)[number]
 
-function initialState(urlParams) {
+// useLocationParams is pain
+function initialState(urlParams: any): Options {
   const [treeView, listView] = options
   return urlParams?.displayType ===
     displayTypeParameter.list.toLocaleLowerCase()
     ? listView
     : treeView
 }
 
-function DisplayTypeButton({ dataLength, isLoading }) {
+interface DisplayTypeButtonProps {
+  dataLength?: number
+  isLoading?: boolean
+}
+
+export function DisplayTypeButton({
+  dataLength,
+  isLoading,
+}: DisplayTypeButtonProps) {
   const { params, updateParams } = useLocationParams()
-  const [active, setActive] = useState(() => initialState(params))
+  const [active, setActive] = useState<Options>(() => initialState(params))
 
-  function handleOnChange(option) {
+  function handleOnChange(option: Options) {
     updateParams({ displayType: option.displayType.toLowerCase() })
     setActive(option)
   }
@@ -49,10 +58,3 @@ function DisplayTypeButton({ dataLength, isLoading }) {
     </div>
   )
 }
-
-DisplayTypeButton.propTypes = {
-  dataLength: PropTypes.number,
-  isLoading: PropTypes.bool,
-}
-
-export default DisplayTypeButton
diff --git a/src/shared/ContentsTable/DisplayTypeButton/index.js b/src/shared/ContentsTable/DisplayTypeButton/index.js
diff --git a/src/ui/OptionButton/OptionButton.jsx b/src/ui/OptionButton/OptionButton.jsx
diff --git a/src/ui/OptionButton/OptionButton.stories.jsx b/src/ui/OptionButton/OptionButton.stories.jsx
diff --git a/src/ui/OptionButton/OptionButton.stories.tsx b/src/ui/OptionButton/OptionButton.stories.tsx
@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+
+import { OptionButton } from './OptionButton'
+
+type OptionButtonStory = React.ComponentProps<typeof OptionButton>
+
+const meta: Meta<OptionButtonStory> = {
+  title: 'Components/OptionButton',
+  component: OptionButton,
+} as Meta
+export default meta
+
+type Story = StoryObj<OptionButtonStory>
+
+export const Default: Story = {
+  render: () => {
+    const [active, setActive] = useState<'Orym' | 'Chetney' | 'Imogen'>(
+      'Chetney'
+    )
+    return (
+      <OptionButton
+        active={active}
+        options={
+          [{ text: 'Orym' }, { text: 'Chetney' }, { text: 'Imogen' }] as const
+        }
+        onChange={(option) => setActive(option.text)}
+      />
+    )
+  },
+}
diff --git a/src/ui/OptionButton/OptionButton.test.tsx b/src/ui/OptionButton/OptionButton.test.tsx
diff --git a/src/ui/OptionButton/OptionButton.tsx b/src/ui/OptionButton/OptionButton.tsx
diff --git a/src/ui/OptionButton/index.ts b/src/ui/OptionButton/index.ts
