feat(nimbus): Add basic feature tracking table to feature health page. (#13749)

Because

- We plan to track feature changes on the features health page

This commit

- Adds the basic layout of the feature tracking table complete with new
Foxy!

Fixes #13715

Author: b4handjr

experimenter/experimenter/nimbus_ui/constants.py

@@ -147,6 +147,11 @@ class NimbusUIConstants:
         experiences, etc. associated with your selected feature.""",
     }
 
+    FEATURE_PAGE_TOOLTIPS = {
+        "feature_changes_tooltip": """This shows any changes made to the Nimbus feature
+        manifest such as code changes for the feature you have chosen."""
+    }
+
     class ReviewRequestMessages(Enum):
         END_EXPERIMENT = "end this experiment"
         END_ENROLLMENT = "end enrollment for this experiment"

experimenter/experimenter/nimbus_ui/templates/nimbus_experiments/features.html

@@ -331,7 +331,58 @@ <h5 class="fw-semibold">
             </div>
           </div>
         </div>
+        <hr>
+        <h5 class="fw-semibold">
+          <img src="{% static 'assets/feature-changes.svg' %}"
+               alt="Fox opening a box"
+               style="width: 60px;
+                      height: auto" />
+          Feature Changes
+          <i class="fa-regular fa-circle-question"
+             data-bs-toggle="tooltip"
+             data-bs-placement="top"
+             data-bs-title="{{ tooltips.feature_changes_tooltip }}"></i>
+          |
+          <span class="badge bg-secondary">Number of changes: {{ feature_changes.count|default:"0" }}</span>
+        </h5>
+        <div>
+          <div id="feature-changes-table">
+            <table class="table table-hover table-borderless align-middle mb-3">
+              <thead>
+                <tr>
+                  <th scope="col" class="fw-semibold text-body">
+                    <span>Feature Version</span>
+                  </th>
+                  <th scope="col" class="fw-semibold text-body">
+                    <span>Date / Time</span>
+                  </th>
+                  <th scope="col" class="fw-semibold text-body">
+                    <span>Change Size</span>
+                  </th>
+                  <th scope="col" class="fw-semibold text-body">
+                    <span>Change Diff</span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {% for change in feature_changes %}
+                  <tr scope="row">
+                    <td id="feature-version">{{ change.change_version|format_not_set }}</td>
+                    <td id="feature-change-date">{{ change.change_date|date:"m/d/Y @ H:i"|format_not_set }}</td>
+                    <td id="feature-change-size">{{ change.change_size|format_not_set }}</td>
+                    <td id="feature-change-complexity">{{ change.softvision_complexity|format_not_set }}</td>
+                  </tr>
+                {% empty %}
+                  <tr>
+                    <td colspan="11" class="text-center text-muted py-5">No Tracked Feature Changes</td>
+                  </tr>
+                </tr>
+              {% endfor %}
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   </div>
+</div>
 {% endblock %}

experimenter/experimenter/nimbus_ui/tests/test_views.py

@@ -3576,14 +3576,18 @@ def test_features_view_renders_table_with_correct_elements(
         )
 
         feature_id = self.feature_configs[feature_config].id
-        url = reverse("nimbus-ui-features")
         response = self.client.get(
-            f"{url}?application={application.value}&feature_configs={feature_id}"
+            reverse("nimbus-ui-features"),
+            {
+                "application": application.value,
+                "feature_configs": feature_id,
+            },
         )
 
         self.assertEqual(response.status_code, 200)
         self.assertContains(response, "deliveries-table")
         self.assertContains(response, "qa-info-table")
+        self.assertContains(response, "feature-changes-table")
         self.assertContains(response, experiment)
 
     def test_features_view_deliveries_table_can_sort_by_recipe_name(self):

experimenter/experimenter/nimbus_ui/views.py

@@ -764,6 +764,7 @@ def get_context_data(self, **kwargs):
         context = {
             "form": form,
             "links": NimbusUIConstants.FEATURE_PAGE_LINKS,
+            "tooltips": NimbusUIConstants.FEATURE_PAGE_TOOLTIPS,
             "application": self.request.GET.get("application"),
             "feature_configs": self.request.GET.get("feature_configs"),
             "paginator": deliveries_paginator,