HTMX CSQL Fixture UI #35372

esoergel · 2024-11-14T22:26:44Z

Product Description

Technical Summary

Some changes to the CSQL fixture UI to make it use HTMX in a more idiomatic way. I did this a couple months ago and then kinda dropped it. I have a documentation ticket for the feature this sprint, so I'm taking the opportunity to wrap this up too.

https://dimagi.atlassian.net/browse/USH-4962

Feature Flag

CSQL_FIXTURE

Safety Assurance

FF used only by one project

Safety story

Automated test coverage

QA Plan

Rollback instructions

This PR can be reverted after deploy with no further considerations

Labels & Review

Risk label is set correctly
The set of people pinged as reviewers is appropriate for the level of risk of the change

AddisonDunn · 2024-11-15T15:48:45Z

Looks like a great approach, very smooth and simple.

biyeun · 2024-11-20T15:42:26Z

corehq/apps/case_search/templates/case_search/csql_expression_form.html

+<form hx-post="{{ request.path_info }}"
+      hq-hx-action="save_expression"
+      hx-swap="outerHTML"
+      x-data="{ isUnsaved: false }"
+      @change="isUnsaved = true;"
+      @submit="isUnsaved = false;">


Suggested change

<form hx-post="{{ request.path_info }}"

hq-hx-action="save_expression"

hx-swap="outerHTML"

x-data="{ isUnsaved: false }"

@change="isUnsaved = true;"

@submit="isUnsaved = false;">

<form

hx-post="{{ request.path_info }}"

hq-hx-action="save_expression"

hx-swap="outerHTML"

x-data="{ isUnsaved: false }"

@change="isUnsaved = true;"

@submit="isUnsaved = false;"

>

biyeun · 2024-11-20T15:44:28Z

corehq/apps/case_search/templates/case_search/csql_expression_form.html

+      {{ form.csql }}
+    </div>
+    <div class="col-2">
+      <button type="submit" class="btn btn-outline-primary" x-bind:disabled="!isUnsaved">


Suggested change

<button type="submit" class="btn btn-outline-primary" x-bind:disabled="!isUnsaved">

<button

class="btn btn-outline-primary" type="submit"

:disabled="!isUnsaved"

>

I like to always have class be the first attribute

if there is a HTMX or alpine attribute (:bind in this case), we want it on a second line

I prefer shorthand alpine bindings, but could be convinced otherwise?

biyeun · 2024-11-20T15:45:29Z

corehq/apps/case_search/templates/case_search/csql_expression_form.html

+      <button class="btn btn-outline-danger"
+              hx-post="{{ request.path_info }}"
+              hq-hx-action="delete_expression"
+              hx-swap="delete"
+              hx-target="closest form">


Suggested change

<button class="btn btn-outline-danger"

hx-post="{{ request.path_info }}"

hq-hx-action="delete_expression"

hx-swap="delete"

hx-target="closest form">

<button

class="btn btn-outline-danger"

hx-post="{{ request.path_info }}"

hq-hx-action="delete_expression"

hx-swap="delete"

hx-target="closest form"

>

biyeun · 2024-11-20T15:46:52Z

corehq/apps/case_search/templates/case_search/csql_fixture_configuration.html

+  <button type="button"
+          class="btn btn-default"
+          hx-post="{{ request.path_info }}"
+          hq-hx-action="new_expression"
+          hx-target="#csql-fixture-rows"
+          hx-swap="beforeend">


Suggested change

<button type="button"

class="btn btn-default"

hx-post="{{ request.path_info }}"

hq-hx-action="new_expression"

hx-target="#csql-fixture-rows"

hx-swap="beforeend">

<button

class="btn btn-default" type="button"

hx-post="{{ request.path_info }}"

hq-hx-action="new_expression"

hx-target="#csql-fixture-rows"

hx-swap="beforeend"

>

biyeun · 2024-11-20T15:51:58Z

corehq/apps/case_search/templates/case_search/csql_fixture_configuration.html

+    {% for form in csql_fixture_forms %}
+      {{ form }}
+    {% endfor %}


yes, this was exactly the approach i was thinking when reviewing the page with @AddisonDunn. Less front end logic being front-loaded from the backend into Alpine, and more on the python side.

Yeah, I was super pleased to see how well this plays with Django templates! I'm still not totally sold on the second commit here though - I do think I liked it better before adding Django forms, but if I find the time I might try a compromise - like maybe I make a partial template with the <form> tags and the buttons, but have the fields themselves rendered by the Django form (at present, I set a custom template on the form, so it contains everything, which sounds nice in principle, but means I lose error handling in the template)

esoergel · 2025-02-06T18:06:06Z

Apologies to the reviewers for neglecting this. Should be ready to go now

AddisonDunn

It's too bad you had to delete all my beautiful code, but I understand.

corehq/apps/case_search/templates/case_search/csql_expression_form.html

AddisonDunn · 2025-02-13T13:33:11Z

corehq/apps/case_search/templates/case_search/csql_fixture_configuration.html

 {% endblock %}
+
+{% block modals %}
+  {% include "hqwebapp/htmx/error_modal.html" %}


How is this triggered?

The HTMX framework pops it up on an error response automatically

AddisonDunn · 2025-02-13T13:34:50Z

corehq/apps/case_search/forms.py

+        self.domain = domain
+        self.fields['name'].widget.attrs = {
+            'placeholder': "name",
+            'class': "form-control",


Do you want to enforce a character limit here?

Good call, will do, unless Django did that for me already. To be investigated

Just pushed a fix. Forgot that that was already in there in the default widget attrs, but I decided to override them completely instead of using .update() because I didn't like the defaults for the textarea

This one's not a textarea though right?

Or you mean you decided to override both because you didn't like the update method for one of them, the one that is a textarea

yeah that's right, the latter. Felt weird to keep the defaults for one and not the other, so I figured being explicit about both was best. I'm open to reconsidering

AddisonDunn · 2025-02-13T13:37:21Z

corehq/apps/case_search/models.py

-        name=instance.name,
-        csql=instance.csql
-    )
+    if not instance.deleted:


What's the purpose of this? When would an expression be saved after being soft-deleted?

I think this was causing an error during tests - I believe this happens during the soft delete, ie set the delete flag, then call save, then that triggers this handler

oh that's right, it was creating an extra log entry

AddisonDunn · 2025-02-13T14:49:11Z

corehq/apps/case_search/views.py

+        if form.is_valid():
+            form.save()
+            return HttpResponse(form.render())
+        raise AssertionError("The user shouldn't be able to submit an invalid form")


It doesn't seem like there are really many restrictions, right? Name or CSQL field could be empty.

That's right - this form doesn't have much validation. I just added this because if you did throw an error, it wouldn't be displayed well in the UI. I wanted to come back and fix that, but ultimately gave up, particularly since it doesn't actually apply here.

esoergel mentioned this pull request Nov 14, 2024

CSQL Fixture UI/model #35299

Merged

4 tasks

biyeun reviewed Nov 20, 2024

View reviewed changes

esoergel added 6 commits February 4, 2025 15:52

Switch CSQL Expressions page to row-wise htmx

cdf0d26

Use django form for validation/saving

0e3f71b

Make save button only active on changed rows

4a7019b

lint

b339a19

Make page show up as "Data" tab child

80b5bd6

Update feature flag name and details

6151a3e

esoergel force-pushed the es/htmx-badges branch from 3951d98 to 6151a3e Compare February 5, 2025 17:01

esoergel added 2 commits February 6, 2025 11:59

update tests

2ce32ba

Extract HTMX action logic for fledgling test util

13c7d15

esoergel marked this pull request as ready for review February 6, 2025 18:05

esoergel requested review from orangejenny, MartinRiese, AddisonDunn, stephherbers, Robert-Costello, Jtang-1 and millerdev as code owners February 6, 2025 18:05

AddisonDunn approved these changes Feb 13, 2025

View reviewed changes

Set maxlength

b20bf5d

AddisonDunn approved these changes Feb 19, 2025

View reviewed changes

esoergel merged commit 8c45d96 into master Feb 19, 2025
14 checks passed

esoergel deleted the es/htmx-badges branch February 19, 2025 21:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HTMX CSQL Fixture UI #35372

HTMX CSQL Fixture UI #35372

esoergel commented Nov 14, 2024 •

edited

Loading

AddisonDunn commented Nov 15, 2024

biyeun Nov 20, 2024

biyeun Nov 20, 2024

biyeun Nov 20, 2024

biyeun Nov 20, 2024

biyeun Nov 20, 2024

esoergel Nov 20, 2024

esoergel commented Feb 6, 2025

AddisonDunn left a comment

AddisonDunn Feb 13, 2025

esoergel Feb 18, 2025

AddisonDunn Feb 13, 2025

esoergel Feb 18, 2025 •

edited

Loading

esoergel Feb 18, 2025

AddisonDunn Feb 18, 2025

AddisonDunn Feb 18, 2025

esoergel Feb 19, 2025

AddisonDunn Feb 13, 2025

esoergel Feb 18, 2025

esoergel Feb 18, 2025

AddisonDunn Feb 18, 2025

AddisonDunn Feb 13, 2025

esoergel Feb 18, 2025

HTMX CSQL Fixture UI #35372

HTMX CSQL Fixture UI #35372

Conversation

esoergel commented Nov 14, 2024 • edited Loading

Product Description

Technical Summary

Feature Flag

Safety Assurance

Safety story

Automated test coverage

QA Plan

Rollback instructions

Labels & Review

AddisonDunn commented Nov 15, 2024

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

esoergel commented Feb 6, 2025

AddisonDunn 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

esoergel Feb 18, 2025 • 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

esoergel commented Nov 14, 2024 •

edited

Loading

esoergel Feb 18, 2025 •

edited

Loading