From daab4e141aedaf89df24024afb072b89373babdd Mon Sep 17 00:00:00 2001 From: User Date: Wed, 28 Aug 2024 21:43:55 +0200 Subject: [PATCH 1/9] Add script to generate frontend client --- frontend/README.md | 49 +++++++++++++------------------------- scripts/generate-client.sh | 7 ++++++ 2 files changed, 23 insertions(+), 33 deletions(-) create mode 100644 scripts/generate-client.sh diff --git a/frontend/README.md b/frontend/README.md index 13e3a8c488..8ccc798634 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -4,7 +4,7 @@ The frontend is built with [Vite](https://vitejs.dev/), [React](https://reactjs. ## Frontend development -Before you begin, ensure that you have either the Node Version Manager (nvm) or Fast Node Manager (fnm) installed on your system. +Before you begin, ensure that you have either the Node Version Manager (nvm) or Fast Node Manager (fnm) installed on your system. * To install fnm follow the [official fnm guide](https://github.com/Schniz/fnm#installation). If you prefer nvm, you can install it using the [official nvm guide](https://github.com/nvm-sh/nvm#installing-and-updating). @@ -27,7 +27,7 @@ nvm install ```bash # If using fnm -fnm use +fnm use # If using nvm nvm use @@ -74,6 +74,19 @@ But it would be only to clean them up, leaving them won't really have any effect ## Generate Client +### Automatically + +* Activate the backend virtual environment. +* From the top level project directory, run the script: + +```bash +./scripts/generate-frontend-client.sh +``` + +* Commit the changes. + +### Manually + * Start the Docker Compose stack. * Download the OpenAPI JSON file from `http://localhost/api/v1/openapi.json` and copy it to a new file `openapi.json` at the root of the `frontend` directory. @@ -114,34 +127,4 @@ The frontend code is structured as follows: * `frontend/src/components` - The different components of the frontend. * `frontend/src/hooks` - Custom hooks. * `frontend/src/routes` - The different routes of the frontend which include the pages. -* `theme.tsx` - The Chakra UI custom theme. - -## End-to-End Testing with Playwright - -The frontend includes initial end-to-end tests using Playwright. To run the tests, you need to have the Docker Compose stack running. Start the stack with the following command: - -```bash -docker compose up -d -``` - -Then, you can run the tests with the following command: - -```bash -npx playwright test -``` - -You can also run your tests in UI mode to see the browser and interact with it running: - -```bash -npx playwright test --ui -``` - -To stop and remove the Docker Compose stack and clean the data created in tests, use the following command: - -```bash -docker compose down -v -``` - -To update the tests, navigate to the tests directory and modify the existing test files or add new ones as needed. - -For more information on writing and running Playwright tests, refer to the official [Playwright documentation](https://playwright.dev/docs/intro). \ No newline at end of file +* `theme.tsx` - The Chakra UI custom theme. \ No newline at end of file diff --git a/scripts/generate-client.sh b/scripts/generate-client.sh new file mode 100644 index 0000000000..1108ff2ddb --- /dev/null +++ b/scripts/generate-client.sh @@ -0,0 +1,7 @@ +#! /usr/bin/env bash + +PYTHONPATH=backend python -c "import app.main; import json; print(json.dumps(app.main.app.openapi()))" > openapi.json +node frontend/modify-openapi-operationids.js +mv openapi.json frontend/ +cd frontend || exit +npm run generate-client \ No newline at end of file From 380cd07bcabfa6b5921d9874488c1f8e5c504444 Mon Sep 17 00:00:00 2001 From: User Date: Thu, 29 Aug 2024 01:35:55 +0200 Subject: [PATCH 2/9] Update README.md --- frontend/README.md | 32 +++++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/frontend/README.md b/frontend/README.md index 8ccc798634..9a01970fda 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -127,4 +127,34 @@ The frontend code is structured as follows: * `frontend/src/components` - The different components of the frontend. * `frontend/src/hooks` - Custom hooks. * `frontend/src/routes` - The different routes of the frontend which include the pages. -* `theme.tsx` - The Chakra UI custom theme. \ No newline at end of file +* `theme.tsx` - The Chakra UI custom theme. + +## End-to-End Testing with Playwright + +The frontend includes initial end-to-end tests using Playwright. To run the tests, you need to have the Docker Compose stack running. Start the stack with the following command: + +```bash +docker compose up -d +``` + +Then, you can run the tests with the following command: + +```bash +npx playwright test +``` + +You can also run your tests in UI mode to see the browser and interact with it running: + +```bash +npx playwright test --ui +``` + +To stop and remove the Docker Compose stack and clean the data created in tests, use the following command: + +```bash +docker compose down -v +``` + +To update the tests, navigate to the tests directory and modify the existing test files or add new ones as needed. + +For more information on writing and running Playwright tests, refer to the official [Playwright documentation](https://playwright.dev/docs/intro). \ No newline at end of file From f2aaf985591fdb7f0c6a0453ddcba831e528e14f Mon Sep 17 00:00:00 2001 From: User Date: Thu, 29 Aug 2024 14:06:00 +0200 Subject: [PATCH 3/9] Add workflow --- .github/workflows/generate-client.yml | 48 +++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 .github/workflows/generate-client.yml diff --git a/.github/workflows/generate-client.yml b/.github/workflows/generate-client.yml new file mode 100644 index 0000000000..f2e448d195 --- /dev/null +++ b/.github/workflows/generate-client.yml @@ -0,0 +1,48 @@ +name: Generate Client + +on: + pull_request: + types: + - opened + - synchronize + +jobs: + generate-client: + permissions: + contents: write + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + with: + ref: ${{ github.head_ref }} + token: ${{ secrets.FULL_STACK_FASTAPI_TEMPLATE_REPO_TOKEN }} + - uses: actions/setup-node@v4 + with: + node-version: lts/* + - uses: actions/setup-python@v5 + with: + python-version: '3.10' + - name: Install dependencies + run: npm ci + working-directory: frontend + - run: pip install ./backend + - run: bash scripts/generate-client.sh + - name: Commit changes + run: | + git config --local user.email "github-actions@github.com" + git config --local user.name "github-actions" + git add frontend/src/client + git diff --staged --quiet || git commit -m "✨ Autogenerate frontend client" + git push + + # https://github.com/marketplace/actions/alls-green#why + generate-client-alls-green: # This job does nothing and is only used for the branch protection + if: always() + needs: + - generate-client + runs-on: ubuntu-latest + steps: + - name: Decide whether the needed jobs succeeded or failed + uses: re-actors/alls-green@release/v1 + with: + jobs: ${{ toJSON(needs) }} \ No newline at end of file From 68869b37bd4b72b167eb97f66776021aad83c6d0 Mon Sep 17 00:00:00 2001 From: User Date: Thu, 29 Aug 2024 17:58:53 +0200 Subject: [PATCH 4/9] Fix spacing --- .github/workflows/generate-client.yml | 3 ++- scripts/generate-client.sh | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/.github/workflows/generate-client.yml b/.github/workflows/generate-client.yml index f2e448d195..a81f78cb51 100644 --- a/.github/workflows/generate-client.yml +++ b/.github/workflows/generate-client.yml @@ -45,4 +45,5 @@ jobs: - name: Decide whether the needed jobs succeeded or failed uses: re-actors/alls-green@release/v1 with: - jobs: ${{ toJSON(needs) }} \ No newline at end of file + jobs: ${{ toJSON(needs) }} + \ No newline at end of file diff --git a/scripts/generate-client.sh b/scripts/generate-client.sh index 1108ff2ddb..52e718e866 100644 --- a/scripts/generate-client.sh +++ b/scripts/generate-client.sh @@ -4,4 +4,4 @@ PYTHONPATH=backend python -c "import app.main; import json; print(json.dumps(app node frontend/modify-openapi-operationids.js mv openapi.json frontend/ cd frontend || exit -npm run generate-client \ No newline at end of file +npm run generate-client From a54fc159e81fce001ed0c0a740dea0e8a21a8dbe Mon Sep 17 00:00:00 2001 From: User Date: Thu, 29 Aug 2024 18:25:25 +0200 Subject: [PATCH 5/9] Update --- frontend/biome.json | 1 - frontend/package.json | 2 +- scripts/generate-client.sh | 1 + 3 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/biome.json b/frontend/biome.json index 14597ce328..a06315dc2a 100644 --- a/frontend/biome.json +++ b/frontend/biome.json @@ -6,7 +6,6 @@ "files": { "ignore": [ "node_modules", - "src/client/", "src/routeTree.gen.ts", "playwright.config.ts", "playwright-report" diff --git a/frontend/package.json b/frontend/package.json index b9b2e3b51a..1a7a547f68 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -8,7 +8,7 @@ "build": "tsc && vite build", "lint": "biome check --apply-unsafe --no-errors-on-unmatched --files-ignore-unknown=true ./", "preview": "vite preview", - "generate-client": "openapi-ts --input ./openapi.json --output ./src/client --client axios --exportSchemas true && biome format --write ./src/client" + "generate-client": "openapi-ts --input ./openapi.json --output ./src/client --client axios --exportSchemas true" }, "dependencies": { "@chakra-ui/icons": "2.1.1", diff --git a/scripts/generate-client.sh b/scripts/generate-client.sh index 52e718e866..7a421b8d94 100644 --- a/scripts/generate-client.sh +++ b/scripts/generate-client.sh @@ -5,3 +5,4 @@ node frontend/modify-openapi-operationids.js mv openapi.json frontend/ cd frontend || exit npm run generate-client +npm run lint \ No newline at end of file From 47d9d3b044a51428c7e66420534cb0f3fdbd38ed Mon Sep 17 00:00:00 2001 From: User Date: Thu, 29 Aug 2024 18:42:11 +0200 Subject: [PATCH 6/9] Update script --- scripts/generate-client.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/generate-client.sh b/scripts/generate-client.sh index 7a421b8d94..069af244d6 100644 --- a/scripts/generate-client.sh +++ b/scripts/generate-client.sh @@ -5,4 +5,4 @@ node frontend/modify-openapi-operationids.js mv openapi.json frontend/ cd frontend || exit npm run generate-client -npm run lint \ No newline at end of file +npx biome format --write ./src/client \ No newline at end of file From 2bd697fc9ba0cb5a9c1e2355183d0e9fe8b5954c Mon Sep 17 00:00:00 2001 From: github-actions Date: Thu, 29 Aug 2024 16:42:58 +0000 Subject: [PATCH 7/9] =?UTF-8?q?=E2=9C=A8=20Autogenerate=20frontend=20clien?= =?UTF-8?q?t?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/client/core/request.ts | 6 ++-- frontend/src/client/services.ts | 48 ++++++++++++++--------------- 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/frontend/src/client/core/request.ts b/frontend/src/client/core/request.ts index 6abb0e8f41..99d38b46f1 100644 --- a/frontend/src/client/core/request.ts +++ b/frontend/src/client/core/request.ts @@ -1,9 +1,9 @@ import axios from "axios" import type { AxiosError, - AxiosInstance, AxiosRequestConfig, AxiosResponse, + AxiosInstance, } from "axios" import { ApiError } from "./ApiError" @@ -151,12 +151,12 @@ export const getHeaders = async ( ) if (isStringWithValue(token)) { - headers.Authorization = `Bearer ${token}` + headers["Authorization"] = `Bearer ${token}` } if (isStringWithValue(username) && isStringWithValue(password)) { const credentials = base64(`${username}:${password}`) - headers.Authorization = `Basic ${credentials}` + headers["Authorization"] = `Basic ${credentials}` } if (options.body !== undefined) { diff --git a/frontend/src/client/services.ts b/frontend/src/client/services.ts index be024e4d11..b99e4ac515 100644 --- a/frontend/src/client/services.ts +++ b/frontend/src/client/services.ts @@ -4,20 +4,20 @@ import { request as __request } from "./core/request" import type { Body_login_login_access_token, - ItemCreate, - ItemPublic, - ItemUpdate, - ItemsPublic, Message, NewPassword, Token, + UserPublic, UpdatePassword, UserCreate, - UserPublic, UserRegister, + UsersPublic, UserUpdate, UserUpdateMe, - UsersPublic, + ItemCreate, + ItemPublic, + ItemsPublic, + ItemUpdate, } from "./models" export type TDataLoginAccessToken = { @@ -50,7 +50,7 @@ export class LoginService { formData: formData, mediaType: "application/x-www-form-urlencoded", errors: { - 422: "Validation Error", + 422: `Validation Error`, }, }) } @@ -85,7 +85,7 @@ export class LoginService { email, }, errors: { - 422: "Validation Error", + 422: `Validation Error`, }, }) } @@ -106,7 +106,7 @@ export class LoginService { body: requestBody, mediaType: "application/json", errors: { - 422: "Validation Error", + 422: `Validation Error`, }, }) } @@ -128,7 +128,7 @@ export class LoginService { email, }, errors: { - 422: "Validation Error", + 422: `Validation Error`, }, }) } @@ -180,7 +180,7 @@ export class UsersService { limit, }, errors: { - 422: "Validation Error", + 422: `Validation Error`, }, }) } @@ -201,7 +201,7 @@ export class UsersService { body: requestBody, mediaType: "application/json", errors: { - 422: "Validation Error", + 422: `Validation Error`, }, }) } @@ -248,7 +248,7 @@ export class UsersService { body: requestBody, mediaType: "application/json", errors: { - 422: "Validation Error", + 422: `Validation Error`, }, }) } @@ -269,7 +269,7 @@ export class UsersService { body: requestBody, mediaType: "application/json", errors: { - 422: "Validation Error", + 422: `Validation Error`, }, }) } @@ -290,7 +290,7 @@ export class UsersService { body: requestBody, mediaType: "application/json", errors: { - 422: "Validation Error", + 422: `Validation Error`, }, }) } @@ -312,7 +312,7 @@ export class UsersService { user_id: userId, }, errors: { - 422: "Validation Error", + 422: `Validation Error`, }, }) } @@ -336,7 +336,7 @@ export class UsersService { body: requestBody, mediaType: "application/json", errors: { - 422: "Validation Error", + 422: `Validation Error`, }, }) } @@ -356,7 +356,7 @@ export class UsersService { user_id: userId, }, errors: { - 422: "Validation Error", + 422: `Validation Error`, }, }) } @@ -382,7 +382,7 @@ export class UtilsService { email_to: emailTo, }, errors: { - 422: "Validation Error", + 422: `Validation Error`, }, }) } @@ -425,7 +425,7 @@ export class ItemsService { limit, }, errors: { - 422: "Validation Error", + 422: `Validation Error`, }, }) } @@ -446,7 +446,7 @@ export class ItemsService { body: requestBody, mediaType: "application/json", errors: { - 422: "Validation Error", + 422: `Validation Error`, }, }) } @@ -466,7 +466,7 @@ export class ItemsService { id, }, errors: { - 422: "Validation Error", + 422: `Validation Error`, }, }) } @@ -490,7 +490,7 @@ export class ItemsService { body: requestBody, mediaType: "application/json", errors: { - 422: "Validation Error", + 422: `Validation Error`, }, }) } @@ -510,7 +510,7 @@ export class ItemsService { id, }, errors: { - 422: "Validation Error", + 422: `Validation Error`, }, }) } From 0336bbffe694c6d2a75b72624665462c55831cf2 Mon Sep 17 00:00:00 2001 From: User Date: Thu, 29 Aug 2024 18:46:37 +0200 Subject: [PATCH 8/9] Fix spacing --- scripts/generate-client.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/generate-client.sh b/scripts/generate-client.sh index 069af244d6..b14e3f2104 100644 --- a/scripts/generate-client.sh +++ b/scripts/generate-client.sh @@ -5,4 +5,4 @@ node frontend/modify-openapi-operationids.js mv openapi.json frontend/ cd frontend || exit npm run generate-client -npx biome format --write ./src/client \ No newline at end of file +npx biome format --write ./src/client From 2b347cfe2ec25a38aaafc77a4c9e8eacbfeaac63 Mon Sep 17 00:00:00 2001 From: User Date: Thu, 29 Aug 2024 19:15:37 +0200 Subject: [PATCH 9/9] Refactor --- scripts/generate-client.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/generate-client.sh b/scripts/generate-client.sh index b14e3f2104..1327ee6fd1 100644 --- a/scripts/generate-client.sh +++ b/scripts/generate-client.sh @@ -3,6 +3,6 @@ PYTHONPATH=backend python -c "import app.main; import json; print(json.dumps(app.main.app.openapi()))" > openapi.json node frontend/modify-openapi-operationids.js mv openapi.json frontend/ -cd frontend || exit +cd frontend npm run generate-client npx biome format --write ./src/client