feat(nimbus): add segments to new Nimbus UI summary page

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

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>

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,13 +943,24 @@ 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
         )
         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,

experimenter/experimenter/nimbus_ui_new/views.py

@@ -98,19 +98,31 @@ 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,
+            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