Merge dependabot/npm_and_yarn/types/node-22.5.4 into combine-prs-branch

.env.acceptance

@@ -1,18 +1,15 @@
 REACT_APP_ENVIRONMENT=acceptance
 
-REACT_APP_API_HOST=https://acc.api.wonen.zaken.amsterdam.nl/
-REACT_APP_AUTH_URL="https://auth.grip-on-it.com/v2/rjsfm52t/oidc/idp/authorize?response_type=code&scope=openid&client_id=d3d664c7-bb33-4bf0-b7c9-b8bdf1199b76&redirect_uri=https%3A%2F%2Facc.wonen.zaken.amsterdam.nl%2Fauthentication%2Fcallback"
+REACT_APP_API_HOST=https://api.wonen.zaken.woon-a.azure.amsterdam.nl/
 
 # AZA
-REACT_APP_AZA_FE=https://acc.wonen.zaken.amsterdam.nl/
+REACT_APP_AZA_FE=https://wonen.zaken.woon-a.azure.amsterdam.nl/
 
 # TON
-REACT_APP_API_HOST_TON=https://acc.api.ton.amsterdam.nl/
-REACT_APP_HOST_TON=https://acc.ton.amsterdam.nl/
+REACT_APP_API_HOST_TON=https://api.ton.woon-a.azure.amsterdam.nl/
+REACT_APP_HOST_TON=https://ton.woon-a.azure.amsterdam.nl/
 
 # Keycloak
+REACT_APP_AUTH_URL=https://acc.iam.amsterdam.nl/auth/
 REACT_APP_KEYCLOAK_REALM=datapunt-ad-acc
-
-# Sentry
-REACT_APP_SENTRY_PROJECT_NAME=zaken-frontend
-REACT_APP_SENTRY_DSN=https://f667fd1828ec8f0c074f59f8bb3dd595@sentry.data.amsterdam.nl/10
+REACT_APP_KEYCLOAK_CLIENT_ID=wonen-zaaksysteem-frontend

.env.development

@@ -8,8 +8,13 @@
 REACT_APP_API_HOST=http://localhost:8080/
 REACT_APP_API_PATH=api/v1/
 
+# Keycloak
+REACT_APP_AUTH_URL=https://acc.iam.amsterdam.nl/auth/ # wonen-zaaksysteem-frontend client only exist for iam.amsterdam (prod)
+REACT_APP_KEYCLOAK_CLIENT_ID=wonen-zaaksysteem-frontend
+REACT_APP_KEYCLOAK_REALM=datapunt-ad-acc
+
 # AZA
-REACT_APP_AZA_FE=https://acc.wonen.zaken.amsterdam.nl/
+REACT_APP_AZA_FE=http://localhost:2999/
 
 # TON
 REACT_APP_API_HOST_TON=https://acc.api.ton.amsterdam.nl/

.env.production

@@ -7,7 +7,8 @@ REACT_APP_ENVIRONMENT=production
 
 REACT_APP_API_HOST=https://api.wonen.zaken.amsterdam.nl/
 REACT_APP_API_PATH=api/v1/
-REACT_APP_AUTH_URL="https://auth.grip-on-it.com/v2/rjsfm52t/oidc/idp/authorize?response_type=code&scope=openid&client_id=65ba2077-9c90-4fcd-be2a-f7549e783bdc&redirect_uri=https%3A%2F%2Fwonen.zaken.amsterdam.nl%2Fauthentication%2Fcallback"
+REACT_APP_AUTH_URL=https://iam.amsterdam.nl/auth/
+
 
 # AZA
 REACT_APP_AZA_FE=https://wonen.zaken.amsterdam.nl/
@@ -16,10 +17,6 @@ REACT_APP_AZA_FE=https://wonen.zaken.amsterdam.nl/
 REACT_APP_API_HOST_TON=https://api.ton.amsterdam.nl/
 REACT_APP_HOST_TON=https://ton.amsterdam.nl/
 
-# Sentry
-REACT_APP_SENTRY_PROJECT_NAME=zaken-frontend
-REACT_APP_SENTRY_DSN=https://f667fd1828ec8f0c074f59f8bb3dd595@sentry.data.amsterdam.nl/10
-
 # Keycloak
 REACT_APP_KEYCLOAK_REALM=datapunt-ad
 

.github/workflows/main.yml

@@ -10,10 +10,11 @@ jobs:
  main:
  runs-on: ubuntu-latest
  steps:
- - uses: actions/checkout@v3
- - uses: actions/setup-node@v3
+ - uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
  with:
- node-version: 16
+ node-version: 20
+ cache: 'npm'
 
  - name: Install
  run: npm install
@@ -24,20 +25,20 @@ jobs:
  - name: Test
  run: npm test
 
- - name: Cypress run
- if: ${{ github.actor != 'dependabot[bot]' }}
- uses: cypress-io/github-action@v4
- with:
- record: false
- # Run test against acc, otherwise a local backend is needed.
- start: npm run acc
- wait-on: "http://localhost:2999/"
- env:
- # pass GitHub token to allow accurately detecting a build vs a re-run build for Cypress Dashboard
- GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- # pass the Dashboard record key as an environment variable for Cypress Dashboard
- CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
- CYPRESS_TEST_USER_PASSWORD: ${{ secrets.CYPRESS_TEST_USER_PASSWORD }}
+ # - name: Cypress run
+ #  if: ${{ github.actor != 'dependabot[bot]' }}
+ #  uses: cypress-io/github-action@v4
+ #  with:
+ #  record: false
+ #  # Run test against acc, otherwise a local backend is needed.
+ #  start: npm run acc
+ #  wait-on: "http://localhost:2999/"
+ #  env:
+ #  # pass GitHub token to allow accurately detecting a build vs a re-run build for Cypress Dashboard
+ #  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+ #  # pass the Dashboard record key as an environment variable for Cypress Dashboard
+ #  CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+ #  CYPRESS_TEST_USER_PASSWORD: ${{ secrets.CYPRESS_TEST_USER_PASSWORD }}
 
  - name: Build
  run: docker build .

.husky/pre-commit

@@ -0,0 +1 @@
+npm run lint:fix

Dockerfile

@@ -8,35 +8,35 @@ ARG COMMIT_HASH
 
 ENV DIR /var/www
 COPY . $DIR/
+RUN ls -la $DIR
 
 # build dirs
-RUN mkdir -p $DIR/builds/acceptance
-RUN mkdir -p $DIR/builds/production
+RUN mkdir -p $DIR/builds/application
 
 WORKDIR $DIR
-
-# install dependencies
+COPY package*.json $DIR/
 RUN npm ci --production --unsafe-perm --ignore-scripts .
 
 # global variables
-RUN echo "REACT_APP_GIT_COMMIT_HASH=$COMMIT_HASH" > .env.local
+# RUN echo "REACT_APP_GIT_COMMIT_HASH=$COMMIT_HASH" > .env.local
+
+# remove storybook files
+RUN find src -type f -name "*.stories.tsx" -delete
 
-# build production
 RUN npm run build
-RUN mv $DIR/build/* $DIR/builds/production/
 
-# build acceptance
-RUN npm run build:acc
-RUN mv $DIR/build/* $DIR/builds/acceptance/
+RUN mv $DIR/build/* $DIR/builds/application/
 
-# Use the official Nginx image as the final stage
 FROM nginx:stable-alpine
 
-# Copy the nginx configuration
 ADD nginx.conf /etc/nginx/nginx.conf
-
-# Copy the build artifacts from the builder stage
 COPY --from=builder /var/www/builds /var/www
+COPY --from=builder /var/www/env.* /var/www
+COPY --from=builder /var/www/package.json /var/www/package.json
+
+COPY entrypoint.sh /entrypoint.sh
+
+RUN chmod +x /entrypoint.sh
 
-# Start nginx
+ENTRYPOINT [ "/entrypoint.sh" ]
 CMD nginx -g 'daemon off;'

Makefile

@@ -0,0 +1,47 @@
+.PHONY: manifests deploy
+
+dc = docker compose
+
+ENVIRONMENT ?= local
+HELM_ARGS = manifests/chart \
+ -f manifests/values.yaml \
+ -f manifests/env/${ENVIRONMENT}.yaml \
+ --set image.tag=${VERSION}
+
+REGISTRY ?= 127.0.0.1:5001
+REPOSITORY ?= salmagundi/zaken-frontend
+VERSION ?= latest
+
+build:
+ $(dc) build
+
+test:
+ echo "No tests available"
+
+migrate:
+
+push:
+ $(dc) push
+
+
+manifests:
+ @helm template wonen-frontend $(HELM_ARGS) $(ARGS)
+
+deploy: manifests
+ helm upgrade --install wonen-frontend $(HELM_ARGS) $(ARGS)
+
+update-chart:
+ rm -rf manifests/chart
+ git clone --branch 1.5.2 --depth 1 git@github.com:Amsterdam/helm-application.git manifests/chart
+ rm -rf manifests/chart/.git
+
+clean:
+ $(dc) down -v --remove-orphans
+
+reset:
+ helm uninstall wonen-frontend
+
+refresh: reset build push deploy
+
+dev:
+ nohup kubycat kubycat-config.yaml > /dev/null 2>&1&

README.md

@@ -23,8 +23,6 @@
 - GitHub repository (https://github.com/Amsterdam/zaken-frontend) OIS Basis
 - GitHub repository dependency (https://github.com/Amsterdam/wonen-ui) OIS Basis
 - GitHub repository dependency (https://github.com/Amsterdam/amsterdam-react-final-form) OIS Basis
-- Jenkins (https://ci.secure.amsterdam.nl/job/fixxx/job/zaken-frontend/) (over VPN) OIS Basis
-- Sentry (https://sentry.data.amsterdam.nl/sentry/zaken-frontend/) OIS Basis
 - NPM (https://www.npmjs.com/settings/amsterdam/packages) OIS Slack #frontend-amsterdam
 
 ### Connecting to Acceptance API

cypress.config.ts

@@ -3,14 +3,14 @@ import { defineConfig } from "cypress"
 export default defineConfig({
  projectId: "tbpt8b",
  chromeWebSecurity: false,
- screenshotOnRunFailure: false,
- video: false,
+ screenshotOnRunFailure: true,
+ video: true,
  viewportWidth: 1280,
  viewportHeight: 1024,
  defaultCommandTimeout: 10000,
+ pageLoadTimeout: 30000,
  requestTimeout: 10000,
  env: {
- baseUrlAcc: "https://acc.api.wonen.zaken.amsterdam.nl/api/v1/",
  baseUrlData: "https://api.data.amsterdam.nl/",
  userHh: "handhaver-noreply@amsterdam.nl",
  userHhj: "handhavingsjurist-noreply@amsterdam.nl",
@@ -36,8 +36,8 @@ export default defineConfig({
  },
  component: {
  devServer: {
- framework: "create-react-app",
- bundler: "webpack"
+ framework: "react", 
+ bundler: "vite"
  }
  }
 })

cypress/README.md

@@ -1,16 +1,25 @@
 # Zaken frontend - Cypress integration
 
 ## Local testing
+
+Start your local env:
+
+```JavaScript
+npm run acc
+```
+
 To open the Cypress UI, enter the following command after installing dependencies:
 
 - `npx cypress open` or `npm run cy`
 
 ## Run specific tests
-- `npm run cy:run -- --spec "cypress/integration/my-spec.js"`
+```JavaScript
+npm run cy:run -- --spec "cypress/integration/my-spec.js"
+```
 
 ## Global variables
 
-Global Cypress variables can be found in `cypress.json` in the root of the project. You can acces them by using: `Cypress.env("emailPm")`.
+Global Cypress variables can be found in `cypress.config.ts` in the root of the project. You can acces them by using: `Cypress.env("emailPm")`.
 
 ## Credentials or secrets
 

cypress/e2e/020_visit/visit.plan.authorization.spec.js

@@ -4,7 +4,7 @@ import visit from "../../fixtures/visit.json"
 describe('Plan "huisbezoek"', () => {
 
  it("Go to Adresoverzicht and check address", () => {
- const url = `${Cypress.env("baseUrlAcc")}addresses/*/cases/`
+ const url = `**/addresses/*/cases/`
  cy.intercept(url).as("getCases")
  cy.visit(`/adres/${address.bagId}`)
  cy.wait("@getCases").then(() => {
@@ -29,7 +29,7 @@ describe('Plan "huisbezoek"', () => {
  describe('Go to "Bezoek inplannen" form', () => {
 
  it("Click on task Bezoek inplannen", () => {
- const url = `${Cypress.env("baseUrlAcc")}cases/*/`
+ const url = `**/cases/*/`
  cy.intercept(url).as("getTasks")
  cy.wait("@getTasks").then(() => {
  cy.get("tbody>tr")
@@ -39,7 +39,7 @@ describe('Plan "huisbezoek"', () => {
  })
 
  it("Bezoek inplannen page is visible", () => {
- const url = `${Cypress.env("baseUrlAcc")}themes/*/schedule-types/`
+ const url = `**/themes/*/schedule-types/`
  cy.intercept(url).as("getScheduleTypes")
  cy.wait("@getScheduleTypes").then(() => {
  cy.get("h1")

cypress/e2e/020_visit/visit.plan.spec.js

@@ -10,7 +10,7 @@ beforeEach(() => {
 
 describe('Test visit.plan.spec', () => {
  it("Go to Adresoverzicht and select address", () => {
- const url = `${Cypress.env("baseUrlAcc")}addresses/*/cases/`;
+ const url = `**/addresses/*/cases/`;
  cy.intercept(url).as("getCases");
  cy.visit(`/adres/${address.bagId}`);
  cy.wait("@getCases").then(() => {
@@ -40,7 +40,7 @@ describe('Test visit.plan.spec', () => {
 
  cy.get(`[data-testid="submit"]`).click();
 
- const urlCases = `${Cypress.env("baseUrlAcc")}cases/*/`;
+ const urlCases = `**/cases/*/`;
  cy.intercept(urlCases).as("getCase");
  cy.wait("@getCase").then(() => {
  cy.get("tbody>tr").contains("td", "Bezoek inplannen");
@@ -50,9 +50,7 @@ describe('Test visit.plan.spec', () => {
  it("Schedule `Huisbezoek`", () => {
  cy.goToCaseDetailPage();
 
- const urlScheduleTypes = `${Cypress.env(
- "baseUrlAcc"
- )}themes/*/schedule-types/`;
+ const urlScheduleTypes = "**/themes/*/schedule-types/";
  cy.intercept(urlScheduleTypes).as("getScheduleTypes");
 
  cy.get("tbody>tr").contains("td", "Bezoek inplannen").click();
@@ -88,7 +86,7 @@ describe('Test visit.plan.spec', () => {
  .contains("Bezoek inplannen")
  .click();
 
- const url = `${Cypress.env("baseUrlAcc")}cases/*/events/`;
+ const url = `**/cases/*/events/`;
  cy.intercept(url).as("getEvents");
  cy.wait("@getEvents").then(() => {
  cy.history("Bezoek ingepland", "Datum");

cypress/e2e/020_visit/visit.result.access.granted.spec.js

@@ -12,14 +12,14 @@ beforeEach(() => {
 
 describe("Test visit.result.access.granted.spec", () => {
  it("Mock TOP result for visit", () => {
- const urlCases = `${Cypress.env("baseUrlAcc")}addresses/*/cases/`;
+ const urlCases = `**/addresses/*/cases/`;
  cy.intercept(urlCases).as("getCases");
  cy.visit(`/adres/${address.bagId}`);
  cy.wait("@getCases").then(() => {
  cy.get("h1").contains(`${address.street}, ${address.zipCode}`);
  });
 
- const urlCase = `${Cypress.env("baseUrlAcc")}cases/*/`;
+ const urlCase = `**/cases/*/`;
  cy.intercept(urlCase).as("getCase");
 
  cy.scrollTo(0, 400);
@@ -42,7 +42,7 @@ describe("Test visit.result.access.granted.spec", () => {
 
  cy.testDueDate("tbody>tr>td", 0);
 
- const url = `${Cypress.env("baseUrlAcc")}users/`;
+ const url = `**/users/`;
  cy.intercept(url).as("getUsers");
 
  cy.visit(`/zaken/${caseId}/huisbezoek/${taskId}`);
@@ -73,7 +73,7 @@ describe("Test visit.result.access.granted.spec", () => {
 
  cy.get('[data-testid="notes"').type(visit.notes);
 
- const url = `${Cypress.env("baseUrlAcc")}cases/*/`;
+ const url = `**/cases/*/`;
  cy.intercept(url).as("getDebriefTask");
 
  cy.get('button[data-testid="submit"]').contains("Toevoegen").click();