Merge pull request #7631 from Shenali-SJ/custom-auth-get-calls

Fix multiple GET requests triggered after updating custom local authenticator general details

.changeset/flat-items-hear.md

@@ -0,0 +1,5 @@
+---
+"@wso2is/admin.connections.v1": patch
+---
+
+Fix multiple GET requests triggered after updating custom local authenticator general details

features/admin.connections.v1/components/edit/forms/custom-authenticator-general-details-form.tsx

@@ -19,24 +19,18 @@
 import { IdentifiableComponentInterface } from "@wso2is/core/models";
 import { Field, Form } from "@wso2is/form";
 import { EmphasizedSegment } from "@wso2is/react-components";
-import { AxiosError } from "axios";
 import React, { FunctionComponent, ReactElement, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { getLocalAuthenticator } from "../../../api/authenticators";
-import { getFederatedAuthenticatorDetails } from "../../../api/connections";
 import { CommonAuthenticatorConstants } from "../../../constants/common-authenticator-constants";
 import { ConnectionUIConstants } from "../../../constants/connection-ui-constants";
 import {
     ConnectionInterface,
     ConnectionListResponseInterface,
     CustomAuthConnectionInterface,
     CustomAuthGeneralDetailsFormValuesInterface,
-    CustomAuthenticatorCreateWizardGeneralFormValuesInterface,
-    ExternalEndpoint,
-    FederatedAuthenticatorListItemInterface
+    CustomAuthenticatorCreateWizardGeneralFormValuesInterface
 } from "../../../models/connection";
 import {
-    handleGetCustomAuthenticatorError,
     resolveCustomAuthenticatorDisplayName
 } from "../../../utils/connection-utils";
 
@@ -114,7 +108,6 @@ CustomAuthenticatorGeneralDetailsFormPopsInterface> = ({
     const { t } = useTranslation();
 
     const [ isCustomLocalAuth, setIsCustomLocalAuth ] = useState<boolean>(undefined);
-    const [ authenticatorEndpoint, setAuthenticatorEndpoint ] = useState<ExternalEndpoint>(null);
 
     const { CONNECTION_TEMPLATE_IDS: ConnectionTemplateIds } = CommonAuthenticatorConstants;
 
@@ -130,35 +123,6 @@ CustomAuthenticatorGeneralDetailsFormPopsInterface> = ({
         }
     }, [ templateType ]);
 
-    useEffect(() => {
-        if (isCustomLocalAuth === undefined) {
-            return;
-        }
-
-        let localAuthenticatorId: string;
-
-        if (isCustomLocalAuth) {
-
-            localAuthenticatorId = (editingIDP as CustomAuthConnectionInterface)?.id;
-            getLocalAuthenticator(localAuthenticatorId)
-                .then((data: CustomAuthConnectionInterface) => {
-                    setAuthenticatorEndpoint(data?.endpoint);
-                })
-                .catch((error: AxiosError) => {
-                    handleGetCustomAuthenticatorError(error);
-                });
-        } else {
-            localAuthenticatorId = editingIDP?.federatedAuthenticators?.authenticators[0].authenticatorId;
-            getFederatedAuthenticatorDetails(editingIDP.id, localAuthenticatorId)
-                .then((data: FederatedAuthenticatorListItemInterface) => {
-                    setAuthenticatorEndpoint(data?.endpoint);
-                })
-                .catch((error: AxiosError) => {
-                    handleGetCustomAuthenticatorError(error);
-                });
-        }
-    }, [ isCustomLocalAuth ]);
-
     /**
      * Prepare form values for submitting.
      *
@@ -171,7 +135,7 @@ CustomAuthenticatorGeneralDetailsFormPopsInterface> = ({
             onSubmit({
                 description: values.description?.toString(),
                 displayName: values.displayName?.toString(),
-                endpoint: authenticatorEndpoint,
+                endpoint: (editingIDP as CustomAuthConnectionInterface)?.endpoint,
                 image: values.image?.toString(),
                 isEnabled: values?.isEnabled
             });

features/admin.connections.v1/components/edit/settings/custom-authenticator-settings.tsx

@@ -33,7 +33,6 @@ import React, { FunctionComponent, ReactElement, useEffect, useState } from "rea
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 import { Dispatch } from "redux";
-import { getLocalAuthenticator } from "../../../api/authenticators";
 import {
     getFederatedAuthenticatorDetails,
     updateCustomAuthenticator,
@@ -95,60 +94,30 @@ export const CustomAuthenticatorSettings: FunctionComponent<CustomAuthenticatorS
     const [ endpointAuthenticationType, setEndpointAuthenticationType ] = useState<AuthenticationType>(null);
     const [ isEndpointAuthenticationUpdated, setIsEndpointAuthenticationUpdated ] = useState<boolean>(false);
 
-    /**
-     * This useEffect is utilized only for custom authenticators in order to fetch additional
-     * details related to authenticators.
-     * This is not required for other connections since all the required details
-     * are passed from the parent component.
-     */
     useEffect(() => {
-        let customAuthenticatorId: string;
-
         if (isCustomLocalAuthenticator) {
-            customAuthenticatorId = (connector as CustomAuthConnectionInterface)?.id;
-            getCustomLocalAuthenticator(customAuthenticatorId);
+            setInitialValues({
+                authenticationType: (connector as CustomAuthConnectionInterface)?.endpoint?.authentication?.type,
+                endpointUri: (connector as CustomAuthConnectionInterface)?.endpoint?.uri
+            });
         } else {
-            customAuthenticatorId = connector?.federatedAuthenticators?.authenticators[0]?.authenticatorId;
-            getCustomFederatedAuthenticator(customAuthenticatorId);
-        }
-    }, [ isCustomLocalAuthenticator ]);
+            const customAuthenticatorId: string = connector?.federatedAuthenticators?.
+                authenticators[0]?.authenticatorId;
 
-    const resolveDisplayName = (): string => {
-        if (isCustomLocalAuthenticator) {
-            return (connector as CustomAuthConnectionInterface)?.displayName;
-        } else {
-            return (connector as ConnectionInterface)?.name;
+            getCustomFederatedAuthenticatorInitialValues(customAuthenticatorId);
         }
-    };
+    }, []);
 
     /**
-    * This function is used to get the custom local authenticator details which includes endpoint
-    * configurations that need to be accessed from the "Settings" tab.
-    *
-    * @param customLocalAuthenticatorId - Custom local authenticator id.
-    */
-    const getCustomLocalAuthenticator = (customLocalAuthenticatorId: string) => {
-        getLocalAuthenticator(customLocalAuthenticatorId)
-            .then((data: CustomAuthConnectionInterface) => {
-                const endpointAuth: EndpointConfigFormPropertyInterface = {
-                    authenticationType: data?.endpoint?.authentication?.type,
-                    endpointUri: data?.endpoint?.uri
-                };
-
-                setInitialValues(endpointAuth);
-            })
-            .catch((error: AxiosError) => {
-                handleGetCustomAuthenticatorError(error);
-            });
-    };
-
-    /**
-    * This function is used to get the custom federated authenticator details which includes endpoint
-    * configurations that need to be accessed from the "Settings" tab.
-    *
-    * @param customFederatedAuthenticatorId - Custom federated authenticator id.
-    */
-    const getCustomFederatedAuthenticator = (customFederatedAuthenticatorId: string) => {
+     * This function is utilized only for custom federated authenticators since endpoint details are not
+     * returned from the get IDP API. Therefore, the specific federated authenticator GET API is triggered.
+     *
+     * This is not required for other connections since all the required details
+     * are passed from the parent component.
+     *
+     * @param customFederatedAuthenticatorId - Custom federated authenticator id.
+     */
+    const getCustomFederatedAuthenticatorInitialValues = (customFederatedAuthenticatorId: string) => {
         getFederatedAuthenticatorDetails(connector?.id, customFederatedAuthenticatorId)
             .then((data: FederatedAuthenticatorListItemInterface) => {
                 const endpointAuth: EndpointConfigFormPropertyInterface = {
@@ -163,6 +132,14 @@ export const CustomAuthenticatorSettings: FunctionComponent<CustomAuthenticatorS
             });
     };
 
+    const resolveDisplayName = (): string => {
+        if (isCustomLocalAuthenticator) {
+            return (connector as CustomAuthConnectionInterface)?.displayName;
+        } else {
+            return (connector as ConnectionInterface)?.name;
+        }
+    };
+
     const validateForm = (values: EndpointConfigFormPropertyInterface):
         Partial<EndpointConfigFormPropertyInterface> => {
 
@@ -210,9 +187,6 @@ export const CustomAuthenticatorSettings: FunctionComponent<CustomAuthenticatorS
             })
             .catch((error: AxiosError) => {
                 handleConnectionUpdateError(error);
-            })
-            .finally(() => {
-                getCustomLocalAuthenticator(connector.id);
             });
     };
 
@@ -257,9 +231,6 @@ export const CustomAuthenticatorSettings: FunctionComponent<CustomAuthenticatorS
             })
             .catch((error: AxiosError) => {
                 handleCustomAuthenticatorUpdateError(error);
-            })
-            .finally(() => {
-                getCustomFederatedAuthenticator(federatedAuthenticatorId);
             });
     };