diff --git a/client/src/app/api/rest.ts b/client/src/app/api/rest.ts index 5d9ab2907..ede6c4420 100644 --- a/client/src/app/api/rest.ts +++ b/client/src/app/api/rest.ts @@ -305,22 +305,6 @@ export const deleteIdentity = (identity: Identity): AxiosPromise => { return APIClient.delete(`${IDENTITIES}/${identity.id}`); }; -export const getProxies = (): AxiosPromise> => { - return APIClient.get(`${PROXIES}`, jsonHeaders); -}; - -export const createProxy = (obj: Proxy): AxiosPromise => { - return APIClient.post(`${PROXIES}`, obj); -}; - -export const updateProxy = (obj: Proxy): AxiosPromise => { - return APIClient.put(`${PROXIES}/${obj.id}`, obj); -}; - -export const deleteProxy = (id: number): AxiosPromise => { - return APIClient.delete(`${PROXIES}/${id}`); -}; - // Axios direct export const createApplication = (obj: Application): Promise => @@ -749,3 +733,11 @@ export const getFacts = ( id ? axios.get(`${APPLICATIONS}/${id}/facts`).then((response) => response.data) : Promise.reject(); + +// Proxies + +export const getProxies = (): Promise => + axios.get(PROXIES).then((response) => response.data); + +export const updateProxy = (obj: Proxy): Promise => + axios.put(`${PROXIES}/${obj.id}`, obj); diff --git a/client/src/app/pages/proxies/proxy-form.tsx b/client/src/app/pages/proxies/proxy-form.tsx index eba9d4067..7ac57b33c 100644 --- a/client/src/app/pages/proxies/proxy-form.tsx +++ b/client/src/app/pages/proxies/proxy-form.tsx @@ -7,12 +7,6 @@ import { Form, Switch, } from "@patternfly/react-core"; -import { OptionWithValue, SimpleSelect } from "@app/shared/components"; -import { getAxiosErrorMessage, getValidatedFromErrors } from "@app/utils/utils"; -import { useProxyFormValidationSchema } from "./proxies-validation-schema"; -import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing"; -import { Proxy } from "@app/api/models"; -import { useUpdateProxyMutation } from "@app/queries/proxies"; import { Controller, FieldValues, @@ -20,13 +14,22 @@ import { useForm, } from "react-hook-form"; import { yupResolver } from "@hookform/resolvers/yup"; -import { useFetchIdentities } from "@app/queries/identities"; import { AxiosError } from "axios"; +import { useTranslation } from "react-i18next"; +import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing"; + +import { OptionWithValue, SimpleSelect } from "@app/shared/components"; +import { getAxiosErrorMessage, getValidatedFromErrors } from "@app/utils/utils"; +import { useProxyFormValidationSchema } from "./proxies-validation-schema"; +import { Proxy } from "@app/api/models"; +import { useUpdateProxyMutation } from "@app/queries/proxies"; +import { useFetchIdentities } from "@app/queries/identities"; import { HookFormPFGroupController, HookFormPFTextArea, HookFormPFTextInput, } from "@app/shared/components/hook-form-pf-fields"; +import { NotificationsContext } from "@app/shared/notifications-context"; export interface ProxyFormValues { isHttpProxyEnabled: boolean; @@ -51,6 +54,9 @@ export const ProxyForm: React.FC = ({ httpProxy, httpsProxy, }) => { + const { t } = useTranslation(); + const { pushNotification } = React.useContext(NotificationsContext); + const { identities } = useFetchIdentities(); const identityOptions: OptionWithValue[] = identities @@ -95,14 +101,26 @@ export const ProxyForm: React.FC = ({ const values = getValues(); const onProxySubmitComplete = () => { + pushNotification({ + title: t("toastr.success.save", { + type: t("terms.proxyConfig"), + }), + variant: "success", + }); reset(values); }; - const { - mutate: submitProxy, - isLoading, - error, - } = useUpdateProxyMutation(onProxySubmitComplete); + const onProxySubmitError = (error: AxiosError) => { + pushNotification({ + title: getAxiosErrorMessage(error), + variant: "danger", + }); + }; + + const { mutate: submitProxy, isLoading } = useUpdateProxyMutation( + onProxySubmitComplete, + onProxySubmitError + ); const httpValuesHaveUpdate = (values: ProxyFormValues, httpProxy?: Proxy) => { if (httpProxy?.host === "" && values.isHttpProxyEnabled) { @@ -187,13 +205,6 @@ export const ProxyForm: React.FC = ({ return (
- {error && ( - - )} { - const { isLoading, data, error } = useQuery( - [ProxiesTasksQueryKey], - async () => (await getProxies()).data, - { onError: (error) => console.log("error, ", error) } - ); +export const useFetchProxies = () => { + const { isLoading, data, error } = useQuery({ + queryKey: [ProxiesTasksQueryKey], + queryFn: getProxies, + onError: (error) => console.log("error, ", error), + }); return { proxies: data || [], isFetching: isLoading, @@ -27,25 +18,17 @@ export const useFetchProxies = ( }; }; -export const useUpdateProxyMutation = (onSuccess: any) => { - const [putResult, setPutResult] = useState(null); +export const useUpdateProxyMutation = ( + onSuccess: () => void, + onError: (err: AxiosError) => void +) => { const queryClient = useQueryClient(); - - const { isLoading, mutate, error } = useMutation(updateProxy, { - onSuccess: (res) => { + return useMutation({ + mutationFn: updateProxy, + onSuccess: () => { onSuccess(); - setPutResult(res); - queryClient.invalidateQueries([ProxiesTasksQueryKey]); - }, - onError: (err) => { - setPutResult(err); queryClient.invalidateQueries([ProxiesTasksQueryKey]); }, + onError: onError, }); - return { - mutate, - putResult, - isLoading, - error, - }; };