From f38c4bd2f49c9d8b1496db39e6eb5bb28a352b11 Mon Sep 17 00:00:00 2001 From: OMPRAKASH MISHRA Date: Thu, 12 Dec 2024 21:17:17 -0800 Subject: [PATCH 1/3] feat: PR based testing and deploy to test --- .github/workflows/.deploy-env.yml | 112 ++++++++++++++++++++++++++++++ .github/workflows/.deployer.yml | 16 +++-- .github/workflows/.destroy.yml | 18 +++-- .github/workflows/.tests.yml | 31 +++++++++ .github/workflows/merge.yml | 81 +++++++-------------- .github/workflows/pr-open.yml | 5 ++ docker-compose.yml | 21 +----- frontend/vite.config.ts | 2 +- 8 files changed, 202 insertions(+), 84 deletions(-) create mode 100644 .github/workflows/.deploy-env.yml create mode 100644 .github/workflows/.tests.yml diff --git a/.github/workflows/.deploy-env.yml b/.github/workflows/.deploy-env.yml new file mode 100644 index 00000000..bb80775a --- /dev/null +++ b/.github/workflows/.deploy-env.yml @@ -0,0 +1,112 @@ +name: .Deploy to Aws +on: + workflow_call: + inputs: + ### Required + environment_name: + description: 'The name of the environment to deploy to' + required: true + default: 'dev' + type: string + command: + description: 'The terragrunt command to run' + required: true + default: 'apply' + type: string + working_directory: + description: 'The working directory to run the command in' + required: true + default: 'database' + type: string + tag: + description: 'The tag of the containers to deploy' + default: 'latest' + type: string + required: false + app_env: + required: false + type: string + description: 'The APP env separates between AWS ENV and Actual APP, since AWS dev is where PR, and TEST is deployed' + AWS_DEPLOY_ROLE_ARN: + description: 'The ARN of the role to assume to deploy to AWS' + required: true + type: string + AWS_LICENSE_PLATE: + description: 'The license plate of the car to deploy to AWS, it is without the `-env`' + type: string + required: true + outputs: + API_GW_URL: + value: ${{ jobs.deploy-api.outputs.API_GW_URL }} + S3_BUCKET_ARN: + value: ${{ jobs.deploy-cloudfront.outputs.S3_BUCKET_ARN }} + CF_DOMAIN: + value: ${{ jobs.deploy-cloudfront.outputs.CF_DOMAIN }} + CF_DISTRIBUTION_ID: + value: ${{ jobs.deploy-cloudfront.outputs.CF_DISTRIBUTION_ID }} +env: + AWS_REGION: ca-central-1 +jobs: + + # https://github.com/bcgov/quickstart-openshift-helpers + deploy-db: + name: Deploys Database + uses: ./.github/workflows/.deployer.yml + with: + environment_name: ${{ inputs.environment_name}} + command: apply + working_directory: database + app_env: ${{ inputs.environment_name}} # Database + AWS_DEPLOY_ROLE_ARN: ${{ inputs.AWS_DEPLOY_ROLE_ARN }} + AWS_LICENSE_PLATE: ${{ inputs.AWS_LICENSE_PLATE }} + deploy-api: + name: Deploys API + needs: [deploy-db] + uses: ./.github/workflows/.deployer.yml + with: + environment_name: ${{ inputs.environment_name}} + command: apply + working_directory: api + tag: ${{ inputs.tag }} + app_env: ${{ inputs.app_env}} + AWS_DEPLOY_ROLE_ARN: ${{ inputs.AWS_DEPLOY_ROLE_ARN }} + AWS_LICENSE_PLATE: ${{ inputs.AWS_LICENSE_PLATE }} + deploy-cloudfront: + name: Deploys Cloudfront + uses: ./.github/workflows/.deployer.yml + with: + environment_name: ${{ inputs.environment_name}} + command: apply + working_directory: frontend + app_env: ${{ inputs.app_env}} + AWS_DEPLOY_ROLE_ARN: ${{ inputs.AWS_DEPLOY_ROLE_ARN }} + AWS_LICENSE_PLATE: ${{ inputs.AWS_LICENSE_PLATE }} + build-ui: + name: Builds UI + needs: [deploy-api, deploy-cloudfront] + runs-on: ubuntu-24.04 + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: setup node + uses: actions/setup-node@v4 + with: + node-version: '22' + cache: 'npm' + cache-dependency-path: frontend/package-lock.json + - name: Configure AWS Credentials + uses: aws-actions/configure-aws-credentials@v4 + with: + role-to-assume: ${{ inputs.AWS_DEPLOY_ROLE_ARN }} + aws-region: ${{ env.AWS_REGION }} + - name: Build And Update UI (CF) + working-directory: frontend + env: + VITE_API_BASE_URL: ${{ needs.deploy-api.outputs.API_GW_URL }}/api + S3_BUCKET_ARN: ${{ needs.deploy-cloudfront.outputs.S3_BUCKET_ARN }} + CF_DISTRIBUTION_ID: ${{ needs.deploy-cloudfront.outputs.CF_DISTRIBUTION_ID }} + run: | + npm run deploy + aws s3 sync --delete ./dist s3://$(echo "$S3_BUCKET_ARN" | cut -d: -f6) + aws cloudfront create-invalidation --distribution-id $CF_DISTRIBUTION_ID --paths "/*" \ No newline at end of file diff --git a/.github/workflows/.deployer.yml b/.github/workflows/.deployer.yml index 5157e848..2de08551 100644 --- a/.github/workflows/.deployer.yml +++ b/.github/workflows/.deployer.yml @@ -28,6 +28,14 @@ on: required: false type: string description: 'The APP env separates between AWS ENV and Actual APP, since AWS dev is where PR, and TEST is deployed' + AWS_DEPLOY_ROLE_ARN: + description: 'The ARN of the role to assume to deploy to AWS' + required: true + type: string + AWS_LICENSE_PLATE: + description: 'The license plate of the car to deploy to AWS, it is without the `-env`' + type: string + required: true outputs: API_GW_URL: value: ${{ jobs.infra.outputs.API_GW_URL }} @@ -62,7 +70,7 @@ jobs: - name: Configure AWS Credentials uses: aws-actions/configure-aws-credentials@v4 with: - role-to-assume: ${{ secrets.AWS_DEPLOY_ROLE_ARN }} + role-to-assume: ${{ inputs.AWS_DEPLOY_ROLE_ARN }} role-session-name: ${{ inputs.environment_name }}-deployment aws-region: ${{ env.AWS_REGION }} - uses: hashicorp/setup-terraform@v3 @@ -76,7 +84,7 @@ jobs: working-directory: terraform/${{ inputs.working_directory }}/${{ inputs.environment_name }} env: target_env: ${{ inputs.environment_name }} - aws_license_plate: ${{ secrets.AWS_LICENSE_PLATE }} + aws_license_plate: ${{ inputs.AWS_LICENSE_PLATE }} flyway_image: ghcr.io/${{github.repository}}/migrations:${{inputs.tag}} api_image: ghcr.io/${{github.repository}}/backend:${{inputs.tag}} app_env: ${{inputs.app_env}} @@ -89,7 +97,7 @@ jobs: id: tg-outputs env: target_env: ${{ inputs.environment_name }} - aws_license_plate: ${{ secrets.AWS_LICENSE_PLATE }} + aws_license_plate: ${{ inputs.AWS_LICENSE_PLATE }} flyway_image: ghcr.io/${{github.repository}}/migrations:${{inputs.tag}} api_image: ghcr.io/${{github.repository}}/backend:${{inputs.tag}} app_env: ${{inputs.app_env}} @@ -105,7 +113,7 @@ jobs: id: tg-outputs-frontend env: target_env: ${{ inputs.environment_name }} - aws_license_plate: ${{ secrets.AWS_LICENSE_PLATE }} + aws_license_plate: ${{ inputs.AWS_LICENSE_PLATE }} flyway_image: ghcr.io/${{github.repository}}/migrations:${{inputs.tag}} api_image: ghcr.io/${{github.repository}}/backend:${{inputs.tag}} app_env: ${{inputs.app_env}} diff --git a/.github/workflows/.destroy.yml b/.github/workflows/.destroy.yml index a3e9f63b..a8b7b0d0 100644 --- a/.github/workflows/.destroy.yml +++ b/.github/workflows/.destroy.yml @@ -13,6 +13,14 @@ on: required: false type: string description: 'The APP env separates between AWS ENV and Actual APP, since AWS dev is where PR, and TEST is deployed' + AWS_DEPLOY_ROLE_ARN: + description: 'The ARN of the role to assume to deploy to AWS' + required: true + type: string + AWS_LICENSE_PLATE: + description: 'The license plate of the car to deploy to AWS, it is without the `-env`' + type: string + required: true jobs: cleanup-aws-database: name: Cleanup AWS Database @@ -21,8 +29,8 @@ jobs: environment_name: ${{ inputs.environment_name}} command: destroy working_directory: database - - secrets: inherit + AWS_DEPLOY_ROLE_ARN: ${{ inputs.AWS_DEPLOY_ROLE_ARN }} + AWS_LICENSE_PLATE: ${{ inputs.AWS_LICENSE_PLATE }} cleanup-aws-api: name: Cleanup AWS API uses: ./.github/workflows/.deployer.yml @@ -31,7 +39,8 @@ jobs: command: destroy working_directory: api app_env: ${{ inputs.app_env}} - secrets: inherit + AWS_DEPLOY_ROLE_ARN: ${{ inputs.AWS_DEPLOY_ROLE_ARN }} + AWS_LICENSE_PLATE: ${{ inputs.AWS_LICENSE_PLATE }} cleanup-aws-cf: name: Cleanup AWS CF uses: ./.github/workflows/.deployer.yml @@ -40,4 +49,5 @@ jobs: command: destroy working_directory: frontend app_env: ${{ inputs.app_env}} - secrets: inherit \ No newline at end of file + AWS_DEPLOY_ROLE_ARN: ${{ inputs.AWS_DEPLOY_ROLE_ARN }} + AWS_LICENSE_PLATE: ${{ inputs.AWS_LICENSE_PLATE }} \ No newline at end of file diff --git a/.github/workflows/.tests.yml b/.github/workflows/.tests.yml new file mode 100644 index 00000000..80e2d6c0 --- /dev/null +++ b/.github/workflows/.tests.yml @@ -0,0 +1,31 @@ +name: .Tests + +on: + workflow_call: + +jobs: + e2e: + name: E2E Tests + runs-on: ubuntu-24.04 + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Run Docker compose + run: docker-compose up -d --wait + - uses: actions/setup-node@v4 + name: Setup Node + with: + node-version: 22 + cache: 'npm' + cache-dependency-path: frontend/package-lock.json + - name: Install dependencies + run: | + npm ci + npx playwright install --with-deps + + - name: Run Tests + env: + E2E_BASE_URL: http://localhost:3000 + CI: 'true' + run: | + npx playwright test --project="chromium" --reporter=blob \ No newline at end of file diff --git a/.github/workflows/merge.yml b/.github/workflows/merge.yml index ae983b68..419be2e5 100644 --- a/.github/workflows/merge.yml +++ b/.github/workflows/merge.yml @@ -28,65 +28,32 @@ jobs: if: ${{ github.event_name != 'workflow_dispatch' }} id: pr uses: bcgov-nr/action-get-pr@v0.0.1 - # https://github.com/bcgov/quickstart-openshift-helpers - deploy-db: + deploy-dev: + name: Deploy Dev needs: [vars] - name: Deploys Database - uses: ./.github/workflows/.deployer.yml - with: - environment_name: dev - command: apply - working_directory: database - app_env: dev - secrets: inherit - deploy-api: - name: Deploys API - needs: [vars,deploy-db] - uses: ./.github/workflows/.deployer.yml - with: - environment_name: dev - command: apply - working_directory: api - tag: ${{ needs.vars.outputs.pr }} - app_env: dev - secrets: inherit - deploy-cloudfront: - name: Deploys Cloudfront - needs: [vars] - uses: ./.github/workflows/.deployer.yml - with: - environment_name: dev - command: apply - working_directory: frontend - app_env: dev - secrets: inherit - build-ui: - name: Builds UI - needs: [deploy-api, deploy-cloudfront] + environment: dev runs-on: ubuntu-24.04 steps: - - name: Checkout - uses: actions/checkout@v4 - - - name: setup node - uses: actions/setup-node@v4 + - name: Deploy Dev + uses: ./.github/workflows/.deploy-env.yml with: - node-version: '22' - cache: 'npm' - cache-dependency-path: frontend/package-lock.json - - name: Configure AWS Credentials - uses: aws-actions/configure-aws-credentials@v4 + environment_name: dev + app_env: dev + tag: ${{ needs.vars.outputs.pr }} + AWS_DEPLOY_ROLE_ARN: ${{ secrets.AWS_DEPLOY_ROLE_ARN }} + AWS_LICENSE_PLATE: ${{ secrets.AWS_LICENSE_PLATE }} + deploy-test: + name: Deploy Test + needs: [vars] + environment: dev # this is the Github secrets environment name + runs-on: ubuntu-24.04 + steps: + - name: Deploy Dev + uses: ./.github/workflows/.deploy-env.yml with: - role-to-assume: ${{ secrets.AWS_DEPLOY_ROLE_ARN }} - aws-region: ${{ env.AWS_REGION }} - - name: Build And Update UI (CF) - working-directory: frontend - env: - VITE_API_BASE_URL: ${{ needs.deploy-api.outputs.API_GW_URL }}/api - S3_BUCKET_ARN: ${{ needs.deploy-cloudfront.outputs.S3_BUCKET_ARN }} - CF_DISTRIBUTION_ID: ${{ needs.deploy-cloudfront.outputs.CF_DISTRIBUTION_ID }} - run: | - npm run deploy - aws s3 sync --delete ./dist s3://$(echo "$S3_BUCKET_ARN" | cut -d: -f6) - aws cloudfront create-invalidation --distribution-id $CF_DISTRIBUTION_ID --paths "/*" - + environment_name: dev # this is the AWS environment name + app_env: test # as multuple environments are deployed to the same AWS environment we separate them by app_env as tags. + tag: ${{ needs.vars.outputs.pr }} + AWS_DEPLOY_ROLE_ARN: ${{ secrets.AWS_DEPLOY_ROLE_ARN }} + AWS_LICENSE_PLATE: ${{ secrets.AWS_LICENSE_PLATE }} + diff --git a/.github/workflows/pr-open.yml b/.github/workflows/pr-open.yml index 8c4e2dad..31bd4455 100644 --- a/.github/workflows/pr-open.yml +++ b/.github/workflows/pr-open.yml @@ -37,4 +37,9 @@ jobs: repository: ${{ github.repository }}/${{ matrix.package }} target: ${{ github.event.number }} tags: ${{ github.event.number }}-${{ github.run_number }} + tests-e2e: + name: Tests + needs: builds + uses: ./.github/workflows/.tests.yml + \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml index 7d2bd70e..2b5aa1b6 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -58,8 +58,9 @@ services: environment: <<: *postgres-vars NODE_ENV: development + PORT: 3001 image: node:22 - ports: ["3001:3000"] + ports: ["3001:3001"] healthcheck: test: ["CMD", "curl", "-f", "http://localhost:3000/api"] working_dir: "/app" @@ -69,7 +70,7 @@ services: container_name: frontend entrypoint: sh -c "npm ci && npm run dev" environment: - BACKEND_URL: http://backend:3000 + BACKEND_URL: http://backend:3001 PORT: 3000 NODE_ENV: development image: node:22 @@ -82,19 +83,3 @@ services: backend: condition: service_healthy - caddy: - container_name: caddy - profiles: ["caddy"] - build: ./frontend - environment: - NODE_ENV: development - PORT: 3000 - BACKEND_URL: http://backend:3000 - LOG_LEVEL: info - ports: ["3005:3000"] - volumes: ["./frontend/Caddyfile:/etc/caddy/Caddyfile"] - healthcheck: - test: ["CMD", "curl", "-f", "http://localhost:3000"] - depends_on: - backend: - condition: service_healthy diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 8a90cc35..ce8661b5 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -14,7 +14,7 @@ export default defineConfig({ proxy: { // Proxy API requests to the backend '/api': { - target: 'http://localhost:3000', + target: process.env.BACKEND_URL || 'http://localhost:3000', changeOrigin: true, }, }, From 6ef0e0c32caea2bc64427f8a22615873d4fb53fd Mon Sep 17 00:00:00 2001 From: OMPRAKASH MISHRA Date: Thu, 12 Dec 2024 21:22:31 -0800 Subject: [PATCH 2/3] fix: docker compose command --- .github/workflows/.tests.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/.tests.yml b/.github/workflows/.tests.yml index 80e2d6c0..b8b5777e 100644 --- a/.github/workflows/.tests.yml +++ b/.github/workflows/.tests.yml @@ -11,7 +11,7 @@ jobs: - name: Checkout uses: actions/checkout@v4 - name: Run Docker compose - run: docker-compose up -d --wait + run: docker compose up -d --wait - uses: actions/setup-node@v4 name: Setup Node with: From e9836b3816e80a84c6adaa27e9c0152c24ab3c59 Mon Sep 17 00:00:00 2001 From: OMPRAKASH MISHRA Date: Thu, 12 Dec 2024 21:59:24 -0800 Subject: [PATCH 3/3] fix: local and docker env --- backend/package-lock.json | 2 +- docker-compose.yml | 3 +- frontend/package-lock.json | 145 ++++++++++++-------------- frontend/package.json | 14 +-- frontend/src/App.tsx | 22 ++-- frontend/src/components/Dashboard.tsx | 3 +- frontend/src/components/NotFound.tsx | 5 +- frontend/src/main.tsx | 6 +- frontend/src/theme.tsx | 4 +- frontend/vite.config.ts | 2 +- 10 files changed, 97 insertions(+), 109 deletions(-) diff --git a/backend/package-lock.json b/backend/package-lock.json index 8e8f260b..d4dbcd3e 100644 --- a/backend/package-lock.json +++ b/backend/package-lock.json @@ -1,5 +1,5 @@ { - "name": "backend", + "name": "app", "lockfileVersion": 3, "requires": true, "packages": { diff --git a/docker-compose.yml b/docker-compose.yml index 2b5aa1b6..f8819880 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -62,7 +62,7 @@ services: image: node:22 ports: ["3001:3001"] healthcheck: - test: ["CMD", "curl", "-f", "http://localhost:3000/api"] + test: ["CMD", "curl", "-f", "http://localhost:3001/api"] working_dir: "/app" volumes: ["./backend:/app", "/app/node_modules"] @@ -82,4 +82,3 @@ services: depends_on: backend: condition: service_healthy - diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 5f572bab..ae97ed8d 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,13 +10,13 @@ "dependencies": { "@bcgov/bc-sans": "^2.1.0", "@bcgov/design-system-react-components": "^0.4.0", - "@emotion/react": "^11.13.3", - "@emotion/styled": "^11.13.0", - "@mui/icons-material": "^6.0.2", - "@mui/material": "^6.0.2", - "@mui/system": "^6.0.2", - "@mui/x-data-grid": "^7.16.0", - "@vitejs/plugin-react": "^4.3.1", + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.0", + "@mui/icons-material": "^6.2.0", + "@mui/material": "^6.2.0", + "@mui/system": "^6.2.0", + "@mui/x-data-grid": "^7.23.2", + "@vitejs/plugin-react": "^4.3.4", "axios": "^1.7.7", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -454,10 +454,9 @@ } }, "node_modules/@emotion/cache": { - "version": "11.13.5", - "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.5.tgz", - "integrity": "sha512-Z3xbtJ+UcK76eWkagZ1onvn/wAVb1GOMuR15s30Fm2wrMgC7jzpnO2JZXr4eujTTqoQFUrZIw/rT0c6Zzjca1g==", - "license": "MIT", + "version": "11.14.0", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz", + "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==", "dependencies": { "@emotion/memoize": "^0.9.0", "@emotion/sheet": "^1.4.0", @@ -488,16 +487,15 @@ "license": "MIT" }, "node_modules/@emotion/react": { - "version": "11.13.5", - "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.5.tgz", - "integrity": "sha512-6zeCUxUH+EPF1s+YF/2hPVODeV/7V07YU5x+2tfuRL8MdW6rv5vb2+CBEGTGwBdux0OIERcOS+RzxeK80k2DsQ==", - "license": "MIT", + "version": "11.14.0", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz", + "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==", "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.13.5", - "@emotion/cache": "^11.13.5", + "@emotion/cache": "^11.14.0", "@emotion/serialize": "^1.3.3", - "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0", + "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0", "@emotion/utils": "^1.4.2", "@emotion/weak-memoize": "^0.4.0", "hoist-non-react-statics": "^3.3.1" @@ -527,20 +525,18 @@ "node_modules/@emotion/sheet": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz", - "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==", - "license": "MIT" + "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==" }, "node_modules/@emotion/styled": { - "version": "11.13.5", - "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.13.5.tgz", - "integrity": "sha512-gnOQ+nGLPvDXgIx119JqGalys64lhMdnNQA9TMxhDA4K0Hq5+++OE20Zs5GxiCV9r814xQ2K5WmtofSpHVW6BQ==", - "license": "MIT", + "version": "11.14.0", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.0.tgz", + "integrity": "sha512-XxfOnXFffatap2IyCeJyNov3kiDQWoR08gPUQxvbL7fxKryGBKUZUkG6Hz48DZwVrJSVh9sJboyV1Ds4OW6SgA==", "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.13.5", "@emotion/is-prop-valid": "^1.3.0", "@emotion/serialize": "^1.3.3", - "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0", + "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0", "@emotion/utils": "^1.4.2" }, "peerDependencies": { @@ -560,10 +556,9 @@ "license": "MIT" }, "node_modules/@emotion/use-insertion-effect-with-fallbacks": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz", - "integrity": "sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==", - "license": "MIT", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz", + "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==", "peerDependencies": { "react": ">=16.8.0" } @@ -1473,20 +1468,18 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "6.1.9", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.9.tgz", - "integrity": "sha512-TWqj7b1w5cmSz4H/uf+y2AHxAH4ldPR7D2bz0XVyn60GCAo/zRbRPx7cF8gTs/i7CiYeHzV6dtat0VpMwOtolw==", - "license": "MIT", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.2.0.tgz", + "integrity": "sha512-Nn5PSkUqbDrvezpiiiYZiAbX4SFEiy3CbikUL6pWOXEUsq+L1j50OOyyUIHpaX2Hr+5V5UxTh+fPeC4nsGNhdw==", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" } }, "node_modules/@mui/icons-material": { - "version": "6.1.9", - "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.9.tgz", - "integrity": "sha512-AzlhIT51rdjkZ/EcUV2dbhNkNSUHIqCnNoUxodpiTw8buyAUBd+qnxg5OBSuPpun/ZEdSSB8Q7Uyh6zqjiMsEQ==", - "license": "MIT", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.2.0.tgz", + "integrity": "sha512-WR1EEhGOSvxAsoTSzWZBlrWFjul8wziDrII4rC3PvMBHhBYBqEc2n/0aamfFbwkH5EiYb96aqc6kYY6tB310Sw==", "dependencies": { "@babel/runtime": "^7.26.0" }, @@ -1498,7 +1491,7 @@ "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "@mui/material": "^6.1.9", + "@mui/material": "^6.2.0", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, @@ -1509,22 +1502,21 @@ } }, "node_modules/@mui/material": { - "version": "6.1.9", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.9.tgz", - "integrity": "sha512-NwqIN0bdsgzSbZd5JFcC+2ez0XW/XNs8uiV2PDHrqQ4qf/FEasFJG1z6g8JbCN0YlTrHZekVb17X0Fv0qcYJfQ==", - "license": "MIT", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.2.0.tgz", + "integrity": "sha512-7FXXUPIyYzP02a7GvqwJ7ocmdP+FkvLvmy/uxG1TDmTlsr8nEClQp75uxiVznJqAY/jJy4d+Rj/fNWNxwidrYQ==", "dependencies": { "@babel/runtime": "^7.26.0", - "@mui/core-downloads-tracker": "^6.1.9", - "@mui/system": "^6.1.9", + "@mui/core-downloads-tracker": "^6.2.0", + "@mui/system": "^6.2.0", "@mui/types": "^7.2.19", - "@mui/utils": "^6.1.9", + "@mui/utils": "^6.2.0", "@popperjs/core": "^2.11.8", "@types/react-transition-group": "^4.4.11", "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1", - "react-is": "^18.3.1", + "react-is": "^19.0.0", "react-transition-group": "^4.4.5" }, "engines": { @@ -1537,7 +1529,7 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@mui/material-pigment-css": "^6.1.9", + "@mui/material-pigment-css": "^6.2.0", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" @@ -1558,13 +1550,12 @@ } }, "node_modules/@mui/private-theming": { - "version": "6.1.9", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.9.tgz", - "integrity": "sha512-7aum/O1RquBYhfwL/7egDyl9GqJgPM6hoJDFFBbhF6Sgv9yI9v4w3ArKUkuVvR0CtVj4NXRVMKEioh1bjUzvuA==", - "license": "MIT", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.2.0.tgz", + "integrity": "sha512-lYd2MrVddhentF1d/cMXKnwlDjr/shbO3A2eGq22PCYUoZaqtAGZMc0U86KnJ/Sh5YzNYePqTOaaowAN8Qea8A==", "dependencies": { "@babel/runtime": "^7.26.0", - "@mui/utils": "^6.1.9", + "@mui/utils": "^6.2.0", "prop-types": "^15.8.1" }, "engines": { @@ -1585,10 +1576,9 @@ } }, "node_modules/@mui/styled-engine": { - "version": "6.1.9", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.9.tgz", - "integrity": "sha512-xynSLlJRxHLzSfQaiDjkaTx8LiFb9ByVa7aOdwFnTxGWFMY1F+mkXwAUY4jDDE+MAxkWxlzzQE0wOohnsxhdQg==", - "license": "MIT", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.2.0.tgz", + "integrity": "sha512-rV4YCu6kcCjMnHFXU/tQcL6XfYVfFVR8n3ZVNGnk2rpXnt/ctOPJsF+eUQuhkHciueLVKpI06+umr1FxWWhVmQ==", "dependencies": { "@babel/runtime": "^7.26.0", "@emotion/cache": "^11.13.5", @@ -1619,16 +1609,15 @@ } }, "node_modules/@mui/system": { - "version": "6.1.9", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.9.tgz", - "integrity": "sha512-8x+RucnNp21gfFYsklCaZf0COXbv3+v0lrVuXONxvPEkESi2rwLlOi8UPJfcz6LxZOAX3v3oQ7qw18vnpgueRg==", - "license": "MIT", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.2.0.tgz", + "integrity": "sha512-DCeqev9Cd4f4pm3O1lqSGW/DIHHBG6ZpqMX9iIAvN4asYv+pPWv2/lKov9kWk5XThhxFnGSv93SRNE1kNRRg5Q==", "dependencies": { "@babel/runtime": "^7.26.0", - "@mui/private-theming": "^6.1.9", - "@mui/styled-engine": "^6.1.9", + "@mui/private-theming": "^6.2.0", + "@mui/styled-engine": "^6.2.0", "@mui/types": "^7.2.19", - "@mui/utils": "^6.1.9", + "@mui/utils": "^6.2.0", "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1" @@ -1673,17 +1662,16 @@ } }, "node_modules/@mui/utils": { - "version": "6.1.9", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.9.tgz", - "integrity": "sha512-N7uzBp7p2or+xanXn3aH2OTINC6F/Ru/U8h6amhRZEev8bJhKN86rIDIoxZZ902tj+09LXtH83iLxFMjMHyqNA==", - "license": "MIT", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.2.0.tgz", + "integrity": "sha512-77CaFJi+OIi2SjbPwCis8z5DXvE0dfx9hBz5FguZHt1VYFlWEPCWTHcMsQCahSErnfik5ebLsYK8+D+nsjGVfw==", "dependencies": { "@babel/runtime": "^7.26.0", "@mui/types": "^7.2.19", - "@types/prop-types": "^15.7.13", + "@types/prop-types": "^15.7.14", "clsx": "^2.1.1", "prop-types": "^15.8.1", - "react-is": "^18.3.1" + "react-is": "^19.0.0" }, "engines": { "node": ">=14.0.0" @@ -1703,10 +1691,9 @@ } }, "node_modules/@mui/x-data-grid": { - "version": "7.23.0", - "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-7.23.0.tgz", - "integrity": "sha512-nypSz/7j0HPvW7tRPcZAlQADOiRAE4jTIcxwwJUPLtU17EPJOiw1iB29SRYtUThw4f3aXETPAeT4fzgagpuiKg==", - "license": "MIT", + "version": "7.23.2", + "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-7.23.2.tgz", + "integrity": "sha512-Xhm4Bh+WiU5MSLFIZ8mE1egHoS0xPEVlwvjYvairPIkxNPubB7f+gtLkuAJ2+m+BYbgO7yDte+Pp7dfjkU+vOA==", "dependencies": { "@babel/runtime": "^7.25.7", "@mui/utils": "^5.16.6 || ^6.0.0", @@ -4030,10 +4017,9 @@ "license": "MIT" }, "node_modules/@types/prop-types": { - "version": "15.7.13", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz", - "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==", - "license": "MIT" + "version": "15.7.14", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", + "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==" }, "node_modules/@types/react": { "version": "18.3.12", @@ -9182,10 +9168,9 @@ } }, "node_modules/react-is": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", - "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", - "license": "MIT" + "version": "19.0.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz", + "integrity": "sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==" }, "node_modules/react-refresh": { "version": "0.14.2", diff --git a/frontend/package.json b/frontend/package.json index 92878ace..cc2dcd61 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -17,13 +17,13 @@ "dependencies": { "@bcgov/bc-sans": "^2.1.0", "@bcgov/design-system-react-components": "^0.4.0", - "@emotion/react": "^11.13.3", - "@emotion/styled": "^11.13.0", - "@mui/icons-material": "^6.0.2", - "@mui/material": "^6.0.2", - "@mui/system": "^6.0.2", - "@mui/x-data-grid": "^7.16.0", - "@vitejs/plugin-react": "^4.3.1", + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.0", + "@mui/icons-material": "^6.2.0", + "@mui/material": "^6.2.0", + "@mui/system": "^6.2.0", + "@mui/x-data-grid": "^7.23.2", + "@vitejs/plugin-react": "^4.3.4", "axios": "^1.7.7", "react": "^18.3.1", "react-dom": "^18.3.1", diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index ea6f5a13..44fca552 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,12 +1,9 @@ import Box from '@mui/material/Box' import AppRoutes from '@/routes' import { BrowserRouter } from 'react-router-dom' -import { - Footer, - Header, -} from "@bcgov/design-system-react-components"; -import { IconButton } from '~/@mui/material' -import { HomeRounded } from '~/@mui/icons-material' +import { Footer, Header } from '@bcgov/design-system-react-components' +import IconButton from '~/@mui/material/IconButton' +import HomeIcon from '@mui/icons-material/Home'; const styles = { container: { @@ -29,11 +26,14 @@ const styles = { export default function App() { return ( -
- - - -
+
+ {' '} + + + + + +
diff --git a/frontend/src/components/Dashboard.tsx b/frontend/src/components/Dashboard.tsx index def1d81a..12522854 100644 --- a/frontend/src/components/Dashboard.tsx +++ b/frontend/src/components/Dashboard.tsx @@ -8,7 +8,8 @@ import Table from "@mui/material/Table"; import TableBody from "@mui/material/TableBody"; import TableCell from "@mui/material/TableCell"; import TableRow from "@mui/material/TableRow"; -import { DataGrid, GridToolbar } from "@mui/x-data-grid"; +import {DataGrid} from "@mui/x-data-grid"; +import {GridToolbar} from "@mui/x-data-grid"; import { useEffect, useState } from "react"; import type { AxiosResponse } from "~/axios"; diff --git a/frontend/src/components/NotFound.tsx b/frontend/src/components/NotFound.tsx index 090dfbc7..b230ad4b 100644 --- a/frontend/src/components/NotFound.tsx +++ b/frontend/src/components/NotFound.tsx @@ -1,4 +1,7 @@ -import { Box, Button, Container, Typography } from '@mui/material' +import Box from '@mui/material/Box' +import Button from '@mui/material/Button' +import Container from '@mui/material/Container' +import Typography from '@mui/material/Typography' import Grid from '@mui/material/Grid' import { useNavigate } from 'react-router' diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index 18f5071d..fb2dd098 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -1,8 +1,8 @@ -import "@bcgov/bc-sans/css/BC_Sans.css"; +import '@bcgov/bc-sans/css/BC_Sans.css' import * as React from 'react' import * as ReactDOM from 'react-dom/client' -import { ThemeProvider } from '@emotion/react' -import { CssBaseline } from '@mui/material' +import {ThemeProvider} from '@emotion/react' +import CssBaseline from '@mui/material/CssBaseline' import theme from './theme' import App from './App' diff --git a/frontend/src/theme.tsx b/frontend/src/theme.tsx index 3a183e98..cc5231ee 100644 --- a/frontend/src/theme.tsx +++ b/frontend/src/theme.tsx @@ -1,5 +1,5 @@ -import { createTheme } from '@mui/material/styles' -import { red } from '@mui/material/colors' +import createTheme from '@mui/material/styles/createTheme' +import red from '@mui/material/colors/red' // A custom theme for this app const theme = createTheme({ diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index ce8661b5..5dcdc61d 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -14,7 +14,7 @@ export default defineConfig({ proxy: { // Proxy API requests to the backend '/api': { - target: process.env.BACKEND_URL || 'http://localhost:3000', + target: process.env.BACKEND_URL || 'http://localhost:3001', changeOrigin: true, }, },