fix: add reload icon in update available toast

Author: eshankvaish

src/App.tsx

@@ -16,7 +16,7 @@
 
 import { lazy, Suspense, useRef, useState, useEffect } from 'react'
 import { Route, Switch, Redirect, useHistory, useLocation } from 'react-router-dom'
-import './css/application.scss';
+import './css/application.scss'
 import {
     showError,
     BreadcrumbStore,
@@ -26,9 +26,10 @@ import {
     useUserEmail,
     URLS as CommonURLS,
     ToastManager,
-    ToastVariantType
+    ToastVariantType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as ICSparkles } from '@Icons/ic-sparkles.svg'
+import { ReactComponent as ICArrowClockwise } from '@Icons/ic-arrow-clockwise.svg'
 import { useRegisterSW } from 'virtual:pwa-register/react'
 import {
     useOnline,
@@ -78,19 +79,22 @@ export default function App() {
     useEffect(() => {
         if (didMountRef.current) {
             if (!isOnline) {
+                onlineToast(
+                    {
+                        variant: ToastVariantType.error,
+                        title: 'You are offline!',
+                        description: 'You are not seeing real-time data and any changes you make will not be saved.',
+                    },
+                    {
+                        autoClose: false,
+                    },
+                )
+            } else {
                 onlineToast({
-                    variant: ToastVariantType.error,
-                    title: 'You are offline!',
-                    description: 'You are not seeing real-time data and any changes you make will not be saved.',
-                }, {
-                    autoClose: false
+                    variant: ToastVariantType.success,
+                    title: 'Connected!',
+                    description: "You're back online.",
                 })
-            } else {
-                 onlineToast({
-                     variant: ToastVariantType.success,
-                     title: 'Connected!',
-                     description: "You're back online.",
-                 })
             }
         } else {
             didMountRef.current = true
@@ -245,6 +249,7 @@ export default function App() {
                     text: 'Reload',
                     dataTestId: 'reload-btn',
                     onClick: update,
+                    startIcon: <ICArrowClockwise />,
                 },
                 icon: <ICSparkles />,
                 progressBarBg: UPDATE_AVAILABLE_TOAST_PROGRESS_BG,
@@ -281,6 +286,7 @@ export default function App() {
                     text: 'Reload',
                     dataTestId: 'reload-btn',
                     onClick: reloadLocation,
+                    startIcon: <ICArrowClockwise />,
                 },
                 icon: <ICSparkles />,
                 progressBarBg: UPDATE_AVAILABLE_TOAST_PROGRESS_BG,

src/components/v2/devtronStackManager/DevtronStackManager.service.tsx

@@ -16,6 +16,7 @@
 
 import { get, post, ToastManager, ToastVariantType } from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as ICSparkles } from '@Icons/ic-sparkles.svg'
+import { ReactComponent as ICArrowClockwise } from '@Icons/ic-arrow-clockwise.svg'
 import { ModuleNameMap, Routes, UPDATE_AVAILABLE_TOAST_PROGRESS_BG } from '../../../config'
 import {
     AllModuleInfoResponse,
@@ -110,6 +111,7 @@ export const getModuleInfo = async (moduleName: string, forceReload?: boolean):
                     text: 'Reload',
                     dataTestId: 'reload-button',
                     onClick: reloadLocation,
+                    startIcon: <ICArrowClockwise />,
                 },
                 icon: <ICSparkles />,
                 progressBarBg: UPDATE_AVAILABLE_TOAST_PROGRESS_BG,

src/stories/ToastManager.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
 import { Button, ToastManager, ToastVariantType } from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as ICArrowClockwise } from '@Icons/ic-arrow-clockwise.svg'
 import { ReactComponent as ICSparkles } from '@Icons/ic-sparkles.svg'
@@ -65,6 +66,7 @@ export const WithButton: Story = {
                 dataTestId: 'button',
                 text: 'Reload',
                 startIcon: <ICArrowClockwise />,
+                onClick: action('Reload clicked'),
             },
         },
     },
@@ -100,6 +102,9 @@ export const CustomIconAndProgressBar: Story = {
             ...Default.args.toastProps,
             icon: <ICSparkles />,
             progressBarBg: UPDATE_AVAILABLE_TOAST_PROGRESS_BG,
+            buttonProps: {
+                ...WithButton.args.toastProps.buttonProps,
+            },
         },
     },
 }