[O2B-1546] Add and adjust synchronous QC Flags active columns and tests

Introduce a dedicated synchronousQcFlagsActiveColumns config.

Make formatQcFlagStart/End accept an inline flag and pass it through to formatTimestamp so From/To and Created views can render date/time on one line.

Adjust a seeder row to mark a QC flag as deleted so it's text colour can be tested.

Update synchronous overview tests to validate combined From/To and CreatedBy cell contents, check comment/createdBy popovers, and assert Deleted cell text and styling.

Author: isaachilly

lib/database/seeders/20240404100811-qc-flags.js

@@ -253,7 +253,7 @@ module.exports = {
                     // Run : 56, FT0
                     {
                         id: 100,
-                        deleted: false,
+                        deleted: true,
                         from: null,
                         to: '2019-08-08 20:50:00',
                         comment: 'first part good',

lib/public/views/QcFlags/ActiveColumns/synchronousQcFlagsActiveColumns.js

@@ -0,0 +1,61 @@
+/**
+ * @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 { h } from '/js/src/index.js';
+import { qcFlagsActiveColumns } from './qcFlagsActiveColumns.js';
+import { formatQcFlagStart } from '../format/formatQcFlagStart.js';
+import { formatQcFlagEnd } from '../format/formatQcFlagEnd.js';
+import { formatQcFlagCreatedBy } from '../format/formatQcFlagCreatedBy.js';
+import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.js';
+
+/**
+ * Active columns configuration for synchronous QC flags table
+ */
+export const synchronousQcFlagsActiveColumns = {
+    id: {
+        name: 'Id',
+        visible: false,
+    },
+    flagType: {
+        ...qcFlagsActiveColumns.flagType,
+        classes: 'w-15',
+    },
+    from: {
+        name: 'From/To',
+        visible: true,
+        format: (_, qcFlag) => h('', [
+            h('.flex-row', ['From: ', formatQcFlagStart(qcFlag, true)]),
+            h('.flex-row', ['To: ', formatQcFlagEnd(qcFlag, true)]),
+        ]),
+        classes: 'w-15',
+    },
+    comment: {
+        ...qcFlagsActiveColumns.comment,
+        balloon: true,
+    },
+    deleted: {
+        name: 'Deleted',
+        visible: true,
+        classes: 'w-5',
+        format: (deleted) => deleted ? h('.danger', 'Yes') : 'No',
+    },
+    createdBy: {
+        name: 'Created',
+        visible: true,
+        balloon: true,
+        format: (_, qcFlag) => h('', [
+            h('.flex-row', ['By: ', formatQcFlagCreatedBy(qcFlag)]),
+            h('.flex-row', ['At: ', formatTimestamp(qcFlag.createdAt)]),
+        ]),
+    },
+};

lib/public/views/QcFlags/Synchronous/SynchronousQcFlagsOverviewPage.js

@@ -16,7 +16,7 @@ import { h } from '/js/src/index.js';
 import { estimateDisplayableRowsCount } from '../../../utilities/estimateDisplayableRowsCount.js';
 import { table } from '../../../components/common/table/table.js';
 import { paginationComponent } from '../../../components/Pagination/paginationComponent.js';
-import { qcFlagsActiveColumns } from '../ActiveColumns/qcFlagsActiveColumns.js';
+import { synchronousQcFlagsActiveColumns } from '../ActiveColumns/synchronousQcFlagsActiveColumns.js';
 import { qcFlagsBreadcrumbs } from '../../../components/qcFlags/qcFlagsBreadcrumbs.js';
 import { mergeRemoteData } from '../../../utilities/mergeRemoteData.js';
 import errorAlert from '../../../components/common/errorAlert.js';
@@ -46,16 +46,6 @@ export const SynchronousQcFlagsOverviewPage = ({ qcFlags: { synchronousOverviewM
         PAGE_USED_HEIGHT,
     ));
 
-    const activeColumns = {
-        qcFlagId: {
-            name: 'Id',
-            visible: false,
-            classes: 'w-5',
-        },
-        ...qcFlagsActiveColumns,
-    };
-    delete activeColumns.verified;
-
     return h(
         '',
         { onremove: () => synchronousOverviewModel.reset() },
@@ -70,8 +60,8 @@ export const SynchronousQcFlagsOverviewPage = ({ qcFlags: { synchronousOverviewM
                 h('.w-100.flex-column', [
                     table(
                         qcFlags,
-                        activeColumns,
-                        { classes: '.table-sm' },
+                        synchronousQcFlagsActiveColumns,
+                        { classes: '.table-sm.f6' },
                         null,
                         { sort: sortModel },
                     ),

lib/public/views/QcFlags/format/formatQcFlagEnd.js

@@ -17,11 +17,12 @@ import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.j
  * Format QC flag `to` timestamp
  *
  * @param {QcFlag} qcFlag QC flag
+ * @param {boolean} inline if true, date and time are on a single line
  * @return {Component} formatted `to` timestamp
  */
-export const formatQcFlagEnd = ({ from, to }) => {
+export const formatQcFlagEnd = ({ from, to }, inline = false) => {
     if (to) {
-        return formatTimestamp(to, false);
+        return formatTimestamp(to, inline);
     } else {
         return from
             ? 'Until run end'

lib/public/views/QcFlags/format/formatQcFlagStart.js

@@ -17,11 +17,12 @@ import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.j
  * Format QC flag `from` timestamp
  *
  * @param {QcFlag} qcFlag QC flag
+ * @param {boolean} inline if true, date and time are on a single line
  * @return {Component} formatted `from` timestamp
  */
-export const formatQcFlagStart = ({ from, to }) => {
+export const formatQcFlagStart = ({ from, to }, inline = false) => {
     if (from) {
-        return formatTimestamp(from, false);
+        return formatTimestamp(from, inline);
     } else {
         return to
             ? 'Since run start'

test/public/qcFlags/synchronousOverview.test.js

@@ -22,6 +22,7 @@ const {
     expectUrlParams,
     waitForNavigation,
     getColumnCellsInnerTexts,
+    getPopoverContent,
 } = require('../defaults.js');
 
 const { expect } = chai;
@@ -59,14 +60,21 @@ module.exports = () => {
 
     it('shows correct datatypes in respective columns', async () => {
         // eslint-disable-next-line require-jsdoc
-        const validateDate = (date) => date === '-' || !isNaN(dateAndTime.parse(date, 'DD/MM/YYYY hh:mm:ss'));
+        const validateDate = (date) => date === '-' || !isNaN(dateAndTime.parse(date, 'DD/MM/YYYY, hh:mm:ss'));
         const tableDataValidators = {
             flagType: (flagType) => flagType && flagType !== '-',
-            createdBy: (userName) => userName && userName !== '-',
-            from: (timestamp) => timestamp === 'Whole run coverage' || timestamp === 'Since run start' || validateDate(timestamp),
-            to: (timestamp) => timestamp === 'Whole run coverage' || timestamp === 'Until run end' || validateDate(timestamp),
-            createdAt: validateDate,
-            updatedAt: validateDate,
+            from: (cellContent) => {
+                const match = cellContent.match(/^From:\s*(.+)\nTo:\s*(.+)$/);
+                if (!match) return false;
+                const [, from, to] = match;
+                return (['Whole run coverage', 'Since run start'].includes(from) || validateDate(from))
+                    && (['Whole run coverage', 'Until run end'].includes(to) || validateDate(to));
+            },
+            deleted: (value) => value === 'Yes' || value === 'No',
+            createdBy: (cellContent) => {
+                const match = cellContent.match(/^By:\s*(.+)\nAt:\s*(.+)$/);
+                return match && match[1] !== '-' && validateDate(match[2]);
+            },
         };
 
         await validateTableData(page, new Map(Object.entries(tableDataValidators)));
@@ -80,6 +88,32 @@ module.exports = () => {
         await expectInnerText(page, '#totalRowsCount', '2');
     });
 
+    it('should display Comment tooltip with full information', async () => {
+        let popoverTrigger = await page.$(`#row100-comment .popover-trigger`);
+        expect(popoverTrigger).to.not.be.null;
+
+        const popoverContent = await getPopoverContent(popoverTrigger);
+        expect(popoverContent).to.equal('first part good');
+    });
+
+    it('should display CreatedBy tooltip with full information', async () => {
+        let popoverTrigger = await page.$(`#row100-createdBy .popover-trigger`);
+        expect(popoverTrigger).to.not.be.null;
+
+        const popoverContent = await getPopoverContent(popoverTrigger);
+        expect(popoverContent).to.equal('By: Jan JansenAt: 12/08/2024, 12:00:00');
+    });
+
+    it('should display correct Deleted text colour', async () => {
+        const deletedCell = await page.$('#row100-deleted-text:nth-child(1)');
+
+        const deletedCellText = await page.evaluate(cell => cell.textContent.trim(), deletedCell);
+        expect(deletedCellText).to.equal('Yes');
+
+        const deletedCellFirstChildClass = await page.evaluate(cell => cell.firstElementChild.className, deletedCell);
+        expect(deletedCellFirstChildClass).to.include('danger');
+    });
+
     it('can navigate to run details page from breadcrumbs link', async () => {
         await waitForNavigation(page, () => pressElement(page, '#breadcrumb-run-number'));
         expectUrlParams(page, { page: 'run-detail', runNumber: '56' });