build(deps): bump @tanstack/react-query from 4.36.1 to 5.0.0 in /web/ui/react-app

web/ui/react-app/package.json

@@ -9,22 +9,22 @@
     "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@tanstack/react-query": "^4.35.0",
-    "@types/bootstrap": "^5.2.6",
-    "@types/jest": "^29.5.4",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "bootstrap": "^5.3.1",
+    "@tanstack/react-query": "^5.0.0",
+    "@types/bootstrap": "^5.2.7",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "bootstrap": "^5.3.2",
     "date-fns": "^2.30.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-bootstrap": "^2.8.0",
+    "react-bootstrap": "^2.9.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.46.1",
-    "react-router-dom": "^6.15.0",
+    "react-hook-form": "^7.47.0",
+    "react-router-dom": "^6.17.0",
     "react-scripts": "^5.0.1",
     "reconnecting-websocket": "^4.4.0",
-    "styled-components": "^6.0.7",
+    "styled-components": "^6.1.0",
     "typescript": "^5.2.2"
   },
   "scripts": {
@@ -53,8 +53,8 @@
     ]
   },
   "devDependencies": {
-    "@tanstack/react-query-devtools": "^4.35.0",
-    "@types/node": "^18.17.1",
-    "@types/styled-components": "^5.1.27"
+    "@tanstack/react-query-devtools": "^5.0.0",
+    "@types/node": "^18.18.2",
+    "@types/styled-components": "^5.1.28"
   }
 }

web/ui/react-app/src/App.tsx

@@ -29,7 +29,7 @@ const App = (): ReactElement => {
   const queryClient = new QueryClient();
   queryClient.setDefaultOptions({
     queries: {
-      cacheTime: 1000 * 60 * 10, // 10 minutes
+      gcTime: 1000 * 60 * 10, // 10 minutes
       refetchOnWindowFocus: true,
       staleTime: 1000 * 60 * 5, // 5 minutes
     },

web/ui/react-app/src/components/modals/service-edit/service.tsx

@@ -31,17 +31,16 @@ const EditService: FC<Props> = ({ name }) => {
   const [loading, setLoading] = useState(true);
 
   const { data: otherOptionsData, isFetched: isFetchedOtherOptionsData } =
-    useQuery(["service/edit", "detail"], () =>
-      fetchJSON<ServiceEditOtherData>("api/v1/service/edit")
-    );
-  const { data: serviceData, isSuccess: isSuccessServiceData } = useQuery(
-    ["service/edit", { id: name }],
-    () => fetchJSON<ServiceEditAPIType>(`api/v1/service/edit/${name}`),
-    {
-      enabled: !!name,
-      refetchOnMount: "always",
-    }
-  );
+    useQuery({
+      queryKey: ["service/edit", "detail"],
+      queryFn: () => fetchJSON<ServiceEditOtherData>("api/v1/service/edit"),
+    });
+  const { data: serviceData, isSuccess: isSuccessServiceData } = useQuery({
+    queryKey: ["service/edit", { id: name }],
+    queryFn: () => fetchJSON<ServiceEditAPIType>(`api/v1/service/edit/${name}`),
+    enabled: !!name,
+    refetchOnMount: "always",
+  });
 
   const defaultData: ServiceEditType = useMemo(
     () => convertAPIServiceDataEditToUI(name, serviceData, otherOptionsData),

web/ui/react-app/src/components/modals/service-edit/version-with-refresh.tsx

@@ -51,8 +51,8 @@ const VersionWithRefresh: FC<Props> = ({ vType, serviceName, original }) => {
     isFetching,
     isStale,
     refetch: refetchVersion,
-  } = useQuery(
-    [
+  } = useQuery({
+    queryKey: [
       "version/refresh",
       dataTarget,
       { id: serviceName },
@@ -62,20 +62,18 @@ const VersionWithRefresh: FC<Props> = ({ vType, serviceName, original }) => {
         original_data: original,
       },
     ],
-    () => fetchVersionJSON(),
-    {
-      enabled: false,
-      initialData: {
-        version: monitorData.service[serviceName]
-          ? monitorData.service[serviceName]?.status?.[dataTarget]
-          : "",
-        error: "",
-        timestamp: "",
-      },
-      notifyOnChangeProps: "all",
-      staleTime: 0,
-    }
-  );
+    queryFn: () => fetchVersionJSON(),
+    enabled: false,
+    initialData: {
+      version: monitorData.service[serviceName]
+        ? monitorData.service[serviceName]?.status?.[dataTarget]
+        : "",
+      error: "",
+      timestamp: "",
+    },
+    notifyOnChangeProps: "all",
+    staleTime: 0,
+  });
 
   const refetch = async () => {
     // Prevent refetching too often

web/ui/react-app/src/contexts/websocket.tsx

@@ -65,11 +65,11 @@ export const WebSocketProvider = (props: Props) => {
     [connected, monitorData]
   );
 
-  const { data: orderData } = useQuery(
-    ["service/order"],
-    () => fetchJSON<OrderAPIResponse>(`api/v1/service/order`),
-    { cacheTime: 1000 * 60 * 30 } // 30 mins
-  );
+  const { data: orderData } = useQuery({
+    queryKey: ["service/order"],
+    queryFn: () => fetchJSON<OrderAPIResponse>(`api/v1/service/order`),
+    gcTime: 1000 * 60 * 30, // 30 mins
+  });
   useEffect(() => {
     if (orderData?.order !== undefined) {
       setMonitorData({
@@ -109,11 +109,12 @@ export const WebSocketProvider = (props: Props) => {
       // update/invalidate caches
       if (msg.page === "APPROVALS") {
         if (msg.type === "EDIT") {
-          queryClient.invalidateQueries(["actions", { service: msg.sub_type }]);
-          queryClient.invalidateQueries([
-            "service/edit",
-            { service: msg.sub_type },
-          ]);
+          queryClient.invalidateQueries({
+            queryKey: ["actions", { service: msg.sub_type }],
+          });
+          queryClient.invalidateQueries({
+            queryKey: ["service/edit", { service: msg.sub_type }],
+          });
         }
 
         if (

web/ui/react-app/src/modals/action-release.tsx

@@ -105,8 +105,8 @@ const ActionReleaseModal = () => {
     );
   }, [isSendingThisService, modalData]);
 
-  const { mutate } = useMutation(
-    (data: {
+  const { mutate } = useMutation({
+    mutationFn: (data: {
       target: string;
       service: string;
       isWebHook: boolean;
@@ -117,73 +117,69 @@ const ActionReleaseModal = () => {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ target: data.target }),
       }),
-    {
-      onMutate: (data) => {
-        if (data.target === "ARGUS_SKIP") return;
+    onMutate: (data) => {
+      if (data.target === "ARGUS_SKIP") return;
 
-        let command_data: CommandSummaryListType | undefined = {};
-        let webhook_data: WebHookSummaryListType | undefined = {};
-        if (!data.unspecificTarget) {
-          // Targeting specific command/webhook
-          if (data.isWebHook)
-            webhook_data = { [data.target.slice("webhook_".length)]: {} };
-          else command_data = { [data.target.slice("command_".length)]: {} };
-        } else {
-          // All Commands/WebHooks have been sent successfully
-          const allSuccessful =
-            Object.keys(modalData.commands).every(
-              (command_id) => modalData.commands[command_id].failed === false
-            ) &&
-            Object.keys(modalData.webhooks).every(
-              (webhook_id) => modalData.webhooks[webhook_id].failed === false
-            );
+      let command_data: CommandSummaryListType | undefined = {};
+      let webhook_data: WebHookSummaryListType | undefined = {};
+      if (!data.unspecificTarget) {
+        // Targeting specific command/webhook
+        if (data.isWebHook)
+          webhook_data = { [data.target.slice("webhook_".length)]: {} };
+        else command_data = { [data.target.slice("command_".length)]: {} };
+      } else {
+        // All Commands/WebHooks have been sent successfully
+        const allSuccessful =
+          Object.keys(modalData.commands).every(
+            (command_id) => modalData.commands[command_id].failed === false
+          ) &&
+          Object.keys(modalData.webhooks).every(
+            (webhook_id) => modalData.webhooks[webhook_id].failed === false
+          );
 
-          // sending these commands
-          for (const command_id in modalData.commands) {
-            // skip commands that aren't after next_runnable
-            // and commands that have already succeeded if some commands haven't
-            if (
-              (modalData.commands[command_id].next_runnable !== undefined &&
-                dateIsAfterNow(
-                  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                  modalData.commands[command_id].next_runnable!
-                )) ||
-              (!allSuccessful &&
-                modalData.commands[command_id].failed === false)
-            )
-              continue;
-            command_data[command_id] = {};
-          }
+        // sending these commands
+        for (const command_id in modalData.commands) {
+          // skip commands that aren't after next_runnable
+          // and commands that have already succeeded if some commands haven't
+          if (
+            (modalData.commands[command_id].next_runnable !== undefined &&
+              dateIsAfterNow(
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                modalData.commands[command_id].next_runnable!
+              )) ||
+            (!allSuccessful && modalData.commands[command_id].failed === false)
+          )
+            continue;
+          command_data[command_id] = {};
+        }
 
-          // sending these webhooks
-          for (const webhook_id in modalData.webhooks) {
-            // skip webhooks that aren't after next_runnable
-            // and webhooks that have already succeeded if some webhooks haven't
-            if (
-              (modalData.webhooks[webhook_id].next_runnable !== undefined &&
-                dateIsAfterNow(
-                  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                  modalData.webhooks[webhook_id].next_runnable!
-                )) ||
-              (!allSuccessful &&
-                modalData.webhooks[webhook_id].failed === false)
-            )
-              continue;
-            webhook_data[webhook_id] = {};
-          }
+        // sending these webhooks
+        for (const webhook_id in modalData.webhooks) {
+          // skip webhooks that aren't after next_runnable
+          // and webhooks that have already succeeded if some webhooks haven't
+          if (
+            (modalData.webhooks[webhook_id].next_runnable !== undefined &&
+              dateIsAfterNow(
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                modalData.webhooks[webhook_id].next_runnable!
+              )) ||
+            (!allSuccessful && modalData.webhooks[webhook_id].failed === false)
+          )
+            continue;
+          webhook_data[webhook_id] = {};
         }
+      }
 
-        setModalData({
-          page: "APPROVALS",
-          type: "ACTION",
-          sub_type: "SENDING",
-          service_data: { id: modal.service.id, loading: false },
-          command_data: command_data,
-          webhook_data: webhook_data,
-        });
-      },
-    }
-  );
+      setModalData({
+        page: "APPROVALS",
+        type: "ACTION",
+        sub_type: "SENDING",
+        service_data: { id: modal.service.id, loading: false },
+        command_data: command_data,
+        webhook_data: webhook_data,
+      });
+    },
+  });
 
   const onClickAcknowledge = useCallback(
     (target: string, isWebHook?: boolean) => {
@@ -215,17 +211,15 @@ const ActionReleaseModal = () => {
     [modal.service, canSendUnspecific]
   );
 
-  const { data } = useQuery<ActionAPIType>(
-    ["actions", { service: modal.service.id }],
-    () =>
+  const { data } = useQuery<ActionAPIType>({
+    queryKey: ["actions", { service: modal.service.id }],
+    queryFn: () =>
       fetchJSON(
         `api/v1/service/actions/${encodeURIComponent(modal.service.id)}`
       ),
-    {
-      enabled: modal.actionType !== "EDIT" && modal.service.id !== "",
-      refetchOnMount: "always",
-    }
-  );
+    enabled: modal.actionType !== "EDIT" && modal.service.id !== "",
+    refetchOnMount: "always",
+  });
 
   useEffect(
     () =>

web/ui/react-app/src/pages/approvals/index.tsx

@@ -24,14 +24,12 @@ export const Approvals = (): ReactElement => {
     data: orderData,
     isFetched: isFetchedOrder,
     isFetching: isFetchingOrder,
-  } = useQuery(
-    ["service/order"],
-    () => fetchJSON<OrderAPIResponse>(`api/v1/service/order`),
-    {
-      cacheTime: 1000 * 60 * 30, // 30 mins
-      initialData: { order: monitorData.order },
-    }
-  );
+  } = useQuery({
+    queryKey: ["service/order"],
+    queryFn: () => fetchJSON<OrderAPIResponse>(`api/v1/service/order`),
+    gcTime: 1000 * 60 * 30, // 30 mins
+    initialData: { order: monitorData.order },
+  });
   useEffect(() => {
     if (isFetchedOrder && !isFetchingOrder)
       setMonitorData({

web/ui/react-app/src/pages/status/cli_flags/index.tsx

@@ -17,7 +17,11 @@ export const Flags = (): ReactElement => {
 
   const { data, isFetching } = useQuery<
     Dictionary<string | boolean | undefined>
-  >(["flags"], () => fetchJSON(`api/v1/flags`), { staleTime: Infinity });
+  >({
+    queryKey: ["flags"],
+    queryFn: () => fetchJSON(`api/v1/flags`),
+    staleTime: Infinity,
+  });
 
   useEffect(() => {
     if (!isFetching && data) setFlags(data);

web/ui/react-app/src/pages/status/configuration/index.tsx

@@ -14,11 +14,11 @@ export const Config = (): ReactElement => {
     undefined | Record<string, any>
   >(undefined);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const { data, isFetching } = useQuery<Record<string, any>>(
-    ["config"],
-    () => fetchJSON(`api/v1/config`),
-    { staleTime: 0 }
-  );
+  const { data, isFetching } = useQuery<Record<string, any>>({
+    queryKey: ["config"],
+    queryFn: () => fetchJSON(`api/v1/config`),
+    staleTime: 0,
+  });
 
   useEffect(() => {
     if (!isFetching && data) {