general: redo connector page with tabs (#63632)

This commit is contained in:
Frédéric Péters 2022-04-06 15:21:19 +02:00
parent c691b1bfee
commit c0723fb929
7 changed files with 94 additions and 52 deletions

View File

@ -11,10 +11,12 @@
{{ block.super }}
{% endblock %}
{% block extra-tab-buttons %}
<button role="tab" aria-selected="false" aria-controls="panel-mappings" id="tab-mappings" tabindex="-1">{% trans "Mappings" %}</button>
{% endblock %}
{% block extra-sections %}
<div id="mappings" class="section">
<h3>{% trans "Mappings" %} <a class="button" href="{% url "sp-fr-mapping-new" slug=object.slug %}">{% trans "Add" %}</a></h3>
{% block extra-tab-panels %}
<div id="panel-mappings" role="tabpanel" tabindex="-1" aria-labelledby="tab-mappings" hidden>
<ul>
{% for mapping in object.mappings.all %}
@ -35,5 +37,6 @@
</li>
{% endfor %}
</ul>
<p><a class="button" href="{% url "sp-fr-mapping-new" slug=object.slug %}">{% trans "Add" %}</a></p>
</div>
{% endblock %}

View File

@ -1,11 +1,14 @@
{% extends "passerelle/manage/service_view.html" %}
{% load i18n passerelle %}
{% block extra-tab-buttons %}
<button role="tab" aria-selected="false" aria-controls="panel-details" id="tab-details" tabindex="-1">{% trans "Details" %}</button>
{% endblock %}
{% block extra-sections %}
<div class="section">
<h3>{% trans "Details" %}</h3>
<div id="panel-details" role="tabpanel" tabindex="-1" aria-labelledby="tab-details" hidden>
<ul>
<li><a href="{% url "toulouse-smart-type-intervention" slug=object.slug %}">{% trans "Intervention types" %}</a></li>
</ul>
</div>
</div>
{% endblock %}

View File

@ -22,34 +22,44 @@ span.availability-status-message {
color: #666;
}
div#queries ul {
#panel-endpoints {
.pk-information.documentation {
margin-top: 0;
}
}
div#panel-queries ul {
padding-left: 0;
}
div#logs table th,
div#logs table td.timestamp {
white-space: nowrap;
div#logs, div#panel-logs {
table th,
table td.timestamp {
white-space: nowrap;
}
table td.message {
text-align: left;
}
table tr.level-debug {
color: #666;
}
}
div#logs table td.message {
text-align: left;
}
div#logs, div#panel-logs, div#jobs, div#panel-jobs {
table tr.error,
table tr.level-warning,
table tr.level-error,
table tr.level-critical {
color: #c33;
}
div#logs table tr.level-debug {
color: #666;
}
div#jobs table tr.error,
div#logs table tr.level-warning,
div#logs table tr.level-error,
div#logs table tr.level-critical {
color: #c33;
}
div#jobs table tr.error,
div#logs table tr.level-error,
div#logs table tr.level-critical {
font-weight: bold;
table tr.error,
table tr.level-error,
table tr.level-critical {
font-weight: bold;
}
}
select#id_msg_class { max-width: 30em; }
@ -251,7 +261,8 @@ ul.get-params li {
margin: 0;
}
div.section > div > ul.endpoints {
.endpoints {
margin: 0;
padding: 0;
}
@ -260,7 +271,7 @@ div.section > div > ul.endpoints {
}
.endpoints > li {
margin: 0.75em 0;
margin: 0 0 0.75em 0;
position: relative;
min-height: 2em;
}
@ -363,3 +374,12 @@ div.section > div > ul.endpoints {
margin-left: 50px;
margin-top: 0;
}
.connector-tabs {
margin-top: 1em;
[role=tabpanel] {
background: white;
padding: 1em;
min-height: 200px;
}
}

View File

@ -59,12 +59,29 @@
</div>
{% endif %}
<div id="endpoints" class="section">
<h3>{% trans 'Endpoints' %}
{% if object.documentation_url %}
<a class="button" href="{{ object.documentation_url }}">{% trans "Documentation" %}</a>
<div class="pk-tabs connector-tabs">
<div class="pk-tabs--tab-list" role="tablist">
<button role="tab" aria-selected="true" aria-controls="panel-endpoints" id="tab-endpoints" tabindex="0">{% trans "Endpoints" %}</button>
{% if object|can_edit:request.user and object.queries is not None %}
<button role="tab" aria-selected="false" aria-controls="panel-queries" id="tab-queries" tabindex="-1">{% trans "Queries" %}</button>
{% endif %}
{% if request.user.is_authenticated %}{% block extra-tab-buttons %}{% endblock %}{% endif %}
{% if perms.base.see_accessright %}
<button role="tab" aria-selected="false" aria-controls="panel-security" id="tab-security" tabindex="-1">{% trans "Security" %}</button>
{% endif %}
{% if perms.base.see_resourcelog %}
<button role="tab" aria-selected="false" aria-controls="panel-logs" id="tab-logs" tabindex="-1">{% trans "Logs" %}</button>
{% endif %}
{% if perms.base.view_job and object.jobs_set.all %}
<button role="tab" aria-selected="false" aria-controls="panel-jobs" id="tab-jobs" tabindex="-1">{% trans "Jobs" %}</button>
{% endif %}
</div>
<div class="pk-tabs--container">
<div id="panel-endpoints" role="tabpanel" tabindex="0" aria-labelledby="tab-endpoints">
{% if object.documentation_url %}
<div class="pk-information documentation"><a href="{{ object.documentation_url }}">{% trans "Documentation" %}</a></div>
{% endif %}
</h3>
<div>
{% if object.api_description %}<p>{{object.api_description|safe}}</p>{% endif %}
{% block endpoints %}
@ -85,8 +102,7 @@
{% block custom-queries %}
{% if object|can_edit:request.user and object.queries is not None %}
<div id="queries" class="section">
<h3>{% trans 'Queries' %}</h3>
<div id="panel-queries" role="tabpanel" tabindex="-1" aria-labelledby="tab-queries" hidden>
<div>
{% if object.queries.exists %}
<ul class="objects-list single-links">
@ -113,9 +129,8 @@
{% block extra-sections %}
{% endblock %}
<div id="security" class="section">
{% if perms.base.see_accessright %}
<h3>{% trans "Security" %}</h3>
<div id="panel-security" role="tabpanel" tabindex="-1" aria-labelledby="tab-security" hidden>
<div>
{% block security %}
{% for permission in object.get_connector_permissions %}
@ -126,35 +141,36 @@
{% endfor %}
{% endblock %}
</div>
{% endif %}
</div>
{% endif %}
{% if perms.base.see_resourcelog %}
<div id="logs" class="section">
<h3>{% trans "Logs" %}
<a class="button" href="{% url 'view-logs-connector' connector=object.get_connector_slug slug=object.slug %}">{% trans "Full page & filter" %}</a>
</h3>
<div id="panel-logs" role="tabpanel" tabindex="-1" aria-labelledby="tab-logs" hidden>
<div>
{% block logs %}
{% resource_logs_table resource=object %}
{% endblock %}
<p><a class="button" href="{% url 'view-logs-connector' connector=object.get_connector_slug slug=object.slug %}">{% trans "Full page & filter" %}</a></p>
</div>
</div>
{% endif %}
{% if perms.base.view_job and object.jobs_set.all %}
<div id="jobs" class="section">
<h3>{% trans "Jobs" %}
<a class="button" href="{% url 'view-jobs-connector' connector=object.get_connector_slug slug=object.slug %}">{% trans "Full page & filter" %}</a>
</h3>
<div id="panel-jobs" role="tabpanel" tabindex="-1" aria-labelledby="tab-jobs" hidden>
<div>
{% block jobs %}
{% resource_jobs_table resource=object %}
{% endblock %}
</div>
<p><a class="button" href="{% url 'view-jobs-connector' connector=object.get_connector_slug slug=object.slug %}">{% trans "Full page & filter" %}</a></p>
</div>
{% endif %}
{% block extra-tab-panels %}
{% endblock %}
{% endif %}
</div>
</div>
{% endblock %}

View File

@ -641,7 +641,7 @@ def test_manager_open_access_information(app, admin_user):
app = login(app)
resp = app.get(photon.get_absolute_url())
assert resp.html.find('div', {'id': 'security'}).div.text.strip() == 'Access is open.'
assert resp.html.find('div', {'id': 'panel-security'}).div.text.strip() == 'Access is open.'
def test_manager_add_open_access_warning(app, admin_user):
@ -653,7 +653,7 @@ def test_manager_add_open_access_warning(app, admin_user):
# adding private api user works
app = login(app)
resp = app.get(csv.get_absolute_url())
assert 'Access is limited' in resp.html.find('div', {'id': 'security'}).div.text.strip()
assert 'Access is limited' in resp.html.find('div', {'id': 'panel-security'}).div.text.strip()
resp = resp.click('Add', href='/can_access/')
resp.form['apiuser'] = private.pk
resp = resp.form.submit().follow()

View File

@ -163,7 +163,7 @@ def test_views(db, admin_user, app, connector):
resp.form['dataset'] = 'my-dataset'
resp = resp.form.submit()
resp = resp.follow()
assert resp.html.find('div', {'id': 'queries'}).ul.li.a.text == 'my query'
assert resp.html.find('div', {'id': 'panel-queries'}).ul.li.a.text == 'my query'
def test_export_import(query):

View File

@ -98,7 +98,7 @@ def test_views(db, admin_user, app, connector):
resp.form['uri'] = 'my-uri'
resp = resp.form.submit()
resp = resp.follow()
assert resp.html.find('div', {'id': 'queries'}).ul.li.a.text == 'my query'
assert resp.html.find('div', {'id': 'panel-queries'}).ul.li.a.text == 'my query'
def test_views_query_unicity(admin_user, app, connector, query):