[web] Disabled AI state for project collaborators (#34256)

* [web] Disabled AI state for project collaborators

Displays a disabled state, along with an informative tooltip in Editor AI controls.

GitOrigin-RevId: a749cd25d54f6ef3d7bf4276343400894bc193a4

services/web/frontend/js/features/source-editor/components/toolbar/math-dropdown.tsx

@@ -13,11 +13,15 @@ import { memo } from 'react'
 import OLListGroupItem from '@/shared/components/ol/ol-list-group-item'
 import sparkleWhite from '@/shared/svgs/sparkle-small-white.svg'
 import sparkle from '@/shared/svgs/ai-sparkle-text.svg'
+import getMeta from '@/utils/meta'
 
 export const MathDropdown = memo(function MathDropdown() {
   const { t } = useTranslation()
   const view = useCodeMirrorViewContext()
   const { writefullInstance } = useEditorContext()
+  const showAiFeaturesDisabled = getMeta('ol-showAiFeaturesDisabled')
+
+  const renderAIButton = writefullInstance || showAiFeaturesDisabled
 
   return (
     <ToolbarButtonMenu
@@ -25,13 +29,15 @@ export const MathDropdown = memo(function MathDropdown() {
       label={t('toolbar_insert_math')}
       icon={<MaterialIcon type="calculate" />}
     >
-      {writefullInstance && (
+      {renderAIButton && (
         <>
           <DropdownHeader className="ol-cm-toolbar-header mx-2">
             {t('toolbar_insert_math_lowercase')}
           </DropdownHeader>
           <OLListGroupItem
             aria-label={t('toolbar_generate_math')}
+            disabled={showAiFeaturesDisabled}
+            disabledReason={t('ai_features_unavailable_on_this_project')}
             onClick={() => {
               writefullInstance?.openEquationGenerator()
             }}
@@ -48,7 +54,9 @@ export const MathDropdown = memo(function MathDropdown() {
               src={sparkleWhite}
               aria-hidden="true"
             />
-            <span>{t('generate_from_text_or_image')}</span>
+            <span className={showAiFeaturesDisabled ? 'opacity-50' : ''}>
+              {t('generate_from_text_or_image')}
+            </span>
           </OLListGroupItem>
         </>
       )}

services/web/frontend/js/features/source-editor/components/toolbar/table-dropdown.tsx

@@ -14,10 +14,12 @@ import useDropdown from '../../../../shared/hooks/use-dropdown'
 import * as commands from '../../extensions/toolbar/commands'
 import { useCodeMirrorViewContext } from '../codemirror-context'
 import { emitToolbarEvent } from '../../extensions/toolbar/utils/analytics'
+import getMeta from '@/utils/meta'
 
 export const TableDropdown = memo(function TableDropdown() {
   const { t } = useTranslation()
   const { writefullInstance } = useEditorContext()
+  const showAiFeaturesDisabled = getMeta('ol-showAiFeaturesDisabled')
   const selectSizeDropdown = useDropdown()
   const target = useRef<any>(null)
   const view = useCodeMirrorViewContext()
@@ -46,6 +48,8 @@ export const TableDropdown = memo(function TableDropdown() {
           </DropdownHeader>
           <OLListGroupItem
             aria-label={t('toolbar_generate_table')}
+            disabled={showAiFeaturesDisabled}
+            disabledReason={t('ai_features_unavailable_on_this_project')}
             onClick={() => {
               writefullInstance?.openTableGenerator()
             }}
@@ -62,7 +66,9 @@ export const TableDropdown = memo(function TableDropdown() {
               src={sparkleWhite}
               aria-hidden="true"
             />
-            <span>{t('generate_from_text_or_image')}</span>
+            <span className={showAiFeaturesDisabled ? 'opacity-50' : ''}>
+              {t('generate_from_text_or_image')}
+            </span>
           </OLListGroupItem>
           <div className="ol-cm-toolbar-dropdown-divider mx-2 my-0" />
           <OLListGroupItem

services/web/frontend/js/features/source-editor/components/toolbar/toolbar-items.tsx

@@ -43,6 +43,8 @@ export const ToolbarItems: FC<{
   const isActive = withinFormattingCommand(state)
 
   const symbolPaletteAvailable = getMeta('ol-symbolPaletteAvailable')
+  const showAiFeaturesDisabled = getMeta('ol-showAiFeaturesDisabled')
+
   const showGroup = (group: string) => !overflowed || overflowed.has(group)
 
   return (
@@ -156,7 +158,11 @@ export const ToolbarItems: FC<{
                 icon="book_5"
               />
               <InsertFigureDropdown />
-              {writefullInstance ? <TableDropdown /> : <LegacyTableDropdown />}
+              {writefullInstance || showAiFeaturesDisabled ? (
+                <TableDropdown />
+              ) : (
+                <LegacyTableDropdown />
+              )}
             </div>
           )}
           {showGroup('group-list') && (