diff --git a/services/web/app/src/Features/Project/ProjectController.js b/services/web/app/src/Features/Project/ProjectController.js index 4e6b2df830..0578607638 100644 --- a/services/web/app/src/Features/Project/ProjectController.js +++ b/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() } diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index c4038d96ce..01b770e99c 100644 --- a/services/web/frontend/extracted-translations.json +++ b/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": "" -} \ No newline at end of file +} diff --git a/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-create-file.js b/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-create-file.js index 6180de232d..f390a99bba 100644 --- a/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-create-file.js +++ b/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 ( - Add Files + + Add Files   + + diff --git a/services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.js b/services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.js index 2059741cec..9bc1396c8d 100644 --- a/services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.js +++ b/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 ( +    + diff --git a/services/web/frontend/js/shared/components/beta-badge.js b/services/web/frontend/js/shared/components/beta-badge.js new file mode 100644 index 0000000000..0dab869461 --- /dev/null +++ b/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 ( + {tooltip.text}} + delayHide={100} + > + + {tooltip.text} + + + ) +} + +BetaBadge.propTypes = { + tooltip: PropTypes.exact({ + id: PropTypes.string.isRequired, + text: PropTypes.string.isRequired + }) +} diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 53f065999d..ff26e06a0f 100644 --- a/services/web/locales/en.json +++ b/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",