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/main.js b/src/contentScripts/communityConsole/main.js
index 964a647..e5d9af3 100644
--- a/src/contentScripts/communityConsole/main.js
+++ b/src/contentScripts/communityConsole/main.js
@@ -53,7 +53,8 @@
   // Unified profile iframe
   'iframe',
 
-  // Canned response tags or toolbelt (for the extra info feature)
+  // Canned response tags or toolbelt (for the extra info feature and the
+  // "import CR" popup for the workflows feature)
   'ec-canned-response-row .tags',
   'ec-canned-response-row .main .toolbelt',
 
@@ -170,9 +171,11 @@
       unifiedProfilesFix.fixIframe(node);
     }
 
-    // Show additional details in the canned responses view.
+    // Show additional details in the canned responses view (and add the
+    // "import" button if applicable for the workflows feature).
     if (node.matches('ec-canned-response-row .tags')) {
       window.TWPTExtraInfo.injectAtCRIfEnabled(node, /* isExpanded = */ false);
+      window.TWPTWorkflowsImport.addButtonIfEnabled(node);
     }
     if (node.matches('ec-canned-response-row .main .toolbelt')) {
       const tags = node.parentNode?.querySelector?.('.tags');
@@ -236,8 +239,8 @@
   infiniteScroll = new InfiniteScroll();
   workflows = new Workflows();
 
-  // autoRefresh, extraInfo and threadPageDesignWarning are initialized in
-  // start.js
+  // autoRefresh, extraInfo, threadPageDesignWarning and workflowsImport are
+  // initialized in start.js
 
   // Before starting the mutation Observer, check whether we missed any
   // mutations by manually checking whether some watched nodes already