Migrate alert management to Wagtail #1174

hancush · 2024-11-22T16:01:57Z

Overview

See title. Connects #1175.

Demo

Testing Instructions

Credentials for the datamade user are in Bitwarden under LA Metro Wagtail User - Staging

Using the review app, add some alerts with various rich text elements. Confirm they appear on the site as expected.
Also confirm that there's a link to manage alerts in the Wagtail userbar in the bottom left.

hancush · 2024-11-22T16:04:54Z

lametro/models/cms.py

+        FieldPanel("description", widget=MarkdownTextarea),
+    ]
+
+    def content(self):


The ModelAdmin can render custom model methods in the list display. This method renders the alert description and adds a styled label for the alert type.

Ah neat, and TIL format_html and expand_db_html are useful tools to return db stored html

hancush · 2024-11-22T16:05:55Z

lametro/models/legislative.py

@@ -1237,17 +1237,3 @@ def __str__(self):

        else:
            return self.name
-
-
-class Alert(models.Model):


Migrated verbatim to models/cms.py.

hancush · 2024-11-22T16:06:37Z

lametro/static/css/wagtail_custom.css

@@ -0,0 +1,53 @@
+[class*="alert"] {


Low key obsessed with CSS variables.

Did some reading up on this and oh yea I can totally see why 👀

hancush · 2024-11-22T16:08:11Z

lametro/static/js/wagtail_custom.js

+// Callback function to execute when mutations are observed
+const styleAlertTypeSelect = (mutationList, observer) => {
+	mutationList.map(mu => {
+		mu.addedNodes && mu.addedNodes.forEach(node => {
+			if (node.id === "id_type") {
+				styleParent({target: node})
+				node.addEventListener("change", styleParent)
+				observer.disconnect()
+				return
+			}
+		})
+	})
+};
+
+// Create an observer instance linked to the callback function
+const observer = new MutationObserver(styleAlertTypeSelect);
+
+const config = {childList: true, subtree: true};
+
+// Start observing the target node for configured mutations
+observer.observe(document.body, config);


This whole rigamarole is necessary because Wagtail adds form fields to the DOM in JavaScript. In order to update the alert type select, we have to wait for it to show up, give it an initial style, then add an event listener for changes. The MutationObserver API is pretty dope: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

h/t to @xmedr for this UI!

Ah so is the mutation observer being used here mostly because we can't attach an event listener the usual way since the selector doesn't exist yet?

hancush · 2024-11-22T16:09:14Z

lametro/templates/base.html

@@ -115,6 +97,8 @@
            {% endblock %}
        </main>

+        {% wagtailuserbar 'bottom-left' %}


Replaces conditional admin link in top nav.

Since they'll have to sign in to wagtail to manage the alerts after this, would it be useful to change up the Metro Login link in the footer? Maybe by making it link to the wagtail login instead. That is, as long as logging in through wagtail would still allow them to manage things like manual broadcast links or events that don't appear in legistar, which I imagine it would.

If we think yes, then I can take care of it when I branch off of this!

(Also something to consider in the future is whether wagtail should also somehow manage manual broadcasts.)

Oh, good idea. Yes!

hancush · 2024-11-22T16:09:59Z

lametro/wagtail_hooks.py

+        )
+
+
+@hooks.register("construct_wagtail_userbar")


https://docs.wagtail.org/en/v5.2.7/reference/hooks.html#construct-wagtail-userbar

hancush · 2024-11-22T16:10:54Z

lametro/wagtail_hooks.py

+    return format_html('<script src="{}"></script>', static("js/wagtail_custom.js"))
+
+
+@hooks.register("insert_global_admin_css", order=500)


https://docs.wagtail.org/en/v5.2.7/reference/hooks.html#insert-global-admin-css

hancush · 2024-11-22T16:11:17Z

lametro/wagtail_hooks.py

+    return items
+
+
+@hooks.register("insert_global_admin_js", order=100)


https://docs.wagtail.org/en/v5.2.7/reference/hooks.html#insert-global-admin-js

hancush · 2024-11-22T16:35:53Z

.pre-commit-config.yaml

@@ -15,5 +15,5 @@ repos:
    rev: '9f60881'
    hooks:
      - id: flake8
-        files: lametro councilmatic tests
+        files: ^(lametro|councilmatic|tests)


TRICKY LITTLE BUGGER

xmedr

This works great! Do you think it'd be worth to add a border to the type select? I had trouble noticing it at first with a light theme and nothing selected (pic below). Otherwise, I've just got a couple questions inline.

xmedr · 2024-12-05T14:38:52Z

lametro/models/cms.py

+        FieldPanel("description", widget=MarkdownTextarea),
+    ]
+
+    def content(self):


Ah neat, and TIL format_html and expand_db_html are useful tools to return db stored html

xmedr · 2024-12-05T15:01:02Z

lametro/static/css/wagtail_custom.css

@@ -0,0 +1,53 @@
+[class*="alert"] {


Did some reading up on this and oh yea I can totally see why 👀

xmedr · 2024-12-05T15:08:28Z

lametro/templates/base.html

@@ -115,6 +97,8 @@
            {% endblock %}
        </main>

+        {% wagtailuserbar 'bottom-left' %}


Since they'll have to sign in to wagtail to manage the alerts after this, would it be useful to change up the Metro Login link in the footer? Maybe by making it link to the wagtail login instead. That is, as long as logging in through wagtail would still allow them to manage things like manual broadcast links or events that don't appear in legistar, which I imagine it would.

If we think yes, then I can take care of it when I branch off of this!

(Also something to consider in the future is whether wagtail should also somehow manage manual broadcasts.)

xmedr · 2024-12-05T15:20:57Z

lametro/wagtail_hooks.py

+def add_modeladmin_links(request, items):
+    for modeladmin_cls in (AlertAdmin,):
+        items.append(ModelAdminLink(modeladmin_cls))
+    return items


I'm curious why this is a loop, could you talk a bit about that?

Good catch! Factored out.

xmedr · 2024-12-05T15:23:06Z

lametro/static/js/wagtail_custom.js

+// Callback function to execute when mutations are observed
+const styleAlertTypeSelect = (mutationList, observer) => {
+	mutationList.map(mu => {
+		mu.addedNodes && mu.addedNodes.forEach(node => {
+			if (node.id === "id_type") {
+				styleParent({target: node})
+				node.addEventListener("change", styleParent)
+				observer.disconnect()
+				return
+			}
+		})
+	})
+};
+
+// Create an observer instance linked to the callback function
+const observer = new MutationObserver(styleAlertTypeSelect);
+
+const config = {childList: true, subtree: true};
+
+// Start observing the target node for configured mutations
+observer.observe(document.body, config);


Ah so is the mutation observer being used here mostly because we can't attach an event listener the usual way since the selector doesn't exist yet?

xmedr

Awesome, looks good!

xmedr · 2024-12-11T14:22:34Z

lametro/static/css/wagtail_custom.css

+/* Add default border to empty alert select */
+.alert- {
+  border: 1px solid var(--w-color-border-field-default)!important;
+}


Nice, tyty!

hancush commented Nov 22, 2024

View reviewed changes

hancush added 6 commits November 22, 2024 10:25

Transition alerts to Wagtail

153ff8d

Remove custom alert handling

ec69b5f

Clean up custom Wagtail JavaScript

43d43f3

Update styles

42fb606

Remove unused dep

9bf5982

flake8

b9a71e7

hancush force-pushed the hcg/alerts branch from 2b29d86 to b9a71e7 Compare November 22, 2024 16:26

Fix flake8 pre-commit config

2c932b6

hancush commented Nov 22, 2024

View reviewed changes

hancush temporarily deployed to la-metro-cou-hcg-alerts-dpuhsl November 22, 2024 16:35 Inactive

hancush mentioned this pull request Dec 2, 2024

Migrate alert management to CMS #1175

Open

Use rich text instead of markdown for alerts

5f5b541

hancush temporarily deployed to la-metro-cou-hcg-alerts-dpuhsl December 4, 2024 19:32 Inactive

hancush marked this pull request as ready for review December 4, 2024 19:41

hancush requested a review from antidipyramid December 4, 2024 19:41

Add missing migration

d25049a

hancush temporarily deployed to la-metro-cou-hcg-alerts-dpuhsl December 4, 2024 19:43 Inactive

xmedr requested review from xmedr and removed request for antidipyramid December 4, 2024 19:46

xmedr requested changes Dec 5, 2024

View reviewed changes

Update label style for light/dark mode, eliminate unneeded loop

0d35e98

hancush temporarily deployed to la-metro-cou-hcg-alerts-dpuhsl December 10, 2024 19:43 Inactive

Add default border for empty alert select

7df09a2

hancush temporarily deployed to la-metro-cou-hcg-alerts-dpuhsl December 10, 2024 19:45 Inactive

hancush requested a review from xmedr December 10, 2024 19:45

xmedr approved these changes Dec 11, 2024

View reviewed changes

hancush merged commit 4b4cad7 into hcg/wagtail Dec 11, 2024
2 checks passed

hancush deleted the hcg/alerts branch December 11, 2024 14:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migrate alert management to Wagtail #1174

Migrate alert management to Wagtail #1174

hancush commented Nov 22, 2024 •

edited

Loading

hancush Nov 22, 2024 •

edited

Loading

xmedr Dec 5, 2024

hancush Nov 22, 2024

hancush Nov 22, 2024

xmedr Dec 5, 2024

hancush Nov 22, 2024

hancush Nov 22, 2024

xmedr Dec 5, 2024

hancush Dec 10, 2024

hancush Nov 22, 2024

xmedr Dec 5, 2024

hancush Dec 10, 2024

hancush Nov 22, 2024

hancush Nov 22, 2024

hancush Nov 22, 2024

hancush Nov 22, 2024

xmedr left a comment

xmedr Dec 5, 2024

xmedr Dec 5, 2024

xmedr Dec 5, 2024

xmedr Dec 5, 2024

hancush Dec 10, 2024

xmedr Dec 5, 2024

xmedr left a comment

xmedr Dec 11, 2024

		return format_html('<script src="{}"></script>', static("js/wagtail_custom.js"))


		@hooks.register("insert_global_admin_css", order=500)

		return items


		@hooks.register("insert_global_admin_js", order=100)

		)


		@hooks.register("construct_wagtail_userbar")

Migrate alert management to Wagtail #1174

Migrate alert management to Wagtail #1174

Conversation

hancush commented Nov 22, 2024 • edited Loading

Overview

Demo

Testing Instructions

hancush Nov 22, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

xmedr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

xmedr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hancush commented Nov 22, 2024 •

edited

Loading

hancush Nov 22, 2024 •

edited

Loading