HTML getting rendered in the response field

[boyney123]

What you did:

Add this HTML snippet inside the response field. And you will see it render...

<div style='width: 500px; background-color: red;'>Hey you!</div>

What happened:

It rendered the HTML

Suggested solution:

I think at the moment mockit will only return JSON responses. It would be nice that HTML does not get rendered as HTML, but also maybe give the user an error if HTML was added?

Option 2: We can try and support HTML as responses but not sure what would be involved.

[samrith-s]

Hey @boyney123,

Good work with Mockit! I'm keen on contributing regularly and immensely to it and also use it in my workplace.

I can take this up. Seems like a good way to delve into Mockit code and get my hands dirty!

[boyney123]

Hey @samrith-s,

Yeah, that sounds great! 🙇 👍

Yeah give it a go and see what you can find. Mockit is using react-json-editor-ajrm for that JSON editor thing, so that might be rendering the HTML, not to sure though.

[samrith-s]

@boyney123 I had a look at it.

The issue seems to be the package react-json-editor-ajrm. It does not allow setting HTML values. It throws multiple errors in the console and doesn't save the value either.

I think it'd be ideal to go for something better. Something a la Postman. Probably something like this: http://securingsincity.github.io/react-ace/

[boyney123]

@samrith-s yeah sure give it ago see what you can do 👍

I think at some point we should validate the inputs in this form. I'm adding some new inputs as part of #4 , so validation will need to come at some point. Looking at Formik at the moment.

But yeah see what you can do, and get that JSON edited and saved with react-ace

[samrith-s]

Agreed. But I think we should ask the user to set a response type mandatorily, and strip the validation from the editor. Another function which validates, based on response content type, before saving it to state.

Right now, it’s too coupled with the editor and dependent on the editor itself, which shouldn’t ideally be the case.

[samrith-s]

Quick question, @boyney123

I have integrated Ace Editor, but I need to save the parser for that route as well. Which validates data. How do I save it to the editRoutes?

I want to add something like editRoutes.parserType which will be one of html, 'markdown or json.

[samrith-s]

@boyney123 Could you maybe help me out here? My React App isn't hot reloading. Keep getting the same error, after running docker-compose up -d.

[wohlben]

Hey @samrith-s

@boyney123 left out the --build flag i mentioned in my PR some time ago - that forces docker compose to rebuild the images and consequently updates the code :)

but hot reloading is also possible by mounting the code from your workstation into the container

looking at the Dockerfile, you should be able to just mount the whole directory into each WORKDIR, so something like this could work... but is untested

version: "3"
services:
  mockit-routes:
    image: "mockit-routes"
    build: "mockit-routes"
    ports:
      - 3000:3000
    volumes:
      - .:/usr/src/mockit-routes
  mockit-server:
    image: "mockit-server"
    build: "server"
    ports:
      - 4000:4000
    volumes:
      - .:/usr/src/mockit-server
  mockit-client:
    image: "mockit-client"
    build: "client"
    ports:
      - 5000:3000
    environment:
      - REACT_APP_MOCKIT_SERVER_URL=http://localhost:3000
      - REACT_APP_MOCKIT_API_URL=http://localhost:4000
    volumes:
      - .:/usr/src/mockit-client

by mounting the whole directory instead of just the routes.json, the used routes json changes from src/config/routes.json to ./configuration/routes.json

ps: feel free to ping me if you have any questions about docker/docker-compose @boyney123, i do have some experience on the topic :)

[boyney123]

Thanks for this @wohlben and helping out. I'm going to raise some docs about how people can contribute and get the whole environment setup as I realise it might be the easiest thing to get up and running (to work on)