fix unformatted response preview safari

[ezkemboi]

Overview

Fix formatting issue of JSON when using Safari Browsers

• fixes Response preview appears unformatted in Safari #620

Demo

Notes

Here is a function I did not use and commented it in editorDidMount prop in MonacoEditor Have not removed yet

function editorDidMount(editor: any) {
  const editorHasText = !!editor.getModel().getValue();

  if (editorHasText) {
    formatDocument(editor);
  }

  editor.onDidChangeModelContent(() => {
    formatDocument(editor);
  });
}

function formatDocument(editor: any) {
  editor.getAction('editor.action.formatDocument').run();
}

Here is the replacement that seemed to work for all browsers

 body = JSON.stringify(body).replace(/(?:\\[rnt]|[\r\n\t]+)+/g, '');
 // remove whitespace, tabs or raw string (Safari related issue)
 body = JSON.parse(body); // convert back to javascript object
 body = JSON.stringify(body, null, 4); // format the string (works for all browsers)

We can discuss more on the above code under reviews and way forward to allow all browsers to format JSON effectively.

Testing Instructions

• Need to be tested using Safari, Chrome, Edge, and/or another browser
• Check on the formatting of response preview [Need to be JSON format]

[ezkemboi]

@thewahome and @ElinorW I have this PR that can offer a room for discussion.

[jobala]

LGTM 👍

[jobala]

@ezkemboi clean up the PR and this should be good to go.

[ezkemboi]

I will be working on cleaning this one @jobala

[ezkemboi]

Ping @jobala

[jobala]

Thanks @ezkemboi. @thewahome this fails with azure_static_web_apps_api_token was not provided. how can I fix this?