refactored toast component (#874)

Author: laszlocph

web/package-lock.json

@@ -27,6 +27,7 @@
     "react-emoji-render": "^2.0.1",
     "react-infinite-scroll-component": "^6.1.0",
     "react-router-dom": "^6.26.2",
+    "react-toastify": "^10.0.5",
     "redux": "^5.0.1",
     "remarkable": "^2.0.1",
     "typescript": "^5.6.2",

web/package.json

@@ -77,3 +77,11 @@
 .serviceLinkIcon {
     @apply hover:text-teal-300 inline fill-current h-4 w-4
 }
+
+:root:has(.no-doc-scroll) {
+    overflow: hidden;
+}
+
+:root {
+    --toastify-color-progress-light: #2dd4bf
+}

web/src/app.css

@@ -1,4 +1,5 @@
 import React, { Component, useEffect } from 'react';
+import "react-toastify/dist/ReactToastify.css";
 import './app.css';
 import Nav from "./components/nav/nav";
 import StreamingBackend from "./streamingBackend";
@@ -20,7 +21,6 @@ import { DeployWizzard } from './views/deployWizzard/deployWizzard'
 import RepositoryWizard from './views/repositoryWizard/repositoryWizard';
 import Environments from './views/environments/environments'
 import Environment from './views/environment/environment';
-import PopUpWindow from './popUpWindow';
 import Footer from './views/footer/footer';
 import {
   ACTION_TYPE_USER,
@@ -29,6 +29,7 @@ import {
 import Posthog from './posthog';
 import './style.css'
 import GithubIntegration from './views/githubIntegration';
+import { ToastContainer } from 'react-toastify';
 
 export default class App extends Component {
   constructor(props) {
@@ -113,10 +114,10 @@ export default class App extends Component {
       <Router>
         <StreamingBackend store={store} />
         <APIBackend store={store} gimletClient={gimletClient} />
-        <PopUpWindow store={store} />
         <Posthog store={store} />
 
         <div className="min-h-screen bg-neutral-100 dark:bg-neutral-900 pb-20">
+          <ToastContainer limit={3} theme="light" className="max-w-lg w-full" />
           <Footer store={store} gimletClient={gimletClient} />
           <div className="">
             <Routes>

web/src/app.jsx

@@ -1,15 +1,11 @@
-import React, { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { RolloutHistory } from "../rolloutHistory/rolloutHistory";
 import Emoji from "react-emoji-render";
 import { Fragment } from 'react'
 import { Menu, Transition } from '@headlessui/react'
 import { ArrowPathIcon } from '@heroicons/react/20/solid'
 import {
   ACTION_TYPE_ROLLOUT_HISTORY,
-  ACTION_TYPE_POPUPWINDOWERROR,
-  ACTION_TYPE_POPUPWINDOWRESET,
-  ACTION_TYPE_POPUPWINDOWSUCCESS,
-  ACTION_TYPE_POPUPWINDOWPROGRESS,
 } from "../../redux/redux";
 import { copyToClipboard } from '../../views/settings/settings';
 import { usePostHog } from 'posthog-js/react'
@@ -18,6 +14,8 @@ import { AlertPanel } from './alert';
 import { Logs } from '../../views/footer/logs';
 import { Describe } from '../../views/footer/capacitor/Describe';
 import { ArrowTopRightOnSquareIcon, LinkIcon } from '@heroicons/react/24/solid';
+import { toast } from 'react-toastify';
+import { InProgress, Success, Error } from '../../popUpWindow';
 
 function ServiceDetail(props) {
   const { store, gimletClient } = props;
@@ -28,6 +26,8 @@ function ServiceDetail(props) {
   const posthog = usePostHog()
   const [pullRequests, setPullRequests] = useState()
 
+  const progressToastId = useRef(null);
+
   useEffect(() => {
     if (deploymentFromParams === stack.service.name) {
       window.scrollTo({ behavior: 'smooth', top: ref.current.offsetTop })
@@ -67,69 +67,48 @@ function ServiceDetail(props) {
   };
 
   const deleteAppInstance = () => {
-    store.dispatch({
-      type: ACTION_TYPE_POPUPWINDOWPROGRESS, payload: {
-        header: "Deleting application instance..."
-      }
-    });
+    progressToastId.current = toast(<InProgress header="Deleting application instance..."/>, { autoClose: false });
 
     gimletClient.deleteAppInstance(environment.name, stack.service.name)
       .then(() => {
-        store.dispatch({
-          type: ACTION_TYPE_POPUPWINDOWSUCCESS, payload: {
-            header: "Success",
-            message: "Application instance deleted",
-          }
+        toast.update(progressToastId.current, {
+          render: <Success header="Application instance deleted"/>,
+          className: "bg-green-50 shadow-lg p-2",
+          bodyClassName: "p-2",
         });
       }, (err) => {
-        store.dispatch({
-          type: ACTION_TYPE_POPUPWINDOWERROR, payload: {
-            header: "Error",
-            message: err.statusText
-          }
+        toast.update(progressToastId.current, {
+          render: <Error header="Error" message={err.statusText} />,
+          className: "bg-red-50 shadow-lg p-2",
+          bodyClassName: "p-2",
+          progressClassName: "!bg-red-200",
+          autoClose: 5000
         });
-        setTimeout(() => {
-          store.dispatch({
-            type: ACTION_TYPE_POPUPWINDOWRESET
-          });
-        }, 3000);
       });
   }
 
   const silenceAlert = (object, hours) => {
     var date = new Date();
     date.setHours(date.getHours() + hours);
 
-    store.dispatch({
-      type: ACTION_TYPE_POPUPWINDOWPROGRESS, payload: {
-        header: "Silence deployment alerts..."
-      }
-    });
+    progressToastId.current = toast(<InProgress header="Silencing alerts..." />, { autoClose: false });
 
     gimletClient.silenceAlert(object, date.toISOString())
       .then(() => {
-        store.dispatch({
-          type: ACTION_TYPE_POPUPWINDOWSUCCESS, payload: {
-            header: "Success",
-          }
+        toast.update(progressToastId.current, {
+          render: <Success header="Silenced" />,
+          className: "bg-green-50 shadow-lg p-2",
+          bodyClassName: "p-2",
+          autoClose: 3000,
         });
-        setTimeout(() => {
-          store.dispatch({
-            type: ACTION_TYPE_POPUPWINDOWRESET
-          });
-        }, 3000);
       }, (err) => {
-        store.dispatch({
-          type: ACTION_TYPE_POPUPWINDOWERROR, payload: {
-            header: "Error",
-            message: err.statusText
-          }
+        toast.update(progressToastId.current, {
+          render: <Error header="Error" message={err.statusText} />,
+          className: "bg-red-50 shadow-lg p-2",
+          bodyClassName: "p-2",
+          progressClassName: "!bg-red-200",
+          autoClose: 5000
         });
-        setTimeout(() => {
-          store.dispatch({
-            type: ACTION_TYPE_POPUPWINDOWRESET
-          });
-        }, 3000);
       });
   }
 

web/src/components/serviceDetail/serviceDetail.jsx

@@ -2,10 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-:root:has(.no-doc-scroll) {
-  overflow:hidden;
-}
-
 @font-face {
   font-family: 'geist';
   src: url('./GeistVF.woff2') format('woff');