ERA-11053: Support EFB schemas in ER > Collections > Drag-and-drop #1225

luixlive · 2025-01-30T22:14:59Z

What does this PR do?

Add dnd-kit to the project and implement a drag and drop interface to the collection lists in the new SchemaForm to reorder the items.

How does it look

Relevant link(s)

Where / how to start reviewing (optional)

The easier way is to go from top to bottom.

The .../SchemaForm/fields/Collection/index.js component is the entrypoint for the rendering of the collections. There you'll see that we pulled the item state to the parent so we handle a new items state variable that holds a temporal id, and the state of the modal and form preview of each item, making it more flexible to change those states from the parent. Also, from here we render the new SortableList.
Then, we have .../SchemaForm/fields/Collection/SortableList/index.js from where we render the <DndContext .../> and the <SortableContext .../> providers, needed to use the useSortable hook in the draggable items. This component configures and handles the sensors, accessibility (announcements, screen reader instructions, keyboard navigation), dragging events and everything that is related to the implementation of dnd-kit from the list perspective. It also renders the items of the collection through the new SortableItem.
.../SchemaForm/fields/Collection/SortableList/SortableItem/index.js is wrapper over our existing Item component that registers the item as a sortable through the useSortable hook and injects the properties (attributes, listeners, refs...) to the list items so they work as draggable elements.

In the rest of the files you will see other implementation details related to the drag and drop, like new hovering styles, a drag handle, etc.

…nterface to reorder collection items in the new forms

luixlive · 2025-01-30T22:18:03Z

public/locales/en-US/reports.json

@@ -157,21 +157,28 @@
              "closed": "Open the {{collectionLabel}} list",
              "open": "Close the {{collectionLabel}} list"
            },
-            "item": {


The old item translationd didn't really change, they were just nested under sortableList to keep the same organization than the file structure.

The new translations added are the screen reader instructions and the announcements to stay a11y compliant. The new keys are: dragCancelAnnouncement, dragEndAnnouncement, draggableScreenReaderInstructions, dragOverAnnouncement and dragStartAnnouncement.

luixlive · 2025-01-30T22:21:46Z

...rtManager/DetailsSection/SchemaForm/fields/Collection/SortableList/Item/FormPreview/index.js

  });

  const hasError = !!errors;

  return <ul
-      className={`${styles.formPreview} ${hasError ? styles.error : ''}`}
+      className={`${styles.formPreview} ${isDragOverlay ? styles.dragOverlay : ''} ${hasError ? styles.error : ''}`}


We add styles if the FormPreview is being rendered as part of a drag overlay. Specifically, a blue border:

luixlive · 2025-01-30T22:25:17Z

src/ReportManager/DetailsSection/SchemaForm/fields/Collection/SortableList/Item/index.js

@@ -87,6 +83,21 @@ const Item = ({
    setIsFormModalOpen(false);
  };

+  const onActionButtonKeyDown = (event) => {


A few key changes to the Item component:

The action buttons now stop the propagation when the user clicks them while navigating the widget with the keyboard. Enter and Space keys are also used by the sortable to initiate the dragging mode, so if the focus is in the buttons we stop the propagation and just trigger the click.

A useEffect that listens to the isDragging prop to set the cursor as grabbing in the entire document until the user drops the item.

The new drag handle with its hover state.

The action button listeners get disables if the Item is just a drag overlay.

Other styles for the drag overlay and if the item is being dragged.

luixlive · 2025-01-30T22:28:23Z

src/ReportManager/DetailsSection/SchemaForm/fields/Collection/SortableList/Item/utils/index.js

@@ -53,3 +53,8 @@ export const getHumanizedValue = (field, value, defaultHumanizedValue, language,
    return value;
  };
 };
+
+export const getItemTitle = (formData, identifier, defaultTitle, identifierField, language, t) =>


This method isn't new, but it was moved to the utils file so it can be reused by the new SortableList when rendering the a11y announcement texts.

luixlive · 2025-01-30T22:33:43Z

...ReportManager/DetailsSection/SchemaForm/fields/Collection/SortableList/SortableItem/index.js

+
+const BOOTSTRAP_COLLAPSE_TRANSITION_TIME = '300ms';
+
+const SortableItem = ({ id, isFormModalOpen = false, ...otherProps }) => {


This is just a wrapper for our Item component that registers it to the @dnd-kit framework as a new sortable node (through useSortable) and injects the properties it needs. Of course we could have just placed this code directly in the Item, but we need the Item presentational component for our drag overlay, not as a sortable. This ref forwarding pattern is suggested by the @dnd-kit docs in the Drag Overlay section: https://docs.dndkit.com/api-documentation/draggable/drag-overlay#ref-forwarding

luixlive · 2025-01-30T22:37:24Z

src/ReportManager/DetailsSection/SchemaForm/fields/Collection/SortableList/index.js

+const BOOTSTRAP_MODAL_ZINDEX = 1055;
+const ITEM_HEADER_HEIGHT = 40;
+
+const customKeyboardCoordinateGetter = (event, args) => {


A custom coordinate getter algorithm. It's very simple and straightforward. It would have been better to follow the approach of the sortableKeyboardCoordinates that comes included in the sortable preset of dnd-kit: https://docs.dndkit.com/presets/sortable#sensors . However, given that we can open our collection item previews, the sizes of the items is unknown and the included algorithm doesn't work properly. With this custom implementation we move the item with every arrow up or down the user presses the exact height of a closed item. If all the items are closed it will work perfectly, if not, you will have to press several times to do an actual swap, but still works.

luixlive · 2025-01-30T22:38:35Z

src/ReportManager/DetailsSection/SchemaForm/fields/Collection/SortableList/index.js

+  setIsItemFormPreviewOpen,
+  renderField,
+}) => {
+  const sensors = useSensors(


We configure three sensors for maximal accessibility: mouse, touch and keyboard. We configure them with proper activator constraints so the buttons inside the items (delete, edit, open / close) are still clickable and draggable.

luixlive · 2025-01-30T22:39:15Z

src/ReportManager/DetailsSection/SchemaForm/fields/Collection/SortableList/index.js

+      ...(overId === null ? [] : [items.findIndex((item) => item.id === overId) + 1]),
+    ];
+  };
+  const dndAnnouncements = {


Announcements that go in a hidden live region for people using screen readers to know the events that get fired while they interact with the drag and drop interface.

Example of the live region reporting that Joshua was dropped at position 2 of 3..

luixlive · 2025-01-30T22:42:47Z

src/ReportManager/DetailsSection/SchemaForm/fields/Collection/SortableList/index.js

+  };
+
+  return <ul>
+    <DndContext


The implementation is very readable, and I followed the patterns described in the docs. Nothing weird here:

<DndContext {...configurationProps}> <SortableContext items={temporalIdsForOurCollectionItems} strategy={verticalListSortingStrategy} > // SortableItem calls useSortable with the id and injects the properties {items.map((item) => <SortableItem />)} </SortableContext> </DndContext>

luixlive · 2025-01-30T22:45:18Z

src/ReportManager/DetailsSection/SchemaForm/fields/Collection/index.js

+  // Items is an internal state variable to assign temporal ids to each collection item (used as the key prop, sortable
+  // id and numeric identifier) and to track their state. It's stored as an array and the index of each item in the
+  // value prop will always be matched in here.
+  const [items, setItems] = useState(value.map((_, index) => ({


The new state variable. We lifted the items isFormModalOpen and isFormPreviewOpen states up to the parent (collection) so we can easily control them from here and close / open the modal and the preview with other actions (like opening the modal immediately after the user creates a new item). It also holds the temporal id and since the structure is an array, it keeps the same ordering than the value array that contains the form data of each item. So the most important thing to track an item is to know its index which will be the same in value, in this items array and visually in the UI.

luixlive · 2025-01-30T22:46:35Z

src/ReportManager/DetailsSection/SchemaForm/fields/Collection/index.js

  };

+  const onItemMove = (originalItemIndex, newItemIndex) => {


The new callback to trigger drag and drop reordering of the collection items. We get the original index and the new index and update the errors, the parent form data and the new items array using the dnd-kit helper arrayMove.

tiffanynwong · 2025-01-30T23:23:54Z

Looking so nice 😎 Really like all the thought you put into the accessibility. The drag and drop looks really good.

In slack we talked about making the whole thing clickable. If it's possible/ easy can we also add a subtle shadow when hovering over an item. Just like we did in the form builder?

tiffanynwong · 2025-02-06T19:31:34Z

The drag and drop looks good 😎 ! The only thing that may be missing is if we're going to address the cancel flow from the comments in the jira ticket. If not, approved!

luixlive · 2025-02-06T19:46:43Z

@tiffanynwong

The drag and drop looks good 😎 ! The only thing that may be missing is if we're going to address the cancel flow from the comments in the jira ticket. If not, approved!

@JoshuaVulcan created a separate ticket to work on those changes 😄

fonzy911

Hi @luixlive, this looks great. Approved!
I can definitely circle back to this is changes are made due to feedback but, this looks great!

gaboDev

LGTM 🥳

JoshuaVulcan

As always, code looks good and the test coverage is A+. Look and feel of the app is great. I added a couple of minor questions/comments but it's nothing blocking at all. Well done

JoshuaVulcan · 2025-02-07T21:45:32Z

src/ReportManager/DetailsSection/SchemaForm/fields/Collection/SortableList/Item/index.js

+  }, [isFormModalOpen]);
+
+  return <li
+      className={`${styles.item} ${isFormPreviewOpen ? styles.open : ''} ${isDragging ? styles.isDragging : ''} ${isDragOverlay ? styles.dragOverlay : ''} ${hasError ? styles.error : ''}`}


At this point, the class string is so long that it may be more legible/reasonable to compute it above the return statement.

I'll do this and then merge 😄

JoshuaVulcan · 2025-02-07T21:47:41Z

src/ReportManager/DetailsSection/SchemaForm/fields/Collection/SortableList/Item/index.js

+  </li>;
+};
+
+export default forwardRef(Item);


Why are there some redundant anonymous event handler functions throughout? Shouldn't those be named and consolidated?

Well I don't think we have a hard rule on this topic. My mind flow is usually as follows:

If a method isn't complex, don't memoize it. Memoization costs are usually more expensive than doing trivial operations like math, concatenation, calling a parent callback, sometimes even iterating a small array...

If a method isn't memoized and it's a one-liner, keep it anonymous in the prop definition.

If the method is not a one liner or needs to be memoized, define it in the component body with a nice self explanatory name.
I'm always glad to set our team agreements on code style. Let me know what you think.

luixlive added 2 commits January 30, 2025 16:01

ERA-11053: Add dnd-kit to the project and implement a drag and drop i…

b272da9

…nterface to reorder collection items in the new forms

Merge branch 'develop' into ERA-11053

2651a91

luixlive added the deploy label Jan 30, 2025

luixlive temporarily deployed to ERA-11053 January 30, 2025 22:15 — with GitHub Actions Inactive

luixlive marked this pull request as draft January 30, 2025 22:15

luixlive temporarily deployed to padas-app January 30, 2025 22:15 — with GitHub Actions Inactive

luixlive commented Jan 30, 2025

View reviewed changes

luixlive changed the title ~~ERA.11053: Support EFB schemas in ER > Collections > Drag-and-drop~~ ERA-11053: Support EFB schemas in ER > Collections > Drag-and-drop Jan 30, 2025

ERA-11053: Make the collection items clickable to open the preview

7b3a555

luixlive temporarily deployed to ERA-11053 January 31, 2025 19:23 — with GitHub Actions Inactive

luixlive temporarily deployed to padas-app January 31, 2025 19:24 — with GitHub Actions Inactive

ERA-11053: Fix missing hover state

9cfe21b

luixlive temporarily deployed to ERA-11053 January 31, 2025 19:30 — with GitHub Actions Inactive

luixlive temporarily deployed to padas-app January 31, 2025 19:30 — with GitHub Actions Inactive

luixlive added 3 commits February 4, 2025 09:44

ERA-11053: Add unit tests

bc1ab11

Merge branch 'develop' into ERA-11053

c80c8ea

ERA-11053: Fix issue with fixture in tests

63dd089

luixlive temporarily deployed to ERA-11053 February 4, 2025 15:49 — with GitHub Actions Inactive

luixlive requested a review from AlanCalvillo February 4, 2025 15:50

luixlive requested review from gaboDev, JoshuaVulcan, fonzy911 and tiffanynwong February 4, 2025 15:50

luixlive marked this pull request as ready for review February 4, 2025 15:50

luixlive temporarily deployed to padas-app February 4, 2025 15:50 — with GitHub Actions Inactive

fonzy911 approved these changes Feb 6, 2025

View reviewed changes

gaboDev approved these changes Feb 7, 2025

View reviewed changes

JoshuaVulcan approved these changes Feb 7, 2025

View reviewed changes

ERA-11053: Break long classname into a variable

7c7b08f

luixlive deployed to ERA-11053 February 7, 2025 22:42 — with GitHub Actions View deployment

luixlive merged commit bd59c17 into develop Feb 7, 2025
2 checks passed

luixlive deleted the ERA-11053 branch February 7, 2025 22:42

luixlive temporarily deployed to padas-app February 7, 2025 22:42 — with GitHub Actions Inactive


		const BOOTSTRAP_COLLAPSE_TRANSITION_TIME = '300ms';

		const SortableItem = ({ id, isFormModalOpen = false, ...otherProps }) => {

ERA-11053: Support EFB schemas in ER > Collections > Drag-and-drop #1225

ERA-11053: Support EFB schemas in ER > Collections > Drag-and-drop #1225

Uh oh!

Conversation

luixlive commented Jan 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

How does it look

Relevant link(s)

Where / how to start reviewing (optional)

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

luixlive Jan 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

luixlive Jan 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tiffanynwong commented Jan 30, 2025

Uh oh!

tiffanynwong commented Feb 6, 2025

Uh oh!

luixlive commented Feb 6, 2025

Uh oh!

fonzy911 left a comment

Choose a reason for hiding this comment

Uh oh!

gaboDev left a comment

Choose a reason for hiding this comment

Uh oh!

JoshuaVulcan left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

luixlive commented Jan 30, 2025 •

edited

Loading

luixlive Jan 30, 2025 •

edited

Loading

luixlive Jan 30, 2025 •

edited

Loading