[IMP] runbot_merge: better styling for missing statuses on stagings

Before this, until the first status for a required context the status
would appear as pending, but would be have oddly (e.g. not clickable).

Update the style of such statuses for clarity:

- use a light background to show them as inactive
- use the `wait` cursor to show their status as oddball (and not clickable)

Setting this styling on the link (or even `li`) doesn't seem to work,
so set it on the `ul`, the actual active links will set the relevant
"active" cursor instead, which seems to work fine.

While at it, extract the status menu to its own template and unify the
disparate bits, mainly in that both the main dashboard and the
per-branch list display the staging instant in UTC on hover: before,
the main dashboard would display a relative delta and provide the
UTC-formatted instant on hover, but the branch would only show a zoned
ISO-8601 instant.

While adjusting is easy, it's unnecessary, we can easily provide the UTC
staging instant there).
This commit is contained in:
Xavier Morel 2022-06-28 09:52:24 +02:00
parent fb45f089b0
commit 0016404474
2 changed files with 45 additions and 63 deletions

View File

@ -84,3 +84,7 @@ dl.runbot-merge-fields {
@extend .col-sm-10;
}
}
.staging-statuses {
cursor: wait;
}

View File

@ -22,6 +22,41 @@
><t t-esc="pr.display_name"/></a>
</template>
<template id="staging-statuses" name="dropdown statuses list of stagings">
<div class="dropdown" t-if="staging.heads">
<button class="btn btn-link dropdown-toggle"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="true"
t-attf-title="Staged at {{staging.staged_at}}Z"
>
<t t-raw="0"/>
<span class="caret"></span>
</button>
<ul class="dropdown-menu staging-statuses">
<li groups="runbot_merge.group_admin">
<a t-attf-href="/web#id={{staging.id}}&amp;view_type=form&amp;model=runbot_merge.stagings"
target="new">
Open Staging
</a>
</li>
<t t-set="statuses" t-value="{(r, c): (s, t) for r, c, s, t in staging.statuses}"/>
<t t-foreach="repo_statuses._for_staging(staging)" t-as="req">
<t t-set="st" t-value="statuses.get((req.repo_id.name, req.context)) or (None, None)"/>
<li t-att-class="
'bg-success' if st[0] == 'success'
else 'bg-danger' if st[0] in ('error', 'failure')
else 'bg-info' if st[0]
else 'bg-light'"
><a t-att-href="st[1]" target="new">
<t t-esc="req.repo_id.name"/>: <t t-esc="req.context"/>
</a></li>
</t>
</ul>
</div>
</template>
<template id="dashboard" name="mergebot dashboard">
<t t-call="website.layout">
<div id="wrap"><div class="container-fluid">
@ -151,35 +186,8 @@
</t>
</li>
</ul>
<t t-if="staging.heads">
<div class="dropdown">
<button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"
t-attf-title="Staged at {{staging.staged_at}}Z">
Staged <span t-field="staging.staged_at" t-options="{'widget': 'relative'}"/>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li groups="runbot_merge.group_admin">
<a t-attf-href="/web#id={{staging.id}}&amp;view_type=form&amp;model=runbot_merge.stagings" target="new">
Open Staging
</a>
</li>
<t t-set="statuses" t-value="{(r, c): (s, t) for r, c, s, t in staging.statuses}"/>
<t t-foreach="repo_statuses._for_staging(staging)" t-as="req">
<t t-set="st" t-value="statuses.get((req.repo_id.name, req.context)) or ('pending', None)"/>
<li t-att-class="
'bg-success' if st[0] == 'success'
else 'bg-danger' if st[0] in ('error', 'failure')
else 'bg-info'"
>
<a t-att-href="st[1]" target="new">
<t t-esc="req.repo_id.name"/>: <t t-esc="req.context"/>
</a>
</li>
</t>
</ul>
</div>
<t t-call="runbot_merge.staging-statuses">
Staged <span t-field="staging.staged_at" t-options="{'widget': 'relative'}"/>
</t>
</li>
</t>
@ -226,40 +234,10 @@
<span t-field="staging.staged_at"
t-options="{'format': 'yyyy-MM-dd\'T\'HH:mm:ssZ'}"/>
</t>
<div class="dropdown" t-if="staging.heads">
<button class="btn btn-link dropdown-toggle"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="true">
<span t-field="staging.staged_at"
t-options="{'format': 'yyyy-MM-dd\'T\'HH:mm:ssZ'}"/>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li groups="runbot_merge.group_admin">
<a t-attf-href="/web#id={{staging.id}}&amp;view_type=form&amp;model=runbot_merge.stagings"
target="new">
Open Staging
</a>
</li>
<t t-set="statuses" t-value="{(r, c): (s, t) for r, c, s, t in staging.statuses}"/>
<t t-foreach="repo_statuses._for_staging(staging)" t-as="req">
<t t-set="st" t-value="statuses.get((req.repo_id.name, req.context)) or ('pending', None)"/>
<li t-att-class="
'bg-success' if st[0] == 'success'
else 'bg-danger' if st[0] in ('error', 'failure')
else 'bg-info'"
>
<a t-att-href="st[1]"
target="new">
<t t-esc="req.repo_id.name"/>:
<t t-esc="req.context"/>
</a>
</li>
</t>
</ul>
</div>
<t t-call="runbot_merge.staging-statuses">
<span t-field="staging.staged_at"
t-options="{'format': 'yyyy-MM-dd\'T\'HH:mm:ssZ'}"/>
</t>
</th>
<td>
<ul class="list-inline list-unstyled mb0">