Merge branch 'main' into fix/dh-styling_8-01

.github/workflows/build-publish-docker.yml

@@ -3,6 +3,7 @@ on:
   push:
     paths-ignore:
       - 'operations/deployments/openstad-headless/environments/acc/images.yml'
+      - 'operations/deployments/openstad-headless/environments/prod/images.yml'
     branches:
       - '**'
     tags:
@@ -69,13 +70,9 @@ jobs:
 
   set-images-in-yaml-and-commit:
     name: Set images in yaml and commit
-    if: github.ref == 'refs/heads/main'
+    if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/develop'
     runs-on: ubuntu-latest
     needs: build-and-push-docker-image
-    env:
-      SOPS_AGE_KEY: ${{ secrets.SOPS_AGE_KEY }}
-      SOPS_AGE_KEY_FILE: headless.agekey
-      SOPS_AGE_RECIPIENTS: age1pnz2leuqnfhyt9qpxjjcjs9xe9ys8xjkjn9m656wygy3ndfxya0q6kthy8
 
     # Use the Bash shell regardless whether the GitHub Actions runner is ubuntu-latest, macos-latest, or windows-latest
     defaults:
@@ -91,7 +88,23 @@ jobs:
       - name: Install yq
         run: sudo snap install yq --channel=v4/stable
 
-      - name: Set images and commit
+      - name: "[PROD] Set images and commit"
+        if: github.ref == 'refs/heads/main'
+        run: |
+          git config --global user.email [email protected] && \
+          git config --global user.name "Github action" && \
+          git remote set-url origin https://${{ secrets.GH_COMMIT_PAT }}@github.com/${{ github.repository }}.git && \
+          /snap/bin/yq -i '.admin.deploymentContainer.image = "ghcr.io/${{ github.repository_owner }}/admin-server:${{ needs.build-and-push-docker-image.outputs.image_tag }}"' ./operations/deployments/openstad-headless/environments/prod/images.yml && \
+          /snap/bin/yq -i '.api.deploymentContainer.image = "ghcr.io/${{ github.repository_owner }}/api-server:${{ needs.build-and-push-docker-image.outputs.image_tag }}"' ./operations/deployments/openstad-headless/environments/prod/images.yml && \
+          /snap/bin/yq -i '.cms.deploymentContainer.image = "ghcr.io/${{ github.repository_owner }}/cms-server:${{ needs.build-and-push-docker-image.outputs.image_tag }}"' ./operations/deployments/openstad-headless/environments/prod/images.yml && \
+          /snap/bin/yq -i '.auth.deploymentContainer.image = "ghcr.io/${{ github.repository_owner }}/auth-server:${{ needs.build-and-push-docker-image.outputs.image_tag }}"' ./operations/deployments/openstad-headless/environments/prod/images.yml && \
+          /snap/bin/yq -i '.image.deploymentContainer.image = "ghcr.io/${{ github.repository_owner }}/image-server:${{ needs.build-and-push-docker-image.outputs.image_tag }}"' ./operations/deployments/openstad-headless/environments/prod/images.yml && \
+          git add operations/deployments/openstad-headless/environments/prod/images.yml && \
+          git commit -m "ci: prod release ${{ needs.build-and-push-docker-image.outputs.image_tag }}" && \
+          git push origin main
+
+      - name: "[ACC] Set images and commit"
+        if: github.ref == 'refs/heads/develop'
         run: |
           git config --global user.email [email protected] && \
           git config --global user.name "Github action" && \
@@ -102,8 +115,8 @@ jobs:
           /snap/bin/yq -i '.auth.deploymentContainer.image = "ghcr.io/${{ github.repository_owner }}/auth-server:${{ needs.build-and-push-docker-image.outputs.image_tag }}"' ./operations/deployments/openstad-headless/environments/acc/images.yml && \
           /snap/bin/yq -i '.image.deploymentContainer.image = "ghcr.io/${{ github.repository_owner }}/image-server:${{ needs.build-and-push-docker-image.outputs.image_tag }}"' ./operations/deployments/openstad-headless/environments/acc/images.yml && \
           git add operations/deployments/openstad-headless/environments/acc/images.yml && \
-          git commit -m "ci: release ${{ needs.build-and-push-docker-image.outputs.image_tag }}" && \
-          git push origin main
+          git commit -m "ci: acc release ${{ needs.build-and-push-docker-image.outputs.image_tag }}" && \
+          git push origin develop
 
       - name: Display images in Github Action
         run: |

Dockerfile

@@ -9,73 +9,102 @@ LABEL org.opencontainers.image.source=https://github.com/${GITHUB_REPOSITORY}
 # Create app directory
 WORKDIR /opt/openstad-headless
 
-# Install all base dependencies.# add perl for shell scripts
+# Install all base dependencies and clean up unnecessary files after installation
 RUN apt-get update && \
-    apt-get install -y python3 make cmake git bash g++
+    apt-get install -y python3 make cmake git bash g++ && \
+    apt-get clean && \
+    rm -rf /var/lib/apt/lists/*
 
 RUN npm update -g npm
 
 # Install app dependencies
 COPY --chown=node:node package*.json .
-# Bundle all packages during build, only the installed once will persist
+# Bundle all packages during build, only the installed ones will persist
 COPY --chown=node:node packages/ ./packages
 COPY --chown=node:node apps/$APP ./apps/$APP
 
-RUN npm install -w $WORKSPACE
-
-RUN npm run build-packages --if-present --prefix=$WORKSPACE
-
-# Disabled for now since the admin/web server won't build due to errors
-# && \
-#     npm run build --prefix=@openstad-headless/${APP} --if-present
+RUN npm config set fetch-retry-maxtimeout 300000
+RUN npm config set fetch-retry-mintimeout 60000
+RUN npm config set fetch-timeout 300000
+
+ARG BUILD_ENV=production
+ENV BUILD_ENV=${BUILD_ENV}
+
+# Retry logic for npm install and build-packages if BUILD_ENV is local
+RUN if [ "$BUILD_ENV" = "local" ]; then \
+    n=0; \
+    until [ "$n" -ge 5 ]; do \
+        npm install -w $WORKSPACE && break; \
+        n=$((n+1)); \
+        echo "Retrying npm install... attempt $n"; \
+        sleep 5; \
+    done; \
+    n=0; \
+    until [ "$n" -ge 5 ]; do \
+        npm run build-packages --if-present --prefix=$WORKSPACE && break; \
+        n=$((n+1)); \
+        echo "Retrying build-packages... attempt $n"; \
+        sleep 5; \
+    done; \
+else \
+    npm install -w $WORKSPACE && \
+    npm run build-packages --if-present --prefix=$WORKSPACE; \
+fi
+
+# Generate and store release ID dynamically
+# Alleen uitvoeren voor de cms-server
+RUN if [ "$APP" = "cms-server" ]; then \
+      releaseId=$(node -e "console.log(require('./apps/cms-server/apos-build/release-id.json').releaseId)"); \
+      echo "APOS_RELEASE_ID=$releaseId" >> /opt/openstad-headless/.env; \
+    else \
+      echo "Skipping APOS_RELEASE_ID for $APP"; \
+    fi
 
 # Development image
 FROM builder AS development
-ARG APP
-ENV WORKSPACE apps/${APP}
+ENV NODE_ENV=${NODE_ENV:-development}
 # Create app directory
 WORKDIR /opt/openstad-headless
 
 CMD ["npm", "run", "dev", "--prefix=${WORKSPACE}"]
 
 # Prepare production
 FROM builder AS prepare-production
-ARG APP
-ENV WORKSPACE=apps/${APP}
-RUN npm --prefix=apps/${APP} run build --if-present && \
-    npm --prefix=apps/${APP} prune --production
+ENV NODE_ENV=${NODE_ENV:-production}
+RUN npm --prefix=$WORKSPACE run build --if-present && \
+    npm --prefix=$WORKSPACE prune --production
 
 # Release image
 FROM node:18-slim AS release
 ARG APP
 ARG PORT
 ENV WORKSPACE=apps/${APP}
+ENV NODE_ENV=${NODE_ENV:-production}
 
 WORKDIR /opt/openstad-headless
 
+# Install only necessary system dependencies for runtime and clean up unnecessary files
 RUN apt-get update && \
     apt-get install -y netcat-traditional && \
     apt-get clean && \
     rm -rf /var/lib/apt/lists/*
 
-# copy files
+# Copy the built app from the prepare-production stage
 COPY --from=prepare-production --chown=node:node /opt/openstad-headless/apps/${APP} ./apps/${APP}
+COPY --from=prepare-production --chown=node:node /opt/openstad-headless/node_modules ./node_modules
 
 USER node
 
 EXPOSE ${PORT}
 
-# Run the application
 CMD ["npm", "run", "start", "--prefix=${WORKSPACE}"]
 
+# Release image with additional packages if needed
 FROM release AS release-with-packages
-ARG APP
-ARG PORT
-ENV WORKSPACE=apps/${APP}
 
 WORKDIR /opt/openstad-headless
 
-# copy files
+# Copy the shared packages from the prepare-production stage
 COPY --from=prepare-production --chown=node:node /opt/openstad-headless/packages ./packages
 
 USER node

apps/admin-server/package.json

@@ -56,7 +56,7 @@
     "clsx": "^2.0.0",
     "date-fns": "^2.30.0",
     "eslint": "8.47.0",
-    "eslint-config-next": "13.4.17",
+    "eslint-config-next": "^14.2.3",
     "http-proxy-middleware": "^2.0.6",
     "iron-session": "^8.0.1",
     "leaflet": "^1.9.4",
@@ -70,10 +70,10 @@
     "postcss": "^8.4.38",
     "prismjs": "^1.29.0",
     "radix-ui": "^1.0.1",
-    "react": "18.2.0",
+    "react": "^18.0.0",
     "react-csv": "^2.2.2",
     "react-day-picker": "^8.8.2",
-    "react-dom": "18.2.0",
+    "react-dom": "^18.0.0",
     "react-hook-form": "^7.51.5",
     "react-hot-toast": "^2.4.1",
     "react-leaflet": "^4.2.1",
@@ -92,12 +92,12 @@
     "@types/leaflet-draw": "^1.0.9",
     "@types/lodash": "^4.14.202",
     "@types/mjml-browser": "^4.15.0",
-    "@types/node": "20.5.0",
+    "@types/node": "^18.0",
     "@types/prismjs": "^1.26.4",
-    "@types/react": "18.2.25",
+    "@types/react": "^18.0.0",
     "@types/react-csv": "^1.1.8",
-    "@types/react-dom": "18.2.7",
+    "@types/react-dom": "^18.0.0",
     "pino-pretty": "^10.2.0",
-    "typescript": "5.1.6"
+    "typescript": "^5.0.0"
   }
 }

apps/admin-server/src/components/document-uploader.tsx

@@ -15,7 +15,8 @@ export const DocumentUploader: React.FC<{
   onDocumentUploaded?: (documentObject: {url: string} ) => void;
   documentLabel?: string;
   allowedTypes?: string[];
-}> = ({ form, fieldName, onDocumentUploaded, allowedTypes, documentLabel = 'Document' }) => {
+  project: string;
+}> = ({ form, fieldName, onDocumentUploaded, allowedTypes, documentLabel = 'Document', project }) => {
   const [document, setDocument] = React.useState<{url: string, name: string}>();
   const [documentUrl, setDocumentUrl] = React.useState<string>('');
 
@@ -31,17 +32,12 @@ export const DocumentUploader: React.FC<{
   async function uploadDocument(data: any) {
     let document = prepareDocument(data);
 
-    await fetch('/api/openstad/api/document', {
-      method: 'GET',
+    const response = await fetch(`/api/openstad/api/project/${project}/upload/document`, {
+      method: 'POST',
+      body: document
     })
-      .then((response) => response.json())
-      .then(async (data) => {
-        const response = await fetch(data, {
-          method: 'POST',
-          body: document,
-        })
-        setDocument(await response.json());
-      });
+
+    setDocument(await response.json());
   }
 
   useEffect(() => {

apps/admin-server/src/components/image-uploader.tsx

@@ -16,7 +16,8 @@ export const ImageUploader: React.FC<{
   imageLabel?: string;
   description?: string;
   allowedTypes?: string[];
-}> = ({ form, fieldName, onImageUploaded, allowedTypes, imageLabel = 'Afbeelding', description = '' }) => {
+  project: string;
+}> = ({ form, fieldName, onImageUploaded, allowedTypes, imageLabel = 'Afbeelding', description = '', project }) => {
   const [file, setFile] = React.useState<{url: string}>();
   const [fileUrl, setFileUrl] = React.useState<string>('');
 
@@ -31,17 +32,12 @@ export const ImageUploader: React.FC<{
 
   async function uploadImage(data: any) {
     let image = prepareFile(data);
-    await fetch('/api/openstad/api/image', {
-      method: 'GET',
+    const response = await fetch(`/api/openstad/api/project/${project}/upload/image`, {
+      method: 'POST',
+      body: image
     })
-      .then((response) => response.json())
-      .then(async (data) => {
-        const response = await fetch(data, {
-          method: 'POST',
-          body: image,
-        })
-        setFile(await response.json());
-      });
+
+    setFile(await response.json());
   }
 
   useEffect(() => {

apps/admin-server/src/components/resource-form.tsx

@@ -350,6 +350,7 @@ export default function ResourceForm({ onFormSubmit }: Props) {
 
           <ImageUploader
             form={form}
+            project={project as string}
             fieldName="image"
             allowedTypes={['image/*']}
             onImageUploaded={(imageResult) => {
@@ -363,6 +364,7 @@ export default function ResourceForm({ onFormSubmit }: Props) {
 
           <DocumentUploader
             form={form}
+            project={project as string}
             fieldName="document"
             allowedTypes={[
               'application/pdf',

apps/admin-server/src/components/ui/page-layout.tsx

@@ -17,7 +17,7 @@ export function PageLayout({
   breadcrumbs,
   action,
 }: {
-  children: ReactNode;
+  children?: ReactNode;
   className?: string;
   pageHeader: string;
   breadcrumbs: any;

apps/admin-server/src/pages/projects/[project]/areas/layers/[id]/index.tsx

@@ -125,6 +125,7 @@ export default function ProjectDatalayerEdit() {
                   form.resetField('iconUploader');
                   form.trigger('icon');
                 }}
+                project={project as string}
               />
               <div className="space-y-2 col-span-full md:col-span-1 flex flex-col">
                 {iconField.length > 0 && (

apps/admin-server/src/pages/projects/[project]/authentication/index.tsx

@@ -258,6 +258,7 @@ export default function ProjectAuthentication() {
                   <div className="col-span-full md:col-span-1 flex flex-col">
                   <ImageUploader
                     form={form}
+                    project={project as string}
                     imageLabel="Upload hier het logo voor de authenticatie omgeving"
                     fieldName="imageLogo"
                     allowedTypes={["image/*"]}
@@ -273,6 +274,7 @@ export default function ProjectAuthentication() {
                   <div className="col-span-full md:col-span-1 flex flex-col">
                     <ImageUploader
                       form={form}
+                      project={project as string}
                       imageLabel="Upload hier het favicon voor de authenticatie omgeving"
                       fieldName="imageFavicon"
                       allowedTypes={["image/*"]}