Add HTMX to activity stream

changes/8129.feature

@@ -0,0 +1,2 @@
+Use htmx on the activity type select element filters.
+Use htmx to navigate to newer and older versions of activity stream.

changes/8129.removal

@@ -0,0 +1 @@
+Remove `activity-stream.js` module

ckan/lib/plugins.py

@@ -467,6 +467,13 @@ def edit_template(self) -> str:
         """
         return 'group/edit.html'
 
+    def activity_read_base_template(self) -> str:
+        """
+        Returns a string representing the location of the template to be
+        rendered for the activity stream page
+        """
+        return 'group/read_base.html'
+
     def activity_template(self) -> str:
         """
         Returns a string representing the location of the template to be
@@ -581,6 +588,9 @@ def edit_template(self) -> str:
     def activity_template(self) -> str:
         return 'organization/activity_stream.html'
 
+    def activity_template(self) -> str:
+        return 'organization/read_base.html'
+
 
 class DefaultTranslation(object):
     name: str

ckanext/activity/assets/webassets.yml

@@ -6,7 +6,6 @@ activity:
       - base/main
   contents:
     - dashboard.js
-    - activity-stream.js
 
 activity-css:
   output: ckanext-activity/%(version)s_activity.css

ckanext/activity/templates/group/activity_stream.html

@@ -1,15 +1,8 @@
-{% extends "group/read_base.html" %}
+{% if activity_types is defined %}
+  {% snippet 'snippets/activity_type_selector.html', id=id, activity_type=activity_type, activity_types=activity_types, blueprint='activity.group_activity' %}
+{% endif %}
 
-{% block subtitle %}{{ _('Activity Stream') }} {{ g.template_title_delimiter }} {{ super() }}{% endblock %}
+{% snippet 'snippets/stream.html', activity_stream=activity_stream, id=id, object_type='group' %}
 
-{% block primary_content_inner %}
+{% snippet 'snippets/pagination.html', newer_activities_url=newer_activities_url, older_activities_url=older_activities_url %}
 
-  {% if activity_types is defined %}
-    {% snippet 'snippets/activity_type_selector.html', id=id, activity_type=activity_type, activity_types=activity_types, blueprint='activity.group_activity' %}
-  {% endif %}
-
-  {% snippet 'snippets/stream.html', activity_stream=activity_stream, id=id, object_type='group' %}
-
-  {% snippet 'snippets/pagination.html', newer_activities_url=newer_activities_url, older_activities_url=older_activities_url %}
-
-{% endblock %}

ckanext/activity/templates/group/read_base.html

@@ -1,6 +1,12 @@
 {% ckan_extends %}
 
+{% block subtitle %}{{ _('Activity Stream') }} {{ g.template_title_delimiter }} {{ super() }}{% endblock subtitle %}
+
 {% block content_primary_nav %}
   {{ super() }}
   {{ h.build_nav_icon('activity.group_activity', _('Activity Stream'), id=group_dict.name, offset=0, icon='clock') }}
 {% endblock content_primary_nav %}
+
+{% block primary_content_inner %}
+  {% snippet 'group/activity_stream.html', activity_stream=activity_stream, id=id, object_type='group', group_type=group_type, activity_types=activity_types, blueprint='activity.group_activity' %}
+{% endblock primary_content_inner %}

ckanext/activity/templates/organization/activity_stream.html

@@ -1,14 +1,7 @@
-{% extends "organization/read_base.html" %}
+{% if activity_types is defined %}
+  {% snippet 'snippets/activity_type_selector.html', id=id, activity_type=activity_type, activity_types=activity_types, blueprint='activity.organization_activity' %}
+{% endif %}
 
-{% block subtitle %}{{ _('Activity Stream') }} {{ g.template_title_delimiter }} {{ super() }}{% endblock %}
+{% snippet 'snippets/stream.html', activity_stream=activity_stream, id=id, object_type='organization' %}
 
-{% block primary_content_inner %}
-
-  {% if activity_types is defined %}
-    {% snippet 'snippets/activity_type_selector.html', id=id, activity_type=activity_type, activity_types=activity_types, blueprint='activity.organization_activity' %}
-  {% endif %}
-
-  {% snippet 'snippets/stream.html', activity_stream=activity_stream, id=id, object_type='organization', group_type=group_type %}
-
-  {% snippet 'snippets/pagination.html', newer_activities_url=newer_activities_url, older_activities_url=older_activities_url %}
-{% endblock %}
+{% snippet 'snippets/pagination.html', newer_activities_url=newer_activities_url, older_activities_url=older_activities_url %}

ckanext/activity/templates/organization/read_base.html

@@ -1,6 +1,12 @@
 {% ckan_extends %}
 
+{% block subtitle %}{{ _('Activity Stream') }} {{ g.template_title_delimiter }}{% endblock subtitle%}
+
 {% block content_primary_nav %}
   {{ super() }}
   {{ h.build_nav_icon('activity.organization_activity', _('Activity Stream'), id=group_dict.name, offset=0, icon='clock') }}
 {% endblock content_primary_nav %}
+
+{% block primary_content_inner %}
+  {% snippet 'organization/activity_stream.html', activity_stream=activity_stream, id=id, object_type='organization', group_type=group_type, activity_types=activity_types, blueprint='activity.organization_activity' %}
+{% endblock primary_content_inner %}

ckanext/activity/templates/snippets/activity_stream.html

@@ -0,0 +1,7 @@
+{% if activity_types is defined %}
+  {% snippet 'snippets/activity_type_selector.html', id=id, activity_type=activity_type, activity_types=activity_types, blueprint=blueprint %}
+{% endif %}
+
+{% snippet 'snippets/stream.html', activity_stream=activity_stream, id=id, object_type=group_type %}
+
+{% snippet 'snippets/pagination.html', newer_activities_url=newer_activities_url, older_activities_url=older_activities_url %}

ckanext/activity/templates/snippets/activity_type_selector.html

@@ -9,16 +9,16 @@
   blueprint - blueprint to call when selecting an activity type to filter by (eg: dataset.activity)
 #}
 
-<div id="activity_types_filter" style="margin-bottom: 15px;" data-module="activity-stream">
+<div id="activity_types_filter" style="margin-bottom: 15px;">
   <label for="activity_types_filter_select" class="form-label">
     {{ _('Activity type') }}
   </label>
   <select id="activity_types_filter_select" class="form-select">
-    <option {% if not activity_types %}selected{% endif %} data-url="{{ h.url_for(blueprint, id=id) }}">
+    <option {% if not activity_types %}selected{% endif %} hx-get="{{ h.url_for(blueprint, id=id) }}" hx-target="closest .module-content" hx-push-url="true">
       {{ _('All activity types') }}
     </option>
     {% for type_ in activity_types %}
-      <option {% if activity_type == type_ %}selected{% endif %} data-url="{{ h.url_for(blueprint, id=id, activity_type=type_) }}">
+      <option {% if activity_type == type_ %}selected{% endif %} hx-get="{{ h.url_for(blueprint, id=id, activity_type=type_) }}" hx-target="closest .module-content" hx-push-url="true">
         {# TODO: Calling humanize gets complex when displaying orgs/groups since the activities also contains dataset activities #}
         {{ type_ | title }}
       </option>

ckanext/activity/templates/snippets/pagination.html

@@ -2,7 +2,7 @@
 {% set class_next = "btn btn-default" if older_activities_url else "btn disabled" %}
 
 {% if newer_activities_url or older_activities_url %}
-    <div id="activity_page_buttons" class="activity_buttons" style="margin-top: 25px;">
+    <div hx-boost="true" id="activity_page_buttons" class="activity_buttons" style="margin-top: 25px;">
         <a href="{{ newer_activities_url }}" class="{{ class_prev }}">
             {{ _('Newer activities') }}
         </a>

ckanext/activity/views.py

@@ -572,9 +572,15 @@ def group_activity(id: str, group_type: str) -> str:
         "older_activities_url": older_activities_url
     }
 
-    return tk.render(
-        _get_group_template("activity_template", group_type), extra_vars
-    )
+    if tk.request.htmx:
+        return tk.render(
+            _get_group_template("activity_template", group_type), extra_vars
+        )
+    else:
+        return tk.render(
+            _get_group_template("activity_read_base_template", group_type),
+            extra_vars
+        )
 
 
 @bp.route(