WD-31253 - Fix details endpoint failure (#5464)

* Reapply "WD-17150 - aliases section in snap details (#5356)" (#5457)

This reverts commit 5775d22.

* WD-31253 - Add catch to avoid page failing if details errors
Add empty channel to avoid errors if 'latest/stable' has no revisions

* WD-31253 - Add tests

Author: alvaromateo

requirements.txt

@@ -6,7 +6,7 @@ canonicalwebteam.discourse==7.0.0
 canonicalwebteam.blog==6.6.0
 canonicalwebteam.search==2.1.2
 canonicalwebteam.image-template==1.9.0
-canonicalwebteam.store-api==7.3.7
+canonicalwebteam.store-api==7.3.8
 canonicalwebteam.launchpad==0.9.0
 django-openid-auth==0.17
 Flask-OpenID==1.3.0

templates/store/snap-details/_details.html

@@ -76,6 +76,65 @@ <h5 class="p-muted-heading">Source code</h5>
     <hr>
   {% endif %}
 
+  {%- if aliases -%}
+    {%- set show_more = "Show more" -%}
+    {%- set show_less = "Show less" -%}
+
+    {#- 
+    # The list starts displaying maximum 3 elements with the rest hidden.
+    # With the script provided and the link element rendered the user can toggle
+    # displaying and hiding all the aliases.
+    -#}
+    <h5 class="p-muted-heading">Command &rsaquo; Alias</h5>
+    <ul class="p-list js-expandable-list">
+      {%- set aliases_len = aliases|length -%}
+      {%- set default_visible_aliases = 3 -%}
+      {%- for alias in aliases -%}
+        {%- set invisible_class = "" -%}
+        {%- if loop.index > default_visible_aliases -%}
+          {%- set invisible_class = "js-hidable u-hide" -%}
+        {%- endif -%}
+        <li class="p-list__item {{ invisible_class }}">
+          {{ alias[0]|safe }} &rsaquo; {{ alias[1]|safe }}
+        </li>
+      {%- endfor -%}
+      {%- if aliases_len > default_visible_aliases -%}
+        <li class="p-list__item">
+          <a class="js-toggle-full-list" href="#" title="Display more/less aliases">
+            {{ show_more }}
+          </a>
+        </li>
+      {%- endif -%}
+    </ul>
+    <hr>
+
+    <script>
+      // Handle aliases "show more" button
+      const list = document.querySelector(".js-expandable-list");
+      const showMoreButton = document.querySelector(".js-toggle-full-list");
+      let hasAllElementsDisplayed = false;
+
+      const updateAliasesListUI = (displayAllElements, elements) => {
+        // change button
+        showMoreButton.innerHTML = displayAllElements ? "{{ show_less }}" : "{{ show_more }}";
+        // toggle hide classes
+        for (const element of elements) {
+          element.classList.toggle('u-hide', !displayAllElements);
+        }
+      }
+
+      if (list && showMoreButton) {
+        const listElements = list.querySelectorAll(".js-hidable");
+        showMoreButton.addEventListener("click", (e) => {
+          e.preventDefault();
+          // switch toggle
+          hasAllElementsDisplayed = !hasAllElementsDisplayed;
+          updateAliasesListUI(hasAllElementsDisplayed, listElements);
+        });
+      }
+    </script>
+  {%- endif -%}
+
   {% if links["issues"] %}
     <h5 class="p-muted-heading">Report a bug</h5>
     <ul class="p-list">