From 8d940ad84101953d7fb6e2c86cf8a0ed3450503a Mon Sep 17 00:00:00 2001 From: David <33458145+davidmcpowell@users.noreply.github.com> Date: Mon, 12 May 2025 14:45:08 +0100 Subject: [PATCH] Merge pull request #25387 from overleaf/dp-editor-toolbar-proptypes Remove proptypes from editor-navigation-toolbar components GitOrigin-RevId: 77a1c4e13e3da6c06bb515b0137da2f70bfdf4a8 --- ...ggle-button.jsx => chat-toggle-button.tsx} | 17 +++--- ...obranding-logo.jsx => cobranding-logo.tsx} | 12 ++-- .../editor-navigation-toolbar-root.tsx | 6 +- ...e-button.jsx => history-toggle-button.tsx} | 7 +-- .../{menu-button.jsx => menu-button.tsx} | 7 +-- ...ers-widget.jsx => online-users-widget.tsx} | 54 ++++++++--------- ...ct-button.jsx => share-project-button.tsx} | 7 +-- ...{toolbar-header.jsx => toolbar-header.tsx} | 58 ++++++++++--------- ...on.jsx => track-changes-toggle-button.tsx} | 11 ++-- ...{upgrade-prompt.jsx => upgrade-prompt.tsx} | 2 +- .../js/shared/context/editor-context.tsx | 13 +---- services/web/types/cobranding.ts | 11 ++++ 12 files changed, 94 insertions(+), 111 deletions(-) rename services/web/frontend/js/features/editor-navigation-toolbar/components/{chat-toggle-button.jsx => chat-toggle-button.tsx} (76%) rename services/web/frontend/js/features/editor-navigation-toolbar/components/{cobranding-logo.jsx => cobranding-logo.tsx} (67%) rename services/web/frontend/js/features/editor-navigation-toolbar/components/{history-toggle-button.jsx => history-toggle-button.tsx} (77%) rename services/web/frontend/js/features/editor-navigation-toolbar/components/{menu-button.jsx => menu-button.tsx} (77%) rename services/web/frontend/js/features/editor-navigation-toolbar/components/{online-users-widget.jsx => online-users-widget.tsx} (77%) rename services/web/frontend/js/features/editor-navigation-toolbar/components/{share-project-button.jsx => share-project-button.tsx} (77%) rename services/web/frontend/js/features/editor-navigation-toolbar/components/{toolbar-header.jsx => toolbar-header.tsx} (82%) rename services/web/frontend/js/features/editor-navigation-toolbar/components/{track-changes-toggle-button.jsx => track-changes-toggle-button.tsx} (81%) rename services/web/frontend/js/features/editor-navigation-toolbar/components/{upgrade-prompt.jsx => upgrade-prompt.tsx} (96%) create mode 100644 services/web/types/cobranding.ts diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/chat-toggle-button.jsx b/services/web/frontend/js/features/editor-navigation-toolbar/components/chat-toggle-button.tsx similarity index 76% rename from services/web/frontend/js/features/editor-navigation-toolbar/components/chat-toggle-button.jsx rename to services/web/frontend/js/features/editor-navigation-toolbar/components/chat-toggle-button.tsx index 78afcdde42..3336d59aa6 100644 --- a/services/web/frontend/js/features/editor-navigation-toolbar/components/chat-toggle-button.jsx +++ b/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 diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/cobranding-logo.jsx b/services/web/frontend/js/features/editor-navigation-toolbar/components/cobranding-logo.tsx similarity index 67% rename from services/web/frontend/js/features/editor-navigation-toolbar/components/cobranding-logo.jsx rename to services/web/frontend/js/features/editor-navigation-toolbar/components/cobranding-logo.tsx index 80f3bc12b8..56d9f7b6ab 100644 --- a/services/web/frontend/js/features/editor-navigation-toolbar/components/cobranding-logo.jsx +++ b/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 ( 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 ( void }) { const { t } = useTranslation() return ( @@ -16,8 +15,4 @@ function HistoryToggleButton({ onClick }) { ) } -HistoryToggleButton.propTypes = { - onClick: PropTypes.func.isRequired, -} - export default HistoryToggleButton diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/menu-button.jsx b/services/web/frontend/js/features/editor-navigation-toolbar/components/menu-button.tsx similarity index 77% rename from services/web/frontend/js/features/editor-navigation-toolbar/components/menu-button.jsx rename to services/web/frontend/js/features/editor-navigation-toolbar/components/menu-button.tsx index fa3d8fa46c..fb059737dd 100644 --- a/services/web/frontend/js/features/editor-navigation-toolbar/components/menu-button.jsx +++ b/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 diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/online-users-widget.jsx b/services/web/frontend/js/features/editor-navigation-toolbar/components/online-users-widget.tsx similarity index 77% rename from services/web/frontend/js/features/editor-navigation-toolbar/components/online-users-widget.jsx rename to services/web/frontend/js/features/editor-navigation-toolbar/components/online-users-widget.tsx index 700bc5eb05..6188d5e8ea 100644 --- a/services/web/frontend/js/features/editor-navigation-toolbar/components/online-users-widget.jsx +++ b/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 ( - + @@ -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 ( { DropDownToggleButton.displayName = 'DropDownToggleButton' -DropDownToggleButton.propTypes = { - onlineUserCount: PropTypes.number.isRequired, - onClick: PropTypes.func, -} - export default OnlineUsersWidget diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/share-project-button.jsx b/services/web/frontend/js/features/editor-navigation-toolbar/components/share-project-button.tsx similarity index 77% rename from services/web/frontend/js/features/editor-navigation-toolbar/components/share-project-button.jsx rename to services/web/frontend/js/features/editor-navigation-toolbar/components/share-project-button.tsx index 6c4123f03d..359ce92ffb 100644 --- a/services/web/frontend/js/features/editor-navigation-toolbar/components/share-project-button.jsx +++ b/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 diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/toolbar-header.jsx b/services/web/frontend/js/features/editor-navigation-toolbar/components/toolbar-header.tsx similarity index 82% rename from services/web/frontend/js/features/editor-navigation-toolbar/components/toolbar-header.jsx rename to services/web/frontend/js/features/editor-navigation-toolbar/components/toolbar-header.tsx index 97bfa763cc..4304768c48 100644 --- a/services/web/frontend/js/features/editor-navigation-toolbar/components/toolbar-header.jsx +++ b/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 diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/track-changes-toggle-button.jsx b/services/web/frontend/js/features/editor-navigation-toolbar/components/track-changes-toggle-button.tsx similarity index 81% rename from services/web/frontend/js/features/editor-navigation-toolbar/components/track-changes-toggle-button.jsx rename to services/web/frontend/js/features/editor-navigation-toolbar/components/track-changes-toggle-button.tsx index 469dc7cd29..927e6ec2c5 100644 --- a/services/web/frontend/js/features/editor-navigation-toolbar/components/track-changes-toggle-button.jsx +++ b/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 diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/upgrade-prompt.jsx b/services/web/frontend/js/features/editor-navigation-toolbar/components/upgrade-prompt.tsx similarity index 96% rename from services/web/frontend/js/features/editor-navigation-toolbar/components/upgrade-prompt.jsx rename to services/web/frontend/js/features/editor-navigation-toolbar/components/upgrade-prompt.tsx index 594dd9feec..b5bbc1a0ba 100644 --- a/services/web/frontend/js/features/editor-navigation-toolbar/components/upgrade-prompt.jsx +++ b/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' }) } diff --git a/services/web/frontend/js/shared/context/editor-context.tsx b/services/web/frontend/js/shared/context/editor-context.tsx index b08f05450a..a3c01d57dd 100644 --- a/services/web/frontend/js/shared/context/editor-context.tsx +++ b/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 diff --git a/services/web/types/cobranding.ts b/services/web/types/cobranding.ts new file mode 100644 index 0000000000..dc6822be84 --- /dev/null +++ b/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 +}