✨ Proxies: rest queries and notifications (#1240)

In continuation of work already done to align, feature by feature, here
the proxy configuration to :
- Have it's REST function to use axios instead of APIConfig and uUse
React Query consitenlty
- Use Notification` instead for `Alert`.

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<Array<Proxy>> => {
-  return APIClient.get(`${PROXIES}`, jsonHeaders);
-};
-
-export const createProxy = (obj: Proxy): AxiosPromise<Proxy> => {
-  return APIClient.post(`${PROXIES}`, obj);
-};
-
-export const updateProxy = (obj: Proxy): AxiosPromise<Proxy> => {
-  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<Application> =>
@@ -749,3 +733,11 @@ export const getFacts = (
   id
     ? axios.get(`${APPLICATIONS}/${id}/facts`).then((response) => response.data)
     : Promise.reject();
+
+// Proxies
+
+export const getProxies = (): Promise<Proxy[]> =>
+  axios.get(PROXIES).then((response) => response.data);
+
+export const updateProxy = (obj: Proxy): Promise<Proxy> =>
+  axios.put(`${PROXIES}/${obj.id}`, obj);

client/src/app/pages/proxies/proxy-form.tsx

@@ -7,26 +7,29 @@ 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,
   SubmitHandler,
   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<ProxyFormProps> = ({
   httpProxy,
   httpsProxy,
 }) => {
+  const { t } = useTranslation();
+  const { pushNotification } = React.useContext(NotificationsContext);
+
   const { identities } = useFetchIdentities();
 
   const identityOptions: OptionWithValue<string>[] = identities
@@ -95,14 +101,26 @@ export const ProxyForm: React.FC<ProxyFormProps> = ({
   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<ProxyFormProps> = ({
 
   return (
     <Form className={spacing.mMd} onSubmit={handleSubmit(onSubmit)}>
-      {error && (
-        <Alert
-          variant="danger"
-          isInline
-          title={getAxiosErrorMessage(error as AxiosError)}
-        />
-      )}
       <Controller
         control={control}
         name="isHttpProxyEnabled"

client/src/app/queries/proxies.ts

@@ -1,51 +1,34 @@
 import { useState } from "react";
 import { AxiosError } from "axios";
 import { getProxies, updateProxy } from "@app/api/rest";
-import { Proxy } from "@app/api/models";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
-export interface IProxyFetchState {
-  proxies: Proxy[];
-  isFetching: boolean;
-  fetchError: AxiosError;
-}
-
 export const ProxiesTasksQueryKey = "proxies";
 
-export const useFetchProxies = (
-  defaultIsFetching: boolean = false
-): IProxyFetchState => {
-  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,
     fetchError: error as AxiosError,
   };
 };
 
-export const useUpdateProxyMutation = (onSuccess: any) => {
-  const [putResult, setPutResult] = useState<any>(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,
-  };
 };