Headers completion suggestions

[albertotn]

When I want to create a rest request, is quite often the same thing: define the method, url, authorization and content-type.
It's possible to add a quick (aka suggestion list) for contentype in headers? For both name and values, like in postman:

[mirkoperillo]

This could be a good helper to improve experience

[nikhilraojl]

Hi @mirkoperillo, I was looking this issue. Basically I had two approaches

• First one was using datalist tag. The problem is that there is no Knockoutjs binding for datalist tag. This is not allowing me to use foreach binding for list all headers from an array (I haven't used much KO and I may be wrong here, please correct me).
• Second one is to use a floating div(using position: absolute & z-index) when the input is in focus. The issue here is that many features like using tab key or down key to select an item are lost and will need implementation. Some aria features will be missing as well. But this one is relatively easy to implement

Any help on this would be appreciated 🙇

[mirkoperillo]

@nikhilraojl I have to think a little bit about it.

Meanwhile some details.

This feature should be added to the entry-list component.

entry-list component is used in many place in Resting, everywhere a list of values is needed. So it is used in:

• context dialog,

  resting/src/index.html

  Line 247 in 9d2fece

  <entry-list params="entryList : selectedCtx.variables"></entry-list>

• Request: Headers tab,

  resting/src/index.html

  Line 177 in 9d2fece

  <entry-list params="entryList : request.headers" data-bind="visible : showRequestHeaders"></entry-list>

• Request: Body tab
  • type: form-data,

    resting/src/js/app/components/request-body/requestBody_view.html

    Line 32 in 9d2fece

    <entry-list params="entryList : formDataParams, enableFileEntry: true" data-bind="visible : bodyType() == 'form-data'"></entry-list>

  • type: x-www-form-urlencoded,

    resting/src/js/app/components/request-body/requestBody_view.html

    Line 33 in 9d2fece

    <entry-list params="entryList : formEncodedParams" data-bind="visible : bodyType() == 'x-www-form-urlencoded'"></entry-list>

• Request: Querystring tab,

  resting/src/index.html

  Line 178 in 9d2fece

  <entry-list params="entryList : request.querystring" data-bind="visible : showQuerystring"></entry-list>

The suggestion feature as presented here is interesting only for the Headers tab, so this feature should be optional (possible to enable/disable). Something like it has been already implemented for the file field

resting/src/js/app/components/request-body/requestBody_view.html

Line 32 in 9d2fece

<entry-list params="entryList : formDataParams, enableFileEntry: true" data-bind="visible : bodyType() == 'form-data'"></entry-list>

resting/src/js/app/components/entry-list/entryItemVm.js

Line 22 in 9d2fece

return function EntryItemVm(name, value, enabled, valueFile = null, enableFileEntry = false, entryType = 'Text') {

This is a very useful feature and it is good to implement as soon as possible, but we should find an easy way to do it without too many effort, because the long-term idea is to move everything from knockoutjs to vuejs (as we have already started doing).

[mirkoperillo]

First one was using datalist tag. The problem is that there is no Knockoutjs binding for datalist tag. This is not allowing me to use foreach binding for list all headers from an array (I haven't used much KO and I may be wrong here, please correct me).

@nikhilraojl I think datalist is the most easy solution to implement. You can do something like this (an example using solar system planets)

in the html (entry-list/entryList_view.html)

<input type="text" list="planets" data-bind="value: planet"/>

<datalist id="planets">
<!-- ko foreach: solarPlanets -->
<option><span data-bind="text: $data"></span></option>
<!-- /ko -->
</datalist>

in the js file (entry-list/entryLisVm.js)

function AppViewModel {
    this.planet = ko.observable('')
    this.solarPlanets = ko.observableArray(["Plutone", "Giove", "Terra"])
}

If you are interested into work on this, open a draft pull request with work-in-progress code and I will be happy to help and advise you about

[nikhilraojl]

@mirkoperillo Please take a look at #191 when possible, thanks

[mirkoperillo]

@nikhilraojl I am going to give it a look in the next days. Thank you for your help

[nikhilraojl]

@mirkoperillo you mentioned in this issue that the idea is to move to vuejs. I am interested in helping with this. Please let me know if there is anything I can help with any current issues to focus before transitioning or any blockers

[mirkoperillo]

@nikhilraojl yes this is absolutely the roadmap. The idea is an incremental and total move to vuejs in the next period.
I'm very happy to know you are interesting in helping with the project.
Watch the project because in the next period I'm going to open some issues about these activities.