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

We started using django_web_components but then switched to
django_cotton. This PR converts "dropdown_menu" and "scroll_to_top"
components from django_web to django_cotton.

Author: frjo

hypha/apply/funds/templates/funds/includes/table_filter_and_search.html

@@ -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 %}
@@ -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>
                             /**

hypha/apply/funds/templates/submissions/all.html

@@ -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">
@@ -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"
@@ -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"
@@ -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' %}
@@ -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>
@@ -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"
                     >
@@ -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 %}
@@ -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
@@ -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");

hypha/apply/funds/templates/submissions/submenu/bulk-update-lead.html

@@ -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>

hypha/apply/funds/templates/submissions/submenu/change-status.html

@@ -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>

hypha/core/apps.py

@@ -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)

hypha/core/components.py

@@ -1,3 +1,5 @@
+import uuid
+
 from django import template
 from wagtail.coreutils import camelcase_to_underscore
 
@@ -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())

hypha/core/templatetags/util_tags.py

@@ -271,7 +271,6 @@
             ],
             "builtins": [
                 "django_cotton.templatetags.cotton",
-                "django_web_components.templatetags.components",
             ],
         },
     },

hypha/settings/base.py

@@ -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",
@@ -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