[OGUI-1917] Add copy URL action to command logs

InfoLogger/public/index.js

@@ -19,13 +19,14 @@ sessionService.loadAndHideParameters();
 window.sessionService = sessionService;
 
 // Import MVC
-import { mount } from '/js/src/index.js';
+import { mount, StatefulComponent } from '/js/src/index.js';
 import view from './view.js';
 import Model from './Model.js';
 
 // Start application
 const model = new Model();
 const debug = true; // shows when redraw is done
+StatefulComponent.useRenderer(model); // Register the model for the stateful components
 mount(document.body, view, model, debug);
 
 // Expose model to interact with it the browser's console

InfoLogger/public/log/commandLogs.js

@@ -20,6 +20,7 @@
   iconMagnifyingGlass,
   iconPlus,
   iconMinus,
+  CopyToClipboardComponent,
 } from '/js/src/index.js';
 import { BUTTON } from '../constants/button-states.const.js';
 import { MODE } from '../constants/mode.const.js';
@@ -67,8 +68,28 @@
   ]),
   h('', downloadButtonGroup(model.log)),
   h('', zoomButtonGroup(model.zoom)),
+  copyButtonOption(model.log.filter.queryString),
+
 ];
 
+/**
+ * A button component that lets the user copy the url
+ *
+ * @param {string} queryString - the query string to be appended to the URL
+ * @returns {Component} the copy button component
+ */
+const copyButtonOption = (queryString) => h(
+  CopyToClipboardComponent,
+  {
+    // Copy the non-debounced URL with the current query string
+    value: `${location.origin}${location.pathname}${queryString}`,
+    id: 'url',
+    className: 'button.btn',
+    style: { minWidth: '100px' },
+  },
+  'Copy URL',
+);
+
 /**
  * Group of buttons for switching between Query and Live modes.
  * @param {Model} model - root model of the application

InfoLogger/test/mocha-index.js

@@ -115,6 +115,7 @@ describe('InfoLogger', function () {
   require('./public/status-bar-mocha');
   require('./public/zoom.mocha');
   require('./public/log-context-menu-mocha');
+  require('./public/copy-url-btn-mocha');
 
   after(async () => {
     await browser.close();

InfoLogger/test/public/copy-url-btn-mocha.js

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
+ * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
+ * All rights not expressly granted are reserved.
+ *
+ * This software is distributed under the terms of the GNU General Public
+ * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+const assert = require('assert');
+const test = require('../mocha-index');
+
+describe('Copy URL button test-suite', async () => {
+  let baseUrl = null;
+  let page = null;
+
+  before(async () => {
+    ({ helpers: { baseUrl }, page } = test);
+    await page.browser().defaultBrowserContext().setPermission(
+      new URL(baseUrl).origin,
+      { permission: { name: 'clipboard-read' }, state: 'granted' },
+      { permission: { name: 'clipboard-write' }, state: 'granted' },
+    );
+    await page.goto(baseUrl, { waitUntil: 'networkidle0' });
+  });
+
+  it('should display the button with the correct label', async () => {
+    const button = await page.$('#copy-url');
+    const label = await page.evaluate((el) => el.textContent, button);
+    assert.strictEqual(label, 'Copy URL');
+  });
+
+  it('should copy a URL carrying the active filter', async () => {
+    await page.evaluate(() => {
+      window.model.log.filter.setCriteria('message', 'match', 'needle');
+      window.model.notify();
+    });
+    await page.click('#copy-url');
+    const copiedText = await page.evaluate(() => navigator.clipboard.readText());
+    const expectedUrl = `${baseUrl}?q=%7B%22message%22%3A%7B%22match%22`
+    + '%3A%22needle%22%7D%2C%22severity%22%3A%7B%22in%22%3A%22I%20W%20E%20F%22%7D%7D';
+    assert.strictEqual(copiedText, expectedUrl);
+  });
+});