improvement

src/Data/Managers/V2/DesiredState/PromoteDesiredStateVersion/usePromoteDesiredStateVersion.ts

@@ -1,4 +1,5 @@
 import {
+  UseMutationOptions,
   UseMutationResult,
   useMutation,
   useQueryClient,
@@ -10,18 +11,16 @@ import { usePost } from "../../helpers/useQueries";
  *
  * @returns {Mutation} The mutation object for sending the request.
  */
-export const usePromoteDesiredStateVersion = (): UseMutationResult<
-  void,
-  Error,
-  string,
-  unknown
-> => {
+export const usePromoteDesiredStateVersion = (
+  options?: UseMutationOptions<void, Error, string>,
+): UseMutationResult<void, Error, string> => {
   const client = useQueryClient();
   const post = usePost()<void>;
 
   return useMutation({
     mutationFn: (version) => post(`/api/v2/desiredstate/${version}/promote`),
     mutationKey: ["promote_version"],
+    ...options,
     onSuccess: () => {
       // Refetch the desired state queries to update the list
       client.invalidateQueries({

src/Data/Managers/V2/Environment/UpdateEnvConfig/useUpdateEnvConfig.ts

@@ -1,4 +1,5 @@
 import {
+  UseMutationOptions,
   UseMutationResult,
   useMutation,
   useQueryClient,
@@ -17,12 +18,9 @@ interface ConfigUpdate {
  *
  * @returns {UseMutationResult<void, Error, ConfigUpdate, unknown>}- The mutation object from `useMutation` hook.
  */
-export const useUpdateEnvConfig = (): UseMutationResult<
-  void,
-  Error,
-  ConfigUpdate,
-  unknown
-> => {
+export const useUpdateEnvConfig = (
+  options?: UseMutationOptions<void, Error, ConfigUpdate, unknown>,
+): UseMutationResult<void, Error, ConfigUpdate, unknown> => {
   const client = useQueryClient();
 
   const post = usePost()<string | boolean | ParsedNumber | Dict>;
@@ -40,5 +38,6 @@ export const useUpdateEnvConfig = (): UseMutationResult<
       });
       document.dispatchEvent(new Event("settings-update"));
     },
+    ...options,
   });
 };

src/Data/Managers/V2/Service/DeleteService/useDeleteService.ts

@@ -1,4 +1,5 @@
 import {
+  UseMutationOptions,
   UseMutationResult,
   useMutation,
   useQueryClient,
@@ -12,7 +13,8 @@ import { useDelete } from "../../helpers/useQueries";
  */
 export const useDeleteService = (
   service_entity: string,
-): UseMutationResult<void, Error, void, unknown> => {
+  options?: UseMutationOptions<void, Error, void>,
+): UseMutationResult<void, Error, void> => {
   const client = useQueryClient();
   const deleteFn = useDelete();
 
@@ -25,5 +27,6 @@ export const useDeleteService = (
       client.refetchQueries({ queryKey: ["get_service_model-one_time"] });
       client.refetchQueries({ queryKey: ["get_service_model-continuous"] });
     },
+    ...options,
   });
 };

src/Data/Managers/V2/ServiceInstance/DeleteInstance/useDeleteInstance.ts

@@ -1,4 +1,8 @@
-import { UseMutationResult, useMutation } from "@tanstack/react-query";
+import {
+  UseMutationOptions,
+  UseMutationResult,
+  useMutation,
+} from "@tanstack/react-query";
 import { ParsedNumber } from "@/Core";
 import { useDelete } from "../../helpers/useQueries";
 
@@ -11,6 +15,7 @@ export const useDeleteInstance = (
   instance_id: string,
   service_entity: string,
   version: ParsedNumber,
+  options?: UseMutationOptions<void, Error, void, unknown>,
 ): UseMutationResult<void, Error, void, unknown> => {
   const deleteFn = useDelete();
 
@@ -20,5 +25,6 @@ export const useDeleteInstance = (
         `/lsm/v1/service_inventory/${service_entity}/${instance_id}?current_version=${version}`,
       ),
     mutationKey: ["delete_instance"],
+    ...options,
   });
 };

src/Data/Managers/V2/ServiceInstance/DestroyInstance/useDestroyInstance.ts

@@ -1,4 +1,8 @@
-import { UseMutationResult, useMutation } from "@tanstack/react-query";
+import {
+  UseMutationOptions,
+  UseMutationResult,
+  useMutation,
+} from "@tanstack/react-query";
 import { ParsedNumber } from "@/Core";
 import { useDelete } from "../../helpers/useQueries";
 
@@ -13,6 +17,7 @@ export const useDestroyInstance = (
   service_entity: string,
   version: ParsedNumber,
   message: string,
+  options?: UseMutationOptions<void, Error, void, unknown>,
 ): UseMutationResult<void, Error, void, unknown> => {
   const deleteFn = useDelete({ message });
 
@@ -22,5 +27,6 @@ export const useDestroyInstance = (
         `/lsm/v2/service_inventory/${service_entity}/${instance_id}/expert?current_version=${version}`,
       ),
     mutationKey: ["destroy_instance"],
+    ...options,
   });
 };

src/Data/Managers/V2/ServiceInstance/PatchAttributesExpert/usePatchAttributesExpert.ts

@@ -1,4 +1,8 @@
-import { UseMutationResult, useMutation } from "@tanstack/react-query";
+import {
+  UseMutationOptions,
+  UseMutationResult,
+  useMutation,
+} from "@tanstack/react-query";
 import { ParsedNumber } from "@/Core";
 import { usePatch } from "../../helpers/useQueries";
 
@@ -33,6 +37,7 @@ interface PatchEdit {
 export const usePatchAttributesExpert = (
   instance_id: string,
   service_entity: string,
+  options?: UseMutationOptions<void, Error, ExpertPatchAttributes>,
 ): UseMutationResult<void, Error, ExpertPatchAttributes, unknown> => {
   const patch = usePatch()<ExpertPatchAttributes>;
 
@@ -43,5 +48,6 @@ export const usePatchAttributesExpert = (
         data,
       ),
     mutationKey: ["patch_expert_edit"],
+    ...options,
   });
 };

src/Slices/DesiredState/UI/Components/PromoteAction.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from "react";
+import React, { useContext } from "react";
 import { DropdownItem } from "@patternfly/react-core";
 import { ParsedNumber } from "@/Core";
 import { usePromoteDesiredStateVersion } from "@/Data/Managers/V2/DesiredState";
@@ -25,7 +25,9 @@ interface Props {
 export const PromoteAction: React.FC<Props> = ({ version, isDisabled }) => {
   const { environmentModifier } = useContext(DependencyContext);
   const { setErrorMessage } = useContext(GetDesiredStatesContext);
-  const { mutate, isError, error } = usePromoteDesiredStateVersion();
+  const { mutate } = usePromoteDesiredStateVersion({
+    onError: (error) => setErrorMessage(error.message),
+  });
   const isHalted = environmentModifier.useIsHalted();
 
   /**
@@ -36,13 +38,6 @@ export const PromoteAction: React.FC<Props> = ({ version, isDisabled }) => {
   const onSubmit = () => {
     mutate(version.toString());
   };
-
-  useEffect(() => {
-    if (isError) {
-      setErrorMessage(error.message);
-    }
-  }, [isError, error, setErrorMessage]);
-
   return (
     <ActionDisabledTooltip
       isDisabled={isDisabled || isHalted}

src/Slices/ServiceCatalog/UI/ServiceItem.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useRef, useState } from "react";
+import React, { useContext, useRef, useState } from "react";
 import { Link } from "react-router-dom";
 import {
   Button,
@@ -41,7 +41,9 @@ export const ServiceItem: React.FC<Props> = ({ service }) => {
   const { triggerModal, closeModal } = useContext(ModalContext);
   const { routeManager } = useContext(DependencyContext);
   const [isOpen, setIsOpen] = useState(false);
-  const { mutate, isError, error } = useDeleteService(service.name);
+  const { mutate } = useDeleteService(service.name, {
+    onError: (error) => setErrorMessage(error.message),
+  });
   const [errorMessage, setErrorMessage] = useState("");
   const serviceKey = service.name + "-item";
   const rowRefs = useRef<Record<string, HTMLSpanElement | null>>({});
@@ -50,11 +52,11 @@ export const ServiceItem: React.FC<Props> = ({ service }) => {
    * Handles the submission of deleting the service.
    * if there is an error, it will set the error message,
    *
-   * @returns {Promise<void>} A Promise that resolves when the operation is complete.
+   * @returns {void}
    */
-  const onSubmit = async (): Promise<void> => {
+  const onSubmit = () => {
     closeModal();
-    await mutate();
+    mutate();
   };
 
   /**
@@ -83,12 +85,6 @@ export const ServiceItem: React.FC<Props> = ({ service }) => {
     });
   };
 
-  useEffect(() => {
-    if (isError) {
-      setErrorMessage(error.message);
-    }
-  }, [isError, error]);
-
   return (
     <DataListItem id={service.name} aria-labelledby={serviceKey}>
       <ToastAlert

src/Slices/ServiceInstanceDetails/UI/Components/AttributesComponents/AttributesEditor.tsx

@@ -60,8 +60,14 @@ export const AttributesEditor: React.FC<Props> = ({
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const [errorMessage, setErrorMessage] = useState<string>("");
 
-  const { mutate, isError, error, isPending, isSuccess } =
-    usePatchAttributesExpert(instance.id, instance.service_entity);
+  const { mutate, isPending } = usePatchAttributesExpert(
+    instance.id,
+    instance.service_entity,
+    {
+      onError: (error) => setErrorMessage(error.message),
+      onSuccess: () => setIsModalOpen(false),
+    },
+  );
 
   /**
    * Handles the change of the selected attribute Set.
@@ -123,15 +129,6 @@ export const AttributesEditor: React.FC<Props> = ({
     mutate(patchAttributes);
   };
 
-  useEffect(() => {
-    if (isError) {
-      setErrorMessage(error.message);
-    }
-    if (isSuccess) {
-      setIsModalOpen(false);
-    }
-  }, [isSuccess, isError, error]);
-
   useEffect(() => {
     setEditorDataOriginal(JSON.stringify(attributeSets[selectedSet], null, 2));
   }, [attributeSets, selectedSet]);

src/Slices/ServiceInstanceDetails/UI/Components/InstanceActions/Actions/DeleteAction.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useState } from "react";
 import { DropdownItem, Content } from "@patternfly/react-core";
 import { TrashAltIcon } from "@patternfly/react-icons";
 import { ParsedNumber } from "@/Core";
@@ -43,10 +43,18 @@ export const DeleteAction: React.FC<Props> = ({
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const [errorMessage, setErrorMessage] = useState<string>("");
 
-  const { mutate, isError, error, isSuccess, isPending } = useDeleteInstance(
+  const { mutate, isPending } = useDeleteInstance(
     instance_id,
     service_entity,
     version,
+    {
+      onSuccess: () => {
+        closeModal();
+      },
+      onError: (error) => {
+        setErrorMessage(error.message);
+      },
+    },
   );
 
   /**
@@ -73,16 +81,6 @@ export const DeleteAction: React.FC<Props> = ({
     onClose();
   }, [setIsModalOpen, setInterfaceBlocked, onClose]);
 
-  useEffect(() => {
-    if (isError) {
-      setErrorMessage(error.message);
-    }
-
-    if (isSuccess) {
-      closeModal();
-    }
-  }, [isError, isSuccess, error, closeModal]);
-
   return (
     <>
       <DropdownItem

src/Slices/ServiceInstanceDetails/UI/Components/InstanceActions/Actions/DestroyAction.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useState } from "react";
+import React, { useCallback, useContext, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { Alert, DropdownItem, Content } from "@patternfly/react-core";
 import { TrashAltIcon } from "@patternfly/react-icons";
@@ -49,11 +49,20 @@ export const DestroyAction: React.FC<Props> = ({
   const username = authHelper.getUser();
   const message = words("instanceDetails.API.message.update")(username);
 
-  const { mutate, isError, error, isSuccess, isPending } = useDestroyInstance(
+  const { mutate, isPending } = useDestroyInstance(
     instance_id,
     service_entity,
     version,
     message,
+    {
+      onSuccess: () =>
+        navigate(
+          `/console/lsm/catalog/${service_entity}/inventory?env=${environment}`,
+        ),
+      onError: (error) => {
+        setErrorMessage(error.message);
+      },
+    },
   );
 
   /**
@@ -80,19 +89,6 @@ export const DestroyAction: React.FC<Props> = ({
     mutate();
   };
 
-  useEffect(() => {
-    if (isError) {
-      setErrorMessage(error.message);
-    }
-
-    if (isSuccess) {
-      // Because the instance gets destroyed, there's nothing left to display. So we redirect to the inventory.
-      navigate(
-        `/console/lsm/catalog/${service_entity}/inventory?env=${environment}`,
-      );
-    }
-  }, [isSuccess, isError, navigate, error, service_entity, environment]);
-
   return (
     <>
       <DropdownItem

src/UI/Components/ExpertBanner/ExpertBanner.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useState } from "react";
 import { Banner, Button, Flex, Spinner } from "@patternfly/react-core";
 import { useUpdateEnvConfig } from "@/Data/Managers/V2/Environment";
 import { DependencyContext } from "@/UI/Dependency";
@@ -14,19 +14,17 @@ import { ToastAlert } from "../ToastAlert";
 export const ExpertBanner: React.FC = () => {
   const [errorMessage, setMessage] = useState<string | undefined>(undefined);
   const { environmentModifier } = useContext(DependencyContext);
-  const { mutate, isError, error } = useUpdateEnvConfig();
-  const [isLoading, setIsLoading] = useState(false); // isLoading is to indicate the asynchronous operation is in progress, as we need to wait until setting will be updated, getters are still in the V1 - task https://github.com/inmanta/web-console/issues/5999
-
-  useEffect(() => {
-    if (isError) {
+  const { mutate } = useUpdateEnvConfig({
+    onError: (error) => {
       setMessage(error.message);
       setIsLoading(false);
-    }
-  }, [isError, error]);
+    },
+  });
+  const [isLoading, setIsLoading] = useState(false); // isLoading is to indicate the asynchronous operation is in progress, as we need to wait until setting will be updated, getters are still in the V1 - task https://github.com/inmanta/web-console/issues/5999
 
   return environmentModifier.useIsExpertModeEnabled() ? (
     <>
-      {isError && errorMessage && (
+      {errorMessage && (
         <ToastAlert
           data-testid="ToastAlert"
           title={words("error")}