New dataset actions not really working

[bpedersen2]

Summary

I tried to configure the new dataset actions (pointing download to the zipservice url)

Steps to Reproduce

configure a url pointing to the zip service

Current Behaviour

There is no request arriving at the zip service, and in the console one gets:

Form submission canceled because the form is not connected
perform_action	@	596.ecc3c8e6b73e4a52.js:1 ==> see below

                    this.form = document.createElement("form"),
                    this.form.target = this.actionConfig.target,
                    this.form.method = this.actionConfig.method,
                    this.form.action = this.actionConfig.url,
                    this.form.appendChild(this.add_input("auth_token", this.userApi.getCurrentToken().id)),
                    this.form.appendChild(this.add_input("jwt", this.jwt)),
                    this.form.appendChild(this.add_input("dataset", this.actionDataset.pid)),
                    this.form.appendChild(this.add_input("directory", this.actionDataset.sourceFolder));
                    for (const [p,m] of this.files.entries())
                        ("all" === this.actionConfig.files || "selected" === this.actionConfig.files && m.selected) && this.form.appendChild(this.add_input("files[" + p + "]", m.path));
                    this.form.submit(),
                    window.open("", "view")
                }

Expected Behaviour

The data arrive at the zip service

Extra Details

https://github.com/SciCatProject/frontend/pull/1528/files/2099d8a0cb8929078ae108a5bcc239b46a835d05#r1707136164

[nitrosx]

@bpedersen2 thank you for testing this feature.
In firefox, I'm not able to see the same error, but I can confirm that the form is not submitted. I will check soon in Chrome.

Based on the message that you posted, I found the following post that might help us in solving the issue:
https://stackoverflow.com/questions/42053775/getting-error-form-submission-canceled-because-the-form-is-not-connected

And also the following:
https://stackoverflow.com/questions/13001830/creating-and-submitting-a-form-with-javascript

I will work on it today or tomorrow, test it locally and create a PR if it solves the issue.
This confirm to push to a higher priority reviewing and creating more FE E2E testing.

[bpedersen2]

I would prefer to directly use the fetch api here.
If you need form-data, see here:
https://stackoverflow.com/questions/46640024/how-do-i-post-form-data-with-fetch-api

But I would make this configurable to either post json or formdata anyway.

[nitrosx]

I want to add some e2e testing, so I will implement one of the solutions proposed in the post.

[nitrosx]

Some more resources:

• https://stackoverflow.com/questions/5684303/javascript-window-open-pass-values-using-post
• https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

[nitrosx]

First I will fix the form submission, than we can implement the call with fetch.
It is unclear to me how to use fetch to make a POST request and show the results returned in a different window.

[nitrosx]

There is matching BE PR 1392 to update default FE config provided by the BE