Add SplitTestBadge to file tree for .bib files (#33460)

GitOrigin-RevId: 7ae109844d5d0b984eeec25ea22572b304375c47

services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-inner.tsx

@@ -8,6 +8,8 @@ import { useDraggable } from '../../contexts/file-tree-draggable'
 
 import FileTreeItemName from './file-tree-item-name'
 import FileTreeItemMenu from './file-tree-item-menu'
+import SplitTestBadge from '@/shared/components/split-test-badge'
+import { useFeatureFlag } from '@/shared/context/split-test-context'
 import { useFileTreeSelectable } from '../../contexts/file-tree-selectable'
 import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
 import { useDragDropManager } from 'react-dnd'
@@ -30,11 +32,14 @@ function FileTreeItemInner({
   const { fileTreeReadOnly } = useFileTreeData()
   const { setContextMenuCoords } = useFileTreeMainContext()
   const { isRenaming } = useFileTreeActionable()
-
   const { selectedEntityIds } = useFileTreeSelectable()
 
   const hasMenu =
     !fileTreeReadOnly && isSelected && selectedEntityIds.size === 1
+  const showBibBadge =
+    useFeatureFlag('bibtex-visual-editor') &&
+    type !== 'folder' &&
+    name.toLowerCase().endsWith('.bib')
 
   const { dragRef, setIsDraggable } = useDraggable(id)
 
@@ -87,7 +92,9 @@ function FileTreeItemInner({
       data-file-type={type}
     >
       <div
-        className="entity-name entity-name-react"
+        className={classNames('entity-name', 'entity-name-react', {
+          'file-tree-has-bib-badge': showBibBadge,
+        })}
         role="presentation"
         ref={itemRef}
       >
@@ -98,6 +105,14 @@ function FileTreeItemInner({
           onClick={onClick}
           setIsDraggable={setIsDraggable}
         />
+        {showBibBadge && (
+          <div className="file-tree-bib-badge text-white">
+            <SplitTestBadge
+              splitTestName="bibtex-visual-editor"
+              displayOnVariants={['enabled']}
+            />
+          </div>
+        )}
         {hasMenu ? <FileTreeItemMenu id={id} name={name} /> : null}
       </div>
     </div>

services/web/frontend/stylesheets/pages/editor/file-tree.scss

@@ -485,6 +485,31 @@
         }
       }
 
+      .file-tree-bib-badge {
+        position: absolute;
+        right: var(--spacing-09);
+        top: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+
+        .material-symbols {
+          font-size: var(--font-size-03);
+
+          &.labs-badge {
+            color: var(--white);
+          }
+
+          &.info-badge {
+            color: var(--blue-50);
+          }
+        }
+      }
+
+      .file-tree-has-bib-badge .item-name {
+        padding-right: var(--spacing-09);
+      }
+
       .menu-button {
         position: absolute;
         right: 0;