From cc2861a2a3cb3f891cc5c35d9fdcca9cd156b248 Mon Sep 17 00:00:00 2001
From: Miguel Serrano <mserranom@users.noreply.github.com>
Date: Tue, 3 Aug 2021 12:02:45 +0200
Subject: [PATCH] Show hint for Symbol Palette search (#4373)

GitOrigin-RevId: cfdba4f31117cc406cee06e9a97db567c65d5348
---
 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  |  3 +++
 6 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json
index 9d208056ee..21f5993997 100644
--- a/services/web/frontend/extracted-translations.json
+++ b/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": "",
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 39d5e6d5c1..97f9cf948f 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,10 +66,13 @@ export default function SymbolPaletteContent({ handleSelect }) {
     <Tabs className="symbol-palette-container">
       <div className="symbol-palette">
         <div className="symbol-palette-header">
-          <SymbolPaletteTabs
-            categories={categories}
-            disabled={input.length > 0}
-          />
+          {input.length <= 0 ? (
+            <SymbolPaletteTabs categories={categories} />
+          ) : (
+            <div className="symbol-palette-search-hint">
+              {t('showing_symbol_search_results', { search: input })}
+            </div>
+          )}
           <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 ba74b0c1cd..d53cd93ac0 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,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
-          key={category.id}
-          disabled={disabled}
-          className="symbol-palette-tab"
-        >
+        <Tab key={category.id} className="symbol-palette-tab">
           {category.label}
         </Tab>
       ))}
@@ -23,5 +19,4 @@ 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 d256a6a7b4..5da0483e85 100644
--- a/services/web/frontend/stylesheets/app/editor/symbol-palette.less
+++ b/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;
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index c40341a3fc..43095ed966 100644
--- a/services/web/locales/en.json
+++ b/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",
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 1dc5253e32..2a15461f5b 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,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' })