Skip to content

Commit 7f6afa6

Browse files
moibra05moibra05
authored
feat(nimbus): rollouts risks form (#15559)
Because - The new design requires the risk section for the rollout creation form This commit - Adds the risks section of the rollout form - Improves the reusability of the rollout form components Fixes #15078
1 parent 0134d62 commit 7f6afa6

10 files changed

Lines changed: 425 additions & 276 deletions

File tree

‎experimenter/experimenter/nimbus_ui/templates/nimbus_experiments/new_rollout_detail.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@
1010
<div class="d-flex flex-column gap-2">
1111
<div class="small fw-medium mb-1 text-secondary">Define</div>
1212
{# EXP-6681: Rollout Overview Form/Card #}
13-
{% include "nimbus_experiments/overview/card.html" %}
13+
{% include "nimbus_experiments/rollout_cards/new_detail_card.html" with card_id="overview" title="Overview" subtitle="Name · Observations & Problem space · Important Links · Project Tags · Subscribers" show_edit_btn=True body_template="nimbus_experiments/overview/card.html" %}
1414

1515
{# TODO EXP-6682: Rollout Risks Form/Card #}
16-
{% include "nimbus_experiments/rollout_cards/new_detail_card.html" with card_id="risks" title="Risks" subtitle="Consider possible risks if the public interacts with your experiment" %}
16+
{% include "nimbus_experiments/rollout_cards/new_detail_card.html" with card_id="risks" title="Risks" subtitle="Consider possible risks if the public interacts with your experiment" show_edit_btn=True body_template="nimbus_experiments/risks/card.html" %}
1717

1818
</div>
1919
{# ── Configure ── #}

‎experimenter/experimenter/nimbus_ui/templates/nimbus_experiments/overview/_header.html‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎experimenter/experimenter/nimbus_ui/templates/nimbus_experiments/overview/card.html‎

Lines changed: 57 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,64 @@
1-
<div id="rollout-card-overview"
2-
class="rollout-card rounded-3 border bg-body">
3-
{# ── Card header ── #}
4-
{% include "nimbus_experiments/overview/_header.html" with collapse_target="overview-body" show_edit_btn=True %}
5-
6-
{# ── Collapsible body ── #}
7-
<div id="overview-body" class="collapse show">
8-
<div class="px-4 py-3 d-flex flex-column gap-3">
9-
{# Name #}
10-
<div>
11-
<div class="text-secondary mb-1" style="font-size: 12px;">Name</div>
12-
<div class="small text-body">{{ experiment.name|default:"—" }}</div>
13-
</div>
14-
{# Observations & Problem space #}
15-
<div>
16-
<div class="text-secondary mb-1" style="font-size: 12px;">Observations &amp; Problem space</div>
17-
<div class="small text-body" style="white-space: pre-wrap;">{{ experiment.hypothesis|default:"—" }}</div>
18-
</div>
19-
{# Important Links #}
20-
<div>
21-
<div class="text-secondary mb-1" style="font-size: 12px;">Important Links</div>
22-
{% if experiment.documentation_links.exists %}
23-
<div class="d-flex flex-column gap-1">
24-
{% for link in experiment.documentation_links.all %}
25-
<div class="small">
26-
<a href="{{ link.link }}"
27-
target="_blank"
28-
rel="noopener noreferrer"
29-
class="text-primary text-decoration-none">
30-
{{ link.get_title_display|default:link.link }}
31-
<i class="fa-solid fa-arrow-up-right-from-square fa-2xs ms-1"></i>
32-
</a>
33-
</div>
34-
{% endfor %}
1+
<div class="d-flex flex-column gap-3" id="rollout-overview-body">
2+
{# Name #}
3+
<div>
4+
<div class="text-secondary mb-1" style="font-size: 12px;">Name</div>
5+
<div class="small text-body">{{ experiment.name|default:"—" }}</div>
6+
</div>
7+
{# Observations & Problem space #}
8+
<div>
9+
<div class="text-secondary mb-1" style="font-size: 12px;">Observations &amp; Problem space</div>
10+
<div class="small text-body" style="white-space: pre-wrap;">{{ experiment.hypothesis|default:"—" }}</div>
11+
</div>
12+
{# Important Links #}
13+
<div>
14+
<div class="text-secondary mb-1" style="font-size: 12px;">Important Links</div>
15+
{% if experiment.documentation_links.exists %}
16+
<div class="d-flex flex-column gap-1">
17+
{% for link in experiment.documentation_links.all %}
18+
<div class="small">
19+
<a href="{{ link.link }}"
20+
target="_blank"
21+
rel="noopener noreferrer"
22+
class="text-primary text-decoration-none">
23+
{{ link.get_title_display|default:link.link }}
24+
<i class="fa-solid fa-arrow-up-right-from-square fa-2xs ms-1"></i>
25+
</a>
3526
</div>
36-
{% else %}
37-
<div class="small text-body">—</div>
38-
{% endif %}
27+
{% endfor %}
3928
</div>
40-
{# Project Tags #}
41-
<div>
42-
<div class="text-secondary mb-1" style="font-size: 12px;">Project Tags</div>
43-
{% if experiment.tags.exists %}
44-
<div class="d-flex flex-wrap gap-1">
45-
{% for tag in experiment.tags.all %}
46-
<span class="badge rounded-pill small fw-normal"
47-
style="background-color: {{ tag.color }};
48-
color: white">{{ tag.name }}</span>
49-
{% endfor %}
50-
</div>
51-
{% else %}
52-
<div class="small text-body">—</div>
53-
{% endif %}
29+
{% else %}
30+
<div class="small text-body">—</div>
31+
{% endif %}
32+
</div>
33+
{# Project Tags #}
34+
<div>
35+
<div class="text-secondary mb-1" style="font-size: 12px;">Project Tags</div>
36+
{% if experiment.tags.exists %}
37+
<div class="d-flex flex-wrap gap-1">
38+
{% for tag in experiment.tags.all %}
39+
<span class="badge rounded-pill small fw-normal"
40+
style="background-color: {{ tag.color }};
41+
color: white">{{ tag.name }}</span>
42+
{% endfor %}
5443
</div>
55-
{# Subscribers #}
56-
<div>
57-
<div class="text-secondary mb-1" style="font-size: 12px;">Subscribers</div>
58-
{% if experiment.subscribers.exists %}
59-
<div class="d-flex flex-wrap gap-1">
60-
{% for subscriber in experiment.subscribers.all %}
61-
<span class="badge rounded-pill fw-normal small text-body"
62-
style="background-color: var(--bs-secondary-bg);
63-
border: 1px solid var(--bs-border-color)">{{ subscriber.email }}</span>
64-
{% endfor %}
65-
</div>
66-
{% else %}
67-
<div class="small text-body">—</div>
68-
{% endif %}
44+
{% else %}
45+
<div class="small text-body">—</div>
46+
{% endif %}
47+
</div>
48+
{# Subscribers #}
49+
<div>
50+
<div class="text-secondary mb-1" style="font-size: 12px;">Subscribers</div>
51+
{% if experiment.subscribers.exists %}
52+
<div class="d-flex flex-wrap gap-1">
53+
{% for subscriber in experiment.subscribers.all %}
54+
<span class="badge rounded-pill fw-normal small text-body"
55+
style="background-color: var(--bs-secondary-bg);
56+
border: 1px solid var(--bs-border-color)">{{ subscriber.email }}</span>
57+
{% endfor %}
6958
</div>
70-
</div>
59+
{% else %}
60+
<div class="small text-body">—</div>
61+
{% endif %}
7162
</div>
7263
</div>
7364
{# ── Out-of-band: keep the page header name in sync after a save ── #}

0 commit comments

Comments
 (0)