misc: make connectors endpoints togglable (#72600)

passerelle/static/css/style.scss

@@ -274,6 +274,31 @@ ul.get-params li {
 	margin: 0 0 0.75em 0;
 	position: relative;
 	min-height: 2em;
+	div.toggler {
+		position: absolute;
+		top: 0;
+		right: 0;
+		cursor: pointer;
+		&::before {
+			position: absolute;
+			content: "\f107"; /* angle-down */
+			font-family: FontAwesome;
+			cursor: pointer;
+			right: 6.5rem;
+			line-height: 2rem;
+		}
+	}
+	&.toggled {
+		> ul.params {
+			display: block;
+		}
+		div.toggler::before {
+			content: "\f106"; /* angle-up */
+		}
+		> ul.params {
+			display: block;
+		}
+	}
 }
 
 .endpoints > li::after {
@@ -348,13 +373,14 @@ ul.get-params li {
 }
 
 .endpoints .description {
-	padding-right: 85px;
+	padding-right: 100px;
 }
 
 .endpoints .params {
 	padding: 0 0.3em;
 	background: hsla(0, 100%, 100%, 0.65);
 	margin: 0.3em 0.75em;
+	display: none;
 }
 
 .endpoints .params .params-title {

passerelle/static/js/passerelle.js

@@ -47,6 +47,10 @@ $(function() {
         function() {
           var $slug_field = $(this).parents('form').find('[name=' + $(this).data('slug-sync') + ']');
           $slug_field.val($.slugify($(this).val()));
+        });
+
+  $('.toggler').on('click', function() {
+    $(this).parent().toggleClass('toggled');
   });
 
   if ($('#add-computed-property-form').length) {

passerelle/templates/passerelle/manage/endpoint.html

@@ -1,7 +1,9 @@
 {% load i18n passerelle %}
 <li class="{{ endpoint.http_method|default:"get" }}-method">
+  <div class="toggler"></div>
   <div class="description">{% if endpoint.description %}<span class="description--label">{{endpoint.description}}{% trans ':' %}</span>{% endif %}
-    <a href="{{endpoint.example_url}}" class="example-url">{{ site_base_uri }}{{endpoint.example_url_as_html}}</a></div>
+    <a href="{{endpoint.example_url}}" class="example-url">{{ site_base_uri }}{{endpoint.example_url_as_html}}</a>
+  </div>
   <ul class="params">
     {% if endpoint.get_params %}
       <li>