Show hint for Symbol Palette search (#4373)

GitOrigin-RevId: cfdba4f31117cc406cee06e9a97db567c65d5348

services/web/frontend/extracted-translations.json

@@ -213,6 +213,7 @@
   "no_preview_available": "",
   "no_search_results": "",
   "no_symbols_found": "",
+  "showing_symbol_search_results": "",
   "normal": "",
   "off": "",
   "ok": "",

services/web/frontend/js/features/symbol-palette/components/symbol-palette-content.js

@@ -66,10 +66,13 @@ export default function SymbolPaletteContent({ handleSelect }) {
     <Tabs className="symbol-palette-container">
       <div className="symbol-palette">
         <div className="symbol-palette-header">
-          <SymbolPaletteTabs
+          {input.length <= 0 ? (
-            categories={categories}
+            <SymbolPaletteTabs categories={categories} />
-            disabled={input.length > 0}
+          ) : (
-          />
+            <div className="symbol-palette-search-hint">
+              {t('showing_symbol_search_results', { search: input })}
+            </div>
+          )}
           <div className="symbol-palette-header-group">
             <BetaBadge
               tooltip={{

services/web/frontend/js/features/symbol-palette/components/symbol-palette-tabs.js

@@ -1,15 +1,11 @@
 import { TabList, Tab } from '@reach/tabs'
 import PropTypes from 'prop-types'
 
-export default function SymbolPaletteTabs({ categories, disabled }) {
+export default function SymbolPaletteTabs({ categories }) {
   return (
     <TabList aria-label="Symbol Categories" className="symbol-palette-tab-list">
       {categories.map(category => (
-        <Tab
+        <Tab key={category.id} className="symbol-palette-tab">
-          key={category.id}
-          disabled={disabled}
-          className="symbol-palette-tab"
-        >
           {category.label}
         </Tab>
       ))}
@@ -23,5 +19,4 @@ SymbolPaletteTabs.propTypes = {
       label: PropTypes.string.isRequired,
     })
   ).isRequired,
-  disabled: PropTypes.bool,
 }

services/web/frontend/stylesheets/app/editor/symbol-palette.less

@@ -28,6 +28,11 @@
   margin-left: @margin-xs;
 }
 
+.symbol-palette-search-hint {
+  padding-left: @padding-xs;
+  margin-left: @margin-xs;
+}
+
 .symbol-palette-tab-list[data-reach-tab-list] {
   background: none;
   border-bottom: none;

services/web/locales/en.json

@@ -1462,6 +1462,7 @@
   "category_misc": "Misc",
   "no_symbols_found": "No symbols found",
   "find_out_more_about_latex_symbols": "Find out more about LaTeX symbols",
+  "showing_symbol_search_results": "Showing search results for \"__search__\"",
   "search": "Search",
   "also": "Also",
   "add_email": "Add Email",

services/web/test/frontend/features/symbol-palette/components/symbol-palette.test.js

@@ -69,6 +69,9 @@ describe('symbol palette', function () {
       expect(symbols).to.have.length(2)
     })
 
+    // check the search hint is displayed
+    screen.getByText('Showing search results for "pi"')
+
     // press Tab to select the symbols
     fireEvent.keyDown(container, { key: 'Tab' })