SONAR-12414 Prevent click event from bubbling outside of popup

diff --git a/server/sonar-web/package.json b/server/sonar-web/package.json
index f7fed7193613dc77c582352e2f368d7e9299064d..c61ec70d52b649437934b4b7eaa0b8c2740a49b5 100644 (file)
--- a/server/sonar-web/package.json
+++ b/server/sonar-web/package.json
@@ -35,7 +35,7 @@
     "regenerator-runtime": "0.13.2",
     "remark-custom-blocks": "2.3.0",
     "remark-slug": "5.1.0",
-    "sonar-ui-common": "0.0.25",
+    "sonar-ui-common": "0.0.30",
     "styled-components": "4.3.2",
     "unist-util-visit": "1.4.0",
     "valid-url": "1.0.9",

diff --git a/server/sonar-web/src/main/js/components/issue/popups/ChangelogPopup.tsx b/server/sonar-web/src/main/js/components/issue/popups/ChangelogPopup.tsx
index 9557ac0e661a56c1621d3e430ad27afc8fb43058..1de05bf4c44a265a7519f34c2dd521f4911679a9 100644 (file)
--- a/server/sonar-web/src/main/js/components/issue/popups/ChangelogPopup.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/ChangelogPopup.tsx
@@ -18,7 +18,6 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import ClickEventBoundary from 'sonar-ui-common/components/controls/ClickEventBoundary';
 import { DropdownOverlay } from 'sonar-ui-common/components/controls/Dropdown';
 import { PopupPlacement } from 'sonar-ui-common/components/ui/popups';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
@@ -64,52 +63,50 @@ export default class ChangelogPopup extends React.PureComponent<Props, State> {
     const { author } = issue;
     return (
       <DropdownOverlay placement={PopupPlacement.BottomRight}>
-        <ClickEventBoundary>
-          <div className="menu is-container issue-changelog">
-            <table className="spaced">
-              <tbody>
-                <tr>
-                  <td className="thin text-left text-top nowrap">
-                    <DateTimeFormatter date={issue.creationDate} />
-                  </td>
-                  <td className="text-left text-top">
-                    {author ? `${translate('created_by')} ${author}` : translate('created')}
-                  </td>
-                </tr>
+        <div className="menu is-container issue-changelog">
+          <table className="spaced">
+            <tbody>
+              <tr>
+                <td className="thin text-left text-top nowrap">
+                  <DateTimeFormatter date={issue.creationDate} />
+                </td>
+                <td className="text-left text-top">
+                  {author ? `${translate('created_by')} ${author}` : translate('created')}
+                </td>
+              </tr>
 
-                {this.state.changelog.map((item, idx) => {
-                  const userName = item.userName || item.user;
+              {this.state.changelog.map((item, idx) => {
+                const userName = item.userName || item.user;
 
-                  return (
-                    <tr key={idx}>
-                      <td className="thin text-left text-top nowrap">
-                        <DateTimeFormatter date={item.creationDate} />
-                      </td>
-                      <td className="text-left text-top">
-                        {userName && (
-                          <p>
-                            <Avatar
-                              className="little-spacer-right"
-                              hash={item.avatar}
-                              name={userName}
-                              size={16}
-                            />
-                            {item.isUserActive
-                              ? userName
-                              : translateWithParameters('user.x_deleted', userName)}
-                          </p>
-                        )}
-                        {item.diffs.map(diff => (
-                          <IssueChangelogDiff diff={diff} key={diff.key} />
-                        ))}
-                      </td>
-                    </tr>
-                  );
-                })}
-              </tbody>
-            </table>
-          </div>
-        </ClickEventBoundary>
+                return (
+                  <tr key={idx}>
+                    <td className="thin text-left text-top nowrap">
+                      <DateTimeFormatter date={item.creationDate} />
+                    </td>
+                    <td className="text-left text-top">
+                      {userName && (
+                        <p>
+                          <Avatar
+                            className="little-spacer-right"
+                            hash={item.avatar}
+                            name={userName}
+                            size={16}
+                          />
+                          {item.isUserActive
+                            ? userName
+                            : translateWithParameters('user.x_deleted', userName)}
+                        </p>
+                      )}
+                      {item.diffs.map(diff => (
+                        <IssueChangelogDiff diff={diff} key={diff.key} />
+                      ))}
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
       </DropdownOverlay>
     );
   }

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 22f5f5f184c9a76d8ee6bde9726aee600c2a0f0e..aa5e411aa2923c1a17ea5d9514efe1c61ed3b1a1 100644 (file)
--- a/server/sonar-web/src/main/js/components/issue/popups/CommentPopup.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/CommentPopup.tsx
@@ -19,7 +19,6 @@
  */
 import * as React from 'react';
 import { Button, ResetButtonLink } from 'sonar-ui-common/components/controls/buttons';
-import ClickEventBoundary from 'sonar-ui-common/components/controls/ClickEventBoundary';
 import { DropdownOverlay } from 'sonar-ui-common/components/controls/Dropdown';
 import { PopupPlacement } from 'sonar-ui-common/components/ui/popups';
 import { translate } from 'sonar-ui-common/helpers/l10n';
@@ -74,39 +73,35 @@ export default class CommentPopup extends React.PureComponent<Props, State> {
     const { comment, autoTriggered } = this.props;
     return (
       <DropdownOverlay placement={this.props.placement}>
-        <ClickEventBoundary>
-          <div className="issue-comment-bubble-popup">
-            <div className="issue-comment-form-text">
-              <textarea
-                autoFocus={true}
-                onChange={this.handleCommentChange}
-                onKeyDown={this.handleKeyboard}
-                placeholder={this.props.placeholder}
-                rows={2}
-                value={this.state.textComment}
-              />
+        <div className="issue-comment-bubble-popup">
+          <div className="issue-comment-form-text">
+            <textarea
+              autoFocus={true}
+              onChange={this.handleCommentChange}
+              onKeyDown={this.handleKeyboard}
+              placeholder={this.props.placeholder}
+              rows={2}
+              value={this.state.textComment}
+            />
+          </div>
+          <div className="issue-comment-form-footer">
+            <div className="issue-comment-form-actions">
+              <Button
+                className="js-issue-comment-submit little-spacer-right"
+                disabled={this.state.textComment.trim().length < 1}
+                onClick={this.handleCommentClick}>
+                {comment && translate('save')}
+                {!comment && translate('issue.comment.submit')}
+              </Button>
+              <ResetButtonLink className="js-issue-comment-cancel" onClick={this.handleCancelClick}>
+                {autoTriggered ? translate('skip') : translate('cancel')}
+              </ResetButtonLink>
             </div>
-            <div className="issue-comment-form-footer">
-              <div className="issue-comment-form-actions">
-                <Button
-                  className="js-issue-comment-submit little-spacer-right"
-                  disabled={this.state.textComment.trim().length < 1}
-                  onClick={this.handleCommentClick}>
-                  {comment && translate('save')}
-                  {!comment && translate('issue.comment.submit')}
-                </Button>
-                <ResetButtonLink
-                  className="js-issue-comment-cancel"
-                  onClick={this.handleCancelClick}>
-                  {autoTriggered ? translate('skip') : translate('cancel')}
-                </ResetButtonLink>
-              </div>
-              <div className="issue-comment-form-tips">
-                <MarkdownTips />
-              </div>
+            <div className="issue-comment-form-tips">
+              <MarkdownTips />
             </div>
           </div>
-        </ClickEventBoundary>
+        </div>
       </DropdownOverlay>
     );
   }

diff --git a/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/ChangelogPopup-test.tsx.snap b/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/ChangelogPopup-test.tsx.snap
index fc871b08153ce4df4edf51f7ef9be4d067fdad29..2bf516e280b4f72a03427ef2ec4c8228ef5b360d 100644 (file)
--- a/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/ChangelogPopup-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/ChangelogPopup-test.tsx.snap
@@ -4,66 +4,64 @@ exports[`should render the changelog popup correctly 1`] = `
 <DropdownOverlay
   placement="bottom-right"
 >
-  <ClickEventBoundary>
-    <div
-      className="menu is-container issue-changelog"
+  <div
+    className="menu is-container issue-changelog"
+  >
+    <table
+      className="spaced"
     >
-      <table
-        className="spaced"
-      >
-        <tbody>
-          <tr>
-            <td
-              className="thin text-left text-top nowrap"
-            >
-              <DateTimeFormatter
-                date="2017-03-01T09:36:01+0100"
-              />
-            </td>
-            <td
-              className="text-left text-top"
-            >
-              created_by john.david.dalton@gmail.com
-            </td>
-          </tr>
-          <tr
-            key="0"
+      <tbody>
+        <tr>
+          <td
+            className="thin text-left text-top nowrap"
+          >
+            <DateTimeFormatter
+              date="2017-03-01T09:36:01+0100"
+            />
+          </td>
+          <td
+            className="text-left text-top"
+          >
+            created_by john.david.dalton@gmail.com
+          </td>
+        </tr>
+        <tr
+          key="0"
+        >
+          <td
+            className="thin text-left text-top nowrap"
           >
-            <td
-              className="thin text-left text-top nowrap"
-            >
-              <DateTimeFormatter
-                date="2017-03-01T09:36:01+0100"
+            <DateTimeFormatter
+              date="2017-03-01T09:36:01+0100"
+            />
+          </td>
+          <td
+            className="text-left text-top"
+          >
+            <p>
+              <Connect(Avatar)
+                className="little-spacer-right"
+                hash="gravatarhash"
+                name="John Doe"
+                size={16}
               />
-            </td>
-            <td
-              className="text-left text-top"
-            >
-              <p>
-                <Connect(Avatar)
-                  className="little-spacer-right"
-                  hash="gravatarhash"
-                  name="John Doe"
-                  size={16}
-                />
-                John Doe
-              </p>
-              <IssueChangelogDiff
-                diff={
-                  Object {
-                    "key": "severity",
-                    "newValue": "MINOR",
-                    "oldValue": "CRITICAL",
-                  }
+              John Doe
+            </p>
+            <IssueChangelogDiff
+              diff={
+                Object {
+                  "key": "severity",
+                  "newValue": "MINOR",
+                  "oldValue": "CRITICAL",
                 }
-                key="severity"
-              />
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </ClickEventBoundary>
+              }
+              key="severity"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </DropdownOverlay>
 `;
 
@@ -71,64 +69,62 @@ exports[`should render the changelog popup when we have a deleted user 1`] = `
 <DropdownOverlay
   placement="bottom-right"
 >
-  <ClickEventBoundary>
-    <div
-      className="menu is-container issue-changelog"
+  <div
+    className="menu is-container issue-changelog"
+  >
+    <table
+      className="spaced"
     >
-      <table
-        className="spaced"
-      >
-        <tbody>
-          <tr>
-            <td
-              className="thin text-left text-top nowrap"
-            >
-              <DateTimeFormatter
-                date="2017-03-01T09:36:01+0100"
-              />
-            </td>
-            <td
-              className="text-left text-top"
-            >
-              created_by john.david.dalton@gmail.com
-            </td>
-          </tr>
-          <tr
-            key="0"
+      <tbody>
+        <tr>
+          <td
+            className="thin text-left text-top nowrap"
+          >
+            <DateTimeFormatter
+              date="2017-03-01T09:36:01+0100"
+            />
+          </td>
+          <td
+            className="text-left text-top"
+          >
+            created_by john.david.dalton@gmail.com
+          </td>
+        </tr>
+        <tr
+          key="0"
+        >
+          <td
+            className="thin text-left text-top nowrap"
           >
-            <td
-              className="thin text-left text-top nowrap"
-            >
-              <DateTimeFormatter
-                date="2017-03-01T09:36:01+0100"
+            <DateTimeFormatter
+              date="2017-03-01T09:36:01+0100"
+            />
+          </td>
+          <td
+            className="text-left text-top"
+          >
+            <p>
+              <Connect(Avatar)
+                className="little-spacer-right"
+                name="john.doe"
+                size={16}
               />
-            </td>
-            <td
-              className="text-left text-top"
-            >
-              <p>
-                <Connect(Avatar)
-                  className="little-spacer-right"
-                  name="john.doe"
-                  size={16}
-                />
-                user.x_deleted.john.doe
-              </p>
-              <IssueChangelogDiff
-                diff={
-                  Object {
-                    "key": "severity",
-                    "newValue": "MINOR",
-                    "oldValue": "CRITICAL",
-                  }
+              user.x_deleted.john.doe
+            </p>
+            <IssueChangelogDiff
+              diff={
+                Object {
+                  "key": "severity",
+                  "newValue": "MINOR",
+                  "oldValue": "CRITICAL",
                 }
-                key="severity"
-              />
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </ClickEventBoundary>
+              }
+              key="severity"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </DropdownOverlay>
 `;

diff --git a/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/CommentPopup-test.tsx.snap b/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/CommentPopup-test.tsx.snap
index 706ea0067bd9bc1adc38713350e45992df9e4eca..d6ad2e1843952e76261532d2227cc5ce452a10d4 100644 (file)
--- a/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/CommentPopup-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/CommentPopup-test.tsx.snap
@@ -2,98 +2,94 @@
 
 exports[`should render the comment popup correctly when changing a comment 1`] = `
 <DropdownOverlay>
-  <ClickEventBoundary>
+  <div
+    className="issue-comment-bubble-popup"
+  >
     <div
-      className="issue-comment-bubble-popup"
+      className="issue-comment-form-text"
+    >
+      <textarea
+        autoFocus={true}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        placeholder=""
+        rows={2}
+        value="*test*"
+      />
+    </div>
+    <div
+      className="issue-comment-form-footer"
     >
       <div
-        className="issue-comment-form-text"
+        className="issue-comment-form-actions"
       >
-        <textarea
-          autoFocus={true}
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          placeholder=""
-          rows={2}
-          value="*test*"
-        />
+        <Button
+          className="js-issue-comment-submit little-spacer-right"
+          disabled={false}
+          onClick={[Function]}
+        >
+          save
+        </Button>
+        <ResetButtonLink
+          className="js-issue-comment-cancel"
+          onClick={[Function]}
+        >
+          cancel
+        </ResetButtonLink>
       </div>
       <div
-        className="issue-comment-form-footer"
+        className="issue-comment-form-tips"
       >
-        <div
-          className="issue-comment-form-actions"
-        >
-          <Button
-            className="js-issue-comment-submit little-spacer-right"
-            disabled={false}
-            onClick={[Function]}
-          >
-            save
-          </Button>
-          <ResetButtonLink
-            className="js-issue-comment-cancel"
-            onClick={[Function]}
-          >
-            cancel
-          </ResetButtonLink>
-        </div>
-        <div
-          className="issue-comment-form-tips"
-        >
-          <MarkdownTips />
-        </div>
+        <MarkdownTips />
       </div>
     </div>
-  </ClickEventBoundary>
+  </div>
 </DropdownOverlay>
 `;
 
 exports[`should render the comment popup correctly without existing comment 1`] = `
 <DropdownOverlay>
-  <ClickEventBoundary>
+  <div
+    className="issue-comment-bubble-popup"
+  >
     <div
-      className="issue-comment-bubble-popup"
+      className="issue-comment-form-text"
+    >
+      <textarea
+        autoFocus={true}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        placeholder="placeholder test"
+        rows={2}
+        value=""
+      />
+    </div>
+    <div
+      className="issue-comment-form-footer"
     >
       <div
-        className="issue-comment-form-text"
+        className="issue-comment-form-actions"
       >
-        <textarea
-          autoFocus={true}
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          placeholder="placeholder test"
-          rows={2}
-          value=""
-        />
+        <Button
+          className="js-issue-comment-submit little-spacer-right"
+          disabled={true}
+          onClick={[Function]}
+        >
+          issue.comment.submit
+        </Button>
+        <ResetButtonLink
+          className="js-issue-comment-cancel"
+          onClick={[Function]}
+        >
+          cancel
+        </ResetButtonLink>
       </div>
       <div
-        className="issue-comment-form-footer"
+        className="issue-comment-form-tips"
       >
-        <div
-          className="issue-comment-form-actions"
-        >
-          <Button
-            className="js-issue-comment-submit little-spacer-right"
-            disabled={true}
-            onClick={[Function]}
-          >
-            issue.comment.submit
-          </Button>
-          <ResetButtonLink
-            className="js-issue-comment-cancel"
-            onClick={[Function]}
-          >
-            cancel
-          </ResetButtonLink>
-        </div>
-        <div
-          className="issue-comment-form-tips"
-        >
-          <MarkdownTips />
-        </div>
+        <MarkdownTips />
       </div>
     </div>
-  </ClickEventBoundary>
+  </div>
 </DropdownOverlay>
 `;

diff --git a/server/sonar-web/yarn.lock b/server/sonar-web/yarn.lock
index 7c8cc91d854d02cc379c31c6cd46005ab23977ea..13248b219c2487aaae7bd7422cffb11b9bdc7083 100644 (file)
--- a/server/sonar-web/yarn.lock
+++ b/server/sonar-web/yarn.lock
@@ -9387,10 +9387,10 @@ sockjs@0.3.19:
     faye-websocket "^0.10.0"
     uuid "^3.0.1"
 
-sonar-ui-common@0.0.25:
-  version "0.0.25"
-  resolved "https://repox.jfrog.io/repox/api/npm/npm/sonar-ui-common/-/sonar-ui-common-0.0.25.tgz#c448e83dece5198592f3d6097f570fd9188dcee0"
-  integrity sha1-xEjoPezlGYWS89YJf1cP2RiNzuA=
+sonar-ui-common@0.0.30:
+  version "0.0.30"
+  resolved "https://repox.jfrog.io/repox/api/npm/npm/sonar-ui-common/-/sonar-ui-common-0.0.30.tgz#23cf7184b7fdf9711805b176540c6dd304ba669b"
+  integrity sha1-I89xhLf9+XEYBbF2VAxt0wS6Zps=
   dependencies:
     "@types/react-select" "1.2.6"
     classnames "2.2.6"