feat: re-adding in-app messages

Signed-off-by: Pawel Psztyc <[email protected]>

Author: jarrodek

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
   "cSpell.words": [
     "Renderable",
+    "actionurl",
     "advancedrestclient",
     "appresources",
     "arccontextmenu",

package-lock.json

@@ -41,6 +41,7 @@
     "@advanced-rest-client/arc-icons": "^3.2.2",
     "@advanced-rest-client/arc-ie": "^1.0.3",
     "@advanced-rest-client/arc-menu": "^4.0.3",
+    "@advanced-rest-client/arc-messages": "^0.1.0",
     "@advanced-rest-client/arc-models": "^4.2.8",
     "@advanced-rest-client/arc-request-ui": "^0.1.9",
     "@advanced-rest-client/arc-settings": "^0.1.2",
@@ -52,7 +53,7 @@
     "@advanced-rest-client/request-engine": "^0.1.10",
     "@advanced-rest-client/requests-list": "^0.1.8",
     "@anypoint-web-components/anypoint-button": "^1.1.1",
-    "@anypoint-web-components/anypoint-dialog": "^0.1.6",
+    "@anypoint-web-components/anypoint-dialog": "^0.1.7",
     "@anypoint-web-components/anypoint-item": "^1.1.0",
     "@anypoint-web-components/anypoint-switch": "^0.1.4",
     "@open-wc/dedupe-mixin": "^1.3.0",
@@ -425,7 +426,11 @@
       "@advanced-rest-client/exchange-search-panel/*.js",
       "@advanced-rest-client/exchange-search-panel/*.d.ts",
       "@advanced-rest-client/exchange-search-panel/src/*.js",
-      "@advanced-rest-client/exchange-search-panel/src/*.d.ts"
+      "@advanced-rest-client/exchange-search-panel/src/*.d.ts",
+      "@advanced-rest-client/arc-messages/*.js",
+      "@advanced-rest-client/arc-messages/*.d.ts",
+      "@advanced-rest-client/arc-messages/src/*.js",
+      "@advanced-rest-client/arc-messages/src/*.d.ts"
     ]
   }
 }

package.json

@@ -5,6 +5,7 @@ import { html } from '../../../../web_modules/lit-html/lit-html.js';
 import { MonacoLoader } from '../../../../web_modules/@advanced-rest-client/monaco-support/index.js';
 import { ArcNavigationEventTypes, ProjectActions, ConfigEventTypes, DataImportEventTypes, WorkspaceEvents, ImportEvents, WorkspaceEventTypes, ArcNavigationEvents, RestApiEventTypes } from '../../../../web_modules/@advanced-rest-client/arc-events/index.js';
 import { ArcModelEvents, ArcModelEventTypes, ImportFactory, ImportNormalize, isSingleRequest } from '../../../../web_modules/@advanced-rest-client/arc-models/index.js';
+import { ArcMessagingService } from '../../../../web_modules/@advanced-rest-client/arc-messages/index.js';
 import { ModulesRegistry, RequestCookies } from '../../../../web_modules/@advanced-rest-client/request-engine/index.js';
 import { classMap } from '../../../../web_modules/lit-html/directives/class-map.js';
 import { styleMap } from '../../../../web_modules/lit-html/directives/style-map.js';
@@ -43,6 +44,7 @@ import '../../../../web_modules/@api-components/api-navigation/api-navigation.js
 import '../../../../web_modules/@advanced-rest-client/exchange-search-panel/exchange-search-panel.js';
 // import '../../../../web_modules/@api-components/api-request-panel/api-request-panel.js';
 // import '../../../../web_modules/@api-components/api-documentation/api-documentation.js';
+import '../../../../web_modules/@advanced-rest-client/arc-messages/arc-messages-dialog.js';
 import { Request } from './Request.js';
 import { ContextMenu } from '../context-menu/ContextMenu.js';
 import { ContextMenuStyles } from '../context-menu/ContextMenu.styles.js';
@@ -145,6 +147,9 @@ const arcNavigationTemplate = Symbol('arcNavigationTemplate');
 const exchangeSearchTemplate = Symbol('exchangeSearchTemplate');
 const exchangeSelectionHandler = Symbol('exchangeSelectionHandler');
 const themeActivateHandler = Symbol('themeActivateHandler');
+const unreadMessagesTemplate = Symbol('unreadMessagesTemplate');
+const appMessagesDialogTemplate = Symbol('appMessagesDialogTemplate');
+const openMessagesHandler = Symbol('openMessagesHandler');
 
 /**
  * A routes that does not go through the router and should not be remembered in the history.
@@ -268,6 +273,11 @@ export class AdvancedRestClientApplication extends ApplicationPage {
 
   ga = new GoogleAnalytics();
 
+  /**
+   * A service that requests fro the data from the ARC server fore new messages.
+   */
+  appMessages = new ArcMessagingService('electron');
+
   /**
    * @returns {ArcRequestWorkspaceElement}
    */
@@ -323,6 +333,7 @@ export class AdvancedRestClientApplication extends ApplicationPage {
       'workspaceSendButton', 'workspaceProgressInfo', 'workspaceBodyEditor', 'workspaceAutoEncode',
       'navigationWidth',
       'requestDetailsOpened', 'requestMetaOpened', 'metaRequestId', 'metaRequestType',
+      'unreadAppMessages', 'applicationMessages',
     );
 
     /** 
@@ -421,6 +432,11 @@ export class AdvancedRestClientApplication extends ApplicationPage {
     this.requestMetaOpened = false;
     this.metaRequestId = undefined;
     this.metaRequestType = undefined;
+    
+    /** 
+     * @type {number} The number of unread messages in the application.
+     */
+    this.unreadAppMessages = 0;
   }
 
   async initialize() {
@@ -455,6 +471,7 @@ export class AdvancedRestClientApplication extends ApplicationPage {
     await this.afterInitialization();
     await this.loadMonaco();
     this.initializing = false;
+    this.unreadAppMessages = await this.appMessages.run();
   }
 
   /**
@@ -518,6 +535,7 @@ export class AdvancedRestClientApplication extends ApplicationPage {
         this.listType = cnf.view.listType;
       }
     }
+
     if (cnf.requestEditor) {
       if (typeof cnf.requestEditor.sendButton === 'boolean') {
         this.workspaceSendButton = cnf.requestEditor.sendButton;
@@ -532,6 +550,13 @@ export class AdvancedRestClientApplication extends ApplicationPage {
         this.workspaceAutoEncode = cnf.requestEditor.autoEncode;
       }
     }
+
+    if (cnf.updater) {
+      const { channel } = cnf.updater;
+      if (typeof channel === 'string') {
+        this.appMessages.channel = channel;
+      }
+    }
   }
 
   /**
@@ -841,6 +866,7 @@ export class AdvancedRestClientApplication extends ApplicationPage {
       case 'export-workspace': this.exportWorkspace(); break;
       case 'login-external-webservice': this.workspaceElement.openWebUrlInput(); break;
       case 'open-workspace-details': this.workspaceElement.openWorkspaceDetails(); break;
+      case 'open-messages': this.openAppMessages(); break;
       default:
         this.logger.warn(`Unhandled IO command ${action}`);
     }
@@ -1306,6 +1332,20 @@ export class AdvancedRestClientApplication extends ApplicationPage {
     this.compatibility = e.detail === ThemeManager.anypointTheme;
   }
 
+  [openMessagesHandler]() {
+    this.openAppMessages();
+  }
+
+  async openAppMessages() {
+    if (!this.applicationMessages) {
+      this.applicationMessages = await this.appMessages.readMessages();
+    }
+    const dialog = document.querySelector('arc-messages-dialog');
+    dialog.opened = true;
+    await this.appMessages.markAllRead();
+    this.unreadAppMessages = 0;
+  }
+
   appTemplate() {
     const { initializing } = this;
     if (initializing) {
@@ -1320,6 +1360,7 @@ export class AdvancedRestClientApplication extends ApplicationPage {
       ${this[navigationTemplate]()}
       ${this[pageTemplate](this.route)}
     </div>
+    ${this[appMessagesDialogTemplate]()}
     `;
   }
 
@@ -1345,15 +1386,30 @@ export class AdvancedRestClientApplication extends ApplicationPage {
     <header>
       ${isWorkspace ? '' : 
       html`
-      <anypoint-icon-button title="Back to the request workspace" @click="${this[mainBackHandler]}">
+      <anypoint-icon-button title="Back to the request workspace" @click="${this[mainBackHandler]}"  class="header-action-button">
         <arc-icon icon="arrowBack"></arc-icon>
       </anypoint-icon-button>`}
       API Client
       <span class="spacer"></span>
+      ${this[unreadMessagesTemplate]()}
       ${this[environmentTemplate]()}
     </header>`;
   }
 
+  /**
+   * @returns {TemplateResult|string} The template for the unread notifications icon button
+   */
+  [unreadMessagesTemplate]() {
+    const { unreadAppMessages } = this;
+    if (!unreadAppMessages) {
+      return '';
+    }
+    return html`
+    <anypoint-icon-button title="You have unread messages" class="header-action-button" @click="${this[openMessagesHandler]}">
+      <arc-icon icon="notificationsActive"></arc-icon>
+    </anypoint-icon-button>`;
+  }
+
   /**
    * @returns {TemplateResult|string} The template for the environment selector and the overlay.
    */
@@ -1726,4 +1782,16 @@ export class AdvancedRestClientApplication extends ApplicationPage {
     ></exchange-search-panel>
     `;
   }
+
+  /**
+   * @returns {TemplateResult} The template for the dialog with application messages
+   */
+  [appMessagesDialogTemplate]() {
+    return html`
+    <arc-messages-dialog
+      .messages="${this.applicationMessages}"
+      ?compatibility="${this.compatibility}"
+      modal
+    ></arc-messages-dialog>`;
+  }
 }

src/app/scripts/arc/AdvancedRestClientApplication.js

@@ -66,6 +66,14 @@ header {
   box-sizing: border-box;
 }
 
+.header-action-button {
+  margin-right: 8px;
+}
+
+.header-action-button arc-icon {
+  color: var(--arc-toolbar-color);
+}
+
 main {
   flex: 1;
   display: flex;

src/app/styles/common.css

@@ -351,6 +351,10 @@
           "label": "Frequently Asked Questions",
           "command": "application:open-faq"
         },
+        {
+          "label": "What's new",
+          "command": "application:open-messages"
+        },
         {
           "type": "separator"
         },

src/menus/darwin.json

@@ -324,6 +324,10 @@
           "label": "Frequently Asked Questions",
           "command": "application:open-faq"
         },
+        {
+          "label": "What's new",
+          "command": "application:open-messages"
+        },
         {
           "type": "separator"
         },

src/menus/linux.json

@@ -324,6 +324,10 @@
           "label": "Frequently Asked Questions",
           "command": "application:open-faq"
         },
+        {
+          "label": "What's new",
+          "command": "application:open-messages"
+        },
         {
           "type": "separator"
         },