From 3001e694395a11940a1b1eed5fa21cdd44cc2d7b Mon Sep 17 00:00:00 2001
From: Jared Lockhart <119884+jaredlockhart@users.noreply.github.com>
Date: Tue, 10 Dec 2024 11:58:59 -0500
Subject: [PATCH] feat(nimbus): add documentation links to new nimbus ui

Because

* We need to show the documentation links in the left sidebar
* We want to show the new header with the title and timeline on every page

This commit

* Adds documentation links to the sidebar
* Improves the styling of the sidebar
* Moves the t new header to the base template so it appears on all pages

fixes #11924
---
 .../nimbus_ui_new/static/css/style.scss       |   4 +
 .../templates/common/sidebar_link.html        |  13 +-
 .../templates/common/with_sidebar.html        |   2 +
 .../templates/nimbus_experiments/detail.html  | 674 +++++++++---------
 .../nimbus_experiments/edit_metrics.html      | 158 ++--
 .../nimbus_experiments/experiment_base.html   |  32 +-
 .../sidebar.html}                             |  23 +-
 7 files changed, 462 insertions(+), 444 deletions(-)
 rename experimenter/experimenter/nimbus_ui_new/templates/{common/experiment_sidebar.html => nimbus_experiments/sidebar.html} (59%)

diff --git a/experimenter/experimenter/nimbus_ui_new/static/css/style.scss b/experimenter/experimenter/nimbus_ui_new/static/css/style.scss
index f3b12c4776..a63a2e0656 100644
--- a/experimenter/experimenter/nimbus_ui_new/static/css/style.scss
+++ b/experimenter/experimenter/nimbus_ui_new/static/css/style.scss
@@ -118,3 +118,7 @@
     }
   }
 }
+
+.nav-link-hover:hover {
+  background-color: var(--bs-secondary-bg);
+}
diff --git a/experimenter/experimenter/nimbus_ui_new/templates/common/sidebar_link.html b/experimenter/experimenter/nimbus_ui_new/templates/common/sidebar_link.html
index eb5036d1f5..cd23b96bad 100644
--- a/experimenter/experimenter/nimbus_ui_new/templates/common/sidebar_link.html
+++ b/experimenter/experimenter/nimbus_ui_new/templates/common/sidebar_link.html
@@ -1,7 +1,6 @@
-<li class="nav-item fw-semibold">
-  <a href="{{ link }}"
-     class="nav-link {% if disabled %}disabled{% endif %}">
-    <i class="{{ icon }}"></i>
-    <span>{{ title }}</span>
-  </a>
-</li>
+<a {% if external %}target="_blank"{% endif %}
+   class="nav-link mb-2 {% if request.path == link %}active{% endif %} nav-link-hover {% if disabled %}disabled{% endif %}"
+   href="{{ link }}">
+  <i class="{{ icon }} pe-2"></i>
+  <span>{{ title }}</span>
+</a>
diff --git a/experimenter/experimenter/nimbus_ui_new/templates/common/with_sidebar.html b/experimenter/experimenter/nimbus_ui_new/templates/common/with_sidebar.html
index 931bb28424..f9342298d3 100644
--- a/experimenter/experimenter/nimbus_ui_new/templates/common/with_sidebar.html
+++ b/experimenter/experimenter/nimbus_ui_new/templates/common/with_sidebar.html
@@ -26,6 +26,8 @@ <h5 class="offcanvas-title" id="offcanvasSidebarLabel">Filter</h5>
         </div>
       </div>
       <div class="col-xl-10 col-xxl-10">
+        {% block main_content_header %}{% endblock %}
+
         {% block main_content %}
         {% endblock main_content %}
 
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 0132d3f0d2..3322518ca1 100644
--- a/experimenter/experimenter/nimbus_ui_new/templates/nimbus_experiments/detail.html
+++ b/experimenter/experimenter/nimbus_ui_new/templates/nimbus_experiments/detail.html
@@ -6,380 +6,358 @@
 {% block title %}{{ experiment.name }}{% endblock %}
 
 {% block main_content %}
-  <div class="container-fluid">
-    <!-- Experiment Details Card -->
-    <div class="row">
-      <div class="col-5">
-        <h4 class="mb-0">{{ experiment.name }}</h4>
-        <span class="{{ experiment.qa_status_badge_class }}">
-          QA Status: {{ experiment.qa_status|default:"Not Set"|title }}
-        </span>
-        <p class="text-secondary mb-0">{{ experiment.slug }}</p>
-        {% if experiment.parent %}
-          <p class="text-secondary small">
-            Cloned from
-            <a href="{% url 'nimbus-new-detail' experiment.parent.slug %}"
-               target="_blank"
-               rel="noopener noreferrer">{{ experiment.parent.name }}</a>
-          </p>
-        {% endif %}
+  <!-- Audience Overlap Warnings Card -->
+  {% if experiment.audience_overlap_warnings %}
+    {% for warning in experiment.audience_overlap_warnings %}
+      <div class="alert alert-{{ warning.variant|default:'warning' }}"
+           role="alert">
+        <p class="mb-1">{{ warning.text }}</p>
+        <ul class="mb-1">
+          {% for slug in warning.slugs %}<li>{{ slug }}</li>{% endfor %}
+        </ul>
+        <a href="{{ warning.learn_more_link }}"
+           target="_blank"
+           rel="noopener noreferrer"
+           class="btn btn-link p-0">Learn more</a>
       </div>
-      {% include "nimbus_experiments/timeline.html" %}
+    {% endfor %}
+  {% endif %}
+  <!-- Takeaways Card -->
+  {% include "nimbus_experiments/takeaways_card.html" %}
 
+  <!-- Overview Card -->
+  <div class="card mb-3">
+    <div class="card-header">
+      <h4>Overview</h4>
     </div>
-    <!-- Audience Overlap Warnings Card -->
-    {% if experiment.audience_overlap_warnings %}
-      {% for warning in experiment.audience_overlap_warnings %}
-        <div class="alert alert-{{ warning.variant|default:'warning' }}"
-             role="alert">
-          <p class="mb-1">{{ warning.text }}</p>
-          <ul class="mb-1">
-            {% for slug in warning.slugs %}<li>{{ slug }}</li>{% endfor %}
-          </ul>
-          <a href="{{ warning.learn_more_link }}"
+    <div class="card-body">
+      <table class="table table-striped">
+        <tbody>
+          <tr>
+            <th>Slug</th>
+            <td>{{ experiment.slug }}</td>
+            <th>Experiment owner</th>
+            <td>{{ experiment.owner }}</td>
+          </tr>
+          <tr>
+            <th>Application</th>
+            <td>{{ experiment.get_application_display }}</td>
+            <th>Public description</th>
+            <td>{{ experiment.public_description|format_not_set }}</td>
+          </tr>
+          <tr>
+            <th>Feature config</th>
+            <td>
+              {% for feature in experiment.feature_configs.all %}
+                {{ feature.name }} - {{ feature.description }}
+              {% empty %}
+                <span class="text-danger">Not set</span>
+              {% endfor %}
+            </td>
+            <th>Advanced targeting</th>
+            <td>{{ experiment.targeting_config.name }} - {{ experiment.targeting_config.description }}</td>
+          </tr>
+          <tr>
+            <th>Hypothesis</th>
+            <td colspan="3">{{ experiment.hypothesis }}</td>
+          </tr>
+          <tr>
+            <th>Primary Outcomes</th>
+            <td colspan="3">
+              {% for outcome, url in primary_outcome_links %}
+                <a href="{{ url }}" target="_blank" rel="noopener noreferrer">{{ outcome.title|remove_underscores }}</a>
+                {% if not forloop.last %},{% endif %}
+              {% empty %}
+                <span class="text-danger">Not set</span>
+              {% endfor %}
+            </td>
+          </tr>
+          <tr>
+            <th>Secondary Outcomes</th>
+            <td colspan="3">
+              {% for outcome, url in secondary_outcome_links %}
+                <a href="{{ url }}" target="_blank" rel="noopener noreferrer">{{ outcome.title|remove_underscores }}</a>
+                {% if not forloop.last %},{% endif %}
+              {% empty %}
+                <span class="text-danger">Not set</span>
+              {% 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 colspan="2">
+              {% for project in experiment.projects.all %}
+                <p>{{ project }}</p>
+              {% empty %}
+                <span class="text-danger">Not set</span>
+              {% endfor %}
+            </td>
+          </tr>
+          {% include 'nimbus_experiments/subscribers_list.html' %}
+
+        </tbody>
+      </table>
+    </div>
+  </div>
+  <!-- Risk Mitigation Questions Card -->
+  <div class="card mb-3">
+    <div class="card-header">
+      <h4>Risk Mitigation Questions</h4>
+    </div>
+    <div class="card-body">
+      <table class="table table-striped">
+        <tbody>
+          <tr>
+            <th colspan="3">{{ RISK_QUESTIONS.BRAND }}</th>
+            <td class="{% if experiment.risk_brand %}text-danger font-weight-bold{% endif %}">
+              {% if experiment.risk_brand != None %}
+                {{ experiment.risk_brand|yesno:"Yes,No" }}
+              {% else %}
+                Not Set
+              {% endif %}
+            </td>
+          </tr>
+          <tr>
+            <th colspan="3">
+              {{ RISK_QUESTIONS.MESSAGE }}
+              <a href="{{ risk_message_url }}"
+                 target="_blank"
+                 rel="noopener noreferrer">Message Consult</a>
+            </th>
+            <td class="{% if experiment.risk_message %}text-danger font-weight-bold{% endif %}">
+              {% if experiment.risk_message != None %}
+                {{ experiment.risk_message|yesno:"Yes,No" }}
+              {% else %}
+                Not Set
+              {% endif %}
+            </td>
+          </tr>
+          <tr>
+            <th colspan="3">{{ RISK_QUESTIONS.REVENUE }}</th>
+            <td class="{% if experiment.risk_revenue %}text-danger font-weight-bold{% endif %}">
+              {% if experiment.risk_revenue != None %}
+                {{ experiment.risk_revenue|yesno:"Yes,No" }}
+              {% else %}
+                Not Set
+              {% endif %}
+            </td>
+          </tr>
+          <tr>
+            <th colspan="3">{{ RISK_QUESTIONS.PARTNER }}</th>
+            <td class="{% if experiment.risk_partner_related %}text-danger font-weight-bold{% endif %}">
+              {% if experiment.risk_partner_related != None %}
+                {{ experiment.risk_partner_related|yesno:"Yes,No" }}
+              {% else %}
+                Not Set
+              {% endif %}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+  <!-- Audience Card -->
+  <div class="card mb-3">
+    <div class="card-header">
+      <div class="row">
+        <div class="col">
+          <h4>Audience</h4>
+        </div>
+        <div class="col pt-1 text-end">
+          <a href="{{ experiment.audience_url }}"
              target="_blank"
              rel="noopener noreferrer"
-             class="btn btn-link p-0">Learn more</a>
+             class="text-decoration-none">Explore matching audiences</a>
         </div>
-      {% endfor %}
-    {% endif %}
-    <!-- Takeaways Card -->
-    {% include "nimbus_experiments/takeaways_card.html" %}
-
-    <!-- Overview Card -->
-    <div class="card mb-3">
-      <div class="card-header">
-        <h4>Overview</h4>
-      </div>
-      <div class="card-body">
-        <table class="table table-striped">
-          <tbody>
-            <tr>
-              <th>Slug</th>
-              <td>{{ experiment.slug }}</td>
-              <th>Experiment owner</th>
-              <td>{{ experiment.owner }}</td>
-            </tr>
-            <tr>
-              <th>Application</th>
-              <td>{{ experiment.get_application_display }}</td>
-              <th>Public description</th>
-              <td>{{ experiment.public_description|format_not_set }}</td>
-            </tr>
-            <tr>
-              <th>Feature config</th>
-              <td>
-                {% for feature in experiment.feature_configs.all %}
-                  {{ feature.name }} - {{ feature.description }}
-                {% empty %}
-                  <span class="text-danger">Not set</span>
-                {% endfor %}
-              </td>
-              <th>Advanced targeting</th>
-              <td>{{ experiment.targeting_config.name }} - {{ experiment.targeting_config.description }}</td>
-            </tr>
-            <tr>
-              <th>Hypothesis</th>
-              <td colspan="3">{{ experiment.hypothesis }}</td>
-            </tr>
-            <tr>
-              <th>Primary Outcomes</th>
-              <td colspan="3">
-                {% for outcome, url in primary_outcome_links %}
-                  <a href="{{ url }}" target="_blank" rel="noopener noreferrer">{{ outcome.title|remove_underscores }}</a>
-                  {% if not forloop.last %},{% endif %}
-                {% empty %}
-                  <span class="text-danger">Not set</span>
-                {% endfor %}
-              </td>
-            </tr>
-            <tr>
-              <th>Secondary Outcomes</th>
-              <td colspan="3">
-                {% for outcome, url in secondary_outcome_links %}
-                  <a href="{{ url }}" target="_blank" rel="noopener noreferrer">{{ outcome.title|remove_underscores }}</a>
-                  {% if not forloop.last %},{% endif %}
-                {% empty %}
-                  <span class="text-danger">Not set</span>
-                {% 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 colspan="2">
-                {% for project in experiment.projects.all %}
-                  <p>{{ project }}</p>
-                {% empty %}
-                  <span class="text-danger">Not set</span>
-                {% endfor %}
-              </td>
-            </tr>
-            {% include 'nimbus_experiments/subscribers_list.html' %}
-
-          </tbody>
-        </table>
       </div>
     </div>
-    <!-- Risk Mitigation Questions Card -->
-    <div class="card mb-3">
-      <div class="card-header">
-        <h4>Risk Mitigation Questions</h4>
-      </div>
-      <div class="card-body">
-        <table class="table table-striped">
-          <tbody>
-            <tr>
-              <th colspan="3">{{ RISK_QUESTIONS.BRAND }}</th>
-              <td class="{% if experiment.risk_brand %}text-danger font-weight-bold{% endif %}">
-                {% if experiment.risk_brand != None %}
-                  {{ experiment.risk_brand|yesno:"Yes,No" }}
+    <div class="card-body">
+      <table class="table table-striped">
+        <tbody>
+          <tr>
+            <th>Channel</th>
+            <td>{{ experiment.channel.title|default:"No Channel" }}</td>
+            <th>Advanced Targeting</th>
+            <td>{{ experiment.targeting_config.name }}</td>
+          </tr>
+          <tr>
+            <th>Minimum version</th>
+            <td>{{ experiment.firefox_min_version|parse_version }}</td>
+            <th>Maximum version</th>
+            <td>{{ experiment.firefox_max_version|parse_version }}</td>
+          </tr>
+          <tr>
+            <th>Locales</th>
+            <td>
+              {{ experiment.locales.all|join:"<br>"|default:"All Locales" }}
+            </td>
+            <th>Countries</th>
+            <td>
+              {{ experiment.countries.all|join:"<br>"| default:"All Countries" }}
+            </td>
+          </tr>
+          <tr>
+            <th>Expected enrolled clients</th>
+            <td>{{ experiment.total_enrolled_clients }}</td>
+            <th>Population %</th>
+            <td>{{ experiment.population_percent|floatformat:"-1" }}%</td>
+          </tr>
+          <tr>
+            <th>Sticky enrollment</th>
+            <td colspan="3">{{ experiment.is_sticky }}</td>
+          </tr>
+          <tr>
+            <th>Required experiments</th>
+            <td>
+              {% with experiment.required_experiments_branches.all as required_branches %}
+                {% if required_branches %}
+                  {% for branch in required_branches %}
+                    <a href="{% url 'nimbus-new-detail' branch.child_experiment.slug %}"
+                       target="_blank"
+                       rel="noopener noreferrer">
+                      {{ branch.child_experiment.name }}
+                      ({{ branch.branch_slug|add:" branch"|default:"All branches" }})
+                    </a>
+                    <br>
+                  {% endfor %}
                 {% else %}
-                  Not Set
+                  None
                 {% endif %}
-              </td>
-            </tr>
-            <tr>
-              <th colspan="3">
-                {{ RISK_QUESTIONS.MESSAGE }}
-                <a href="{{ risk_message_url }}"
-                   target="_blank"
-                   rel="noopener noreferrer">Message Consult</a>
-              </th>
-              <td class="{% if experiment.risk_message %}text-danger font-weight-bold{% endif %}">
-                {% if experiment.risk_message != None %}
-                  {{ experiment.risk_message|yesno:"Yes,No" }}
-                {% else %}
-                  Not Set
-                {% endif %}
-              </td>
-            </tr>
-            <tr>
-              <th colspan="3">{{ RISK_QUESTIONS.REVENUE }}</th>
-              <td class="{% if experiment.risk_revenue %}text-danger font-weight-bold{% endif %}">
-                {% if experiment.risk_revenue != None %}
-                  {{ experiment.risk_revenue|yesno:"Yes,No" }}
-                {% else %}
-                  Not Set
-                {% endif %}
-              </td>
-            </tr>
-            <tr>
-              <th colspan="3">{{ RISK_QUESTIONS.PARTNER }}</th>
-              <td class="{% if experiment.risk_partner_related %}text-danger font-weight-bold{% endif %}">
-                {% if experiment.risk_partner_related != None %}
-                  {{ experiment.risk_partner_related|yesno:"Yes,No" }}
+              {% endwith %}
+            </td>
+            <th>Excluded experiments</th>
+            <td>
+              {% with experiment.excluded_experiments_branches.all as excluded_branches %}
+                {% if excluded_branches %}
+                  {% for branch in excluded_branches %}
+                    <a href="{% url 'nimbus-new-detail' branch.child_experiment.slug %}"
+                       target="_blank"
+                       rel="noopener noreferrer">
+                      {{ branch.child_experiment.name }}
+                      ({{ branch.branch_slug|add:" branch"|default:"All branches" }})
+                    </a>
+                    <br>
+                  {% endfor %}
                 {% else %}
-                  Not Set
+                  None
                 {% endif %}
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
+              {% endwith %}
+            </td>
+          </tr>
+          <tr>
+            <th>Full targeting expression</th>
+            <td colspan="3">{{ experiment.targeting }}</td>
+          </tr>
+          <tr>
+            <th>Recipe JSON</th>
+            <td colspan="3">
+              <div class="collapse" id="collapseRecipe">
+                <code>
+                  <pre class="text-monospace" style="white-space: pre-wrap; word-wrap: break-word;">
+                      {{ experiment.recipe_json|linebreaks|linebreaksbr }}
+                    </pre>
+                </code>
+              </div>
+              <button class="btn btn-outline-primary btn-sm"
+                      type="button"
+                      data-bs-toggle="collapse"
+                      data-bs-target="#collapseRecipe"
+                      aria-expanded="false"
+                      aria-controls="collapseRecipe">
+                <i class="fa-solid fa-plus"></i> Show/Hide Recipe
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
-    <!-- Audience Card -->
-    <div class="card mb-3">
-      <div class="card-header">
-        <div class="row">
-          <div class="col">
-            <h4>Audience</h4>
-          </div>
-          <div class="col pt-1 text-end">
-            <a href="{{ experiment.audience_url }}"
-               target="_blank"
-               rel="noopener noreferrer"
-               class="text-decoration-none">Explore matching audiences</a>
+  </div>
+  <!-- Actions Recommended Before Launch Card -->
+  {% include "nimbus_experiments/signoff_card.html" with edit=False experiment=experiment %}
+
+  <!-- Branches Card -->
+  <div class="card mb-3">
+    <div class="card-header">
+      <h4>Branches ({{ experiment.branches.all.count }})</h4>
+    </div>
+    {% for branch in experiment.branches.all %}
+      <div class="card-body">
+        <div class="row mb-2">
+          <div class="col-md-8">
+            <h6>
+              <a href="#{{ branch.slug }}">#</a> {{ branch.name|title }}
+            </h6>
           </div>
+          {% if not experiment.is_rollout %}
+            <div class="col-md-4 text-right">
+              <button class="btn btn-outline-primary btn-sm">Promote to Rollout</button>
+            </div>
+          {% endif %}
         </div>
-      </div>
-      <div class="card-body">
         <table class="table table-striped">
           <tbody>
             <tr>
-              <th>Channel</th>
-              <td>{{ experiment.channel.title|default:"No Channel" }}</td>
-              <th>Advanced Targeting</th>
-              <td>{{ experiment.targeting_config.name }}</td>
-            </tr>
-            <tr>
-              <th>Minimum version</th>
-              <td>{{ experiment.firefox_min_version|parse_version }}</td>
-              <th>Maximum version</th>
-              <td>{{ experiment.firefox_max_version|parse_version }}</td>
-            </tr>
-            <tr>
-              <th>Locales</th>
-              <td>
-                {{ experiment.locales.all|join:"<br>"|default:"All Locales" }}
-              </td>
-              <th>Countries</th>
-              <td>
-                {{ experiment.countries.all|join:"<br>"| default:"All Countries" }}
-              </td>
-            </tr>
-            <tr>
-              <th>Expected enrolled clients</th>
-              <td>{{ experiment.total_enrolled_clients }}</td>
-              <th>Population %</th>
-              <td>{{ experiment.population_percent|floatformat:"-1" }}%</td>
-            </tr>
-            <tr>
-              <th>Sticky enrollment</th>
-              <td colspan="3">{{ experiment.is_sticky }}</td>
-            </tr>
-            <tr>
-              <th>Required experiments</th>
-              <td>
-                {% with experiment.required_experiments_branches.all as required_branches %}
-                  {% if required_branches %}
-                    {% for branch in required_branches %}
-                      <a href="{% url 'nimbus-new-detail' branch.child_experiment.slug %}"
-                         target="_blank"
-                         rel="noopener noreferrer">
-                        {{ branch.child_experiment.name }}
-                        ({{ branch.branch_slug|add:" branch"|default:"All branches" }})
-                      </a>
-                      <br>
-                    {% endfor %}
-                  {% else %}
-                    None
-                  {% endif %}
-                {% endwith %}
-              </td>
-              <th>Excluded experiments</th>
-              <td>
-                {% with experiment.excluded_experiments_branches.all as excluded_branches %}
-                  {% if excluded_branches %}
-                    {% for branch in excluded_branches %}
-                      <a href="{% url 'nimbus-new-detail' branch.child_experiment.slug %}"
-                         target="_blank"
-                         rel="noopener noreferrer">
-                        {{ branch.child_experiment.name }}
-                        ({{ branch.branch_slug|add:" branch"|default:"All branches" }})
-                      </a>
-                      <br>
-                    {% endfor %}
-                  {% else %}
-                    None
-                  {% endif %}
-                {% endwith %}
-              </td>
-            </tr>
-            <tr>
-              <th>Full targeting expression</th>
-              <td colspan="3">{{ experiment.targeting }}</td>
+              <th>Slug</th>
+              <td>{{ branch.slug|format_not_set }}</td>
+              <th>Ratio</th>
+              <td>{{ branch.ratio|format_not_set }}</td>
             </tr>
             <tr>
-              <th>Recipe JSON</th>
-              <td colspan="3">
-                <div class="collapse" id="collapseRecipe">
-                  <code>
-                    <pre class="text-monospace" style="white-space: pre-wrap; word-wrap: break-word;">
-                      {{ experiment.recipe_json|linebreaks|linebreaksbr }}
-                    </pre>
-                  </code>
-                </div>
-                <button class="btn btn-outline-primary btn-sm"
-                        type="button"
-                        data-bs-toggle="collapse"
-                        data-bs-target="#collapseRecipe"
-                        aria-expanded="false"
-                        aria-controls="collapseRecipe">
-                  <i class="fa-solid fa-plus"></i> Show/Hide Recipe
-                </button>
-              </td>
+              <th>Description</th>
+              <td colspan="3">{{ branch.description|format_not_set }}</td>
             </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-    <!-- Actions Recommended Before Launch Card -->
-    {% include "nimbus_experiments/signoff_card.html" with edit=False experiment=experiment %}
-
-    <!-- Branches Card -->
-    <div class="card mb-3">
-      <div class="card-header">
-        <h4>Branches ({{ experiment.branches.all.count }})</h4>
-      </div>
-      {% for branch in experiment.branches.all %}
-        <div class="card-body">
-          <div class="row mb-2">
-            <div class="col-md-8">
-              <h6>
-                <a href="#{{ branch.slug }}">#</a> {{ branch.name|title }}
-              </h6>
-            </div>
-            {% if not experiment.is_rollout %}
-              <div class="col-md-4 text-right">
-                <button class="btn btn-outline-primary btn-sm">Promote to Rollout</button>
-              </div>
-            {% endif %}
-          </div>
-          <table class="table table-striped">
-            <tbody>
-              <tr>
-                <th>Slug</th>
-                <td>{{ branch.slug|format_not_set }}</td>
-                <th>Ratio</th>
-                <td>{{ branch.ratio|format_not_set }}</td>
-              </tr>
-              <tr>
-                <th>Description</th>
-                <td colspan="3">{{ branch.description|format_not_set }}</td>
-              </tr>
-              {% if branch.feature_values.all %}
-                {% for feature_value in branch.feature_values.all %}
-                  <tr>
-                    <th>{{ feature_value.feature_config.name|format_not_set }} Value</th>
-                    <td colspan="3">
-                      <code>{{ feature_value.value|format_not_set|format_json }}</code>
-                    </td>
-                  </tr>
-                {% endfor %}
-              {% else %}
-                <tr>
-                  <td colspan="4">No Feature Values</td>
-                </tr>
-              {% endif %}
-              {% if branch.screenshots.all.exists %}
+            {% if branch.feature_values.all %}
+              {% for feature_value in branch.feature_values.all %}
                 <tr>
-                  <th>Screenshots</th>
+                  <th>{{ feature_value.feature_config.name|format_not_set }} Value</th>
                   <td colspan="3">
-                    {% for screenshot in branch.screenshots.all %}
-                      <figure class="d-block">
-                        <figcaption>{{ screenshot.description }}</figcaption>
-                        {% if screenshot.image %}
-                          <img src="{{ screenshot.image.url }}"
-                               alt="{{ screenshot.description|default:'' }}"
-                               class="img-fluid">
-                        {% else %}
-                          Not Set
-                        {% endif %}
-                      </figure>
-                    {% endfor %}
+                    <code>{{ feature_value.value|format_not_set|format_json }}</code>
                   </td>
                 </tr>
-              {% endif %}
-            </tbody>
-          </table>
-        </div>
-      {% endfor %}
-    </div>
-    <!-- QA Card -->
-    {% include "nimbus_experiments/qa_card.html" %}
-
+              {% endfor %}
+            {% else %}
+              <tr>
+                <td colspan="4">No Feature Values</td>
+              </tr>
+            {% endif %}
+            {% if branch.screenshots.all.exists %}
+              <tr>
+                <th>Screenshots</th>
+                <td colspan="3">
+                  {% for screenshot in branch.screenshots.all %}
+                    <figure class="d-block">
+                      <figcaption>{{ screenshot.description }}</figcaption>
+                      {% if screenshot.image %}
+                        <img src="{{ screenshot.image.url }}"
+                             alt="{{ screenshot.description|default:'' }}"
+                             class="img-fluid">
+                      {% else %}
+                        Not Set
+                      {% endif %}
+                    </figure>
+                  {% endfor %}
+                </td>
+              </tr>
+            {% endif %}
+          </tbody>
+        </table>
+      </div>
+    {% endfor %}
   </div>
+  <!-- QA Card -->
+  {% include "nimbus_experiments/qa_card.html" %}
+
 {% endblock %}
 
 {% block extrascripts %}
diff --git a/experimenter/experimenter/nimbus_ui_new/templates/nimbus_experiments/edit_metrics.html b/experimenter/experimenter/nimbus_ui_new/templates/nimbus_experiments/edit_metrics.html
index 2860769921..29ce99cbc9 100644
--- a/experimenter/experimenter/nimbus_ui_new/templates/nimbus_experiments/edit_metrics.html
+++ b/experimenter/experimenter/nimbus_ui_new/templates/nimbus_experiments/edit_metrics.html
@@ -6,93 +6,91 @@
 {% block title %}{{ experiment.name }} - Metrics{% endblock %}
 
 {% block main_content %}
-  <div class="container-fluid">
-    <!-- Experiment Details Card -->
-    <form id="metrics-form"
-          hx-post="{% url 'nimbus-new-update-metrics' experiment.slug %}"
-          hx-select="#metrics-form"
-          hx-target="#metrics-form"
-          hx-swap="outerHTML">
-      {% csrf_token %}
-      {{ form.errors }}
-      <div class="card mb-3">
-        <div class="card-header">
-          <h4>Metrics</h4>
-        </div>
-        <div class="card-body">
-          <div class="row">
-            <div class="col">
-              <p>
-                Every experiment analysis automatically includes how your experiment has impacted Retention, Search Count, and Ad Click metrics. Get more information on <a href="https://experimenter.info/deep-dives/jetstream/metrics/">Core Firefox Metrics</a>.
-              </p>
-            </div>
+  <!-- Experiment Details Card -->
+  <form id="metrics-form"
+        hx-post="{% url 'nimbus-new-update-metrics' experiment.slug %}"
+        hx-select="#metrics-form"
+        hx-target="#metrics-form"
+        hx-swap="outerHTML">
+    {% csrf_token %}
+    {{ form.errors }}
+    <div class="card mb-3">
+      <div class="card-header">
+        <h4>Metrics</h4>
+      </div>
+      <div class="card-body">
+        <div class="row">
+          <div class="col">
+            <p>
+              Every experiment analysis automatically includes how your experiment has impacted Retention, Search Count, and Ad Click metrics. Get more information on <a href="https://experimenter.info/deep-dives/jetstream/metrics/">Core Firefox Metrics</a>.
+            </p>
           </div>
-          <div class="row">
-            <div class="col">
-              <label for="primary_outcomes" class="form-label">
-                Primary Outcomes
-                <i class="fa-regular fa-circle-question"
-                   data-bs-toggle="tooltip"
-                   data-bs-placement="top"
-                   data-bs-title="Specific metrics you’d like to impact in your experiment, which will be part of the analysis."></i>
-                {% if form.is_bound %}<i class="fa-solid fa-check text-success"></i>{% endif %}
-              </label>
-              <div class="rounded border border-1 p-0 {% if form.is_bound %}border-success{% endif %}">
-                {{ form.primary_outcomes }}
-              </div>
-              <p class="form-text">
-                Select the user action or feature that you are measuring with this experiment. You may select up to 2 primary outcomes.
-              </p>
+        </div>
+        <div class="row">
+          <div class="col">
+            <label for="primary_outcomes" class="form-label">
+              Primary Outcomes
+              <i class="fa-regular fa-circle-question"
+                 data-bs-toggle="tooltip"
+                 data-bs-placement="top"
+                 data-bs-title="Specific metrics you’d like to impact in your experiment, which will be part of the analysis."></i>
+              {% if form.is_bound %}<i class="fa-solid fa-check text-success"></i>{% endif %}
+            </label>
+            <div class="rounded border border-1 p-0 {% if form.is_bound %}border-success{% endif %}">
+              {{ form.primary_outcomes }}
             </div>
+            <p class="form-text">
+              Select the user action or feature that you are measuring with this experiment. You may select up to 2 primary outcomes.
+            </p>
           </div>
-          <div class="row">
-            <div class="col">
-              <label for="secondary_outcomes" class="form-label">
-                Secondary Outcomes
-                <i class="fa-regular fa-circle-question"
-                   data-bs-toggle="tooltip"
-                   data-bs-placement="top"
-                   data-bs-title="Specific metrics that you are interested in observing in your experiment but they don't affect the results of your experiment."></i>
-                {% if form.is_bound %}<i class="fa-solid fa-check text-success"></i>{% endif %}
-              </label>
-              <div class="rounded border border-1 p-0 {% if form.is_bound %}border-success{% endif %}">
-                {{ form.secondary_outcomes }}
-              </div>
-              <p class="form-text">Select the user action or feature that you are measuring with this experiment.</p>
+        </div>
+        <div class="row">
+          <div class="col">
+            <label for="secondary_outcomes" class="form-label">
+              Secondary Outcomes
+              <i class="fa-regular fa-circle-question"
+                 data-bs-toggle="tooltip"
+                 data-bs-placement="top"
+                 data-bs-title="Specific metrics that you are interested in observing in your experiment but they don't affect the results of your experiment."></i>
+              {% if form.is_bound %}<i class="fa-solid fa-check text-success"></i>{% endif %}
+            </label>
+            <div class="rounded border border-1 p-0 {% if form.is_bound %}border-success{% endif %}">
+              {{ form.secondary_outcomes }}
             </div>
+            <p class="form-text">Select the user action or feature that you are measuring with this experiment.</p>
           </div>
-          <hr>
-          <div class="row">
-            <div class="col">
-              <label for="segments" class="form-label">
-                Segments
-                <i class="fa-regular fa-circle-question"
-                   data-bs-toggle="tooltip"
-                   data-bs-placement="top"
-                   data-bs-title="Select user segments if you want to view your results sliced by specific sub-groups of users."></i>
-                {% if form.is_bound %}<i class="fa-solid fa-check text-success"></i>{% endif %}
-              </label>
-              <div class="rounded border border-1 p-0 {% if form.is_bound %}border-success{% endif %}">{{ form.segments }}</div>
-              <p class="form-text">Select the user segments you wish to analyze.</p>
-            </div>
+        </div>
+        <hr>
+        <div class="row">
+          <div class="col">
+            <label for="segments" class="form-label">
+              Segments
+              <i class="fa-regular fa-circle-question"
+                 data-bs-toggle="tooltip"
+                 data-bs-placement="top"
+                 data-bs-title="Select user segments if you want to view your results sliced by specific sub-groups of users."></i>
+              {% if form.is_bound %}<i class="fa-solid fa-check text-success"></i>{% endif %}
+            </label>
+            <div class="rounded border border-1 p-0 {% if form.is_bound %}border-success{% endif %}">{{ form.segments }}</div>
+            <p class="form-text">Select the user segments you wish to analyze.</p>
           </div>
         </div>
       </div>
-      <div class="d-flex justify-content-end">
-        <button class="btn btn-primary">Save</button>
-        <button class="btn btn-secondary ms-2">Save and Continue</button>
-      </div>
-      {% if form.is_bound %}
-        <div class="toast text-bg-success position-absolute top-0 end-0 m-3 w-auto"
-             role="alert"
-             aria-live="assertive"
-             aria-atomic="true">
-          <div class="toast-body">
-            <i class="fa-regular fa-circle-check"></i>
-            Metrics saved!
-          </div>
+    </div>
+    <div class="d-flex justify-content-end">
+      <button class="btn btn-primary">Save</button>
+      <button class="btn btn-secondary ms-2">Save and Continue</button>
+    </div>
+    {% if form.is_bound %}
+      <div class="toast text-bg-success position-absolute top-0 end-0 m-3 w-auto"
+           role="alert"
+           aria-live="assertive"
+           aria-atomic="true">
+        <div class="toast-body">
+          <i class="fa-regular fa-circle-check"></i>
+          Metrics saved!
         </div>
-      {% endif %}
-    </form>
-  </div>
+      </div>
+    {% endif %}
+  </form>
 {% endblock main_content %}
diff --git a/experimenter/experimenter/nimbus_ui_new/templates/nimbus_experiments/experiment_base.html b/experimenter/experimenter/nimbus_ui_new/templates/nimbus_experiments/experiment_base.html
index 5a5bcd568f..7db9910ce1 100644
--- a/experimenter/experimenter/nimbus_ui_new/templates/nimbus_experiments/experiment_base.html
+++ b/experimenter/experimenter/nimbus_ui_new/templates/nimbus_experiments/experiment_base.html
@@ -1,6 +1,36 @@
 {% extends "common/with_sidebar.html" %}
 
 {% block sidebar %}
-  {% include "common/experiment_sidebar.html" with experiment=experiment %}
+  {% include "nimbus_experiments/sidebar.html" with experiment=experiment %}
 
 {% endblock %}
+
+{% block main_content_header %}
+  <div class="row">
+    <div class="col-6">
+      <h4 class="mb-0">{{ experiment.name }}</h4>
+      <span class="{{ experiment.qa_status_badge_class }}">
+        QA Status: {{ experiment.qa_status|default:"Not Set"|title }}
+      </span>
+      <p class="text-secondary mb-0">{{ experiment.slug }}</p>
+      {% if experiment.parent %}
+        <p class="text-secondary small">
+          Cloned from
+          <a href="{% url 'nimbus-new-detail' experiment.parent.slug %}"
+             target="_blank"
+             rel="noopener noreferrer">{{ experiment.parent.name }}</a>
+        </p>
+      {% endif %}
+    </div>
+    <div class="col-6">
+      <ul class="list-group list-group-horizontal justify-content-between mb-3">
+        {% for status in experiment.timeline %}
+          <li class="list-group-item flex-fill text-center d-flex flex-column justify-content-center {% if status.is_active %}bg-primary text-white{% endif %}">
+            <strong>{{ status.label }}</strong>
+            <small>{{ status.date|default:'---' }}</small>
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  </div>
+{% endblock %}
diff --git a/experimenter/experimenter/nimbus_ui_new/templates/common/experiment_sidebar.html b/experimenter/experimenter/nimbus_ui_new/templates/nimbus_experiments/sidebar.html
similarity index 59%
rename from experimenter/experimenter/nimbus_ui_new/templates/common/experiment_sidebar.html
rename to experimenter/experimenter/nimbus_ui_new/templates/nimbus_experiments/sidebar.html
index bd95dbbf64..e3c9b9bd1a 100644
--- a/experimenter/experimenter/nimbus_ui_new/templates/common/experiment_sidebar.html
+++ b/experimenter/experimenter/nimbus_ui_new/templates/nimbus_experiments/sidebar.html
@@ -1,19 +1,26 @@
-<ul class="nav nav-pills flex-column ps-4">
+<div class="nav flex-column nav-pills fw-medium w-100">
   {% include "common/sidebar_link.html" with title="Summary" link=experiment.get_detail_url icon="fa-regular fa-paper-plane" %}
   {% include "common/sidebar_link.html" with title="History" link=experiment.get_history_url icon="fa-solid fa-network-wired" active=True %}
+  {% include "common/sidebar_link.html" with title="Results" link="" icon="fa-solid fa-chart-column" disabled=True %}
 
-  <li class="border-bottom my-2 ms-3">
-    <span class="small text-muted">Edit</span>
-  </li>
+  <strong class="ms-3">Edit</strong>
+  <hr class="my-0 mb-2">
   {% include "common/sidebar_link.html" with title="Overview" link="" icon="fa-regular fa-solid fa-gear" disabled=True %}
   {% include "common/sidebar_link.html" with title="Branches" link="" icon="fa-solid fa-layer-group" disabled=True %}
   {% include "common/sidebar_link.html" with title="Metrics" link=experiment.get_update_metrics_url icon="fa-solid fa-arrow-trend-up" %}
   {% include "common/sidebar_link.html" with title="Audience" link="" icon="fa-solid fa-user-group" disabled=True %}
 
-  <li class="border-bottom my-2 ms-3">
-    <span class="small text-muted">Actions</span>
-  </li>
+  <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" disabled=True %}
   {% include "common/sidebar_link.html" with title="Archive" link="" icon="fa-regular fa-trash-can" disabled=True %}
 
-</ul>
+  <strong class="ms-3">Links</strong>
+  <hr class="my-0 mb-2">
+  {% for documentation_link in experiment.documentation_links.all %}
+    {% if documentation_link.link %}
+      {% include "common/sidebar_link.html" with title=documentation_link.title link=documentation_link.link icon="fa-solid fa-arrow-up-right-from-square" external=True %}
+
+    {% endif %}
+  {% endfor %}
+</div>