Handle error during api documentation parsing

[mauchede]

This PR should fix issues #43 and #31.

---

This PR handles parsing errors (see my PR on dunglas/api-doc-parser):

• if the parsing is resolved, the "classic" behavior is kept (rendering AdminBuilder).
• if the parsing is rejected, a message will be shown.

In all cases, the user has the possibility to define some customRoutes. These routes will be added to the customRoutes defined via properties.

---

With this PR, we can now use api-platform/admin on a fully secured API. For example:

import { AUTH_ERROR, AUTH_LOGIN, AUTH_LOGOUT } from 'admin-on-rest';
import parseHydraDocumentation from 'api-doc-parser/lib/hydra/parseHydraDocumentation';
import { fetchHydra as baseFetchHydra, HydraAdmin, hydraClient as baseHydraClient } from 'api-platform-admin';
import React from 'react';
import { Redirect } from 'react-router-dom';

// Define constants

const ENTRYPOINT = 'http://127.0.0.1:8000';
const LOCAL_STORAGE_KEY_TOKEN = 'token';

// Define restClient

const fetchHeaders = {
    'Authorization': `Bearer ${window.localStorage.getItem(LOCAL_STORAGE_KEY_TOKEN)}`,
};

const fetchHydra = (url, options = {}) => baseFetchHydra(url, {
    ...options,
    headers: new Headers(fetchHeaders),
});

const restClient = api => baseHydraClient(api, fetchHydra);

// Define authClient

const authClient = (type, params) => {
    switch (type) {
        case AUTH_ERROR:
            if (401 === params.status || 403 === params.status) {
                window.localStorage.removeItem(LOCAL_STORAGE_KEY_TOKEN);
                window.location.reload();
                break;
            }

            return Promise.resolve();

        case AUTH_LOGIN:
            const body = new FormData();
            body.append('username', params.username);
            body.append('password', params.password);

            const request = new Request(`${ENTRYPOINT}/login`, {
                method: 'POST',
                body,
            });

            return fetch(request)
                .then(response => {
                    if (response.status < 200 || response.status >= 300) {
                        throw new Error(response.statusText);
                    }

                    return response.json();
                })
                .then(({ token }) => {
                    window.localStorage.setItem(LOCAL_STORAGE_KEY_TOKEN, token);
                    window.location.replace('/');
                });

        case AUTH_LOGOUT:
            window.localStorage.removeItem(LOCAL_STORAGE_KEY_TOKEN);

            return Promise.resolve();

        default:
            return Promise.resolve();
    }
};

// Define apiDocumentationParser

const apiDocumentationParser = entrypoint => parseHydraDocumentation(entrypoint, { headers: new Headers(fetchHeaders) })
    .then(
        ({ api }) => ({ api }),
        (result) => {
            switch (result.status) {
                case 401:
                    return Promise.resolve({
                        api: result.api,
                        customRoutes: [
                            {
                                props: {
                                    path: '/',
                                    render: () => (
                                        <Redirect to={`/login`}/>
                                    ),
                                },
                            },
                        ],
                    });

                default:
                    return Promise.reject(result);
            }
        },
    );


// Render administration

export default props => (
    <HydraAdmin
        apiDocumentationParser={apiDocumentationParser}
        authClient={authClient}
        entrypoint={ENTRYPOINT}
        restClient={restClient}
    />
);

In this example:

• we add a customRoute if parsing returned a 401 error. This route will redirect to the login page.
• the authClient will refresh current page when a JWT token will be stored. Refresh the page will give the possibility to parse again the documentation, but this time the JWT token will be sent.

[Simperfit]

thanks @mauchede that will be useful !

[Simperfit]

this feels duplicated, is it possible to not duplicate it or it's not worth the complexity ?

[mauchede]

Instead of call setState directly, we could "normalize" the data:

    this.props
      .apiDocumentationParser(this.props.entrypoint)
      .then(
        ({api, customRoutes = []}) => ({
          api,
          customRoutes,
          hasError: false,
          loaded: true,
        }),
        ({api, customRoutes = []}) => ({
          api,
          customRoutes,
          hasError: true,
          loaded: true,
        }),
      )
      .then(state => this.setState(state));

[Simperfit]

maybe this could be a key instead of directly english ?

[dunglas]

Allowing to pass props as suggested by @Gregcop1 looks better to me.

[Gregcop1]

In order to make this more configurable and user friendly, it could be possible to pass messages (loading, error, ...) on props with default values. So my french interface can keep french messages

[Gregcop1]

you should add a className here to allow customization of the render

[Gregcop1]

you should add a className here to allow customization of the render

[Gregcop1]

why .then on the same line?

[dunglas]

Handling @Gregcop1 suggestions would be nice but 👍 , great job!

[Gregcop1]

Have you tried .then(this.setState) ?

[mauchede]

I tried and the following error occurred:

Uncaught (in promise) TypeError: Cannot read property 'updater' of undefined

[mauchede]

It works, if I use:

.then(this.setState.bind(this))

[dunglas]

Thanks @mauchede!

[Superprogrameur59]

It could be very useful to put this example in the official doc of api platform because this "https://api-platform.com/docs/admin/authentication-support" doc is wrong ;)