Bump WebUI to 2.8.4 (#1851)

* Bump WebUI to 2.8.0
* Use components moved to web-ui
* Fix vulnerability
* Fix bad import for buildUrl
* Add missing copyright
* Remove use of NormalizationKey for NumericalComparisonFilterModel
* Bring FloatComparison filters in line with integer one

---------

Co-authored-by: martinboulais <31805063+martinboulais@users.noreply.github.com>

Author: graduta

lib/domain/dtos/filters/NumericalComparisonDto.js

@@ -20,4 +20,7 @@ exports.IntegerComparisonDto = Joi.object({
     limit: Joi.number().integer().min(0),
 });
 
-exports.FloatComparisonDto = Joi.object(Object.fromEntries(NUMERICAL_COMPARISON_OPERATORS.map((operator) => [operator, Joi.number()])));
+exports.FloatComparisonDto = Joi.object({
+    operator: Joi.string().valid(...NUMERICAL_COMPARISON_OPERATORS),
+    limit: Joi.number().min(0),
+});

lib/presentation/Component.js

@@ -2,7 +2,6 @@ html, body {
     scroll-behavior: smooth;
 
     --ui-component-medium: 550px;
-    --ui-component-large: 850px;
 }
 
 .cell-xs { max-width: 2rem; }
@@ -483,29 +482,16 @@ label {
 
 /* Popover system */
 
-.popover {
-    flex-shrink: 0;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1002;
-    max-width: var(--ui-component-large);
-}
-
 .no-events {
     pointer-events: none;
 }
 
-.btn-group-item:not(.last-item) {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+.btn-group .btn:not(.last-item) {
+    border-radius: .25rem 0 0 .25rem;
 }
 
-.btn-group-item:not(.first-item) {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+.btn-group .btn:not(.first-item) {
+    border-radius: 0 .25rem .25rem 0;
 }
 
 /* Modal */

lib/public/app.css

@@ -21,15 +21,12 @@ export class NumericalComparisonFilterModel extends FilterModel {
     /**
      * Constructor
      * @param {object} [options] options of the filter
-     * @param {boolean} [options.useOperatorAsNormalizationKey] if true, operator value will be used as normalization key, else operator will be
-     *     passed with key `operator` and `operand` will be passed as `limit`
      * @param {number} [options.scale] scale applied on the value of the operand in normalization
      * @param {boolean} [options.integer=false] if true, value is parsed as integer (else, it will be parsed as float)
      */
     constructor(options) {
         super();
-        const { useOperatorAsNormalizationKey, scale = 1, integer = false } = options || {};
-        this._useOperatorAsNormalizationKey = Boolean(useOperatorAsNormalizationKey);
+        const { scale = 1, integer = false } = options || {};
 
         this._operatorSelectionModel = new ComparisonSelectionModel();
         this._operatorSelectionModel.visualChange$.bubbleTo(this._visualChange$);
@@ -86,16 +83,10 @@ export class NumericalComparisonFilterModel extends FilterModel {
      * @inheritDoc
      */
     get normalized() {
-        if (this._useOperatorAsNormalizationKey) {
-            return {
-                [this._operatorSelectionModel.current]: this._operandInputModel.value,
-            };
-        } else {
-            return {
-                operator: this._operatorSelectionModel.current,
-                limit: this._operandInputModel.value,
-            };
-        }
+        return {
+            operator: this._operatorSelectionModel.current,
+            limit: this._operandInputModel.value,
+        };
     }
 
     // eslint-disable-next-line valid-jsdoc

lib/public/components/Filters/common/filters/NumericalComparisonFilterModel.js

@@ -1,3 +1,15 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE O2. This software is
+ * distributed under the terms of the GNU General Public License v3 (GPL
+ * Version 3), copied verbatim in the file "COPYING".
+ *
+ * See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ * 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.
+ */
 import { Observable } from '/js/src/index.js';
 
 /**
@@ -60,7 +72,6 @@ export class ProcessedTextInputModel extends Observable {
      */
     update(raw, parseValue = false) {
         this._raw = raw;
-
         if (parseValue && this._parse) {
             try {
                 const value = this._parse(raw);
@@ -74,7 +85,6 @@ export class ProcessedTextInputModel extends Observable {
                 // For now, simply ignore the new value if invalid
             }
         }
-
         this._visualChange$.notify();
     }
 

lib/public/components/Filters/common/filters/ProcessedTextInputModel.js

@@ -10,8 +10,7 @@
  *  granted to it by virtue of its status as an Intergovernmental Organization
  *  or submit itself to any jurisdiction.
  */
-import { dropdown } from '../../../common/popover/dropdown.js';
-import { h } from '/js/src/index.js';
+import { DropdownComponent, h } from '/js/src/index.js';
 import {
     getLocaleDateAndTime,
     getStartOfMonth,
@@ -93,7 +92,7 @@ const monthsOptions = ({ onChange }) => {
  * @param {TimeRangeInputModel} timeRangeFilterModel the model of the filter
  * @return {Component} the resulting component
  */
-export const timeRangeFilter = (timeRangeFilterModel) => dropdown(
+export const timeRangeFilter = (timeRangeFilterModel) => DropdownComponent(
     h(
         `.dropdown-trigger.form-control${timeRangeFilterModel.isValid ? '' : '.invalid'}`,
         [

lib/public/components/Filters/common/filters/timeRangeFilter.js

@@ -10,10 +10,7 @@
  *  granted to it by virtue of its status as an Intergovernmental Organization
  *  or submit itself to any jurisdiction.
  */
-import { popover } from '../../common/popover/popover.js';
-import { PopoverTriggerPreConfiguration } from '../../common/popover/popoverPreConfigurations.js';
-import { PopoverAnchors } from '../../common/popover/PopoverEngine.js';
-import { h, info } from '/js/src/index.js';
+import { h, info, popover, PopoverAnchors, PopoverTriggerPreConfiguration } from '/js/src/index.js';
 import { profiles } from '../../common/table/profiles.js';
 import { applyProfile } from '../../../utilities/applyProfile.js';
 import { tooltip } from '../../common/popover/tooltip.js';

lib/public/components/Filters/common/filtersPanelPopover.js

@@ -11,8 +11,7 @@
  * or submit itself to any jurisdiction.
  */
 
-import { h } from '/js/src/index.js';
-import { CopyToClipboardComponent } from '../common/selection/infoLoggerButtonGroup/CopyToClipboardComponent.js';
+import { CopyToClipboardComponent, h } from '/js/src/index.js';
 
 /**
  * Copies the url of the log to the clipboard

lib/public/components/Log/logLinkButton.js

@@ -11,9 +11,8 @@
  * or submit itself to any jurisdiction.
  */
 
-import { h } from '/js/src/index.js';
+import { documentClickTaggedEventRegistry, h } from '/js/src/index.js';
 import { iconCaretTop } from '/js/src/icons.js';
-import { documentClickTaggedEventRegistry } from '../../utilities/documentClickTaggedEventRegistry.js';
 
 /**
  * Based on controllers limits