Merge pull request #3536 from overleaf/ta-file-tree-beta

[ReactFileTree] Release to Beta Users

GitOrigin-RevId: 34e4120c6e296e11b21c23e350b9b516c0ce5428

services/web/app/src/Features/Project/ProjectController.js

@@ -837,7 +837,7 @@ const ProjectController = {
               showSupport: Features.hasFeature('support'),
               showNewLogsUI: user.alphaProgram && !wantsOldLogsUI,
               showNewChatUI: user.betaProgram && !wantsOldChatUI,
-              showReactFileTree: user.alphaProgram && !wantsOldFileTreeUI
+              showReactFileTree: user.betaProgram && !wantsOldFileTreeUI
             })
             timer.done()
           }

services/web/frontend/extracted-translation-keys.json

@@ -119,5 +119,6 @@
   "headers",
   "math_inline",
   "math_display",
-  "done"
+  "done",
+  "file_tree_badge_tooltip"
 ]

services/web/frontend/js/features/file-tree/components/file-tree-badge.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
+
+function FileTreeBadge() {
+  const { t } = useTranslation()
+
+  const tooltip = (
+    <Tooltip id="file-tree-badge-tooltip">
+      {t('file_tree_badge_tooltip')}
+    </Tooltip>
+  )
+
+  return (
+    <OverlayTrigger placement="bottom" overlay={tooltip} delayHide={100}>
+      <a
+        href="/beta/participate"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="badge beta-badge"
+        onClick={ev => ev.stopPropagation()}
+      >
+        <span className="sr-only">{t('file_tree_badge_tooltip')}</span>
+      </a>
+    </OverlayTrigger>
+  )
+}
+
+export default FileTreeBadge

services/web/frontend/js/features/file-tree/components/file-tree-toolbar.js

@@ -7,6 +7,8 @@ import TooltipButton from '../../../shared/components/tooltip-button'
 import { FileTreeMainContext } from '../contexts/file-tree-main'
 import { useFileTreeActionable } from '../contexts/file-tree-actionable'
 
+import FileTreeBadge from './file-tree-badge'
+
 function FileTreeToolbar() {
   const { hasWritePermissions } = useContext(FileTreeMainContext)
 
@@ -71,7 +73,13 @@ function FileTreeToolbarRight() {
     startDeleting
   } = useFileTreeActionable()
 
-  if (!canRename && !canDelete) return null
+  if (!canRename && !canDelete) {
+    return (
+      <div className="toolbar-right">
+        <FileTreeBadge />
+      </div>
+    )
+  }
 
   return (
     <div className="toolbar-right">
@@ -93,6 +101,7 @@ function FileTreeToolbarRight() {
           <Icon type="trash-o" modifier="fw" accessibilityLabel={t('delete')} />
         </TooltipButton>
       ) : null}
+      <FileTreeBadge />
     </div>
   )
 }

services/web/frontend/stylesheets/_style_includes.less

@@ -56,6 +56,7 @@
 @import 'components/nvd3_override.less';
 @import 'components/infinite-scroll.less';
 @import 'components/expand-collapse.less';
+@import 'components/beta-badges.less';
 
 // Components w/ JavaScript
 @import 'components/modals.less';

services/web/frontend/stylesheets/app/editor/outline.less

@@ -62,30 +62,6 @@
   text-overflow: ellipsis;
 }
 
-.outline-header-info-badge {
-  display: inline-block;
-  width: @outline-h-rhythm * 0.75;
-  height: @outline-v-rhythm * 0.75;
-  line-height: @outline-v-rhythm * 0.75;
-  text-align: center;
-  cursor: pointer;
-  background-color: @info-badge-bg;
-  font-family: @font-family-serif;
-  color: #fff;
-  font-style: italic;
-  border-radius: @outline-h-rhythm * 0.375;
-
-  &::before {
-    content: 'i';
-  }
-
-  &:hover,
-  &:focus {
-    color: #fff;
-    text-decoration: none;
-  }
-}
-
 .outline-body {
   overflow-y: auto;
   background-color: @file-tree-bg;

services/web/frontend/stylesheets/app/editor/toolbar.less

@@ -23,11 +23,11 @@
     outline: none;
   }
 
-  > a:not(.btn),
+  > a:not(.btn):not(.badge),
   > button,
-  .toolbar-left > a:not(.btn),
+  .toolbar-left > a:not(.btn):not(.badge),
   .toolbar-left > button,
-  .toolbar-right > a:not(.btn),
+  .toolbar-right > a:not(.btn):not(.badge),
   .toolbar-right > button {
     display: inline-block;
     color: @toolbar-icon-btn-color;
@@ -61,6 +61,10 @@
     }
   }
 
+  .toolbar-right > a.badge {
+    margin-left: 5px;
+  }
+
   &.toolbar-pdf > a:not(.btn) {
     margin-right: 3px;
   }

services/web/frontend/stylesheets/components/beta-badges.less

@@ -0,0 +1,36 @@
+.info-badge,
+.beta-badge {
+  display: block;
+  width: @line-height-computed * 0.75;
+  height: @line-height-computed * 0.75;
+  line-height: @line-height-computed * 0.75;
+  text-align: center;
+  cursor: pointer;
+  color: #fff;
+
+  &:hover,
+  &:focus {
+    color: #fff;
+    text-decoration: none;
+  }
+}
+
+.info-badge {
+  background-color: @info-badge-bg;
+  border-radius: @line-height-computed * 0.75;
+  font-family: @font-family-serif;
+  font-style: italic;
+
+  &::before {
+    content: 'i';
+  }
+}
+
+.beta-badge {
+  background-color: @orange;
+  border-radius: @border-radius-base;
+
+  &::before {
+    content: 'β';
+  }
+}

services/web/locales/en.json

@@ -1281,6 +1281,7 @@
   "highest_priority_compiling": "Highest priority compiling",
   "dropbox_sync": "Dropbox Sync",
   "beta": "Beta",
+  "file_tree_badge_tooltip": "We made some improvements to the file tree. We hope you like it! Click here to manage your beta program membership",
   "sign_up_now": "Sign Up Now",
   "annual": "Annual",
   "half_price_student": "Half Price Student Plans",