Merge pull request #36677 from overleaf/mj-fix-tag-hsl

[web] Allow derived HSL values for tags

GitOrigin-RevId: c9617a8b289e361f3dd438c7d81d8b3c1d5cb645

services/web/app/src/Features/Tags/TagsController.mjs

@@ -3,9 +3,7 @@ import SessionManager from '../Authentication/SessionManager.mjs'
 import Errors from '../Errors/Errors.js'
 import { z, zz, parseReq } from '../../infrastructure/Validation.mjs'
 import { expressify } from '@overleaf/promise-utils'
-
-// mirrors the Tag model's own color validator (models/Tag.mjs)
-const COLOR_REGEX = /^#[a-fA-F0-9]{6}$/
+import { TAG_COLOR_REGEX } from '../../models/Tag.mjs'
 
 async function _getTags(userId, _req, res) {
   if (!userId) {
@@ -34,7 +32,7 @@ async function getAllTags(req, res) {
 const createTagSchema = z.object({
   body: z.strictObject({
     name: z.string().min(1),
-    color: z.string().regex(COLOR_REGEX).optional(),
+    color: z.string().regex(TAG_COLOR_REGEX).optional(),
   }),
 })
 // Rollout-temporary fallback (pre-refinement schema from main); delete
@@ -201,7 +199,7 @@ const editTagSchema = z.object({
   }),
   body: z.strictObject({
     name: z.string().min(1),
-    color: z.string().regex(COLOR_REGEX).optional(),
+    color: z.string().regex(TAG_COLOR_REGEX).optional(),
   }),
 })
 // Rollout-temporary fallback (pre-refinement schema from main); delete

services/web/app/src/models/Tag.mjs

@@ -1,7 +1,8 @@
 import mongoose from '../infrastructure/Mongoose.mjs'
 const { Schema } = mongoose
 
-const COLOR_REGEX = /^#[a-fA-F0-9]{6}$/
+// Support hex colours and the auto-generated HSL colours based on IDs
+export const TAG_COLOR_REGEX = /^(#[a-fA-F0-9]{6}|hsl\(\d{1,3}, 70%, 45%\))$/
 
 // Note that for legacy reasons, user_id and project_ids are plain strings,
 // not ObjectIds.
@@ -14,7 +15,7 @@ export const TagSchema = new Schema(
       type: String,
       validate: {
         validator: function (v) {
-          return !v || COLOR_REGEX.test(v)
+          return !v || TAG_COLOR_REGEX.test(v)
         },
         message: 'Provided color code is invalid.',
       },

services/web/frontend/js/features/project-list/components/modals/edit-tag-modal.tsx

@@ -105,7 +105,7 @@ export function EditTagModal({ id, tag, onEdit, onClose }: EditTagModalProps) {
 
       <OLModalBody>
         <OLForm onSubmit={handleSubmit}>
-          <OLFormGroup controlId="edit-tag-modal">
+          <OLFormGroup controlId="edit-tag-modal-form">
             <OLFormLabel>{t('edit_tag_name')}</OLFormLabel>
             <OLFormControl
               ref={autoFocusedRef}