Merge pull request #35940 from overleaf/dp-visual-markdown-beta-icon

Add beta badge for markdown files in the file tree

GitOrigin-RevId: 304f426de9232a6d2a5fe768ae7e8b8f48fcd4d8

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

@@ -40,6 +40,11 @@ function FileTreeItemInner({
     useFeatureFlag('bibtex-visual-editor') &&
     type !== 'folder' &&
     name.toLowerCase().endsWith('.bib')
+  const showMarkdownBadge =
+    useFeatureFlag('markdown-visual') &&
+    type !== 'folder' &&
+    (name.toLowerCase().endsWith('.md') ||
+      name.toLowerCase().endsWith('.markdown'))
 
   const { dragRef, setIsDraggable } = useDraggable(id)
 
@@ -93,7 +98,7 @@ function FileTreeItemInner({
     >
       <div
         className={classNames('entity-name', 'entity-name-react', {
-          'file-tree-has-bib-badge': showBibBadge,
+          'file-tree-has-beta-badge': showBibBadge || showMarkdownBadge,
         })}
         role="presentation"
         ref={itemRef}
@@ -106,13 +111,21 @@ function FileTreeItemInner({
           setIsDraggable={setIsDraggable}
         />
         {showBibBadge && (
-          <div className="file-tree-bib-badge text-white">
+          <div className="file-tree-beta-badge text-white">
             <SplitTestBadge
               splitTestName="bibtex-visual-editor"
               displayOnVariants={['enabled']}
             />
           </div>
         )}
+        {showMarkdownBadge && (
+          <div className="file-tree-beta-badge text-white">
+            <SplitTestBadge
+              splitTestName="markdown-visual"
+              displayOnVariants={['enabled']}
+            />
+          </div>
+        )}
         {hasMenu ? <FileTreeItemMenu id={id} name={name} /> : null}
       </div>
     </div>

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

@@ -406,7 +406,7 @@
         }
       }
 
-      .file-tree-bib-badge {
+      .file-tree-beta-badge {
         position: absolute;
         right: var(--spacing-09);
         top: 0;
@@ -418,6 +418,7 @@
           font-size: var(--font-size-03);
 
           &.labs-badge {
+            padding: var(--spacing-01);
             color: var(--white);
           }
 
@@ -427,7 +428,7 @@
         }
       }
 
-      .file-tree-has-bib-badge .item-name {
+      .file-tree-has-beta-badge .item-name {
         padding-right: var(--spacing-09);
       }