This commit integrates Mock Service Worker into the browser. This will
allow us to use MSW to mock network requests at the API level from a
browser using the same MSW fixtures that we are currently using for our
testing. This means we will be able to have the same environment for
debugging, development, and testing if desired.
To develop using MSW, the developer will now use `npm run
stage-beta:msw`. The dev server will start as normal, but now any
request made that has a corresponding fixture will be intercepted and
the fixture used to generate the response.
This adds an MSW=TRUE environment variable to the run script. When this
environment variable is present, the dev webpack config will copy
mockServiceWorker.js into the build directory (/dist) using CopyPlugin
and will add some necessary headers to the dev server's responses using
DefinePlugin.
The insights platform is moving to react router v6, meaning router
contexts can no longer be nested. As a result all applications will end
up sharing the same `BrowserRouter`.
Switch to using the release (`/` or `/beta/`) as a basename for the
BrowserRouter, and offload the full path (`/insights/$appname`) to the
individual routes. This makes it easier to drop the BrowserRouter in
image builder for the platform one in future.
This commit adds Redux Toolkit as a dependency. Adding Redux Toolkit is
beneficial because it will allow us to use the current best-practice Redux
development patterns and tools as well as reduce the number of
dependencies. Redux Toolkit is backwards compatible with existing Redux code,
and therefore works with all of the current actions and reducers.
The store is now created using Redux Toolkit's configureStore(). Previously, a
custom store creator developed by Red Hat Insights was used. However,
this is actually not required for Insights apps, and creating the store using
configureStore() is necessary to take advantage of Redux Toolkit. For
instance, the store can now be inspected using the Redux devtools in the
browser.
This commit removes the redux-logger middleware. It is no longer
necessary, as the Redux development tools can now be used to easily inspect and
reason about the redux store and its state.
The Thunk middleware dependency has also been removed, as Thunks are already
included in Redux Toolkit.
The redux-promise-middleware dependency has been left in place for now,
but its functionality is also available in Redux Toolkit and it may be
considered for removal in the future.
Using Redux Toolkit will also allow us to move to the `Slice` pattern when
defining actions/reducers in the future if we wish. This will make
writing, reasoning about, and debugging the code related to the Redux
store much easier.
Get rid of duplicate entry points.
Depending on the NODE_ENV, add the logger middleware in AppEntry.
Filter out undefined items to avoid 'middleware is not a function' error.
