Enable shopping list title to be edited from shopping lists page

[danascheider]

Context

• Rewrite Shopping Lists page
• Enable shopping list title to be edited from shopping lists page

We are re-implementing the shopping lists page. The next step is to enable the titles of shopping lists to be edited from the dashboard.

Changes

• Create ListEditForm component enabling shopping list titles to be edited in place
• Add functions to simApi and ShoppingListsContext to update shopping list titles
• Incorporate the ListEditForm into the ShoppingList component
• Tests and stories for new components and behaviours
• Update docs
• Update Node to 19.8

Considerations

The auto-sizing nature of the ListEditForm component made it a beast to implement now as the first time. Although there were some issues with the form running off the shopping list component, they mostly occurred randomly while changing the viewport size and as such are not a huge concern.

Manual Test Cases

All test cases assume you are logged into the front end and on your shopping lists page. The selected game should have at least one editable shopping list.

Cancel Editing by Clicking Outside

1. Click the edit icon next to the title of one of the editable shopping lists on the page
2. See that the edit input and update button appear
3. Click outside the form (including a second click on the edit button)
4. See that the input and button have disappeared and the shopping list looks as it did when the page loaded

Cancel Editing by Pressing Escape

1. Click the edit icon next to the title of one of the editable shopping lists on the page
2. See that the edit input and update button appear
3. Tab focus to an element outside the form (this is important to ensure that 'Escape' presses aren't only registered if the event target is the form or a part of it)
4. Press escape
5. See that the input and button have disappeared and the shopping list looks as it did when the page loaded

Updating the Title Successfully

1. Click the edit icon next to the title of one of the editable shopping lists on the page
2. Enter a new, valid title into the input
3. Press enter or click the submit button (try both)
4. See that the title is updated
5. See that the input and submit button are hidden
6. See that the new title is displayed

Changing to a Default Title

1. Click the edit icon next to the title of one of the editable shopping lists on the page
2. Delete everything from the input, leaving it blank
3. Press enter or click the submit button (try both)
4. See that the title is updated to a new default title
5. See that the input and submit button are hidden

404 Error

1. Configure the back end to always return a 404 error from the ShoppingListsController::UpdateService#perform method
2. Click the edit icon next to the title of one of the editable shopping lists on the page
3. Enter a valid value and submit
4. See a flash message appear indicating the list does not exist or doesn't belong to you
5. See that the form is not hidden nor cleared

422 Error

1. Click the edit icon next to the title of one of the editable shopping lists on the page
2. Enter a value identical to that of another list and submit
3. See a flash message appear indicating the list could not be saved as the title must be unique per game
4. See that the form is not hidden nor cleared

500 Error

1. Configure the back end to always return a 500 error from the ShoppingListsController::UpdateService#perform method
2. Click the edit icon next to the title of one of the editable shopping lists on the page
3. Enter a valid value and submit
4. See a flash message appear indicating an unexpected error has occurred
5. See that the form is not hidden nor cleared

Screenshots and GIFs

GIFs are only provided of certain viewport sizes for file size reasons

320px

481px

601px

769px

1025px

1201px

Large Desktop

[danascheider]

This test is being skipped because rendering the form in JSDOM involves using the node-canvas package, which doesn't support worker_threads. What are worker_threads and are we using them in this application? Apparently we are. The maintainers have said they would like to add support this year, so I'm skipping this test rather than deleting it entirely.

[danascheider]

16px is the amount of margin on the icons.

[danascheider]

It's better to be more specific - the trigger should ideally be a button so there's nothing wrong with specifying that here. If we need it changed in the future it's a small enough change then. As for componentRef on line 5, that got complicated with TypeScript since the ListEditForm component demanded a particular ref type and this required something different. So we changed both to use RefObject<any> or LegacyRef<any> types instead of specifying a particular HTML element.

[danascheider]

Why - 2? Not really sure.