From 9ecb106c930e513f86c4ebf34a38594533328411 Mon Sep 17 00:00:00 2001
From: Marc-Antoine Hinse <marc.antoine@flare.io>
Date: Wed, 15 Jan 2025 13:51:32 -0500
Subject: [PATCH] Handle the HTTP errors coming from scripts and show a
 different message if initial configuration

---
 .../components/ConfigurationInitialStep.css   |  1 +
 .../components/ConfigurationInitialStep.tsx   |  6 +--
 .../react-components/src/components/Toast.css |  1 +
 .../src/utils/setupConfiguration.ts           | 49 +++++++++++++------
 4 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/packages/react-components/src/components/ConfigurationInitialStep.css b/packages/react-components/src/components/ConfigurationInitialStep.css
index 425c7ad..ea6d548 100644
--- a/packages/react-components/src/components/ConfigurationInitialStep.css
+++ b/packages/react-components/src/components/ConfigurationInitialStep.css
@@ -5,6 +5,7 @@
     gap: 0.5rem;
     align-items: center;
     color: var(--error);
+    text-align: start;
 }
 
 .error-container[hidden] {
diff --git a/packages/react-components/src/components/ConfigurationInitialStep.tsx b/packages/react-components/src/components/ConfigurationInitialStep.tsx
index b882b05..c5a28eb 100644
--- a/packages/react-components/src/components/ConfigurationInitialStep.tsx
+++ b/packages/react-components/src/components/ConfigurationInitialStep.tsx
@@ -38,13 +38,13 @@ const ConfigurationInitialStep: FC<{
                     setIsLoading(false);
                     onApiKeyValidated();
                 })
-                .catch((error: any) => {
-                    setErrorMessage(error.data);
+                .catch((error: Error) => {
+                    setErrorMessage(error.message);
                     setIsLoading(false);
                     toastManager.show({
                         id: ToastKeys.ERROR,
                         isError: true,
-                        content: 'Something went wrong. Please review your form.',
+                        content: `Something went wrong. ${error.message}`,
                     });
                 });
         }
diff --git a/packages/react-components/src/components/Toast.css b/packages/react-components/src/components/Toast.css
index 4c8079d..d7ba65e 100644
--- a/packages/react-components/src/components/Toast.css
+++ b/packages/react-components/src/components/Toast.css
@@ -30,6 +30,7 @@
 .toast-text {
     color: var(--text-color);
     overflow-wrap: anywhere;
+    text-align: start;
 }
 
 @keyframes toast-animation-in {
diff --git a/packages/react-components/src/utils/setupConfiguration.ts b/packages/react-components/src/utils/setupConfiguration.ts
index 52f4050..5fe9a2f 100644
--- a/packages/react-components/src/utils/setupConfiguration.ts
+++ b/packages/react-components/src/utils/setupConfiguration.ts
@@ -58,44 +58,61 @@ function createService(): SplunkService {
     return service;
 }
 
+function handleHTTPScriptError(error: any): Promise<boolean> {
+    if (error.status === 400) {
+        return fetchIsFirstConfiguration().then((isFirstConfiguration: boolean) => {
+            if (isFirstConfiguration) {
+                throw Error(
+                    'The Splunk instance needs to be restarted to recognize the scripts of this application.'
+                );
+            } else if (error.data.messages !== undefined && error.data.messages.length > 0) {
+                throw Error(error.data.messages[0].text);
+            }
+            throw Error(error.data);
+        });
+    } else {
+        throw Error(error.data);
+    }
+}
+
 function fetchApiKeyValidation(apiKey: string): Promise<boolean> {
     const service = createService();
     const data = { apiKey };
-    return promisify(service.post)('/services/fetch_api_key_validation', data).then(
-        (response: SplunkRequestResponse) => {
+    return promisify(service.post)('/services/fetch_api_key_validation', data)
+        .then((response: SplunkRequestResponse) => {
             return response.status === 200;
-        }
-    );
+        })
+        .catch(handleHTTPScriptError);
 }
 
 function fetchUserTenants(apiKey: string): Promise<Array<Tenant>> {
     const service = createService();
     const data = { apiKey };
-    return promisify(service.post)('/services/fetch_user_tenants', data).then(
-        (response: SplunkRequestResponse) => {
+    return promisify(service.post)('/services/fetch_user_tenants', data)
+        .then((response: SplunkRequestResponse) => {
             return response.data.tenants;
-        }
-    );
+        })
+        .catch(handleHTTPScriptError);
 }
 
 function fetchSeverityFilters(apiKey: string): Promise<Array<Severity>> {
     const service = createService();
     const data = { apiKey };
-    return promisify(service.post)('/services/fetch_severity_filters', data).then(
-        (response: SplunkRequestResponse) => {
+    return promisify(service.post)('/services/fetch_severity_filters', data)
+        .then((response: SplunkRequestResponse) => {
             return response.data.severities;
-        }
-    );
+        })
+        .catch(handleHTTPScriptError);
 }
 
 function fetchSourceTypeFilters(apiKey: string): Promise<Array<SourceTypeCategory>> {
     const service = createService();
     const data = { apiKey };
-    return promisify(service.post)('/services/fetch_source_type_filters', data).then(
-        (response: SplunkRequestResponse) => {
+    return promisify(service.post)('/services/fetch_source_type_filters', data)
+        .then((response: SplunkRequestResponse) => {
             return response.data.categories;
-        }
-    );
+        })
+        .catch(handleHTTPScriptError);
 }
 
 function doesPasswordExist(storage: SplunkStoragePasswordAccessors, key: string): boolean {