Merge pull request #5650 from overleaf/hb-remove-symbol-search-hint

Show disabled tabs instead of hint on symbol search

GitOrigin-RevId: bc67fd4928da38d895f6c811364e017cc3ec9061

services/web/frontend/extracted-translations.json

@@ -312,7 +312,6 @@
   "show_outline": "",
   "showing_1_result": "",
   "showing_1_result_of_total": "",
-  "showing_symbol_search_results": "",
   "showing_x_results": "",
   "showing_x_results_of_total": "",
   "something_went_wrong_rendering_pdf": "",

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

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

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

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

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

@@ -28,11 +28,6 @@
   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

@@ -1485,7 +1485,6 @@
   "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,8 +69,8 @@ describe('symbol palette', function () {
       expect(symbols).to.have.length(2)
     })
 
-    // check the search hint is displayed
-    screen.getByText('Showing search results for "pi"')
+    // check the tabs are disabled
+    expect(selectedTab.disabled).to.be.true
 
     // press Tab to select the symbols
     fireEvent.keyDown(container, { key: 'Tab' })