Security patches, fix broken test and tiny nix flake change

.yarn/patches/gray-matter-npm-4.0.3-852ae4f34c.patch

@@ -0,0 +1,15 @@
+diff --git a/lib/engines.js b/lib/engines.js
+index 38f993db06cf364191ac635a6590c2d29303297d..bba7b012fb901eb37498cb953a34cfdc44098fd7 100644
+--- a/lib/engines.js
++++ b/lib/engines.js
+@@ -13,8 +13,8 @@ const engines = exports = module.exports;
+  */
+
+ engines.yaml = {
+-  parse: yaml.safeLoad.bind(yaml),
+-  stringify: yaml.safeDump.bind(yaml)
++  parse: (yaml.load || yaml.safeLoad).bind(yaml),
++  stringify: (yaml.dump || yaml.safeDump).bind(yaml)
+ };
+
+ /**

application/admin-client/cypress/e2e/surveyEditor.cy.js

@@ -11,7 +11,7 @@ describe('Survey Editor', () => {
   it('Edit title and description', () => {
     cy.visit('/surveys')
     cy.get('[data-rowindex="0"]').contains('Current Draft').should('exist')
-    cy.get('[data-rowindex="0"] button').first().click()
+    cy.get('[data-rowindex="0"] [data-cy="edit-button"]').first().click()
     cy.contains('Survey Steps').should('exist')
     cy.wait(500)
     cy.get('[data-cy="step-title"]').type('123')

application/admin-client/package.json

@@ -13,15 +13,15 @@
     "@mui/lab": "^5.0.0-alpha.85",
     "@mui/material": "^6.1.5",
     "@mui/x-data-grid": "latest-v7",
-    "@refinedev/cli": "^2.16.47",
-    "@refinedev/core": "^4.57.9",
-    "@refinedev/devtools": "^1.2.16",
-    "@refinedev/kbar": "^1.3.16",
-    "@refinedev/mui": "^5.22.0",
-    "@refinedev/react-hook-form": "^4.9.3",
-    "@refinedev/react-router-v6": "^4.6.2",
-    "@refinedev/simple-rest": "^5.0.11",
-    "@tanstack/react-query": "^4.10.1",
+    "@refinedev/cli": "^2.16.52",
+    "@refinedev/core": "^5.0.12",
+    "@refinedev/devtools": "^2.0.5",
+    "@refinedev/kbar": "^2.0.1",
+    "@refinedev/mui": "^8.0.2",
+    "@refinedev/react-hook-form": "^5.0.4",
+    "@refinedev/react-router": "^2.0.4",
+    "@refinedev/simple-rest": "^6.0.1",
+    "@tanstack/react-query": "^5.90.16",
     "flat": "^6.0.1",
     "immer": "^10.1.1",
     "mui-one-time-password-input": "^5.0.0",
@@ -31,8 +31,7 @@
     "react-dom": "^18.0.0",
     "react-hook-form": "^7.30.0",
     "react-markdown": "^10.0.1",
-    "react-router-dom": "^6.30.3",
-    "react-router-hash-link": "^2.4.3",
+    "react-router": "^7.18.1",
     "react-spreadsheet-import": "^4.7.1",
     "x-data-grid-8": "npm:@mui/x-data-grid@8.14",
     "zustand": "^5.0.0"
@@ -41,7 +40,6 @@
     "@types/node": "^18.16.2",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@types/react-router-hash-link": "^2.4.9",
     "@typescript-eslint/parser": "^8.31.1",
     "@vitejs/plugin-react": "^4.0.0",
     "cypress": "^13.17.0",

application/admin-client/src/App.tsx

@@ -5,22 +5,22 @@ import { RefineKbar, RefineKbarProvider } from '@refinedev/kbar'
 import {
   AuthPage,
   ErrorComponent,
-  notificationProvider,
+  useNotificationProvider,
   RefineSnackbarProvider,
-  ThemedLayoutV2,
-  ThemedTitleV2,
+  ThemedLayout,
+  ThemedTitle,
 } from '@refinedev/mui'
 
 import { dataProvider } from './providers/dataProvider'
 import CssBaseline from '@mui/material/CssBaseline'
 import GlobalStyles from '@mui/material/GlobalStyles'
-import { BrowserRouter, Route, Routes, Outlet, Link } from 'react-router-dom'
+import { BrowserRouter, Route, Routes, Outlet, Link } from 'react-router'
 import routerBindings, {
   NavigateToResource,
   CatchAllNavigate,
   UnsavedChangesNotifier,
   DocumentTitleHandler,
-} from '@refinedev/react-router-v6'
+} from '@refinedev/react-router'
 import { UserList, UserCreate, UserEdit, UserShow } from './pages/users'
 import { SurveyList, SurveyEditor } from './pages/surveys'
 import { ColorModeContextProvider } from './contexts/color-mode'
@@ -68,7 +68,7 @@ function App() {
               <DevtoolsProvider>
                 <Refine
                   dataProvider={dataProvider()}
-                  notificationProvider={notificationProvider}
+                  notificationProvider={useNotificationProvider}
                   routerProvider={routerBindings}
                   authProvider={authProvider}
                   accessControlProvider={accessControlProvider}
@@ -186,7 +186,6 @@ function App() {
                   options={{
                     syncWithLocation: true,
                     warnWhenUnsavedChanges: false,
-                    useNewQueryKeys: true,
                     projectId: 'UqrerM-EBDoyv-UEni4Y',
                     reactQuery: {
                       clientConfig: {
@@ -212,14 +211,14 @@ function App() {
                           fallback={<CatchAllNavigate to="/login" />}
                         >
                           <StudyLoader>
-                            <ThemedLayoutV2
+                            <ThemedLayout
                               Header={Header}
                               Title={({ collapsed }) => (
-                                <ThemedTitleV2 collapsed={collapsed} text="CTRL Admin Portal" />
+                                <ThemedTitle collapsed={collapsed} text="CTRL Admin Portal" />
                               )}
                             >
                               <Outlet />
-                            </ThemedLayoutV2>
+                            </ThemedLayout>
                           </StudyLoader>
                         </Authenticated>
                       }

application/admin-client/src/components/LogoUploader.tsx

@@ -36,7 +36,9 @@ export const LogoUploader = ({
       setLogoVersion(Date.now())
       setLocalHasLogo(true)
 
-      queryClient.invalidateQueries([resource])
+      queryClient.invalidateQueries({
+        queryKey: [resource],
+      })
     } catch (e: any) {
       open?.({
         type: 'error',
@@ -57,7 +59,9 @@ export const LogoUploader = ({
       open?.({ type: 'success', message: 'Deleted logo' })
       setLocalHasLogo(false)
 
-      queryClient.invalidateQueries([resource])
+      queryClient.invalidateQueries({
+        queryKey: [resource],
+      })
     } catch (e: any) {
       open?.({
         type: 'error',

application/admin-client/src/components/ParticipantSearch.tsx

@@ -15,7 +15,7 @@ export function ParticipantSearch({ buttonText, onConfirm, exclude }: Participan
   const [selectedId, setSelectedId] = useState<number>()
   const [participants, setParticipants] = useState<Participant[]>([])
 
-  const { data } = useList<Participant, HttpError>({ resource: 'participants' })
+  const { data } = useList<Participant, HttpError>({ resource: 'participants' }).query
 
   useEffect(() => {
     const filtered = data?.data.filter((val) => {

application/admin-client/src/components/RedcapImport.tsx

@@ -16,7 +16,7 @@ import { useEffect, useState } from 'react'
 import { Close, ArrowBack } from '@mui/icons-material'
 import ReactMarkdown from 'react-markdown'
 import { useNotification, useBack } from '@refinedev/core'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { useCurrentStudyId, useStudyStore } from '../studyStore'
 import { RedcapLogo } from './RedcapLogo'
 

application/admin-client/src/components/StudyLoader.tsx

@@ -8,7 +8,7 @@ export const StudyLoader: React.FC<PropsWithChildren> = ({ children }) => {
     url: `studies`,
     method: 'get',
     queryOptions: { queryKey: ['studies'] },
-  })
+  }).query
   const { studies, setStudies, activeStudyIndex, setActiveStudyIndex } = useStudyStore()
   const invalidate = useInvalidate()
   const { mutate: logout } = useLogout()

application/admin-client/src/components/header/index.tsx

@@ -2,13 +2,13 @@ import { Menu, MenuItem, Button, Divider } from '@mui/material'
 import AppBar from '@mui/material/AppBar'
 import Stack from '@mui/material/Stack'
 import Toolbar from '@mui/material/Toolbar'
-import { HamburgerMenu, RefineThemedLayoutV2HeaderProps } from '@refinedev/mui'
+import { HamburgerMenu, RefineThemedLayoutHeaderProps } from '@refinedev/mui'
 import React, { useState } from 'react'
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
 import { useStudyStore } from '../../studyStore'
 import { Link, useParsed } from '@refinedev/core'
 
-export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({ sticky = true }) => {
+export const Header: React.FC<RefineThemedLayoutHeaderProps> = ({ sticky = true }) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
   const studyMenuOpen = Boolean(anchorEl)
 

application/admin-client/src/pages/family/edit.tsx

@@ -30,10 +30,11 @@ import { OnBehalf, ParticipantType } from '@common/types/api/users/ParticipantPr
 import { useEffect, useState } from 'react'
 import { ParticipantSearch } from '../../components/ParticipantSearch'
 import { ArrowBack, Delete } from '@mui/icons-material'
-import { Link, useNavigate } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router'
 import { GetFamilyResponse } from '@common/types/api/families'
 import { axiosInstance } from '../../providers/dataProvider'
 import { useCurrentStudyId } from '../../studyStore'
+import { useQueryClient } from '@tanstack/react-query'
 
 export const FamilyEdit = () => {
   const studyId = useCurrentStudyId()
@@ -43,7 +44,9 @@ export const FamilyEdit = () => {
   const invalidate = useInvalidate()
   const nav = useNavigate()
 
-  const { data, remove } = useOne<GetFamilyResponse['data']>({ resource: 'families', id })
+  const queryClient = useQueryClient()
+
+  const { data } = useOne<GetFamilyResponse['data']>({ resource: 'families', id }).query
 
   const [action, setAction] = useState<'ADD' | 'REMOVE' | null>(null)
   const [loading, setLoading] = useState(false)
@@ -57,11 +60,12 @@ export const FamilyEdit = () => {
   useEffect(() => {
     if (data) {
       if (data.data.every((val) => !val.inStudy)) {
-        remove()
+        // Clear the cache for this specific familiy so it doesn flash if we come back
+        queryClient.removeQueries({ queryKey: ['families', 'getOne', id] })
         nav('/participants')
       }
     }
-  }, [data])
+  }, [data, id, nav, queryClient])
 
   //Dependents add form
   const { register, handleSubmit, reset } = useForm<OnBehalf>()

application/admin-client/src/pages/integrations/index.tsx

@@ -13,7 +13,7 @@ import {
 } from '@mui/material'
 import GroupAddIcon from '@mui/icons-material/GroupAdd'
 import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { SensitiveTextField } from '../../components/SensitiveTextField'
 import { useCustom, useGetIdentity } from '@refinedev/core'
 import { GetElsaTokenResponse } from '@common/types/api/integrations/getElsaToken'
@@ -30,7 +30,7 @@ export const IntegrationsHome = () => {
   const { data, refetch } = useCustom<GetElsaTokenResponse>({
     url: `elsa/token`,
     method: 'get',
-  })
+  }).query
 
   const enabled = Boolean(data?.data.token)
 

application/admin-client/src/pages/integrations/participantImport.tsx

@@ -2,7 +2,7 @@ import { useInvalidate, useNotification } from '@refinedev/core'
 import { RedcapImport } from '../../components/RedcapImport'
 import { axiosInstance } from '../../providers/dataProvider'
 import { participantUploadCSVDocumentation } from './helpPageRedcap'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { useCurrentStudyId } from '../../studyStore'
 import { Recipient } from '@common/types/invite'
 

application/admin-client/src/pages/integrations/surveyImport.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { RedcapImport } from '../../components/RedcapImport'
 import { axiosInstance } from '../../providers/dataProvider'
 import { instrumentUploadCSVDocumentation } from './helpPageRedcap'

application/admin-client/src/pages/login/OTP.tsx

@@ -1,5 +1,5 @@
 import { Box, Button, Card, Container, Stack, Typography } from '@mui/material'
-import { Link, useSearchParams } from 'react-router-dom'
+import { Link, useSearchParams } from 'react-router'
 import { LoginResponse } from '@common/types/api/auth'
 import { FormEvent, useEffect, useState } from 'react'
 import { MuiOtpInput } from 'mui-one-time-password-input'

application/admin-client/src/pages/login/callback.tsx

@@ -1,7 +1,7 @@
 import { Button, CircularProgress, Stack, Typography } from '@mui/material'
 import { useParsed } from '@refinedev/core'
 import { useLogin } from '../../hooks/useLogin'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 
 import { axiosInstance } from '@refinedev/simple-rest'
 import { useEffect, useState } from 'react'

application/admin-client/src/pages/login/index.tsx

@@ -2,7 +2,7 @@ import { Box } from '@mui/material'
 import { AuthPage } from '@refinedev/mui'
 import { useEffect } from 'react'
 import { useAuthStore } from '../../authStore'
-import { useNavigate, useSearchParams } from 'react-router-dom'
+import { useNavigate, useSearchParams } from 'react-router'
 import { SetupResponse } from '@common/types/api/auth'
 
 export const Login = () => {

application/admin-client/src/pages/participants/list.tsx

@@ -15,7 +15,7 @@ import {
 import { DataGrid, type GridColDef } from '@mui/x-data-grid'
 import { DateField, EditButton, List, ShowButton, useDataGrid } from '@refinedev/mui'
 import React, { useEffect, useState } from 'react'
-import { Link, useLocation } from 'react-router-dom'
+import { Link, useLocation } from 'react-router'
 import { InviteModal } from '../../components/InviteModal'
 import { Recipient } from '@common/types/invite'
 import { axiosInstance } from '../../providers/dataProvider'

application/admin-client/src/pages/participants/show.tsx

@@ -3,15 +3,15 @@ import { GetParticipantResponse } from '@common/types/api/participants'
 import { Box, Button, IconButton, Stack, Tooltip, Typography } from '@mui/material'
 import { useShow } from '@refinedev/core'
 import { Show, TextFieldComponent as TextField } from '@refinedev/mui'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { statusMap } from './list'
 import { familyMap } from '@common/src/familyMap'
 import { Edit } from '@mui/icons-material'
 
 export const ParticipantShow = () => {
-  const { queryResult } = useShow({})
+  const { query } = useShow({})
 
-  const { data, isLoading } = queryResult
+  const { data, isLoading } = query
 
   const record = data?.data as GetParticipantResponse['data']
 

application/admin-client/src/pages/responses/all.tsx

@@ -49,7 +49,7 @@ export const AllResponsesView = () => {
   const { data } = useCustom<GetAllResponsesResponse>({
     url: `studies/${studyId}/surveys/${id}/participants/answers`,
     method: 'get',
-  })
+  }).query
 
   const rows = useMemo(() => {
     return data?.data.data.participants || []

application/admin-client/src/pages/responses/index.tsx

@@ -11,7 +11,7 @@ export const ResponsesView = () => {
   const { data } = useCustom<GetResponsesByIdResponse>({
     url: `studies/${studyId}/surveys/${params?.versionNumber}/participants/${params?.id}/answers`,
     method: 'get',
-  })
+  }).query
 
   const derived_from = data?.data.data.derived_from
 

application/admin-client/src/pages/settings/index.tsx

@@ -1,7 +1,7 @@
 import { Box, Button, Container, TextField, Tooltip, Typography } from '@mui/material'
 import { useNotification } from '@refinedev/core'
 import { useForm } from '@refinedev/react-hook-form'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { axiosInstance } from '../../providers/dataProvider'
 import { Info } from '@mui/icons-material'
 import { LogoUploader } from '../../components/LogoUploader'
@@ -22,7 +22,7 @@ const SettingsPage = () => {
     handleSubmit,
     formState: { errors },
     watch,
-    refineCore: { queryResult },
+    refineCore: { query },
   } = useForm<any, any, FieldValues>({
     refineCoreProps: {
       resource: 'settings',
@@ -34,7 +34,7 @@ const SettingsPage = () => {
   })
 
   const { open } = useNotification()
-  const orgSettingsData = queryResult?.data?.data
+  const orgSettingsData = query?.data?.data
   console.log('SETTINGS DATA:', orgSettingsData)
 
   const handleSave = async (data: FieldValues) => {