Add notification for new plugin updates (#147)

* Add notification for new plugin updates and related settings

* Integrate plugin filtering for update notifications

* Remove console

* Update description of mobile notification section in settings tab

Co-authored-by: Steven Swartz <stevenswartz@live.ca>

* Implement update notification suppression to avoid duplicate alerts for the same plugin updates. Store previous updates for comparison and enhance settings description for clarity.

* Fix duplicated notifications after updating a plugin before next period of auto check

* Show update notification immediately when user first enable after starting up the tracker plguin and when there are updates available

* Refactor update notification logic to use Lodash's difference function

---------

Co-authored-by: Steven Swartz <stevenswartz@live.ca>

Author: ckt1031

src/domain/initiatePluginSettings.test.ts

@@ -25,6 +25,7 @@ describe('initiatePluginSettings', () => {
                 },
             },
             showIconOnMobile: !DEFAULT_PLUGIN_SETTINGS.showIconOnMobile,
+            showNotificationOnNewUpdate: !DEFAULT_PLUGIN_SETTINGS.showNotificationOnNewUpdate,
             excludeBetaVersions: !DEFAULT_PLUGIN_SETTINGS.excludeBetaVersions,
             excludeDisabledPlugins: !DEFAULT_PLUGIN_SETTINGS.excludeDisabledPlugins,
             minUpdateCountToShowIcon: DEFAULT_PLUGIN_SETTINGS.minUpdateCountToShowIcon + 1,

src/domain/pluginSettings.ts

@@ -4,6 +4,7 @@ export type PluginSettings = {
     excludeBetaVersions: boolean;
     excludeDisabledPlugins: boolean;
     showIconOnMobile: boolean;
+    showNotificationOnNewUpdate: boolean;
     // Deprecated for minUpdateCountToShowIcon
     hideIconIfNoUpdatesAvailable?: boolean;
     minUpdateCountToShowIcon: number;
@@ -26,6 +27,7 @@ export const DEFAULT_PLUGIN_SETTINGS: PluginSettings = {
     daysToSuppressNewUpdates: 0,
     dismissedVersionsByPluginId: {},
     showIconOnMobile: true,
+    showNotificationOnNewUpdate: false,
     excludeBetaVersions: true,
     excludeDisabledPlugins: false,
     minUpdateCountToShowIcon: 0,

src/main.tsx

@@ -1,8 +1,10 @@
+import { difference } from 'lodash';
 import debounce from 'lodash/debounce';
 import {
     AbstractTextComponent,
     App,
     ItemView,
+    Notice,
     Platform,
     Plugin,
     PluginSettingTab,
@@ -19,6 +21,7 @@ import PluginUpdateManager from './components/PluginUpdateManager';
 import RibbonIcon from './components/RibbonIcon';
 import UpdateStatusIcon from './components/UpdateStatusIcon';
 import initiatePluginSettings from './domain/initiatePluginSettings';
+import pluginFilter from './domain/pluginFilter';
 import { DEFAULT_PLUGIN_SETTINGS, PluginSettings } from './domain/pluginSettings';
 import { RESET_ACTION, store } from './state';
 import { cleanupDismissedPluginVersions } from './state/actionProducers/cleanupDismissedPluginVersions';
@@ -51,6 +54,7 @@ export default class PluginUpdateCheckerPlugin extends Plugin {
     private fileOpenCallback: (file: TFile | null) => any;
     private activeLeafChangeCallback: (leaf: WorkspaceLeaf | null) => any;
     private releasePollingIntervalTimerId: number | undefined;
+    private previousFilteredUpdates: string[] = []; // Store previous updates for comparison
 
     async onload() {
         this.registerView(
@@ -156,6 +160,77 @@ export default class PluginUpdateCheckerPlugin extends Plugin {
         );
     }
 
+    showNotificationOnNewUpdate() {
+        const state = store.getState();
+        const pluginSettings = this.settings;
+        const releases = state.releases.releases;
+        const installed = state.obsidian.pluginManifests;
+        const enabledPlugins = state.obsidian.enabledPlugins;
+
+        const filteredUpdates = pluginFilter(
+            {},
+            pluginSettings,
+            installed,
+            enabledPlugins,
+            releases
+        );
+
+        // If the setting is not enabled or there are no releases, return
+        if (!this.settings.showNotificationOnNewUpdate || filteredUpdates.length === 0) return;
+
+        // Create a list of pluginId-versionNumber to memory.
+        // We will only show notification when there is new different pluginId-versionNumber in the list with the previous one.
+        // This is the only way to avoid showing the notification multiple times without saving to disk
+        // But if this plugin is disabled and re-enabled, the notification will be shown again
+        const currentUpdatesKeys = filteredUpdates.map(
+            (update) => `${update.getPluginId()}-${update.getLatestVersionNumber()}`
+        );
+
+        // If the updates are the same as before, don't show notification
+        // Lodash difference(new, old) will return the new items that are not in the old list.
+        // If the length is 0, it means there is no new update.
+        if (difference(currentUpdatesKeys, this.previousFilteredUpdates).length === 0) {
+            // We still want to update this list
+            // There is a case when user has downgraded any plguin from file system and wanted to check update again.
+            this.previousFilteredUpdates = currentUpdatesKeys;
+            return;
+        }
+
+        // Update the previous updates
+        this.previousFilteredUpdates = currentUpdatesKeys;
+
+        // Convert the string to a fragment to allow for HTML elements
+        const stringToFragment = (string: string) => {
+            const wrapper = document.createElement('template');
+            wrapper.innerHTML = string;
+            return wrapper.content;
+        };
+
+        // Show a notice with a button to view updates for 15 seconds
+        const trackerButtonID = 'tracker-notification-button';
+        new Notice(
+            stringToFragment(
+                `You have ${filteredUpdates.length} plugin update${
+                    filteredUpdates.length > 1 ? 's' : ''
+                } available.<br/><a id="${trackerButtonID}">View Updates</a>`
+            ),
+            15000
+        );
+
+        const buttonEl = document.getElementById(trackerButtonID);
+
+        if (buttonEl) {
+            // Bind the method to preserve the this context when running from top level Redux store middleware
+            buttonEl.addEventListener('click', this.showPluginUpdateManagerView.bind(this));
+
+            // Clean up the button and listener after 15 seconds
+            setTimeout(() => {
+                buttonEl.removeEventListener('click', this.showPluginUpdateManagerView.bind(this));
+                buttonEl.remove();
+            }, 15000);
+        }
+    }
+
     updateRibonIconVisibilty() {
         const isShownOnPlatform = Platform.isMobile || SHOW_RIBBON_ICON_ALL_PLATFORMS;
 
@@ -375,6 +450,26 @@ class PluginUpdateCheckerSettingsTab extends PluginSettingTab {
                     )
                     .setDynamicTooltip()
             );
+        new Setting(containerEl)
+            .setName('Show Notification on New Update')
+            .setDesc(
+                'Show a notification when a new update is available. Useful on mobile since the plugin update icon is less visible.'
+            )
+            .addToggle((toggle) =>
+                toggle
+                    .setValue(this.plugin.settings.showNotificationOnNewUpdate)
+                    .onChange(async (showNotificationOnNewUpdate) => {
+                        await this.plugin.saveSettings({
+                            ...this.plugin.settings,
+                            showNotificationOnNewUpdate,
+                        });
+
+                        if (showNotificationOnNewUpdate) {
+                            // Show notification immediately
+                            this.plugin.showNotificationOnNewUpdate();
+                        }
+                    })
+            );
         new Setting(containerEl)
             .setName('Show on Mobile')
             .setDesc(

src/state/actionProducers/dismissPluginVersions.ts

@@ -6,7 +6,7 @@ import { State } from '..';
 import {
     DismissedPluginVersion,
     PluginDismissedVersions,
-    PluginSettings,
+    PluginSettings
 } from '../../domain/pluginSettings';
 import { groupById } from '../../domain/util/groupById';
 import { ObsidianState } from '../obsidianReducer';

src/state/actionProducers/showUpdateNotification.ts

@@ -0,0 +1,23 @@
+import PluginUpdateCheckerPlugin from 'src/main';
+import { store } from '..';
+import { ObsidianApp } from '../obsidianReducer';
+import { fetchReleases } from './fetchReleases';
+
+export const showUpdateNotificationMiddleware = () => (next: any) => (action: any) => {
+    const result = next(action);
+
+    if (action.type === fetchReleases.fulfilled.type) {
+        const state = store.getState();
+        const thisPluginId = state.obsidian.thisPluginId;
+
+        const app = window.app as ObsidianApp;
+        const plugin = app.plugins?.plugins?.[thisPluginId] as PluginUpdateCheckerPlugin;
+
+        if (plugin) {
+            // Bind the method to preserve the this context
+            plugin.showNotificationOnNewUpdate.bind(plugin)();
+        }
+    }
+
+    return result;
+};

src/state/index.ts

@@ -1,6 +1,7 @@
 import { AnyAction, combineReducers, configureStore, ThunkAction } from '@reduxjs/toolkit';
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
 import logger from 'redux-logger';
+import { showUpdateNotificationMiddleware } from './actionProducers/showUpdateNotification';
 import ObsidianReducer, { ObsidianState } from './obsidianReducer';
 import ReleaseReducer, { ReleaseState } from './releasesReducer';
 
@@ -19,10 +20,12 @@ export const store = configureStore({
         return reducers(state, action);
     },
     middleware: (getDefaultMiddleware) => {
+        const middleware = getDefaultMiddleware();
         if (process.env.OBSIDIAN_APP_ENABLE_REDUX_LOGGER === 'true') {
-            return getDefaultMiddleware().concat(logger);
+            middleware.push(logger);
         }
-        return getDefaultMiddleware();
+        middleware.push(showUpdateNotificationMiddleware);
+        return middleware;
     },
 });