From b63cb6e02993288e5bcfdce8a2d2397ab159b2b8 Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Fri, 7 Jul 2023 07:34:44 +0100
Subject: [PATCH] Merge pull request #13623 from
 overleaf/ae-symbol-palette-toolbar

[cm6] Only show symbol palette toolbar button when available

GitOrigin-RevId: 34e2c4e8ac1077a4da15277188ea0456db26e0af
---
 .../src/Features/Project/ProjectController.js |  1 +
 .../web/app/src/infrastructure/Features.js    |  5 +++++
 .../web/app/views/project/editor/meta.pug     |  1 +
 .../components/toolbar/toolbar-items.tsx      | 21 +++++++++++--------
 .../codemirror-editor-visual-toolbar.spec.tsx | 12 +++++++++++
 5 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/services/web/app/src/Features/Project/ProjectController.js b/services/web/app/src/Features/Project/ProjectController.js
index c7d8e68ca1..0d47a4d659 100644
--- a/services/web/app/src/Features/Project/ProjectController.js
+++ b/services/web/app/src/Features/Project/ProjectController.js
@@ -939,6 +939,7 @@ const ProjectController = {
                 !showLegacySourceEditor &&
                 sourceEditorToolbarAssigment.variant === 'enabled',
               showSymbolPalette,
+              symbolPaletteAvailable: Features.hasFeature('symbol-palette'),
               galileoEnabled,
               galileoFeatures,
               galileoPromptWords,
diff --git a/services/web/app/src/infrastructure/Features.js b/services/web/app/src/infrastructure/Features.js
index 5c420a2486..254e289986 100644
--- a/services/web/app/src/infrastructure/Features.js
+++ b/services/web/app/src/infrastructure/Features.js
@@ -6,6 +6,9 @@ const publicRegistrationModuleAvailable =
 
 const supportModuleAvailable = Settings.moduleImportSequence.includes('support')
 
+const symbolPaletteModuleAvailable =
+  Settings.moduleImportSequence.includes('symbol-palette')
+
 const trackChangesModuleAvailable =
   Settings.moduleImportSequence.includes('track-changes')
 
@@ -92,6 +95,8 @@ const Features = {
         return publicRegistrationModuleAvailable
       case 'support':
         return supportModuleAvailable
+      case 'symbol-palette':
+        return symbolPaletteModuleAvailable
       case 'track-changes':
         return trackChangesModuleAvailable
       default:
diff --git a/services/web/app/views/project/editor/meta.pug b/services/web/app/views/project/editor/meta.pug
index 15c5a6b433..1a98582f1b 100644
--- a/services/web/app/views/project/editor/meta.pug
+++ b/services/web/app/views/project/editor/meta.pug
@@ -24,6 +24,7 @@ meta(name="ol-debugPdfDetach" data-type="boolean" content=debugPdfDetach)
 meta(name="ol-showLegacySourceEditor", data-type="boolean" content=showLegacySourceEditor)
 meta(name="ol-showSourceToolbar", data-type="boolean" content=showSourceToolbar)
 meta(name="ol-showSymbolPalette" data-type="boolean" content=showSymbolPalette)
+meta(name="ol-symbolPaletteAvailable" data-type="boolean" content=symbolPaletteAvailable)
 meta(name="ol-galileoEnabled" data-type="string" content=galileoEnabled)
 meta(name="ol-galileoPromptWords" data-type="string" content=galileoPromptWords)
 meta(name="ol-galileoFeatures" data-type="json" content=galileoFeatures)
diff --git a/services/web/frontend/js/features/source-editor/components/toolbar/toolbar-items.tsx b/services/web/frontend/js/features/source-editor/components/toolbar/toolbar-items.tsx
index 07f51df2d6..e967a37ba6 100644
--- a/services/web/frontend/js/features/source-editor/components/toolbar/toolbar-items.tsx
+++ b/services/web/frontend/js/features/source-editor/components/toolbar/toolbar-items.tsx
@@ -47,6 +47,7 @@ export const ToolbarItems: FC<{
   )
 
   const showFigureModal = splitTestVariants['figure-modal'] === 'enabled'
+  const symbolPaletteAvailable = getMeta('ol-symbolPaletteAvailable')
   const showGroup = (group: string) => !overflowed || overflowed.has(group)
 
   return (
@@ -100,15 +101,17 @@ export const ToolbarItems: FC<{
       {showGroup('group-math') && (
         <div className="ol-cm-toolbar-button-group" data-overflow="group-math">
           <MathDropdown />
-          <ToolbarButton
-            id="toolbar-toggle-symbol-palette"
-            label={t('toolbar_toggle_symbol_palette')}
-            active={showSymbolPalette}
-            command={toggleSymbolPalette}
-            icon="Ω"
-            textIcon
-            className="ol-cm-toolbar-button-math"
-          />
+          {symbolPaletteAvailable && (
+            <ToolbarButton
+              id="toolbar-toggle-symbol-palette"
+              label={t('toolbar_toggle_symbol_palette')}
+              active={showSymbolPalette}
+              command={toggleSymbolPalette}
+              icon="Ω"
+              textIcon
+              className="ol-cm-toolbar-button-math"
+            />
+          )}
         </div>
       )}
       {showGroup('group-misc') && (
diff --git a/services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-toolbar.spec.tsx b/services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-toolbar.spec.tsx
index b623ae7479..92829a49ef 100644
--- a/services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-toolbar.spec.tsx
+++ b/services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-toolbar.spec.tsx
@@ -316,4 +316,16 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
       ].join('')
     )
   })
+
+  it('should display the Toggle Symbol Palette button when available', function () {
+    window.metaAttributesCache.set('ol-symbolPaletteAvailable', true)
+    mountEditor('')
+    clickToolbarButton('Toggle Symbol Palette')
+  })
+
+  it('should not display the Toggle Symbol Palette button when not available', function () {
+    window.metaAttributesCache.set('ol-symbolPaletteAvailable', false)
+    mountEditor('')
+    cy.findByLabelText('Toggle Symbol Palette').should('not.exist')
+  })
 })