Merge pull request #36092 from overleaf/mj-command-palette-pre-release

[web] Pre-labs-release changes for command palette

GitOrigin-RevId: 578cf56f1ef51996ce928466edf50e360fa73b42

services/web/frontend/js/features/command-palette/components/command-palette-body.tsx

@@ -13,6 +13,8 @@ import classNames from 'classnames'
 import useEventListener from '@/shared/hooks/use-event-listener'
 import useCommandPaletteResults from '../hooks/use-command-palette-results'
 import { debugConsole } from '@/utils/debugging'
+import SplitTestBadge from '@/shared/components/split-test-badge'
+import { useTranslation } from 'react-i18next'
 
 type CommandPaletteBodyProps = {
   show: boolean
@@ -24,6 +26,7 @@ const CommandPaletteBody: FC<CommandPaletteBodyProps> = ({ show, onHide }) => {
   const [selectedIndex, setSelectedIndex] = useState(0)
   const resultsRef = useRef<HTMLUListElement>(null)
   const results = useCommandPaletteResults(query)
+  const { t } = useTranslation()
 
   useEffect(() => {
     setSelectedIndex(0)
@@ -91,15 +94,20 @@ const CommandPaletteBody: FC<CommandPaletteBodyProps> = ({ show, onHide }) => {
       themed
     >
       <OLModalBody>
-        <input
-          type="text"
-          value={query}
-          onChange={e => setQuery(e.target.value)}
-          onKeyDown={onKeyDown}
-          placeholder="Type a command..."
-          aria-label="Command palette search"
-          className="command-palette-input"
-        />
+        <div className="command-palette-input">
+          <input
+            type="text"
+            value={query}
+            onChange={e => setQuery(e.target.value)}
+            onKeyDown={onKeyDown}
+            placeholder={t('type_a_command')}
+            aria-label={t('command_palette_search')}
+          />
+          <SplitTestBadge
+            displayOnVariants={['enabled']}
+            splitTestName="command-palette"
+          />
+        </div>
         <ul ref={resultsRef} className="command-palette-results">
           {results.map((result, index) => (
             <li

services/web/frontend/js/features/command-palette/components/command-palette-root.tsx

@@ -8,10 +8,13 @@ import {
 import useCommandPaletteTriggers from '../hooks/use-command-palette-triggers'
 import CommandPaletteBody from './command-palette-body'
 import { useLayoutContext } from '@/shared/context/layout-context'
+import { useCommandProvider } from '@/features/ide-react/hooks/use-command-provider'
+import { useTranslation } from 'react-i18next'
 
 const CommandPaletteRoot = () => {
   const [show, _setShow] = useState(false)
   const { view } = useLayoutContext()
+  const { t } = useTranslation()
 
   const setShow: Dispatch<SetStateAction<boolean>> = useCallback(
     value => {
@@ -29,6 +32,19 @@ const CommandPaletteRoot = () => {
   useCommandPaletteTriggers(setShow)
   const onHide = useCallback(() => setShow(false), [setShow])
 
+  useCommandProvider(() => {
+    if (view === 'history') {
+      return
+    }
+    return [
+      {
+        id: 'command-palette',
+        label: t('command_palette'),
+        handler: () => setShow(true),
+      },
+    ]
+  }, [view, t, setShow])
+
   if (!show) {
     return null
   }