Merge branch 'develop' into copy-survey

.github/dependabot.yml

@@ -0,0 +1,8 @@
+version: 2
+updates:
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      # Check for updates to GitHub Actions every week
+      interval: "weekly"
+    target-branch: "dependabot"

.github/workflows/deploy-app.yml

@@ -47,7 +47,7 @@ jobs:
   build-push-deploy-docker-images:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Upgrade AWS CLI version and setup lightsailctl
         run: |
@@ -58,17 +58,17 @@ jobs:
           sudo chmod +x /usr/local/bin/lightsailctl
 
       - name: Configure AWS credentials
-        uses: aws-actions/configure-aws-credentials@v1
+        uses: aws-actions/configure-aws-credentials@v4
         with:
           aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           aws-region: eu-central-1
 
       - name: Setup buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
 
       - name: Build app image
-        uses: docker/build-push-action@v3
+        uses: docker/build-push-action@v5
         with:
           file: ./docker/app/Dockerfile
           push: false
@@ -78,7 +78,7 @@ jobs:
           tags: public.ecr.aws/n0p8j4k5/trassenscout/app:${{ github.sha }}
 
       - name: Build nginx image
-        uses: docker/build-push-action@v3
+        uses: docker/build-push-action@v5
         with:
           context: ./docker/nginx
           push: false

src/core/components/Map/BaseMap.tsx

@@ -50,9 +50,9 @@ export type BaseMapProps = Required<Pick<MapProps, "id" | "initialViewState">> &
       Point,
       { subsectionSlug: string; subsubsectionSlug?: string; color: string; opacity?: number }
     >
-    dots: [number, number][]
+    dots?: [number, number][]
     classHeight?: string
-    children: React.ReactNode
+    children?: React.ReactNode
   }
 
 export const BaseMap: React.FC<BaseMapProps> = ({
@@ -176,6 +176,8 @@ export const BaseMap: React.FC<BaseMapProps> = ({
             .flat()
             .filter(Boolean)}
           hash={hash || false}
+          // @ts-expect-error: See https://github.com/visgl/react-map-gl/issues/2310
+          RTLTextPlugin={null}
         >
           <NavigationControl showCompass={false} />
           <ScaleControl />

src/core/components/Map/ProjectMap.tsx

@@ -1,10 +1,11 @@
 import { Routes, useParam } from "@blitzjs/next"
 import { lineString } from "@turf/helpers"
 import { along, featureCollection, length } from "@turf/turf"
-import { LngLatBoundsLike } from "maplibre-gl"
+
 import { useRouter } from "next/router"
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useMemo, useState } from "react"
 import {
+  LngLatBoundsLike,
   MapEvent,
   MapLayerMouseEvent,
   Marker,
@@ -27,9 +28,21 @@ export const ProjectMap: React.FC<Props> = ({ subsections }) => {
   const projectSlug = useParam("projectSlug", "string")
   const { mainMap } = useMap()
 
+  // bundingBox only changes when subsections change / subsections array is created
+  const boundingBox = useMemo(() => {
+    return subsectionsBbox(subsections) as LngLatBoundsLike
+  }, [subsections])
+
+  // we do not want to fitBounds everytime the subsections array is created (tanstack query refetches subsections on window focus)
+  // we could disable refetchOnWindowFocus, in [projectId]/index.tsx with {refetchOnWindowFocus: false} https://blitzjs.com/docs/query-usage
+  // but then we would not get the latest data when the user comes back to the page
+
+  // we spread boundingBox in the dependency array to make sure the effect runs when the values of boundingBox change (not everytime the array is created)
   useEffect(() => {
-    mainMap?.fitBounds(subsectionsBbox(subsections) as LngLatBoundsLike, { padding: 60 })
-  }, [mainMap, subsections])
+    // @ts-expect-error
+    mainMap?.fitBounds(boundingBox, { padding: 60 })
+    // @ts-expect-error
+  }, [mainMap, ...boundingBox])
 
   type HandleSelectProps = { subsectionSlug: string; edit: boolean }
   const handleSelect = ({ subsectionSlug, edit }: HandleSelectProps) => {
@@ -117,7 +130,7 @@ export const ProjectMap: React.FC<Props> = ({ subsections }) => {
       <BaseMap
         id="mainMap"
         initialViewState={{
-          bounds: subsectionsBbox(subsections),
+          bounds: boundingBox,
           fitBoundsOptions: { padding: 60 },
         }}
         onClick={handleClickMap}

src/core/components/Map/ProjectMapFallback.tsx

@@ -0,0 +1,22 @@
+import { SubsectionWithPosition } from "src/subsections/queries/getSubsection"
+import { BaseMap } from "./BaseMap"
+import { subsectionsBbox } from "./utils"
+
+type Props = { subsections: SubsectionWithPosition[] }
+
+export const ProjectMapFallback: React.FC<Props> = ({ subsections }) => {
+  return (
+    <section className="mt-3 relative">
+      <BaseMap
+        id="mainMap"
+        initialViewState={{
+          bounds: subsectionsBbox(subsections),
+          fitBoundsOptions: { padding: 60 },
+        }}
+      />
+      <div className="inset-x-0 mx-4 bg-white/80 p-4 px-8 text-center absolute bottom-12 font-sans">
+        Noch keine Planungsabschnitte angelegt
+      </div>
+    </section>
+  )
+}

src/core/components/forms/LabeledGeometryFieldPreview.tsx

@@ -76,6 +76,8 @@ export const LabeledGeometryFieldPreview: React.FC<Props> = ({ name, hasError })
               id="preview"
               mapStyle={vectorStyle}
               scrollZoom={false}
+              // @ts-expect-error: See https://github.com/visgl/react-map-gl/issues/2310
+              RTLTextPlugin={null}
             >
               <NavigationControl showCompass={false} />
               <ScaleControl />

src/pages/[projectSlug]/index.tsx

@@ -1,11 +1,12 @@
 import { BlitzPage, Routes, useParam, useRouterQuery } from "@blitzjs/next"
 import { useQuery } from "@blitzjs/rpc"
-import { Suspense } from "react"
+import { Suspense, useMemo } from "react"
 import { MapProvider } from "react-map-gl"
 import { CalenderDashboard } from "src/calendar-entries/components"
 import { SuperAdminLogData } from "src/core/components/AdminBox/SuperAdminLogData"
 import { Breadcrumb } from "src/core/components/Breadcrumb/Breadcrumb"
 import { ProjectMap } from "src/core/components/Map/ProjectMap"
+import { ProjectMapFallback } from "src/core/components/Map/ProjectMapFallback"
 import { Markdown } from "src/core/components/Markdown/Markdown"
 import { Spinner } from "src/core/components/Spinner"
 import { Link } from "src/core/components/links"
@@ -23,10 +24,10 @@ export const ProjectDashboardWithQuery = () => {
   const projectSlug = useParam("projectSlug", "string")
   const [project] = useQuery(getProject, { slug: projectSlug })
   const [{ subsections }] = useQuery(getSubsections, { projectSlug: projectSlug! })
-
   // We use the URL param `operator` to filter the UI
   // Docs: https://blitzjs.com/docs/route-params-query#use-router-query
   const params = useRouterQuery()
+
   const filteredSubsections = params.operator
     ? subsections.filter(
         (sec) => typeof params.operator === "string" && sec.operator?.slug === params.operator,
@@ -73,9 +74,14 @@ export const ProjectDashboardWithQuery = () => {
       )}
 
       <OperatorFilterDropdown />
-      <MapProvider>
-        <ProjectMap subsections={filteredSubsections} />
-      </MapProvider>
+
+      {Boolean(filteredSubsections.length) ? (
+        <MapProvider>
+          <ProjectMap subsections={filteredSubsections} />
+        </MapProvider>
+      ) : (
+        <ProjectMapFallback subsections={subsections} />
+      )}
 
       <SubsectionTable subsections={filteredSubsections} />
 

src/subsections/components/SubsectionTable.tsx

@@ -1,16 +1,14 @@
 import { Routes } from "@blitzjs/next"
-import { Subsection } from "@prisma/client"
+import clsx from "clsx"
 import { useRouter } from "next/router"
+import { SubsectionIcon } from "src/core/components/Map/Icons"
 import { TableWrapper } from "src/core/components/Table/TableWrapper"
 import { Link } from "src/core/components/links"
-import { useSlugs } from "src/core/hooks"
-import { SubsectionIcon } from "src/core/components/Map/Icons"
-import { startEnd } from "src/core/components/text/startEnd"
 import { longTitle, shortTitle } from "src/core/components/text"
-import { Prettify } from "src/core/types"
-import { SubsectionWithPosition } from "../queries/getSubsection"
+import { startEnd } from "src/core/components/text/startEnd"
+import { useSlugs } from "src/core/hooks"
 import { StakeholderSummary } from "src/stakeholdernotes/components/StakeholderSummary"
-import clsx from "clsx"
+import { SubsectionWithPosition } from "../queries/getSubsection"
 
 type Props = {
   subsections: SubsectionWithPosition[]

src/subsections/mutations/updateSubsectionsWithFeltData.ts

@@ -1,9 +1,8 @@
 import { resolver } from "@blitzjs/rpc"
 import db from "db"
 import { z } from "zod"
-import { SubsectionWithPosition } from "../queries/getSubsection"
-import { FeltApiResponseSchema, SubsectionSchema } from "../schema"
 import { multilinestringToLinestring } from "../components/utils/multilinestringToLinestring"
+import { FeltApiResponseSchema, SubsectionSchema } from "../schema"
 
 const UpdateSubsectionsWithFeltDataSchema = z.object({
   subsections: z.array(