commit 705eac948a7bb5fc9cb8d54957f3b03b4557bb73
author Dhruv Srivastava <dhruvsri@google.com> Thu Sep 01 11:33:27 2022 +0200
committer Dhruv Srivastava <dhruvsri@google.com> Fri Sep 02 11:19:49 2022 +0200
tree a7b9914403df9923d0646456487cbc066f5f00dc
parent 03fa959b7e8c110cfe1f5434a321a3aa730673b3

Implement preview formatting for patchset level comment

Previously clicking the preview formatting checkbox would open a
separate area with the preview.
Now that we use GrComment we get preview formatting automatically
when the comment is saved hence change the editing state of the
comment when the button is clicked.

Instead of the checkbox we use the comment action button placed
similar to "Save" button but contains label wrt preview formatting.

Release-Notes: skip
Google-bug-id: b/242982372
Change-Id: I2305624e556c15d6dc7d45376ed46392bb23dcb1

polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts

diff --git a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts
index b2ae7f1..e96c8fe 100644
--- a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts
+++ b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts
@@ -745,7 +745,6 @@
 
   private renderDraftActions() {
     if (!isDraftOrUnsaved(this.comment)) return;
-    if (this.permanentEditingMode) return;
     return html`
       <div class="rightActions">
         ${this.autoSaving ? html`.&nbsp;&nbsp;` : ''}
@@ -793,7 +792,7 @@
   }
 
   private renderDiscardButton() {
-    if (this.editing) return;
+    if (this.editing || this.permanentEditingMode) return;
     return html`<gr-button
       link
       ?disabled=${this.saving}
@@ -815,7 +814,7 @@
   }
 
   private renderCancelButton() {
-    if (!this.editing) return;
+    if (!this.editing || this.permanentEditingMode) return;
     return html`
       <gr-button
         link
@@ -834,8 +833,8 @@
         link
         ?disabled=${this.isSaveDisabled()}
         class="action save"
-        @click=${this.save}
-        >Save</gr-button
+        @click=${this.handleSaveButtonClicked}
+        >${this.getSaveButtonLabel()}</gr-button
       >
     `;
   }
@@ -1067,6 +1066,16 @@
     });
   }
 
+  private getSaveButtonLabel() {
+    if (!this.permanentEditingMode) return 'Save';
+    return this.editing ? 'Preview' : 'Edit';
+  }
+
+  private handleSaveButtonClicked() {
+    if (!this.permanentEditingMode) this.save();
+    else this.editing = !this.editing;
+  }
+
   private handlePleaseFix() {
     const message = this.comment?.message;
     assert(!!message, 'empty message');