[O2B-907] Add color to tags (#1363)

* added color to tags and display them

* feature/)2B-907: added color to back and frontend

* fixed linter issues

* implemented fixes

* Display tag as colored badge

* Fix runs export

* Save # in color column

* Fix linter and test, and add possibility to remove color

* Code review

---------

Co-authored-by: Menno Konijn <menno.konijn@usmedia.nl>
Co-authored-by: Martin Boulais <31805063+martinboulais@users.noreply.github.com>

Author: 3 people

lib/database/adapters/TagAdapter.js

@@ -29,7 +29,7 @@ class TagAdapter {
      * @param {SequelizeTag} databaseObject Object to convert.
      * @returns {Tag} Converted entity object.
      */
-    toEntity({ id, text, description, email, mattermost, last_edited_name, archived, archivedAt, updatedAt }) {
+    toEntity({ id, text, description, email, mattermost, last_edited_name, archived, color, archivedAt, updatedAt }) {
         return {
             id,
             text,
@@ -38,6 +38,7 @@ class TagAdapter {
             email,
             mattermost,
             archived,
+            color,
             archivedAt: archivedAt ? new Date(archivedAt).getTime() : null,
             updatedAt: new Date(updatedAt).getTime(),
         };

lib/database/migrations/20240123103621-add-color-to-tags.js

@@ -0,0 +1,19 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+    up: async (queryInterface, Sequelize) => queryInterface.sequelize.transaction(async () => {
+        await queryInterface.addColumn('tags', 'color', {
+            allowNull: true,
+            type: Sequelize.STRING(7),
+            default: null,
+            validate: {
+                len: 7,
+            },
+        });
+    }),
+
+    down: async (queryInterface) => queryInterface.sequelize.transaction(async () => {
+        await queryInterface.removeColumn('tags', 'color');
+    }),
+};

lib/database/models/tag.js

@@ -40,6 +40,11 @@ module.exports = (sequelize) => {
             allowNull: true,
             defaultValue: null,
         },
+        color: {
+            type: Sequelize.STRING,
+            allowNull: true,
+            defaultValue: null,
+        },
         archived: {
             type: Sequelize.VIRTUAL,
             allowNull: true,

lib/database/models/typedefs/SequelizeTag.js

@@ -23,5 +23,6 @@
  * @property {string|null} archivedAt
  * @property {string} createdAt
  * @property {string} updatedAt
+ * @property {string|null} color
  * @property {Run[]|null} runs
  */

lib/domain/dtos/CreateTagDto.js

@@ -12,6 +12,7 @@
  */
 
 const Joi = require('joi');
+const { ColorDto } = require('./common/ColorDto.js');
 
 const BodyDto = Joi.object({
     text: Joi.string()
@@ -32,7 +33,7 @@ const BodyDto = Joi.object({
         .optional()
         .allow('', null)
         .email({ multiple: true }),
-
+    color: ColorDto.optional(),
 });
 
 const QueryDto = Joi.object({

lib/domain/dtos/UpdateTagDto.js

@@ -13,6 +13,7 @@
 
 const Joi = require('joi');
 const EntityIdDto = require('./EntityIdDto');
+const { ColorDto } = require('./common/ColorDto.js');
 
 const BodyDto = Joi.object({
     description: Joi.string()
@@ -28,6 +29,7 @@ const BodyDto = Joi.object({
         .allow('', null)
         .email({ multiple: true }),
     archivedAt: Joi.date().allow(null).optional(),
+    color: ColorDto.optional(),
 });
 const QueryDto = Joi.object({
     token: Joi.string(),

lib/domain/dtos/common/ColorDto.js

@@ -0,0 +1,19 @@
+/**
+ *  @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.
+ */
+
+const Joi = require('joi');
+
+exports.ColorDto = Joi.string()
+    .trim()
+    .allow(null)
+    .regex(/^#[0-9A-Fa-f]{6}$/);

lib/domain/entities/Tag.js

@@ -23,4 +23,5 @@
  * @property {number|null} archivedAt
  * @property {number} createdAt
  * @property {number} updatedAt
+ * @property {string|null} color
  */

lib/public/components/Detail/detailsList.js

@@ -47,7 +47,7 @@ export const detailsList = (fields, subject, configuration) => {
     const { selector, emptyString = '-', attributes = {} } = configuration || {};
 
     return h(
-        `#${selector}`,
+        `#${selector}.flex-column.g1`,
         attributes,
         Object.entries(fields).map(([key, { name, format, visible }]) => {
             const fieldValue = subject[key];

lib/public/components/Log/log.js

@@ -22,6 +22,7 @@ import { logReplyButton } from './logReplyButton.js';
 import { logText } from './logText.js';
 import { primaryButton } from '../common/primaryButton.js';
 import { logDetailsButton } from './logDetailsButton.js';
+import { tagBadge } from '../tag/tagBadge.js';
 
 /**
  * Provides formatting for each log field to display that field on the webpage
@@ -39,7 +40,7 @@ const logFields = (authenticationToken) => ({
     },
     tags: {
         name: 'Tags',
-        format: (tags) => h('div.flex-row.flex-wrap.g1', tags.map(({ text }) => h('div.badge.white.bg-gray-light.black', text))),
+        format: (tags) => h('div.flex-row.flex-wrap.g1', tags.map(tagBadge)),
     },
     runs: {
         name: 'Runs',