Update Suggested edit UI
- change name from preview fix to show edit
Reviewer is suggesting different edit, we don't want to say reviewer
is always fixing changes
- Different coloring
- Documentation link
Screenshot: https://imgur.com/a/9yLrOql
Release-Notes: skip
Google-Bug-Id: b/273191391
Change-Id: I2fd40af60c1dc2be79eaac09df2259438f5c892e
diff --git a/polygerrit-ui/app/elements/shared/gr-user-suggestion-fix/gr-user-suggestion-fix.ts b/polygerrit-ui/app/elements/shared/gr-user-suggestion-fix/gr-user-suggestion-fix.ts
index 338b2d7..ff068a7 100644
--- a/polygerrit-ui/app/elements/shared/gr-user-suggestion-fix/gr-user-suggestion-fix.ts
+++ b/polygerrit-ui/app/elements/shared/gr-user-suggestion-fix/gr-user-suggestion-fix.ts
@@ -28,11 +28,9 @@
static override styles = [
css`
.header {
- background-color: var(--user-suggestion-header-background);
- color: var(--user-suggestion-header-color);
+ background-color: var(--background-color-primary);
border: 1px solid var(--border-color);
- border-bottom: 0;
- padding: var(--spacing-xs) var(--spacing-s);
+ padding: var(--spacing-xs) var(--spacing-xl);
display: flex;
align-items: center;
border-top-left-radius: var(--border-radius);
@@ -41,8 +39,8 @@
.header .title {
flex: 1;
}
- gr-copy-clipboard {
- --gr-copy-clipboard-icon-color: var(--user-suggestion-header-color);
+ .copyButton {
+ margin-right: var(--spacing-l);
}
code {
max-width: var(--gr-formatted-text-prose-max-width, none);
@@ -71,21 +69,29 @@
if (!this.textContent) return nothing;
const code = this.textContent;
return html`<div class="header">
- <div class="title">Suggested fix</div>
- <div>
+ <div class="title">
+ <span>Suggested edit</span>
+ <a
+ href="https://gerrit-review.googlesource.com/Documentation/user-suggest-edits.html"
+ target="_blank"
+ ><gr-icon icon="help" title="read documentation"></gr-icon
+ ></a>
+ </div>
+ <div class="copyButton">
<gr-copy-clipboard
hideInput=""
text=${code}
- copyTargetName="Suggested fix"
+ copyTargetName="Suggested edit"
></gr-copy-clipboard>
</div>
<div>
<gr-button
secondary
+ flatten
class="action show-fix"
@click=${this.handleShowFix}
>
- Preview Fix
+ Show edit
</gr-button>
</div>
</div>
diff --git a/polygerrit-ui/app/elements/shared/gr-user-suggestion-fix/gr-user-suggestion-fix_test.ts b/polygerrit-ui/app/elements/shared/gr-user-suggestion-fix/gr-user-suggestion-fix_test.ts
index f49ea98..aecd93b 100644
--- a/polygerrit-ui/app/elements/shared/gr-user-suggestion-fix/gr-user-suggestion-fix_test.ts
+++ b/polygerrit-ui/app/elements/shared/gr-user-suggestion-fix/gr-user-suggestion-fix_test.ts
@@ -27,17 +27,24 @@
assert.shadowDom.equal(
element,
/* HTML */ `<div class="header">
- <div class="title">Suggested fix</div>
- <div>
+ <div class="title">
+ <span>Suggested edit</span>
+ <a
+ href="https://gerrit-review.googlesource.com/Documentation/user-suggest-edits.html"
+ target="_blank"
+ ><gr-icon icon="help" title="read documentation"></gr-icon
+ ></a>
+ </div>
+ <div class="copyButton">
<gr-copy-clipboard
hideinput=""
text="Hello World"
- copytargetname="Suggested fix"
+ copytargetname="Suggested edit"
></gr-copy-clipboard>
</div>
<div>
- <gr-button class="action show-fix" secondary=""
- >Preview Fix</gr-button
+ <gr-button class="action show-fix" secondary="" flatten=""
+ >Show edit</gr-button
>
</div>
</div>
