HPCC-18551 Copy WUID to Clipboard

Signed-off-by: Gordon Smith <gordonjsmith@gmail.com>

esp/src/eclwatch/WUDetailsWidget.js

@@ -36,6 +36,8 @@ define([
     "dgrid/extensions/ColumnResizer",
     "dgrid/extensions/DijitRegistry",
 
+    "src/Clippy",
+
     "hpcc/_TabContainerWidget",
     "hpcc/ESPWorkunit",
     "hpcc/ESPRequest",
@@ -69,6 +71,7 @@ define([
 ], function (declare, lang, i18n, nlsHPCC, dom, domForm, domAttr, iframe, domClass, query, Memory, Observable,
                 registry,
                 OnDemandGrid, Keyboard, Selection, selector, ColumnResizer, DijitRegistry,
+                Clippy,
                 _TabContainerWidget, ESPWorkunit, ESPRequest, TargetSelectWidget, DelayLoadWidget, InfoGridWidget, WsWorkunits,
                 template) {
     return declare("WUDetailsWidget", [_TabContainerWidget], {
@@ -132,6 +135,8 @@ define([
 
             this.infoGridWidget = registry.byId(this.id + "InfoContainer");
             this.zapDialog = registry.byId(this.id + "ZapDialog");
+
+            Clippy.attach(this.id + "ClippyButton");
         },
 
         startup: function (args) {

esp/src/eclwatch/css/hpcc.css

@@ -1541,3 +1541,10 @@ margin-left:-20px;
 	margin: 0px;
 	font:0.75em;
 }
+
+button.clippy img {
+    margin:2px 0 0;
+    padding:0px;
+    width:13px;
+    height:16px;
+}

esp/src/eclwatch/dojoConfig.js

@@ -31,6 +31,7 @@ function getConfig(env) {
             "@hpcc-js/layout": baseUrl + "/node_modules/@hpcc-js/layout/dist/layout",
             "@hpcc-js/map": baseUrl + "/node_modules/@hpcc-js/map/dist/map",
             "@hpcc-js/other": baseUrl + "/node_modules/@hpcc-js/other/dist/other",
+            "clipboard": baseUrl + "/node_modules/clipboard/dist/clipboard",
             "crossfilter": baseUrl + "/crossfilter/crossfilter.min"
         },
         packages: [

esp/src/eclwatch/templates/WUDetailsWidget.html

@@ -78,6 +78,7 @@
                 <div data-dojo-props="region: 'center'" data-dojo-type="dijit.layout.ContentPane">
                     <h2>
                         <img id="${id}ProtectedImage" src="${dojoConfig.urlInfo.resourcePath}/img/locked.png" />&nbsp;<div id="${id}StateIdImage" class="iconWorkunit" ></div>&nbsp;<span id="${id}Wuid" class="bold">${i18n.WUID}</span>
+                        <button id="${id}ClippyButton" class="clippy" data-clipboard-target="#${id}Wuid"><img src="${dojoConfig.urlInfo.resourcePath}/img/clippy.png" alt="Copy to clipboard"></button>
                     </h2>
                     <form id="${id}SummaryForm">
                         <ul>

esp/src/package.json

@@ -26,7 +26,8 @@
     "@hpcc-js/layout": "0.0.40",
     "@hpcc-js/map": "0.0.44",
     "@hpcc-js/other": "0.0.40",
-    "cpx": "1.5.0",
+    "clipboard": "1.7.1",
+    "cpx":  "1.5.0",
     "css-loader": "0.28.7",
     "dijit": "1.13.0",
     "dojo": "1.13.0",

esp/src/src/Clippy.ts

@@ -0,0 +1,25 @@
+import * as Clipboard from "clipboard";
+import * as Tooltip from "dijit/Tooltip";
+import * as dom from "dojo/dom";
+import * as mouse from "dojo/mouse";
+import * as on from "dojo/on";
+
+export function attach(domID: string): void {
+    const clipboard: Clipboard = new Clipboard(`#${domID}`);
+    clipboard.on("success", e => {
+        e.clearSelection();
+        const node: HTMLElement = dom.byId(domID);
+        Tooltip.show("Copied!", node);
+        on.once(node, mouse.leave, () => {
+            Tooltip.hide(node);
+        });
+    });
+
+    clipboard.on("error", e => {
+        const node: HTMLElement = dom.byId(domID);
+        Tooltip.show("Press ctrl+c to copy.", node);
+        on.once(node, mouse.leave, () => {
+            Tooltip.hide(node);
+        });
+    });
+}

esp/src/tslint.json

@@ -0,0 +1,80 @@
+{
+    /*
+   * Possible values:
+   * - the name of a built-in config
+   * - the name of an NPM module which has a "main" file that exports a config object
+   * - a relative path to a JSON file
+   */
+    "extends": "tslint:recommended",
+    "rules": {
+        /*
+     * Any rules specified here will override those from the base config we are extending.
+     */
+        "prefer-for-of": false,
+        "no-console": [
+            false
+        ],
+        "radix": false,
+        "interface-over-type-literal": false,
+        "no-empty-interface": false,
+        "no-unused-expression": false,
+        "space-before-function-paren": false,
+        "arrow-parens": false,
+        "forin": false,
+        "member-access": false,
+        "variable-name": [
+            false
+        ],
+        "object-literal-sort-keys": false,
+        "trailing-comma": [
+            false,
+            {
+                "multiline": "always",
+                "singleline": "never"
+            }
+        ],
+        "curly": false,
+        "member-ordering": [
+            true
+        ],
+        "max-classes-per-file": [
+            false
+        ],
+        "no-empty": false,
+        "max-line-length": [
+            false
+        ],
+        "only-arrow-functions": [
+            false
+        ],
+        "no-namespace": [
+            false
+        ],
+        "interface-name": [
+            false
+        ],
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-decl",
+            "check-operator",
+            "check-module",
+            "check-separator",
+            "check-type"
+        ],
+        "prefer-const": true,
+        "no-string-literal": false
+    },
+    "jsRules": {
+        /*
+     * Any rules specified here will override those from the base config we are extending.
+     */
+        "curly": true
+    },
+    "rulesDirectory": [
+        /*
+     * A list of relative or absolute paths to directories that contain custom rules.
+     * See the Custom Rules documentation below for more details.
+     */
+    ]
+}

esp/src/webpack.config.js

@@ -42,6 +42,11 @@ module.exports = {
                 }]
             }]
     },
+    resolve: {
+        alias: {
+            "clipboard": path.resolve(__dirname, 'node_modules/clipboard/dist/clipboard')
+        }
+    },    
     plugins: [
         new DojoWebpackPlugin({
             loaderConfig: require.resolve("./eclwatch/dojoConfig"),