Skip to content

Commit 0abde51

Browse files
committed
Automated developer guide update
1 parent cbce779 commit 0abde51

File tree

1 file changed

+14
-25
lines changed
  • docs/developer-guide/02-projects/image-builder-frontend

1 file changed

+14
-25
lines changed

docs/developer-guide/02-projects/image-builder-frontend/index.md

+14-25
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
## Table of Contents
1111
1. [How to build and run image-builder-frontend](#frontend-development)
1212
1. [Frontend Development](#frontend-development)
13+
1. [API](#api-endpoints)
14+
2. [Unleash feature flags](#unleash-feature-flags)
1315
2. [Backend Development](#backend-development)
1416
2. [File structure](#file-structure)
1517
3. [Style Guidelines](#style-guidelines)
@@ -27,7 +29,7 @@ worrying if a feature from stage has been released yet.
2729

2830
#### Nodejs and npm version
2931

30-
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).
32+
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).
3133

3234
#### Webpack proxy
3335

@@ -90,17 +92,21 @@ Note that this requires you to have access to either production or stage (plus V
9092
9193
#### API endpoints
9294
93-
API endpoints are programmatically generated with the RTKQ library. This
94-
sections overview the steps to add new APIs and endpoints.
95+
API slice definitions are programmatically generated using the [@rtk-query/codegen-openapi](https://redux-toolkit.js.org/rtk-query/usage/code-generation) package.
96+
97+
OpenAPI schema for the endpoints are stored in `/api/schema`. Their
98+
corresponding configuration files are stored in `/api/config`. Each endpoint
99+
has a corresponding empty API slice and generated API slice which are stored in
100+
`/src/store`.
95101
96102
##### Add a new API
97103
98-
For an hypothetical API called foobar
104+
For a hypothetical API called foobar
99105
100-
1. Download the foobar api openapi json or yaml representation under
106+
1. Download the foobar API OpenAPI json or yaml representation under
101107
`api/schema/foobar.json`
102108
103-
2. Create a new "empty" api file under `src/store/emptyFoobarApi.ts` that has for
109+
2. Create a new "empty" API file under `src/store/emptyFoobarApi.ts` that has following
104110
content:
105111
106112
```{ts}
@@ -116,7 +122,7 @@ export const emptyFoobarApi = createApi({
116122
});
117123
```
118124

119-
3. Declare the new constat `FOOBAR_API` to the API url in `src/constants.ts`
125+
3. Declare new constant `FOOBAR_API` with the API url in `src/constants.ts`
120126

121127
```
122128
export const FOOBAR_API = 'api/foobar/v1'
@@ -164,8 +170,7 @@ And voilà!
164170
To add a new endpoint, simply update the `api/config/foobar.ts` file with new
165171
endpoints in the `filterEndpoints` table.
166172

167-
168-
#### Unleash feature flags for the frontend
173+
#### Unleash feature flags
169174

170175
Your user needs to have the corresponding rights, do the
171176
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
216221
| [`/src/test`](https://github.com/RedHatInsights/image-builder-frontend/tree/main/src/test) | test utilities |
217222
| [`/src/test/mocks`](https://github.com/RedHatInsights/image-builder-frontend/tree/main/src/test/mocks) | mock handlers and server config for MSW |
218223
| [`/src/store`](https://github.com/RedHatInsights/image-builder-frontend/tree/main/src/store) | Redux store |
219-
| [`/src/api.js`](https://github.com/RedHatInsights/image-builder-frontend/blob/main/src/api.js) | API calls |
220224

221225
## Style Guidelines
222226

@@ -290,18 +294,3 @@ Follow these steps to find and paste the certification file into the 'Keychain A
290294
8. Close the localhost screen.
291295

292296
9. Run `npm run stage-beta:msw` and open the Firefox browser to verify that it is working as expected.
293-
294-
295-
## API endpoints
296-
297-
API slice definitions are generated using the [@rtk-query/codegen-openapi](https://redux-toolkit.js.org/rtk-query/usage/code-generation) package.
298-
299-
OpenAPI schema for the endpoints are stored in `/api/schema`. Their
300-
corresponding configuration files are stored in `/api/config`. Each endpoint
301-
has a corresponding empty API slice and generated API slice which are stored in
302-
`/src/store`.
303-
304-
To generate or update API slice definitions, run:
305-
```bash
306-
npm run api
307-
```

0 commit comments

Comments
 (0)