changed how errors are displayed (#2066)

src/identity-providers/add/OpenIdConnectSettings.tsx

@@ -17,39 +17,49 @@ export const OpenIdConnectSettings = () => {
 
   const adminClient = useAdminClient();
   const { realm } = useRealm();
-  const { setValue, errors, setError } = useFormContext();
+  const { setValue, errors, setError, clearErrors } = useFormContext();
 
   const setupForm = (result: any) => {
     Object.keys(result).map((k) => setValue(`config.${k}`, result[k]));
   };
 
   const fileUpload = async (obj?: object) => {
-    if (obj) {
-      const formData = new FormData();
-      formData.append("providerId", id);
-      formData.append("file", new Blob([JSON.stringify(obj)]));
+    clearErrors("discoveryError");
+    if (!obj) {
+      return;
+    }
 
-      try {
-        const response = await fetch(
-          `${getBaseUrl(
-            adminClient
-          )}admin/realms/${realm}/identity-provider/import-config`,
-          {
-            method: "POST",
-            body: formData,
-            headers: {
-              Authorization: `bearer ${await adminClient.getAccessToken()}`,
-            },
-          }
-        );
+    const formData = new FormData();
+    formData.append("providerId", id);
+    formData.append("file", new Blob([JSON.stringify(obj)]));
+
+    try {
+      const response = await fetch(
+        `${getBaseUrl(
+          adminClient
+        )}admin/realms/${realm}/identity-provider/import-config`,
+        {
+          method: "POST",
+          body: formData,
+          headers: {
+            Authorization: `Bearer ${await adminClient.getAccessToken()}`,
+          },
+        }
+      );
+      if (response.ok) {
         const result = await response.json();
         setupForm(result);
-      } catch (error) {
+      } else {
         setError("discoveryError", {
           type: "manual",
-          message: (error as Error).message,
+          message: response.statusText,
         });
       }
+    } catch (error) {
+      setError("discoveryError", {
+        type: "manual",
+        message: (error as Error).message,
+      });
     }
   };
 
@@ -72,7 +82,7 @@ export const OpenIdConnectSettings = () => {
               />
             }
             validated={errors.discoveryError ? "error" : "default"}
-            helperTextInvalid={errors.discoveryError}
+            helperTextInvalid={errors.discoveryError?.message}
           >
             <JsonFileUpload
               id="kc-import-config"

src/identity-providers/add/SamlConnectSettings.tsx

@@ -20,7 +20,8 @@ export const SamlConnectSettings = () => {
 
   const adminClient = useAdminClient();
   const { realm } = useRealm();
-  const { setValue, register, errors, setError } = useFormContext();
+  const { setValue, register, errors, setError, clearErrors } =
+    useFormContext();
 
   const setupForm = (result: IdentityProviderRepresentation) => {
     Object.entries(result).map(([key, value]) =>
@@ -29,6 +30,10 @@ export const SamlConnectSettings = () => {
   };
 
   const fileUpload = async (xml: string) => {
+    clearErrors("discoveryError");
+    if (!xml) {
+      return;
+    }
     const formData = new FormData();
     formData.append("providerId", id);
     formData.append("file", new Blob([xml]));
@@ -46,8 +51,15 @@ export const SamlConnectSettings = () => {
           },
         }
       );
-      const result = await response.json();
-      setupForm(result);
+      if (response.ok) {
+        const result = await response.json();
+        setupForm(result);
+      } else {
+        setError("discoveryError", {
+          type: "manual",
+          message: response.statusText,
+        });
+      }
     } catch (error) {
       setError("discoveryError", {
         type: "manual",
@@ -99,7 +111,7 @@ export const SamlConnectSettings = () => {
               />
             }
             validated={errors.discoveryError ? "error" : "default"}
-            helperTextInvalid={errors.discoveryError}
+            helperTextInvalid={errors.discoveryError?.message}
           >
             <FileUploadForm
               id="kc-import-config"

src/identity-providers/component/DiscoveryEndpointField.tsx

@@ -82,7 +82,10 @@ export const DiscoveryEndpointField = ({
           label={t("common:on")}
           labelOff={t("common:off")}
           isChecked={discovery}
-          onChange={setDiscovery}
+          onChange={(checked) => {
+            clearErrors("discoveryError");
+            setDiscovery(checked);
+          }}
         />
       </FormGroup>
       {discovery && (
@@ -109,7 +112,9 @@ export const DiscoveryEndpointField = ({
           helperTextInvalid={
             errors.discoveryEndpoint
               ? t("common:required")
-              : t("noValidMetaDataFound")
+              : t("noValidMetaDataFound", {
+                  error: errors.discoveryError?.message,
+                })
           }
           isRequired
         >

src/identity-providers/messages.ts

@@ -98,7 +98,8 @@ export default {
     importConfig: "Import config from file",
     showMetaData: "Show metadata",
     hideMetaData: "Hide metadata",
-    noValidMetaDataFound: "No valid metadata was found at this URL",
+    noValidMetaDataFound:
+      "No valid metadata was found at this URL: '{{error}}'",
     advanced: "Advanced",
     metadataOfDiscoveryEndpoint: "Metadata of the discovery endpoint",
     authorizationUrl: "Authorization URL",