Update tooltip text for search buttons (#23448)

GitOrigin-RevId: d189aac06c5f68e009eeb125d7cc225b41e8cc0c

services/web/frontend/js/features/source-editor/components/codemirror-search-form.tsx

@@ -29,6 +29,7 @@ import { useUserSettingsContext } from '@/shared/context/user-settings-context'
 import { getStoredSelection, setStoredSelection } from '../extensions/search'
 import { debounce } from 'lodash'
 import { EditorSelection, EditorState } from '@codemirror/state'
+import { sendSearchEvent } from '@/features/event-tracking/search-events'
 
 const MATCH_COUNT_DEBOUNCE_WAIT = 100 // the amount of ms to wait before counting matches
 const MAX_MATCH_COUNT = 999 // the maximum number of matches to count
@@ -197,6 +198,11 @@ const CodeMirrorSearchForm: FC = () => {
         case 'Enter':
           event.preventDefault()
           replaceNext(view)
+          sendSearchEvent('search-replace-click', {
+            searchType: 'document',
+            action: 'replace',
+            method: 'keyboard',
+          })
           break
 
         case 'Tab': {
@@ -459,7 +465,14 @@ const CodeMirrorSearchForm: FC = () => {
             <OLButton
               variant="secondary"
               size="sm"
-              onClick={() => replaceNext(view)}
+              onClick={() => {
+                sendSearchEvent('search-replace-click', {
+                  searchType: 'document',
+                  action: 'replace',
+                  method: 'button',
+                })
+                replaceNext(view)
+              }}
             >
               {t('search_replace')}
             </OLButton>
@@ -467,7 +480,14 @@ const CodeMirrorSearchForm: FC = () => {
             <OLButton
               variant="secondary"
               size="sm"
-              onClick={() => replaceAll(view)}
+              onClick={() => {
+                sendSearchEvent('search-replace-click', {
+                  searchType: 'document',
+                  action: 'replace-all',
+                  method: 'button',
+                })
+                replaceAll(view)
+              }}
             >
               {t('search_replace_all')}
             </OLButton>

services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx

@@ -4,11 +4,8 @@ import {
   useCodeMirrorStateContext,
   useCodeMirrorViewContext,
 } from './codemirror-context'
-import { searchPanelOpen } from '@codemirror/search'
 import { useResizeObserver } from '@/shared/hooks/use-resize-observer'
-import { ToolbarButton } from './toolbar/toolbar-button'
 import { ToolbarItems } from './toolbar/toolbar-items'
-import * as commands from '../extensions/toolbar/commands'
 import { ToolbarOverflow } from './toolbar/overflow'
 import useDropdown from '../../../shared/hooks/use-dropdown'
 import { getPanel } from '@codemirror/view'
@@ -21,8 +18,8 @@ import { isVisual } from '../extensions/visual/visual'
 import { language } from '@codemirror/language'
 import { minimumListDepthForSelection } from '../utils/tree-operations/ancestors'
 import { debugConsole } from '@/utils/debugging'
-import { bsVersion } from '@/features/utils/bootstrap-5'
 import { useTranslation } from 'react-i18next'
+import { ToggleSearchButton } from '@/features/source-editor/components/toolbar/toggle-search-button'
 
 export const CodeMirrorToolbar = () => {
   const view = useCodeMirrorViewContext()
@@ -173,14 +170,7 @@ const Toolbar = memo(function Toolbar() {
         className="ol-cm-toolbar-button-group ol-cm-toolbar-end"
         ref={handleButtons}
       >
-        <ToolbarButton
-          id="toolbar-toggle-search"
-          label="Toggle Search"
-          command={commands.toggleSearch}
-          active={searchPanelOpen(state)}
-          icon={bsVersion({ bs5: 'search', bs3: 'search' })}
-        />
-
+        <ToggleSearchButton state={state} />
         <SwitchToPDFButton />
         <DetacherSynctexControl />
         <DetachCompileButtonWrapper />

services/web/frontend/js/features/source-editor/components/toolbar/toggle-search-button.tsx

@@ -0,0 +1,22 @@
+import { FC } from 'react'
+import * as commands from '@/features/source-editor/extensions/toolbar/commands'
+import { searchPanelOpen } from '@codemirror/search'
+import { ToolbarButton } from '@/features/source-editor/components/toolbar/toolbar-button'
+import { EditorState } from '@codemirror/state'
+import { useTranslation } from 'react-i18next'
+import { isMac } from '@/shared/utils/os'
+
+export const ToggleSearchButton: FC<{ state: EditorState }> = ({ state }) => {
+  const { t } = useTranslation()
+
+  return (
+    <ToolbarButton
+      id="toolbar-toggle-search"
+      label={t('search_this_file')}
+      command={commands.toggleSearch}
+      active={searchPanelOpen(state)}
+      icon="search"
+      shortcut={isMac ? '⌘F' : 'Ctrl+F'}
+    />
+  )
+}