siren-js/api-browser

Siren API browser that uses Siren.js

Siren.js API Browser

Development

# install dependencies
$ pnpm install

# run the app locally in development mode
$ pnpm dev
# or
$ pnpm start
# the page will automatically reload as you make edits

# build the app for production to the `dist` folder
$ pnpm build

Deployment

Any push to main kicks off the GitHub action that builds the app and deploys it to GitHub pages.

api-browser's Issues

Form Control Label Missing for `radio` Fields

Support for adhoc parameters on an action post

Sometimes the action is dynamic and unknown until you send the message. It would be good to be able to just add other parameters to send with the request if needed.

Error Response Reporting

Need to report non-2XX statuses to the user

Ignore Field type casing

Add autocomplete attributes

Getting the following error with fields whose type is password

[DOM] Input elements should have autocomplete attributes (suggested: "current-password"): (More info: https://goo.gl/9p2vKq)
<input class=​"input" type=​"password" name=​"password">​

Navbar Disappears on Touch Devices

Support for passing adhoc headers

When needing to pass security, it would be great to have a way to put adhoc headers maybe at the top somewhere so I can pass an authorization header with some value to go through the screen. Doing specific security level support would be great but I think realistically, the most valuable is just to let me put something there.

Resolve embedded links

Might be nice to have an option to resolve embedded links rather than follow them.

Should that be the default behavior? Some users may always want to just follow embedded links.

Should there be a setting for that? Perhaps we update the default behavior and add a "Follow embedded links" setting.

Should we present both options each time? This feels cumbersome to users.

Support for “select” type

With support for the radio type to perform like a select drop-down box, support should also be added for the select type to perform similarly. Some thought may be needed to support multiple selections but as a version 1 supporting select one should be supported.

Property Names and Values are Misaligned on Mobile and Tablet

Cancelable Requests

Add the ability to cancel a request

Misaligned Property Names and Values

Properties with an empty string value may cause misalignment.

For example, if an API serves up these properties:

{
  "foo": "bar",
  "bar": "",
  "baz": 42
}

This is displayed:

This is caused by displaying names and values in independent columns.

Display Original JSON Text

In addition to the current state source JSON, we should also preserve and display the original JSON text

Support Checkbox Fields

Add support for Fields with type of "checkbox".

Handle Non-Siren Responses

Need to figure out how to handle non-Siren responses

Update README

Need to update README.md to better describe what the project is, how it works with the Siren.js Client, and how it renders Actions as forms for submission.

Only display raw content for non-binary formats

Support radio fields

Would like to support radio fields.

I propose an options extension. It would be an array of objects, each of which contain a value and optional title properties. The value property is the value that the ancestor field's value is set to when that option is picked. The title is a string to customize the label, which defaults to the option's stringified value.

{
  "name": "hogwartsHouse",
  "type": "radio",
  "options": [
    { "title": "Gryffindor", "value": "g" },
    { "title": "Hufflepuff", "value": "h" },
    { "title": "Ravenclaw", "value": "r" },
    { "title": "Slytherin", "value": "s" }
  ]
}

I think this is simpler and clearer than either extension here or here.

As for how this field is displayed, I propose using a <select> drop-drown element instead of actual radio buttons, despite the type name. Radio buttons are clunky and provide poor UX since you can't deselect a radio button. A drop-down on the other hand provides a much better UX since we can easily include a default "Select one..." (or some other label) option whose value defaults to the field's value, which could be null or undefined (absent). That way, the field can be deselected by setting the field's value back to what it was when picking the default "Select one.." option. Something like this.

Display element metadata

It would useful to see things like class and rel values, especially for debugging an API.

Require boolean value for checkboxes

Support Relative URLs

Support relative URLs in Links and Actions by passing the locations as the baseUrl to follow and submit (see this issue).

Relaxed Mode

Currently the browser only supports parsing application/vnd.siren+json. Might be nice to have a "relaxed" mode setting that parses plain JSON (application/json) as Siren.

Support for Multi-Select Dropdowns

Need to add support for <select multiple> elements

Modals Don't Close After Navigation

When opening (for example) an embedded entity modal, then fetching that entity, the modal will reopen with an new embedded entity, if the fetched entity has an embedded entity with the same index as the first.

Tag Actions' Method and Type

Include tags for each action's method and type

Support downloading media types that are not the Siren media type

If an endpoint takes you to a download, it would be nice for the link to provide an option to download it directly. Another option would be for it to have a 4th option outside of raw and parsed to just download the raw version.

Allow configuring Siren.js client

Would like to add some functionality to allow users to configure settings (e.g., custom headers, caching, following redirects) for the Siren.js client follow and submit functions.

Issues Submitting Actions with Enter Key

Pressing enter either a) causes the page to reload, for actions with one field, or b) does nothing, for actions with multiple fields.

Add About/Help section

Would like to add a pop-up that provides an overview of how the browser works and what extensions it supports. Here are a few call outs:

1. Use of Siren.js client
2. How checkboxes work with true/false
3. Radio options extension

Allow input for unknown field types

Fields with an unknown type don't allow any input. These should be presented as a text field.