[Tagging] Refined UX: Update a taxonomy by downloading and uploading

[bradenmacdonald]

"As a global staff user (instance-level super-admin), I can update a taxonomy by downloading, editing, and re-importing it."

This improves the UX and workflow of the basic functionality implemented in #140.

Acceptance Criteria

1. From the Taxonomies List Page, global staff will see the "Re-import" menu option from [Tagging] "Bare Bones" Update of Existing Taxonomy by Uploading #140
2. Likewise, from the Taxonomy Detail Page, global staff can access the same option:
   
3. Users who select that menu command will then see this dialog and can choose to download the taxonomy as either CSV or JSON:
   
4. Users will then see this:
   
5. If they click "Import" a file chooser will open, which allows only .csv or .json files as already implemented in [Tagging] "Bare Bones" Update of Existing Taxonomy by Uploading #140.
6. The import will be analyzed and the changes shown to the user (note: handle a long list using a scroll bar in the modal):
   
7. A second confirmation is shown to the user if they choose to proceed:
   
8. If the user confirms, the taxonomy is updated and a toast is shown.
   
9. If errors occur, they will be shown at the top of the page as seen in the Import workflow mockups.
   

Developer Notes

• Screenshots above are for convenience - Figma is the most up-to-date source for mockups. The scale of UI elements seen in the screenshots above may be incorrect.
• As always, make sure the whole process can be done using only a keyboard.

[ali-hugo]

@bradenmacdonald We have changed the terminology in the UI from "update taxonomy" to "re-import":

(Not directly related to this issue, but might be worth mentioning: we added the "edit details" menu item to the dropdown accessed from the "actions" button on the Taxonomy Detail Page.)

[rpenido]

4. Users will then see this:

Hi @ali-hugo!
Is it okay to add a Dropzone in this dialog instead of calling an open file dialog? I think it will be cleaner to implement and have a nicer look. Like this:

[rpenido]

@bradenmacdonald We have changed the terminology in the UI from "update taxonomy" to "re-import":

(Not directly related to this issue, but might be worth mentioning: we added the "edit details" menu item to the dropdown accessed from the "actions" button on the Taxonomy Detail Page.)

Is it safe to say that these menus will stay the same from now? We started with two different menus. As part of this task, I made a minor refactor to merge these menus and avoid code duplication. Let me know if I'm on the right path!

[pomegranited]

@rpenido

Is it okay to add a Dropzone in this dialog instead of calling an open file dialog? I think it will be cleaner to implement and have a nicer look.

That's the UI @ali-hugo wanted to begin with, so I'm sure it will be fine :)

Is it safe to say that these menus will stay the same from now?

Yes, they should stay the same.

[ali-hugo]

@rpenido The dropzone looks good - thanks!

Could you make a few small text changes please? See the text in the blue blocks below. Don't worry about the one about the maximum file size if it's not relevant.

Thanks for the ping! Let me know if you have any questions.

[rpenido]

Hi @ali-hugo!

I made a small video of the implementation as it is now, and I would like your feedback!

outpu_cut.mp4

I used a Stepper and added the Previous buttons.

I highlighted below the major changes:

Verify plan

Design

Implementation

In this screen, I didn't format the import plan. The backend saves the plan as a text log. I just made some minor adjustments to show it as a list. Some text adjustments are possible, but formatting each action as in the image would take some effort. Is the current approach enough for the MVP?

Confirm

Design

Implementation

In this screen, we don't have the actual number of the tags affected by the import, but the action count instead (we could have more than one action per Tag). I reworded the text to reflect that. Could you validate it?

---

If you see something that need to be changed (or need more screenshots) please let me know!

[ali-hugo]

@rpenido Thanks for the video! This is looking good :) See my feedback below:

Sorry, I see this is not clear in the designs, but instead of seeing a screen like the one on the left below, I was expecting to see something like on the right (it's not important to change at the moment, so please only make the update if it's quick and easy; else we can re-evaluate after user testing):

---

I think what you've done for the list in the screenshot below is perfect! Please just remove the warning from this screen - I think it's overkill to show it twice. Also, please change the button text to "continue":

---

Please change the colour of the red button in the image below to match the rest of the buttons. Also, I've made one small tweak to the text you wrote:

Warning! You are about to make 14 changes to the existing taxonomy. Any tags applied to course content will be updated or removed. This cannot be undone.

Are you sure you want to continue importing this file?

P.s. I will be on leave from tomorrow until early January, so will only see your response then. Have a happy December!

[bradenmacdonald]

@rpenido @ali-hugo Nice work, it's looking great!