SONAR-16538 Styling changes for comment popup and issue page

10 files changed, 65 insertions, 41 deletions

diff --git a/server/sonar-web/src/main/js/apps/issues/__tests__/IssueApp-it.tsx b/server/sonar-web/src/main/js/apps/issues/__tests__/IssueApp-it.tsx
index 533446d99cd..c682c659b64 100644
--- a/server/sonar-web/src/main/js/apps/issues/__tests__/IssueApp-it.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/__tests__/IssueApp-it.tsx
@@ -309,6 +309,7 @@ it('should be able to perform action on issues', async () => {
   await user.keyboard('New ');
   await user.keyboard('{Control>}{enter}{/Control}');
   expect(screen.getByText('New comment')).toBeInTheDocument();
+  await user.keyboard('{Escape}');
 
   // changing tags
   expect(screen.getByText('issue.no_tag')).toBeInTheDocument();
@@ -387,7 +388,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();
-  await user.click(screen.getByText('cancel'));
+  await user.keyboard('{Escape}');
 
   // open tags popup on key press 't'
   await user.keyboard('t');
diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssueHeader.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssueHeader.tsx
index e9e9af6eb84..61eda47277e 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/IssueHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/IssueHeader.tsx
@@ -159,30 +159,30 @@ export default class IssueHeader extends React.PureComponent<Props, State> {
                   />
                 }
                 mouseLeaveDelay={0.5}>
-                <SonarLintIcon className="it__issues-sonarlint-quick-fix" size={20} />
+                <SonarLintIcon className="it__issues-sonarlint-quick-fix spacer-left" size={20} />
+              </Tooltip>
+            )}
+            {(ruleStatus === RuleStatus.Deprecated || ruleStatus === RuleStatus.Removed) && (
+              <DocumentationTooltip
+                content={translate('rules.status', ruleStatus, 'help')}
+                links={[
+                  {
+                    href: '/documentation/user-guide/rules/',
+                    label: translateWithParameters('see_x', translate('rules'))
+                  }
+                ]}>
+                <span className="badge spacer-left badge-error">
+                  {translate('issue.resolution.badge', ruleStatus)}
+                </span>
+              </DocumentationTooltip>
+            )}
+            {ruleEngine && (
+              <Tooltip
+                overlay={translateWithParameters('issue.from_external_rule_engine', ruleEngine)}>
+                <div className="badge spacer-left text-baseline">{ruleEngine}</div>
               </Tooltip>
             )}
           </h1>
-          {(ruleStatus === RuleStatus.Deprecated || ruleStatus === RuleStatus.Removed) && (
-            <DocumentationTooltip
-              content={translate('rules.status', ruleStatus, 'help')}
-              links={[
-                {
-                  href: '/documentation/user-guide/rules/',
-                  label: translateWithParameters('see_x', translate('rules'))
-                }
-              ]}>
-              <span className="badge spacer-right badge-error">
-                {translate('issue.resolution.badge', ruleStatus)}
-              </span>
-            </DocumentationTooltip>
-          )}
-          {ruleEngine && (
-            <Tooltip
-              overlay={translateWithParameters('issue.from_external_rule_engine', ruleEngine)}>
-              <div className="badge spacer-right text-baseline">{ruleEngine}</div>
-            </Tooltip>
-          )}
           <div className="issue-meta issue-get-perma-link">
             <Link
               className="js-issue-permalink link-no-underline"
@@ -220,6 +220,7 @@ export default class IssueHeader extends React.PureComponent<Props, State> {
           </div>
         </div>
         <IssueActionsBar
+          className="issue-header-actions"
           currentPopup={issuePopupName}
           issue={issue}
           onAssign={this.handleAssignement}
diff --git a/server/sonar-web/src/main/js/components/issue/Issue.css b/server/sonar-web/src/main/js/components/issue/Issue.css
index 4437af36bad..920dc0fc9c2 100644
--- a/server/sonar-web/src/main/js/components/issue/Issue.css
+++ b/server/sonar-web/src/main/js/components/issue/Issue.css
@@ -94,6 +94,10 @@
   margin-left: var(--gridSize);
 }
 
+.issue-header-actions .issue-meta + .issue-meta {
+  margin-left: calc(var(--gridSize) * 2);
+}
+
 .issue-meta-label {
   display: inline-block;
   vertical-align: top;
@@ -274,7 +278,7 @@
 
 .issue-comment-list-wrapper {
   max-height: 400px;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 .issue-comment-tile {
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueCommentAction.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueCommentAction.tsx
index 7a234bc6fa4..c49eae1847c 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueCommentAction.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueCommentAction.tsx
@@ -69,7 +69,7 @@ export default class IssueCommentAction extends React.PureComponent<Props> {
     return (
       <div className="issue-meta dropdown">
         <Toggler
-          closeOnClickOutside={false}
+          closeOnClickOutside={!!showCommentsInPopup}
           onRequestClose={this.handleClose}
           open={this.props.currentPopup === 'comment'}
           overlay={
@@ -99,10 +99,12 @@ export default class IssueCommentAction extends React.PureComponent<Props> {
             className="issue-action js-issue-comment"
             onClick={this.handleCommentClick}>
             <span className="issue-meta-label">
-              {showCommentsInPopup && comments && comments.length > 0 && (
-                <span className="little-spacer-right">{comments.length}</span>
+              {showCommentsInPopup && comments && (
+                <span>
+                  {comments.length} {translate('issue.comment.formlink.plural')}
+                </span>
               )}
-              {translate('issue.comment.formlink')}
+              {!showCommentsInPopup && translate('issue.comment.formlink')}
             </span>
           </ButtonLink>
         </Toggler>
diff --git a/server/sonar-web/src/main/js/components/issue/popups/CommentForm.tsx b/server/sonar-web/src/main/js/components/issue/popups/CommentForm.tsx
index 4fd1f3fa6b1..1eae2eb9854 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/CommentForm.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/CommentForm.tsx
@@ -30,10 +30,11 @@ export interface CommentFormProps {
   placeholder?: string;
   showFormatHelp: boolean;
   autoTriggered?: boolean;
+  showCancelButton: boolean;
 }
 
 export default function CommentForm(props: CommentFormProps) {
-  const { comment, placeholder, showFormatHelp, autoTriggered } = props;
+  const { comment, placeholder, showFormatHelp, autoTriggered, showCancelButton } = props;
   const [editComment, setEditComment] = React.useState(comment || '');
 
   return (
@@ -41,6 +42,7 @@ export default function CommentForm(props: CommentFormProps) {
       <div className="issue-comment-form-text">
         <textarea
           autoFocus={true}
+          style={{ resize: 'vertical' }}
           placeholder={placeholder}
           onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) =>
             setEditComment(event.target.value)
@@ -63,7 +65,7 @@ export default function CommentForm(props: CommentFormProps) {
         )}
         <div className="issue-comment-form-actions">
           <Button
-            className="js-issue-comment-submit little-spacer-right"
+            className="js-issue-comment-submit"
             disabled={editComment.trim().length < 1}
             onClick={() => {
               props.onSaveComment(editComment);
@@ -71,16 +73,18 @@ export default function CommentForm(props: CommentFormProps) {
             }}>
             {comment ? translate('save') : translate('issue.comment.submit')}
           </Button>
-          <ResetButtonLink
-            className="js-issue-comment-cancel"
-            aria-label={
-              comment
-                ? translate('issue.comment.edit.cancel')
-                : translate('issue.comment.add_comment.cancel')
-            }
-            onClick={() => props.onCancel()}>
-            {autoTriggered ? translate('skip') : translate('cancel')}
-          </ResetButtonLink>
+          {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>
+          )}
         </div>
       </div>
     </>
diff --git a/server/sonar-web/src/main/js/components/issue/popups/CommentList.tsx b/server/sonar-web/src/main/js/components/issue/popups/CommentList.tsx
index 5c7f570eeb9..5f387d52fb4 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/CommentList.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/CommentList.tsx
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { translate } from '../../../helpers/l10n';
 import { IssueComment } from '../../../types/types';
 import CommentTile from './CommentTile';
 
@@ -29,13 +30,19 @@ interface CommentListProps {
 
 export default function CommentList(props: CommentListProps) {
   const { comments } = props;
+  if (!comments || comments.length === 0) {
+    return (
+      <div className="note spacer-top spacer-bottom">{translate('issue.comment.empty.list')}</div>
+    );
+  }
+
   // sorting comment i.e showing newest on top
-  const sortedComments = comments?.sort(
+  const sortedComments = [...comments]?.sort(
     (com1, com2) =>
       new Date(com2.createdAt || '').getTime() - new Date(com1.createdAt || '').getTime()
   );
   return (
-    <div className="issue-comment-list-wrapper">
+    <div className="issue-comment-list-wrapper spacer-bottom">
       {sortedComments?.map(c => (
         <CommentTile
           comment={c}
diff --git a/server/sonar-web/src/main/js/components/issue/popups/CommentPopup.tsx b/server/sonar-web/src/main/js/components/issue/popups/CommentPopup.tsx
index 9e122c0d6d7..733951eedc4 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/CommentPopup.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/CommentPopup.tsx
@@ -44,6 +44,7 @@ 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}
diff --git a/server/sonar-web/src/main/js/components/issue/popups/CommentTile.tsx b/server/sonar-web/src/main/js/components/issue/popups/CommentTile.tsx
index c94c741b439..63cd62e1fb8 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/CommentTile.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/CommentTile.tsx
@@ -90,6 +90,7 @@ 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}
diff --git a/server/sonar-web/src/main/js/components/issue/popups/CommentsListPopup.tsx b/server/sonar-web/src/main/js/components/issue/popups/CommentsListPopup.tsx
index 2691486180f..8c9d23b9e8a 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/CommentsListPopup.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/CommentsListPopup.tsx
@@ -64,6 +64,7 @@ export default class CommentListPopup extends React.PureComponent<Props, {}> {
           />
           {canComment && (
             <CommentForm
+              showCancelButton={false}
               autoTriggered={autoTriggered}
               placeholder={placeholder}
               onCancel={this.handleCancelClick}
diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index 1bea83faca7..bb735e199a5 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -822,6 +822,7 @@ issue.quick_fix_available_with_sonarlint=Quick fix available in {link}
 issue.comment.add_comment=Add Comment
 issue.comment.add_comment.cancel=Cancel adding comment 
 issue.comment.formlink=Comment
+issue.comment.formlink.plural=comments
 issue.comment.submit=Comment
 issue.comment.explain_why=Consider explaining why
 issue.comment.posted_on=Comment posted on
@@ -829,6 +830,7 @@ issue.comment.edit=Edit comment
 issue.comment.edit.cancel=Cancel editing comment
 issue.comment.delete=Delete comment
 issue.comment.delete_confirm_message=Do you want to delete this comment?
+issue.comment.empty.list=There are no comments yet on this issue.
 issue.rule_details=Rule Details
 issue.send_notifications=Send Notifications
 issue.why_this_issue=Why is this an issue?