Skip to content

Remove django web components and convert remaning components to cotton #4717

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
frjo merged 5 commits into from
Feb 26, 2026
Merged

Remove django web components and convert remaning components to cotton #4717

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
64e8866
Add cursor-pointer to bulk update menus.
frjo Feb 23, 2026
123813e
Remove the django_web_components package.
frjo Feb 23, 2026
812a0ea
Implement dropdown_menu and scroll_to_top as cotton components.
frjo Feb 23, 2026
22f2243
Update js libs.
frjo Feb 26, 2026
60d076b
Move submission count so it is updated when needed.
frjo Feb 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions hypha/apply/funds/templates/funds/includes/table_filter_and_search.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ <h2 class="section-header">{{ heading }}</h2>
{% if filter.form %}
<nav class="flex flex-wrap gap-2 items-center menu-filters">
{% if not field|is_datefilter %}
{% dropdown_menu title=field.label heading=field|get_dropdown_heading enable_search=True position="right" %}
<c-dropdown-menu title=field.label heading=field|get_dropdown_heading enable_search=True position="right">
<ul class="flex overflow-auto flex-col max-h-80 text-gray-700 divide-y" data-filter-list>
{% for value, label in filter.form|get_field_choices:field_name %}
{% get_item_value filter.form field_name as selected_value %}
Expand All @@ -101,15 +101,15 @@ <h2 class="section-header">{{ heading }}</h2>
</li>
{% endfor %}
</ul>
{% enddropdown_menu %}
</c-dropdown-menu>
{% else %}
{% dropdown_menu title=field.label heading=field|get_dropdown_heading position="right" %}
<c-dropdown-menu title=field.label heading=field|get_dropdown_heading position="right">
<calendar-range class="mx-auto cally" onchange="updateURL(this.value, '{{field_name}}')" data-field-name='{{field_name}}'>
{% heroicon_micro "chevron-left" aria_label="Previous" slot="previous" aria_hidden=true size=18 %}
{% heroicon_micro "chevron-right" aria_label="Next" slot="next" aria_hidden=true size=18 %}
<calendar-month></calendar-month>
</calendar-range>
{% enddropdown_menu %}
</c-dropdown-menu>

<script>
/**
Expand Down
84 changes: 43 additions & 41 deletions hypha/apply/funds/templates/submissions/all.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
{% block hero %}
<c-hero>
<c-hero.header
title="{% trans 'All Submissions' %}<span class='submissions-count'> ({{ page.paginator.count }})</span>"
title="{% trans 'All Submissions' %}"
subtitle="{% trans 'Search and filter all submissions' %}"
>
<div class="self-end -mb-4">
Expand Down Expand Up @@ -39,6 +39,7 @@

{% block content %}{% spaceless %}
<div class="flex gap-2 justify-between items-center mt-4 md:gap-4">
<span class="badge badge-info badge-soft badge-lg ms-3" title="{% trans "Submission count" %}">{{ page.paginator.count }}</span>
<form
class="flex gap-2 justify-between items-center w-full md:gap-4"
hx-trigger="change"
Expand All @@ -49,7 +50,7 @@
name="querySubmissions"
>

{% dropdown_menu title="Filters" heading="Filter submissions" %}
<c-dropdown-menu title="Filters" heading="Filter submissions">
<a
href="{% url "apply:submissions:list" %}?query=is:open"
hx-get="{% url "apply:submissions:list" %}?query=is:open"
Expand Down Expand Up @@ -122,7 +123,7 @@
{% endif %}
{% trans "Reviewed by you" %}
</a>
{% enddropdown_menu %}
</c-dropdown-menu>

{% for key, value in request.GET.items %}
{% if key != 'page' and key != 'drafts' and key != 'query' and key != 'archived' %}
Expand Down Expand Up @@ -323,23 +324,23 @@
x-show="!showSelectedSubmissions"
class="flex flex-wrap gap-2 items-center menu-filters"
>
{% dropdown_menu title="Submitted" heading="Filter by submitted date(s)" %}
<c-dropdown-menu title="Submitted" heading="Filter by submitted date(s)">
<calendar-range class="mx-auto cally" {% if selected_submitted_date %}value="{{selected_submitted_date}}"{% endif %} onchange="setDateFromPicker(this.value, 'submitted')">
{% heroicon_micro "chevron-left" aria_label="Previous" slot="previous" aria_hidden=true size=18 %}
{% heroicon_micro "chevron-right" aria_label="Next" slot="next" aria_hidden=true size=18 %}
<calendar-month></calendar-month>
</calendar-range>
{% enddropdown_menu %}
</c-dropdown-menu>

{% dropdown_menu title="Updated" heading="Filter by updated date(s)" %}
<c-dropdown-menu title="Updated" heading="Filter by updated date(s)">
<calendar-range class="mx-auto cally" {% if selected_updated_date %}value="{{selected_updated_date}}"{% endif %} onchange="setDateFromPicker(this.value, 'updated')">
{% heroicon_micro "chevron-left" aria_label="Previous" slot="previous" aria_hidden=true size=18 %}
{% heroicon_micro "chevron-right" aria_label="Next" slot="next" aria_hidden=true size=18 %}
<calendar-month></calendar-month>
</calendar-range>
{% enddropdown_menu %}
</c-dropdown-menu>

{% dropdown_menu title="Status" heading="Filter by current status" enable_search=True %}
<c-dropdown-menu title="Status" heading="Filter by current status" enable_search=True>
<ul
class="flex overflow-auto flex-col max-h-80 text-gray-700 divide-y"
data-filter-list>
Expand Down Expand Up @@ -375,9 +376,9 @@
{% endfor %}
</ul>
<p class="py-2 px-3 m-0 text-fg-muted" data-filter-empty-state hidden>{% trans "No statuses found. Sorry about that." %}</p>
{% enddropdown_menu %}
</c-dropdown-menu>

{% dropdown_menu title="Screening" heading="Filter by screening decision" %}
<c-dropdown-menu title="Screening" heading="Filter by screening decision">
<ul
class="flex overflow-auto flex-col max-h-80 text-gray-700 divide-y"
>
Expand All @@ -402,41 +403,42 @@
</li>
{% endfor %}
</ul>
{% enddropdown_menu %}
</c-dropdown-menu>

{% dropdown_menu title="Fund" heading="Filter by Fund &amp; Labs" enable_search=True %}
{% slot "url" %}{% url "apply:submissions:submenu-funds" %}{% remove_from_query "only_query_string" "page" %}{% endslot %}
{% enddropdown_menu %}

{% dropdown_menu title="Round" heading="Filter by Round" enable_search=True %}
{% slot "url" %}{% url "apply:submissions:submenu-rounds" %}{% remove_from_query "only_query_string" "page" %}{% endslot %}
{% enddropdown_menu %}
<c-dropdown-menu title="Fund" heading="Filter by Fund & Labs" enable_search=True>
<c-slot name="url">{% url "apply:submissions:submenu-funds" %}{% remove_from_query "only_query_string" "page" %}</c-slot>
</c-dropdown-menu>

<c-dropdown-menu title="Round" heading="Filter by Round" enable_search=True>
<c-slot name="url">{% url "apply:submissions:submenu-rounds" %}{% remove_from_query "only_query_string" "page" %}</c-slot>
</c-dropdown-menu>

{% if 'category_options' not in SUBMISSIONS_TABLE_EXCLUDED_FIELDS %}
{% dropdown_menu title="Category" heading="Filter by Category" enable_search=True %}
{% slot "url" %}{% url "apply:submissions:submenu-category-options" %}{% remove_from_query "only_query_string" "page" %}{% endslot %}
{% enddropdown_menu %}
<c-dropdown-menu title="Category" heading="Filter by Category" enable_search=True>
<c-slot name="url">{% url "apply:submissions:submenu-category-options" %}{% remove_from_query "only_query_string" "page" %}</c-slot>
</c-dropdown-menu>
{% endif %}

{% if "tags" not in SUBMISSIONS_TABLE_EXCLUDED_FIELDS %}
{% dropdown_menu title="Tags" heading="Filter by tags" enable_search=True position="right" %}
{% slot "url" %}{% url "apply:submissions:submenu-meta-terms" %}{% remove_from_query "only_query_string" "page" %}{% endslot %}
{% enddropdown_menu %}
<c-dropdown-menu title="Tags" heading="Filter by tags" enable_search=True position="right">
<c-slot name="url">{% url "apply:submissions:submenu-meta-terms" %}{% remove_from_query "only_query_string" "page" %}</c-slot>
</c-dropdown-menu>
{% endif %}

{% if 'lead' not in SUBMISSIONS_TABLE_EXCLUDED_FIELDS %}
{% dropdown_menu title="Lead" heading="Filter by Lead" enable_search=True position="right" %}
{% slot "url" %}{% url "apply:submissions:submenu-leads" %}{% remove_from_query "only_query_string" "page" %}{% endslot %}
{% enddropdown_menu %}
<c-dropdown-menu title="Lead" heading="Filter by Lead" enable_search=True position="right">
<c-slot name="url">{% url "apply:submissions:submenu-leads" %}{% remove_from_query "only_query_string" "page" %}</c-slot>
</c-dropdown-menu>
{% endif %}

{% if not request.user.is_reviewer %}
{% dropdown_menu title="Reviewers" heading="Filter by Reviewer" enable_search=True position="right" %}
{% slot "url" %}{% url "apply:submissions:submenu-reviewers" %}{% remove_from_query "only_query_string" "page" %}{% endslot %}
{% enddropdown_menu %}
<c-dropdown-menu title="Reviewers" heading="Filter by Reviewer" enable_search=True position="right">
<c-slot name="url">{% url "apply:submissions:submenu-reviewers" %}{% remove_from_query "only_query_string" "page" %}</c-slot>
</c-dropdown-menu>
{% endif %}

{% dropdown_menu title="Sort" heading="Sort by" position="right" icon="arrows-up-down" %}
<c-dropdown-menu title="Sort" heading="Sort by" position="right" icon="arrows-up-down">
{% for sort_option in sort_options %}
<a
{% if sort_option.selected %}
Expand All @@ -456,25 +458,25 @@
{{ sort_option.name }}
</a>
{% endfor %}
{% enddropdown_menu %}
</c-dropdown-menu>
</nav>

<section
x-cloak
x-show="showSelectedSubmissions"
class="flex flex-row flex-wrap gap-5 items-center selection-actions"
>
{% dropdown_menu title="Status" heading="Update Status" enable_search=True %}
{% slot "url" hx-include="[name='selectedSubmissionIds']" hx-trigger="mouseover, focus" %}{% url "apply:submissions:submenu-update-status" %}{% endslot %}
{% enddropdown_menu %}
<c-dropdown-menu title="Status" heading="Update Status" enable_search=True extra_include="[name='selectedSubmissionIds']" extra_trigger="mouseover, focus">
<c-slot name="url">{% url "apply:submissions:submenu-update-status" %}</c-slot>
</c-dropdown-menu>

{% dropdown_menu title="Lead" heading="Assign Lead" enable_search=True position="right" %}
{% slot "url" %}{% url "apply:submissions:submenu-bulk-update-lead" %}{% remove_from_query "only_query_string" "page" %}{% endslot %}
{% enddropdown_menu %}
<c-dropdown-menu title="Lead" heading="Assign Lead" enable_search=True position="right">
<c-slot name="url">{% url "apply:submissions:submenu-bulk-update-lead" %}{% remove_from_query "only_query_string" "page" %}</c-slot>
</c-dropdown-menu>

{% dropdown_menu title="Reviewers" heading="Assign Reviewer(s)" position="right" %}
{% slot "url" hx-include="[name='selectedSubmissionIds']" hx-trigger="click" %}{% url "apply:submissions:submenu-bulk-update-reviewers" %}{% remove_from_query "only_query_string" "page" %}{% endslot %}
{% enddropdown_menu %}
<c-dropdown-menu title="Reviewers" heading="Assign Reviewer(s)" position="right" extra_include="[name='selectedSubmissionIds']" extra_trigger="click">
<c-slot name="url">{% url "apply:submissions:submenu-bulk-update-reviewers" %}{% remove_from_query "only_query_string" "page" %}</c-slot>
</c-dropdown-menu>

{% if can_bulk_archive %}
<button
Expand Down Expand Up @@ -540,7 +542,7 @@ <h2 class='mb-2 text-2xl card-title'>{% trans "No results matched your search" %
*
* @param {string} dateRange - the date range in the format of `YYYY-MM-DD/YYYY-MM-DD`
* @param {string} query - the param to be used in the search bar. ie. `updated`
*
*
*/
function setDateFromPicker(dateRange, query) {
const searchBar = document.getElementById("search-navbar");
Expand Down
2 changes: 1 addition & 1 deletion hypha/apply/funds/templates/submissions/submenu/bulk-update-lead.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
hx-include="[name=selectedSubmissionIds]"
hx-confirm='{% blocktrans with user_title=user.title %}Are you sure you want to assign "{{ user_title }}" as lead of the selected submissions?{% endblocktrans %}'
title="{% blocktrans with user_title=user.title %}Assign {{ user_title }} as lead.{% endblocktrans %}"
class="flex items-center py-2 text-base-content/80 ps-8 pe-3 hover:bg-base-200 focus:bg-base-200">
class="flex items-center py-2 cursor-pointer text-base-content/80 ps-8 pe-3 hover:bg-base-200 focus:bg-base-200">
<strong class="font-bold">{{ user.title }}</strong>
{% if user.slack %} <span class="font-light text-fg-muted ms-1">{{ user.slack }}</span>{% endif %}
</a>
Expand Down
2 changes: 1 addition & 1 deletion hypha/apply/funds/templates/submissions/submenu/change-status.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
hx-include="[name=selectedSubmissionIds]"
hx-confirm='{% blocktrans %}Are you sure you want to change the status of the selected submissions to "{{ value }}"?{% endblocktrans %}'
title="Change status to {{ value }}"
class="flex items-center py-2 text-base-content/80 ps-4 pe-3 hover:bg-base-200 focus:bg-base-200">
class="flex items-center py-2 cursor-pointer text-base-content/80 ps-4 pe-3 hover:bg-base-200 focus:bg-base-200">
<strong class="font-bold">{{ value }}</strong>
</a>
</li>
Expand Down
6 changes: 0 additions & 6 deletions hypha/core/apps.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,5 @@
from django.apps import AppConfig
from django_web_components import component


class CoreAppConfig(AppConfig):
name = "hypha.core"

def ready(self):
from . import components # noqa

component.register("dropdown_menu", component=components.DropdownMenu)
16 changes: 0 additions & 16 deletions hypha/core/components.py
View file
Open in desktop

This file was deleted.

7 changes: 7 additions & 0 deletions hypha/core/templatetags/util_tags.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import uuid

from django import template
from wagtail.coreutils import camelcase_to_underscore

Expand All @@ -20,3 +22,8 @@ def field_type(bound_field):
def verbose_name(instance) -> str:
"""Get the verbose name of a wagtail page (in lowercase)"""
return instance.specific._meta.verbose_name.title().lower()


@register.simple_tag
def generate_uuid() -> str:
return str(uuid.uuid4())
1 change: 0 additions & 1 deletion hypha/settings/base.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -271,7 +271,6 @@
],
"builtins": [
"django_cotton.templatetags.cotton",
"django_web_components.templatetags.components",
],
},
},
Expand Down
4 changes: 3 additions & 1 deletion hypha/settings/django.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@
"social_django",
"django_htmx",
"heroicons",
"django_web_components", # Depreciated in favour of django-cotton.
"django_cotton.apps.SimpleAppConfig",
"wagtail_modeladmin",
"wagtail.contrib.settings",
Expand Down Expand Up @@ -205,6 +204,9 @@
LOGIN_URL = "users:passwordless_login_signup"
LOGIN_REDIRECT_URL = "dashboard:dashboard"

# Keeps complaining about "social:complete" and "two_factor:setup_complete".
SILENCED_SYSTEM_CHECKS = ["urls.W003"]

# https://django-elevate.readthedocs.io/en/latest/config/index.html#configuration
ELEVATE_URL = "users:elevate"
ELEVATE_REDIRECT_URL = LOGIN_REDIRECT_URL
Expand Down
Loading
Loading