From ce5c296ce6bb5ae319b4259c47e7769199e30424 Mon Sep 17 00:00:00 2001
From: Samir Kamal <1954121+skamril@users.noreply.github.com>
Date: Tue, 2 Apr 2024 13:57:37 +0200
Subject: [PATCH] feat(ui): add close button on success notifications and
 change auto hide duration

---
 .../BindingConstraints/AddDialog.tsx          |  1 -
 .../AddConstraintTermDialog/index.tsx         |  1 -
 .../BindingConstView/BindingConstForm.tsx     |  1 -
 .../BindingConstView/index.tsx                |  1 -
 webapp/src/components/App/index.tsx           | 22 ++++++++++++++++---
 5 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/AddDialog.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/AddDialog.tsx
index 88119adf27..35fcb9c90e 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/AddDialog.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/AddDialog.tsx
@@ -105,7 +105,6 @@ function AddDialog({
     dispatch(setCurrentBindingConst(createdConstraint.id));
     enqueueSnackbar(t("study.success.addBindingConst"), {
       variant: "success",
-      autoHideDuration: 1500,
     });
     onClose();
   };
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/AddConstraintTermDialog/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/AddConstraintTermDialog/index.tsx
index c912ff81f6..f6a5d6ed59 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/AddConstraintTermDialog/index.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/AddConstraintTermDialog/index.tsx
@@ -125,7 +125,6 @@ function AddConstraintTermDialog({
 
       enqueueSnackbar(t("study.success.createConstraintTerm"), {
         variant: "success",
-        autoHideDuration: 2000,
       });
     } catch (e) {
       enqueueErrorSnackbar(
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/BindingConstForm.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/BindingConstForm.tsx
index 81b33b9260..a28a2644fc 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/BindingConstForm.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/BindingConstForm.tsx
@@ -79,7 +79,6 @@ function BindingConstForm({ study, options, constraintId }: Props) {
 
         enqueueSnackbar(t("global.update.success"), {
           variant: "success",
-          autoHideDuration: 1500,
         });
       } catch (error) {
         enqueueErrorSnackbar(
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/index.tsx
index 2a56506d47..85dc4c0993 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/index.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/index.tsx
@@ -89,7 +89,6 @@ function BindingConstView({ constraintId }: Props) {
 
       enqueueSnackbar(t("study.success.deleteConstraint"), {
         variant: "success",
-        autoHideDuration: 1500,
       });
     } catch (e) {
       enqueueErrorSnackbar(t("study.error.deleteConstraint"), e as AxiosError);
diff --git a/webapp/src/components/App/index.tsx b/webapp/src/components/App/index.tsx
index be247e296b..9a3d442c18 100644
--- a/webapp/src/components/App/index.tsx
+++ b/webapp/src/components/App/index.tsx
@@ -5,8 +5,8 @@ import {
   Routes,
   Outlet,
 } from "react-router-dom";
-import { CssBaseline, ThemeProvider } from "@mui/material";
-import { SnackbarProvider } from "notistack";
+import { CssBaseline, IconButton, ThemeProvider } from "@mui/material";
+import { SnackbarKey, SnackbarProvider, useSnackbar } from "notistack";
 import maintheme from "../../theme";
 import MenuWrapper from "../wrappers/MenuWrapper";
 import Studies from "./Studies";
@@ -54,12 +54,28 @@ import StorageForm from "./Singlestudy/explore/Modelization/Areas/Storages/Form"
 import ThermalForm from "./Singlestudy/explore/Modelization/Areas/Thermal/Form";
 import RenewablesForm from "./Singlestudy/explore/Modelization/Areas/Renewables/Form";
 import SplitHydroMatrix from "./Singlestudy/explore/Modelization/Areas/Hydro/SplitHydroMatrix";
+import CloseIcon from "@mui/icons-material/Close";
+
+// TODO: replace 'notistack' by 'sonner' (https://sonner.emilkowal.ski/)
+function SnackbarCloseButton({ snackbarKey }: { snackbarKey: SnackbarKey }) {
+  const { closeSnackbar } = useSnackbar();
+
+  return (
+    <IconButton onClick={() => closeSnackbar(snackbarKey)}>
+      <CloseIcon />
+    </IconButton>
+  );
+}
 
 function App() {
   return (
     <Router>
       <ThemeProvider theme={maintheme}>
-        <SnackbarProvider maxSnack={5}>
+        <SnackbarProvider
+          maxSnack={5}
+          autoHideDuration={3000}
+          action={(key) => <SnackbarCloseButton snackbarKey={key} />}
+        >
           <CssBaseline />
           <MaintenanceWrapper>
             <LoginWrapper>