Merge pull request #707 from NotePlan:React-Root-MessageBanner

BannerMessage + Root changes

Author: jgclark

dwertheimer.Forms/src/NPTemplateForm.js

@@ -249,7 +249,7 @@ export async function onFormSubmitFromHTMLView(actionType: string, data: any = n
         returnValue = await handleSubmitButtonClick(data, reactWindowData) //update the data to send it back to the React Window
         break
       default:
-        await sendBannerMessage(WEBVIEW_WINDOW_ID, `Plugin received an unknown actionType: "${actionType}" command with data:\n${JSON.stringify(data)}`)
+        await sendBannerMessage(WEBVIEW_WINDOW_ID, `Plugin received an unknown actionType: "${actionType}" command with data:\n${JSON.stringify(data)}`, 'ERROR')
         break
     }
     if (returnValue && returnValue !== reactWindowData) {

dwertheimer.ReactSkeleton/readme.md

@@ -360,9 +360,10 @@ TODO:Insert picture here
     import { sendBannerMessage } from '@helpers/HTMLView'
 
     await sendBannerMessage(
+      windowID,
       `this will display at the top of the screen`,
-      color: string = 'w3-pale-red', /* background color */
-      border: string = 'w3-border-red'
+      type: 'INFO', /* or WARN or ERROR */,
+      2000 /* optional; remove after 2,000ms */
     )
 
 

dwertheimer.ReactSkeleton/src/reactMain.js

@@ -95,7 +95,7 @@ export async function onMessageFromHTMLView(actionType: string, data: any = null
         reactWindowData = await handleSubmitButtonClick(data, reactWindowData) //update the data to send it back to the React Window
         break
       default:
-        await sendBannerMessage(WEBVIEW_WINDOW_ID, `Plugin received an unknown actionType: "${actionType}" command with data:\n${JSON.stringify(data)}`)
+        await sendBannerMessage(WEBVIEW_WINDOW_ID, `Plugin received an unknown actionType: "${actionType}" command with data:\n${JSON.stringify(data)}`, 'ERROR')
         break
     }
     if (reactWindowData) {
@@ -127,9 +127,9 @@ export async function updateReactWindowData(actionType: string, data: any = null
 }
 
 /**
- * An example handler function that is called when someone clicks a button in the React Window
+ * An example handler function that is called when someone clicks a button in the React Window.
  * When someone clicks a "Submit" button in the React Window, it calls the router (onMessageFromHTMLView)
- * which sees the actionType === "onSubmitClick" so it routes to this function for processing
+ * which sees the actionType === "onSubmitClick" so it routes to this function for processing.
  * @param {any} data - the data sent from the React Window for the action 'onSubmitClick'
  * @param {any} reactWindowData - the current data in the React Window
  * @returns {any} - the updated data to send back to the React Window
@@ -141,6 +141,8 @@ async function handleSubmitButtonClick(data: any, reactWindowData: PassedData):
     `Plugin received an actionType: "onSubmitClick" command with data:<br/>${JSON.stringify(
       data,
     )}.<br/>Plugin then fired this message over the bridge to the React window and changed the data in the React window.`,
+    'INFO',
+    2000,
   )
   clo(reactWindowData, `handleSubmitButtonClick: reactWindowData BEFORE update`)
   // change the data in the React window for the row that was clicked (just an example)

dwertheimer.TaskAutomations/src/NPOverdueReact.js

@@ -269,6 +269,7 @@ export async function dropdownChangeReceived(data: { rows: Array<any>, choice: s
           `NotePlan plugin TaskAutomations could not find the paragraph you were editing. This may be a bug. Or perhaps you edited the content in the note before making a change in the popup window? We need to be able to match lines of text, so you should generally do your editing in the popup window when if it is open. If you still think this is a bug, please report it to the developer.\nSearching for: ${JSON.stringify(
             row,
           )}`,
+          'WARN',
         )
       }
     }

helpers/HTMLView.js

@@ -769,14 +769,24 @@ export function replaceMarkdownLinkWithHTMLLink(str: string): string {
  * @return {any} - the result of the runJavaScript call (should be unimportant in this case -- undefined is ok)
  * @author @dwertheimer
  */
-export async function sendToHTMLWindow(windowId: string, actionType: string, data: any = {}, updateInfo: string = ''): any {
+export async function sendToHTMLWindow(
+  windowId: string,
+  actionType: string,
+  data: any = {},
+  updateInfo: string = '',
+): Promise<any> {
   try {
     const windowExists = isHTMLWindowOpen(windowId)
     if (!windowExists) logWarn(`sendToHTMLWindow`, `Window ${windowId} does not exist; setting NPWindowID = undefined`)
     const windowIdToSend = windowExists ? windowId : undefined // for iphone/ipad you have to send undefined
     const dataWithUpdated = {
       ...data,
-      ...{ lastUpdated: { msg: `${actionType}${updateInfo ? ` ${updateInfo}` : ''}`, date: new Date().toLocaleString() } },
+      ...{
+        lastUpdated: {
+          msg: `${actionType}${updateInfo ? ` ${updateInfo}` : ''}`,
+          date: new Date().toLocaleString()
+        },
+      },
       NPWindowID: windowExists ? windowId : undefined,
     }
     // logDebug(`Bridge::sendToHTMLWindow`, `sending type:"${actionType}" payload=${JSON.stringify(data, null, 2)}`)
@@ -879,14 +889,35 @@ export async function updateGlobalSharedData(windowId: string, data: any, mergeD
 }
 
 /**
- * Send a warning message to the HTML window (displays a warning message at the top of page)
+ * Send a warning message to the HTML window (displays a warning message at the top of page). Takes various parameters. Newer version that allows for more easier specifiation of message severity level.
  * @param {string} windowId - the id of the window to send the message to (should be the same as the window's id attribute)
  * @param {string} message - the message to be displayed
- * @param {string} color https://www.w3schools.com/w3css/w3css_colors.asp
- * @param {string} border (left vertical stripe border of box) https://www.w3schools.com/w3css/w3css_colors.asp
+ * @param {string} type - the type of the message: 'INFO', 'WARN', 'ERROR', or 'REMOVE'
+ * @param {number} timeout (optional) - the number of milliseconds to wait before the message disappears
  */
-export async function sendBannerMessage(windowId: string, message: string, color: string = 'w3-pale-red', border: string = 'w3-border-red'): Promise<any> {
-  return await sendToHTMLWindow(windowId, 'SHOW_BANNER', { warn: true, msg: message, color, border })
+export async function sendBannerMessage(windowId: string, message: string, type: string, timeout: number = NaN): Promise<any> {
+  logDebug(`sendBannerMessage`, `message: ${message}, type: ${type}, timeout: ${timeout}`)
+  if (type === 'REMOVE') {
+    return await sendToHTMLWindow(windowId, 'REMOVE_BANNER', {}, '')
+  }
+
+  let colorClass = 'color-error'
+  let borderClass = 'border-error'
+  let icon = 'fa-regular fa-circle-exclamation'
+  switch (type) {
+    case 'INFO':
+      colorClass = 'color-info'
+      borderClass = 'border-info'
+      icon = 'fa-regular fa-circle-info'
+      break
+    case 'WARN':
+      colorClass = 'color-warn'
+      borderClass = 'border-warn'
+      icon = 'fa-regular fa-triangle-exclamation'
+      break
+  }
+  logDebug(`sendBannerMessage`, `colorClass: ${colorClass}, borderClass: ${borderClass}, icon: ${icon}`)
+  return await sendToHTMLWindow(windowId, 'SHOW_BANNER', { type, msg: message, color: colorClass, border: borderClass, icon, timeout }, '')
 }
 
 /**

helpers/paragraph.js

@@ -31,7 +31,6 @@ function caseInsensitiveSubstringMatch(searchTerm: string, textToSearch: string)
     // First need to escape any special characters in the search term
     const escapedSearchTerm = searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
     const re = new RegExp(`${escapedSearchTerm}`, 'i') // = case insensitive match
-    logDebug('caseInsensitiveSubstringMatch', `re: ${re.toString()} / textToSearch: ${textToSearch} / ${String(re.test(textToSearch))}`)
     return re.test(textToSearch)
   } catch (error) {
     logError('paragraph/caseInsensitiveSubstringMatch', `Error matching '${searchTerm}' to '${textToSearch}': ${error.message}`)

jgclark.Dashboard/src/bannerClickHandlers.js

@@ -0,0 +1,58 @@
+// @flow
+//-----------------------------------------------------------------------------
+// bannerClickHandlers.js
+// Handler functions for banner test clicks that come over the bridge.
+// The routing is in pluginToHTMLBridge.js/bridgeClickDashboardItem()
+// Last updated 2025-12-16 for v2.4.0.b2 by @jgclark
+//-----------------------------------------------------------------------------
+
+import { WEBVIEW_WINDOW_ID } from './constants'
+import { handlerResult, setPluginData } from './dashboardHelpers'
+import type { MessageDataObject, TBridgeClickHandlerResult } from './types'
+import { clo, JSP, logDebug, logError, logInfo, logTimer, logWarn, timer } from '@helpers/dev'
+import { sendBannerMessage } from '@helpers/HTMLView'
+
+/********************************************************************************
+ *                                   HANDLERS
+- Handlers should use the standard return type of TBridgeClickHandlerResult
+- handlerResult() can be used to create the result object
+- Types are defined in types.js
+    - type TActionOnReturn = 'UPDATE_CONTENT' | 'REMOVE_LINE' | 'REFRESH_JSON' | 'START_DELAYED_REFRESH_TIMER' etc.
+ *********************************************************************************/
+
+/**
+ * Handle a banner test click
+ * @param {MessageDataObject} data
+ * @returns {TBridgeClickHandlerResult}
+ */
+export async function handleBannerTestClick(
+  data: MessageDataObject,
+): Promise<TBridgeClickHandlerResult> {
+  try {
+    const { actionType, sectionCodes } = data
+    logInfo('handleBannerTestClick', `actionType: ${actionType}`)
+    switch (actionType) {
+      case 'testBannerInfo':
+        await sendBannerMessage(WEBVIEW_WINDOW_ID, `Showing info banner: current sections are ${String(sectionCodes)}`, 'INFO', 5000)
+        break
+      case 'testBannerError':
+        await sendBannerMessage(WEBVIEW_WINDOW_ID, `Test error banner`, 'ERROR')
+        break
+      case 'testBannerWarning':
+        await sendBannerMessage(WEBVIEW_WINDOW_ID, `Test warning banner`, 'WARN')
+        break
+      case 'testRemoveBanner':
+        await sendBannerMessage(WEBVIEW_WINDOW_ID, ``, 'REMOVE')
+        break
+      default:
+        logError('handleBannerTestClick', `Unknown actionType: ${actionType}`)
+        return handlerResult(false)
+    }
+    return handlerResult(true)
+  }
+  catch (error) {
+    logError('handleBannerTestClick', error.message)
+    await sendBannerMessage(WEBVIEW_WINDOW_ID, `Error in handleBannerTestClick: ${error.message}`, 'ERROR')
+    return handlerResult(false)
+  }
+}

jgclark.Dashboard/src/dataGeneration.js

@@ -80,6 +80,8 @@ export async function getSomeSectionsData(
     // logDebug('getSomeSectionsData', `🔹 Starting with ${sectionCodesToGet.toString()} ...`)
     const config: TDashboardSettings = await getDashboardSettings()
 
+    // TODO: change generation order to suit the new custom section display order
+
     let sections: Array<TSection> = []
     if (sectionCodesToGet.includes('INFO')) sections.push(...getInfoSectionData(config, useDemoData))
     // v2: for Timeblocks, now done inside getTodaySectionData()
@@ -91,20 +93,18 @@ export async function getSomeSectionsData(
     if (sectionCodesToGet.includes('M') && config.showMonthSection) sections.push(...getThisMonthSectionData(config, useDemoData, useEditorWherePossible))
     if (sectionCodesToGet.includes('Q') && config.showQuarterSection) sections.push(...getThisQuarterSectionData(config, useDemoData, useEditorWherePossible))
     if (sectionCodesToGet.includes('Y') && config.showYearSection) sections.push(...getThisYearSectionData(config, useDemoData, useEditorWherePossible))
+
     // moderately quick to generate
     if (sectionCodesToGet.includes('PROJ') && config.showProjectSection) {
       logInfo('getSomeSectionsData', `🔹 Getting Project section data as part of ${sectionCodesToGet.toString()}`)
       const projectSection = await getProjectSectionData(config, useDemoData)
       if (projectSection) sections.push(projectSection)
     }
+
     // The rest can all be slow to generate
     if (sectionCodesToGet.includes('SAVEDSEARCH')) sections.push(...(await getSavedSearchResults(config, useDemoData)))
     if (sectionCodesToGet.includes('TAG') && config.tagsToShow) {
-      // v1:
-      // const tagSections = getTaggedSections(config, useDemoData).filter((s) => s) //get rid of any nulls
-      // sections = tagSections.length ? sections.concat(tagSections) : sections
-
-      // v2:
+      // TODO: change so that tags can be generated separately from each other, letting them be specified in the section order component.
       const tagSections = getTagSectionDetails(removeInvalidTagSections(config))
       // clo(tagSections, 'getSomeSectionsData tagSections')
       let index = 0
@@ -168,6 +168,37 @@ export function getInfoSectionData(_config: TDashboardSettings, _useDemoData: bo
     sectionTitleColorPart: 'sidebarInfo',
     sectionItems: items,
     isReferenced: false,
+    // TODO(later): remove this once we have a proper banner system
+    actionButtons: (_config.FFlag_ShowBannerTestButtons ? [
+      {
+        actionName: 'testBannerInfo',
+        actionParam: 'jgclark.Dashboard.main',
+        actionPluginID: `${pluginJson['plugin.id']}`,
+        display: '<i class= "fa-regular fa-info-circle sidebarInfo" ></i> ',
+        tooltip: 'Show an info banner',
+      },
+      {
+        actionName: 'testBannerWarning',
+        actionParam: 'jgclark.Dashboard.main',
+        actionPluginID: `${pluginJson['plugin.id']}`,
+        display: '<i class= "fa-regular fa-triangle-exclamation sidebarInfo" ></i> ',
+        tooltip: 'Show a warning banner',
+      },
+      {
+        actionName: 'testBannerError',
+        actionParam: 'jgclark.Dashboard.main',
+        actionPluginID: `${pluginJson['plugin.id']}`,
+        display: '<i class= "fa-regular fa-circle-exclamation sidebarInfo" ></i> ',
+        tooltip: 'Show an error banner',
+      },
+      {
+        actionName: 'testRemoveBanner',
+        actionParam: 'jgclark.Dashboard.main',
+        actionPluginID: `${pluginJson['plugin.id']}`,
+        display: '<i class= "fa-regular fa-xmark sidebarInfo" ></i> ',
+        tooltip: 'Remove the banner',
+      },
+    ] : []),
   })
   return sections
 }

jgclark.Dashboard/src/dataGenerationDays.js

@@ -186,6 +186,7 @@ export function getTodaySectionData(config: TDashboardSettings, useDemoData: boo
           tooltip: config.rescheduleNotMove
             ? '(Re)Schedule all open items from today to tomorrow. (Press ⌘-click to move instead.)'
             : 'Move all open items from today to tomorrow. (Press ⌘-click to (re)schedule instead.)',
+          // TODO: TEST: does this need a refresh? Will it be caught in other ways?
           actionParam: 'true' /* refresh afterwards */,
           postActionRefresh: ['DT', 'DO'], // refresh 2 sections afterwards
         },

jgclark.Dashboard/src/pluginToHTMLBridge.js

@@ -5,6 +5,7 @@
 //-----------------------------------------------------------------------------
 
 import pluginJson from '../plugin.json'
+import { handleBannerTestClick } from './bannerClickHandlers'
 import {
   doAddItem,
   doAddItemToFuture,
@@ -367,6 +368,25 @@ export async function bridgeClickDashboardItem(data: MessageDataObject) {
         }
         break
       }
+
+      // TODO(later): remove these once we have a proper banner system
+      case 'testBannerInfo': {
+        result = await handleBannerTestClick({ actionType: 'testBannerInfo', sectionCodes: data.sectionCodes })
+        break
+      }
+      case 'testBannerError': {
+        result = await handleBannerTestClick({ actionType: 'testBannerError' })
+        break
+      }
+      case 'testBannerWarning': {
+        result = await handleBannerTestClick({ actionType: 'testBannerWarning' })
+        break
+      }
+      case 'testRemoveBanner': {
+        result = await handleBannerTestClick({ actionType: 'testRemoveBanner' })
+        break
+      }
+
       default: {
         result = {
           success: false,
@@ -410,7 +430,8 @@ async function processActionOnReturn(handlerResultIn: TBridgeClickHandlerResult,
       logDebug('processActionOnReturn', `-> failed handlerResult(false) ${handlerResult.errorMsg || ''}`)
       await sendBannerMessage(
         WEBVIEW_WINDOW_ID,
-        `Sorry; something's gone wrong for "${data.actionType}" ${handlerResult.errorMsg || ''}. This is normally caused by a changing a task in NotePlan since the last time the Dashboard was refreshed. There will be more details in the app's console log.`,
+        `Sorry; something's gone wrong for "${data.actionType}" ${handlerResult.errorMsg || ''}. This is most often caused by changing a task in NotePlan since the last time the Dashboard was refreshed. If it persists, please report it to the developer.`,
+        'WARN',
       )
       return
     }