Preset - Select and Details button triggers broken functionality

[JovicaConkic]

@mdasberg @Pineapples @Remco75 When user clicks on Select button of presets page, code throws error and we are having broken functionality.

main.6860696422ebb3f0.js:1 ERROR 
p1 {headers: Qa, status: 200, statusText: 'OK', url: 'http://localhost:4400/ngapimock/presets', ok: false, …}
error: {error: SyntaxError: Unexpected token S in JSON at position 0 at JSON.parse (<anonymous>) at XMLHtt…, text: 'Selected preset [My test preset]'}
headers: Qa {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure during parsing for http://localhost:4400/ngapimock/presets"
name: "HttpErrorResponse"
ok: false
status: 200
statusText: "OK"
url: "http://localhost:4400/ngapimock/presets"
[[Prototype]]: xb

Problem is that PresetsService service selectPreset method is making HTTP request expecting (by default) json but actually receving text.

Solution:
Existing code:

/**
   * Selects the preset.
   * @param {SelectPresetRequest} request The request.
   * @return {Observable<Object>} observable The observable.
   */
  selectPreset(request: { name: string }): Observable<any> {
    return this.http.put(`${this.BASE_URL}/${PRESET_URI}`, request);
  }

should be:

/**
   * Selects the preset.
   * @param {SelectPresetRequest} request The request.
   * @return {Observable<Object>} observable The observable.
   */
  selectPreset(request: { name: string }): Observable<any> {
    return this.http.put(`${this.BASE_URL}/${PRESET_URI}`, request, {
      responseType: "text",
    });
  }

The other issue is when user clicks on presents page on Details button. Modal is broken when selected preset doesn't have defined variables object beside name and mocks property. variables are not mandatory not all presets will have it and it would be nice to have secured code when opening modal.

Solution:

In PresetDetailsComponent piece of code:

this.variablesDataSource.data = Object.keys(this.data.variables).map((key) => ({
      key: key,
      value: this.data.variables[key],
    }));

could be secured liek this:

this.variablesDataSource.data = (
      Object.keys(this.data.variables) || []
    ).map((key) => ({
      key: key,
      value: this.data.variables[key],
    }));

It would be really good to have those fixes in place. I would contribute with those fixes but it looks like it is impossible. Thanks in advance.

[mdasberg]

🎉 This issue has been resolved in version 3.1.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[mdasberg]

@JovicaConkic could you verify if 3.1.1 fixes the issue?

[JovicaConkic]

Hi @mdasberg yes I just verified. Issue was fixed with v3.1.1 release. Thanks a lot.

[mdasberg]

@JovicaConkic thanks for reporting it :)