elixir-cloud-aai/cloud-components

feat: copy curl command button

Opened this issue · 4 comments

Description

A nice feature of Swagger UI is that for each request submitted via the UI, an equivalent cURL command will be generated. This allows users to easily generate and replay requests via the CLI.

It would be nice if for the submission of workflow and task runs (and possibly in other cases) such a cURL command would be generated as well for the user's convenience.

Possible solution(s)

One way of implementing this without distracting the user too much or showing too much text would be by placing a small button with a clipboard icon next to the "Submit" button. When pressed, the cURL command is copied to the clipboard.

Hi @uniqueg, will this feature be exclusively for "form components" or will it also be applicable to other components, such as displaying task or run lists, where any network call occurs (similar to Swagger)?

Hi @uniqueg, will this feature be exclusively for "form components" or will it also be applicable to other components, such as displaying task or run lists, where any network call occurs (similar to Swagger)?

Hmm, good question. I think it would actually be nice in all components that translate well to specific API calls such as for the operations you mention. But I think it's somewhat less important, so maybe it will depend on how well you could incorporate it without disrupting the user experience. Also, it might be good to have a config toggle option for that, in case consumers of the components don't like that feature (or because their APIs are not public/firewalled).

Ahh, how about having a tree like this at the end of each component https://shoelace.style/components/tree#lazy-loading. This approach unobtrusively records every request made within the component, providing a copyable cURL command for each request. This implementation ensures transparency without compromising the user's UI/UX experience. @uniqueg

Ahh, how about having a tree like this at the end of each component https://shoelace.style/components/tree#lazy-loading. This approach unobtrusively records every request made within the component, providing a copyable cURL command for each request. This implementation ensures transparency without compromising the user's UI/UX experience. @uniqueg

Nice idea, but how do you want to display the commands in the list in such a way that they are distinguishable from one another? The complete commands are probably too long to render nicely, and if you shorten them in some way, you may lose some or all distinguishing values.

Also, users can browse task/workflow runs via the list view components. And when exploring details of any one individual run, I think there should be an option to replay/clone/copy a run (i.e., open the corresponding "create run" component and autopopulate with values of previous run). If we have that and the ability to copy the cURL command for a single command, then we'd automatically support copying cURL commands for old runs via this mechanism. And if we find that to be a common operation and we want to make that easier, we could add a button or context menu option to copy a cURL command to reach row of the list view directly.

Btw, I think the "Copy cURL command" button should have the same behavior as the submit button: grayed out and inactive until enough data has been entered to allow triggering a run.