Extend Plugin Hook Helpers

[andrew-waters]

• Insomnia Version: 5.15.0
• Operating System: OS X 10.13.4

Details

Related in principle to #853, what I would like to be able to do as a plugin developer is have some control over the UI when dealing with responses.

As outlined in that issue, my overall aim here is to automatically validate the response body against a spec file the user supplies in their environment config (atm swagger).

There are a few scenarios that the validation could invoke:

• there are 1 (or more) errors with the actual validation - schema does not match
• the path is missing from the spec (so it is not complete and we cannot validate)
• the path exists, the response body matches the spec, we have positive feedback

At the moment, the only real way of displaying feedback to the user is via an alert. This isn't great on a number of fronts - first of all, you don't want to alert to a success and second of all, you may have multiple errors which does not fit the dialog style.

This is potentially more of a discussion issue that a full on request, but having insomnia expose some element of the interface that I can customise via the API would be amazing. Whilst I'm just working through this at the moment, my first thought would be something like the status code indicator - I want to show a Green icon when everything's ok, optionally with an SVG and some text.

When there is something missing I want to warn, but not block.

When there is one or more failures, I want to put a big red icon to notify the user - and then clicking on it opens up a tab with more detailed messages. I've mocked up a few examples here.

I appreciate this is a large feature to request but I think it's worthy of some discussion as it may already be on the roadmap.

Example of a successful validation:

Example of some missing path from the spec:

Example of a failed validation:

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[andrew-waters]

Any thoughts on the general principal of this @gschier ? I appreciate this exact implementation might not be the desired one but being able to interact with the UI from a plugin would be very beneficial

[gschier]

Hey @andrew-waters, sorry for not responding to this earlier.

I'm still trying to decide how plugins might add/modify the UI. I'd love to get your feedback on this.

For simple things like adding an extra status tag to the UI (like in your screenshot) it would be easy to do with a configuration-based approach, similar to the alert() method.

context.app.addStatusTag({label: 'Matches Spec', color: 'success'})

However, I'm guessing that you'd want to at least have some sort of custom HTML/CSS for a new response tab. This is the part that I'm still trying to decide on.

context.response.newTab({title: 'Spec', body: '<h1>some HTML or React component</h1>'})

The above example works, but if the user wants to add components like buttons, dropdowns, code editor, etc, there is no way to use the components that already exist in Insomnia. Perhaps that doesn't matter for the start, though, and we can figure that one out later.

[gschier]

Maybe the app could expose some core React components on the context object. Something like this perhaps.

context.response.newTab({title: 'Spec', body: (
  <div>
    <p>Hello World</p>
    <context.Button>Click Me</context.Button>
  </div>
)})

[andrew-waters]

Yeah, they both sound like good features - although I think you're correct about putting a decision off until later on in the process because this seems to be unchartered territory so far.

Being able to add a status tag initially would be a major win. Being able to give it a label and value to match the slight bolding already un the UI would be a good addition:

context.app.addStatusTag({label: 'Spec', value: 'Matches', color: 'success'})

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[mathieuk]

Any movement on this? FWIW, I'd like to be able to add status tags too. I'd like to use it to show certain debug information my API endpoints return in dev-mode.