Add a toast message on start for dependency updates (#2453)

chaiNNer-org · Jan 12, 2024 · 3e00f94 · 3e00f94
1 parent 6f2d3aa
commit 3e00f94
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git a/src/common/locales/en/translation.json b/src/common/locales/en/translation.json
@@ -5,7 +5,9 @@
     }
   },
   "dependencyManager": {
-    "manageDependencies": "Manage Dependencies"
+    "manageDependencies": "Manage Dependencies",
+    "updatesAvailable": "Updates Available",
+    "updatesAvailableDescription": "There are {{count}} updates available for your dependencies."
   },
   "error": {
     "error": "Error",

diff --git a/src/renderer/components/DependencyManagerButton.tsx b/src/renderer/components/DependencyManagerButton.tsx
@@ -1,6 +1,6 @@
 import { DownloadIcon } from '@chakra-ui/icons';
-import { IconButton, Tag, TagLabel, Tooltip, VStack } from '@chakra-ui/react';
-import { memo } from 'react';
+import { IconButton, Tag, TagLabel, Tooltip, VStack, useToast } from '@chakra-ui/react';
+import { memo, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useContext } from 'use-context-selector';
 import { DependencyContext } from '../contexts/DependencyContext';
@@ -10,6 +10,34 @@ export const DependencyManagerButton = memo(() => {
 
     const { openDependencyManager, availableUpdates } = useContext(DependencyContext);
 
+    const toast = useToast();
+
+    const shownOnce = useRef(false);
+    useEffect(() => {
+        if (shownOnce.current) {
+            return;
+        }
+
+        if (availableUpdates > 0) {
+            toast({
+                title: t('dependencyManager.updatesAvailable', 'Updates Available'),
+                description: t(
+                    'dependencyManager.updatesAvailableDescription',
+                    'There are {{count}} packages with available dependency updates.',
+                    { count: availableUpdates }
+                ),
+                status: 'info',
+                duration: 5000,
+                isClosable: true,
+                position: 'top-right',
+                onCloseComplete: () => {
+                    shownOnce.current = false;
+                },
+            });
+            shownOnce.current = true;
+        }
+    }, [availableUpdates, t, toast]);
+
     return (
         <Tooltip
             closeOnClick
@@ -26,7 +54,7 @@ export const DependencyManagerButton = memo(() => {
                 {availableUpdates > 0 ? (
                     <Tag
                         borderRadius="full"
-                        colorScheme="red"
+                        colorScheme="blue"
                         ml={-7}
                         mt={-1}
                         position="fixed"