Use mudder to rank form elements and related pub values #996

kalilsn · 2025-02-25T20:25:01Z

Issue(s) Resolved

High-level Explanation of PR

This PR:

Adds rank column to both pub_values and form_elements tables
Migrates existing form_elements and pub_values to have initial ranks
Updates the FormBuilder to generate ranks as elements are created and moved
Updates form selection query to order elements by rank
Updates pub values queries to order values by rank
Fixes a few other bugs in the form builder that I encountered during testing
- Label changes are reflected in the form builder now
- We now set a default config.label or config.relationshipConfig.label instead of form_elements.label for every element on form creation or when a new element is added to a form. This shouldn't change what gets rendered in the form itself because we also check the form_elements.label at that point, but this change means the default label will be populated in the element config form on the form builder.
- We now set the relationship component to relationBlock when creating a relationship element during initial form creation and when adding a new relationship form element to a form. Previously we were only setting that once the form element was edited.
- The hover state on the delete/restore buttons on a form element is back!
- Keyboard interactions work now! Click or use tab to focus an element, then press space to pick it up. Move it up and down with the arrow keys and press space to drop.
- The "Cancel" button in the side panel component config form won't delete unsaved elements any more unless it's clicked immediately after they've been added
- The "Save" button on the side panel won't be disabled immediately after adding a new element, so you can use that to exit the panel. Previously the only way was to make an edit or click the x because the cancel button removes the element.

My next PR will remove the order column from form_elements, and add the same dragging/reranking functionality to the pub_values inputs on form fill pages

Test Plan

Visit any form
Reorder the elements, add some elements, remove some elements
Save the form
Make sure the order stays the same after you save
Visit the live form
Make sure the order matches the form builder

* chore: set log level=debug * chore: try removing healthcheck * chore: add healthcheck back * chore: attach false maybe * chore: really not sure * chore: try removing minio-init * chore: empty test commit

tefkah · 2025-03-05T12:59:12Z

The "Cancel" button in the side panel component config form won't delete unsaved elements any more unless it's clicked immediately after they've been added

The "Save" button on the side panel won't be disabled immediately after adding a new element, so you can use that to exit the panel. Previously the only way was to make an edit or click the x because the cancel button removes the element.

you are a hero

tefkah

looks good and works well! i made a few suggestions on improving keyboard accessibility and styles, which i think would be good to get in, and a very minor one about code organization which is not necssary. i don't think i tested every possible permutation, but it seems very stable, great work!

core/prisma/exampleCommunitySeeds/arcadia.ts

tefkah · 2025-03-05T12:19:01Z

core/app/components/FormBuilder/FormElement.tsx

@@ -63,22 +67,24 @@ export const FormElement = ({ element, index, isEditing, isDisabled }: FormEleme
 				removeElement(index);
 			}}
 		>
-			<Trash size={24} className="text-neutral-400 hover:text-red-500" />
+			<Trash size={24} className="!pointer-events-auto text-neutral-400 hover:text-red-500" />


hmm, no, i just applied the latest updates from shadcn there, not sure why they chose to do that.

but you could solve this problem slightly differently, by adding [&_svg]:hover:text-red-500 to the button above. this is slightly nicer i think, as the trash icon turns red if you hover the button, not just the icon

imagine the tip of this arrow being the tip of the hand pointer (can't capture my mouse grrr)

tefkah · 2025-03-05T12:35:30Z

core/app/components/FormBuilder/FormElement.tsx

 							disabled={isDisabled || element.deleted}
 							variant="ghost"
-							className="invisible p-2 group-hover:visible"
+							className="invisible p-2 group-hover:visible group-focus:visible"


you could fix it by giving things explicit tabIndices, using opacity instead of visibility, and using focus within.

some of these might be redundant, but ill leave comments which should give a setup like so

Screen.Recording.2025-03-05.at.13.33.14.mov

core/app/components/FormBuilder/FormElement.tsx

tefkah · 2025-03-05T12:40:02Z

core/app/components/FormBuilder/FormElement.tsx

 							disabled={isDisabled || element.deleted}
 							variant="ghost"
-							className="invisible p-2 group-hover:visible"
+							className="invisible p-2 group-hover:visible group-focus:visible"


so great you made keyboard accessibility work!

it is a bit... strange, it seems that after reordering the tabindex does not per se change (which is understandable, i think?). ends being a strange experience reordering a bunch of items

Screen.Recording.2025-03-05.at.13.20.23.mov

tefkah · 2025-03-05T12:41:25Z

core/lib/server/form.ts

 	name: string,
 	slug: string,
 	communityId: CommunitiesId,
 	isDefault: boolean,
 	trx = db
 ) => {
+	const ranks = mudder.base62.mudder(pubType.fields.length + 1);


hahaha wow that would be kind of sick.

i think for inserts this is no problem at all

core/app/components/pubs/PubEditor/helpers.ts

Co-authored-by: Thomas F. K. Jorna <[email protected]>

kalilsn · 2025-03-05T22:05:16Z

Ok this is finally fixed up. There were some more complications with the form builder keyboard accessibility (that were affecting tests) and I also realized it was possible to do the pub value sorting entirely in the database, so I fixed that. I also had to fix the toHaveValues matcher to sort both the received values and the expected values, plus a few other test changes.

* Add ranks to form elements * Add rank to pub values * Set rank for form elements with mudder when creating new forms * Use mudder rank instead of order in form builder * Fix test expectation * Sort pub values by rank * Fix bugs in related value ranking * Fix form builder sort bugs * Pass transaction to getPubType * Fix off by one error * Condense migrations * Set collation order at field level rather than on query * Improve form builder readability * Cleanup * Make keyboard interactions work on sortable form elements * Fix missing hover state on form elements delete/restore buttons * Add test for form element sorting * Set config.label on element creation for proper default label * Actually show label changes in form builder * Set default label correctly for relationship elements * Set correct input component for relationship fields on form creation * Set default config.label when adding a new element to a form * Make sure config.relationshipConfig.component is set for relationship form elements * Update test now that label updates are actually reflected in the form builder * Improve UX for adding relationship form element Clicking edit on a newly added (not saved to the db) field, then clicking cancel will no longer delete the element. That will only happen if you click cancel immediately after adding the new element. The save button in the form element panel will always be enabled when first configuring a new field input element. Previously the only way to add a new relationship field without making an unnecessary config edit was to click the x, since the Save button was disabled and the cancel button would remove the element from the form. * Prevent fallback to bad slug value when rendering unconfigured relationship field * Make sure mudder table in migrations is 0 indexed * chore: PR preview fixes (#1021) * chore: set log level=debug * chore: try removing healthcheck * chore: add healthcheck back * chore: attach false maybe * chore: really not sure * chore: try removing minio-init * chore: empty test commit * Sort get pubs result in js * Fix merge mistake * Add ranks to values in datacite test * Allow tabbing to form element buttons Co-authored-by: Thomas F. K. Jorna <[email protected]> * Fix arcadia seed * Remove unnecessary sorting * Sort pub values in the database * Remove rank from returned values * Update tests to ignore return order of pub values * Update sort test to account for new drag handle setup --------- Co-authored-by: Eric McDaniel <[email protected]> Co-authored-by: Thomas F. K. Jorna <[email protected]>

kalilsn added 4 commits February 24, 2025 19:38

Add ranks to form elements

7e96f51

Add rank to pub values

6e01fce

Set rank for form elements with mudder when creating new forms

027853a

Merge branch 'main' into kalilsn/sorting

d2fe54b

kalilsn force-pushed the kalilsn/sorting branch from 44bac3f to eaf5f37 Compare February 25, 2025 20:36

Use mudder rank instead of order in form builder

68406d1

kalilsn force-pushed the kalilsn/sorting branch from eaf5f37 to 68406d1 Compare February 25, 2025 21:52

kalilsn changed the title ~~Add ranks to form elements~~ Use mudder to rank form elements and related pub values Feb 25, 2025

kalilsn added 12 commits February 25, 2025 16:04

Fix test expectation

6571462

Sort pub values by rank

f43c255

Fix bugs in related value ranking

69f0f95

Merge branch 'main' into kalilsn/sorting

6437e39

Fix form builder sort bugs

ee6700e

Pass transaction to getPubType

aaf0f0a

Fix off by one error

1e0850b

Condense migrations

f3b06bf

Set collation order at field level rather than on query

c021a34

Improve form builder readability

0ff5ea0

Cleanup

91c7dcf

Merge branch 'main' into kalilsn/sorting

0344bb2

kalilsn marked this pull request as ready for review February 27, 2025 00:01

kalilsn added 9 commits March 2, 2025 21:48

Make keyboard interactions work on sortable form elements

31e4822

Fix missing hover state on form elements delete/restore buttons

059d430

Add test for form element sorting

abfbdef

Set config.label on element creation for proper default label

58ce93e

Actually show label changes in form builder

9693c08

Set default label correctly for relationship elements

ebe6b10

Set correct input component for relationship fields on form creation

4c19037

Set default config.label when adding a new element to a form

594105e

Merge branch 'main' into kalilsn/sorting

c4d8159

Merge branch 'main' into kalilsn/sorting

f993aa5

github-actions bot had a problem deploying to gh-654103159-pr-996 March 4, 2025 20:36 Error

github-actions bot temporarily deployed to gh-654103159-pr-996 March 5, 2025 00:00 Inactive

3mcd and others added 4 commits March 4, 2025 19:41

chore: PR preview fixes (#1021)

e8ff6b9

* chore: set log level=debug * chore: try removing healthcheck * chore: add healthcheck back * chore: attach false maybe * chore: really not sure * chore: try removing minio-init * chore: empty test commit

Sort get pubs result in js

b3a3698

Fix merge mistake

328ef0d

Add ranks to values in datacite test

62fadeb

kalilsn force-pushed the kalilsn/sorting branch from d55c585 to 62fadeb Compare March 5, 2025 01:42

github-actions bot temporarily deployed to gh-654103159-pr-996 March 5, 2025 01:48 Inactive

tefkah approved these changes Mar 5, 2025

View reviewed changes

kalilsn and others added 4 commits March 5, 2025 09:33

Allow tabbing to form element buttons

585e6cc

Co-authored-by: Thomas F. K. Jorna <[email protected]>

Fix arcadia seed

9207292

Remove unnecessary sorting

2121ea8

Sort pub values in the database

d5fedc6

kalilsn force-pushed the kalilsn/sorting branch from b4eb12d to d5fedc6 Compare March 5, 2025 19:42

kalilsn added 2 commits March 5, 2025 14:03

Remove rank from returned values

8ba8fd6

Update tests to ignore return order of pub values

eb4aee6

3mcd temporarily deployed to gh-654103159-pr-996 March 5, 2025 20:18 Inactive

Merge branch 'main' into kalilsn/sorting

7f74fc6

kalilsn force-pushed the kalilsn/sorting branch from cf68523 to 7f74fc6 Compare March 5, 2025 20:26

3mcd temporarily deployed to gh-654103159-pr-996 March 5, 2025 20:31 Inactive

3mcd temporarily deployed to gh-654103159-pr-996 March 5, 2025 21:44 Inactive

Update sort test to account for new drag handle setup

1d0cda0

kalilsn force-pushed the kalilsn/sorting branch from dba15f6 to 1d0cda0 Compare March 5, 2025 21:47

3mcd had a problem deploying to gh-654103159-pr-996 March 5, 2025 21:52 Error

kalilsn merged commit e0ae589 into main Mar 5, 2025
8 checks passed

kalilsn deleted the kalilsn/sorting branch March 5, 2025 22:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use mudder to rank form elements and related pub values #996

Use mudder to rank form elements and related pub values #996

kalilsn commented Feb 25, 2025 •

edited

Loading

tefkah commented Mar 5, 2025

tefkah left a comment

tefkah Mar 5, 2025

tefkah Mar 5, 2025

tefkah Mar 5, 2025

tefkah Mar 5, 2025

kalilsn commented Mar 5, 2025

Use mudder to rank form elements and related pub values #996

Use mudder to rank form elements and related pub values #996

Conversation

kalilsn commented Feb 25, 2025 • edited Loading

Issue(s) Resolved

High-level Explanation of PR

Test Plan

tefkah commented Mar 5, 2025

tefkah left a comment

Choose a reason for hiding this comment

tefkah Mar 5, 2025

Choose a reason for hiding this comment

tefkah Mar 5, 2025

Choose a reason for hiding this comment

tefkah Mar 5, 2025

Choose a reason for hiding this comment

tefkah Mar 5, 2025

Choose a reason for hiding this comment

kalilsn commented Mar 5, 2025

kalilsn commented Feb 25, 2025 •

edited

Loading