SONAR-11611 comment prompt button label (#1219)

SONAR-11611 Change cancel button label when comment prompt is auto triggered

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

@@ -38,11 +38,13 @@ interface Props {
 }
 
 interface State {
+  commentAutoTriggered: boolean;
   commentPlaceholder: string;
 }
 
 export default class IssueActionsBar extends React.PureComponent<Props, State> {
   state: State = {
+    commentAutoTriggered: false,
     commentPlaceholder: ''
   };
 
@@ -65,8 +67,11 @@ export default class IssueActionsBar extends React.PureComponent<Props, State> {
     this.props.togglePopup(popup, false);
   };
 
-  toggleComment = (open: boolean | undefined, placeholder: string | undefined) => {
-    this.setState({ commentPlaceholder: placeholder || '' });
+  toggleComment = (open: boolean | undefined, placeholder = '', autoTriggered = false) => {
+    this.setState({
+      commentPlaceholder: placeholder,
+      commentAutoTriggered: autoTriggered
+    });
     this.props.togglePopup('comment', open);
   };
 
@@ -76,7 +81,7 @@ export default class IssueActionsBar extends React.PureComponent<Props, State> {
       issue.resolution === 'FALSE-POSITIVE' ||
       (issue.resolution === 'WONTFIX' && issue.type !== 'SECURITY_HOTSPOT')
     ) {
-      this.toggleComment(true, translate('issue.comment.explain_why'));
+      this.toggleComment(true, translate('issue.comment.explain_why'), true);
     }
   };
 
@@ -143,6 +148,7 @@ export default class IssueActionsBar extends React.PureComponent<Props, State> {
             )}
           {canComment && (
             <IssueCommentAction
+              commentAutoTriggered={this.state.commentAutoTriggered}
               commentPlaceholder={this.state.commentPlaceholder}
               currentPopup={this.props.currentPopup}
               issueKey={issue.key}

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

@@ -26,11 +26,12 @@ import { translate } from '../../../helpers/l10n';
 import { updateIssue } from '../actions';
 
 interface Props {
+  commentAutoTriggered?: boolean;
   commentPlaceholder: string;
   currentPopup?: string;
   issueKey: string;
   onChange: (issue: T.Issue) => void;
-  toggleComment: (open?: boolean, placeholder?: string) => void;
+  toggleComment: (open?: boolean, placeholder?: string, autoTriggered?: boolean) => void;
 }
 
 export default class IssueCommentAction extends React.PureComponent<Props> {
@@ -56,6 +57,7 @@ export default class IssueCommentAction extends React.PureComponent<Props> {
           open={this.props.currentPopup === 'comment'}
           overlay={
             <CommentPopup
+              autoTriggered={this.props.commentAutoTriggered}
               onComment={this.addComment}
               placeholder={this.props.commentPlaceholder}
               toggleComment={this.props.toggleComment}

server/sonar-web/src/main/js/components/issue/components/__tests__/IssueActionsBar-test.tsx

@@ -0,0 +1,123 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import IssueActionsBar from '../IssueActionsBar';
+import { mockIssue } from '../../../../helpers/testMocks';
+
+jest.mock('../../actions', () => ({ updateIssue: jest.fn() }));
+
+it('should render issue correctly', () => {
+  const element = shallow(
+    <IssueActionsBar
+      issue={mockIssue()}
+      onAssign={jest.fn()}
+      onChange={jest.fn()}
+      togglePopup={jest.fn()}
+    />
+  );
+  expect(element).toMatchSnapshot();
+});
+
+it('should render security hotspot correctly', () => {
+  const element = shallow(
+    <IssueActionsBar
+      issue={mockIssue(false, { type: 'SECURITY_HOTSPOT' })}
+      onAssign={jest.fn()}
+      onChange={jest.fn()}
+      togglePopup={jest.fn()}
+    />
+  );
+  expect(element).toMatchSnapshot();
+});
+
+it('should render commentable correctly', () => {
+  const element = shallow(
+    <IssueActionsBar
+      issue={mockIssue(false, { actions: ['comment'] })}
+      onAssign={jest.fn()}
+      onChange={jest.fn()}
+      togglePopup={jest.fn()}
+    />
+  );
+  expect(element).toMatchSnapshot();
+});
+
+it('should render effort correctly', () => {
+  const element = shallow(
+    <IssueActionsBar
+      issue={mockIssue(false, { effort: 'great' })}
+      onAssign={jest.fn()}
+      onChange={jest.fn()}
+      togglePopup={jest.fn()}
+    />
+  );
+  expect(element).toMatchSnapshot();
+});
+
+describe('callback', () => {
+  const issue: T.Issue = mockIssue();
+  const onChangeMock = jest.fn();
+  const togglePopupMock = jest.fn();
+
+  const element = shallow<IssueActionsBar>(
+    <IssueActionsBar
+      issue={issue}
+      onAssign={jest.fn()}
+      onChange={onChangeMock}
+      togglePopup={togglePopupMock}
+    />
+  );
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('handleTransition should call onChange', () => {
+    const instance = element.instance();
+    instance.handleTransition(issue);
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+    expect(togglePopupMock).toHaveBeenCalledTimes(0);
+  });
+
+  it('setIssueProperty should call togglePopup', () => {
+    const instance = element.instance();
+
+    const apiCallMock = jest.fn();
+
+    instance.setIssueProperty('author', 'popup', apiCallMock, 'Jay');
+    expect(togglePopupMock).toHaveBeenCalledTimes(1);
+    expect(apiCallMock).toBeCalledTimes(1);
+  });
+
+  it('toggleComment should call togglePopup and update state', () => {
+    const instance = element.instance();
+
+    expect(element.state('commentAutoTriggered')).toBe(false);
+    expect(element.state('commentPlaceholder')).toBe('');
+
+    instance.toggleComment(false, 'hold my place', true);
+
+    expect(element.state('commentAutoTriggered')).toBe(true);
+    expect(element.state('commentPlaceholder')).toBe('hold my place');
+
+    expect(togglePopupMock).toHaveBeenCalledTimes(1);
+  });
+});

server/sonar-web/src/main/js/components/issue/components/__tests__/IssueTitleBar-test.tsx

@@ -20,46 +20,10 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import IssueTitleBar from '../IssueTitleBar';
+import { mockIssue } from '../../../../helpers/testMocks';
 
-const issue: T.Issue = {
-  actions: [],
-  component: 'main.js',
-  componentLongName: 'main.js',
-  componentQualifier: 'FIL',
-  componentUuid: 'foo1234',
-  creationDate: '2017-03-01T09:36:01+0100',
-  flows: [],
-  fromHotspot: false,
-  key: 'AVsae-CQS-9G3txfbFN2',
-  line: 25,
-  message: 'Reduce the number of conditional operators (4) used in the expression',
-  organization: 'myorg',
-  project: 'myproject',
-  projectKey: 'foo',
-  projectName: 'Foo',
-  projectOrganization: 'org',
-  rule: 'javascript:S1067',
-  ruleName: 'foo',
-  secondaryLocations: [],
-  severity: 'MAJOR',
-  status: 'OPEN',
-  textRange: { startLine: 25, endLine: 26, startOffset: 0, endOffset: 15 },
-  transitions: [],
-  type: 'BUG'
-};
-
-const issueWithLocations: T.Issue = {
-  ...issue,
-  flows: [[loc(), loc(), loc()], [loc(), loc()]],
-  secondaryLocations: [loc(), loc()]
-};
-
-function loc(): T.FlowLocation {
-  return {
-    component: 'main.js',
-    textRange: { startLine: 1, startOffset: 1, endLine: 2, endOffset: 2 }
-  };
-}
+const issue: T.Issue = mockIssue();
+const issueWithLocations: T.Issue = mockIssue(true);
 
 it('should render the titlebar correctly', () => {
   const branch: T.ShortLivingBranch = {

server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueActionsBar-test.tsx.snap

@@ -0,0 +1,866 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render commentable correctly 1`] = `
+<div
+  className="issue-actions"
+>
+  <ul
+    className="issue-meta-list"
+  >
+    <li
+      className="issue-meta"
+    >
+      <IssueType
+        canSetType={false}
+        isOpen={false}
+        issue={
+          Object {
+            "actions": Array [
+              "comment",
+            ],
+            "component": "main.js",
+            "componentLongName": "main.js",
+            "componentQualifier": "FIL",
+            "componentUuid": "foo1234",
+            "creationDate": "2017-03-01T09:36:01+0100",
+            "flows": Array [],
+            "fromHotspot": false,
+            "key": "AVsae-CQS-9G3txfbFN2",
+            "line": 25,
+            "message": "Reduce the number of conditional operators (4) used in the expression",
+            "organization": "myorg",
+            "project": "myproject",
+            "projectKey": "foo",
+            "projectName": "Foo",
+            "projectOrganization": "org",
+            "rule": "javascript:S1067",
+            "ruleName": "foo",
+            "secondaryLocations": Array [],
+            "severity": "MAJOR",
+            "status": "OPEN",
+            "textRange": Object {
+              "endLine": 26,
+              "endOffset": 15,
+              "startLine": 25,
+              "startOffset": 0,
+            },
+            "transitions": Array [],
+            "type": "BUG",
+          }
+        }
+        setIssueProperty={[Function]}
+        togglePopup={[MockFunction]}
+      />
+    </li>
+    <li
+      className="issue-meta"
+    >
+      <IssueSeverity
+        canSetSeverity={false}
+        isOpen={false}
+        issue={
+          Object {
+            "actions": Array [
+              "comment",
+            ],
+            "component": "main.js",
+            "componentLongName": "main.js",
+            "componentQualifier": "FIL",
+            "componentUuid": "foo1234",
+            "creationDate": "2017-03-01T09:36:01+0100",
+            "flows": Array [],
+            "fromHotspot": false,
+            "key": "AVsae-CQS-9G3txfbFN2",
+            "line": 25,
+            "message": "Reduce the number of conditional operators (4) used in the expression",
+            "organization": "myorg",
+            "project": "myproject",
+            "projectKey": "foo",
+            "projectName": "Foo",
+            "projectOrganization": "org",
+            "rule": "javascript:S1067",
+            "ruleName": "foo",
+            "secondaryLocations": Array [],
+            "severity": "MAJOR",
+            "status": "OPEN",
+            "textRange": Object {
+              "endLine": 26,
+              "endOffset": 15,
+              "startLine": 25,
+              "startOffset": 0,
+            },
+            "transitions": Array [],
+            "type": "BUG",
+          }
+        }
+        setIssueProperty={[Function]}
+        togglePopup={[MockFunction]}
+      />
+    </li>
+    <li
+      className="issue-meta"
+    >
+      <IssueTransition
+        hasTransitions={false}
+        isOpen={false}
+        issue={
+          Object {
+            "actions": Array [
+              "comment",
+            ],
+            "component": "main.js",
+            "componentLongName": "main.js",
+            "componentQualifier": "FIL",
+            "componentUuid": "foo1234",
+            "creationDate": "2017-03-01T09:36:01+0100",
+            "flows": Array [],
+            "fromHotspot": false,
+            "key": "AVsae-CQS-9G3txfbFN2",
+            "line": 25,
+            "message": "Reduce the number of conditional operators (4) used in the expression",
+            "organization": "myorg",
+            "project": "myproject",
+            "projectKey": "foo",
+            "projectName": "Foo",
+            "projectOrganization": "org",
+            "rule": "javascript:S1067",
+            "ruleName": "foo",
+            "secondaryLocations": Array [],
+            "severity": "MAJOR",
+            "status": "OPEN",
+            "textRange": Object {
+              "endLine": 26,
+              "endOffset": 15,
+              "startLine": 25,
+              "startOffset": 0,
+            },
+            "transitions": Array [],
+            "type": "BUG",
+          }
+        }
+        onChange={[Function]}
+        togglePopup={[MockFunction]}
+      />
+    </li>
+    <li
+      className="issue-meta"
+    >
+      <IssueAssign
+        canAssign={false}
+        isOpen={false}
+        issue={
+          Object {
+            "actions": Array [
+              "comment",
+            ],
+            "component": "main.js",
+            "componentLongName": "main.js",
+            "componentQualifier": "FIL",
+            "componentUuid": "foo1234",
+            "creationDate": "2017-03-01T09:36:01+0100",
+            "flows": Array [],
+            "fromHotspot": false,
+            "key": "AVsae-CQS-9G3txfbFN2",
+            "line": 25,
+            "message": "Reduce the number of conditional operators (4) used in the expression",
+            "organization": "myorg",
+            "project": "myproject",
+            "projectKey": "foo",
+            "projectName": "Foo",
+            "projectOrganization": "org",
+            "rule": "javascript:S1067",
+            "ruleName": "foo",
+            "secondaryLocations": Array [],
+            "severity": "MAJOR",
+            "status": "OPEN",
+            "textRange": Object {
+              "endLine": 26,
+              "endOffset": 15,
+              "startLine": 25,
+              "startOffset": 0,
+            },
+            "transitions": Array [],
+            "type": "BUG",
+          }
+        }
+        onAssign={[MockFunction]}
+        togglePopup={[MockFunction]}
+      />
+    </li>
+    <IssueCommentAction
+      commentAutoTriggered={false}
+      commentPlaceholder=""
+      issueKey="AVsae-CQS-9G3txfbFN2"
+      onChange={[MockFunction]}
+      toggleComment={[Function]}
+    />
+  </ul>
+  <ul
+    className="list-inline"
+  >
+    <li
+      className="issue-meta js-issue-tags"
+    >
+      <IssueTags
+        canSetTags={false}
+        isOpen={false}
+        issue={
+          Object {
+            "actions": Array [
+              "comment",
+            ],
+            "component": "main.js",
+            "componentLongName": "main.js",
+            "componentQualifier": "FIL",
+            "componentUuid": "foo1234",
+            "creationDate": "2017-03-01T09:36:01+0100",
+            "flows": Array [],
+            "fromHotspot": false,
+            "key": "AVsae-CQS-9G3txfbFN2",
+            "line": 25,
+            "message": "Reduce the number of conditional operators (4) used in the expression",
+            "organization": "myorg",
+            "project": "myproject",
+            "projectKey": "foo",
+            "projectName": "Foo",
+            "projectOrganization": "org",
+            "rule": "javascript:S1067",
+            "ruleName": "foo",
+            "secondaryLocations": Array [],
+            "severity": "MAJOR",
+            "status": "OPEN",
+            "textRange": Object {
+              "endLine": 26,
+              "endOffset": 15,
+              "startLine": 25,
+              "startOffset": 0,
+            },
+            "transitions": Array [],
+            "type": "BUG",
+          }
+        }
+        onChange={[MockFunction]}
+        togglePopup={[MockFunction]}
+      />
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`should render effort correctly 1`] = `
+<div
+  className="issue-actions"
+>
+  <ul
+    className="issue-meta-list"
+  >
+    <li
+      className="issue-meta"
+    >
+      <IssueType
+        canSetType={false}
+        isOpen={false}
+        issue={
+          Object {
+            "actions": Array [],
+            "component": "main.js",
+            "componentLongName": "main.js",
+            "componentQualifier": "FIL",
+            "componentUuid": "foo1234",
+            "creationDate": "2017-03-01T09:36:01+0100",
+            "effort": "great",
+            "flows": Array [],
+            "fromHotspot": false,
+            "key": "AVsae-CQS-9G3txfbFN2",
+            "line": 25,
+            "message": "Reduce the number of conditional operators (4) used in the expression",
+            "organization": "myorg",
+            "project": "myproject",
+            "projectKey": "foo",
+            "projectName": "Foo",
+            "projectOrganization": "org",
+            "rule": "javascript:S1067",
+            "ruleName": "foo",
+            "secondaryLocations": Array [],
+            "severity": "MAJOR",
+            "status": "OPEN",
+            "textRange": Object {
+              "endLine": 26,
+              "endOffset": 15,
+              "startLine": 25,
+              "startOffset": 0,
+            },
+            "transitions": Array [],
+            "type": "BUG",
+          }
+        }
+        setIssueProperty={[Function]}
+        togglePopup={[MockFunction]}
+      />
+    </li>
+    <li
+      className="issue-meta"
+    >
+      <IssueSeverity
+        canSetSeverity={false}
+        isOpen={false}
+        issue={
+          Object {
+            "actions": Array [],
+            "component": "main.js",
+            "componentLongName": "main.js",
+            "componentQualifier": "FIL",
+            "componentUuid": "foo1234",
+            "creationDate": "2017-03-01T09:36:01+0100",
+            "effort": "great",
+            "flows": Array [],
+            "fromHotspot": false,
+            "key": "AVsae-CQS-9G3txfbFN2",
+            "line": 25,
+            "message": "Reduce the number of conditional operators (4) used in the expression",
+            "organization": "myorg",
+            "project": "myproject",
+            "projectKey": "foo",
+            "projectName": "Foo",
+            "projectOrganization": "org",
+            "rule": "javascript:S1067",
+            "ruleName": "foo",
+            "secondaryLocations": Array [],
+            "severity": "MAJOR",
+            "status": "OPEN",
+            "textRange": Object {
+              "endLine": 26,
+              "endOffset": 15,
+              "startLine": 25,
+              "startOffset": 0,
+            },
+            "transitions": Array [],
+            "type": "BUG",
+          }
+        }
+        setIssueProperty={[Function]}
+        togglePopup={[MockFunction]}
+      />
+    </li>
+    <li
+      className="issue-meta"
+    >
+      <IssueTransition
+        hasTransitions={false}
+        isOpen={false}
+        issue={
+          Object {
+            "actions": Array [],
+            "component": "main.js",
+            "componentLongName": "main.js",
+            "componentQualifier": "FIL",
+            "componentUuid": "foo1234",
+            "creationDate": "2017-03-01T09:36:01+0100",
+            "effort": "great",
+            "flows": Array [],
+            "fromHotspot": false,
+            "key": "AVsae-CQS-9G3txfbFN2",
+            "line": 25,
+            "message": "Reduce the number of conditional operators (4) used in the expression",
+            "organization": "myorg",
+            "project": "myproject",
+            "projectKey": "foo",
+            "projectName": "Foo",
+            "projectOrganization": "org",
+            "rule": "javascript:S1067",
+            "ruleName": "foo",
+            "secondaryLocations": Array [],
+            "severity": "MAJOR",
+            "status": "OPEN",
+            "textRange": Object {
+              "endLine": 26,
+              "endOffset": 15,
+              "startLine": 25,
+              "startOffset": 0,
+            },
+            "transitions": Array [],
+            "type": "BUG",
+          }
+        }
+        onChange={[Function]}
+        togglePopup={[MockFunction]}
+      />
+    </li>
+    <li
+      className="issue-meta"
+    >
+      <IssueAssign
+        canAssign={false}
+        isOpen={false}
+        issue={
+          Object {
+            "actions": Array [],
+            "component": "main.js",
+            "componentLongName": "main.js",
+            "componentQualifier": "FIL",
+            "componentUuid": "foo1234",
+            "creationDate": "2017-03-01T09:36:01+0100",
+            "effort": "great",
+            "flows": Array [],
+            "fromHotspot": false,
+            "key": "AVsae-CQS-9G3txfbFN2",
+            "line": 25,
+            "message": "Reduce the number of conditional operators (4) used in the expression",
+            "organization": "myorg",
+            "project": "myproject",
+            "projectKey": "foo",
+            "projectName": "Foo",
+            "projectOrganization": "org",
+            "rule": "javascript:S1067",
+            "ruleName": "foo",
+            "secondaryLocations": Array [],
+            "severity": "MAJOR",
+            "status": "OPEN",
+            "textRange": Object {
+              "endLine": 26,
+              "endOffset": 15,
+              "startLine": 25,
+              "startOffset": 0,
+            },
+            "transitions": Array [],
+            "type": "BUG",
+          }
+        }
+        onAssign={[MockFunction]}
+        togglePopup={[MockFunction]}
+      />
+    </li>
+    <li
+      className="issue-meta"
+    >
+      <span
+        className="issue-meta-label"
+      >
+        issue.x_effort.great
+      </span>
+    </li>
+  </ul>
+  <ul
+    className="list-inline"
+  >
+    <li
+      className="issue-meta js-issue-tags"
+    >
+      <IssueTags
+        canSetTags={false}
+        isOpen={false}
+        issue={
+          Object {
+            "actions": Array [],
+            "component": "main.js",
+            "componentLongName": "main.js",
+            "componentQualifier": "FIL",
+            "componentUuid": "foo1234",
+            "creationDate": "2017-03-01T09:36:01+0100",
+            "effort": "great",
+            "flows": Array [],
+            "fromHotspot": false,
+            "key": "AVsae-CQS-9G3txfbFN2",
+            "line": 25,
+            "message": "Reduce the number of conditional operators (4) used in the expression",
+            "organization": "myorg",
+            "project": "myproject",
+            "projectKey": "foo",
+            "projectName": "Foo",
+            "projectOrganization": "org",
+            "rule": "javascript:S1067",
+            "ruleName": "foo",
+            "secondaryLocations": Array [],
+            "severity": "MAJOR",
+            "status": "OPEN",
+            "textRange": Object {
+              "endLine": 26,
+              "endOffset": 15,
+              "startLine": 25,
+              "startOffset": 0,
+            },
+            "transitions": Array [],
+            "type": "BUG",
+          }
+        }
+        onChange={[MockFunction]}
+        togglePopup={[MockFunction]}
+      />
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`should render issue correctly 1`] = `
+<div
+  className="issue-actions"
+>
+  <ul
+    className="issue-meta-list"
+  >
+    <li
+      className="issue-meta"
+    >
+      <IssueType
+        canSetType={false}
+        isOpen={false}
+        issue={
+          Object {
+            "actions": Array [],
+            "component": "main.js",
+            "componentLongName": "main.js",
+            "componentQualifier": "FIL",
+            "componentUuid": "foo1234",
+            "creationDate": "2017-03-01T09:36:01+0100",
+            "flows": Array [],
+            "fromHotspot": false,
+            "key": "AVsae-CQS-9G3txfbFN2",
+            "line": 25,
+            "message": "Reduce the number of conditional operators (4) used in the expression",
+            "organization": "myorg",
+            "project": "myproject",
+            "projectKey": "foo",
+            "projectName": "Foo",
+            "projectOrganization": "org",
+            "rule": "javascript:S1067",
+            "ruleName": "foo",
+            "secondaryLocations": Array [],
+            "severity": "MAJOR",
+            "status": "OPEN",
+            "textRange": Object {
+              "endLine": 26,
+              "endOffset": 15,
+              "startLine": 25,
+              "startOffset": 0,
+            },
+            "transitions": Array [],
+            "type": "BUG",
+          }
+        }
+        setIssueProperty={[Function]}
+        togglePopup={[MockFunction]}
+      />
+    </li>
+    <li
+      className="issue-meta"
+    >
+      <IssueSeverity
+        canSetSeverity={false}
+        isOpen={false}
+        issue={
+          Object {
+            "actions": Array [],
+            "component": "main.js",
+            "componentLongName": "main.js",
+            "componentQualifier": "FIL",
+            "componentUuid": "foo1234",
+            "creationDate": "2017-03-01T09:36:01+0100",
+            "flows": Array [],
+            "fromHotspot": false,
+            "key": "AVsae-CQS-9G3txfbFN2",
+            "line": 25,
+            "message": "Reduce the number of conditional operators (4) used in the expression",
+            "organization": "myorg",
+            "project": "myproject",
+            "projectKey": "foo",
+            "projectName": "Foo",
+            "projectOrganization": "org",
+            "rule": "javascript:S1067",
+            "ruleName": "foo",
+            "secondaryLocations": Array [],
+            "severity": "MAJOR",
+            "status": "OPEN",
+            "textRange": Object {
+              "endLine": 26,
+              "endOffset": 15,
+              "startLine": 25,
+              "startOffset": 0,
+            },
+            "transitions": Array [],
+            "type": "BUG",
+          }
+        }
+        setIssueProperty={[Function]}
+        togglePopup={[MockFunction]}
+      />
+    </li>
+    <li
+      className="issue-meta"
+    >
+      <IssueTransition
+        hasTransitions={false}
+        isOpen={false}
+        issue={
+          Object {
+            "actions": Array [],
+            "component": "main.js",
+            "componentLongName": "main.js",
+            "componentQualifier": "FIL",
+            "componentUuid": "foo1234",
+            "creationDate": "2017-03-01T09:36:01+0100",
+            "flows": Array [],
+            "fromHotspot": false,
+            "key": "AVsae-CQS-9G3txfbFN2",
+            "line": 25,
+            "message": "Reduce the number of conditional operators (4) used in the expression",
+            "organization": "myorg",
+            "project": "myproject",
+            "projectKey": "foo",
+            "projectName": "Foo",
+            "projectOrganization": "org",
+            "rule": "javascript:S1067",
+            "ruleName": "foo",
+            "secondaryLocations": Array [],
+            "severity": "MAJOR",
+            "status": "OPEN",
+            "textRange": Object {
+              "endLine": 26,
+              "endOffset": 15,
+              "startLine": 25,
+              "startOffset": 0,
+            },
+            "transitions": Array [],
+            "type": "BUG",
+          }
+        }
+        onChange={[Function]}
+        togglePopup={[MockFunction]}
+      />
+    </li>
+    <li
+      className="issue-meta"
+    >
+      <IssueAssign
+        canAssign={false}
+        isOpen={false}
+        issue={
+          Object {
+            "actions": Array [],
+            "component": "main.js",
+            "componentLongName": "main.js",
+            "componentQualifier": "FIL",
+            "componentUuid": "foo1234",
+            "creationDate": "2017-03-01T09:36:01+0100",
+            "flows": Array [],
+            "fromHotspot": false,
+            "key": "AVsae-CQS-9G3txfbFN2",
+            "line": 25,
+            "message": "Reduce the number of conditional operators (4) used in the expression",
+            "organization": "myorg",
+            "project": "myproject",
+            "projectKey": "foo",
+            "projectName": "Foo",
+            "projectOrganization": "org",
+            "rule": "javascript:S1067",
+            "ruleName": "foo",
+            "secondaryLocations": Array [],
+            "severity": "MAJOR",
+            "status": "OPEN",
+            "textRange": Object {
+              "endLine": 26,
+              "endOffset": 15,
+              "startLine": 25,
+              "startOffset": 0,
+            },
+            "transitions": Array [],
+            "type": "BUG",
+          }
+        }
+        onAssign={[MockFunction]}
+        togglePopup={[MockFunction]}
+      />
+    </li>
+  </ul>
+  <ul
+    className="list-inline"
+  >
+    <li
+      className="issue-meta js-issue-tags"
+    >
+      <IssueTags
+        canSetTags={false}
+        isOpen={false}
+        issue={
+          Object {
+            "actions": Array [],
+            "component": "main.js",
+            "componentLongName": "main.js",
+            "componentQualifier": "FIL",
+            "componentUuid": "foo1234",
+            "creationDate": "2017-03-01T09:36:01+0100",
+            "flows": Array [],
+            "fromHotspot": false,
+            "key": "AVsae-CQS-9G3txfbFN2",
+            "line": 25,
+            "message": "Reduce the number of conditional operators (4) used in the expression",
+            "organization": "myorg",
+            "project": "myproject",
+            "projectKey": "foo",
+            "projectName": "Foo",
+            "projectOrganization": "org",
+            "rule": "javascript:S1067",
+            "ruleName": "foo",
+            "secondaryLocations": Array [],
+            "severity": "MAJOR",
+            "status": "OPEN",
+            "textRange": Object {
+              "endLine": 26,
+              "endOffset": 15,
+              "startLine": 25,
+              "startOffset": 0,
+            },
+            "transitions": Array [],
+            "type": "BUG",
+          }
+        }
+        onChange={[MockFunction]}
+        togglePopup={[MockFunction]}
+      />
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`should render security hotspot correctly 1`] = `
+<div
+  className="issue-actions"
+>
+  <ul
+    className="issue-meta-list"
+  >
+    <li
+      className="issue-meta"
+    >
+      <IssueType
+        canSetType={false}
+        isOpen={false}
+        issue={
+          Object {
+            "actions": Array [],
+            "component": "main.js",
+            "componentLongName": "main.js",
+            "componentQualifier": "FIL",
+            "componentUuid": "foo1234",
+            "creationDate": "2017-03-01T09:36:01+0100",
+            "flows": Array [],
+            "fromHotspot": false,
+            "key": "AVsae-CQS-9G3txfbFN2",
+            "line": 25,
+            "message": "Reduce the number of conditional operators (4) used in the expression",
+            "organization": "myorg",
+            "project": "myproject",
+            "projectKey": "foo",
+            "projectName": "Foo",
+            "projectOrganization": "org",
+            "rule": "javascript:S1067",
+            "ruleName": "foo",
+            "secondaryLocations": Array [],
+            "severity": "MAJOR",
+            "status": "OPEN",
+            "textRange": Object {
+              "endLine": 26,
+              "endOffset": 15,
+              "startLine": 25,
+              "startOffset": 0,
+            },
+            "transitions": Array [],
+            "type": "SECURITY_HOTSPOT",
+          }
+        }
+        setIssueProperty={[Function]}
+        togglePopup={[MockFunction]}
+      />
+    </li>
+    <li
+      className="issue-meta"
+    >
+      <IssueTransition
+        hasTransitions={false}
+        isOpen={false}
+        issue={
+          Object {
+            "actions": Array [],
+            "component": "main.js",
+            "componentLongName": "main.js",
+            "componentQualifier": "FIL",
+            "componentUuid": "foo1234",
+            "creationDate": "2017-03-01T09:36:01+0100",
+            "flows": Array [],
+            "fromHotspot": false,
+            "key": "AVsae-CQS-9G3txfbFN2",
+            "line": 25,
+            "message": "Reduce the number of conditional operators (4) used in the expression",
+            "organization": "myorg",
+            "project": "myproject",
+            "projectKey": "foo",
+            "projectName": "Foo",
+            "projectOrganization": "org",
+            "rule": "javascript:S1067",
+            "ruleName": "foo",
+            "secondaryLocations": Array [],
+            "severity": "MAJOR",
+            "status": "OPEN",
+            "textRange": Object {
+              "endLine": 26,
+              "endOffset": 15,
+              "startLine": 25,
+              "startOffset": 0,
+            },
+            "transitions": Array [],
+            "type": "SECURITY_HOTSPOT",
+          }
+        }
+        onChange={[Function]}
+        togglePopup={[MockFunction]}
+      />
+    </li>
+  </ul>
+  <ul
+    className="list-inline"
+  >
+    <li
+      className="issue-meta js-issue-tags"
+    >
+      <IssueTags
+        canSetTags={false}
+        isOpen={false}
+        issue={
+          Object {
+            "actions": Array [],
+            "component": "main.js",
+            "componentLongName": "main.js",
+            "componentQualifier": "FIL",
+            "componentUuid": "foo1234",
+            "creationDate": "2017-03-01T09:36:01+0100",
+            "flows": Array [],
+            "fromHotspot": false,
+            "key": "AVsae-CQS-9G3txfbFN2",
+            "line": 25,
+            "message": "Reduce the number of conditional operators (4) used in the expression",
+            "organization": "myorg",
+            "project": "myproject",
+            "projectKey": "foo",
+            "projectName": "Foo",
+            "projectOrganization": "org",
+            "rule": "javascript:S1067",
+            "ruleName": "foo",
+            "secondaryLocations": Array [],
+            "severity": "MAJOR",
+            "status": "OPEN",
+            "textRange": Object {
+              "endLine": 26,
+              "endOffset": 15,
+              "startLine": 25,
+              "startOffset": 0,
+            },
+            "transitions": Array [],
+            "type": "SECURITY_HOTSPOT",
+          }
+        }
+        onChange={[MockFunction]}
+        togglePopup={[MockFunction]}
+      />
+    </li>
+  </ul>
+</div>
+`;

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

@@ -30,6 +30,7 @@ interface Props {
   toggleComment: (visible: boolean) => void;
   placeholder: string;
   placement?: PopupPlacement;
+  autoTriggered?: boolean;
 }
 
 interface State {
@@ -69,7 +70,7 @@ export default class CommentPopup extends React.PureComponent<Props, State> {
   };
 
   render() {
-    const { comment } = this.props;
+    const { comment, autoTriggered } = this.props;
     return (
       <DropdownOverlay placement={this.props.placement}>
         <div className="issue-comment-bubble-popup">
@@ -93,7 +94,7 @@ export default class CommentPopup extends React.PureComponent<Props, State> {
                 {!comment && translate('issue.comment.submit')}
               </Button>
               <ResetButtonLink className="js-issue-comment-cancel" onClick={this.handleCancelClick}>
-                {translate('cancel')}
+                {autoTriggered ? translate('skip') : translate('cancel')}
               </ResetButtonLink>
             </div>
             <div className="issue-comment-form-tips">

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

@@ -52,3 +52,20 @@ it('should render not allow to send comment with only spaces', () => {
   click(element.find('.js-issue-comment-submit'));
   expect(onComment.mock.calls.length).toBe(1);
 });
+
+it('should render the alternative cancel button label', () => {
+  const element = shallow(
+    <CommentPopup
+      autoTriggered={true}
+      onComment={jest.fn()}
+      placeholder=""
+      toggleComment={jest.fn()}
+    />
+  );
+  expect(
+    element
+      .find('.js-issue-comment-cancel')
+      .childAt(0)
+      .text()
+  ).toBe('skip');
+});

server/sonar-web/src/main/js/helpers/testMocks.ts

@@ -124,3 +124,49 @@ export function mockRouter(overrides: { push?: Function; replace?: Function } =
     ...overrides
   } as InjectedRouter;
 }
+
+export function mockIssue(withLocations = false, overrides: Partial<T.Issue> = {}) {
+  const issue: T.Issue = {
+    actions: [],
+    component: 'main.js',
+    componentLongName: 'main.js',
+    componentQualifier: 'FIL',
+    componentUuid: 'foo1234',
+    creationDate: '2017-03-01T09:36:01+0100',
+    flows: [],
+    fromHotspot: false,
+    key: 'AVsae-CQS-9G3txfbFN2',
+    line: 25,
+    message: 'Reduce the number of conditional operators (4) used in the expression',
+    organization: 'myorg',
+    project: 'myproject',
+    projectKey: 'foo',
+    projectName: 'Foo',
+    projectOrganization: 'org',
+    rule: 'javascript:S1067',
+    ruleName: 'foo',
+    secondaryLocations: [],
+    severity: 'MAJOR',
+    status: 'OPEN',
+    textRange: { startLine: 25, endLine: 26, startOffset: 0, endOffset: 15 },
+    transitions: [],
+    type: 'BUG'
+  };
+
+  function loc(): T.FlowLocation {
+    return {
+      component: 'main.js',
+      textRange: { startLine: 1, startOffset: 1, endLine: 2, endOffset: 2 }
+    };
+  }
+
+  if (withLocations) {
+    issue.flows = [[loc(), loc(), loc()], [loc(), loc()]];
+    issue.secondaryLocations = [loc(), loc()];
+  }
+
+  return {
+    ...issue,
+    ...overrides
+  };
+}

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

@@ -168,6 +168,7 @@ x_show={0} shown
 x_selected={0} selected
 x_of_y_shown={0} of {1} shown
 size=Size
+skip=Skip
 status=Status
 support=Support
 table=Table