More refactor

web/src/app.css

@@ -79,5 +79,9 @@
 }
 
 :root:has(.no-doc-scroll) {
-  overflow:hidden;
+    overflow: hidden;
 }
+
+:root {
+    --toastify-color-progress-light: #2dd4bf
+}

web/src/app.jsx

@@ -21,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,
@@ -115,7 +114,6 @@ 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">

web/src/components/serviceDetail/serviceDetail.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/popUpWindow.jsx

@@ -1,75 +1,4 @@
-import { Component } from 'react';
 import { CheckIcon, XCircleIcon } from '@heroicons/react/24/solid'
-import {
-  ACTION_TYPE_POPUPWINDOWRESET
-} from "./redux/redux";
-
-export default class PopUpWindow extends Component {
-  constructor(props) {
-    super(props);
-    let reduxState = this.props.store.getState();
-
-    this.state = {
-      popupWindow: reduxState.popupWindow
-    };
-    this.props.store.subscribe(() => {
-      let reduxState = this.props.store.getState();
-
-      this.setState({
-        popupWindow: reduxState.popupWindow
-      });
-    });
-  }
-
-  backgroundColor() {
-    return !this.state.popupWindow.finished ? "bg-neutral-200" : this.state.popupWindow.isError ? "bg-red-50" : "bg-green-50"
-  }
-
-  savingText() {
-    if (!this.state.popupWindow.finished) {
-      return <InProgress header={this.state.popupWindow.header} />;
-    } else if (this.state.popupWindow.isError) {
-      return <Error
-        header={this.state.popupWindow.header}
-        message={this.state.popupWindow.message}
-      />;
-    } else {
-      return <Success
-        header={this.state.popupWindow.header}
-        message={this.state.popupWindow.message}
-        link={this.state.popupWindow.link}
-      />;
-    }
-  }
-
-  close() {
-    this.props.store.dispatch({
-      type: ACTION_TYPE_POPUPWINDOWRESET
-    });
-  }
-
-  render() {
-    return (
-      <div
-        className={(this.state.popupWindow.visible ? "visible" : "invisible") + " fixed z-50 inset-0 flex px-4 py-6 pointer-events-none sm:p-6 w-full flex-col items-end space-y-4"}>
-        <div
-          className={this.backgroundColor() + " max-w-lg w-full text-neutral-100 text-sm shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5"}>
-          <div className="flex p-4 justify-between">
-            {this.savingText()}
-            <div className="ml-4 flex-shrink-0 flex items-start">
-              <button className="rounded-md inline-flex text-neutral-400 hover:text-neutral-500 focus:outline-none"
-                onClick={() => { this.close() }} >
-                <span className="sr-only">Close</span>
-                <svg className="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                  <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
-                </svg>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>)
-  }
-}
 
 export function InProgress(props) {
   return (

web/src/redux/eventHandlers/eventHandlers.js

@@ -19,50 +19,6 @@ export function gitRepos(state, event) {
   return state;
 }
 
-export function popupWindowProgress(state, payload) {
-  state.popupWindow.visible = true;
-  state.popupWindow.header = payload.header;
-  return state;
-}
-
-export function popupWindowError(state, payload) {
-  state.popupWindow.visible = true;
-  state.popupWindow.finished = true;
-  state.popupWindow.isError = true;
-  state.popupWindow.header = payload.header;
-  state.popupWindow.message = payload.message;
-  return state;
-}
-
-export function popupWindowErrorList(state, payload) {
-  state.popupWindow.visible = true;
-  state.popupWindow.finished = true;
-  state.popupWindow.isError = true;
-  state.popupWindow.header = payload.header;
-  state.popupWindow.errorList = payload.errorList;
-  return state;
-}
-
-export function popupWindowSuccess(state, payload) {
-  state.popupWindow.visible = true;
-  state.popupWindow.finished = true;
-  state.popupWindow.header = payload.header;
-  state.popupWindow.message = payload.message;
-  state.popupWindow.link = payload.link;
-  return state;
-}
-
-export function popupWindowReset(state) {
-  state.popupWindow.visible = false;
-  state.popupWindow.isError = false;
-  state.popupWindow.finished = false;
-  state.popupWindow.header = "";
-  state.popupWindow.message = "";
-  state.popupWindow.link = "";
-  state.popupWindow.errorList = null;
-  return state;
-}
-
 export function envs(state, allEnvs) {
   state.connectedAgents = produce(state.connectedAgents, draft => {
     allEnvs.connectedAgents.forEach((agent) => {

web/src/redux/redux.js

@@ -23,18 +23,12 @@ export const ACTION_TYPE_IMAGEBUILD = 'imageBuild';
 export const ACTION_TYPE_IMAGEBUILD_STATUS = 'imageBuildStatus';
 export const ACTION_TYPE_GITOPS_REPO = 'gitopsRepo';
 export const ACTION_TYPE_GIT_REPOS = 'gitRepos';
-export const ACTION_TYPE_POPUPWINDOWPROGRESS = 'popupWindowProgress';
-export const ACTION_TYPE_POPUPWINDOWERROR = 'popupWindowError';
-export const ACTION_TYPE_POPUPWINDOWERRORLIST = 'popupWindowErrorList';
 export const ACTION_TYPE_ENVUPDATED = 'envUpdated';
 export const ACTION_TYPE_SETTINGS = 'settings';
 export const ACTION_TYPE_CLEAR_PODLOGS = 'clearPodLogs'
 export const ACTION_TYPE_CLEAR_DETAILS = 'clearDetails'
 export const ACTION_TYPE_ALERTS = 'alerts'
 
-export const ACTION_TYPE_POPUPWINDOWSUCCESS = 'popupWindowSaved';
-export const ACTION_TYPE_POPUPWINDOWRESET = 'popupWindowReset';
-
 export const ACTION_TYPE_ENVSPINNEDOUT = 'envSpinnedOut';
 
 export const EVENT_AGENT_CONNECTED = 'agentConnected';
@@ -88,15 +82,6 @@ export const initialState = {
   envs: [],
   gitopsCommits: [],
   alerts: {},
-  popupWindow: {
-    visible: false,
-    finished: false,
-    isError: false,
-    header: "",
-    message: "",
-    link: "",
-    errorList: null
-  },
   podLogs: {},
   details: {},
   textColors: {},
@@ -111,16 +96,6 @@ export function rootReducer(state = initialState, action) {
       return processStreamingEvent(state, action.payload)
     case ACTION_TYPE_GIT_REPOS:
       return eventHandlers.gitRepos(state, action.payload);
-    case ACTION_TYPE_POPUPWINDOWPROGRESS:
-      return eventHandlers.popupWindowProgress(state, action.payload);
-    case ACTION_TYPE_POPUPWINDOWERROR:
-      return eventHandlers.popupWindowError(state, action.payload);
-    case ACTION_TYPE_POPUPWINDOWERRORLIST:
-      return eventHandlers.popupWindowErrorList(state, action.payload);
-    case ACTION_TYPE_POPUPWINDOWSUCCESS:
-      return eventHandlers.popupWindowSuccess(state, action.payload);
-    case ACTION_TYPE_POPUPWINDOWRESET:
-      return eventHandlers.popupWindowReset(state);
     case ACTION_TYPE_ENVS:
       return eventHandlers.envs(state, action.payload)
     case ACTION_FLUX_EVENTS_RECEIVED:

web/src/views/deployWizzard/deployWizzard.jsx

@@ -9,11 +9,13 @@ import SimpleServiceDetail from '../../components/serviceDetail/simpleServiceDet
 import DeployHandler from '../../deployHandler';
 import Confetti from 'react-confetti'
 import { Loading } from '../repo/deployStatus';
-import { ACTION_TYPE_CLEAR_DEPLOY, ACTION_TYPE_POPUPWINDOWSUCCESS } from "../../redux/redux";
+import { ACTION_TYPE_CLEAR_DEPLOY } from "../../redux/redux";
 import { v4 as uuidv4 } from 'uuid';
 import SealedSecretWidget from "../envConfig/sealedSecretWidget";
 import { useParams, useNavigate } from 'react-router-dom'
 import { usePostHog } from 'posthog-js/react'
+import { toast } from 'react-toastify';
+import { InProgress, Success, Error } from '../../popUpWindow';
 
 export function DeployWizzard(props) {
   const { store, gimletClient } = props
@@ -85,6 +87,7 @@ export function DeployWizzard(props) {
   const topRef = useRef();
   const endRef = useRef();
   const [followLogs, setFollowLogs] = useState(true);
+  const progressToastId = useRef(null);
 
   useEffect(() => {
     gimletClient.getStackConfig(env)
@@ -241,21 +244,15 @@ export function DeployWizzard(props) {
     setRenderId(uuidv4())
   }, [selectedTemplate, stackConfigDerivedValues]);
 
-  // useEffect(() => {
-  //   console.log(configFile)
-  // }, [configFile]);
-
   const saveConfig = () => {
     posthog?.capture('Config written to git')
     setSavingConfigInProgress(true)
     gimletClient.saveEnvConfig(owner, repo, env, app, configFile)
       .then((data) => {
-        store.dispatch({
-          type: ACTION_TYPE_POPUPWINDOWSUCCESS, payload: {
-            header: "Success",
-            message: "Configuration saved.",
-            link: data.link
-          }
+        toast(progressToastId.current, {
+          render: <Success header="Success" message="Configuration saved." link={data.link} />,
+          className: "bg-green-50 shadow-lg p-2",
+          bodyClassName: "p-2",
         });
 
         setSavingConfigInProgress(false)