[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/shared/components/ol/ol-list-group-item.tsx

@@ -1,11 +1,19 @@
-import { forwardRef } from 'react'
+import { forwardRef, useId } from 'react'
 import { ListGroupItem, ListGroupItemProps } from 'react-bootstrap'
+import OLTooltip from '@/shared/components/ol/ol-tooltip'
 
-const OLListGroupItem = forwardRef<HTMLElement, ListGroupItemProps>(
-  function OLListGroupItem(props, ref) {
+type OLListGroupItemProps = ListGroupItemProps & {
+  disabledReason?: string
+}
+
+const OLListGroupItem = forwardRef<HTMLElement, OLListGroupItemProps>(
+  function OLListGroupItem({ disabledReason, ...props }, ref) {
     const as = props.as ?? 'button'
+    const tooltipId = useId()
 
-    return (
+    const showDisabledTooltip = Boolean(props.disabled && disabledReason)
+
+    const item = (
       <ListGroupItem
         {...props}
         ref={ref}
@@ -13,6 +21,20 @@ const OLListGroupItem = forwardRef<HTMLElement, ListGroupItemProps>(
         type={as === 'button' ? 'button' : undefined}
       />
     )
+
+    if (showDisabledTooltip) {
+      return (
+        <OLTooltip
+          id={tooltipId}
+          description={disabledReason}
+          overlayProps={{ placement: 'right' }}
+        >
+          <span className="d-block">{item}</span>
+        </OLTooltip>
+      )
+    }
+
+    return item
   }
 )