Add Copy ID / Delete functionality to My Queries page

[robertandremitchell]

PULL REQUEST

Summary

Copy ID

• this adds a 2-second Toast indicating that an ID has been copied successfully.

Delete

• this adds a function that can be greatly simplified once we refactor to just delete the specified row by query_id
• this adds a modal prompt alerting the user that this action cannot be undone and affects all users
• this adds a 2-second toast indicating that the specified query has been deleted
• if all queries are deleted, it reverts back to the emptyState page

Edit

• Still non-functional while we work on details of the edit-value-set workflow as well as the database refactor. Ideally, clicking the row or edit button will pull the query_data from the backend and render it on the edit-value-set page.

Related Issue

Fixes #136, partially

Additional Information

I leaned toward moving the Modal and Toast code to a utils. I had some issues with the existing code for either the Modal or redirectToast working on this page.

The existing Modal does not currently accept more button use cases; we could probably get away with just have Delete, but I took a stab at expanding to allow multiple buttons.

The Toast I was unable to get to render at all, unfortunately. The code for the toast is fairly lightweight; however, it could be worth debugging just to avoid pain down the line. At the very least, it probably makes sense to move the copy just to make that easier to update, as this text seems liable to change.

Anything else the review team should know?

@mikang , a few questions about the above:

• Do we want another way besides a Toast to confirm success for Copy/Delete?
• Do we want another ways besides a Modal to prompt a user for a secondary confirmation that they wish to Delete?
• What changes should be made to the copy for each? I feel like I saw

Checklist

• Descriptive Pull Request title
• Link to relevant issues
• Provide necessary context for design reviewers
• Update documentation

[mikang]

@robertandremitchell

1. toast is good! it suffices
2. modal is great
3. I like the copy!

I'm not sure this is in the scope of this PR — could we vertically center these elements?

[robertandremitchell]

@robertandremitchell

1. toast is good! it suffices
2. modal is great
3. I like the copy!

I'm not sure this is in the scope of this PR — could we vertically center these elements?

thanks! absolutely can take a look at this. I think I fixed it with the css update by adding an align-items: center. let me know if this looks right, or if I've misunderstood!

[mikang]

Hi @robertandremitchell I checked out the new build. Is this what it should look like?

[mikang]

Could we put the text in the same line as the icon?

[katyasoup]

Looks great! Couple design things I spotted, but shouldn't block anything:

On my browser the toast text looks disproportionately large/different from your screenshots in the PR description; maybe just needs a different headingLevel passed in?

I didn't see anything in Figma for the confirmation modal, but the serif font in the modal header doesn't match the other serif text on the page:

[robertandremitchell]

Looks great! Couple design things I spotted, but shouldn't block anything:

On my browser the toast text looks disproportionately large/different from your screenshots in the PR description; maybe just needs a different headingLevel passed in?

I didn't see anything in Figma for the confirmation modal, but the serif font in the modal header doesn't match the other serif text on the page:

Thanks!

re: the different toast, this is expected based on @fzhao99 's work here #204 (comment) to leverage/match the existing toast for the demo customize query work?

@mikang , are you still okay with the presentation of the toast?

for the modal header, I've updated the .scss to the appropriate font for modal header. We may need to revisit if the Modals end up differing on header font/formatting, but as the inaugural Modal...uh, first come, first serve? 😅

[fzhao99]

lgtm!