From 188bed67a54f249c50f5a29dc43a39664b219a04 Mon Sep 17 00:00:00 2001 From: Mateusz Borowczyk Date: Thu, 30 Jan 2025 11:07:14 +0100 Subject: [PATCH] improvement --- .../usePromoteDesiredStateVersion.ts | 11 ++++---- .../UpdateEnvConfig/useUpdateEnvConfig.ts | 11 ++++---- .../Service/DeleteService/useDeleteService.ts | 5 +++- .../DeleteInstance/useDeleteInstance.ts | 8 +++++- .../DestroyInstance/useDestroyInstance.ts | 8 +++++- .../usePatchAttributesExpert.ts | 8 +++++- .../UI/Components/PromoteAction.tsx | 13 +++------- src/Slices/ServiceCatalog/UI/ServiceItem.tsx | 18 +++++-------- .../AttributesComponents/AttributesEditor.tsx | 19 ++++++-------- .../InstanceActions/Actions/DeleteAction.tsx | 22 +++++++--------- .../InstanceActions/Actions/DestroyAction.tsx | 26 ++++++++----------- .../Components/ExpertBanner/ExpertBanner.tsx | 16 +++++------- 12 files changed, 82 insertions(+), 83 deletions(-) diff --git a/src/Data/Managers/V2/DesiredState/PromoteDesiredStateVersion/usePromoteDesiredStateVersion.ts b/src/Data/Managers/V2/DesiredState/PromoteDesiredStateVersion/usePromoteDesiredStateVersion.ts index c801a4e53..fd2bb6b3e 100644 --- a/src/Data/Managers/V2/DesiredState/PromoteDesiredStateVersion/usePromoteDesiredStateVersion.ts +++ b/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, +): UseMutationResult => { const client = useQueryClient(); const post = usePost(); 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({ diff --git a/src/Data/Managers/V2/Environment/UpdateEnvConfig/useUpdateEnvConfig.ts b/src/Data/Managers/V2/Environment/UpdateEnvConfig/useUpdateEnvConfig.ts index c42d112d1..c92d602d2 100644 --- a/src/Data/Managers/V2/Environment/UpdateEnvConfig/useUpdateEnvConfig.ts +++ b/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}- The mutation object from `useMutation` hook. */ -export const useUpdateEnvConfig = (): UseMutationResult< - void, - Error, - ConfigUpdate, - unknown -> => { +export const useUpdateEnvConfig = ( + options?: UseMutationOptions, +): UseMutationResult => { const client = useQueryClient(); const post = usePost(); @@ -40,5 +38,6 @@ export const useUpdateEnvConfig = (): UseMutationResult< }); document.dispatchEvent(new Event("settings-update")); }, + ...options, }); }; diff --git a/src/Data/Managers/V2/Service/DeleteService/useDeleteService.ts b/src/Data/Managers/V2/Service/DeleteService/useDeleteService.ts index d54f507e2..07ff91fb4 100644 --- a/src/Data/Managers/V2/Service/DeleteService/useDeleteService.ts +++ b/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 => { + options?: UseMutationOptions, +): UseMutationResult => { 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, }); }; diff --git a/src/Data/Managers/V2/ServiceInstance/DeleteInstance/useDeleteInstance.ts b/src/Data/Managers/V2/ServiceInstance/DeleteInstance/useDeleteInstance.ts index 6ca75fcc0..e97d0b59f 100644 --- a/src/Data/Managers/V2/ServiceInstance/DeleteInstance/useDeleteInstance.ts +++ b/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, ): UseMutationResult => { 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, }); }; diff --git a/src/Data/Managers/V2/ServiceInstance/DestroyInstance/useDestroyInstance.ts b/src/Data/Managers/V2/ServiceInstance/DestroyInstance/useDestroyInstance.ts index 637a5ee79..d89d6ef88 100644 --- a/src/Data/Managers/V2/ServiceInstance/DestroyInstance/useDestroyInstance.ts +++ b/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, ): UseMutationResult => { 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, }); }; diff --git a/src/Data/Managers/V2/ServiceInstance/PatchAttributesExpert/usePatchAttributesExpert.ts b/src/Data/Managers/V2/ServiceInstance/PatchAttributesExpert/usePatchAttributesExpert.ts index d2178c6ec..1347cfe18 100644 --- a/src/Data/Managers/V2/ServiceInstance/PatchAttributesExpert/usePatchAttributesExpert.ts +++ b/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, ): UseMutationResult => { const patch = usePatch(); @@ -43,5 +48,6 @@ export const usePatchAttributesExpert = ( data, ), mutationKey: ["patch_expert_edit"], + ...options, }); }; diff --git a/src/Slices/DesiredState/UI/Components/PromoteAction.tsx b/src/Slices/DesiredState/UI/Components/PromoteAction.tsx index f50494f8e..154d63059 100644 --- a/src/Slices/DesiredState/UI/Components/PromoteAction.tsx +++ b/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 = ({ 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 = ({ version, isDisabled }) => { const onSubmit = () => { mutate(version.toString()); }; - - useEffect(() => { - if (isError) { - setErrorMessage(error.message); - } - }, [isError, error, setErrorMessage]); - return ( = ({ 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>({}); @@ -50,11 +52,11 @@ export const ServiceItem: React.FC = ({ service }) => { * Handles the submission of deleting the service. * if there is an error, it will set the error message, * - * @returns {Promise} A Promise that resolves when the operation is complete. + * @returns {void} */ - const onSubmit = async (): Promise => { + const onSubmit = () => { closeModal(); - await mutate(); + mutate(); }; /** @@ -83,12 +85,6 @@ export const ServiceItem: React.FC = ({ service }) => { }); }; - useEffect(() => { - if (isError) { - setErrorMessage(error.message); - } - }, [isError, error]); - return ( = ({ const [isModalOpen, setIsModalOpen] = useState(false); const [errorMessage, setErrorMessage] = useState(""); - 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 = ({ 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]); diff --git a/src/Slices/ServiceInstanceDetails/UI/Components/InstanceActions/Actions/DeleteAction.tsx b/src/Slices/ServiceInstanceDetails/UI/Components/InstanceActions/Actions/DeleteAction.tsx index 0ee1a2cf5..21fe0ffcb 100644 --- a/src/Slices/ServiceInstanceDetails/UI/Components/InstanceActions/Actions/DeleteAction.tsx +++ b/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 = ({ const [isModalOpen, setIsModalOpen] = useState(false); const [errorMessage, setErrorMessage] = useState(""); - 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 = ({ onClose(); }, [setIsModalOpen, setInterfaceBlocked, onClose]); - useEffect(() => { - if (isError) { - setErrorMessage(error.message); - } - - if (isSuccess) { - closeModal(); - } - }, [isError, isSuccess, error, closeModal]); - return ( <> = ({ 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 = ({ 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 ( <> { const [errorMessage, setMessage] = useState(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 && (