particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

README: Update and clean up

Browse source 
This updates and cleans up README a bit. There were two API sections that got merged and moved under frontend development. Some typos were also addressed.
This commit is contained in:
regexowl 2024-07-12 15:14:56 +02:00 • committed by Ondřej Ezr
parent 989671ba95
commit 14b5edb83a
1 changed files with 14 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

39
README.md
View file

@ -10,6 +10,8 @@
## Table of Contents ## Table of Contents
1. [How to build and run image-builder-frontend](#frontend-development) 1. [How to build and run image-builder-frontend](#frontend-development)
1. [Frontend Development](#frontend-development) 1. [Frontend Development](#frontend-development)
1. [API](#api-endpoints)
2. [Unleash feature flags](#unleash-feature-flags)
2. [Backend Development](#backend-development) 2. [Backend Development](#backend-development)
2. [File structure](#file-structure) 2. [File structure](#file-structure)
3. [Style Guidelines](#style-guidelines) 3. [Style Guidelines](#style-guidelines)
@ -27,7 +29,7 @@ worrying if a feature from stage has been released yet.
#### Nodejs and npm version #### Nodejs and npm version
Make sure you have npm@7 and node 15+ installed. If you need multiple versions of nodejs check out [nvm](https://github.com/nvm-sh/nvm). Make sure you have npm@10 and node 18+ installed. If you need multiple versions of nodejs check out [nvm](https://github.com/nvm-sh/nvm).
#### Webpack proxy #### Webpack proxy
@ -90,17 +92,21 @@ Note that this requires you to have access to either production or stage (plus V
#### API endpoints #### API endpoints
API endpoints are programmatically generated with the RTKQ library. This API slice definitions are programmatically generated using the [@rtk-query/codegen-openapi](https://redux-toolkit.js.org/rtk-query/usage/code-generation) package.
sections overview the steps to add new APIs and endpoints.
OpenAPI schema for the endpoints are stored in `/api/schema`. Their
corresponding configuration files are stored in `/api/config`. Each endpoint
has a corresponding empty API slice and generated API slice which are stored in
`/src/store`.
##### Add a new API ##### Add a new API
For an hypothetical API called foobar For a hypothetical API called foobar
1. Download the foobar api openapi json or yaml representation under 1. Download the foobar API OpenAPI json or yaml representation under
`api/schema/foobar.json` `api/schema/foobar.json`
2. Create a new "empty" api file under `src/store/emptyFoobarApi.ts` that has for 2. Create a new "empty" API file under `src/store/emptyFoobarApi.ts` that has following
content: content:
```{ts} ```{ts}
@ -116,7 +122,7 @@ export const emptyFoobarApi = createApi({
}); });
``` ```
3. Declare the new constat `FOOBAR_API` to the API url in `src/constants.ts` 3. Declare new constant `FOOBAR_API` with the API url in `src/constants.ts`
``` ```
export const FOOBAR_API = 'api/foobar/v1' export const FOOBAR_API = 'api/foobar/v1'
@ -164,8 +170,7 @@ And voilà!
To add a new endpoint, simply update the `api/config/foobar.ts` file with new To add a new endpoint, simply update the `api/config/foobar.ts` file with new
endpoints in the `filterEndpoints` table. endpoints in the `filterEndpoints` table.
#### Unleash feature flags
#### Unleash feature flags for the frontend
Your user needs to have the corresponding rights, do the Your user needs to have the corresponding rights, do the
same as this MR in internal gitlab https://gitlab.cee.redhat.com/service/app-interface/-/merge_requests/79225 same as this MR in internal gitlab https://gitlab.cee.redhat.com/service/app-interface/-/merge_requests/79225
@ -216,7 +221,6 @@ see the [osbuild-getting-started project](https://github.com/osbuild/osbuild-get
| [`/src/test`](https://github.com/RedHatInsights/image-builder-frontend/tree/main/src/test) | test utilities | | [`/src/test`](https://github.com/RedHatInsights/image-builder-frontend/tree/main/src/test) | test utilities |
| [`/src/test/mocks`](https://github.com/RedHatInsights/image-builder-frontend/tree/main/src/test/mocks) | mock handlers and server config for MSW | | [`/src/test/mocks`](https://github.com/RedHatInsights/image-builder-frontend/tree/main/src/test/mocks) | mock handlers and server config for MSW |
| [`/src/store`](https://github.com/RedHatInsights/image-builder-frontend/tree/main/src/store) | Redux store | | [`/src/store`](https://github.com/RedHatInsights/image-builder-frontend/tree/main/src/store) | Redux store |
| [`/src/api.js`](https://github.com/RedHatInsights/image-builder-frontend/blob/main/src/api.js) | API calls |
## Style Guidelines ## Style Guidelines
@ -290,18 +294,3 @@ Follow these steps to find and paste the certification file into the 'Keychain A
8. Close the localhost screen. 8. Close the localhost screen.
9. Run `npm run stage-beta:msw` and open the Firefox browser to verify that it is working as expected. 9. Run `npm run stage-beta:msw` and open the Firefox browser to verify that it is working as expected.
## API endpoints
API slice definitions are generated using the [@rtk-query/codegen-openapi](https://redux-toolkit.js.org/rtk-query/usage/code-generation) package.
OpenAPI schema for the endpoints are stored in `/api/schema`. Their
corresponding configuration files are stored in `/api/config`. Each endpoint
has a corresponding empty API slice and generated API slice which are stored in
`/src/store`.
To generate or update API slice definitions, run:
```bash
npm run api
```