feat: improved error communication on frontend, with toast component #12

ShubhranshuSanjeev · 2024-04-29T14:40:39Z

Problem

Previously, our application lacked proper user feedback mechanisms when dealing with API failures or form submissions. There was no standardized way to communicate error messages to the user.

Solution

Created two new reusable components: a Toast component and an Alert component. These components can be utilized to display informative messages to the user.
Additionally, created an AlertProvider context that manages a queue of alerts to be displayed on the screen. This context allows for centralized handling of alert messages throughout the application.
Implemented a utility function request that can be directly used for making API calls. This function automatically inserts any errors that occur during the API call into the alert queue, ensuring that users are promptly notified of any issues.
Updated all validation-based error messages to provide concise and easy-to-understand error descriptions.

UI Screenshot

Datron · 2024-04-30T05:35:51Z

@ShubhranshuSanjeev can you add a few screenshots?

Datron

Looks great! I've suggested a few changes and had a few questions

Datron · 2024-04-30T05:37:45Z

crates/frontend/src/types.rs

@@ -214,3 +214,10 @@ pub struct BreadCrums {
    pub value: Option<String>,
    pub is_link: bool,
 }
+
+/************************************************************************/


We don't need this separation comment

@ShubhranshuSanjeev can you remove this

Datron · 2024-04-30T05:39:31Z

crates/frontend/src/utils.rs

+    url: String,
+    method: reqwest::Method,
+    body: Option<T>,
+    headers: &[(&str, &str)],


It maybe better to take Headers type directly instead of constructing it, just a thought

If you see, you have to use HeaderName::from_str and HeaderValue::from_str on &str for header name and value, respectively, these functions then return a Result, which has to be handled to extract out the parsed value. Its a repeated procedure which has to be done for every request, seemed better to abstract it out.

Now that I am thinking about this, may be I can make another helper fxn to just construct the HeaderMap which I can then pass to the request.

Datron · 2024-04-30T05:40:09Z

crates/frontend/src/utils.rs

@@ -343,3 +349,66 @@ pub fn get_config_value(
        }
    }
 }
+
+/********* Request Utils **********/


We don't need these comments

Datron · 2024-04-30T05:43:21Z

crates/frontend/src/utils.rs

+            .map_or(String::from("Something went wrong"), |error| error.message);
+        enqueue_alert(error_msg.clone(), AlertType::Error, 3000);
+
+        return Err(anyhow!(error_msg));


Why anyhow?

Datron · 2024-04-30T05:44:50Z

crates/frontend/src/utils.rs

+
+    response.json::<R>().await.map_err(|err| {
+        logging::log!("{:?}", err);
+        enqueue_alert(err.to_string(), AlertType::Error, 2000);


What does enqueue_alert do here?

Ignore, it is for showing the alert on the UI.

Datron · 2024-04-30T05:46:29Z

crates/frontend/src/components/toast/mod.rs

+
+#[derive(Clone, Debug)]
+pub struct Alert {
+    pub id: u64,


is ID required?

I need it for removing the correct alert after the timeout.

Datron · 2024-04-30T05:46:47Z

crates/frontend/src/components/toast/mod.rs

+}
+
+impl Alert {
+    pub fn default(id: u64, text: String) -> Self {


Can we auto generate the ID in default?

If you check the id is generated in enqueue_alert fxn, you won't have to give a id of your own most of the time, as for general use-case you can just fire the enqueue_alert.

mahatoankitkumar · 2024-04-30T06:07:11Z

Use request fn for the function's utils also.

mahatoankitkumar · 2024-04-30T06:02:17Z

crates/frontend/src/components/toast/mod.rs

+    let outer_div_class = format!("alert {}", alert.alert_type.to_css_class());
+    let content_icon = alert.alert_type.to_icon_class();
+    view! {
+        <div class="toast toast-end">


provide z-index greater than the drawer.

mahatoankitkumar · 2024-04-30T06:03:30Z

crates/frontend/src/components/toast/mod.rs

+            id,
+            text,
+            alert_type: AlertType::Info,
+            timeout: 500,


Increase the timeout.

mahatoankitkumar · 2024-04-30T06:12:36Z

I think we should me the error from the Api's a bit more concise as it sometimes gives nearly a paragraph, which doesn't look good in the toast.

mahatoankitkumar · 2024-04-30T06:13:40Z

@ShubhranshuSanjeev Is success toast going to be a part of another PR?

mahatoankitkumar · 2024-04-30T06:18:48Z

crates/frontend/src/utils.rs

+    let mut request_builder =
+        HTTP_CLIENT.request(method.clone(), url).headers(header_map);
+    request_builder = match (method, body) {
+        (reqwest::Method::GET | reqwest::Method::DELETE, _) => request_builder,


Import reqwest::Method above.

Don't really think we need to import, this is good enough.

importing this would make this more concise and cleaner, not mandatory, just a recommendation.

mahatoankitkumar · 2024-04-30T06:25:30Z

crates/frontend/src/hoc/layout/layout.rs

@@ -36,6 +39,23 @@ pub fn Layout(children: Children) -> impl IntoView {
            <main class="ease-soft-in-out xl:ml-96 relative h-full max-h-screen rounded-xl transition-all duration-200 overflow-y-auto">
                {children()}
            </main>
+


make a module for this.

ShubhranshuSanjeev · 2024-04-30T09:56:43Z

@ShubhranshuSanjeev Is success toast going to be a part of another PR?

@mahatoankitkumar , its already there, you can make success toasts too, you just have to that in alert_type property.

ShubhranshuSanjeev · 2024-04-30T10:09:10Z

I think we should me the error from the Api's a bit more concise as it sometimes gives nearly a paragraph, which doesn't look good in the toast.

@mahatoankitkumar , will do that separately, not really in scope of this PR.

mahatoankitkumar · 2024-04-30T11:18:18Z

@ShubhranshuSanjeev Is success toast going to be a part of another PR?

@mahatoankitkumar , its already there, you can make success toasts too, you just have to that in alert_type property.

I think this should be a part of this PR itself, doesn't seems to be a major change.

ShubhranshuSanjeev · 2024-04-30T12:20:41Z

@ShubhranshuSanjeev Is success toast going to be a part of another PR?

@mahatoankitkumar , its already there, you can make success toasts too, you just have to that in alert_type property.

I think this should be a part of this PR itself, doesn't seems to be a major change.

Oh, got it what you mean, you are asking me to show success toasts on successful API calls, right?

mahatoankitkumar · 2024-04-30T13:22:14Z

@ShubhranshuSanjeev Is success toast going to be a part of another PR?

@mahatoankitkumar , its already there, you can make success toasts too, you just have to that in alert_type property.

I think this should be a part of this PR itself, doesn't seems to be a major change.

Oh, got it what you mean, you are asking me to show success toasts on successful API calls, right?

Yup

ShubhranshuSanjeev · 2024-05-02T07:04:57Z

I think we should me the error from the Api's a bit more concise as it sometimes gives nearly a paragraph, which doesn't look good in the toast.

@mahatoankitkumar , will do that separately, not really in scope of this PR.

@mahatoankitkumar , made changes for this

mahatoankitkumar · 2024-05-02T11:37:34Z

@ShubhranshuSanjeev There seems to be an issue in the initial load. After that it starts working fine.

Screen.Recording.2024-05-02.at.5.03.03.PM.mov

mahatoankitkumar · 2024-05-02T11:45:28Z

crates/context_aware_config/src/api/context/handlers.rs

-                "schema validation failed for {key} with error {:?}",
-                verrors
+                "schema validation failed for {key}: {}",
+                validation_err_to_str(verrors).first().unwrap()


we can do unwrap_or(verrors) as a fallback.

Not needed I guess, there will always be one item in the vector

Anyway its a str, i will change this to unwrap_or(String::new())

mahatoankitkumar · 2024-05-02T11:50:16Z

crates/frontend/src/utils.rs

+            .await
+            .map_or(String::from("Something went wrong"), |error| error.message);
+        enqueue_alert(error_msg.clone(), AlertType::Error, 5000);
+


log the error here.

mahatoankitkumar · 2024-05-02T11:56:22Z

crates/frontend/src/components/function_form/function_form.rs

+                                    .get()
+                                    .map_or(
+                                        String::new(),
+                                        |o| { format!("{}\n{}", o.message, o.stdout) },


Nice, was doing it myself, just a request if you can do the same for the above error_message.get().

Sure will do it

Datron · 2024-05-02T13:08:55Z

crates/frontend/src/components/override_form/override_form.rs

+                                                        &default_config
+                                                            .get_value()
+                                                            .into_iter()
+                                                            .map(ConfigType::DefaultConfig)


This is weirdly formatted

Datron · 2024-05-02T13:13:05Z

crates/frontend/src/types.rs

@@ -214,3 +214,10 @@ pub struct BreadCrums {
    pub value: Option<String>,
    pub is_link: bool,
 }
+
+/************************************************************************/


@ShubhranshuSanjeev can you remove this

ShubhranshuSanjeev · 2024-05-02T14:08:04Z

@ShubhranshuSanjeev There seems to be an issue in the initial load. After that it starts working fine.
Screen.Recording.2024-05-02.at.5.03.03.PM.mov

Something weird happening in Leptos, have to understand what's going on.

mahatoankitkumar

Initial load issue to be fixed.

ShubhranshuSanjeev requested a review from a team as a code owner April 29, 2024 14:40

Datron requested changes Apr 30, 2024

View reviewed changes

mahatoankitkumar requested changes Apr 30, 2024

View reviewed changes

ShubhranshuSanjeev force-pushed the feat/alert-toasts branch 2 times, most recently from 3b0cbb9 to a2c8133 Compare May 2, 2024 05:32

ShubhranshuSanjeev changed the title ~~Feat/alert toasts~~ feat: improved error communication on frontend, with toast component May 2, 2024

ShubhranshuSanjeev force-pushed the feat/alert-toasts branch from a2c8133 to cd0ff47 Compare May 2, 2024 05:48

ShubhranshuSanjeev force-pushed the feat/alert-toasts branch 3 times, most recently from a8b2ac4 to aa8cbce Compare May 2, 2024 09:59

ShubhranshuSanjeev requested review from Datron and mahatoankitkumar May 2, 2024 10:09

mahatoankitkumar requested changes May 2, 2024

View reviewed changes

Datron requested changes May 2, 2024

View reviewed changes

ShubhranshuSanjeev force-pushed the feat/alert-toasts branch from aa8cbce to c229fcc Compare May 2, 2024 13:51

ShubhranshuSanjeev force-pushed the feat/alert-toasts branch from c229fcc to 2ec95f5 Compare May 2, 2024 14:13

ShubhranshuSanjeev requested a review from mahatoankitkumar May 2, 2024 14:13

ShubhranshuSanjeev requested a review from Datron May 2, 2024 14:13

ShubhranshuSanjeev force-pushed the feat/alert-toasts branch from 2ec95f5 to d15d269 Compare May 2, 2024 14:24

Datron force-pushed the main branch from 8f0db34 to 01110e2 Compare May 3, 2024 05:33

ShubhranshuSanjeev and others added 3 commits May 3, 2024 13:00

feat: added toast component

b161db4

refactor: refactored http calls to request fxn

11811fc

chore: formatted code with leptosfmt and rustfmt

26c8004

ShubhranshuSanjeev force-pushed the feat/alert-toasts branch from d15d269 to 26c8004 Compare May 3, 2024 07:31

mahatoankitkumar approved these changes May 3, 2024

View reviewed changes

Datron approved these changes May 3, 2024

View reviewed changes

Datron merged commit 51838eb into main May 3, 2024
2 checks passed

Datron deleted the feat/alert-toasts branch May 3, 2024 09:50

feat: improved error communication on frontend, with toast component #12

feat: improved error communication on frontend, with toast component #12

Conversation

ShubhranshuSanjeev commented Apr 29, 2024 • edited Loading

Problem

Solution

UI Screenshot

Datron commented Apr 30, 2024

Datron left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ShubhranshuSanjeev Apr 30, 2024 • edited Loading

Choose a reason for hiding this comment

mahatoankitkumar commented Apr 30, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mahatoankitkumar commented Apr 30, 2024

mahatoankitkumar commented Apr 30, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mahatoankitkumar Apr 30, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ShubhranshuSanjeev commented Apr 30, 2024

ShubhranshuSanjeev commented Apr 30, 2024

mahatoankitkumar commented Apr 30, 2024

ShubhranshuSanjeev commented Apr 30, 2024 • edited Loading

mahatoankitkumar commented Apr 30, 2024

ShubhranshuSanjeev commented May 2, 2024

mahatoankitkumar commented May 2, 2024

Choose a reason for hiding this comment

ShubhranshuSanjeev May 2, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mahatoankitkumar May 2, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ShubhranshuSanjeev commented May 2, 2024

mahatoankitkumar left a comment

Choose a reason for hiding this comment

ShubhranshuSanjeev commented Apr 29, 2024 •

edited

Loading

ShubhranshuSanjeev Apr 30, 2024 •

edited

Loading

mahatoankitkumar Apr 30, 2024 •

edited

Loading

ShubhranshuSanjeev commented Apr 30, 2024 •

edited

Loading

ShubhranshuSanjeev May 2, 2024 •

edited

Loading

mahatoankitkumar May 2, 2024 •

edited

Loading