feat(#593): Show real response in image preview

[Its-treason]

Fixes: #609, #593 & #519

Now the original body is encoded as Base64 and send to the browser. This allows us to render the original Image response as a preview.

I also refactored the QueryResult-component into to separate components, this makes extending it with more preview modes easier.

This PR does change quite a lot, so I would appreciate anyone testing it locally to check if there are any issues.

---

Now that we have the original response, we can start working on other issues, like: #539 and implement other preview modes.

[Sl-Alex]

What about using charset from "Content-Type" with a fallback to UTF-8? Something like this:

      const content_type = response.headers['content-type'];
      // RegExp magic from https://stackoverflow.com/a/33192813
      let charset = new RegExp('/charset=([^()<>@,;:\"/[\]?.=\s]*)/i').exec(content_type);
      if (charset == null) {
        charset = "utf-8"

[martinsefcik]

@Its-treason Great!

One small note. Can we use raw response body size now for displaying in UI in case content-length header is missing, because I think the fix implemented in #520 was I would say just temporary workaround which does not show real size of transferred body.

And maybe also in cases if content-length is present I would prefer raw body size to be displayed.

[Sl-Alex]

@Its-treason I like the way you did it. I tried to do the same before raising #609, and it even worked, but your solution is definitely better.
I have only one general comment: do we need more or less the same for CLI?

[Its-treason]

Hey everyone, thank you for feedback! Really appreciate it!

I update my PR: I noticed that runners were broken, because I need to convert response.data from the buffer to a string/object.

What about using charset from "Content-Type" with a fallback to UTF-8? Something like this:

      const content_type = response.headers['content-type'];
      // RegExp magic from https://stackoverflow.com/a/33192813
      let charset = new RegExp('/charset=([^()<>@,;:\"/[\]?.=\s]*)/i').exec(content_type);
      if (charset == null) {
        charset = "utf-8"

That sounds like a very good idea, I implemented it!

@Its-treason Great!

One small note. Can we use raw response body size now for displaying in UI in case content-length header is missing, because I think the fix implemented in #520 was I would say just temporary workaround which does not show real size of transferred body.

And maybe also in cases if content-length is present I would prefer raw body size to be displayed.

Also didn't think of this at first, also implemented it!

@Its-treason I like the way you did it. I tried to do the same before raising #609, and it even worked, but your solution is definitely better. I have only one general comment: do we need more or less the same for CLI?

Yes, we could also add this in CLI, but It's currently not needed because: CLI has its own code for request preparation and the buffer is not accessible to tests and assertions in the app.

We should probably change this with: #226

[helloanoop]

@Its-treason I am going to review this today and get it merged.

Is this PR Good to Merge from your side ?

[Its-treason]

@Its-treason I am going to review this today and get it merged.

Is this PR Good to Merge from your side ?

Sorry for the late reply, I was still testing this during work with a “production” environment. Everything was working fine, so It's ready to merge!

[helloanoop]

Fantastic, @Its-treason !! Many Thanks.