[Bug]: Django built-in widgets don't load in the admin

[diox]

What happened?

Django admin provides a few fancy widgets for some fields, notably date & time. These are broken in our admin.

To reproduce:

• Load any page with an editable DateTimeField (for instance, if you have *:*, you should be able to edit the noindex_until field on add-ons at the bottom of an add-on change page)
• Notice the date&time fields are present but you have to manually enter the date/time string

This possibly affects more fields, but this is especially noticeable for date&time.

What did you expect to happen?

• You should be able to change the date&time through a widget

Is there an existing issue for this?

• I have searched the existing issues

┆Issue is synchronized with this Jira Task

[diox]

This is because of the following error:

Uncaught ReferenceError: gettext is not defined
    <anonymous> http://olympia.test/static-server/admin/js/calendar.js:11

Uncaught ReferenceError: gettext_noop is not defined
    <anonymous> http://olympia.test/static-server/admin/js/admin/DateTimeShortcuts.js:13

Which in turn is caused by the CSP preventing to load /en-US/admin/models/jsi18n/.

Potential fixes to investigate:

Provide fake implementations to the functions jsi18n would add to the global namespace: pluralidx, gettext, ngettext, gettext_noop, pgettext, npgettext, interpolate, get_format. Problem is, that needs to happen before the built-in JavaScript files from django admin are loaded, so if we were to just add those to our admin vite bundle that's not enough on its own, because it gets loaded to late. Would likely need to adjust the template maybe to work around this.

OR

Fix the CSP just for the admin to allow /en-US/admin/models/jsi18n/ to load. There are at least 2 problems with that: 1) Need to add decorator_include, because our own super old urlconf_decorator doesn't seem to work for the admin. 2) The CSP needs the full URL, so we need to pass a lazy string to csp_udpate() and that doesn't work, might need to patch django-csp. Note that we're also one version behind.

OR

Use our HTML5DateInput, HTML5DateTimeInput widgets instead of django's in every admin. Obviously that wouldn't fix the issue for other fields, but may be enough for the most problematic ones. Note that the field is actually a SplitDateTimeField, so either that would need to change, or both date & time widgets need to be set separately (which is trivial to do but we don't have support for yet).

[diox]

Example for the second potential fix that works but hardcodes the string, so that's not good enough:

diff --git a/src/olympia/zadmin/urls.py b/src/olympia/zadmin/urls.py
index 4ed49ac69a..5f72fb819f 100644
--- a/src/olympia/zadmin/urls.py
+++ b/src/olympia/zadmin/urls.py
@@ -1,6 +1,12 @@
 from django.contrib import admin
 from django.shortcuts import redirect
-from django.urls import include, re_path
+from django.urls import re_path
+
+from csp.decorators import csp_update
+from decorator_include import decorator_include
+
+
+csp_admin = csp_update(SCRIPT_SRC=('http://olympia.test/en-US/admin/models/jsi18n/'))
 
 
 urlpatterns = [
@@ -9,6 +15,10 @@ urlpatterns = [
     # The Django admin.
     re_path(
         r'^models/',
-        include((admin.site.get_urls(), 'admin'), namespace=admin.site.name),
+        decorator_include(
+            csp_admin,
+            (admin.site.get_urls(), 'admin'),
+            namespace=admin.site.name,
+        ),
     ),
 ]

[diox]

This is also why when you tick checkboxes in the changelist like on the user admin, the count of items selected doesn't update and stays at 0. The third solution in my comment above would not address that.

[diox]

This is getting in my way for several admin improvements so I'm taking it. With the latest django-csp it's slightly easier to fix by customizing the middleware.