Merge pull request #13623 from overleaf/ae-symbol-palette-toolbar

[cm6] Only show symbol palette toolbar button when available

GitOrigin-RevId: 34e2c4e8ac1077a4da15277188ea0456db26e0af

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,

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:

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)

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') && (

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')
+  })
 })