Workflows manager: add user-friendly CR selector
This CL lets users select CRs for the "Reply with CR" action in a
user-friendly manner.
A "Select CR" button next to the CR field has been added, which opens a
popup with an adapted version of the Community Console CR list with
buttons next to each CR which lets the user select one of them.
Fixed: twpowertools:148
Change-Id: I9799d671e7440b66435b30c540adc3f050c9f4e2
diff --git a/src/contentScripts/communityConsole/workflows/components/TwptCRImportButton.js b/src/contentScripts/communityConsole/workflows/components/TwptCRImportButton.js
new file mode 100644
index 0000000..935926f
--- /dev/null
+++ b/src/contentScripts/communityConsole/workflows/components/TwptCRImportButton.js
@@ -0,0 +1,40 @@
+import '@material/web/button/outlined-button.js';
+
+import {html, LitElement} from 'lit';
+
+import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js';
+
+export default class TwptCRImportButton extends LitElement {
+ static properties = {
+ cannedResponseId: {type: String},
+ selected: {type: Boolean},
+ };
+
+ static styles = [
+ SHARED_MD3_STYLES,
+ ];
+
+ render() {
+ const icon = this.selected ? 'done' : 'post_add';
+ const label = this.selected ? 'Selected' : 'Select';
+
+ return html`
+ <md-outlined-button
+ icon=${icon}
+ label=${label}
+ ?disabled=${this.selected}
+ @click=${this._importCR}>
+ </md-outlined-button>
+ `;
+ }
+
+ _importCR() {
+ window.opener?.postMessage?.(
+ {
+ action: 'importCannedResponse',
+ cannedResponseId: this.cannedResponseId,
+ },
+ '*');
+ }
+}
+window.customElements.define('twpt-cr-import-button', TwptCRImportButton);