feat: add toast manager service

Author: eshankvaish

src/Assets/Icon/ic-error.svg

@@ -30,17 +30,6 @@ import { AsyncOptions, AsyncState, UseSearchString } from './Types'
 import { scrollableInterface, DATE_TIME_FORMAT_STRING } from '../Shared'
 import { ReactComponent as ArrowDown } from '../Assets/Icon/ic-chevron-down.svg'
 
-toast.configure({
-    autoClose: 3000,
-    hideProgressBar: true,
-    pauseOnHover: true,
-    pauseOnFocusLoss: true,
-    closeOnClick: false,
-    newestOnTop: true,
-    toastClassName: 'devtron-toast',
-    bodyClassName: 'devtron-toast__body',
-})
-
 export function showError(serverError, showToastOnUnknownError = true, hideAccessError = false) {
     if (serverError instanceof ServerErrors && Array.isArray(serverError.errors)) {
         serverError.errors.map(({ userMessage, internalMessage }) => {

src/Assets/Icon/ic-info-filled.svg

@@ -395,7 +395,7 @@ export const ImageTagsContainer = ({
                     </div>
                     {showTagsWarning && (
                         <div className="cn-7 mb-8 flex left">
-                            <Info className="form__icon--info icon-dim-16 mr-2" />
+                            <Info className="icon-dim-16 mr-2" />
                             Tags cannot be edited/removed later
                         </div>
                     )}

src/Assets/Icon/ic-locked.svg

@@ -0,0 +1,41 @@
+import { ReactElement } from 'react'
+import { ToastOptions } from 'react-toastify'
+import { ReactComponent as ICInfoFilled } from '@Icons/ic-info-filled.svg'
+import { ReactComponent as ICSuccess } from '@Icons/ic-success.svg'
+import { ReactComponent as ICError } from '@Icons/ic-error.svg'
+import { ReactComponent as ICWarning } from '@Icons/ic-warning.svg'
+import { ReactComponent as ICLocked } from '@Icons/ic-locked.svg'
+import { ReactComponent as ICSparkles } from '@Icons/ic-sparkles.svg'
+import { ToastVariantType } from './types'
+
+export const TOAST_VARIANT_TO_CONFIG_MAP: Record<
+    ToastVariantType,
+    {
+        icon: ReactElement
+    } & Pick<ToastOptions, 'type'>
+> = {
+    [ToastVariantType.info]: {
+        icon: <ICInfoFilled />,
+        type: 'info',
+    },
+    [ToastVariantType.success]: {
+        icon: <ICSuccess />,
+        type: 'success',
+    },
+    [ToastVariantType.error]: {
+        icon: <ICError />,
+        type: 'error',
+    },
+    [ToastVariantType.warn]: {
+        icon: <ICWarning className="warning-icon-y5-imp" />,
+        type: 'warning',
+    },
+    [ToastVariantType.notAuthorized]: {
+        icon: <ICLocked />,
+        type: 'info',
+    },
+    [ToastVariantType.updateAvailable]: {
+        icon: <ICSparkles />,
+        type: 'info',
+    },
+}

src/Assets/Icon/ic-sparkles.svg

@@ -0,0 +1,3 @@
+export { default as ToastManager } from './toastManager.service'
+export { ToastVariantType } from './types'
+export type { ToastProps } from './types'

src/Assets/Icon/ic-success.svg

@@ -0,0 +1,39 @@
+.Toastify__toast-container {
+    padding: 0;
+    width: 320px;
+}
+
+.custom-toast {
+    max-height: none;
+    padding: 12px;
+    box-shadow: none;
+    border-radius: 4px;
+    margin-bottom: 16px;
+    min-height: 0;
+    color: var(--N0);
+    background: #1B1C1E;
+    font-family: inherit;
+
+    &__body {
+        margin: 0;
+        padding: 0;
+        gap: 8px;
+        align-items: flex-start;
+        align-self: center;
+
+        > .Toastify__toast-icon {
+            margin: 0;
+            width: auto;
+            align-self: flex-start;
+        }
+
+        button {
+            color: var(--N0);
+
+            &:hover, &:active {
+                color: var(--N0);
+            }
+        }
+    }
+    // TODO: fix the styling for progress bar
+}