Merge pull request #25598 from overleaf/dp-proptypes-misc

Convert HotkeysModal components to Typescript

GitOrigin-RevId: c2cf7a3a33afeb996650faa6e3ed91c4fe14ef1a

services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal.jsx → services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
 import { Trans, useTranslation } from 'react-i18next'
 import HotkeysModalBottomText from './hotkeys-modal-bottom-text'
 import OLModal, {
@@ -17,6 +16,12 @@ export default function HotkeysModal({
   show,
   isMac = false,
   trackChangesVisible = false,
+}: {
+  animation?: boolean
+  handleHide: () => void
+  show: boolean
+  isMac?: boolean
+  trackChangesVisible?: boolean
 }) {
   const { t } = useTranslation()
 
@@ -201,15 +206,13 @@ export default function HotkeysModal({
   )
 }
 
-HotkeysModal.propTypes = {
-  animation: PropTypes.bool,
-  isMac: PropTypes.bool,
-  show: PropTypes.bool.isRequired,
-  handleHide: PropTypes.func.isRequired,
-  trackChangesVisible: PropTypes.bool,
-}
-
-function Hotkey({ combination, description }) {
+function Hotkey({
+  combination,
+  description,
+}: {
+  combination: string
+  description: string
+}) {
   return (
     <div className="hotkey" data-test-selector="hotkey">
       <span className="combination">{combination}</span>
@@ -217,7 +220,3 @@ function Hotkey({ combination, description }) {
     </div>
   )
 }
-Hotkey.propTypes = {
-  combination: PropTypes.string.isRequired,
-  description: PropTypes.string.isRequired,
-}

services/web/frontend/stories/hotkeys-modal.stories.jsx → services/web/frontend/stories/hotkeys-modal.stories.tsx

@@ -1,14 +1,17 @@
+import { ComponentProps } from 'react'
 import HotkeysModal from '../js/features/hotkeys-modal/components/hotkeys-modal'
 
-export const ReviewEnabled = args => {
+type HotkeysModalProps = ComponentProps<typeof HotkeysModal>
+
+export const ReviewEnabled = (args: HotkeysModalProps) => {
   return <HotkeysModal {...args} />
 }
 
-export const ReviewDisabled = args => {
+export const ReviewDisabled = (args: HotkeysModalProps) => {
   return <HotkeysModal {...args} trackChangesVisible={false} />
 }
 
-export const MacModifier = args => {
+export const MacModifier = (args: HotkeysModalProps) => {
   return <HotkeysModal {...args} isMac />
 }
 

services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal.test.jsx → services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal.test.tsx

@@ -13,7 +13,7 @@ describe('<HotkeysModal />', function () {
   it('renders the translated modal title on cm6', async function () {
     const { baseElement } = render(<HotkeysModal {...modalProps} />)
 
-    expect(baseElement.querySelector('.modal-title').textContent).to.equal(
+    expect(baseElement.querySelector('.modal-title')?.textContent).to.equal(
       'Hotkeys'
     )
   })