EDSC-2895: Fix download granule dropdown in table view

[saurabhdaware]

Overview

What is the feature?

Fixes #1227

What is the Solution?

Not 100% sure of the possible cause but it was possibly because rowClick event of table triggering after the onClick of download button so it was immediately removing the dropdown menu.

Edit: Changed implementation to use e.stopPropogation()

What areas of the application does this impact?

It will impact the parts which has the same onRowClick function reference that I've made changes into.
It checks if it has the granule-results-data-links-button__button class to check if it is the download button element.

Testing

Reproduction steps

• Environment for testing:
• Collection to test with:

1. Search for a collection that has multi-file granules and click on it to load granules (NSIDC-0481 in
2. Click on the download icon in the list view and observe that multiple files appear
3. Confirm that clicking on those links downloads the intended file
4. Switch to table view using the toggle at the top of the granules panel
5. Click on the download icon in the table view and observe that multiple files appear
6. Confirm that clicking on those links downloads the intended file

Attachments

Please include relevant screenshots or files that would be helpful in reviewing and verifying this change.

Checklist

• I have added automated tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings

[saurabhdaware]

Need to do a tiny change. I'll mark it for review after that.

[abbottry]

I think that the change necessary here is to just add e.stopPropagation() within handleClick for the CustomDataLinksToggle component. If that does the trick please ensure that the z-index for the rows look correct, there may be a change necessary.

[saurabhdaware]

Yup right! e.stopPropagation() worked. Also, didn't need to change z-index

[mreese84]

@saurabhdaware good deal. However, notice in your screenshot that there is a green line that goes over the top of the dropdown list. That should be under the dropdown.

Also, a reminder to make sure you have a test that covers this bugfix. Thanks!

[saurabhdaware]

Yup, I'll make those changes and add tests. Thank you!

[saurabhdaware]

I've used React.createPortal to render the menu outside of the table row. This does solve the z-axis issue.

I'll write tests now. Let me know if this is fine. Thanks!

[trevorlang]

@saurabhdaware, this is looking awesome. I have one small suggestion. Once that's patched up, this should be good to go.

[trevorlang]

It's strange to use modal in this case. I would prefer to see this named dropdown or something more specific to this implementation.

[saurabhdaware]

Yes, right! I'll make that change.

Also, we will have to write a test that checks if dropdown opens when it is clicked from table view. (This test only checks if it opens when there are more links). I'll add that test as well then we can merge I guess.

[abbottry]

Yes, that is correct. And once this is done, it'll be ready to merge!

[saurabhdaware]

Fixed this and added a test for CustomDataLinksToggle component

[saurabhdaware]

Hi, I've added test for CustomDataLinksToggle function that checks if e.stopPropagation and other required methods are fired on click. Let me know if you want any other changes. Thanks!

[trevorlang]

Looks good! Thanks!

[mreese84]

@saurabhdaware thank you for your contribution! This fix will go out in our 1.130.x release, which is scheduled for deployment to our Prod environment no later than 10/28/20. Thanks!

search.earthdata.nasa.gov