Add styled-components to the app-desk, it will help us to create
easily styled components.
We create 2 components, Box and Text, it is 2 generic components
that we help us to style quickly html elements. They use
the power of styled-components and Cunningham's design system.
We export the app in the out folder. This is a static export,
so our app can be deployed and hosted
on any web server that can serve HTML/CSS/JS static assets.
Create a fetch wrapper for the API calls, it will handle:
- add correct basename on the api request
- add Bearer automatically on the api request
- logout automatically on 401 request
Add test-e2e to people.yml, it will run e2e tests on every PR.
Steps:
- set env vars for e2e tests
- build and start docker servers
(backend, keycloak, DB)
- install playwright
- build apps
- run e2e tests
- save reports
Install playwright, adapt the config file and add a scripts to
run the tests.
e2e testing will monitor all our frontend applications,
so we install it in the frontend folder.
It configures the base of our monorepo.
- Adapt the tests to use React-Query
- Install fetch-mock to mock the fetch requests with Jest.
- Create a test to show how to mock the fetch requests
with fetch-mock
The admin was broken as we did not worry about it up to now. On the frontend
we want to use OIDC authentication only but for the admin, it is better if
the default authentication works as well. To allow this, we propose to add
an "email" field to the user model and make it the identifier in place of
the usual username. Some changes are necessary to make the "createsuperuser"
management command work.
We also had to fix the "oidc_user_getter" method to make it work with Keycloak.
Some tests were added to secure that everything works as expected.
As a prove of concept, to check the full process of our token,
we create a basic feature Teams.
This feature can create a team and list all teams.
We use react-query to manage the cache and the request to the API.
Integrate keycloak with the frontend.
We use the keycloak-js library to handle the
authentication and authorization.
We installed Zustand to handle the states of the
application.
We store the token and auth process in authStore.
Keycloak is a open source identity and access management
for modern applications and services.
- add keycloak server in docker-compose
- add keycloak in frontend
eslint is not enough for css, so we need a css linter too.
This commit adds stylelint to the project, we configure it
with prettier and add a check during the build process.
Integrate cunningham design system into app desk.
It comes with some boilerplate code that will have to be
adapted to our needs when we will get the design.
Used https://github.com/openfun/joanie as boilerplate, ran a few
transformations with ChapGPT and adapted models and endpoints to
fit to my current vision of the project.
