From 82d7d6681ef6e570f926c12ecb599c6e86cf7f11 Mon Sep 17 00:00:00 2001
From: Alexandre Bourdin <abourdin@users.noreply.github.com>
Date: Tue, 27 Apr 2021 11:06:44 +0200
Subject: [PATCH] Merge pull request #3927 from
 overleaf/msm-react-navbar-rename-tooltip

React navbar rename tooltip

GitOrigin-RevId: a933aa8654e0c5b0e22cfc72f6262cc75da0ccf7
---
 .../components/project-name-editable-label.js  | 18 ++++++++++++++----
 .../web/frontend/stylesheets/app/editor.less   |  1 +
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/project-name-editable-label.js b/services/web/frontend/js/features/editor-navigation-toolbar/components/project-name-editable-label.js
index ef9added2c..1ba554c917 100644
--- a/services/web/frontend/js/features/editor-navigation-toolbar/components/project-name-editable-label.js
+++ b/services/web/frontend/js/features/editor-navigation-toolbar/components/project-name-editable-label.js
@@ -1,5 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react'
 import PropTypes from 'prop-types'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
 import classNames from 'classnames'
 import Icon from '../../../shared/components/icon'
 
@@ -9,6 +11,8 @@ function ProjectNameEditableLabel({
   onChange,
   className,
 }) {
+  const { t } = useTranslation()
+
   const [isRenaming, setIsRenaming] = useState(false)
 
   const canRename = userIsAdmin && !isRenaming
@@ -63,10 +67,16 @@ function ProjectNameEditableLabel({
         />
       )}
       {canRename && (
-        // eslint-disable-next-line jsx-a11y/anchor-is-valid, jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus
-        <a className="rename" role="button" onClick={startRenaming}>
-          <Icon type="pencil" modifier="fw" />
-        </a>
+        <OverlayTrigger
+          placement="bottom"
+          trigger={['hover', 'focus']}
+          overlay={<Tooltip id="tooltip-online-user">{t('rename')}</Tooltip>}
+        >
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid, jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus */}
+          <a className="rename" role="button" onClick={startRenaming}>
+            <Icon type="pencil" modifier="fw" />
+          </a>
+        </OverlayTrigger>
       )}
     </div>
   )
diff --git a/services/web/frontend/stylesheets/app/editor.less b/services/web/frontend/stylesheets/app/editor.less
index 2434232948..01d07dc2fa 100644
--- a/services/web/frontend/stylesheets/app/editor.less
+++ b/services/web/frontend/stylesheets/app/editor.less
@@ -225,6 +225,7 @@
     color: @project-rename-link-color;
     padding: 5px;
     border-radius: @border-radius-small;
+    cursor: pointer;
     &:hover {
       text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
       color: @project-rename-link-color-hover;