Add link icon to messages in change log.

Clicking the link icon will change the url. Users can copy the link by using the right click button of the browser. Screenshot: https://imgur.com/a/qnfOmQz Change-Id: I7b5cda5833835a296146b0f1add5255c044243ef
2020-05-13 18:40:11 +02:00
parent c878e9bcbd
commit f09ff816d4
8 changed files with 28 additions and 54 deletions
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js
@@ -1020,7 +1020,10 @@ class GrChangeView extends mixinBehaviors( [
    this.$.fileList.collapseAllDiffs();
  }

-  _paramsChanged(value) {
+  _paramsChanged(value, oldValue) {
+    const paramsChanged = JSON.stringify(oldValue) !== JSON.stringify(value);
+    if (!paramsChanged) return;
+
    if (value.view !== GerritNav.View.CHANGE) {
      this._initialLoadComplete = false;
      return;
@@ -1138,14 +1141,6 @@ class GrChangeView extends mixinBehaviors( [
    this.viewState.numFilesShown = numFilesShown;
  }

-  _handleMessageAnchorTap(e) {
-    const hash = MSG_PREFIX + e.detail.id;
-    const url = GerritNav.getUrlForChange(this._change,
-        this._patchRange.patchNum, this._patchRange.basePatchNum,
-        this._editMode, hash);
-    history.replaceState(null, '', url);
-  }
-
  _maybeScrollToMessage(hash) {
    if (hash.startsWith(MSG_PREFIX)) {
      this.messagesList.scrollToMessage(hash.substr(MSG_PREFIX.length));
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_html.js
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_html.js
@@ -711,7 +711,6 @@ export const htmlTemplate = html`
            change-comments="[[_changeComments]]"
            project-name="[[_change.project]]"
            show-reply-buttons="[[_loggedIn]]"
-            on-message-anchor-tap="_handleMessageAnchorTap"
            on-reply="_handleMessageReply"
          ></gr-messages-list>
        </template>
@@ -726,7 +725,6 @@ export const htmlTemplate = html`
            change-comments="[[_changeComments]]"
            project-name="[[_change.project]]"
            show-reply-buttons="[[_loggedIn]]"
-            on-message-anchor-tap="_handleMessageAnchorTap"
            on-reply="_handleMessageReply"
          ></gr-messages-list-experimental>
        </template>
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.js
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.js
@@ -322,20 +322,6 @@ suite('gr-change-view tests', () => {
  const getCustomCssValue =
      cssParam => util.getComputedStyleValue(cssParam, element);

-  test('_handleMessageAnchorTap', () => {
-    element._changeNum = '1';
-    element._patchRange = {
-      basePatchNum: 'PARENT',
-      patchNum: 1,
-    };
-    const getUrlStub = sandbox.stub(GerritNav, 'getUrlForChange');
-    const replaceStateStub = sandbox.stub(history, 'replaceState');
-    element._handleMessageAnchorTap({detail: {id: 'a12345'}});
-
-    assert.equal(getUrlStub.lastCall.args[4], '#message-a12345');
-    assert.isTrue(replaceStateStub.called);
-  });
-
  suite('plugins adding to file tab', () => {
    setup(done => {
      // Resolving it here instead of during setup() as other tests depend
--- a/polygerrit-ui/app/elements/change/gr-message/gr-message.js
+++ b/polygerrit-ui/app/elements/change/gr-message/gr-message.js
@@ -35,6 +35,7 @@ import {SpecialFilePath} from '../../../constants/constants.js';

 const PATCH_SET_PREFIX_PATTERN = /^Patch Set \d+:\s*(.*)/;
 const LABEL_TITLE_SCORE_PATTERN = /^(-?)([A-Za-z0-9-]+?)([+-]\d+)?$/;
+const MSG_PREFIX = '#message-';

 /**
 * @extends PolymerElement
@@ -152,6 +153,10 @@ class GrMessage extends GestureEventListeners(
        value: false,
      },
      _isCleanerLogExperimentEnabled: Boolean,
+      _changeMessageUrl: {
+        type: String,
+        computed: '_computeChangeMessageUrl(message)',
+      },
    };
  }

@@ -407,13 +412,10 @@ class GrMessage extends GestureEventListeners(
    return classes.join(' ');
  }

-  _handleAnchorClick(e) {
-    e.preventDefault();
-    this.dispatchEvent(new CustomEvent('message-anchor-tap', {
-      bubbles: true,
-      composed: true,
-      detail: {id: this.message.id},
-    }));
+  _computeChangeMessageUrl(message) {
+    if (!message) return '';
+    const hash = MSG_PREFIX + message.id;
+    return hash;
  }

  _handleReplyTap(e) {
--- a/polygerrit-ui/app/elements/change/gr-message/gr-message_html.js
+++ b/polygerrit-ui/app/elements/change/gr-message/gr-message_html.js
@@ -181,6 +181,9 @@ export const htmlTemplate = html`
        content: 'PS ';
      }
    }
+    .message-link {
+      text-decoration: none;
+    }
  </style>
  <div class$="[[_computeClass(_expanded)]]">
    <div class="contentContainer">
@@ -300,13 +303,20 @@ export const htmlTemplate = html`
          </span>
        </template>
        <template is="dom-if" if="[[message.id]]">
-          <span class="date" on-click="_handleAnchorClick">
+          <span class="date">
            <gr-date-formatter
              has-tooltip=""
              show-date-and-time=""
              date-str="[[message.date]]"
            ></gr-date-formatter>
          </span>
+          <a class="message-link" href="[[_changeMessageUrl]]">
+            <iron-icon
+              id="icon"
+              class="link-icon"
+              icon="gr-icons:link"
+            ></iron-icon>
+          </a>
        </template>
        <iron-icon
          id="expandToggle"
--- a/polygerrit-ui/app/elements/change/gr-message/gr-message_test.html
+++ b/polygerrit-ui/app/elements/change/gr-message/gr-message_test.html
@@ -222,26 +222,6 @@ suite('gr-message tests', () => {
      });
    });

-    test('clicking on date link fires event', () => {
-      element.message = {
-        type: 'REVIEWER_UPDATE',
-        updated: '2016-01-12 20:24:49.448000000',
-        reviewer: {},
-        id: '47c43261_55aa2c41',
-        expanded: false,
-      };
-      flushAsynchronousOperations();
-      const stub = sinon.stub();
-      element.addEventListener('message-anchor-tap', stub);
-      const dateEl = element.shadowRoot
-          .querySelector('.date');
-      assert.ok(dateEl);
-      MockInteractions.tap(dateEl);
-
-      assert.isTrue(stub.called);
-      assert.deepEqual(stub.lastCall.args[0].detail, {id: element.message.id});
-    });
-
    suite('compute messages', () => {
      test('empty', () => {
        assert.equal(element._computeMessageContent('', '', true), '');
--- a/polygerrit-ui/app/elements/core/gr-navigation/gr-navigation.js
+++ b/polygerrit-ui/app/elements/core/gr-navigation/gr-navigation.js
@@ -393,12 +393,13 @@ export const GerritNav = {
   * @param {number=} opt_patchNum
   * @return {string}
   */
-  getUrlForChangeById(changeNum, project, opt_patchNum) {
+  getUrlForChangeById(changeNum, project, opt_patchNum, opt_messageHash) {
    return this._getUrlFor({
      view: GerritNav.View.CHANGE,
      changeNum,
      project,
      patchNum: opt_patchNum,
+      messageHash: opt_messageHash,
    });
  },

--- a/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.js
+++ b/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.js
@@ -102,6 +102,8 @@ $_documentContainer.innerHTML = `<iron-iconset-svg name="gr-icons" size="24">
      <g id="pets"><circle cx="4.5" cy="9.5" r="2.5"/><circle cx="9" cy="5.5" r="2.5"/><circle cx="15" cy="5.5" r="2.5"/><circle cx="19.5" cy="9.5" r="2.5"/><path d="M17.34 14.86c-.87-1.02-1.6-1.89-2.48-2.91-.46-.54-1.05-1.08-1.75-1.32-.11-.04-.22-.07-.33-.09-.25-.04-.52-.04-.78-.04s-.53 0-.79.05c-.11.02-.22.05-.33.09-.7.24-1.28.78-1.75 1.32-.87 1.02-1.6 1.89-2.48 2.91-1.31 1.31-2.92 2.76-2.62 4.79.29 1.02 1.02 2.03 2.33 2.32.73.15 3.06-.44 5.54-.44h.18c2.48 0 4.81.58 5.54.44 1.31-.29 2.04-1.31 2.33-2.32.31-2.04-1.3-3.49-2.61-4.8z"/><path d="M0 0h24v24H0z" fill="none"/></g>
      <!-- This SVG is a copy from material.io https://material.io/icons/#visibility-->
      <g id="ready"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></g>
+      <!-- This SVG is a copy from material.io https://material.io/resources/icons/?icon=link&style=baseline-->
+      <g id="link"><path d="M0 0h24v24H0z" fill="none"/><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></g>
    </defs>
  </svg>
 </iron-iconset-svg>`;