Merge "New change summary - introduce edit pencil"

polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata_html.ts

@@ -49,7 +49,15 @@ export const htmlTemplate = html`
       pointer-events: none;
     }
     .hashtagChip {
-      margin-bottom: var(--spacing-m);
+      padding-bottom: var(--spacing-s);
+    }
+    /* consistent with section .title, .value */
+    .hashtagChip.new-change-summary-true:not(last-of-type) {
+      padding-bottom: var(--spacing-s);
+    }
+    .hashtagChip.new-change-summary-true:last-of-type {
+      display: inline;
+      vertical-align: top;
     }
     #externalStyle {
       display: block;
@@ -340,6 +348,7 @@ export const htmlTemplate = html`
             placeholder="[[_computeTopicPlaceholder(_topicReadOnly)]]"
             read-only="[[_topicReadOnly]]"
             on-changed="_handleTopicChanged"
+            show-as-edit-pencil="[[_isNewChangeSummaryUiEnabled]]"
           ></gr-editable-label>
         </template>
       </span>
@@ -377,7 +386,7 @@ export const htmlTemplate = html`
       <span class="value">
         <template is="dom-repeat" items="[[change.hashtags]]">
           <gr-linked-chip
-            class="hashtagChip"
+            class$="hashtagChip new-change-summary-[[_isNewChangeSummaryUiEnabled]]"
             text="[[item]]"
             href="[[_computeHashtagUrl(item)]]"
             removable="[[!_hashtagReadOnly]]"
@@ -394,6 +403,7 @@ export const htmlTemplate = html`
             placeholder="[[_computeHashtagPlaceholder(_hashtagReadOnly)]]"
             read-only="[[_hashtagReadOnly]]"
             on-changed="_handleHashtagChanged"
+            show-as-edit-pencil="[[_isNewChangeSummaryUiEnabled]]"
           ></gr-editable-label>
         </template>
       </span>

polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list.ts

@@ -42,6 +42,7 @@ import {hasOwnProperty} from '../../../utils/common-util';
 import {isRemovableReviewer} from '../../../utils/change-util';
 import {ReviewerState} from '../../../constants/constants';
 import {appContext} from '../../../services/app-context';
+import {KnownExperimentId} from '../../../services/flags/flags';
 
 @customElement('gr-reviewer-list')
 export class GrReviewerList extends GestureEventListeners(
@@ -87,8 +88,21 @@ export class GrReviewerList extends GestureEventListeners(
   @property({type: Object})
   _xhrPromise?: Promise<Response | undefined>;
 
+  @property({type: Boolean})
+  _isNewChangeSummaryUiEnabled = false;
+
   private readonly restApiService = appContext.restApiService;
 
+  private readonly flagsService = appContext.flagsService;
+
+  /** @override */
+  ready() {
+    super.ready();
+    this._isNewChangeSummaryUiEnabled = this.flagsService.isEnabled(
+      KnownExperimentId.NEW_CHANGE_SUMMARY_UI
+    );
+  }
+
   @computed('ccsOnly')
   get _addLabel() {
     return this.ccsOnly ? 'Add CC' : 'Add reviewer';

polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_html.ts

@@ -28,6 +28,16 @@ export const htmlTemplate = html`
     .container {
       display: block;
     }
+    .addReviewer iron-icon {
+      color: inherit;
+      --iron-icon-height: 18px;
+      --iron-icon-width: 18px;
+    }
+    gr-button.addReviewer.new-change-summary-true {
+      --padding: 1px 4px;
+      vertical-align: top;
+      top: 1px;
+    }
     gr-button {
       --gr-button: {
         padding: 0px 0px;
@@ -51,6 +61,16 @@ export const htmlTemplate = html`
         >
         </gr-account-chip>
       </template>
+      <template is="dom-if" if="[[_isNewChangeSummaryUiEnabled]]">
+        <gr-button
+          link=""
+          id="addReviewer"
+          class="addReviewer new-change-summary-true"
+          on-click="_handleAddTap"
+          title="[[_addLabel]]"
+          ><iron-icon icon="gr-icons:edit"></iron-icon
+        ></gr-button>
+      </template>
     </div>
     <gr-button
       class="hiddenReviewers"
@@ -59,6 +79,7 @@ export const htmlTemplate = html`
       on-click="_handleViewAll"
       >and [[_hiddenReviewerCount]] more</gr-button
     >
+    <template is="dom-if" if="[[!_isNewChangeSummaryUiEnabled]]">
       <div class="controlsContainer" hidden$="[[!mutable]]">
         <gr-button
           link=""
@@ -68,5 +89,6 @@ export const htmlTemplate = html`
           >[[_addLabel]]</gr-button
         >
       </div>
+    </template>
   </div>
 `;

polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_test.js

@@ -36,6 +36,7 @@ suite('gr-reviewer-list tests', () => {
   });
 
   test('controls hidden on immutable element', () => {
+    flush();
     element.mutable = false;
     assert.isTrue(element.shadowRoot
         .querySelector('.controlsContainer').hasAttribute('hidden'));
@@ -48,6 +49,7 @@ suite('gr-reviewer-list tests', () => {
     element.addEventListener('show-reply-dialog', () => {
       done();
     });
+    flush();
     MockInteractions.tap(element.shadowRoot
         .querySelector('.addReviewer'));
   });

polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.ts

@@ -89,6 +89,9 @@ export class GrEditableLabel extends KeyboardShortcutMixin(
   @property({type: Number})
   readonly _verticalOffset = -30;
 
+  @property({type: Boolean})
+  showAsEditPencil = false;
+
   /** @override */
   ready() {
     super.ready();

polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_html.ts

@@ -68,13 +68,32 @@ export const htmlTemplate = html`
       }
       --paper-input-container-focus-color: var(--link-color);
     }
+    gr-button iron-icon {
+      color: inherit;
+      --iron-icon-height: 18px;
+      --iron-icon-width: 18px;
+    }
+    gr-button.new-change-summary-true {
+      --padding: 1px 4px;
+    }
   </style>
+  <template is="dom-if" if="[[!showAsEditPencil]]">
     <label
       class$="[[_computeLabelClass(readOnly, value, placeholder)]]"
       title$="[[_computeLabel(value, placeholder)]]"
       on-click="_showDropdown"
       >[[_computeLabel(value, placeholder)]]</label
     >
+  </template>
+  <template is="dom-if" if="[[showAsEditPencil]]">
+    <gr-button
+      link=""
+      class$="new-change-summary-true [[_computeLabelClass(readOnly, value, placeholder)]]"
+      on-click="_showDropdown"
+      title="[[_computeLabel(value, placeholder)]]"
+      ><iron-icon icon="gr-icons:edit"></iron-icon
+    ></gr-button>
+  </template>
   <iron-dropdown
     id="dropdown"
     vertical-align="auto"

polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_test.js

@@ -45,6 +45,7 @@ suite('gr-editable-label tests', () => {
   setup(async () => {
     element = basicFixture.instantiate();
     elementNoPlaceholder = noPlaceholderFixture.instantiate();
+    flush();
     label = element.shadowRoot.querySelector('label');
 
     await flush();
@@ -178,6 +179,7 @@ suite('gr-editable-label tests', () => {
 
     setup(() => {
       element = readOnlyFixture.instantiate();
+      flush();
       label = element.shadowRoot
           .querySelector('label');
     });