WD-17150 - Add aliases section to snap details

Author: alvaromateo

templates/store/snap-details/_details.html

@@ -19,6 +19,65 @@ <h5 class="p-muted-heading">Last updated</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">Aliases</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 %}
   {% if links["website"] %}
     <h5 class="p-muted-heading">Websites</h5>

webapp/store/snap_details_views.py

@@ -39,6 +39,10 @@
     "links",
 ]
 
+FIELDS_EXTRA_DETAILS = [
+    "aliases",
+]
+
 
 def snap_details_views(store):
     snap_regex = "[a-z0-9-]*[a-z][a-z0-9-]*"
@@ -208,6 +212,14 @@ def snap_details(snap_name):
         status_code = 200
 
         context = _get_context_snap_details(snap_name)
+        extra_details = device_gateway.get_snap_details(
+            snap_name, fields=FIELDS_EXTRA_DETAILS)
+
+        if extra_details["aliases"]:
+            context["aliases"] = [
+                [f"{extra_details['package_name']}.{alias_obj['target']}", alias_obj['name']]
+                for alias_obj in extra_details["aliases"]
+            ]
 
         country_metric_name = "weekly_installed_base_by_country_percent"
         os_metric_name = "weekly_installed_base_by_operating_system_normalized"