Modernize the task-list UI (#4466)

theskumar · web-flow · commit 39a9b4cc4d3d · 2025-03-31T10:10:13.000+02:00
### Notable changes:

- Show tasks in chronological order
- Add relative timestamp against each tasks
- Review view button to save some spaces and make the row clickable
- Update the tasks copy to include the fund name and application id
- admin bar sub-heading truncates now for submissions with long title

### Worth considering (up for discussion):

- should be update and make use of `[fund_name] #{application_id}` as
generic indentier for applications instead of the current "title" only.
- When it comes to selecting a main fund name, should use priorities
name of the "round" or name of the "fund" from which the round is
derived.

## Internal changes

Included `fund_name` and `application_id` on both the submission and
project instance to easily access them, while abstracting the complexity
around fallback on submission.id when the `submission.public_id` is
missing
diff --git a/hypha/apply/activity/templates/activity/notifications.html b/hypha/apply/activity/templates/activity/notifications.html
@@ -35,7 +35,7 @@
                             <div class="relative timeline-item" id="communications#{{ activity.id }}">
                                 {% ifchanged activity.source.id %}
                                     <div class="py-0.5 mt-4 bg-gray-100 ps-5 pe-2 border-s-2 border-slate-300">
-                                        <span class="text-sm font-semibold text-fg-muted">{{ activity.source_content_type.name|source_type }}</span> <a href="{{ activity.source.get_absolute_url }}">{{ activity.source.title|capfirst }}</a>
+                                        <span class="text-sm font-semibold text-fg-muted">{{ activity.source_content_type.name|source_type }}</span> <a href="{{ activity.source.get_absolute_url }}">{{ activity.source.fund_name }} #{{ activity.source.application_id }}: {{ activity.source.title|capfirst|truncatechars:50 }}</a>
                                     </div>
                                 {% endifchanged %}
                                 <div
diff --git a/hypha/apply/activity/templates/messages/email/batch_ready_to_review.html b/hypha/apply/activity/templates/messages/email/batch_ready_to_review.html
@@ -6,7 +6,7 @@
 {% block content %}{# fmt:off #}
 {% trans "New applications have been added to your review list." %}
 {% for submission in sources %}
-{% trans "ID" %}: {{ submission.public_id|default:submission.id }}
+{% trans "ID" %}: {{ submission.application_id }}
 {% trans "Title" %}: {{ submission.title }}
 {% trans "Link" %}: {{ request.scheme }}://{{ request.get_host }}{{ submission.get_absolute_url }}
 {% endfor %}
diff --git a/hypha/apply/activity/templates/messages/email/partners_update_applicant.html b/hypha/apply/activity/templates/messages/email/partners_update_applicant.html
@@ -6,7 +6,7 @@
 {% for partner in added %}
     * {{ partner }}
 {% endfor %}
-{% trans "ID" %}: {{ source.public_id|default:source.id }}
+{% trans "ID" %}: {{ source.application_id }}
 {% trans "Title" %}: {{ source.title }}
 {% trans "Link" %}: {{ request.scheme }}://{{ request.get_host }}{{ source.get_absolute_url }}
 {% endblock %}{# fmt:on #}
diff --git a/hypha/apply/activity/templates/messages/email/partners_update_partner.html b/hypha/apply/activity/templates/messages/email/partners_update_partner.html
@@ -6,7 +6,7 @@
 {% block content %}{# fmt:off #}
 {% trans "You have been added as a partner the following submission." %}
 
-{% trans "ID" %}: {{ source.public_id|default:source.id }}
+{% trans "ID" %}: {{ source.application_id }}
 {% trans "Title" %}: {{ source.title }}
 {% trans "Link" %}: {{ request.scheme }}://{{ request.get_host }}{{ source.get_absolute_url }}
 {% endblock %}{# fmt:on #}
diff --git a/hypha/apply/activity/templates/messages/email/submission_confirmation.html b/hypha/apply/activity/templates/messages/email/submission_confirmation.html
@@ -15,7 +15,7 @@
 
 {% with email_context=source.page.specific %}{{ email_context.confirmation_text_extra }}{% endwith %}
 
-{% trans "Project ID" %}: {{ source.public_id|default:source.id }}
+{% trans "Project ID" %}: {{ source.application_id }}
 {% trans "Project name" %}: {{ source.title }}
 {% trans "Contact name" %}: {{ source.user.get_full_name }}
 {% trans "Contact email" %}: {{ source.user.email }}
diff --git a/hypha/apply/dashboard/templates/dashboard/community_dashboard.html b/hypha/apply/dashboard/templates/dashboard/community_dashboard.html
@@ -52,7 +52,7 @@ <h2 class="mb-2 text-xl">
                                 <h3 class="text-base font-bold heading heading--no-margin">
                                     <a class="{% if not submission.is_active %} text-slate-500 {% endif %} hover:underline" href="{% url 'funds:submissions:detail' submission.id %}">
                                         {{ submission.title }}
-                                        <span class="text-gray-400">#{{ submission.public_id|default:submission.id }}</span>
+                                        <span class="text-gray-400">#{{ submission.application_id }}</span>
                                     </a>
                                 </h3>
                                 <p class="text-sm heading heading--no-margin text-fg-muted">
diff --git a/hypha/apply/dashboard/templates/dashboard/includes/my-tasks.html b/hypha/apply/dashboard/templates/dashboard/includes/my-tasks.html
@@ -1,13 +1,13 @@
 {% load i18n %}
 
-<div class="mx-auto mb-10 max-w-3xl" id="task-list" hx-swap-oob="true">
+<section class="mx-auto mb-10 max-w-4xl" id="task-list" hx-swap-oob="true">
     {% if my_tasks.data %}
         <h2 class="font-light text-center">{% trans "My tasks" %}</h2>
 
         <div class="border divide-y shadow-xs task--list">
             {% for task in my_tasks.data %}
-                {% include "todo/todolist_item.html" with button_type_class="button--transparent" %}
+                {% include "todo/todolist_item.html" %}
             {% endfor %}
         </div>
     {% endif %}
-</div>
+</section>
diff --git a/hypha/apply/dashboard/templates/dashboard/partials/applicant_submissions.html b/hypha/apply/dashboard/templates/dashboard/partials/applicant_submissions.html
@@ -8,7 +8,7 @@
                 <h4 class="mb-0 font-bold heading line-clamp-3 hover:line-clamp-none">
                     <a class="{% if not submission.is_active %} text-slate-500 {% endif %} hover:underline" href="{% url 'funds:submissions:detail' submission.id %}">
                         {{ submission.title }}
-                        <span class="text-gray-400">#{{ submission.public_id|default:submission.id }}</span>
+                        <span class="text-gray-400">#{{ submission.application_id }}</span>
                     </a>
                 </h4>
                 <p class="m-0 mb-4 text-sm text-fg-muted">
diff --git a/hypha/apply/determinations/templates/determinations/determination_detail.html b/hypha/apply/determinations/templates/determinations/determination_detail.html
@@ -7,12 +7,14 @@
     {% adminbar %}
         {% slot back_link %}
             <a class="admin-bar__back-link" href="{{ determination.submission.get_absolute_url }}">
-                {% trans "View submission" %}
+                {% trans "View application" %}
             </a>
         {% endslot %}
 
         {% slot header %} {% trans "Determination" %} {% if determination.is_draft %}[{% trans "DRAFT" %}] {% endif %}{% endslot %}
-        {% slot sub_heading %}{% trans "For" %} <a class="text-blue-300 hover:underline" href="{% url "funds:submissions:detail" determination.submission.id %}">{{ determination.submission.title_text_display }}</a>{% endslot %}
+        {% slot sub_heading %}
+            {% trans "For" %} <a class="text-blue-300 hover:underline" href="{% url "funds:submissions:detail" determination.submission.id %}">{{ determination.submission.title_text_display }}</a>
+        {% endslot %}
 
     {% endadminbar %}
 
diff --git a/hypha/apply/determinations/templates/determinations/includes/determination_button.html b/hypha/apply/determinations/templates/determinations/includes/determination_button.html
@@ -1,6 +1,9 @@
 {% load i18n determination_tags workflow_tags %}
 {% if request.user|show_determination_button:submission %}
-    <a target="_blank" href="{% url 'apply:submissions:determinations:form' submission_pk=submission.id %}" class="button button--primary button--full-width {{ class }}">
+    <a
+        href="{% url 'apply:submissions:determinations:form' submission_pk=submission.id %}"
+        class="button button--primary button--full-width {{ class }}"
+    >
         {% if submission.determinations.last.is_draft %}
             {% if draft_text %}
                 {{ draft_text }}
diff --git a/hypha/apply/funds/management/commands/export_submissions_csv.py b/hypha/apply/funds/management/commands/export_submissions_csv.py
@@ -64,7 +64,7 @@ def handle(self, *args, **options):
                     submission_value = 0
                 writer.writerow(
                     [
-                        submission.public_id or submission.id,
+                        submission.application_id,
                         submission.title,
                         submission.full_name,
                         submission.email,
diff --git a/hypha/apply/funds/models/submissions.py b/hypha/apply/funds/models/submissions.py
@@ -27,6 +27,7 @@
 from django.dispatch import receiver
 from django.urls import reverse
 from django.utils import timezone
+from django.utils.functional import cached_property
 from django.utils.html import strip_tags
 from django.utils.text import slugify
 from django.utils.translation import gettext_lazy as _
@@ -518,9 +519,13 @@ def title_text_display(self):
 
         Use SUBMISSION_TITLE_TEXT_TEMPLATE setting to change format.
         """
+
         ctx = {
             "title": self.title,
-            "public_id": self.public_id or self.id,
+            "public_id": self.application_id,
+            "fund_name": self.fund_name,
+            "round": self.round if self.round else self.page,
+            "application_id": self.application_id,
         }
         return strip_tags(settings.SUBMISSION_TITLE_TEXT_TEMPLATE.format(**ctx))
 
@@ -600,6 +605,14 @@ def get_from_parent(self, attribute):
             # We are a lab submission
             return getattr(self.page.specific, attribute)
 
+    @cached_property
+    def fund_name(self):
+        return self.page
+
+    @cached_property
+    def application_id(self):
+        return self.public_id or self.id
+
     @property
     def is_determination_form_attached(self):
         """
@@ -891,7 +904,7 @@ def prepare_search_values(self):
 
     def index_components(self):
         return {
-            "A": " ".join([f"id:{self.public_id or self.id}", self.title]),
+            "A": " ".join([f"id:{self.application_id}", self.title]),
             "C": " ".join([self.full_name, self.email]),
             "B": " ".join(self.get_searchable_contents()),
         }
diff --git a/hypha/apply/funds/templates/funds/applicationsubmission_detail.html b/hypha/apply/funds/templates/funds/applicationsubmission_detail.html
@@ -185,7 +185,7 @@ <h6 class="pb-2 mb-0 font-semibold uppercase border-b text-fg-muted">
                                             {{ submission.title }}
                                         </a>
                                         <div class="text-sm text-fg-muted">
-                                            <span>#{{ submission.public_id|default:submission.id }}</span>
+                                            <span>#{{ submission.application_id }}</span>
                                             <relative-time datetime='{{ submission.submit_time|date:"c" }}'>{{ submission.submit_time|date:"SHORT_DATETIME_FORMAT" }}</relative-time>
                                             in {{ submission.round|default_if_none:submission.page }}
                                             &middot;
diff --git a/hypha/apply/funds/templates/funds/applicationsubmission_form.html b/hypha/apply/funds/templates/funds/applicationsubmission_form.html
@@ -1,11 +1,11 @@
 {% extends "base-apply.html" %}
 {% load i18n static %}
-{% block title %}{% trans "Editing" %}: {% if object.public_id %}{{ object.public_id }}: {% endif %}{{object.title }}{% endblock %}
+{% block title %}{% trans "Editing" %}: {{ object.application_id }}: {{object.title }}{% endblock %}
 {% block body_class %}bg-white{% endblock %}
 
 {% block content %}
     {% adminbar %}
-        {% slot header %}{% trans "Editing" %}: {{ object.title }} <span class="text-gray-400">#{{ object.public_id|default:object.id }}</span>{% endslot %}
+        {% slot header %}{% trans "Editing" %}: {{ object.title }} <span class="text-gray-400">#{{ object.application_id }}</span>{% endslot %}
     {% endadminbar %}
 
     {% include "forms/includes/form_errors.html" with form=form %}
diff --git a/hypha/apply/funds/templates/funds/includes/application_header.html b/hypha/apply/funds/templates/funds/includes/application_header.html
@@ -1,16 +1,19 @@
 {% load i18n statusbar_tags %}
 
 <h1 class="mb-0 font-medium">
-    <span id="app-title">{{ object.title }}</span><span class="text-gray-400"> #{{ object.public_id|default:object.id }}</span>
+    <span id="app-title">{{ object.title }}</span>
+    <span class="text-gray-400">#{{ object.application_id }}</span>
 </h1>
 
 <div class="mt-1 text-sm font-medium heading heading--meta">
-    <span>{{ object.stage }}</span>
-    <span>{{ object.page }}</span>
+    <span>
+        {{ object.page }}
+    </span>
+
     {% if object.round %}
         {% if request.user.is_apply_staff %}
             <span>
-                <a class="text-white underline"
+                <a class="text-white hover:underline"
                    href="{% url 'apply:submissions:list' %}?round={{ object.round.pk }}"
                 >{{ object.round }}</a>
             </span>
@@ -19,6 +22,8 @@ <h1 class="mb-0 font-medium">
         {% endif %}
     {% endif %}
 
+    <span>{{ object.stage }}</span>
+
     <span
         hx-get="{% url "apply:submissions:partial-get-lead" object.id %}"
         hx-trigger="load, leadUpdated from:body"
diff --git a/hypha/apply/funds/templates/funds/includes/submission-list-row.html b/hypha/apply/funds/templates/funds/includes/submission-list-row.html
@@ -71,7 +71,7 @@
 
         <div class="pt-1">
             <p class="m-0 text-xs">
-                #{{ s.public_id|default:s.id }}
+                #{{ s.application_id }}
                 submitted <relative-time datetime="{{ s.submit_time|date:"c" }}">{{ s.submit_time|date:"SHORT_DATE_FORMAT" }}</relative-time>
                 {% if s|show_applicant_identity:request.user %}by <a
                     href="{% url "apply:submissions:list" %}{% modify_query "only_query_string" "page" applicants=s.user.id %}"
diff --git a/hypha/apply/funds/templates/funds/includes/submission-table-row.html b/hypha/apply/funds/templates/funds/includes/submission-table-row.html
@@ -46,7 +46,7 @@
             class="text-base font-semibold break-words transition-colors hover:text-blue-600 text-[#404041] line-clamp-2"
         >{{ s.form_data.title }}</a>
         <div class="text-xs text-fg-muted">
-            #{{ s.public_id|default:s.id }}
+            #{{ s.application_id }}
             submitted <relative-time datetime="{{ s.submit_time|date:"c" }}">{{ s.submit_time|date:"SHORT_DATE_FORMAT" }}</relative-time>
             • {{ s.stage }}
             {% if s.project %}
diff --git a/hypha/apply/funds/templates/submissions/partials/submission-lead.html b/hypha/apply/funds/templates/submissions/partials/submission-lead.html
@@ -1,11 +1,11 @@
 {% load i18n heroicons %}
 {% if request.user.is_apply_staff %}
-    <a class="transition-opacity hover:opacity-70 is-active"
+    <a class="flex items-center text-blue-400 transition-opacity hover:opacity-80 is-active"
        href="{% url 'funds:submissions:lead_update' pk=submission.pk %}"
        hx-get="{% url 'funds:submissions:lead_update' pk=submission.pk %}"
        hx-target="#htmx-modal"
     >
-        <u>{% trans "Lead" %}: {{ submission.lead }}</u>
+        {% trans "Lead" %}: {{ submission.lead }}
         {% heroicon_micro "pencil-square" class="inline ms-1" aria_hidden=true %}
     </a>
 {% elif request.user.is_org_faculty or not HIDE_STAFF_IDENTITY %}
diff --git a/hypha/apply/funds/templates/submissions/partials/submission-title.html b/hypha/apply/funds/templates/submissions/partials/submission-title.html
@@ -1 +1 @@
-<h1 class="mb-0 font-medium">{{ object.title }}<span class="text-gray-400"> #{{ object.public_id|default:object.id }}</span></h1>
+<h1 class="mb-0 font-medium">{{ object.title }}<span class="text-gray-400"> #{{ object.application_id }}</span></h1>
diff --git a/hypha/apply/funds/templatetags/submission_tags.py b/hypha/apply/funds/templatetags/submission_tags.py
@@ -20,8 +20,8 @@ def submission_links(value):
             Q(id__in=numeric_ids) | Q(public_id__in=matches)
         )
         for submission in qs:
-            links[rf"\#{submission.public_id or submission.id}"] = (
-                f'<a href="{submission.get_absolute_url()}">{submission.title} <span class="text-gray-400">#{submission.public_id or submission.id}</span></a>'
+            links[f"#{submission.application_id}"] = (
+                f'<a href="{submission.get_absolute_url()}">{submission.title_text_display}</a>'
             )
 
     if links:
diff --git a/hypha/apply/funds/tests/test_tags.py b/hypha/apply/funds/tests/test_tags.py
@@ -15,17 +15,15 @@ def test_markdown_tags(self):
         )
 
     def test_submission_tags(self):
-        submission = ApplicationSubmissionFactory()
+        submission = ApplicationSubmissionFactory(public_id="S123")
         template = Template(
             "{% load submission_tags %}{{ content|submission_links|safe }}"
         )
-        context = Context(
-            {"content": f"Lorem ipsum dolor #{submission.public_id} sit amet."}
-        )
+        context = Context({"content": "Lorem ipsum dolor #S123 sit amet."})
         output = template.render(context)
         assert (
             output
-            == f'Lorem ipsum dolor <a href="{submission.get_absolute_url()}">{submission.title} <span class="text-gray-400">#{submission.public_id or submission.id}</span></a> sit amet.'
+            == f'Lorem ipsum dolor <a href="{submission.get_absolute_url()}">{submission.title_text_display}</a> sit amet.'
         )
 
     @override_settings(APPLICATION_TRANSLATIONS_ENABLED=True)
diff --git a/hypha/apply/projects/models/project.py b/hypha/apply/projects/models/project.py
@@ -25,6 +25,7 @@
 from django.dispatch.dispatcher import receiver
 from django.urls import reverse
 from django.utils import timezone
+from django.utils.functional import cached_property
 from django.utils.translation import gettext_lazy as _
 from modelcluster.fields import ParentalKey, ParentalManyToManyField
 from modelcluster.models import ClusterableModel
@@ -308,6 +309,14 @@ def __str__(self):
     def status_display(self):
         return self.get_status_display()
 
+    @cached_property
+    def fund_name(self):
+        return self.submission.fund_name
+
+    @cached_property
+    def application_id(self):
+        return self.submission.application_id
+
     def get_address_display(self):
         return ""  # todo: need to figure out
 
diff --git a/hypha/apply/projects/templates/application_projects/includes/project_header.html b/hypha/apply/projects/templates/application_projects/includes/project_header.html
@@ -9,7 +9,7 @@
 </h1>
 
 <div class="mt-1 text-sm font-medium heading heading--meta">
-    <span>{{ object.submission.page }}</span>
+    <span>{{ object.fund_name }}</span>
 
     {% if object.submission.round %}
         {% if request.user.is_apply_staff %}
diff --git a/hypha/apply/projects/templates/application_projects/partials/project_title.html b/hypha/apply/projects/templates/application_projects/partials/project_title.html
@@ -1,7 +1,7 @@
 {% load heroicons i18n %}
 
 <span id="app-title">{{ object.title }}</span>
-<span class="text-gray-400">#{{ object.submission.public_id|default:object.submission.id }}</span>
+<span class="text-gray-400">#{{ object.submission.application_id }}</span>
 
 {% if request.user.is_apply_staff %}
     <a class="transition-opacity hover:opacity-70 is-active"
diff --git a/hypha/apply/projects/templates/application_projects/report_detail.html b/hypha/apply/projects/templates/application_projects/report_detail.html
@@ -10,7 +10,7 @@
                 {% trans "View project page" %}
             </a>
         {% endslot %}
-        {% slot header %}{{ object.project.title }} <span class="text-gray-400">#{{ object.project.submission.public_id|default:object.project.submission.id }}</span>{% endslot %}
+        {% slot header %}{{ object.project.title }} <span class="text-gray-400">#{{ object.project.application_id }}</span>{% endslot %}
         {% slot sub_heading %}{% trans "Report" %}{% endslot %}
     {% endadminbar %}
 
diff --git a/hypha/apply/review/templates/review/includes/review_button.html b/hypha/apply/review/templates/review/includes/review_button.html
@@ -1,7 +1,7 @@
 {% load i18n review_tags workflow_tags %}
 {% if request.user|has_review_perm:submission %}
     {% if request.user|has_draft:submission or request.user|can_review:submission %}
-        <a target="_blank" href="{% url 'apply:submissions:reviews:form' submission_pk=submission.id %}" class="button button--primary {{ class }}">
+        <a href="{% url 'apply:submissions:reviews:form' submission_pk=submission.id %}" class="button button--primary {{ class }}">
             {% if request.user|has_draft:submission %}
                 {{ draft_text|default:"Update draft" }}
             {% elif request.user|can_review:submission %}
diff --git a/hypha/apply/review/templates/review/review_detail.html b/hypha/apply/review/templates/review/review_detail.html
@@ -6,12 +6,12 @@
     {% adminbar %}
         {% slot back_link %}
             <a class="admin-bar__back-link" href="{{ review.submission.get_absolute_url }}">
-                {% trans "View submission" %}
+                {% trans "View application" %}
             </a>
         {% endslot %}
         {% slot header %}{% trans "Review" %}{% endslot %}
         {% slot sub_heading %}
-            {% trans "For" %}: {{ review.submission.title }} {% trans "by" %}
+            {% trans "For" %} {{ review.submission.title_text_display }} {% trans "by" %}
             {% if HIDE_STAFF_IDENTITY and not request.user.is_org_faculty and not request.user == review.author.reviewer %}
                 {% trans "Reviewer" %}
             {% else %}
diff --git a/hypha/apply/review/templates/review/review_form.html b/hypha/apply/review/templates/review/review_form.html
@@ -12,7 +12,7 @@
     {% adminbar %}
         {% slot header %}{{ title }}{% endslot %}
         {% slot sub_heading %}
-            {% trans "For" %} <a class="text-blue-300 hover:underline" href="{% url "funds:submissions:detail" submission.id %}">{{ submission.title }}</a>
+            <a class="text-gray-200 hover:underline" href="{% url "funds:submissions:detail" submission.id %}">{{ submission.title_text_display }}</a>
         {% endslot %}
         {% slot buttons %}
             <button
diff --git a/hypha/apply/todo/options.py b/hypha/apply/todo/options.py
diff --git a/hypha/apply/todo/templates/todo/todolist_dropdown.html b/hypha/apply/todo/templates/todo/todolist_dropdown.html
diff --git a/hypha/apply/todo/templates/todo/todolist_item.html b/hypha/apply/todo/templates/todo/todolist_item.html
diff --git a/hypha/apply/todo/views.py b/hypha/apply/todo/views.py
diff --git a/hypha/core/templates/components/admin_bar.html b/hypha/core/templates/components/admin_bar.html
diff --git a/hypha/settings/base.py b/hypha/settings/base.py
