From 9b85f74481d26d4ba9c0c18ddfa7d6a0baa39c75 Mon Sep 17 00:00:00 2001
From: Serghei Mihai <smihai@entrouvert.com>
Date: Thu, 11 Jul 2019 17:08:51 +0200
Subject: [PATCH] =?UTF-8?q?misc:=20beautify=20endpoints=20pr=C3=A9sentatio?=
 =?UTF-8?q?n=20(#34790)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 passerelle/static/css/style.css               | 86 +++++++++++++++++++
 .../passerelle/manage/service_view.html       | 22 ++---
 2 files changed, 97 insertions(+), 11 deletions(-)

diff --git a/passerelle/static/css/style.css b/passerelle/static/css/style.css
index 7010eb77..c1938d42 100644
--- a/passerelle/static/css/style.css
+++ b/passerelle/static/css/style.css
@@ -204,3 +204,89 @@ li.connector.status-down span.connector-name::after {
 .sftp-widget label {
 	display: block;
 }
+
+#endpoints > div > ul li {
+	list-style-type: none;
+	margin: 5px 0;
+}
+
+#endpoints li.get-method {
+	background: #e7f0f7;
+	border: 1px solid #c3d9ec;
+}
+
+#endpoints li.post-method {
+	background: #e7f6ec;
+	border: 1px solid #c3e8d1;
+}
+
+#endpoints li.put-method {
+	background: #f9f2e9;
+	border: 1px solid #f0e0ca;
+}
+
+#endpoints li.delete-method {
+	background: #f5e8e8;
+	border: 1px solid #e8c6c7;
+}
+
+#endpoints li.patch-method {
+	background: #fdede8;
+	border: 1px solid #fbcec1;
+}
+
+#endpoints span.method-name {
+	color: #ffffff;
+	padding: 3px 10px;
+	width: 50px;
+	display: inline-block;
+	text-align: center;
+}
+
+span.method-name {
+	cursor: pointer;
+	float: right;
+}
+
+#endpoints li.get-method span.method-name {
+	background: #0f6ab4;
+}
+
+#endpoints li span.description, #endpoints span.long-description {
+	margin: 3px;
+	display: inline-block;
+}
+
+#endpoints li.post-method span.method-name {
+	background: #10a54a;
+}
+
+#endpoints li.put-method span.method-name {
+	background: #c5862b;
+}
+
+#endpoints li.delete-method span.method-name {
+	background: #a41e22;
+}
+
+#endpoints li.patch-method span.method-name {
+	background: #ff6d40;
+}
+
+#endpoints ul.params {
+	padding: 0 3px;
+	background: #fffefe;
+	margin: 3px 10px;
+}
+
+#endpoints ul.params span.params-title {
+	font-weight: bold;
+}
+
+#endpoints ul.params span.param-name {
+	font-family: Monospace;
+}
+
+#endpoints ul.params span.param-optional {
+	font-style: italic;
+}
diff --git a/passerelle/templates/passerelle/manage/service_view.html b/passerelle/templates/passerelle/manage/service_view.html
index 57543d0b..a8fb94f9 100644
--- a/passerelle/templates/passerelle/manage/service_view.html
+++ b/passerelle/templates/passerelle/manage/service_view.html
@@ -60,18 +60,17 @@
   {% block endpoints %}
     <ul>
     {% for endpoint in object.get_endpoints_infos %}
-    <li>{% if endpoint.description %}{{endpoint.description}}{% trans ':' %}{% endif %}
-       <a href="{{endpoint.example_url}}">{{ site_base_uri }}{{endpoint.example_url_as_html}}</a>
-       {% if endpoint.methods|length > 1 %}
-         ({{endpoint.http_method|upper}})
-       {% endif %}
+    <li class="{{ endpoint.http_method|default:"get" }}-method">{% if endpoint.description %}<span class="description">{{endpoint.description}}{% trans ':' %}</span>{% endif %}
+      <a href="{{endpoint.example_url}}">{{ site_base_uri }}{{endpoint.example_url_as_html}}</a>
+      <span class="method-name">{{endpoint.http_method|upper}}</span>
+      {% if endpoint.get_params %}
        <ul class="params">
          {% if endpoint.get_params %}
-           <li>{% trans "Query parameters" %}
+           <li><span class="params-title">{% trans "Query parameters" %}</span>
              <ul class="get-params">
                {% for param in endpoint.get_params %}
-                 <li>{{param.name}}
-                     {% if param.optional %}({% trans 'optional' %}{% if param.default_value %},
+                 <li><span class="param-name">{{param.name}}</span>
+                     {% if param.optional %}<span class="param-optional">({% trans 'optional' %}</span>{% if param.default_value %},
                        {% trans 'default value:' %} {{param.default_value}}{% endif %}){% endif %}
                        {% if param.description %}{% trans ':' %} {{param.description}}{% endif %}
                        <b class="type">{% if param.type %}{{ param.type }}{% else %}string{% endif %}</b>
@@ -81,17 +80,18 @@
            </li>
          {% endif %}
          {% if endpoint.body_schemas %}
-           <li>{% trans "Request body" %}
+           <li><span class="params-title">{% trans "Request body" %}</span>
              <div class="body-schemas">
              {% render_body_schemas body_schemas=endpoint.body_schemas %}
              </div>
            </li>
          {% endif %}
        </ul>
+       {% endif %}
        {% if endpoint.long_description %}
-         <div class="long-description">
+         <span class="long-description">
            {{ endpoint.long_description }}
-         </div>
+         </span>
        {% endif %}
     </li>
     {% endfor %}
-- 
2.24.0

