Merge

package.json

@@ -6,7 +6,7 @@
     "type": "module",
     "dependencies": {
         "@headlessui/react": "^1.7.17",
-        "@pzh-ui/components": "^0.0.539",
+        "@pzh-ui/components": "^0.0.541",
         "@pzh-ui/config": "^0.0.69",
         "@pzh-ui/css": "^0.0.96",
         "@pzh-ui/icons": "^0.0.60",

public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (2.1.1).
+ * Mock Service Worker (2.2.0).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.

src/App/App.tsx

@@ -3,7 +3,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { Suspense } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 import { Helmet, HelmetProvider } from 'react-helmet-async'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 
 import Axe from '@/Axe'
 import { LoaderContent } from '@/components/Loader'
@@ -34,6 +34,8 @@ const queryClient = new QueryClient({
 })
 
 const App = () => {
+    const location = useLocation()
+
     const navigate = useNavigate()
     globalRouter.navigate = navigate
 
@@ -46,7 +48,7 @@ const App = () => {
             <QueryClientProvider client={queryClient}>
                 <AuthProvider>
                     <div
-                        className="relative flex min-h-screen flex-col text-pzh-blue-900"
+                        className="text-pzh-blue-900 relative flex min-h-screen flex-col"
                         id="main-container">
                         <Helmet titleTemplate="%s - Omgevingsbeleid Provincie Zuid-Holland">
                             <meta charSet="utf-8" />
@@ -56,7 +58,9 @@ const App = () => {
                         </Helmet>
 
                         <BaseLayout hideFooter={isAdvancedSearchPage}>
-                            <ErrorBoundary FallbackComponent={ErrorPage}>
+                            <ErrorBoundary
+                                key={location.pathname}
+                                FallbackComponent={ErrorPage}>
                                 <Suspense fallback={<LoaderContent />}>
                                     <AppRoutes />
                                 </Suspense>

src/App/Routes/AppRoutes.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useLayoutEffect } from 'react'
+import { useErrorBoundary } from 'react-error-boundary'
 import { useNavigate, useRoutes } from 'react-router-dom'
 
 import * as models from '@/config/objects'
@@ -43,10 +44,14 @@ import {
     ThemeOverview,
 } from '@/pages/public'
 import MaintenancePage from '@/pages/public/MaintenancePage/MaintenancePage'
+import globalErrorBoundary from '@/utils/globalErrorBoundary'
 
 import ProtectedRoute from './ProtectedRoute'
 
 const AppRoutes = () => {
+    const { showBoundary } = useErrorBoundary()
+    globalErrorBoundary.showBoundary = showBoundary
+
     const routes = useRoutes([
         /**
          * Public pages

src/api/instance.ts

@@ -1,6 +1,7 @@
 import axios, { AxiosError, AxiosRequestConfig } from 'axios'
 
 import getApiUrl from '@/utils/getApiUrl'
+import globalErrorBoundary from '@/utils/globalErrorBoundary'
 import globalRouter from '@/utils/globalRouter'
 import { toastNotification } from '@/utils/toastNotification'
 
@@ -33,7 +34,7 @@ instance.interceptors.response.use(
             toastNotification('notLoggedIn')
             globalRouter.navigate?.('/login')
         } else if (error.response?.status === 500) {
-            globalRouter.navigate?.('/500')
+            globalErrorBoundary.showBoundary?.(error)
         }
 
         return Promise.reject(error)

src/components/DynamicObject/ObjectDefaultInfo/ObjectDefaultInfo.tsx

@@ -1,21 +1,16 @@
 import { Heading, Text } from '@pzh-ui/components'
-import { PenToSquare, Plus, Spinner } from '@pzh-ui/icons'
-import { useMemo, useState } from 'react'
+import { useMemo } from 'react'
 
 import { UserShort } from '@/api/fetchers.schemas'
 import { LoaderCard } from '@/components/Loader'
 import ObjectPersonModal from '@/components/Modals/ObjectModals/ObjectPersonModal'
-import { ObjectPersonModalActions } from '@/components/Modals/ObjectModals/types'
-import { Model, ModelPatchStaticType } from '@/config/objects/types'
+import { Model } from '@/config/objects/types'
 import useObject from '@/hooks/useObject'
 import usePermissions from '@/hooks/usePermissions'
 import useModalStore from '@/store/modalStore'
 import {
-    getStaticDataFilterProperty,
-    getStaticDataFilterRoles,
     getStaticDataLabel,
     getStaticDataPropertyKey,
-    getStaticDataPropertyRequired,
 } from '@/utils/dynamicObject'
 
 interface ObjectDefaultInfoProps {
@@ -27,86 +22,60 @@ const ObjectDefaultInfo = ({ model }: ObjectDefaultInfoProps) => {
 
     const setActiveModal = useModalStore(state => state.setActiveModal)
 
-    const [modal, setModal] = useState<ObjectPersonModalActions>({
-        initialValues: {} as ModelPatchStaticType,
-    })
-
     const { staticData } = model
 
     const { data: object, isLoading, isOwner, isClient } = useObject()
     const data = useMemo(() => object?.ObjectStatics, [object?.ObjectStatics])
 
-    /**
-     * Handle item click
-     */
-    const handleClick = (person: ObjectPersonModalActions['person']) => {
-        setModal({
-            ...modal,
-            person,
-        })
-        setActiveModal('objectPerson')
-    }
-
     if (!!!staticData?.length) return null
 
     return (
         <>
             <div>
-                <Heading level="3" size="m" className="mb-4">
-                    Algemene informatie
-                </Heading>
+                <div className="mb-6 flex items-center justify-between">
+                    <Heading level="3" size="m">
+                        Algemene informatie
+                    </Heading>
+                    {(canPatchObjectInModule && (isOwner || isClient)) ||
+                        (canCreateModule && (
+                            <button
+                                onClick={() =>
+                                    setActiveModal('objectGeneralInformation')
+                                }
+                                className="text-pzh-green underline hover:text-pzh-green-dark">
+                                Wijzigen
+                            </button>
+                        ))}
+                </div>
 
                 {staticData.map(item => {
                     const label = getStaticDataLabel(item)
                     const key = getStaticDataPropertyKey(item)
-                    const required = getStaticDataPropertyRequired(item)
-                    const filterProperty = getStaticDataFilterProperty(item)
-                    const filterRoles = getStaticDataFilterRoles(item)
                     const user = data?.[key]
 
-                    const filter =
-                        filterProperty && data?.[filterProperty]?.UUID
-
                     return (
                         <Item
                             key={item}
                             label={label}
                             user={user}
-                            handleClick={() =>
-                                handleClick({
-                                    key: item,
-                                    label,
-                                    value: user,
-                                    required,
-                                    filter,
-                                    filterRoles,
-                                })
-                            }
                             isLoading={isLoading}
-                            canEdit={
-                                (canPatchObjectInModule &&
-                                    (isOwner || isClient)) ||
-                                canCreateModule
-                            }
                         />
                     )
                 })}
             </div>
 
-            <ObjectPersonModal {...modal} />
+            <ObjectPersonModal model={model} />
         </>
     )
 }
 
 interface ItemProps {
     label: string
     user?: UserShort
-    handleClick: () => void
     isLoading?: boolean
-    canEdit?: boolean
 }
 
-const Item = ({ label, user, handleClick, isLoading, canEdit }: ItemProps) => (
+const Item = ({ label, user, isLoading }: ItemProps) => (
     <div className="mt-3 border-b border-pzh-gray-300 pb-2">
         <Text bold>{label}</Text>
         <div className="relative flex items-center justify-between">
@@ -119,33 +88,6 @@ const Item = ({ label, user, handleClick, isLoading, canEdit }: ItemProps) => (
                     <LoaderCard height="30" mb="0" />
                 </div>
             )}
-            {canEdit &&
-                (isLoading ? (
-                    <Spinner
-                        size={14}
-                        className="animate-spin text-pzh-gray-600"
-                    />
-                ) : !user ? (
-                    <button
-                        type="button"
-                        data-testid="object-person-add"
-                        aria-label={`${label} toevoegen`}
-                        onClick={handleClick}
-                        className="after:content-[' '] after:absolute after:left-0 after:top-0 after:h-full after:w-full">
-                        <div className="flex h-[18px] w-[18px] items-center justify-center rounded-full bg-pzh-green-500">
-                            <Plus size={14} className="text-pzh-white" />
-                        </div>
-                    </button>
-                ) : (
-                    <button
-                        type="button"
-                        data-testid="object-person-edit"
-                        aria-label={`${label} wijzigen`}
-                        onClick={handleClick}
-                        className="after:content-[' '] after:absolute after:left-0 after:top-0 after:h-full after:w-full">
-                        <PenToSquare size={18} className="text-pzh-green-500" />
-                    </button>
-                ))}
         </div>
     </div>
 )