feat(schema): File download COMPASS-8704 #6740
Conversation
I'm curious what was the case when it happened. Generally browsers allow for this if the click is triggered by another user action, so if this programmatic link clicking is triggered by a user button click for example, browsers should not prevent that (I tried naively replacing the href with a button that creates a link and clicks it on click event and it seems to work both in local sandbox and when using browser extension to run this code in cloud) |
Aaaah 🤦 So now I spent some more time on it and I think the issue was appending the temporary element to document.body. Appending it inside the modal appears to work (at least in electron). I don't hate the current solution though, so I'm thinking to keep it. It seems more semantic html-ish. |
If you're doing this from inside the modal, the modal logic is probably conflicting with the click (either the focus trap or a pointer-events directive somewhere I'd assume). FWIW you don't need to add it in the DOM at all to click, you can just call the method on the element. Semantics are good, but I'd consider to think about what other things this affects: keeping blob in state in addition to the schema basically means we're keeping schema in memory two times, then you create the object URL and it makes it three times, I'm not sure how much it's worth it, especially as this is not a "real" URL anyway |
Okay, reverting to the temporary link solution, doing the cleanup wasn't too bad but you're right that the objects can get big and we shouldn't need to store two (the url itself is small so I'm not counting that) |
Anemy
added
feature flagged
Co-authored-by: Sergey Petushkov <[email protected]>
paula-stacho
force-pushed
the
COMPASS-8704
branch
from
442efda to
a21f4ab
Compare
| const page = await browser.getPuppeteer(); | ||
| const cdpSession = await page.target().createCDPSession(); | ||
| await cdpSession.send('Browser.setDownloadBehavior', { | ||
| behavior: 'allow', | ||
| downloadPath: downloadPath, | ||
| }); |
There was a problem hiding this comment.
Just curious why it's different from what we do for the browser below where it's configured through chromeOptions. Asking because we do pass goog:chromeOptions to electron already and they seem to be applied correctly 🤔
There was a problem hiding this comment.
Hmm.. this is how I understood the best practices docs, but let me try it out with just the options
There was a problem hiding this comment.
Not out of the box, perhaps if we found an option to disable the 'save as' dialog
There was a problem hiding this comment.
Got it, interesting, thanks for checking!
| isLoading={exportStatus === 'inprogress'} | ||
| loadingIndicator={<SpinLoader />} | ||
| disabled={!exportedSchema} | ||
| onClick={onSchemaDownload} |
There was a problem hiding this comment.
Are we planning on adding a visual indicator that the file is saving & saved? Right now the save dialogue closes and they're back to the export page which they would then cancel out of. Looking at the designs there is an in progress toast included:
https://www.figma.com/design/CBHJriBQZ2qxMxtnXFgDxJ/EXPO-3174-%3A-Export-Schema-%2B-Validation-Detection?node-id=1298-55009&t=MBxcSDens4RhwtPM-1
There was a problem hiding this comment.
Ah! No, thanks for pointing that out, I forgot we had that in the designs. We don't have that control with the link approach as we'd have with file writing. The file download is handled by the browser - luckily it should be pretty much instantaneous. The part that might take more time is actually the stringifying, which we do after the conversion - so we already have indicators for that.
Should we close the export page after the click? 🤔
There was a problem hiding this comment.
If the File System API was more widely supported.. but for now it would be too much added complexity for something that should be quick.
There was a problem hiding this comment.
Closing the modal makes sense to me. It'll be a nicer ux once we have toasts.
Description
Doing the file download with blob + createObjectUrl solution. Tested in electron and chrome. Including e2e
Checklist
Motivation and Context
Open Questions
Dependents
Types of changes