wip fix dockerfile

When we build the docker image, we get a warning
about the casing in the Dockerfile. This commit
fixes the casing in the Dockerfile.

.github/workflows/impress-frontend.yml

@@ -39,29 +39,6 @@ jobs:
           path: "src/frontend/**/node_modules"
           key: front-node_modules-${{ hashFiles('src/frontend/**/yarn.lock') }}
 
-  build-front:
-    runs-on: ubuntu-latest
-    needs: install-front
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Restore the frontend cache
-        uses: actions/cache@v4
-        id: front-node_modules
-        with:
-          path: "src/frontend/**/node_modules"
-          key: front-node_modules-${{ hashFiles('src/frontend/**/yarn.lock') }}
-
-      - name: Build CI App
-        run: cd src/frontend/ && yarn ci:build
-
-      - name: Cache build frontend
-        uses: actions/cache@v4
-        with:
-          path: src/frontend/apps/impress/out/
-          key: build-front-${{ github.run_id }}
-
   test-front:
     runs-on: ubuntu-latest
     needs: install-front
@@ -98,25 +75,11 @@ jobs:
 
   test-e2e-chromium:
     runs-on: ubuntu-latest
-    needs: build-front
     timeout-minutes: 20
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
 
-      - name: Set services env variables
-        run: |
-          make data/media
-          make create-env-files
-          cat env.d/development/common.e2e.dist >> env.d/development/common
-
-      - name: Restore the mail templates
-        uses: actions/cache@v4
-        id: mail-templates
-        with:
-          path: "src/backend/core/templates/mail"
-          key: mail-templates-${{ hashFiles('src/mail/mjml') }}
-
       - name: Restore the frontend cache
         uses: actions/cache@v4
         id: front-node_modules
@@ -124,42 +87,11 @@ jobs:
           path: "src/frontend/**/node_modules"
           key: front-node_modules-${{ hashFiles('src/frontend/**/yarn.lock') }}
 
-      - name: Restore the build cache
-        uses: actions/cache@v4
-        id: cache-build
-        with:
-          path: src/frontend/apps/impress/out/
-          key: build-front-${{ github.run_id }}
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Build the Docker images
-        uses: docker/bake-action@v4
-        with:
-          targets: |
-            app-dev
-            y-provider
-          load: true
-          set: |
-            *.cache-from=type=gha,scope=cached-stage
-            *.cache-to=type=gha,scope=cached-stage,mode=max
+      - name: Set e2e env variables
+        run: cat env.d/development/common.e2e.dist >> env.d/development/common.dist
 
       - name: Start Docker services
-        run: |
-          make run
-
-      - name: Start Nginx for the frontend
-        run: |
-          docker compose up --force-recreate -d nginx-front
-
-      - name: Apply DRF migrations
-        run: |
-          make migrate
-
-      - name: Add dummy data
-        run: |
-          make demo FLUSH_ARGS='--no-input'
+        run: make bootstrap FLUSH_ARGS='--no-input' cache=
 
       - name: Install Playwright Browsers
         run: cd src/frontend/apps/e2e && yarn install-playwright chromium
@@ -176,25 +108,12 @@ jobs:
 
   test-e2e-other-browser:
     runs-on: ubuntu-latest
-    needs: build-front
+    needs: test-e2e-chromium
     timeout-minutes: 20
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
 
-      - name: Set services env variables
-        run: |
-          make data/media
-          make create-env-files
-          cat env.d/development/common.e2e.dist >> env.d/development/common
-
-      - name: Restore the mail templates
-        uses: actions/cache@v4
-        id: mail-templates
-        with:
-          path: "src/backend/core/templates/mail"
-          key: mail-templates-${{ hashFiles('src/mail/mjml') }}
-
       - name: Restore the frontend cache
         uses: actions/cache@v4
         id: front-node_modules
@@ -202,42 +121,11 @@ jobs:
           path: "src/frontend/**/node_modules"
           key: front-node_modules-${{ hashFiles('src/frontend/**/yarn.lock') }}
 
-      - name: Restore the build cache
-        uses: actions/cache@v4
-        id: cache-build
-        with:
-          path: src/frontend/apps/impress/out/
-          key: build-front-${{ github.run_id }}
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Build the Docker images
-        uses: docker/bake-action@v4
-        with:
-          targets: |
-            app-dev
-            y-provider
-          load: true
-          set: |
-            *.cache-from=type=gha,scope=cached-stage
-            *.cache-to=type=gha,scope=cached-stage,mode=max
+      - name: Set e2e env variables
+        run: cat env.d/development/common.e2e.dist >> env.d/development/common.dist
 
       - name: Start Docker services
-        run: |
-          make run
-
-      - name: Start Nginx for the frontend
-        run: |
-          docker compose up --force-recreate -d nginx-front
-
-      - name: Apply DRF migrations
-        run: |
-          make migrate
-
-      - name: Add dummy data
-        run: |
-          make demo FLUSH_ARGS='--no-input'
+        run: make bootstrap FLUSH_ARGS='--no-input' cache=
 
       - name: Install Playwright Browsers
         run: cd src/frontend/apps/e2e && yarn install-playwright firefox webkit chromium

CHANGELOG.md

@@ -11,7 +11,12 @@ and this project adheres to
 
 ## Changed
 
-♻️(frontend) More multi theme friendly #325
+- ♻️(frontend) More multi theme friendly #325
+- ♻️ Bootstrap frontend #257
+
+## Fixed
+
+🐛(frontend) invalidate queries after removing user #336
 
 
 ## [1.5.1] - 2024-10-10

Dockerfile

@@ -1,7 +1,7 @@
 # Django impress
 
 # ---- base image to inherit from ----
-FROM python:3.12.6-alpine3.20 as base
+FROM python:3.12.6-alpine3.20 AS base
 
 # Upgrade pip to its latest release to speed up dependencies installation
 RUN python -m pip install --upgrade pip setuptools
@@ -11,7 +11,10 @@ RUN apk update && \
   apk upgrade
 
 # ---- Back-end builder image ----
-FROM base as back-builder
+FROM base AS back-builder
+
+RUN apk add \
+  cargo
 
 WORKDIR /builder
 
@@ -23,7 +26,7 @@ RUN mkdir /install && \
 
 
 # ---- mails ----
-FROM node:20 as mail-builder
+FROM node:20 AS mail-builder
 
 COPY ./src/mail /mail/app
 
@@ -34,7 +37,7 @@ RUN yarn install --frozen-lockfile && \
 
 
 # ---- static link collector ----
-FROM base as link-collector
+FROM base AS link-collector
 ARG IMPRESS_STATIC_ROOT=/data/static
 
 # Install pango & rdfind
@@ -59,7 +62,7 @@ RUN DJANGO_CONFIGURATION=Build DJANGO_JWT_PRIVATE_SIGNING_KEY=Dummy \
 RUN rdfind -makesymlinks true -followsymlinks true -makeresultsfile false ${IMPRESS_STATIC_ROOT}
 
 # ---- Core application image ----
-FROM base as core
+FROM base AS core
 
 ENV PYTHONUNBUFFERED=1
 
@@ -97,7 +100,7 @@ WORKDIR /app
 ENTRYPOINT [ "/usr/local/bin/entrypoint" ]
 
 # ---- Development image ----
-FROM core as backend-development
+FROM core AS backend-development
 
 # Switch back to the root user to install development dependencies
 USER root:root
@@ -123,7 +126,7 @@ ENV DB_HOST=postgresql \
 CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]
 
 # ---- Production image ----
-FROM core as backend-production
+FROM core AS backend-production
 
 ARG IMPRESS_STATIC_ROOT=/data/static
 

Makefile

@@ -81,7 +81,7 @@ bootstrap: \
 	data/static \
 	create-env-files \
 	build \
-	run-frontend-dev \
+	run-with-frontend \
 	migrate \
 	demo \
 	back-i18n-compile \
@@ -90,11 +90,28 @@ bootstrap: \
 .PHONY: bootstrap
 
 # -- Docker/compose
-build: ## build the app-dev container
-	@$(COMPOSE) build app-dev --no-cache
-	@$(COMPOSE) build frontend-dev --no-cache
+build: cache ?= --no-cache
+build: ## build the project containers
+	@$(MAKE) build-backend cache=$(cache)
+	@$(MAKE) build-yjs-provider cache=$(cache)
+	@$(MAKE) build-frontend cache=$(cache)
 .PHONY: build
 
+build-backend: cache ?=
+build-backend: ## build the app-dev container
+	@$(COMPOSE) build app-dev $(cache)
+.PHONY: build-backend
+
+build-yjs-provider: cache ?=
+build-yjs-provider: ## build the y-provider container
+	@$(COMPOSE) build y-provider $(cache)
+.PHONY: build-yjs-provider
+
+build-frontend: cache ?=
+build-frontend: ## build the frontend container
+	@$(COMPOSE) build frontend-dev $(cache)
+.PHONY: build-frontend
+
 down: ## stop and remove containers, networks, images, and volumes
 	@$(COMPOSE) down
 .PHONY: down
@@ -110,6 +127,11 @@ run: ## start the wsgi (production) and development server
 	@$(WAIT_DB)
 .PHONY: run
 
+run-with-frontend: ## Start all the containers needed (backend to frontend)
+	@$(MAKE) run
+	@$(COMPOSE) up --force-recreate -d frontend-dev
+.PHONY: run-with-frontend
+
 status: ## an alias for "docker compose ps"
 	@$(COMPOSE) ps
 .PHONY: status
@@ -286,10 +308,15 @@ help:
 	@grep -E '^[a-zA-Z0-9_-]+:.*?## .*$$' $(firstword $(MAKEFILE_LIST)) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "$(GREEN)%-30s$(RESET) %s\n", $$1, $$2}'
 .PHONY: help
 
-# Front 
-run-frontend-dev: ## Install and run the frontend dev  
-	@$(COMPOSE) up --force-recreate -d frontend-dev
-.PHONY: run-frontend-dev
+# Front
+frontend-install: ## install the frontend locally
+	cd $(PATH_FRONT_IMPRESS) && yarn
+.PHONY: frontend-install
+
+run-frontend-development: ## Run the frontend in development mode
+	@$(COMPOSE) stop frontend-dev
+	cd $(PATH_FRONT_IMPRESS) && yarn dev
+.PHONY: run-frontend-development
 
 frontend-i18n-extract: ## Extract the frontend translation inside a json to be used for crowdin
 	cd $(PATH_FRONT) && yarn i18n:extract
@@ -314,7 +341,7 @@ start-tilt: ## start the kubernetes cluster using kind
 	tilt up -f ./bin/Tiltfile
 .PHONY: build-k8s-cluster
 
-VERSION_TYPE ?= minor
+bump-packages-version: VERSION_TYPE ?= minor
 bump-packages-version: ## bump the version of the project - VERSION_TYPE can be "major", "minor", "patch"
 	cd ./src/mail && yarn version --no-git-tag-version --$(VERSION_TYPE)
 	cd ./src/frontend/ && yarn version --no-git-tag-version --$(VERSION_TYPE)

README.md

@@ -37,14 +37,6 @@ The easiest way to start working on the project is to use GNU Make:
 $ make bootstrap FLUSH_ARGS='--no-input'
 ```
 
-Then you can access to the project in development mode by going to http://localhost:3000.
-You will be prompted to log in, the default credentials are:
-```bash
-username: impress
-password: impress
-```
----
-
 This command builds the `app` container, installs dependencies, performs
 database migrations and compile translations. It's a good idea to use this
 command each time you are pulling code from the project repository to avoid
@@ -52,12 +44,41 @@ dependency-releated or migration-releated issues.
 
 Your Docker services should now be up and running 🎉
 
-Note that if you need to run them afterwards, you can use the eponym Make rule:
+You can access to the project by going to http://localhost:3000.
+You will be prompted to log in, the default credentials are:
+```bash
+username: impress
+password: impress
+```
+
+📝 Note that if you need to run them afterwards, you can use the eponym Make rule:
 
 ```bash
-$ make run-frontend-dev
+$ make run-with-frontend
 ```
 
+---
+
+⚠️ For the frontend developper, it is often better to run the frontend in development mode locally. 
+To do so, install the frontend dependencies with the following command:
+
+```bash
+$ make frontend-install
+```
+And run the frontend locally in development mode with the following command:
+
+```bash
+$ make run-frontend-development
+```
+
+To start all the services, except the frontend container, you can use the following command:
+
+```bash
+$ make run
+```
+
+---
+
 ### Adding content
 
 You can create a basic demo site by running:

docker-compose.yml

@@ -119,13 +119,20 @@ services:
     depends_on:
       - keycloak
 
-  nginx-front:
-    image: nginx:1.25
+  frontend-dev:
+    user: "${DOCKER_USER:-1000}"
+    build: 
+      context: .
+      dockerfile: ./src/frontend/Dockerfile
+      target: frontend-production
+      args:
+        API_ORIGIN: "http://localhost:8071"
+        Y_PROVIDER_URL: "ws://localhost:4444"
+        MEDIA_URL: "http://localhost:8083"
+        SW_DEACTIVATED: "true"
+    image: impress:frontend-development
     ports:
       - "3000:3000"
-    volumes:
-      - ./src/frontend/apps/impress/conf/default.conf:/etc/nginx/conf.d/default.conf
-      - ./src/frontend/apps/impress/out:/usr/share/nginx/html
 
   dockerize:
     image: jwilder/dockerize
@@ -161,21 +168,6 @@ services:
       - /home/frontend/servers/y-provider/node_modules/
       - /home/frontend/servers/y-provider/dist/
 
-  frontend-dev:
-    user: "${DOCKER_USER:-1000}"
-    build: 
-      context: .
-      dockerfile: ./src/frontend/Dockerfile
-      target: impress-dev
-    ports:
-      - "3000:3000"
-    volumes:
-      - ./src/frontend/apps/impress:/home/frontend/apps/impress
-      - /home/frontend/node_modules/
-    depends_on:
-      - y-provider
-      - celery-dev
-
   kc_postgresql:
     image: postgres:14.3
     ports:

src/backend/pyproject.toml

@@ -57,6 +57,7 @@ dependencies = [
     "WeasyPrint>=60.2",
     "whitenoise==6.7.0",
     "mozilla-django-oidc==4.0.1",
+    "y-py==0.6.2"
 ]
 
 [project.urls]

src/frontend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20-alpine as frontend-deps-y-provider
+FROM node:20-alpine AS frontend-deps-y-provider
 
 WORKDIR /home/frontend/
 
@@ -15,7 +15,7 @@ COPY ./src/frontend/ .
 COPY ./docker/files/usr/local/bin/entrypoint /usr/local/bin/entrypoint
 
 # ---- y-provider ----
-FROM frontend-deps-y-provider as y-provider
+FROM frontend-deps-y-provider AS y-provider
 
 WORKDIR /home/frontend/servers/y-provider
 RUN yarn build
@@ -28,7 +28,7 @@ ENTRYPOINT [ "/usr/local/bin/entrypoint" ]
 
 CMD ["yarn", "start"]
 
-FROM node:20-alpine as frontend-deps
+FROM node:20-alpine AS frontend-deps
 
 WORKDIR /home/frontend/
 
@@ -43,11 +43,11 @@ COPY .dockerignore ./.dockerignore
 COPY ./src/frontend/ .
 
 ### ---- Front-end builder image ----
-FROM frontend-deps as impress
+FROM frontend-deps AS impress
 
 WORKDIR /home/frontend/apps/impress
 
-FROM frontend-deps as impress-dev
+FROM frontend-deps AS impress-dev
 
 WORKDIR /home/frontend/apps/impress
 
@@ -57,7 +57,7 @@ CMD [ "yarn", "dev"]
 
 # Tilt will rebuild impress target so, we dissociate impress and impress-builder 
 # to avoid rebuilding the app at every changes.
-FROM impress as impress-builder
+FROM impress AS impress-builder
 
 WORKDIR /home/frontend/apps/impress
 
@@ -70,10 +70,16 @@ ENV NEXT_PUBLIC_Y_PROVIDER_URL=${Y_PROVIDER_URL}
 ARG API_ORIGIN
 ENV NEXT_PUBLIC_API_ORIGIN=${API_ORIGIN}
 
+ARG MEDIA_URL
+ENV NEXT_PUBLIC_MEDIA_URL=${MEDIA_URL}
+
+ARG SW_DEACTIVATED
+ENV NEXT_PUBLIC_SW_DEACTIVATED=${SW_DEACTIVATED}
+
 RUN yarn build
 
 # ---- Front-end image ----
-FROM nginxinc/nginx-unprivileged:1.26-alpine as frontend-production
+FROM nginxinc/nginx-unprivileged:1.26-alpine AS frontend-production
 
 # Un-privileged user running the application
 ARG DOCKER_USER

src/frontend/apps/impress/.env

@@ -1,4 +1,5 @@
 NEXT_PUBLIC_API_ORIGIN=
 NEXT_PUBLIC_Y_PROVIDER_URL=
 NEXT_PUBLIC_MEDIA_URL=
-NEXT_PUBLIC_THEME=dsfr
+NEXT_PUBLIC_THEME=dsfr
+NEXT_PUBLIC_SW_DEACTIVATED=

src/frontend/apps/impress/src/features/docs/members/members-add/components/AddMembers.tsx

@@ -94,6 +94,15 @@ export const AddMembers = ({ currentRole, doc }: ModalAddMembersProps) => {
       });
     }
 
+    if (
+      dataError.cause?.[0] ===
+      'This email is already associated to a registered user.'
+    ) {
+      messageError = t('"{{email}}" is already member of the document.', {
+        email: dataError['data']?.value,
+      });
+    }
+
     toast(messageError, VariantType.ERROR, toastOptions);
   };
 
@@ -123,6 +132,7 @@ export const AddMembers = ({ currentRole, doc }: ModalAddMembersProps) => {
     setIsPending(false);
     setResetKey(resetKey + 1);
     setSelectedUsers([]);
+    setSelectedRole(undefined);
 
     settledPromises.forEach((settledPromise) => {
       switch (settledPromise.status) {
@@ -156,7 +166,7 @@ export const AddMembers = ({ currentRole, doc }: ModalAddMembersProps) => {
         <Box $gap="0.7rem" $direction="row" $wrap="wrap" $css="flex: 80%;">
           <Box $css="flex: auto;" $width="15rem">
             <SearchUsers
-              key={resetKey + 1}
+              key={resetKey}
               doc={doc}
               setSelectedUsers={setSelectedUsers}
               selectedUsers={selectedUsers}

src/frontend/apps/impress/src/features/docs/members/members-add/components/SearchUsers.tsx

@@ -70,6 +70,7 @@ export const SearchUsers = ({
 
       if (!isFoundUser && !isFoundEmail) {
         users = [
+          ...users,
           {
             value: { email: userQuery },
             label: userQuery,
@@ -83,8 +84,7 @@ export const SearchUsers = ({
     resolveOptionsRef.current = null;
 
     return users;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [options, selectedUsers]);
+  }, [options, selectedUsers, userQuery]);
 
   const loadOptions = (): Promise<OptionsSelect> => {
     return new Promise<OptionsSelect>((resolve) => {

src/frontend/apps/impress/src/features/docs/members/members-add/index.ts

@@ -1 +1,2 @@
+export * from './api';
 export * from './components';

src/frontend/apps/impress/src/features/docs/members/members-list/api/useDeleteDocAccess.ts

@@ -6,6 +6,7 @@ import {
 
 import { APIError, errorCauses, fetchAPI } from '@/api';
 import { KEY_DOC, KEY_LIST_DOC } from '@/features/docs/doc-management';
+import { KEY_LIST_USER } from '@/features/docs/members/members-add';
 
 import { KEY_LIST_DOC_ACCESSES } from './useDocAccesses';
 
@@ -51,6 +52,9 @@ export const useDeleteDocAccess = (options?: UseDeleteDocAccessOptions) => {
       void queryClient.resetQueries({
         queryKey: [KEY_LIST_DOC],
       });
+      void queryClient.invalidateQueries({
+        queryKey: [KEY_LIST_USER],
+      });
       if (options?.onSuccess) {
         options.onSuccess(data, variables, context);
       }