Data import settings page's 4th pane for File Extensions: Header actions

Purpose: To define the actions of the Data import settings File Extensions 4th pane Header Actions. This story connects the Edit functionality, which was built in UIDATIMP-84, and adds the Delete functionality.

As a staff person
I want to be able to take actions on individual file extension records via the options shown in the 4th pane header
So that I can edit and delete individual file extension records.

Live prototype:
https://xd.adobe.com/view/0bb2d8ab-aabd-4ff6-4d5a-faa59a93368e-7d83/

Brief video walk-through
https://www.dropbox.com/s/3slcv4v49qm92rv/2018-11-06-data-import-19.mp4?dl=0 (see 4:10-5:10 in the video)

NOTE: 4th pane header showing the caret next to the file extension name and the edit pencil was created in UIDATIMP-61

Scenarios

1. Scenario 1
   • Given the Data Import Settings/File Extensions 4th pane, showing the details of an individual file extension
   • When a User clicks the Edit button on the right side of the header
   • The Edit file extension screen should open and cover the full screen (see 09-Settings Edit file extension (block import).png and *10-Settings Edit file extension.png which were built as part of UIDATIMP-84)
   • And the user should be able to edit the setting, then save (by pressing the save button) or discard (by pressing the x at the top left) the changes. Edit functionality was built as part of UIDATIMP-84
2. Scenario 2
   • Given the Data Import Settings/File Extensions 4th pane, showing the details of an individual file extension
   • When a User clicks the down caret next to the name of the file extension in the header
   • They should see two options in the caret menu (see 06-Settings File Extensions details options.png)
     • Edit, preceded by the pencil icon
     • Delete, preceded by the trashcan icon (even though the mockup doesn't show the trash can)
3. Scenario 3
   • Given the action caret in the header of the Data Import Settings/File Extensions 4th pane
   • When the user clicks the "Edit" option
   • The Edit file extension screen should open and cover the full screen (see 09-Settings Edit file extension (block import).png and *10-Settings Edit file extension.png which were built as part of UIDATIMP-84)
   • And the user should be able to edit the setting, then save or discard the changes. Edit functionality was built as part of UIDATIMP-84
4. Scenario 4
   • Given the action caret in the header of the Data Import Settings/File Extensions 4th pane
   • When the user clicks the "Delete" option
   • Then a confirmation modal should appear, as shown in 07-Settings Delete file extension modal.png
5. Scenario 5
   • Given the delete confirmation modal
   • When a user clicks Cancel
   • Then close the delete confirmation modal without deleting the file extension
6. Scenario 6
   • Given the delete confirmation modal
   • When a user clicks Delete file extension
   • Then delete the file extension setting details
   • Remove the file extension from the list of file extensions
   • And return the user to the list (3rd pane) of file extensions, without the one that was just deleted
   • And display a standard green success toast with the wording: The file extension [file extension] was successfully deleted
7. Scenario 7
   • When a user clicks Delete file extension
   • And there's an error (e.g. backend communication error, file extension not deleted)
   • Then display a standard red error toast with the wording: The file extension [file extension] was not deleted
     • [Note: See the error version of styling here: https://ux.folio.org/storybook/?selectedKind=Callout&selectedStory=Basic%20Usage&full=0&addons=1&stories=1&panelRight=0&addonPanel=REACT_STORYBOOK%2Freadme%2Fpanel]
   • And return the user to the list (3rd pane) of file extensions, with the one that was not deleted still highlighted
   • And the 4th pane details still open, so that the user can try to delete it again

NOTE: Automated test should be included in the scope of this ticket