fix(#732) Option to encode query params

[CarlosLecval]

Description

solves: #732

Basically just added a checkbox to toggle the option to encode the query parameters as discussed in the issue

296139371-0a38a6e9-1a46-4487-90fb-60912fb28a35.mov

[Fabrice-Deshayes-aka-Xtream]

Hello. This PR would be very useful. @helloanoop, do you plan to merge this feature?

[CarlosLecval]

I'd be glad to fix the conflicts or change anything for this to be merged 👍

[Benoit12345]

Hello @helloanoop or @lohxt1 ,
Is it planned to (fix conflicts +) merge this feature in next release please ? It would be really great !

[divinvishnu]

Hey CarlosLecval, are you planning on merging this in soon? It is a much welcome PR, so please ask if you need any help getting things resolved for this PR.

[Benoit12345]

Hello,
just a little up to know if this feature will be available in one of the next releases or if there're some blocking points about it ?

[Benoit12345]

hi @helloanoop,
1 year later PR creation, could you tell us if this feature is going to be merged or cancelled please ?

[acoluzzi]

it's a bit sad to see this stalling here, this feature will be very useful

[merzeri]

Adding on to this. It's tremendously frustrating for it to make assumptions about encoding or not-encoding strings that don't seem to be an issue with Insomnia. In my case, I'm making requests to an API in which most endpoints expect a criteria parameter to be given a JSON object containing the query details -- sort of a flattening of GraphQL to JSON REST APIs. Something the request is encoding prevents this from working correctly, netting a 400 error from the remote Tomcat server.

EDIT: Here's a quick and dirty pre-script as a workaround in the meantime. You can set it on a collection or folder.

let url = req.getUrl();
if (url.includes("?")) {
  let urlParts = url.split("?");
  let urlParams = urlParts.slice(1,).join("?").split("&");
  urlParams = urlParams.map(param => {
    if (param.includes("=")) {
      let paramParts = param.split("=");
      let paramValue = paramParts.slice(1,).join("=");
      paramValue = encodeURIComponent(paramValue);
      return paramParts[0] + "=" + paramValue;
    } else {
      return param;
    }
  })
  let newUrl = urlParts[0] + "?" + urlParams.join("&");
  console.log(newUrl);
  req.setUrl(newUrl);
}

[helloanoop]

After reviewing the related issues, I believe the root cause of many of them is an inconsistency in how Bruno handles URL encoding between the below two components

• URL Input Box
• Query Parameters Table

Currently, Bruno automatically decodes the URL from the input field using URLSearchParams. However, when changes are made in the query parameters table, those changes are not encoded before updating the URL in the input field. This inconsistency leads to confusion and creates a number of edge cases.

Another challenge is that we cannot determine whether the URL entered in the input field is already encoded. Given this uncertainty, it is not ideal for Bruno to assume the URL is encoded and then proceed with decoding while populating the query parameters table.

Solution
To resolve this, we are considering the following approach:

1. Bruno will not perform any encoding or decoding in the UI. The URL input field and the query parameters table will remain identical.
2. At the time of sending the request, Bruno will encode the query parameters using JavaScript's encodeURIComponent function. This will be the default behavior, but users will have the option to disable encoding via a setting if needed.

Tradeoff:
With the current implementation, when users input an encoded URL, Bruno decodes it before displaying it, making it easier to read. With the new approach, encoded URLs will remain as entered, which may reduce readability in some cases.
Ex: ?from=2023-10-23T00%3A00%3A00%2B00%3A00&to=2023-10-23T23%3A59%3A59%2B00%3A00

[Benoit12345]

thanks for your answer @helloanoop .
When you talk about a setting, I hope you thought to a request setting because, as you said:

At the time of sending the request, Bruno will encode the query parameters using JavaScript's encodeURIComponent function.

So it's request sending time which is important. The encoding may have to be used for a request and not for another.
If it is the case (and a easy way to set if from Bruno' interface with a right click, or a request properties or something like that), it seems to be fine from my point of view.

[merzeri]

This sounds like an excellent move on the project! I'm not sure what Insomnia does by comparison (as it is not open-source after all) but I imagine it is very much something like this.

[Benoit12345]

I think this MR could be closed since the release 2.8.0 proposed a settings by request allowing to automatically encode/decode query parameters (cf. #5089 )

[maintainer-bruno]

Hey @CarlosLecval,

Thanks so much for taking the time to contribute and open this PR! 🙌

The issue this PR aimed to address has since been handled in a different way through #5089, so we’ll be closing this one to avoid duplication. That said, we really appreciate your effort and initiative—please don’t hesitate to contribute again in the future!

Thanks again!