Merge pull request #296 from devtron-labs/feat/toast-manager

feat: add generic service for managing toasts

Author: eshankvaish

.eslintrc.cjs

@@ -108,13 +108,24 @@ module.exports = {
         'import/no-cycle': 'off',
         'import/prefer-default-export': 'off',
         'no-restricted-exports': 'off',
-        'import/named': 'off'
+        'import/named': 'off',
     },
     overrides: [
         {
             files: ['*.ts', '*.tsx'],
             rules: {
                 'no-undef': 'off',
+                'no-restricted-imports': [
+                    'error',
+                    {
+                        paths: [
+                            {
+                                name: 'react-toastify',
+                                message: 'Please use "ToastManager.showToast" instead.',
+                            }
+                        ],
+                    },
+                ],
             },
         },
     ],

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.3.2",
+    "version": "0.3.3",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -64,7 +64,7 @@
         "prettier": "^3.1.1",
         "react-ga4": "^1.4.1",
         "react-mde": "^11.5.0",
-        "react-toastify": "^8.2.0",
+        "react-toastify": "9.1.3",
         "typescript": "5.5.4",
         "vite": "5.4.2",
         "vite-plugin-dts": "4.0.3",

package.json

@@ -16,11 +16,11 @@
 
 import React, { useState } from 'react'
 import { useHistory } from 'react-router-dom'
-import { toast } from 'react-toastify'
 import info from '../../Assets/Icon/ic-info-filled.svg'
 import { ConfirmationDialog, DeleteDialog } from '../Dialogs'
 import { ServerErrors } from '../ServerError'
 import { DeleteComponentProps } from './types'
+import { ToastManager, ToastVariantType } from '@Shared/Services'
 
 const DeleteComponent = ({
     setDeleting,
@@ -43,7 +43,10 @@ const DeleteComponent = ({
         setDeleting(true)
         try {
             await deleteComponent(payload)
-            toast.success('Successfully deleted')
+            ToastManager.showToast({
+                variant: ToastVariantType.success,
+                description: 'Successfully deleted',
+            })
             toggleConfirmation(false)
             if (redirectTo) {
                 push(url)

src/Assets/Icon/ic-error.svg

@@ -18,7 +18,6 @@ import { useState, useRef, useEffect } from 'react'
 import Tippy from '@tippyjs/react'
 import ReactMde from 'react-mde'
 import 'react-mde/lib/styles/css/react-mde-all.css'
-import { toast } from 'react-toastify'
 import moment from 'moment'
 import Markdown from '../Markdown/MarkDown'
 import { DATE_TIME_FORMATS, deepEqual, showError } from '..'
@@ -31,7 +30,7 @@ import {
     MARKDOWN_EDITOR_COMMAND_TITLE,
     MARKDOWN_EDITOR_COMMAND_ICON_TIPPY_CONTENT,
 } from '../Markdown/constant'
-import { ButtonWithLoader } from '../../Shared'
+import { ButtonWithLoader, ToastManager, ToastVariantType } from '../../Shared'
 import { ReactComponent as HeaderIcon } from '../../Assets/Icon/ic-header.svg'
 import { ReactComponent as BoldIcon } from '../../Assets/Icon/ic-bold.svg'
 import { ReactComponent as ItalicIcon } from '../../Assets/Icon/ic-italic.svg'
@@ -73,7 +72,10 @@ const GenericDescription = ({
     const validateDescriptionText = (description: string): boolean => {
         let isValid = true
         if (description.length === 0) {
-            toast.error(DESCRIPTION_EMPTY_ERROR_MSG)
+            ToastManager.showToast({
+                variant: ToastVariantType.error,
+                description: DESCRIPTION_EMPTY_ERROR_MSG,
+            })
             isValid = false
         }
         return isValid

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

@@ -21,26 +21,13 @@ import { components } from 'react-select'
 import * as Sentry from '@sentry/browser'
 import moment from 'moment'
 import { useLocation } from 'react-router-dom'
-import { toast } from 'react-toastify'
 import YAML from 'yaml'
-import { ERROR_EMPTY_SCREEN, SortingOrder, EXCLUDED_FALSY_VALUES, DISCORD_LINK, ZERO_TIME_STRING } from './Constants'
+import { ERROR_EMPTY_SCREEN, SortingOrder, EXCLUDED_FALSY_VALUES, DISCORD_LINK, ZERO_TIME_STRING, TOAST_ACCESS_DENIED } from './Constants'
 import { ServerErrors } from './ServerError'
-import { toastAccessDenied } from './ToastBody'
 import { AsyncOptions, AsyncState, UseSearchString } from './Types'
-import { scrollableInterface, DATE_TIME_FORMAT_STRING } from '../Shared'
+import { scrollableInterface, DATE_TIME_FORMAT_STRING, ToastManager, ToastVariantType } 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 }) => {
@@ -49,10 +36,16 @@ export function showError(serverError, showToastOnUnknownError = true, hideAcces
                 (userMessage === ERROR_EMPTY_SCREEN.UNAUTHORIZED || userMessage === ERROR_EMPTY_SCREEN.FORBIDDEN)
             ) {
                 if (!hideAccessError) {
-                    toastAccessDenied()
+                    ToastManager.showToast({
+                        variant: ToastVariantType.notAuthorized,
+                        description: TOAST_ACCESS_DENIED.SUBTITLE,
+                    })
                 }
             } else {
-                toast.error(userMessage || internalMessage)
+                ToastManager.showToast({
+                    variant: ToastVariantType.error,
+                    description: userMessage || internalMessage,
+                })
             }
         })
     } else {
@@ -62,9 +55,15 @@ export function showError(serverError, showToastOnUnknownError = true, hideAcces
 
         if (showToastOnUnknownError) {
             if (serverError.message) {
-                toast.error(serverError.message)
+                ToastManager.showToast({
+                    variant: ToastVariantType.error,
+                    description: serverError.message,
+                })
             } else {
-                toast.error('Some Error Occurred')
+                ToastManager.showToast({
+                    variant: ToastVariantType.error,
+                    description: 'Some Error Occurred',
+                })
             }
         }
     }
@@ -465,7 +464,10 @@ export function copyToClipboard(str, callback = noop) {
                 callback()
             })
             .catch(() => {
-                toast.error('Failed to copy to clipboard')
+                ToastManager.showToast({
+                    variant: ToastVariantType.error,
+                    description: 'Failed to copy to clipboard',
+                })
             })
     } else {
         unsecureCopyToClipboard(str, callback)

src/Assets/Icon/ic-locked.svg

@@ -15,7 +15,6 @@
  */
 
 import { useEffect, useRef, useState } from 'react'
-import { toast } from 'react-toastify'
 import Tippy from '@tippyjs/react'
 import { ReactComponent as Add } from '../Assets/Icon/ic-add.svg'
 import { ReactComponent as Close } from '../Assets/Icon/ic-cross.svg'
@@ -30,7 +29,7 @@ import { ImageButtonType, ImageTaggingContainerType, ReleaseTag } from './ImageT
 import { showError, stopPropagation } from './Helper'
 import { setImageTags } from './Common.service'
 import { Progressing } from './Progressing'
-import { InfoIconTippy } from '../Shared'
+import { InfoIconTippy, ToastManager, ToastVariantType } from '../Shared'
 
 export const ImageTagsContainer = ({
     // Setting it to zero in case of external pipeline
@@ -257,7 +256,10 @@ export const ImageTagsContainer = ({
             .catch((err) => {
                 // Fix toast message
                 if (err.errors?.[0]?.userMessage?.appReleaseTags?.length) {
-                    toast.error(err.errors?.[0]?.internalMessage)
+                    ToastManager.showToast({
+                        variant: ToastVariantType.error,
+                        description: err.errors?.[0]?.internalMessage,
+                    })
                     errorStateHandling(err.errors)
                 } else {
                     showError(err)
@@ -395,7 +397,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-success.svg

@@ -18,7 +18,6 @@ export * from './Constants'
 export * from './ServerError'
 export * from './Types'
 export * from './Api'
-export * from './ToastBody'
 export { default as Reload } from './Reload'
 export { default as ErrorScreenManager } from './ErrorScreenManager'
 export { default as ErrorScreenNotAuthorized } from './ErrorScreenNotAuthorized'