Edit Area UI

• On the Field Show page, where we list the areas associated with the field, present a pencil icon next to each area, that will open the area edit form for that area in a modal.

  • Only show the button to edit the area boundary if:
    • (1) the area was drawn
    • (2) the area has not been stratified

• Within the modal

  • We will first present the Area Draw Tool, initialized with the area that is being edited. To initialize the area, we need to take the area from the field and convert it to the format that the Area Draw Tool accepts, using the unfinalizeArea utility from drawUtils.ts that is part of the Area Draw Tool work, currently in progress. There are two actions: (1) "Cancel" and (2) "Review".
  • When the user hits "Review", show the Area/Boundary Review step (same as from the Create Field UI). There are two actions from here: (1) "Back" and (2) "Save". Back takes the user back to the Area Draw Tool. Save initiates the network request to update the area.

• Wherever we refer to editing the area in the UI, perhaps in the header of a modal, we should use the language: "Edit Field Boundary".

• On submit, submit the area to PATCH /areas/:id.

  • That's it. No need to update field.areas, because PUT /areas/:id performs a resubmit in surveystack so the area id does not change; the area is updated in place.