Merge pull request #3832 from overleaf/ae-modal-beta

* Add BetaBadge component
* Add beta_badge_tooltip translation
* Add beta badge to modal headers
* Enable Share and Add Files modals for beta users

GitOrigin-RevId: df0933830a0745c0ecf57db34f2cb75104a570cd

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

@@ -744,10 +744,10 @@ const ProjectController = {
         )
         const wantsOldFileTreeUI =
           req.query && req.query.new_file_tree_ui === 'false'
-        const wantsNewShareModalUI =
-          req.query && req.query.new_share_modal_ui === 'true'
-        const wantsNewAddFilesModalUI =
-          req.query && req.query.new_add_files_modal_ui === 'true'
+        const wantsOldShareModalUI =
+          req.query && req.query.new_share_modal_ui === 'false'
+        const wantsOldAddFilesModalUI =
+          req.query && req.query.new_add_files_modal_ui === 'false'
 
         AuthorizationManager.getPrivilegeLevelForProject(
           userId,
@@ -865,8 +865,9 @@ const ProjectController = {
               showNewNavigationUI:
                 req.query && req.query.new_navigation_ui === 'true',
               showReactFileTree: !wantsOldFileTreeUI,
-              showReactShareModal: wantsNewShareModalUI,
-              showReactAddFilesModal: wantsNewAddFilesModalUI
+              showReactShareModal: user.betaProgram && !wantsOldShareModalUI,
+              showReactAddFilesModal:
+                user.betaProgram && !wantsOldAddFilesModalUI
             })
             timer.done()
           }

services/web/frontend/extracted-translations.json

@@ -9,6 +9,7 @@
   "autocomplete": "",
   "autocomplete_references": "",
   "back_to_your_projects": "",
+  "beta_badge_tooltip": "",
   "blocked_filename": "",
   "can_edit": "",
   "cancel": "",
@@ -201,4 +202,4 @@
   "zotero_reference_loading_error_expired": "",
   "zotero_reference_loading_error_forbidden": "",
   "zotero_sync_description": ""
-}
+}

services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-create-file.js

@@ -1,23 +1,34 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { Modal } from 'react-bootstrap'
 import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
 import FileTreeCreateFormProvider from '../../contexts/file-tree-create-form'
 import FileTreeModalCreateFileBody from '../file-tree-create/file-tree-modal-create-file-body'
 import FileTreeModalCreateFileFooter from '../file-tree-create/file-tree-modal-create-file-footer'
 import AccessibleModal from '../../../../shared/components/accessible-modal'
+import BetaBadge from '../../../../shared/components/beta-badge'
 
 export default function FileTreeModalCreateFile() {
   const { isCreatingFile, cancel } = useFileTreeActionable()
+  const { t } = useTranslation()
 
   if (!isCreatingFile) {
     return null
   }
 
+  const tooltip = {
+    id: 'create-file-beta-tooltip',
+    text: t('beta_badge_tooltip', { feature: 'adding files' })
+  }
+
   return (
     <FileTreeCreateFormProvider>
       <AccessibleModal bsSize="large" onHide={cancel} show>
         <Modal.Header closeButton>
-          <Modal.Title>Add Files</Modal.Title>
+          <Modal.Title>
+            Add Files &nbsp;
+            <BetaBadge tooltip={tooltip} />
+          </Modal.Title>
         </Modal.Header>
 
         <Modal.Body className="modal-new-file">

services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.js

@@ -1,11 +1,12 @@
 import React from 'react'
 import { Button, Modal, Grid } from 'react-bootstrap'
-import { Trans } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import ShareModalBody from './share-modal-body'
 import Icon from '../../../shared/components/icon'
 import AccessibleModal from '../../../shared/components/accessible-modal'
 import PropTypes from 'prop-types'
 import { ReadOnlyTokenLink } from './link-sharing'
+import BetaBadge from '../../../shared/components/beta-badge'
 
 export default function ShareProjectModalContent({
   show,
@@ -14,11 +15,20 @@ export default function ShareProjectModalContent({
   inFlight,
   error
 }) {
+  const { t } = useTranslation()
+
+  const tooltip = {
+    id: 'create-file-beta-tooltip',
+    text: t('beta_badge_tooltip', { feature: 'project sharing' })
+  }
+
   return (
     <AccessibleModal show={show} onHide={cancel} animation={animation}>
       <Modal.Header closeButton>
         <Modal.Title>
           <Trans i18nKey="share_project" />
+          &nbsp;&nbsp;
+          <BetaBadge tooltip={tooltip} />
         </Modal.Title>
       </Modal.Header>
 

services/web/frontend/js/shared/components/beta-badge.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
+import PropTypes from 'prop-types'
+
+export default function BetaBadge({ tooltip }) {
+  return (
+    <OverlayTrigger
+      placement="bottom"
+      overlay={<Tooltip id={tooltip.id}>{tooltip.text}</Tooltip>}
+      delayHide={100}
+    >
+      <a
+        href="/beta/participate"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="badge beta-badge"
+      >
+        <span className="sr-only">{tooltip.text}</span>
+      </a>
+    </OverlayTrigger>
+  )
+}
+
+BetaBadge.propTypes = {
+  tooltip: PropTypes.exact({
+    id: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired
+  })
+}

services/web/locales/en.json

@@ -657,6 +657,7 @@
   "manage_beta_program_membership": "Manage Beta Program Membership",
   "beta_program_opt_out_action": "Opt-Out of Beta Program",
   "disable_beta": "Disable Beta",
+  "beta_badge_tooltip": "We made some improvements to __feature__. We hope you like it! Click here to manage your beta program membership",
   "beta_program_badge_description": "While using __appName__, you will see beta features marked with this badge:",
   "beta_program_current_beta_features_description": "We are currently testing the following new features in beta:",
   "enable_beta": "Enable Beta",