feat(nimbus): Create new tag or edit the existing tag (#13791)

Because

- We want to give the ability to the users to create and modify the
available tags

This commit

- Add a button on the sidebar to manage tags
- Managing tags allows either to edit the tag name/color or to give the
option to add a new tag
- Dynamically create the prefilled tag name and generate a random color 
- Validation for the duplicate tag name or empty tag name
- New factory to create the tags for the test

Note: In the follow-up PR will give the users the ability to assign tags
to the deliveries

Fixes #13518

Author: yashikakhurana

experimenter/experimenter/experiments/tests/factories.py

@@ -32,6 +32,7 @@
     NimbusFeatureConfig,
     NimbusIsolationGroup,
     NimbusVersionedSchema,
+    Tag,
 )
 from experimenter.openidc.tests.factories import UserFactory
 from experimenter.outcomes import Outcomes
@@ -880,3 +881,11 @@ class NimbusFmlErrorDataClass:
     col: int
     message: str
     highlight: str
+
+
+class TagFactory(factory.django.DjangoModelFactory):
+    name = factory.LazyAttribute(lambda o: faker.unique.word().title())
+    color = factory.LazyAttribute(lambda o: faker.hex_color())
+
+    class Meta:
+        model = Tag

experimenter/experimenter/nimbus_ui/constants.py

@@ -17,6 +17,7 @@ class NimbusUIConstants:
     ERROR_NAME_MAPS_TO_EXISTING_SLUG = (
         "Name maps to a pre-existing slug, please choose another name."
     )
+    ERROR_TAG_DUPLICATE_NAME = "Tag with this Name already exists."
 
     RISK_MESSAGE_URL = "https://mozilla-hub.atlassian.net/wiki/spaces/FIREFOX/pages/208308555/Message+Consult+Creation"
     REVIEW_URL = "https://experimenter.info/access"

experimenter/experimenter/nimbus_ui/forms.py

@@ -1,10 +1,11 @@
+import random
 from collections import defaultdict
 from datetime import UTC, datetime
 
 import markus
 from django import forms
 from django.contrib.auth.models import User
-from django.forms import inlineformset_factory
+from django.forms import BaseModelFormSet, inlineformset_factory
 from django.http import HttpRequest
 from django.urls import reverse
 from django.utils.text import slugify
@@ -20,6 +21,7 @@
     NimbusExperimentBranchThroughExcluded,
     NimbusExperimentBranchThroughRequired,
     NimbusFeatureConfig,
+    Tag,
 )
 from experimenter.kinto.tasks import (
     nimbus_check_kinto_push_queue_by_collection,
@@ -1541,3 +1543,60 @@ def __init__(self, *args, **kwargs):
         }
         self.fields["application"].widget.attrs.update(htmx_attrs)
         self.fields["feature_configs"].widget.attrs.update(htmx_attrs)
+
+
+class TagForm(forms.ModelForm):
+    name = forms.CharField(
+        required=True,
+        max_length=100,
+        label="Tag Name",
+        widget=forms.TextInput(attrs={"class": "form-control"}),
+    )
+    color = forms.CharField(
+        required=True,
+        max_length=7,
+        label="Color",
+        widget=forms.TextInput(
+            attrs={"type": "color", "class": "form-control form-control-color"}
+        ),
+    )
+
+    class Meta:
+        model = Tag
+        fields = ["name", "color"]
+
+
+class TagBaseFormSet(BaseModelFormSet):
+    def clean(self):
+        if any(self.errors):
+            return
+
+        names = []
+        for form in self.forms:
+            name = form.cleaned_data.get("name")
+            if name:
+                names.append(name.lower())
+
+        if len(names) != len(set(names)):
+            raise forms.ValidationError(NimbusUIConstants.ERROR_TAG_DUPLICATE_NAME)
+
+    def create_tag(self):
+        # Create a new tag with a unique name and random color
+        base_name = "Tag"
+        existing_count = Tag.objects.count()
+        # Generate a range
+        tag_names_all = [f"{base_name} {i}" for i in range(1, existing_count + 1)]
+        tag_names_used = set(Tag.objects.values_list("name", flat=True))
+        tag_names_free = sorted(set(tag_names_all) - tag_names_used)
+        name = (
+            tag_names_free[0] if tag_names_free else f"{base_name} {existing_count + 1}"
+        )
+
+        random_color = f"#{random.randint(0, 0xFFFFFF):06x}"
+        tag = Tag.objects.create(name=name, color=random_color)
+        return tag
+
+
+TagFormSet = forms.modelformset_factory(
+    Tag, form=TagForm, formset=TagBaseFormSet, extra=0, can_delete=False
+)

experimenter/experimenter/nimbus_ui/templates/nimbus_experiments/experiment_base.html

@@ -84,4 +84,11 @@ <h1 class="modal-title fs-5" id="cloneModalLabel">
       </div>
     </div>
   </div>
+  <div class="modal fade" id="tagsModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog">
+      <div class="modal-content" id="tagsModalContent">
+        <!-- Content will be loaded via HTMX -->
+      </div>
+    </div>
+  </div>
 {% endblock %}

experimenter/experimenter/nimbus_ui/templates/nimbus_experiments/sidebar.html

@@ -35,6 +35,17 @@
       </p>
     </div>
   {% endif %}
+  <strong class="ms-3">Tags</strong>
+  <hr class="my-0 mb-2">
+  <button type="button"
+          class="btn btn-link text-start p-2 mb-2 text-decoration-none"
+          data-bs-toggle="modal"
+          data-bs-target="#tagsModal"
+          hx-get="{% url 'nimbus-ui-tags-manage' %}"
+          hx-target="#tagsModalContent">
+    <i class="fa-solid fa-tags pe-2"></i>
+    Manage Tags
+  </button>
   <strong class="ms-3">Actions</strong>
   <hr class="my-0 mb-2">
   {% include "common/sidebar_link.html" with title="Clone" link="" icon="fa-regular fa-copy fa-lg" data_bs_toggle="modal" data_bs_target="#cloneModal" %}

experimenter/experimenter/nimbus_ui/templates/nimbus_experiments/tags_list_partial.html

@@ -0,0 +1,21 @@
+<div id="tags-list">
+  {{ formset.management_form }}
+  {% if formset.forms %}
+    {% for form in formset %}
+      <div class="d-flex align-items-start mb-3">
+        {{ form.id }}
+        <div class="me-3">{{ form.color }}</div>
+        <div class="flex-grow-1">
+          {{ form.name }}
+          {% if form.name.errors %}<div class="invalid-feedback d-block mt-1">{{ form.name.errors|first }}</div>{% endif %}
+        </div>
+      </div>
+    {% endfor %}
+  {% else %}
+    <div class="text-center py-4 text-muted">
+      <i class="fa-solid fa-tags fa-2x mb-3"></i>
+      <p class="mb-1">No tags available</p>
+      <small>Add a tag using the Create button below</small>
+    </div>
+  {% endif %}
+</div>

experimenter/experimenter/nimbus_ui/templates/nimbus_experiments/tags_manage.html

@@ -0,0 +1,39 @@
+{% load nimbus_extras %}
+
+<div class="modal-header">
+  <h5 class="modal-title">Manage Tags</h5>
+  <button type="button"
+          class="btn-close"
+          data-bs-dismiss="modal"
+          aria-label="Close"></button>
+</div>
+<div class="modal-body"
+     id="tags-modal-body"
+     style="height: 400px;
+            overflow-y: auto">
+  <form id="tags-form" method="post">
+    {% csrf_token %}
+    <div id="tags-list">
+      {% include "nimbus_experiments/tags_list_partial.html" %}
+
+    </div>
+  </form>
+</div>
+<div class="modal-footer d-flex justify-content-between position-sticky bottom-0 bg-white border-top">
+  <button type="button"
+          class="btn btn-outline-primary"
+          hx-post="{% url 'nimbus-ui-tags-create' %}"
+          hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+          hx-target="#tags-list"
+          hx-swap="innerHTML"
+          hx-on::after-request="document.getElementById('tags-modal-body').scrollTop = document.getElementById('tags-modal-body').scrollHeight">
+    + Create
+  </button>
+  <button type="button"
+          class="btn btn-primary"
+          hx-post="{% url 'nimbus-ui-tags-save' %}"
+          hx-include="#tags-form"
+          hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+          hx-target="#tags-list"
+          hx-swap="innerHTML">Save</button>
+</div>

experimenter/experimenter/nimbus_ui/tests/test_forms.py

@@ -27,6 +27,7 @@
     NimbusExperimentFactory,
     NimbusFeatureConfigFactory,
     NimbusVersionedSchemaFactory,
+    TagFactory,
 )
 from experimenter.kinto.tasks import (
     nimbus_check_kinto_push_queue_by_collection,
@@ -68,6 +69,8 @@
     ReviewToDraftForm,
     SignoffForm,
     SubscribeForm,
+    TagForm,
+    TagFormSet,
     TakeawaysForm,
     ToggleArchiveForm,
     UnsubscribeForm,
@@ -3894,3 +3897,67 @@ def test_features_view_feature_config_field_updates_correctly(
             ),
             feature_configs.choices,
         )
+
+
+class TestTagForm(TestCase):
+    def test_valid_form(self):
+        data = {"name": "Test Tag", "color": "#ff0000"}
+        form = TagForm(data)
+        self.assertTrue(form.is_valid())
+        tag = form.save()
+        self.assertEqual(tag.name, "Test Tag")
+        self.assertEqual(tag.color, "#ff0000")
+
+    def test_invalid_form_missing_name(self):
+        data = {"color": "#ff0000"}
+        form = TagForm(data)
+        self.assertFalse(form.is_valid())
+        self.assertIn("name", form.errors)
+
+    def test_invalid_form_missing_color(self):
+        data = {"name": "Test Tag"}
+        form = TagForm(data)
+        self.assertFalse(form.is_valid())
+        self.assertIn("color", form.errors)
+
+
+class TestTagFormSet(TestCase):
+    def test_formset_prevents_duplicate_names(self):
+        data = {
+            "form-TOTAL_FORMS": "2",
+            "form-INITIAL_FORMS": "0",
+            "form-MIN_NUM_FORMS": "0",
+            "form-MAX_NUM_FORMS": "1000",
+            "form-0-name": "Duplicate",
+            "form-0-color": "#ff0000",
+            "form-1-name": "duplicate",
+            "form-1-color": "#00ff00",
+        }
+        formset = TagFormSet(data)
+        self.assertFalse(formset.is_valid())
+        self.assertIn(
+            NimbusUIConstants.ERROR_TAG_DUPLICATE_NAME, str(formset.non_form_errors())
+        )
+
+    def test_formset_allows_unique_names(self):
+        data = {
+            "form-TOTAL_FORMS": "2",
+            "form-INITIAL_FORMS": "0",
+            "form-MIN_NUM_FORMS": "0",
+            "form-MAX_NUM_FORMS": "1000",
+            "form-0-name": "Tag One",
+            "form-0-color": "#ff0000",
+            "form-1-name": "Tag Two",
+            "form-1-color": "#00ff00",
+        }
+        formset = TagFormSet(data)
+        self.assertTrue(formset.is_valid())
+
+    def test_create_tag_generates_unique_name(self):
+        TagFactory.create(name="Tag 1")
+        TagFactory.create(name="Tag 2")
+        formset = TagFormSet()
+        tag = formset.create_tag()
+        self.assertEqual(tag.name, "Tag 3")
+        self.assertTrue(tag.color.startswith("#"))
+        self.assertEqual(len(tag.color), 7)

experimenter/experimenter/nimbus_ui/tests/test_views.py

@@ -18,18 +18,21 @@
     NimbusExperimentBranchThroughExcluded,
     NimbusExperimentBranchThroughRequired,
     NimbusFeatureConfig,
+    Tag,
 )
 from experimenter.experiments.tests.factories import (
     NimbusBranchFactory,
     NimbusDocumentationLinkFactory,
     NimbusExperimentFactory,
     NimbusFeatureConfigFactory,
+    TagFactory,
 )
 from experimenter.kinto.tasks import (
     nimbus_check_kinto_push_queue_by_collection,
     nimbus_synchronize_preview_experiments_in_kinto,
 )
 from experimenter.klaatu.tasks import klaatu_start_job
+from experimenter.nimbus_ui.constants import NimbusUIConstants
 from experimenter.nimbus_ui.filtersets import (
     FeaturesPageSortChoices,
     MyDeliveriesChoices,
@@ -3917,3 +3920,77 @@ def test_features_view_deliveries_table_can_sort_by_total_clients(self):
             [e.slug for e in response.context["experiments_delivered"]],
             [experiment2.slug, experiment1.slug],
         )
+
+
+class TestTagsManageView(AuthTestCase):
+    def test_tags_manage_view_renders(self):
+        TagFactory.create(name="Tag 1")
+        TagFactory.create(name="Tag 2")
+        response = self.client.get(reverse("nimbus-ui-tags-manage"))
+        self.assertEqual(response.status_code, 200)
+        self.assertContains(response, "Tag 1")
+        self.assertContains(response, "Tag 2")
+
+
+class TestTagCreateView(AuthTestCase):
+    def test_create_tag(self):
+        response = self.client.post(reverse("nimbus-ui-tags-create"))
+        self.assertEqual(response.status_code, 200)
+        self.assertEqual(Tag.objects.count(), 1)
+        self.assertEqual(Tag.objects.first().name, "Tag 1")
+
+
+class TestTagSaveView(AuthTestCase):
+    def test_save_valid_tags(self):
+        tag = TagFactory.create(name="Tag 1", color="#ff0000")
+        response = self.client.post(
+            reverse("nimbus-ui-tags-save"),
+            {
+                "form-TOTAL_FORMS": "1",
+                "form-INITIAL_FORMS": "1",
+                "form-MIN_NUM_FORMS": "0",
+                "form-MAX_NUM_FORMS": "1000",
+                "form-0-id": tag.id,
+                "form-0-name": "Updated Tag",
+                "form-0-color": "#00ff00",
+            },
+        )
+        self.assertEqual(response.status_code, 200)
+        tag.refresh_from_db()
+        self.assertEqual(tag.color, "#00ff00")
+
+    def test_save_invalid_tags(self):
+        tag = TagFactory.create(name="Tag 1", color="#ff0000")
+        response = self.client.post(
+            reverse("nimbus-ui-tags-save"),
+            {
+                "form-TOTAL_FORMS": "1",
+                "form-INITIAL_FORMS": "1",
+                "form-MIN_NUM_FORMS": "0",
+                "form-MAX_NUM_FORMS": "1000",
+                "form-0-id": tag.id,
+                "form-0-name": "",
+                "form-0-color": "#00ff00",
+            },
+        )
+        self.assertEqual(response.status_code, 200)
+        self.assertContains(response, "This field is required.")
+
+    def test_save_duplicate_tags(self):
+        TagFactory.create(name="Existing Tag")
+        tag = TagFactory.create(name="Tag 1", color="#ff0000")
+
+        response = self.client.post(
+            reverse("nimbus-ui-tags-save"),
+            {
+                "form-TOTAL_FORMS": "1",
+                "form-INITIAL_FORMS": "1",
+                "form-MIN_NUM_FORMS": "0",
+                "form-MAX_NUM_FORMS": "1000",
+                "form-0-id": tag.id,
+                "form-0-name": "Existing Tag",
+                "form-0-color": "#00ff00",
+            },
+        )
+        self.assertEqual(response.status_code, 200)
+        self.assertContains(response, NimbusUIConstants.ERROR_TAG_DUPLICATE_NAME)