Merge pull request #25387 from overleaf/dp-editor-toolbar-proptypes

Remove proptypes from editor-navigation-toolbar components

GitOrigin-RevId: 77a1c4e13e3da6c06bb515b0137da2f70bfdf4a8

services/web/frontend/js/features/editor-navigation-toolbar/components/chat-toggle-button.jsx → services/web/frontend/js/features/editor-navigation-toolbar/components/chat-toggle-button.tsx

@@ -1,10 +1,17 @@
-import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { useTranslation } from 'react-i18next'
 import MaterialIcon from '@/shared/components/material-icon'
 import OLBadge from '@/features/ui/components/ol/ol-badge'
 
-function ChatToggleButton({ chatIsOpen, unreadMessageCount, onClick }) {
+function ChatToggleButton({
+  chatIsOpen,
+  unreadMessageCount,
+  onClick,
+}: {
+  chatIsOpen: boolean
+  unreadMessageCount: number
+  onClick: () => void
+}) {
   const { t } = useTranslation()
   const classes = classNames('btn', 'btn-full-height', { active: chatIsOpen })
 
@@ -26,10 +33,4 @@ function ChatToggleButton({ chatIsOpen, unreadMessageCount, onClick }) {
   )
 }
 
-ChatToggleButton.propTypes = {
-  chatIsOpen: PropTypes.bool,
-  unreadMessageCount: PropTypes.number.isRequired,
-  onClick: PropTypes.func.isRequired,
-}
-
 export default ChatToggleButton

services/web/frontend/js/features/editor-navigation-toolbar/components/cobranding-logo.jsx → services/web/frontend/js/features/editor-navigation-toolbar/components/cobranding-logo.tsx

@@ -1,9 +1,11 @@
-import PropTypes from 'prop-types'
-
 function CobrandingLogo({
   brandVariationHomeUrl,
   brandVariationName,
   logoImgUrl,
+}: {
+  brandVariationHomeUrl: string
+  brandVariationName: string
+  logoImgUrl: string
 }) {
   return (
     <a
@@ -21,10 +23,4 @@ function CobrandingLogo({
   )
 }
 
-CobrandingLogo.propTypes = {
-  brandVariationHomeUrl: PropTypes.string.isRequired,
-  brandVariationName: PropTypes.string.isRequired,
-  logoImgUrl: PropTypes.string.isRequired,
-}
-
 export default CobrandingLogo

services/web/frontend/js/features/editor-navigation-toolbar/components/editor-navigation-toolbar-root.tsx

@@ -6,6 +6,7 @@ import { useLayoutContext } from '../../../shared/context/layout-context'
 import { useProjectContext } from '../../../shared/context/project-context'
 import * as eventTracking from '../../../infrastructure/event-tracking'
 import { Doc } from '../../../../../types/doc'
+import { OnlineUser } from '@/features/ide-react/context/online-users-context'
 
 function isOpentoString(open: boolean) {
   return open ? 'open' : 'close'
@@ -17,7 +18,7 @@ const EditorNavigationToolbarRoot = React.memo(
     openDoc,
     openShareProjectModal,
   }: {
-    onlineUsersArray: any[]
+    onlineUsersArray: OnlineUser[]
     openDoc: (doc: Doc, { gotoLine }: { gotoLine: number }) => void
     openShareProjectModal: () => void
   }) {
@@ -93,7 +94,7 @@ const EditorNavigationToolbarRoot = React.memo(
     }, [setLeftMenuShown])
 
     const goToUser = useCallback(
-      (user: any) => {
+      (user: OnlineUser) => {
         if (user.doc && typeof user.row === 'number') {
           openDoc(user.doc, { gotoLine: user.row + 1 })
         }
@@ -103,7 +104,6 @@ const EditorNavigationToolbarRoot = React.memo(
 
     return (
       <ToolbarHeader
-        // @ts-ignore: TODO(convert ToolbarHeader to TSX)
         cobranding={cobranding}
         onShowLeftMenuClick={onShowLeftMenuClick}
         chatIsOpen={chatIsOpen}

services/web/frontend/js/features/editor-navigation-toolbar/components/history-toggle-button.jsx → services/web/frontend/js/features/editor-navigation-toolbar/components/history-toggle-button.tsx

@@ -1,8 +1,7 @@
-import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 import MaterialIcon from '@/shared/components/material-icon'
 
-function HistoryToggleButton({ onClick }) {
+function HistoryToggleButton({ onClick }: { onClick: () => void }) {
   const { t } = useTranslation()
 
   return (
@@ -16,8 +15,4 @@ function HistoryToggleButton({ onClick }) {
   )
 }
 
-HistoryToggleButton.propTypes = {
-  onClick: PropTypes.func.isRequired,
-}
-
 export default HistoryToggleButton

services/web/frontend/js/features/editor-navigation-toolbar/components/menu-button.jsx → services/web/frontend/js/features/editor-navigation-toolbar/components/menu-button.tsx

@@ -1,8 +1,7 @@
-import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 import MaterialIcon from '@/shared/components/material-icon'
 
-function MenuButton({ onClick }) {
+function MenuButton({ onClick }: { onClick: () => void }) {
   const { t } = useTranslation()
 
   return (
@@ -15,8 +14,4 @@ function MenuButton({ onClick }) {
   )
 }
 
-MenuButton.propTypes = {
-  onClick: PropTypes.func.isRequired,
-}
-
 export default MenuButton

services/web/frontend/js/features/editor-navigation-toolbar/components/online-users-widget.jsx → services/web/frontend/js/features/editor-navigation-toolbar/components/online-users-widget.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 import {
   Dropdown,
@@ -11,17 +10,27 @@ import {
 import { getBackgroundColorForUserId } from '@/shared/utils/colors'
 import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
 import MaterialIcon from '@/shared/components/material-icon'
+import { OnlineUser } from '@/features/ide-react/context/online-users-context'
 
-function OnlineUsersWidget({ onlineUsers, goToUser }) {
+function OnlineUsersWidget({
+  onlineUsers,
+  goToUser,
+}: {
+  onlineUsers: OnlineUser[]
+  goToUser: (user: OnlineUser) => void
+}) {
   const { t } = useTranslation()
 
   const shouldDisplayDropdown = onlineUsers.length >= 4
 
   if (shouldDisplayDropdown) {
     return (
-      <Dropdown id="online-users" className="online-users" align="end">
+      <Dropdown className="online-users" align="end">
         <DropdownToggle
+          id="online-users"
           as={DropDownToggleButton}
+          // @ts-ignore: fix type of DropdownToggle with "as" prop so that it can accept
+          // custom props for that component
           onlineUserCount={onlineUsers.length}
         />
         <DropdownMenu>
@@ -63,17 +72,15 @@ function OnlineUsersWidget({ onlineUsers, goToUser }) {
   }
 }
 
-OnlineUsersWidget.propTypes = {
-  onlineUsers: PropTypes.arrayOf(
-    PropTypes.shape({
-      user_id: PropTypes.string.isRequired,
-      name: PropTypes.string.isRequired,
-    })
-  ).isRequired,
-  goToUser: PropTypes.func.isRequired,
-}
-
-function UserIcon({ user, showName, onClick }) {
+function UserIcon({
+  user,
+  showName,
+  onClick,
+}: {
+  user: OnlineUser
+  showName?: boolean
+  onClick?: (user: OnlineUser) => void
+}) {
   const backgroundColor = getBackgroundColorForUserId(user.user_id)
 
   function handleOnClick() {
@@ -93,16 +100,10 @@ function UserIcon({ user, showName, onClick }) {
   )
 }
 
-UserIcon.propTypes = {
-  user: PropTypes.shape({
-    user_id: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
-  }),
-  showName: PropTypes.bool,
-  onClick: PropTypes.func,
-}
-
-const DropDownToggleButton = React.forwardRef((props, ref) => {
+const DropDownToggleButton = React.forwardRef<
+  HTMLButtonElement,
+  { onlineUserCount: number; onClick: React.MouseEventHandler }
+>((props, ref) => {
   const { t } = useTranslation()
   return (
     <OLTooltip
@@ -125,9 +126,4 @@ const DropDownToggleButton = React.forwardRef((props, ref) => {
 
 DropDownToggleButton.displayName = 'DropDownToggleButton'
 
-DropDownToggleButton.propTypes = {
-  onlineUserCount: PropTypes.number.isRequired,
-  onClick: PropTypes.func,
-}
-
 export default OnlineUsersWidget

services/web/frontend/js/features/editor-navigation-toolbar/components/share-project-button.jsx → services/web/frontend/js/features/editor-navigation-toolbar/components/share-project-button.tsx

@@ -1,8 +1,7 @@
-import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 import MaterialIcon from '@/shared/components/material-icon'
 
-function ShareProjectButton({ onClick }) {
+function ShareProjectButton({ onClick }: { onClick: () => void }) {
   const { t } = useTranslation()
 
   return (
@@ -16,8 +15,4 @@ function ShareProjectButton({ onClick }) {
   )
 }
 
-ShareProjectButton.propTypes = {
-  onClick: PropTypes.func.isRequired,
-}
-
 export default ShareProjectButton

services/web/frontend/js/features/editor-navigation-toolbar/components/toolbar-header.jsx → services/web/frontend/js/features/editor-navigation-toolbar/components/toolbar-header.tsx

@@ -1,5 +1,4 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, { ElementType } from 'react'
 import { useTranslation } from 'react-i18next'
 import MenuButton from './menu-button'
 import CobrandingLogo from './cobranding-logo'
@@ -18,13 +17,22 @@ import getMeta from '@/utils/meta'
 import { isSplitTestEnabled } from '@/utils/splitTestUtils'
 import { canUseNewEditor } from '@/features/ide-redesign/utils/new-editor-utils'
 import TryNewEditorButton from '../try-new-editor-button'
+import { OnlineUser } from '@/features/ide-react/context/online-users-context'
+import { Cobranding } from '../../../../../types/cobranding'
 
-const [publishModalModules] = importOverleafModules('publishModal')
+const [publishModalModules] = importOverleafModules('publishModal') as {
+  import: { default: ElementType }
+  path: string
+}[]
 const PublishButton = publishModalModules?.import.default
 
 const offlineModeToolbarButtons = importOverleafModules(
   'offlineModeToolbarButtons'
-)
+) as {
+  import: { default: ElementType }
+  path: string
+}[]
+
 // double opt-in
 const enableROMirrorOnClient =
   isSplitTestEnabled('ro-mirror-on-client') &&
@@ -51,6 +59,26 @@ const ToolbarHeader = React.memo(function ToolbarHeader({
   hasRenamePermissions,
   openShareModal,
   trackChangesVisible,
+}: {
+  cobranding: Cobranding | undefined
+  onShowLeftMenuClick: () => void
+  chatIsOpen: boolean
+  toggleChatOpen: () => void
+  reviewPanelOpen: boolean
+  toggleReviewPanelOpen: (e: React.MouseEvent) => void
+  historyIsOpen: boolean
+  toggleHistoryOpen: () => void
+  unreadMessageCount: number
+  onlineUsers: OnlineUser[]
+  goToUser: (user: OnlineUser) => void
+  isRestrictedTokenMember: boolean | undefined
+  hasPublishPermissions: boolean
+  chatVisible: boolean
+  projectName: string
+  renameProject: (name: string) => void
+  hasRenamePermissions: boolean
+  openShareModal: () => void
+  trackChangesVisible: boolean | undefined
 }) {
   const chatEnabled = getMeta('ol-chatEnabled')
 
@@ -132,26 +160,4 @@ const ToolbarHeader = React.memo(function ToolbarHeader({
   )
 })
 
-ToolbarHeader.propTypes = {
-  onShowLeftMenuClick: PropTypes.func.isRequired,
-  cobranding: PropTypes.object,
-  chatIsOpen: PropTypes.bool,
-  toggleChatOpen: PropTypes.func.isRequired,
-  reviewPanelOpen: PropTypes.bool,
-  toggleReviewPanelOpen: PropTypes.func.isRequired,
-  historyIsOpen: PropTypes.bool,
-  toggleHistoryOpen: PropTypes.func.isRequired,
-  unreadMessageCount: PropTypes.number.isRequired,
-  onlineUsers: PropTypes.array.isRequired,
-  goToUser: PropTypes.func.isRequired,
-  isRestrictedTokenMember: PropTypes.bool,
-  hasPublishPermissions: PropTypes.bool,
-  chatVisible: PropTypes.bool,
-  projectName: PropTypes.string.isRequired,
-  renameProject: PropTypes.func.isRequired,
-  hasRenamePermissions: PropTypes.bool,
-  openShareModal: PropTypes.func.isRequired,
-  trackChangesVisible: PropTypes.bool,
-}
-
 export default ToolbarHeader

services/web/frontend/js/features/editor-navigation-toolbar/components/track-changes-toggle-button.jsx → services/web/frontend/js/features/editor-navigation-toolbar/components/track-changes-toggle-button.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { useTranslation } from 'react-i18next'
 import MaterialIcon from '@/shared/components/material-icon'
@@ -7,6 +6,10 @@ function TrackChangesToggleButton({
   trackChangesIsOpen,
   disabled,
   onMouseDown,
+}: {
+  trackChangesIsOpen: boolean
+  disabled?: boolean
+  onMouseDown: (e: React.MouseEvent) => void
 }) {
   const { t } = useTranslation()
   const classes = classNames('btn', 'btn-full-height', {
@@ -30,10 +33,4 @@ function TrackChangesToggleButton({
   )
 }
 
-TrackChangesToggleButton.propTypes = {
-  trackChangesIsOpen: PropTypes.bool,
-  disabled: PropTypes.bool,
-  onMouseDown: PropTypes.func.isRequired,
-}
-
 export default TrackChangesToggleButton

services/web/frontend/js/features/editor-navigation-toolbar/components/upgrade-prompt.jsx → services/web/frontend/js/features/editor-navigation-toolbar/components/upgrade-prompt.tsx

@@ -5,7 +5,7 @@ import OLButton from '@/features/ui/components/ol/ol-button'
 function UpgradePrompt() {
   const { t } = useTranslation()
 
-  function handleClick(e) {
+  function handleClick() {
     eventTracking.send('subscription-funnel', 'code-editor', 'upgrade')
     eventTracking.sendMB('upgrade-button-click', { source: 'code-editor' })
   }

services/web/frontend/js/shared/context/editor-context.tsx

@@ -20,20 +20,11 @@ import { saveProjectSettings } from '@/features/editor-left-menu/utils/api'
 import { PermissionsLevel } from '@/features/ide-react/types/permissions'
 import { useModalsContext } from '@/features/ide-react/context/modals-context'
 import { WritefullAPI } from './types/writefull-instance'
+import { Cobranding } from '../../../../types/cobranding'
 
 export const EditorContext = createContext<
   | {
-      cobranding?: {
-        logoImgUrl: string
-        brandVariationName: string
-        brandVariationId: number
-        brandId: number
-        brandVariationHomeUrl: string
-        publishGuideHtml?: string
-        partner?: string
-        brandedMenu?: boolean
-        submitBtnHtml?: string
-      }
+      cobranding?: Cobranding
       hasPremiumCompile?: boolean
       renameProject: (newName: string) => void
       setPermissionsLevel: (permissionsLevel: PermissionsLevel) => void

services/web/types/cobranding.ts

@@ -0,0 +1,11 @@
+export type Cobranding = {
+  logoImgUrl: string
+  brandVariationName: string
+  brandVariationId: number
+  brandId: number
+  brandVariationHomeUrl: string
+  publishGuideHtml?: string
+  partner?: string
+  brandedMenu?: boolean
+  submitBtnHtml?: string
+}