refactor: replace react toastify with ToastManager.showToast

eshankvaish · eshankvaish · commit e0a6615d1daa · 2024-09-11T12:48:08.000+05:30
diff --git a/.eslintrc.cjs b/.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.',
+                            }
+                        ],
+                    },
+                ],
             },
         },
     ],
diff --git a/src/Common/DeleteComponentModal/DeleteComponent.tsx b/src/Common/DeleteComponentModal/DeleteComponent.tsx
@@ -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)
diff --git a/src/Common/GenericDescription/GenericDescription.tsx b/src/Common/GenericDescription/GenericDescription.tsx
@@ -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
diff --git a/src/Common/Helper.tsx b/src/Common/Helper.tsx
@@ -21,13 +21,11 @@ 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'
 
 export function showError(serverError, showToastOnUnknownError = true, hideAccessError = false) {
@@ -38,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 {
@@ -51,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',
+                })
             }
         }
     }
@@ -454,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)
diff --git a/src/Common/ImageTags.tsx b/src/Common/ImageTags.tsx
@@ -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)
diff --git a/src/Common/ToastBody.tsx b/src/Common/ToastBody.tsx
diff --git a/src/Common/index.ts b/src/Common/index.ts
@@ -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'
diff --git a/src/Pages/GlobalConfigurations/BuildInfra/utils.tsx b/src/Pages/GlobalConfigurations/BuildInfra/utils.tsx
@@ -15,7 +15,6 @@
  */
 
 import { FormEvent, useEffect, useState } from 'react'
-import { toast } from 'react-toastify'
 import { showError, useAsync } from '../../../Common'
 import { getBuildInfraProfileByName, createBuildInfraProfile, updateBuildInfraProfile } from './services'
 import {
@@ -43,6 +42,8 @@ import {
     validateRequiredPositiveNumber,
     getCommonSelectStyle,
     validateRequiredPositiveInteger,
+    ToastVariantType,
+    ToastManager,
 } from '../../../Shared'
 
 export const validateRequestLimit = ({
@@ -419,7 +420,10 @@ export const useBuildInfraForm = ({
             ).length > 0
 
         if (hasErrors) {
-            toast.error(BUILD_INFRA_TEXT.INVALID_FORM_MESSAGE)
+            ToastManager.showToast({
+                variant: ToastVariantType.error,
+                description: BUILD_INFRA_TEXT.INVALID_FORM_MESSAGE,
+            })
             return
         }
 
@@ -431,7 +435,10 @@ export const useBuildInfraForm = ({
                 await createBuildInfraProfile({ profileInput })
             }
             setLoadingActionRequest(false)
-            toast.success(BUILD_INFRA_TEXT.getSubmitSuccessMessage(profileInput.name, editProfile))
+            ToastManager.showToast({
+                variant: ToastVariantType.success,
+                description: BUILD_INFRA_TEXT.getSubmitSuccessMessage(profileInput.name, editProfile),
+            })
 
             if (handleSuccessRedirection) {
                 handleSuccessRedirection()
diff --git a/src/Shared/Components/BulkSelection/BulkSelectionProvider.tsx b/src/Shared/Components/BulkSelection/BulkSelectionProvider.tsx
@@ -15,7 +15,7 @@
  */
 
 import { createContext, useContext, useMemo, useState } from 'react'
-import { toast } from 'react-toastify'
+import { ToastManager, ToastVariantType } from '@Shared/Services'
 import {
     BULK_SELECTION_CONTEXT_ERROR,
     CLEAR_SELECTIONS_WARNING,
@@ -92,7 +92,10 @@ export const BulkSelectionProvider = <T,>({
                 break
 
             case BulkSelectionEvents.CLEAR_IDENTIFIERS_AFTER_ACROSS_SELECTION: {
-                toast.info(CLEAR_SELECTIONS_WARNING)
+                ToastManager.showToast({
+                    variant: ToastVariantType.info,
+                    description: CLEAR_SELECTIONS_WARNING,
+                })
                 setIdentifiersAfterClear(identifiers, selectedIds)
                 break
             }
@@ -128,7 +131,10 @@ export const BulkSelectionProvider = <T,>({
 
             case BulkSelectionEvents.SELECT_ALL_ON_PAGE: {
                 if (selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]) {
-                    toast.info(CLEAR_SELECTIONS_WARNING)
+                    ToastManager.showToast({
+                        variant: ToastVariantType.info,
+                        description: CLEAR_SELECTIONS_WARNING,
+                    })
                 }
 
                 setIdentifiersAfterPageSelection(identifiers)
diff --git a/src/Shared/Components/CICDHistory/TriggerOutput.tsx b/src/Shared/Components/CICDHistory/TriggerOutput.tsx
@@ -17,7 +17,6 @@
 import { Redirect, Route, Switch, useLocation, useParams, useRouteMatch, Link, NavLink } from 'react-router-dom'
 import React, { useEffect, useMemo, useState } from 'react'
 import moment from 'moment'
-import { toast } from 'react-toastify'
 import { ShowMoreText } from '@Shared/Components/ShowMoreText'
 import { getHandleOpenURL } from '@Shared/Helpers'
 import { ImageChipCell } from '@Shared/Components/ImageChipCell'
@@ -26,6 +25,7 @@ import { ReactComponent as ICLines } from '@Icons/ic-lines.svg'
 import { ReactComponent as ICPulsateStatus } from '@Icons/ic-pulsate-status.svg'
 import { ReactComponent as ICArrowRight } from '@Icons/ic-arrow-right.svg'
 import { getDeploymentStageTitle } from '@Pages/App'
+import { ToastManager, ToastVariantType } from '@Shared/Services'
 import {
     ConfirmationDialog,
     DATE_TIME_FORMATS,
@@ -164,7 +164,10 @@ const ProgressingStatus = React.memo(({ status, stage, type }: ProgressingStatus
         setAborting(true)
         try {
             await abort(abortError.status)
-            toast.success('Build Aborted')
+            ToastManager.showToast({
+                variant: ToastVariantType.success,
+                description: 'Build Aborted',
+            })
             setAbortConfirmation(false)
             setAbortError({
                 status: false,
diff --git a/src/Shared/Components/EditImageFormField/EditImageFormField.tsx b/src/Shared/Components/EditImageFormField/EditImageFormField.tsx
@@ -1,9 +1,9 @@
 import { KeyboardEvent, SyntheticEvent, useState } from 'react'
-import { toast } from 'react-toastify'
 import { showError } from '@Common/Helper'
 import { CustomInput } from '@Common/CustomInput'
 import { ButtonWithLoader, ImageWithFallback } from '@Shared/Components'
 import { validateIfImageExist, validateURL } from '@Shared/validations'
+import { ToastManager, ToastVariantType } from '@Shared/Services'
 import { ReactComponent as ICPencil } from '@Icons/ic-pencil.svg'
 import { EditImageFormFieldProps, FallbackImageProps } from './types'
 import {
@@ -101,12 +101,18 @@ const EditImageFormField = ({
         if (!url) {
             // Not setting the error since can save without image
             setEmptyPreviewURLErrorMessage(EMPTY_PREVIEW_URL_ERROR_MESSAGE)
-            toast.error(EMPTY_PREVIEW_URL_ERROR_MESSAGE)
+            ToastManager.showToast({
+                variant: ToastVariantType.error,
+                description: EMPTY_PREVIEW_URL_ERROR_MESSAGE,
+            })
             return
         }
 
         if (errorMessage) {
-            toast.error(errorMessage)
+            ToastManager.showToast({
+                variant: ToastVariantType.error,
+                description: errorMessage,
+            })
             return
         }
 
diff --git a/src/Shared/Hooks/UseDownload/UseDownload.tsx b/src/Shared/Hooks/UseDownload/UseDownload.tsx
diff --git a/src/Shared/Services/ToastManager/constants.tsx b/src/Shared/Services/ToastManager/constants.tsx
diff --git a/src/Shared/Services/ToastManager/toastManager.service.tsx b/src/Shared/Services/ToastManager/toastManager.service.tsx
