From d8dfcf77080283e1e8065f5ccd6e291b0ded8a65 Mon Sep 17 00:00:00 2001
From: Hugh O'Brien <hugh.obrien@overleaf.com>
Date: Tue, 9 Nov 2021 11:01:16 +0000
Subject: [PATCH] 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     |  1 -
 .../components/symbol-palette-content.js              | 11 ++++-------
 .../symbol-palette/components/symbol-palette-tabs.js  |  9 +++++++--
 .../stylesheets/app/editor/symbol-palette.less        |  5 -----
 services/web/locales/en.json                          |  1 -
 .../symbol-palette/components/symbol-palette.test.js  |  4 ++--
 6 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json
index 5b61a7e412..82381b10e7 100644
--- a/services/web/frontend/extracted-translations.json
+++ b/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": "",
diff --git a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-content.js b/services/web/frontend/js/features/symbol-palette/components/symbol-palette-content.js
index 97f9cf948f..39d5e6d5c1 100644
--- a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-content.js
+++ b/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={{
diff --git a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-tabs.js b/services/web/frontend/js/features/symbol-palette/components/symbol-palette-tabs.js
index d53cd93ac0..ba74b0c1cd 100644
--- a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-tabs.js
+++ b/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,
 }
diff --git a/services/web/frontend/stylesheets/app/editor/symbol-palette.less b/services/web/frontend/stylesheets/app/editor/symbol-palette.less
index 5da0483e85..d256a6a7b4 100644
--- a/services/web/frontend/stylesheets/app/editor/symbol-palette.less
+++ b/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;
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index 8d4323e0ad..66a1d91710 100644
--- a/services/web/locales/en.json
+++ b/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",
diff --git a/services/web/test/frontend/features/symbol-palette/components/symbol-palette.test.js b/services/web/test/frontend/features/symbol-palette/components/symbol-palette.test.js
index 2a15461f5b..cae926e686 100644
--- a/services/web/test/frontend/features/symbol-palette/components/symbol-palette.test.js
+++ b/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' })