SONAR-17612 Do not lose the comment draft by clicking outside the comment box (#7167)

server/sonar-web/src/main/js/apps/issues/__tests__/IssueApp-it.tsx

@@ -336,9 +336,9 @@ it('should be able to perform action on issues', async () => {
   await user.click(screen.getByText('issue.status.CONFIRMED'));
   await user.click(screen.getByText('issue.transition.wontfix'));
   // Comment should open and close
-  expect(screen.getByRole('button', { name: 'issue.comment.submit' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: 'issue.comment.formlink' })).toBeInTheDocument();
   await user.keyboard('test');
-  await user.click(screen.getByRole('button', { name: 'issue.comment.submit' }));
+  await user.click(screen.getByRole('button', { name: 'issue.comment.formlink' }));
   expect(screen.queryByRole('button', { name: 'issue.comment.submit' })).not.toBeInTheDocument();
 
   // assigning issue to a different user
@@ -373,9 +373,9 @@ it('should be able to perform action on issues', async () => {
       name: `issue.comment.add_comment`,
     })
   );
-  expect(screen.getByText('issue.comment.submit')).toBeInTheDocument();
+  expect(screen.getByText('issue.comment.formlink')).toBeInTheDocument();
   await user.keyboard('comment');
-  await user.click(screen.getByText('issue.comment.submit'));
+  await user.click(screen.getByText('issue.comment.formlink'));
   expect(screen.getByText('comment')).toBeInTheDocument();
 
   // Cancel editing the comment
@@ -486,7 +486,7 @@ it('should open the actions popup using keyboard shortcut', async () => {
 
   // open comment popup on key press 'c'
   await user.keyboard('c');
-  expect(screen.getByText('issue.comment.submit')).toBeInTheDocument();
+  expect(screen.getByText('issue.comment.formlink')).toBeInTheDocument();
   await user.keyboard('{Escape}');
 
   // open tags popup on key press 't'

server/sonar-web/src/main/js/components/issue/components/IssueCommentAction.tsx

@@ -24,8 +24,8 @@ import Toggler from '../../../components/controls/Toggler';
 import { translate } from '../../../helpers/l10n';
 import { Issue, IssueComment } from '../../../types/types';
 import { updateIssue } from '../actions';
+import CommentListPopup from '../popups/CommentListPopup';
 import CommentPopup from '../popups/CommentPopup';
-import CommentListPopup from '../popups/CommentsListPopup';
 
 interface Props {
   canComment: boolean;
@@ -69,7 +69,7 @@ export default class IssueCommentAction extends React.PureComponent<Props> {
     return (
       <div className="issue-meta dropdown">
         <Toggler
-          closeOnClickOutside={!!showCommentsInPopup}
+          closeOnClickOutside={false}
           onRequestClose={this.handleClose}
           open={this.props.currentPopup === 'comment'}
           overlay={
@@ -103,7 +103,12 @@ export default class IssueCommentAction extends React.PureComponent<Props> {
             <span className="issue-meta-label">
               {showCommentsInPopup && comments && (
                 <span>
-                  {comments.length} {translate('issue.comment.formlink.plural')}
+                  {comments.length}{' '}
+                  {translate(
+                    comments.length === 1
+                      ? 'issue.comment.formlink.total'
+                      : 'issue.comment.formlink.total.plural'
+                  )}
                 </span>
               )}
               {!showCommentsInPopup && translate('issue.comment.formlink')}

server/sonar-web/src/main/js/components/issue/popups/CommentForm.tsx

@@ -30,11 +30,10 @@ export interface CommentFormProps {
   placeholder?: string;
   showFormatHelp: boolean;
   autoTriggered?: boolean;
-  showCancelButton: boolean;
 }
 
 export default function CommentForm(props: CommentFormProps) {
-  const { comment, placeholder, showFormatHelp, autoTriggered, showCancelButton } = props;
+  const { comment, placeholder, showFormatHelp, autoTriggered } = props;
   const [editComment, setEditComment] = React.useState(comment || '');
 
   return (
@@ -73,21 +72,19 @@ export default function CommentForm(props: CommentFormProps) {
               setEditComment('');
             }}
           >
-            {comment ? translate('save') : translate('issue.comment.submit')}
+            {comment ? translate('save') : translate('issue.comment.formlink')}
           </Button>
-          {showCancelButton && (
-            <ResetButtonLink
-              className="js-issue-comment-cancel little-spacer-left"
-              aria-label={
-                comment
-                  ? translate('issue.comment.edit.cancel')
-                  : translate('issue.comment.add_comment.cancel')
-              }
-              onClick={() => props.onCancel()}
-            >
-              {autoTriggered ? translate('skip') : translate('cancel')}
-            </ResetButtonLink>
-          )}
+          <ResetButtonLink
+            className="js-issue-comment-cancel little-spacer-left"
+            aria-label={
+              comment
+                ? translate('issue.comment.edit.cancel')
+                : translate('issue.comment.add_comment.cancel')
+            }
+            onClick={props.onCancel}
+          >
+            {autoTriggered ? translate('skip') : translate('cancel')}
+          </ResetButtonLink>
         </div>
       </div>
     </>

server/sonar-web/src/main/js/components/issue/popups/CommentsListPopup.tsx → server/sonar-web/src/main/js/components/issue/popups/CommentListPopup.tsx

@@ -18,9 +18,9 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { DropdownOverlay } from '../../../components/controls/Dropdown';
-import { PopupPlacement } from '../../../components/ui/popups';
 import { IssueComment } from '../../../types/types';
+import { DropdownOverlay } from '../../controls/Dropdown';
+import { PopupPlacement } from '../../ui/popups';
 import CommentForm from './CommentForm';
 import CommentList from './CommentList';
 
@@ -64,7 +64,6 @@ export default class CommentListPopup extends React.PureComponent<Props, {}> {
           />
           {canComment && (
             <CommentForm
-              showCancelButton={false}
               autoTriggered={autoTriggered}
               placeholder={placeholder}
               onCancel={this.handleCancelClick}

server/sonar-web/src/main/js/components/issue/popups/CommentPopup.tsx

@@ -44,7 +44,6 @@ export default class CommentPopup extends React.PureComponent<CommentPopupProps>
       <DropdownOverlay placement={this.props.placement}>
         <div className="issue-comment-bubble-popup">
           <CommentForm
-            showCancelButton={true}
             placeholder={this.props.placeholder}
             onCancel={this.handleCancelClick}
             onSaveComment={this.props.onComment}

server/sonar-web/src/main/js/components/issue/popups/CommentTile.tsx

@@ -90,7 +90,6 @@ export default class CommentTile extends React.PureComponent<CommentTileProps, C
           {showEditArea && (
             <div className="flex-1">
               <CommentForm
-                showCancelButton={true}
                 onCancel={this.handleCancelClick}
                 onSaveComment={this.handleSaveClick}
                 showFormatHelp={false}

sonar-core/src/main/resources/org/sonar/l10n/core.properties

@@ -835,8 +835,8 @@ issue.comment.add_comment=Add Comment
 issue.comment.add_comment.cancel=Cancel adding comment 
 issue.comment.enter_comment=Enter Comment
 issue.comment.formlink=Comment
-issue.comment.formlink.plural=comments
-issue.comment.submit=Comment
+issue.comment.formlink.total=comment
+issue.comment.formlink.total.plural=comments
 issue.comment.explain_why=Consider explaining why
 issue.comment.posted_on=Comment posted on
 issue.comment.edit=Edit comment