Implement Latest Export Button UI

[ryanfchase]

Overview

We need to implement UI elements that allow users to export selected data on to their devices since we do not officially have a way of utilizing our data export feature.

Note

Handoff documents will contain a version of the Search and Filters modal that DO NOT MATCH what we have implemented. We are to implement only the UI elements relevant to this feature

• I understand

Action Items

• Add export button at bottom of Search and Filters Modal
• Error modal is displayed on Export Button click when criteria is not met
  • More than 1 request type is selected
  • No request types selected
  • No NC is selected
• NC selected + 1 request type selected begins data export on Export Button click
  • data downloading modal appears
  • data download success modal appears if data download succeeds
  • data download failed modal appears if download failed

Resources/Instructions

• Link To Figma
• Page Name: ⭐ ⭐ ⭐ Handoff
• Section Name: Export Link Button And Hand Off Process
• Related previous ticket: Add Export to Search and Filters Modal #1695
  • review: Before Screenshot
  • review: After Screenshot (Finalized)
  • review: Video Upload of "Export Button" demo

Screenshot of Figma Overview

Screenshot after implemented changes

[Skydodle]

Ticket is ready to picked up.

[kdow]

ETA: 8/23
Availability: Mon-Fri 1pm-6pm

[kdow]

Are the needed icons available somewhere as assets or names in a font/icon library? I found some that look similar in Material UI's library (https://mui.com/material-ui/material-icons/?query=error&selected=Warning, https://mui.com/material-ui/material-icons/?query=check&selected=CheckCircle), but I haven't found exact matches for some of the others (export icon, info tooltip in notice message, document download icon in confirmation dialog).

[ryanfchase]

I've added ready for dev lead tag to designate that this still needs attention. (thank you for moving it to the Questions column). I will try and get this addressed by tonight's meeting. Or work with a designer to get an answer at that time.

[ryanfchase]

@kdow

Are the needed icons available somewhere as assets or names in a font/icon library? I found some that look similar in Material UI's library (https://mui.com/material-ui/material-icons/?query=error&selected=Warning, https://mui.com/material-ui/material-icons/?query=check&selected=CheckCircle), but I haven't found exact matches for some of the others (export icon, info tooltip in notice message, document download icon in confirmation dialog).

Actually I think you can download all the relevant assets directly off the team Figma. I believe you can go to the Export Link and Download Process section, find the "Assets" section, and download those assets directly via Figma.

@Joy-Truex @kiranofans please let me know if there is a better way to approach this. Downloading directly off Figma seems to be our process at the moment.

Screenshot of assets

[kiranofans]

Are the needed icons available somewhere as assets or names in a font/icon library? I found some that look similar in Material UI's library (https://mui.com/material-ui/material-icons/?query=error&selected=Warning, https://mui.com/material-ui/material-icons/?query=check&selected=CheckCircle), but I haven't found exact matches for some of the others (export icon, info tooltip in notice message, document download icon in confirmation dialog).

Yes you can directly download frame/image from Figma in various format and size:
-> Open Figma -> find the icons or widgets -> single click on the icons or double click the icons that are on Widgets -> on your right hand you will see a panel -> at the bottom of the panel, there's a Export section -> click on Preview to expand the icon/image/widget download preview -> Click the "+" button beside Export to add one Export setting including image format and resolution/size as shown in the screenshot below:

Download Preview:

Click on the image format drop down to select an appropriate one, then click on Export Frame/default to download it.

You can also click on a widget frame (double-click an image/icon on a widget frame), then right-click and select Copy/Paste as. From there, choose Copy as SVG, Copy as PNG, or Copy as Code (CSS, iOS, Android). You can then paste the SVG/PNG directly, or paste the code wherever it applies.

And I will add the icons to design system

[ryanfchase]

@kiranofans this is a very good guide, thank you. I'm going to make a note in our agenda about adding this to our wiki

[ryanfchase]

@kdow if your question has been answered, please move back to in progress. I will review this in breakout rooms to confirm.

[kiranofans]

I'm sorry I was trying to delete the comment (which I haven't sent yet) but I didn't notice why I closed this ticket. I have already changed it back to In Progress.

[ryanfchase]

@kiranofans @kdow I'll move this back to In Progress, since that seems to be the latest desired state

[ryanfchase]

Adding my review today ETA 3~4pm