Add info link to symbol palette (#4086)

GitOrigin-RevId: 4950dd1a7b15e965ffc4d2651017f491ce9ecf99

services/web/frontend/extracted-translations.json

@@ -14,6 +14,7 @@
   "autocomplete": "",
   "autocomplete_references": "",
   "back_to_your_projects": "",
+  "beta_badge_tooltip": "",
   "blocked_filename": "",
   "can_edit": "",
   "cancel": "",
@@ -85,6 +86,7 @@
   "file_name_in_this_project": "",
   "file_outline": "",
   "files_cannot_include_invalid_characters": "",
+  "find_out_more_about_latex_symbols": "",
   "find_out_more_about_the_file_outline": "",
   "first_error_popup_label": "",
   "following_paths_conflict": "",

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

@@ -7,10 +7,12 @@ import { matchSorter } from 'match-sorter'
 import symbols from '../data/symbols.json'
 import { buildCategorisedSymbols, createCategories } from '../utils/categories'
 import SymbolPaletteSearch from './symbol-palette-search'
-
-import '@reach/tabs/styles.css'
 import SymbolPaletteBody from './symbol-palette-body'
 import SymbolPaletteTabs from './symbol-palette-tabs'
+// import SymbolPaletteInfoLink from './symbol-palette-info-link'
+import BetaBadge from '../../../shared/components/beta-badge'
+
+import '@reach/tabs/styles.css'
 
 export default function SymbolPaletteContent({ handleSelect }) {
   const [input, setInput] = useState('')
@@ -68,7 +70,20 @@ export default function SymbolPaletteContent({ handleSelect }) {
             categories={categories}
             disabled={input.length > 0}
           />
-          <SymbolPaletteSearch setInput={setInput} inputRef={inputRef} />
+          <div className="symbol-palette-header-group">
+            <BetaBadge
+              tooltip={{
+                id: 'tooltip-symbol-palette-beta',
+                text: t('beta_badge_tooltip', {
+                  feature: 'entering symbols',
+                }),
+                placement: 'top',
+              }}
+            />
+            {/* NOTE: replace the beta badge with this info link when rolling out to all users */}
+            {/* <SymbolPaletteInfoLink /> */}
+            <SymbolPaletteSearch setInput={setInput} inputRef={inputRef} />
+          </div>
         </div>
         <div className="symbol-palette-body">
           <SymbolPaletteBody

services/web/frontend/js/features/symbol-palette/components/symbol-palette-info-link.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+
+export default function SymbolPaletteInfoLink() {
+  const { t } = useTranslation()
+
+  return (
+    <OverlayTrigger
+      placement="top"
+      trigger={['hover', 'focus']}
+      overlay={
+        <Tooltip id="tooltip-symbol-palette-info">
+          {t('find_out_more_about_latex_symbols')}
+        </Tooltip>
+      }
+    >
+      <Button
+        bsStyle="link"
+        bsSize="small"
+        className="symbol-palette-info-link"
+        href="https://www.overleaf.com/learn/latex/List_of_Greek_letters_and_math_symbols"
+        target="_blank"
+        rel="noopener noreferer"
+      >
+        <span className="info-badge" />
+      </Button>
+    </OverlayTrigger>
+  )
+}

services/web/frontend/js/shared/components/beta-badge.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types'
 export default function BetaBadge({ tooltip }) {
   return (
     <OverlayTrigger
-      placement="bottom"
+      placement={tooltip.placement || 'bottom'}
       overlay={<Tooltip id={tooltip.id}>{tooltip.text}</Tooltip>}
       delayHide={100}
     >
@@ -25,5 +25,6 @@ BetaBadge.propTypes = {
   tooltip: PropTypes.exact({
     id: PropTypes.string.isRequired,
     text: PropTypes.string.isRequired,
+    placement: PropTypes.string,
   }),
 }

services/web/frontend/stories/symbol-palette.stories.js

@@ -4,7 +4,7 @@ import SymbolPalette from '../js/features/symbol-palette/components/symbol-palet
 
 export const Interactive = args => {
   return (
-    <div style={{ maxWidth: 600 }}>
+    <div style={{ maxWidth: 700, marginTop: 120 }}>
       <SymbolPalette {...args} />
     </div>
   )

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

@@ -16,6 +16,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
+  align-items: center;
   font-family: @font-family-sans-serif;
   font-size: 16px;
   background: @symbol-palette-header-background;
@@ -83,3 +84,16 @@
   height: auto;
   width: auto;
 }
+
+.symbol-palette-header-group {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  margin-left: @margin-xs;
+}
+
+.symbol-palette-info-link,
+.symbol-palette-info-link:focus,
+.symbol-palette-info-link:hover {
+  color: inherit;
+}

services/web/locales/en.json

@@ -1444,6 +1444,7 @@
   "category_relations": "Relations",
   "category_misc": "Misc",
   "no_symbols_found": "No symbols found",
+  "find_out_more_about_latex_symbols": "Find out more about LaTeX symbols",
   "search": "Search",
   "also": "Also",
   "add_email": "Add Email",