[web] bump dependencies, adapt to tanstack v5

sapcc · Nov 17, 2023 · 48b6a54 · 48b6a54
1 parent 4d4b773
commit 48b6a54
Show file tree

Hide file tree

Showing 31 changed files with 322 additions and 374 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -5,24 +5,24 @@
   "source": "src/index.js",
   "private": true,
   "devDependencies": {
-    "@tanstack/react-query": "^4.33.0",
-    "@tanstack/react-query-devtools": "^4.33.0",
-    "autoprefixer": "^10.4.15",
+    "@tanstack/react-query": "^5.8.4",
+    "@tanstack/react-query-devtools": "^5.8.4",
+    "autoprefixer": "^10.4.16",
     "chalk": "^5.3.0",
-    "countries-list": "^2.6.1",
-    "esbuild": "^0.19.2",
+    "countries-list": "^3.0.6",
+    "esbuild": "^0.19.5",
     "esbuild-plugin-inline-image": "^0.0.9",
     "esbuild-plugin-svgr": "^2.1.0",
-    "esbuild-style-plugin": "^1.6.2",
-    "juno-ui-components": "https://assets.juno.global.cloud.sap/libs/juno-ui-components@2.4.1/package.tgz",
-    "luxon": "^3.4.0",
+    "esbuild-style-plugin": "^1.6.3",
+    "juno-ui-components": "https://assets.juno.global.cloud.sap/libs/juno-ui-components@2.6.3/package.tgz",
+    "luxon": "^3.4.4",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "simple-zustand-devtools": "^1.1.0",
-    "tailwindcss": "^3.3.3",
-    "zustand": "^4.4.1",
-    "zustand-querystring": "^0.0.14"
+    "tailwindcss": "^3.3.5",
+    "zustand": "^4.4.6",
+    "zustand-querystring": "^0.0.17"
   },
   "scripts": {
     "start": "PORT=$APP_PORT NODE_ENV=development node esbuild.config.mjs --serve --watch",

diff --git a/web/src/components/Datacenters/DatacenterList.js b/web/src/components/Datacenters/DatacenterList.js
@@ -19,16 +19,14 @@ const DatacenterList = () => {
         isLoading,
         isFetching,
         isFetchingNextPage,
-    } = useInfiniteQuery(
-        ["datacenters"],
-        fetchAll,
-        {
-            getNextPageParam: nextPageParam,
-            meta: auth,
-            onError: setError,
-            onSuccess: () => setError(undefined),
-        }
-    )
+    } = useInfiniteQuery({
+        queryKey: ["datacenters"],
+        queryFn: fetchAll,
+        getNextPageParam: nextPageParam,
+        meta: auth,
+        onError: setError,
+        onSuccess: () => setError(undefined),
+    })
 
     return (
         <>

diff --git a/web/src/components/Datacenters/DatacenterListItem.js b/web/src/components/Datacenters/DatacenterListItem.js
@@ -41,8 +41,9 @@ const DatacenterListItem = ({datacenter, setError}) => {
                     queryClient
                         .setQueryDefaults(queryKey, {refetchInterval: 5000})
                     // refetch datacenters
-                    queryClient
-                        .invalidateQueries(queryKey)
+                    queryClient.invalidateQueries({
+                        queryKey: queryKey
+                    })
                         .then()
                 },
                 onError: setError

diff --git a/web/src/components/Datacenters/EditDatacenterPanel.js b/web/src/components/Datacenters/EditDatacenterPanel.js
@@ -32,15 +32,15 @@ const EditDatacenterPanel = ({closeCallback}) => {
         provider: undefined,
     })
 
-    const {isLoading} = useQuery(
-        ["datacenters", id],
-        fetchItem,
-        {
-            meta: auth,
-            onError: setError,
-            onSuccess: (data) => setFormState(updateAttributes(formState, data.datacenter)),
-            refetchOnWindowFocus: false,
-        })
+    const {isLoading} = useQuery({
+        queryKey: ["datacenters", id],
+        ...fetchItem
+    }, {
+        meta: auth,
+        onError: setError,
+        onSuccess: (data) => setFormState(updateAttributes(formState, data.datacenter)),
+        refetchOnWindowFocus: false,
+    })
     const mutation = useMutation(updateItem)
 
     const onSubmit = () => {
@@ -57,7 +57,7 @@ const EditDatacenterPanel = ({closeCallback}) => {
                     queryClient
                         .setQueryData(["datacenters", data.datacenter.id], data)
                     queryClient
-                        .invalidateQueries("datacenters")
+                        .invalidateQueries({queryKey: ["datacenters"]})
                         .then(closeCallback)
                 },
                 onError: setError,

diff --git a/web/src/components/Datacenters/NewDatacenterModal.js b/web/src/components/Datacenters/NewDatacenterModal.js
@@ -36,7 +36,7 @@ const NewDatacenterModal = () => {
                     queryClient
                         .setQueryData(["datacenters", data.datacenter.id], data)
                     queryClient
-                        .invalidateQueries("datacenters")
+                        .invalidateQueries( {queryKey: ["datacenters"]})
                         .then(closeModal)
                 }
             }

diff --git a/web/src/components/Domains/DomainList.js b/web/src/components/Domains/DomainList.js
@@ -20,16 +20,14 @@ const DomainList = () => {
         hasNextPage,
         isFetching,
         isFetchingNextPage,
-    } = useInfiniteQuery(
-        ["domains"],
-        fetchAll,
-        {
-            getNextPageParam: nextPageParam,
-            meta: auth,
-            onError: setError,
-            onSuccess: () => setError(undefined),
-        },
-    )
+    } = useInfiniteQuery({
+        queryKey: ["domains"],
+        queryFn: fetchAll,
+        getNextPageParam: nextPageParam,
+        meta: auth,
+        onError: setError,
+        onSuccess: () => setError(undefined),
+    })
 
     return (
         <>

diff --git a/web/src/components/Domains/DomainListItem.js b/web/src/components/Domains/DomainListItem.js
@@ -45,8 +45,9 @@ const DomainListItem = ({domain, setError}) => {
                     const queryKey = ["domains"]
                     queryClient
                         .setQueryDefaults(queryKey, {refetchInterval: 5000})
-                    queryClient
-                        .invalidateQueries(queryKey)
+                    queryClient.invalidateQueries({
+                        queryKey: queryKey
+                    })
                         .then()
                 },
                 onError: setError

diff --git a/web/src/components/Domains/EditDomainPanel.js b/web/src/components/Domains/EditDomainPanel.js
@@ -29,14 +29,15 @@ const EditDomainPanel = ({closeCallback}) => {
         admin_state_up: undefined,
     })
 
-    const {isLoading} = useQuery(["domains", id],
-        fetchItem,
-        {
-            meta: auth,
-            onError: setError,
-            onSuccess: (data) => setFormState(updateAttributes(formState, data.domain)),
-            refetchOnWindowFocus: false,
-        })
+    const {isLoading} = useQuery({
+        queryKey: ["domains", id],
+        ...fetchItem
+    }, {
+        meta: auth,
+        onError: setError,
+        onSuccess: (data) => setFormState(updateAttributes(formState, data.domain)),
+        refetchOnWindowFocus: false,
+    })
     const mutation = useMutation(updateItem)
 
     const onSubmit = () => {
@@ -53,7 +54,7 @@ const EditDomainPanel = ({closeCallback}) => {
                     queryClient
                         .setQueryData(["domains", data.domain.id], data)
                     queryClient
-                        .invalidateQueries("domains")
+                        .invalidateQueries({queryKey: ["domains"]})
                         .then(closeCallback)
                 },
                 onError: setError

diff --git a/web/src/components/Domains/NewDomainModal.js b/web/src/components/Domains/NewDomainModal.js
@@ -31,8 +31,9 @@ const NewDomainModal = () => {
                 onSuccess: (data) => {
                     queryClient
                         .setQueryData(["domains", data.domain.id], data)
-                    queryClient
-                        .invalidateQueries(["domains"])
+                    queryClient.invalidateQueries({
+                        queryKey: ["domains"]
+                    })
                         .then(closeModal)
                 }
             }

diff --git a/web/src/components/GeographicMaps/DatacenterSelect.js b/web/src/components/GeographicMaps/DatacenterSelect.js
@@ -13,7 +13,9 @@ const DatacenterSelect = ({setDatacenter, setError, label = "Select Datacenter",
         hasNextPage,
         fetchNextPage,
         isFetching
-    } = useInfiniteQuery(["datacenters"], fetchAll, {
+    } = useInfiniteQuery({
+        queryKey: ["datacenters"],
+        queryFn: fetchAll,
         getNextPageParam: nextPageParam,
         meta: auth,
         onError: setError

diff --git a/web/src/components/GeographicMaps/EditGeographicMapPanel.js b/web/src/components/GeographicMaps/EditGeographicMapPanel.js
@@ -25,15 +25,15 @@ const EditGeographicMapPanel = ({closeCallback}) => {
         default_datacenter: undefined,
     })
 
-    const {isLoading} = useQuery(
-        ["geomap", id],
-        fetchItem,
-        {
-            meta: auth,
-            onError: setError,
-            onSuccess: (data) => setFormState(updateAttributes(formState, data.datacenter)),
-            refetchOnWindowFocus: false,
-        })
+    const {isLoading} = useQuery({
+        queryKey: ["geomap", id],
+        ...fetchItem
+    }, {
+        meta: auth,
+        onError: setError,
+        onSuccess: (data) => setFormState(updateAttributes(formState, data.datacenter)),
+        refetchOnWindowFocus: false,
+    })
     const mutation = useMutation(updateItem)
 
     const onSubmit = () => {
@@ -50,7 +50,7 @@ const EditGeographicMapPanel = ({closeCallback}) => {
                     queryClient
                         .setQueryData(["geomap", data.datacenter.id], data)
                     queryClient
-                        .invalidateQueries("geomap")
+                        .invalidateQueries({queryKey: ["geomap"]})
                         .then(closeCallback)
                 },
                 onError: setError,

diff --git a/web/src/components/GeographicMaps/GeographicMapList.js b/web/src/components/GeographicMaps/GeographicMapList.js
@@ -20,16 +20,14 @@ const GeographicMapList = () => {
         isLoading,
         isFetching,
         isFetchingNextPage,
-    } = useInfiniteQuery(
-        ["geomaps"],
-        fetchAll,
-        {
-            getNextPageParam: nextPageParam,
-            meta: auth,
-            onError: setError,
-            onSuccess: () => setError(undefined),
-        }
-    )
+    } = useInfiniteQuery({
+        queryKey: ["geomaps"],
+        queryFn: fetchAll,
+        getNextPageParam: nextPageParam,
+        meta: auth,
+        onError: setError,
+        onSuccess: () => setError(undefined),
+    })
 
     return (
         <>

diff --git a/web/src/components/GeographicMaps/GeographicMapListItem.js b/web/src/components/GeographicMaps/GeographicMapListItem.js
@@ -45,8 +45,9 @@ const GeographicMapListItem = ({geomap, setError}) => {
                     queryClient
                         .setQueryDefaults(queryKey, {refetchInterval: 5000})
                     // refetch geomaps
-                    queryClient
-                        .invalidateQueries(queryKey)
+                    queryClient.invalidateQueries({
+                        queryKey: queryKey
+                    })
                         .then()
                 },
                 onError: setError

diff --git a/web/src/components/GeographicMaps/NewGeographicMapModal.js b/web/src/components/GeographicMaps/NewGeographicMapModal.js
@@ -42,7 +42,7 @@ const NewGeographicMapModal = () => {
                     queryClient
                         .setQueryData(["geomaps", data.geomap.id], data)
                     queryClient
-                        .invalidateQueries("geomaps")
+                        .invalidateQueries({queryKey: ["geomaps"]})
                         .then(closeModal)
                 },
                 onError: setError

diff --git a/web/src/components/GeographicMaps/ShowGeographicMapModal.js b/web/src/components/GeographicMaps/ShowGeographicMapModal.js
@@ -13,14 +13,14 @@ const ShowGeographicMapModal = () => {
     const [id, closeModal] = urlStore((state) => [state.id, state.closeModal])
     const [error, setError] = useState()
     const [geomap, setGeomap] = useState({})
-    const {isSuccess, isLoading} = useQuery(
-        ["geomaps", id],
-        fetchItem,
-        {
-            meta: auth,
-            onSuccess: (data) => setGeomap(data.geomap),
-            onError: setError
-        })
+    const {isSuccess, isLoading} = useQuery({
+        queryKey: ["geomaps", id],
+        ...fetchItem
+    }, {
+        meta: auth,
+        onSuccess: (data) => setGeomap(data.geomap),
+        onError: setError
+    })
 
     const createdAt = useMemo(() => {
         if (geomap.created_at) {

diff --git a/web/src/components/LogInModal.js b/web/src/components/LogInModal.js
@@ -21,7 +21,7 @@ const LogInModal = ({keystoneEndpoint, overrideEndpoint}) => {
     const setAuth = authStore((state) => state.setAuth)
     const setModal = urlStore((state) => state.openModal)
     const queryClient = useQueryClient()
-    const {mutate, isLoading, error} = useMutation(login)
+    const {mutate, isLoading, error} = useMutation({mutationFn: login})
     const [showCredentials, setShowCredentials] = useState(false)
     const [mounted, setMounted] = useState(false)
     const [credentials, setCredentials] = useState({

diff --git a/web/src/components/Pools/DomainMenu.js b/web/src/components/Pools/DomainMenu.js
@@ -16,7 +16,9 @@ const DomainMenu = ({formState, setFormState, setError}) => {
         hasNextPage,
         fetchNextPage,
         isFetching
-    } = useInfiniteQuery(["domains"], fetchAll, {
+    } = useInfiniteQuery({
+        queryKey: ["domains"],
+        queryFn: fetchAll,
         getNextPageParam: nextPageParam,
         meta: auth,
         onError: setError

diff --git a/web/src/components/Pools/EditPoolPanel.js b/web/src/components/Pools/EditPoolPanel.js
@@ -16,15 +16,15 @@ const EditPoolPanel = ({closeCallback}) => {
         name: undefined, admin_state_up: true, domains: [],
     })
 
-    const {isLoading} = useQuery(
-        ["pools", id],
-        fetchItem,
-        {
-            meta: auth,
-            onError: setError,
-            onSuccess: (data) => setFormState(updateAttributes(formState, data.pool)),
-            refetchOnWindowFocus: false,
-        })
+    const {isLoading} = useQuery({
+        queryKey: ["pools", id],
+        ...fetchItem
+    }, {
+        meta: auth,
+        onError: setError,
+        onSuccess: (data) => setFormState(updateAttributes(formState, data.pool)),
+        refetchOnWindowFocus: false,
+    })
     const mutation = useMutation(updateItem)
 
     const onSubmit = () => {
@@ -43,7 +43,7 @@ const EditPoolPanel = ({closeCallback}) => {
                     queryClient
                         .setQueryDefaults([], {refetchInterval: 5000})
                     queryClient
-                        .invalidateQueries("pools")
+                        .invalidateQueries({queryKey: ["pools"]})
                         .then(closeCallback)
                 },
                 onError: setError

diff --git a/web/src/components/Pools/Members/DatacenterMenu.js b/web/src/components/Pools/Members/DatacenterMenu.js
@@ -15,7 +15,9 @@ const DatacenterMenu = ({formState, setFormState, setError}) => {
         hasNextPage,
         fetchNextPage,
         isFetching
-    } = useInfiniteQuery(["datacenters"], fetchAll, {
+    } = useInfiniteQuery({
+        queryKey: ["datacenters"],
+        queryFn: fetchAll,
         getNextPageParam: nextPageParam,
         meta: auth,
         onError: setError

diff --git a/web/src/components/Pools/Members/EditMemberPanel.js b/web/src/components/Pools/Members/EditMemberPanel.js
@@ -20,9 +20,10 @@ const EditMemberPanel = ({closeCallback}) => {
     })
 
     const queryClient = useQueryClient()
-    const {isLoading} = useQuery(
-        ["members", id],
-        fetchItem, {
+    const {isLoading} = useQuery({
+        queryKey: ["members", id],
+        ...fetchItem
+    }, {
             meta: auth,
             onError: setError,
             onSuccess: (data) => setFormState(updateAttributes(formState, data.member)),
@@ -44,7 +45,7 @@ const EditMemberPanel = ({closeCallback}) => {
                     queryClient
                         .setQueryData(["members", data.member.id], data)
                     queryClient
-                        .invalidateQueries("members")
+                        .invalidateQueries({queryKey: ["members"]})
                         .then(closeCallback)
                 },
                 onError: setError