Show info when adding reviewers to private change Show info that the private change will be visible to the user added as reviewer/CC when they are added in the reply dialog. Google-bug-id: b/259515557 Release-Notes: skip Screenshot: https://imgur.com/a/qAi0yrW Change-Id: I9c5e11194db57a4d7e080c33f14297611bbf1e55
diff --git a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.ts b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.ts index 29bd1d9..11406b4 100644 --- a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.ts +++ b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.ts
@@ -111,7 +111,7 @@ LabelNameToValuesMap, PatchSetNumber, } from '../../../api/rest-api'; -import {css, html, PropertyValues, LitElement} from 'lit'; +import {css, html, PropertyValues, LitElement, nothing} from 'lit'; import {sharedStyles} from '../../../styles/shared-styles'; import {when} from 'lit/directives/when.js'; import {classMap} from 'lit/directives/class-map.js'; @@ -606,6 +606,16 @@ .patchsetLevelContainer.unresolved { background-color: var(--unresolved-comment-background-color); } + .privateVisiblityInfo { + display: flex; + justify-content: center; + background-color: var(--info-background); + padding: var(--spacing-s) 0; + } + .privateVisiblityInfo gr-icon { + margin-right: var(--spacing-m); + color: var(--info-foreground); + } `, ]; @@ -791,6 +801,7 @@ <gr-endpoint-slot name="below"></gr-endpoint-slot> </gr-endpoint-decorator> ${this.renderCCList()} ${this.renderReviewConfirmation()} + ${this.renderPrivateVisiblityInfo()} </section> <section class="labelsContainer">${this.renderLabels()}</section> <section class="newReplyDialog textareaContainer"> @@ -893,6 +904,22 @@ `; } + private renderPrivateVisiblityInfo() { + const addedAccounts = [ + ...(this.reviewersList?.additions() ?? []), + ...(this.ccsList?.additions() ?? []), + ]; + if (!this.change?.is_private || !addedAccounts.length) return nothing; + return html` + <div class="privateVisiblityInfo"> + <gr-icon icon="info"></gr-icon> + <div> + Adding a reviewer/CC will make this private change visible to them + </div> + </div> + `; + } + private renderLabels() { if (!this.change || !this.account || !this.permittedLabels) return; return html`
diff --git a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog_test.ts b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog_test.ts index 633c5b0..52ea252 100644 --- a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog_test.ts +++ b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog_test.ts
@@ -211,10 +211,7 @@ <div class="peopleListLabel">CC</div> <gr-account-list allow-any-input="" id="ccs"> </gr-account-list> </div> - <dialog - tabindex="-1" - id="reviewerConfirmationModal" - > + <dialog tabindex="-1" id="reviewerConfirmationModal"> <div class="reviewerConfirmation"> Group <span class="groupName"> </span> @@ -232,7 +229,7 @@ No </gr-button> </div> - </gr-overlay> + </dialog> </section> <section class="labelsContainer"> <gr-endpoint-decorator name="reply-label-scores"> @@ -330,6 +327,123 @@ ); }); + test('renders private change info when reviewer is added', async () => { + element.change!.is_private = true; + element.requestUpdate(); + await element.updateComplete; + const peopleContainer = queryAndAssert<HTMLDivElement>( + element, + '.peopleContainer' + ); + + // Info is rendered only if reviewer is added + assert.dom.equal( + peopleContainer, + ` + <section class="peopleContainer"> + <gr-endpoint-decorator name="reply-reviewers"> + <gr-endpoint-param name="change"> </gr-endpoint-param> + <gr-endpoint-param name="reviewers"> </gr-endpoint-param> + <div class="peopleList"> + <div class="peopleListLabel">Reviewers</div> + <gr-account-list id="reviewers"> </gr-account-list> + <gr-endpoint-slot name="right"> </gr-endpoint-slot> + </div> + <gr-endpoint-slot name="below"> </gr-endpoint-slot> + </gr-endpoint-decorator> + <div class="peopleList"> + <div class="peopleListLabel">CC</div> + <gr-account-list allow-any-input="" id="ccs"> </gr-account-list> + </div> + <dialog + tabindex="-1" + id="reviewerConfirmationModal" + > + <div class="reviewerConfirmation"> + Group + <span class="groupName"> </span> + has + <span class="groupSize"> </span> + members. + <br /> + Are you sure you want to add them all? + </div> + <div class="reviewerConfirmationButtons"> + <gr-button aria-disabled="false" role="button" tabindex="0"> + Yes + </gr-button> + <gr-button aria-disabled="false" role="button" tabindex="0"> + No + </gr-button> + </div> + </dialog> + </section> + ` + ); + + const account = createAccountWithId(22); + element.reviewersList!.accounts = []; + element.reviewersList!.addAccountItem({account, count: 1}); + element.reviewersList!.dispatchEvent( + new CustomEvent('account-added', { + detail: {account}, + }) + ); + element.requestUpdate(); + await element.updateComplete; + + assert.dom.equal( + peopleContainer, + ` + <section class="peopleContainer"> + <gr-endpoint-decorator name="reply-reviewers"> + <gr-endpoint-param name="change"> </gr-endpoint-param> + <gr-endpoint-param name="reviewers"> </gr-endpoint-param> + <div class="peopleList"> + <div class="peopleListLabel">Reviewers</div> + <gr-account-list id="reviewers"> </gr-account-list> + <gr-endpoint-slot name="right"> </gr-endpoint-slot> + </div> + <gr-endpoint-slot name="below"> </gr-endpoint-slot> + </gr-endpoint-decorator> + <div class="peopleList"> + <div class="peopleListLabel">CC</div> + <gr-account-list allow-any-input="" id="ccs"> </gr-account-list> + </div> + <dialog + tabindex="-1" + id="reviewerConfirmationModal" + > + <div class="reviewerConfirmation"> + Group + <span class="groupName"> </span> + has + <span class="groupSize"> </span> + members. + <br /> + Are you sure you want to add them all? + </div> + <div class="reviewerConfirmationButtons"> + <gr-button aria-disabled="false" role="button" tabindex="0"> + Yes + </gr-button> + <gr-button aria-disabled="false" role="button" tabindex="0"> + No + </gr-button> + </div> + </dialog> + <div class="privateVisiblityInfo"> + <gr-icon icon="info"> + </gr-icon> + <div> + Adding a reviewer/CC will make this private change visible to them + </div> + </div> + </section> + ` + ); + }); + test('default to publishing draft comments with reply', async () => { // Async tick is needed because iron-selector content is distributed and // distributed content requires an observer to be set up.