Lekko React Plugin Components

Alert Banner

Usage:

1. clone this repo into the same parent directory as the webapp
2. run yarn build in the react-components folder
3. add "@lekko/react-components": "file:../react-components" to your dependencies in package.json
4. in App.tsx in the webapp project, change the routes to the following:

const router = createBrowserRouter(
    createRoutesFromElements(
            <Route element={<AlertBannerProvider settings={lekkoSettings} />}>
              ... all existing routes
            </Route>
    )
)

There are 2 ways to set global contexts

1. Set it with the setGlobalContext method from LekkoGlobalContext

const userLoggedInInfo = useRecoilValue(user)
const globalLekkoContext = getAuthenticatedContext(userLoggedInInfo)
const { setGlobalContext } = useContext(LekkoGlobalContext)
// this could also be an atom effect or based off of a user action
useEffect(() => {
    setGlobalContext(globalLekkoContext)
}, [userLoggedInInfo])

2. Through the intermediate provider

<LekkoIntermediateConfigProvider
            configRequests={AUTH_CONFIGS}
            globalContext={globalLekkoContext}>
...
</ LekkoIntermediateConfigProvider>

For local testing only: https://github.com/lekkodev/webapp/pull/442

The banner (we can update styling/effects):

What happens for paths that are specified as blocked/down in the config:

Dynamic Logging

TODO