Admin Edit Photo Page - admin/gardens/:id/photos/:id/edit

[ahnwarez]

As an administrator I want an edit photo page So that I can change photos and their data for our garden

See the figma prototype and use the scenarios below to plan your work.

Scope

Note that the associated admin/gardens/:id/gallery page is in another ticket.

User Scenarios

Given I am on the admin gallery page (admin/gardens/:id/gallery) When I click the settings button on a photo Then I see the edit photo page (admin/gardens/:id/photos/:id/edit) And the photo's data

Given I am on the edit photo page When I click the Back to Gallery button Then I am taken back to the admin gallery page

Given I am on the edit photo page When I type text into title, description or url fields Then I see the text And an indication of the validity of the url (eg: "* Enter a valid image url" in red for a non-url)

Given I have typed a url that does not return an image into the url field When I click on submit Then I see a dialog saying that the url did not return a valid image format (.jpg, .jpeg, .png, .svg or .webp)

Given I am on the edit photo page And the photo url is valid When I click on submit Then the photo's title, description and url are updated in the db And I am taken back to the admin gallery page

[bensonkawengian]

Progress note:

• Form is setup using formik and yup
• Back to gallery link is setup using react-router-dom
• URL Path: When the URL input is NOT valid, a red text warning appear on top of the text box upon submit. We believe this approach is clearer than changing the input text to be red.