Refactoring notification of successfully copy resource link to be thr…

…ough output emitter.

cypress/e2e/yasr/plugin-table.spec.cy.ts

@@ -175,7 +175,7 @@ describe('Plugin: Table', () => {
          YasrSteps.clickCopyLinkDialogCopyButton();
 
          // Then I expect the value from input to be copied into clipboard.
-         YasrSteps.getMessage().contains('{"code":"resource_link_copied_successfully","type":"success","message":"URL copied successfully to clipboard."}');
+         YasrSteps.getMessage().contains('{"TYPE":"notificationMessage","payload":{"code":"resource_link_copied_successfully","messageType":"success","message":"URL copied successfully to clipboard."}}');
       });
    });
 

ontotext-yasgui-web-component/src/components.d.ts

@@ -15,7 +15,7 @@ import { InternalDownloadAsEvent } from "./models/internal-events/internal-downl
 import { InternalDropdownValueSelectedEvent } from "./models/internal-events/internal-dropdown-value-selected-event";
 import { ExternalYasguiConfiguration, TabQueryModel } from "./models/external-yasgui-configuration";
 import { SavedQueriesData, SavedQueryConfig, SaveQueryData, UpdateQueryData } from "./models/saved-query-configuration";
-import { NotificationMessage, QueryEvent, QueryResponseEvent } from "./models/event";
+import { QueryEvent, QueryResponseEvent } from "./models/event";
 import { OutputEvent } from "./models/output-events/output-event";
 import { ShareQueryDialogConfig } from "./components/share-query-dialog/share-query-dialog";
 export namespace Components {
@@ -353,10 +353,6 @@ declare namespace LocalJSX {
           * Event emitted when saved queries is expected to be loaded by the component client and provided back in order to be displayed.
          */
         "onLoadSavedQueries"?: (event: OntotextYasguiCustomEvent<boolean>) => void;
-        /**
-          * Event emitted when there is a message which the client might want to show to the user or handle in some other way.
-         */
-        "onNotify"?: (event: OntotextYasguiCustomEvent<NotificationMessage>) => void;
         /**
           * Event emitter used to send message to the clients of component.
          */

ontotext-yasgui-web-component/src/components/ontotext-yasgui-web-component/ontotext-yasgui-web-component.tsx

@@ -6,9 +6,6 @@ import {OntotextYasgui} from '../../models/ontotext-yasgui';
 import {
   InternalShowResourceCopyLinkDialogEvent,
   InternalShowSavedQueriesEvent,
-  NotificationMessage,
-  NotificationMessageCode,
-  NotificationMessageType,
   QueryEvent,
   QueryResponseEvent
 } from "../../models/event";
@@ -25,6 +22,7 @@ import {ConfirmationDialogConfig} from "../confirmation-dialog/confirmation-dial
 import {ShareQueryDialogConfig} from '../share-query-dialog/share-query-dialog';
 import {OutputEvent, toOutputEvent} from '../../models/output-events/output-event';
 import {InternalDownloadAsEvent} from '../../models/internal-events/internal-download-as-event';
+import {NotificationMessage, NotificationMessageCode, NotificationMessageType} from '../../models/output-events/notification-message';
 
 /**
  * This is the custom web component which is adapter for the yasgui library. It allows as to
@@ -161,12 +159,6 @@ export class OntotextYasguiWebComponent {
    */
   @Event() loadSavedQueries: EventEmitter<boolean>;
 
-  /**
-   * Event emitted when there is a message which the client might want to show to the user or handle
-   * in some other way.
-   */
-  @Event() notify: EventEmitter<NotificationMessage>;
-
   /**
    * Event emitted when saved query share link has to be build by the client.
    */
@@ -456,8 +448,7 @@ export class OntotextYasguiWebComponent {
   @Listen('internalResourceLinkCopiedEvent')
   resourceLinkCopiedHandler() {
     const resourceCopiedMessage = this.translationService.translate('yasqe.share.copy_link.dialog.copy.message.success');
-    const notificationMessage = new NotificationMessage(NotificationMessageCode.RESOURCE_LINK_COPIED_SUCCESSFULLY, NotificationMessageType.SUCCESS, resourceCopiedMessage);
-    this.notify.emit(notificationMessage);
+    this.output.emit(new NotificationMessage(NotificationMessageCode.RESOURCE_LINK_COPIED_SUCCESSFULLY, NotificationMessageType.SUCCESS, resourceCopiedMessage));
     this.showCopyResourceLinkDialog = false;
     this.copiedResourceLink = undefined;
   }

ontotext-yasgui-web-component/src/components/ontotext-yasgui-web-component/readme.md

@@ -43,7 +43,6 @@ yasgui can be tweaked using the values from the configuration.
 | `createSavedQuery`     | Event emitted when saved query payload is collected and the query should be saved by the component client.                                              | `CustomEvent<SaveQueryData>`                                           |
 | `deleteSavedQuery`     | Event emitted when a saved query should be deleted. In result the client must perform a query delete.                                                   | `CustomEvent<SaveQueryData>`                                           |
 | `loadSavedQueries`     | Event emitted when saved queries is expected to be loaded by the component client and provided back in order to be displayed.                           | `CustomEvent<boolean>`                                                 |
-| `notify`               | Event emitted when there is a message which the client might want to show to the user or handle in some other way.                                      | `CustomEvent<NotificationMessage>`                                     |
 | `output`               | Event emitter used to send message to the clients of component.                                                                                         | `CustomEvent<OutputEvent>`                                             |
 | `queryExecuted`        | Event emitted when before query to be executed.                                                                                                         | `CustomEvent<{ query: string; request: Request; queryMode: string; }>` |
 | `queryResponse`        | Event emitted when after query response is returned.                                                                                                    | `CustomEvent<{ duration: number; }>`                                   |

ontotext-yasgui-web-component/src/models/event.ts

@@ -27,18 +27,3 @@ export class InternalShowResourceCopyLinkDialogEvent {
 
   constructor(public copyLink: string) {}
 }
-
-export enum NotificationMessageType {
-  SUCCESS = 'success',
-  ERROR = 'error',
-  WARNING = 'warning'
-}
-
-export enum NotificationMessageCode {
-  RESOURCE_LINK_COPIED_SUCCESSFULLY = 'resource_link_copied_successfully'
-}
-
-export class NotificationMessage {
-  constructor(public code: NotificationMessageCode, public type: NotificationMessageType, public message: string) {
-  }
-}

ontotext-yasgui-web-component/src/models/output-events/notification-message.ts

@@ -0,0 +1,20 @@
+import {OutputEvent} from './output-event';
+
+export enum NotificationMessageType {
+  SUCCESS = 'success',
+  ERROR = 'error',
+  WARNING = 'warning'
+}
+
+export enum NotificationMessageCode {
+  RESOURCE_LINK_COPIED_SUCCESSFULLY = 'resource_link_copied_successfully'
+}
+
+export class NotificationMessage extends OutputEvent {
+  static OUTPUT_TYPE = 'notificationMessage'
+
+  payload: any;
+  constructor(code: NotificationMessageCode, messageType: NotificationMessageType, message: string) {
+    super(NotificationMessage.OUTPUT_TYPE, {code, messageType, message});
+  }
+}

ontotext-yasgui-web-component/src/pages/yasr-plugins/main.js

@@ -16,7 +16,7 @@ ontoElement.config = {
 };
 
 function attachMessageHandler() {
-  ontoElement.addEventListener('notify', (message) => {
+  ontoElement.addEventListener('output', (message) => {
     const div = document.createElement('div');
     div.innerHTML = `<div id="copy-resourc-link-successfully-message">${JSON.stringify(message.detail)}</div>`;
     document.body.appendChild(div);