Inventory Table with starter app can be confusing to implement

[ehelms]

I'll start by saying I am not sure if this is a bug or a docs issue when trying to use the inventory table component from a project that started with the insights-frontend-starter-app. I will give my best explanation and understanding of what I experienced.

The insights-frontend-starter-app includes a base integration with the ReducerRegistry for applications to get started registering their reducers with the store. Assuming an application begins using this integration, and decides to add the use of the insights-frontend-components inventory table per the instructions an error is encountered:

0.js:4959 Uncaught (in promise) TypeError: Cannot read property 'register' of undefined
    at SystemsTable._callee$ (0.js:4959)
    at tryCatch (runtime.js:62)
    at Generator.invoke [as _invoke] (runtime.js:288)
    at Generator.prototype.(:1337/insights/platform/drift/anonymous function) [as next] (https://ci.foo.redhat.com:1337/insights/platform/drift/js/vendor.js:2696:21)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)

This led me to re-read the integration page and see the following:

These examples count on using insight's registry, if you are using different make sure that you pass along correct one and don't use registryDecorator

To which I assumed, based on my use of the insights-frontend-starter-app I needed to use the registry created in store/index.js. If I switch to importing the local registry and attempting to register with it, a new error is encountered:

asyncToGenerator.js:6 Uncaught (in promise) TypeError: Cannot read property 'params' of undefined
    at o.value (Inventory.83193bc9.js:5)
    at commitLifeCycles (react-dom.development.js:14532)
    at commitAllLifeCycles (react-dom.development.js:15738)
    at HTMLUnknownElement.callCallback (react-dom.development.js:145)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:195)
    at invokeGuardedCallback (react-dom.development.js:248)
    at commitRoot (react-dom.development.js:15908)
    at completeRoot (react-dom.development.js:17296)
    at performWorkOnRoot (react-dom.development.js:17224)
    at performWork (react-dom.development.js:17128)

After some experimenting, turns out that what is missing a specific reducer in the registry from here. Which, if I add to to the insights-frontend-starter-app then everything links up and works, e.g.

    registry = new ReducerRegistry({}, [
        promiseMiddleware(),
        ...middleware
    ]);

    registry.register({
        routerData: (state, { type, payload }) => {
            return ({
                ...state,
                ...type === '@@INSIGHTS-CORE/NAVIGATION' ? payload : {}
            })
        }
    })

The other way I solved this was to switch away from ReducerRegistry per the starter app and instead use the registry directly. That is, changing the store.index.js code from the starter app to the following instead:

import promiseMiddleware from 'redux-promise-middleware';
import { getRegistry } from '@red-hat-insights/insights-frontend-components';

import { reducers } from '../SmartComponents/modules';

let registry;

export function init (...middleware) {
    if (registry) {
        throw new Error('store already initialized');
    }

    registry = getRegistry({}, [
        promiseMiddleware(),
        ...middleware
    ]);

    registry.register({
        compareReducer: reducers.compareReducer,
        statusReducer: reducers.statusReducer
    });

    return registry;
}

This then enabled me to use the inventory table instructions as is without any modification.

1. Is this a bug?
2. If not a bug, I would recommend updating either the store/index.js for the insights-frontend-stater-app to use getRegistry or the inventory table docs to expand on required changes to the registry in an app based on the starter app

The goal here being to improve the experience for developers and allow using the inventory components out of the box.