refactor frontend - pr911

.github/workflows/ci.yml

@@ -0,0 +1,68 @@
+name: CI
+
+on:
+  workflow_dispatch:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        python-version: ["3.10", "3.11", "3.12", "3.13"]
+        node-version: ["24.x"]
+    env:
+      PLUGIN_API: true
+      DJANGO_VITE_DEV_MODE: true
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install uv and set the python version
+        uses: astral-sh/setup-uv@v5
+        with:
+          python-version: ${{ matrix.python-version }}
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install the project
+        run: uv sync --locked --dev
+
+      - name: Install frontend packages
+        run: npm --prefix coldfront/static install
+
+      - name: Check for lint violations
+        run: uv run ruff check
+
+      - name: Check formatting
+        run: uv run ruff format --check
+
+      - name: Check frontend with eslint and prettier
+        run: npm --prefix coldfront/static run check
+
+      - name: Compile and bundle frontend static assets
+        run: npm --prefix coldfront/static run build
+
+      - name: Check bundled frontend static assets have been commited
+        run: |
+          if [[ `git status --porcelain` ]]; then
+            echo "Error: pre-compiled bundled frontend static assets have not been committed"
+            git status
+            exit 1
+          else
+            echo "Bundled frontend static assets check passed."
+          fi
+
+      - name: Check licence with reuse
+        run: uv run reuse lint
+
+      - name: Run tests
+        run: uv run coldfront test
+
+      - name: Check for migrations
+        run: uv run coldfront makemigrations --check

.gitignore

@@ -3,6 +3,7 @@
 coldfront.egg-info
 dist
 build
+.zed/
 *._*
 *.DS_Store
 *.swp
@@ -24,3 +25,4 @@ db.json
 .devcontainer/*
 .bin/*
 coldfront-django.*.log
+node_modules

coldfront/config/base.py

@@ -1,12 +1,20 @@
+# SPDX-FileCopyrightText: (C) ColdFront Authors
+#
+# SPDX-License-Identifier: AGPL-3.0-or-later
+
 """
 Base Django settings for ColdFront project.
 """
 
+import importlib.util
 import os
 import sys
 import coldfront
+
 from django.core.exceptions import ImproperlyConfigured
 from django.core.management.utils import get_random_secret_key
+
+import coldfront
 from coldfront.config.env import ENV, PROJECT_ROOT
 
 # ------------------------------------------------------------------------------
@@ -50,15 +58,13 @@
     "django.contrib.humanize",
 ]
 
-# Additional Apps
-# Hack to fix fontawesome. Will be fixed in version 6
-sys.modules["fontawesome_free"] = __import__("fontawesome-free")
 INSTALLED_APPS += [
     "crispy_forms",
     "crispy_bootstrap4",
     "django_q",
     "simple_history",
-    "fontawesome_free",
+    "django_vite",
+    "django_htmx",
 ]
 
 # ColdFront Apps
@@ -91,6 +97,7 @@
     "django.contrib.messages.middleware.MessageMiddleware",
     "django.middleware.clickjacking.XFrameOptionsMiddleware",
     "simple_history.middleware.HistoryRequestMiddleware",
+    "django_htmx.middleware.HtmxMiddleware",
 ]
 
 # ------------------------------------------------------------------------------
@@ -148,9 +155,20 @@
 SETTINGS_EXPORT = []
 
 STATIC_URL = "/static/"
+
+DJANGO_VITE = {
+    "default": {
+        "dev_mode": ENV.bool("DJANGO_VITE_DEV_MODE", default=False),
+        "dev_server_port": ENV.int("DJANGO_VITE_SERVER_PORT", default=5173),
+        "manifest_path": PROJECT_ROOT("coldfront/static/bundles/manifest.json"),
+    }
+}
+
 STATIC_ROOT = ENV.str("STATIC_ROOT", default=PROJECT_ROOT("static_root"))
 STATICFILES_DIRS = [
-    PROJECT_ROOT("coldfront/static"),
+    PROJECT_ROOT("coldfront/static/bundles"),
+    PROJECT_ROOT("coldfront/static/assets"),
+    PROJECT_ROOT("coldfront/static/branding"),
 ]
 
 # Add local site static files if set

coldfront/config/core.py

@@ -1,3 +1,7 @@
+# SPDX-FileCopyrightText: (C) ColdFront Authors
+#
+# SPDX-License-Identifier: AGPL-3.0-or-later
+
 from coldfront.config.base import SETTINGS_EXPORT
 from coldfront.config.env import ENV
 
@@ -30,6 +34,11 @@
 # ------------------------------------------------------------------------------
 PROJECT_ENABLE_PROJECT_REVIEW = ENV.bool("PROJECT_ENABLE_PROJECT_REVIEW", default=True)
 
+# ------------------------------------------------------------------------------
+# Enable EULA force agreement
+# ------------------------------------------------------------------------------
+ALLOCATION_EULA_ENABLE = ENV.bool("ALLOCATION_EULA_ENABLE", default=False)
+
 # ------------------------------------------------------------------------------
 # Maximum number of projects per PI
 # ------------------------------------------------------------------------------
@@ -69,6 +78,8 @@
     "RESEARCH_OUTPUT_ENABLE",
     "GRANT_ENABLE",
     "PUBLICATION_ENABLE",
+    "RESEARCH_OUTPUT_ENABLE",
+    "DJANGO_VITE",
 ]
 
 ADMIN_COMMENTS_SHOW_EMPTY = ENV.bool("ADMIN_COMMENTS_SHOW_EMPTY", default=True)

coldfront/core/allocation/templates/allocation/allocation_add_users.html

@@ -63,16 +63,4 @@ <h2>Add users to allocation for project: {{allocation.project.title}}</h2>
   </div>
 {% endif %}
 
-<script>
-  $("#selectAll").click(function () {
-    $("input[name^='userform-']").prop('checked', $(this).prop('checked'));
-  });
-
-  $("input[name^='userform-']").click(function (ele) {
-    var id = $(this).attr('id');
-    if ( id != "selectAll") {
-      $("#selectAll").prop('checked', false);
-    }
-  });
-</script>
 {% endblock %}

coldfront/core/allocation/templates/allocation/allocation_allocationattribute_delete.html

@@ -58,16 +58,4 @@ <h2>Delete allocation attributes from allocation for project: {{allocation.proje
   </div>
 {% endif %}
 
-<script>
-  $("#selectAll").click(function () {
-    $("input[name^='attributeform-']").prop('checked', $(this).prop('checked'));
-  });
-
-  $("input[name^='attributeform-']").click(function (ele) {
-    var id = $(this).attr('id');
-    if (id != "selectAll") {
-      $("#selectAll").prop('checked', false);
-    }
-  });
-</script>
 {% endblock %}

coldfront/core/allocation/templates/allocation/allocation_change.html

@@ -21,7 +21,7 @@ <h2>Request change to {{ allocation.get_parent_resource }} for project: {{ alloc
 <form action="{% url 'allocation-change' allocation.pk %}" method="post">
   <div class="card mb-3">
     <div class="card-header">
-        <h3><i class="fas fa-list" aria-hidden="true"></i> Allocation Information</h3>   
+        <h3><i class="fas fa-list" aria-hidden="true"></i> Allocation Information</h3>
     </div>
 
     <div class="card-body">
@@ -132,6 +132,4 @@ <h3 class="d-inline"><i class="fas fa-info-circle" aria-hidden="true"></i> Alloc
     </div>
 </form>
 
-<script>
-</script>
 {% endblock %}

coldfront/core/allocation/templates/allocation/allocation_change_detail.html

@@ -114,7 +114,7 @@ <h3 class="d-inline"><i class="fas fa-list" aria-hidden="true"></i> Allocation I
     </div>
   </div>
 
-  
+
   <div class="card mb-3">
     <div class="card-header">
       <h3 class="d-inline"><i class="fas fa-info-circle" aria-hidden="true"></i> Allocation Attributes</h3>
@@ -210,10 +210,16 @@ <h3 class="d-inline"><i class="fas fa-info-circle" aria-hidden="true"></i> Actio
   {% endif %}
   <br>
 
+{% endblock %}
+
+{% block javascript %}
+{{ block.super }}
 <script>
+document.addEventListener('DOMContentLoaded', function() {
   $(document).on('click', '.confirm-delete', function(){
       return confirm('Are you sure you want to delete this requested allocation attribute change?');
   })
+});
 </script>
 {% endblock %}
 

coldfront/core/allocation/templates/allocation/allocation_change_list.html

@@ -14,7 +14,7 @@ <h2>Allocation Change Requests</h2>
 
 <hr>
 
-<p class="text-justify"> 
+<p class="text-justify">
   For each allocation change request below, there is the option to activate the allocation request and to view the allocation change's detail page.
   If a change request is only for an extension to the allocation, they can be approved on this page. However if the change request includes changes to
   the allocation's attributes, the request must be reviewed and acted upon in its detail page.
@@ -51,7 +51,7 @@ <h2>Allocation Change Requests</h2>
             <td class="text-nowrap">
                 <form method="post" action="{% url 'allocation-change-detail' change.pk %}">
               {% if change.allocationattributechangerequest_set.all %}
-                <button class="btn btn-success mr-1" aria-disabled="true" 
+                <button class="btn btn-success mr-1" aria-disabled="true"
                 style="
                       cursor: not-allowed;
                       opacity: 0.6;
@@ -77,9 +77,4 @@ <h2>Allocation Change Requests</h2>
   </div>
 {% endif %}
 
-<script>
-  $("#navbar-main > ul > li.active").removeClass("active");
-  $("#navbar-admin").addClass("active");
-  $("#navbar-allocation-change-requests").addClass("active");
-</script>
 {% endblock %}

coldfront/core/allocation/templates/allocation/allocation_create.html

@@ -66,13 +66,26 @@ <h5 class="modal-title" id="exampleModalLabel">Add New Account Name</h5>
   </div>
 </div>
 
+{{ resources_form_default_quantities|json_script:"resources-form-default-quantities" }}
+{{ resources_form_descriptions|json_script:"resources-form-description" }}
+{{ resources_form_label_texts|json_script:"resources-form-label-texts" }}
+{{ resources_with_accounts|json_script:"resources-with-accounts" }}
+{{ resources_with_eula|json_script:"resources-with-eula" }}
+
+{% endblock %}
+
+{% block javascript %}
+{{ block.super }}
 <script>
-  var resources_form_default_quantities = {{ resources_form_default_quantities | safe }};
-  var resources_form_label_texts = {{ resources_form_label_texts | safe }};
-  var resources_with_accounts = {{ resources_with_accounts | safe }};
-  var resources_with_eula = {{ resources_with_eula | safe }};
+document.addEventListener('DOMContentLoaded', function() {
+  var resources_form_default_quantities = JSON.parse(document.getElementById('resources-form-default-quantities').textContent);
+  var resources_form_description = JSON.parse(document.getElementById('resources-form-description').textContent);
+  var resources_form_label_texts = JSON.parse(document.getElementById('resources-form-label-texts').textContent);
+  var resources_with_accounts = JSON.parse(document.getElementById('resources-with-accounts').textContent);
+  var resources_with_eula = JSON.parse(document.getElementById('resources-with-eula').textContent);
 
   $(document).ready(function () {
+    $('<p id="resource_description"></p>').insertAfter($("#div_id_resource"))
     $('<br><input id="selectAll" class="check" type="checkbox"> <strong>Select All Users</strong>').insertAfter($("#div_id_users > label"))
     $("#id_resource").trigger('change');
 
@@ -88,21 +101,6 @@ <h5 class="modal-title" id="exampleModalLabel">Add New Account Name</h5>
     });
   });
 
-  function getCookie(name) {
-    var cookieValue = null;
-    if (document.cookie && document.cookie != '') {
-      var cookies = document.cookie.split(';');
-      for (var i = 0; i < cookies.length; i++) {
-        var cookie = jQuery.trim(cookies[i]);
-        // Does this cookie string begin with the name we want?
-        if (cookie.substring(0, name.length + 1) == (name + '=')) {
-          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-          break;
-        }
-      }
-    }
-    return cookieValue;
-  }
   $('#modal_link').on("click", function () {
     $('#Modal').modal('show');
   });
@@ -140,6 +138,14 @@ <h5 class="modal-title" id="exampleModalLabel">Add New Account Name</h5>
 
   $("#id_resource").change(function () {
     var resource_id = $("#id_resource option:selected").val();
+    if (resources_form_description[resource_id]) {
+      $('#resource_description').html(resources_form_description[resource_id])
+      $('#resource_description').show()
+    } else {
+      $('#resource_description').html("")
+      $('#resource_description').hide()
+    }
+
     if (resources_form_default_quantities[resource_id]) {
       var label = $('label[for="id_quantity"]');
       if (resources_form_label_texts[resource_id]) {
@@ -169,5 +175,6 @@ <h5 class="modal-title" id="exampleModalLabel">Add New Account Name</h5>
       $('#eula-div').hide();
     }
   });
+});
 </script>
 {% endblock %}

coldfront/core/allocation/templates/allocation/allocation_delete_invoice_note.html

@@ -49,15 +49,4 @@ <h3>Delete invoice notes for allocation to {{allocation.get_resources_as_string}
   </div>
 </div>
 
-<script>
-  $("#selectAll").click(function () {
-    $("input[name^='noteform-']").prop('checked', $(this).prop('checked'));
-  });
-  $("input[name^='noteform-']").click(function (ele) {
-    var id = $(this).attr('id');
-    if (id != "selectAll") {
-      $("#selectAll").prop('checked', false);
-    }
-  });
-</script>
 {% endblock %}