From 568526b87e61dc29a753f0efe2f0a1b70d0f5510 Mon Sep 17 00:00:00 2001
From: Rana Al-Khulaidi <69090627+RJAK11@users.noreply.github.com>
Date: Fri, 18 Oct 2024 12:40:53 -0400
Subject: [PATCH] feat(nimbus): add segments to new Nimbus UI summary page
 (#11563)

Because

* We want to allow the user to view the selected segments on the new
Nimbus UI summary page

This commit

* Updates the new Nimbus UI summary page to display the selected
segments with links to their definitions

Fixes #11533


![image](https://github.com/user-attachments/assets/685f24e0-80dd-4069-8bc5-692e785abbe4)

![image](https://github.com/user-attachments/assets/86cfa4e3-a926-4ce0-b4d7-515c85f1c943)
---
 .../templates/nimbus_experiments/detail.html  | 11 +++++++++++
 .../nimbus_ui_new/tests/test_views.py         | 16 ++++++++++++++--
 .../experimenter/nimbus_ui_new/views.py       | 19 ++++++++++++++++---
 3 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/experimenter/experimenter/nimbus_ui_new/templates/nimbus_experiments/detail.html b/experimenter/experimenter/nimbus_ui_new/templates/nimbus_experiments/detail.html
index 948dbb05fa..4377c43ccc 100644
--- a/experimenter/experimenter/nimbus_ui_new/templates/nimbus_experiments/detail.html
+++ b/experimenter/experimenter/nimbus_ui_new/templates/nimbus_experiments/detail.html
@@ -77,6 +77,17 @@ <h4>Overview</h4>
                 {% endfor %}
               </td>
             </tr>
+            <tr>
+              <th>Segments</th>
+              <td colspan="3">
+                {% for segment, url in segment_links %}
+                  <a href="{{ url }}" target="_blank" rel="noopener noreferrer">{{ segment.title|remove_underscores }}</a>
+                  {% if not forloop.last %},{% endif %}
+                {% empty %}
+                  <span class="text-danger">Not set</span>
+                {% endfor %}
+              </td>
+            </tr>
             <tr>
               <th>Team projects</th>
               <td>
diff --git a/experimenter/experimenter/nimbus_ui_new/tests/test_views.py b/experimenter/experimenter/nimbus_ui_new/tests/test_views.py
index c9f0a3b5ee..0b43db2971 100644
--- a/experimenter/experimenter/nimbus_ui_new/tests/test_views.py
+++ b/experimenter/experimenter/nimbus_ui_new/tests/test_views.py
@@ -898,6 +898,7 @@ def setUp(self):
             application="firefox-desktop",
             primary_outcomes=["outcome1", "outcome2"],
             secondary_outcomes=["outcome3", "outcome4"],
+            segments=["segment1", "segment2"],
             risk_brand=True,
             qa_status="NOT_SET",
             takeaways_qbr_learning=True,
@@ -918,7 +919,7 @@ def test_render_to_response(self):
         self.assertEqual(response.context["experiment"], self.experiment)
         self.assertIn("RISK_QUESTIONS", response.context)
 
-    def test_outcome_links(self):
+    def test_outcome_and_segment_links(self):
         response = self.client.get(
             reverse("nimbus-new-detail", kwargs={"slug": self.experiment.slug}),
         )
@@ -942,6 +943,16 @@ def test_outcome_links(self):
                 "https://mozilla.github.io/metric-hub/outcomes/firefox-desktop/outcome4",
             ),
         ]
+        expected_segment_links = [
+            (
+                "segment1",
+                "https://mozilla.github.io/metric-hub/segments/firefox_desktop/#segment1",
+            ),
+            (
+                "segment2",
+                "https://mozilla.github.io/metric-hub/segments/firefox_desktop/#segment2",
+            ),
+        ]
 
         self.assertEqual(
             response.context["primary_outcome_links"], expected_primary_links
@@ -949,6 +960,7 @@ def test_outcome_links(self):
         self.assertEqual(
             response.context["secondary_outcome_links"], expected_secondary_links
         )
+        self.assertEqual(response.context["segment_links"], expected_segment_links)
 
     def test_qa_edit_mode_get(self):
         response = self.client.get(
@@ -1114,7 +1126,7 @@ def test_get_renders_page(self):
         )
         self.assertEqual(response.status_code, 200)
 
-    def test_post_updates_metrics(self):
+    def test_post_updates_metrics_and_segments(self):
         application = NimbusExperiment.Application.DESKTOP
         experiment = NimbusExperimentFactory.create_with_lifecycle(
             NimbusExperimentFactory.Lifecycles.CREATED,
diff --git a/experimenter/experimenter/nimbus_ui_new/views.py b/experimenter/experimenter/nimbus_ui_new/views.py
index 8f45b1806a..081675176b 100644
--- a/experimenter/experimenter/nimbus_ui_new/views.py
+++ b/experimenter/experimenter/nimbus_ui_new/views.py
@@ -98,19 +98,32 @@ def get(self, *args, **kwargs):
 
 
 def build_experiment_context(experiment):
-    doc_base_url = "https://mozilla.github.io/metric-hub/outcomes/"
+    outcome_doc_base_url = "https://mozilla.github.io/metric-hub/outcomes/"
     primary_outcome_links = [
-        (outcome, f"{doc_base_url}{experiment.application}/{outcome}")
+        (outcome, f"{outcome_doc_base_url}{experiment.application}/{outcome}")
         for outcome in experiment.primary_outcomes
     ]
     secondary_outcome_links = [
-        (outcome, f"{doc_base_url}{experiment.application}/{outcome}")
+        (outcome, f"{outcome_doc_base_url}{experiment.application}/{outcome}")
         for outcome in experiment.secondary_outcomes
     ]
+
+    segment_doc_base_url = "https://mozilla.github.io/metric-hub/segments/"
+    segment_links = [
+        (
+            segment,
+            # ruff prefers this implicit syntax for concatenating strings
+            f"{segment_doc_base_url}"
+            f"{experiment.application.replace('-', '_')}/"
+            f"#{segment}",
+        )
+        for segment in experiment.segments
+    ]
     context = {
         "RISK_QUESTIONS": RISK_QUESTIONS,
         "primary_outcome_links": primary_outcome_links,
         "secondary_outcome_links": secondary_outcome_links,
+        "segment_links": segment_links,
     }
     return context