From 25a058b59ddd7e47261457f658b9a164eca190e9 Mon Sep 17 00:00:00 2001 From: simona-taran <88426876+simona-taran@users.noreply.github.com> Date: Fri, 31 Mar 2023 23:24:19 +0300 Subject: [PATCH] Changed notification implementation (#3863) * Changed notification implementation. Removed unused library notyf and cleanup. * Fixed issue after merge conflict fix. --- .../elsa-workflows-designer/package-lock.json | 11 -- .../elsa-workflows-designer/package.json | 1 - .../src/components.d.ts | 30 +++++ .../workflow-toolbar/workflow-toolbar.tsx | 8 +- .../src/modules/notifications/models.ts | 12 ++ .../notifications/notification-awhile.tsx | 108 +++++++++--------- .../notifications/notification-manager.tsx | 74 ++++-------- .../notifications/notification-service.ts | 57 +++++---- .../notifications/notification-store.ts | 3 +- .../notifications/notification-template.tsx | 78 +++++++++++++ .../modules/notifications/notification.scss | 53 --------- .../modules/notifications/toast-manager.tsx | 23 ++++ .../plugins/workflow-definitions-plugin.tsx | 9 +- 13 files changed, 264 insertions(+), 203 deletions(-) create mode 100644 src/designer/designer_packages/elsa-workflows-designer/src/modules/notifications/notification-template.tsx delete mode 100644 src/designer/designer_packages/elsa-workflows-designer/src/modules/notifications/notification.scss create mode 100644 src/designer/designer_packages/elsa-workflows-designer/src/modules/notifications/toast-manager.tsx diff --git a/src/designer/designer_packages/elsa-workflows-designer/package-lock.json b/src/designer/designer_packages/elsa-workflows-designer/package-lock.json index bc0b2380f..580881f3f 100644 --- a/src/designer/designer_packages/elsa-workflows-designer/package-lock.json +++ b/src/designer/designer_packages/elsa-workflows-designer/package-lock.json @@ -23,7 +23,6 @@ "jwt-decode": "^3.1.2", "lodash": "^4.17.21", "moment": "^2.29.4", - "notyf": "^3.10.0", "reflect-metadata": "^0.1.13", "typedi": "^0.10.0", "uuid": "^9.0.0" @@ -1222,11 +1221,6 @@ "node": ">=0.10.0" } }, - "node_modules/notyf": { - "version": "3.10.0", - "resolved": "https://registry.npmjs.org/notyf/-/notyf-3.10.0.tgz", - "integrity": "sha512-Mtnp+0qiZxgrH+TzVlzhWyZceHdAZ/UWK0/ju9U0HQeDpap1mZ8cC7H5wSI5mwgni6yeAjaxsTw0sbMK+aSuHw==" - }, "node_modules/object-hash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz", @@ -2616,11 +2610,6 @@ "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=", "dev": true }, - "notyf": { - "version": "3.10.0", - "resolved": "https://registry.npmjs.org/notyf/-/notyf-3.10.0.tgz", - "integrity": "sha512-Mtnp+0qiZxgrH+TzVlzhWyZceHdAZ/UWK0/ju9U0HQeDpap1mZ8cC7H5wSI5mwgni6yeAjaxsTw0sbMK+aSuHw==" - }, "object-hash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz", diff --git a/src/designer/designer_packages/elsa-workflows-designer/package.json b/src/designer/designer_packages/elsa-workflows-designer/package.json index fabbb1818..0ffd375a4 100644 --- a/src/designer/designer_packages/elsa-workflows-designer/package.json +++ b/src/designer/designer_packages/elsa-workflows-designer/package.json @@ -40,7 +40,6 @@ "jwt-decode": "^3.1.2", "lodash": "^4.17.21", "moment": "^2.29.4", - "notyf": "^3.10.0", "reflect-metadata": "^0.1.13", "typedi": "^0.10.0", "uuid": "^9.0.0" diff --git a/src/designer/designer_packages/elsa-workflows-designer/src/components.d.ts b/src/designer/designer_packages/elsa-workflows-designer/src/components.d.ts index 4f46d4a9c..c02cb611f 100644 --- a/src/designer/designer_packages/elsa-workflows-designer/src/components.d.ts +++ b/src/designer/designer_packages/elsa-workflows-designer/src/components.d.ts @@ -56,6 +56,7 @@ export namespace Components { } interface ElsaAwhileNotifications { "notification": NotificationType; + "showDuration": number; } interface ElsaButtonGroup { "buttons": Array - - - - - ) - : null - ) - } + render() { + const {infoPanelBoolean} = notificationStore; + + return ( + (this.notification.showToast !== false && !infoPanelBoolean) ? ( +
+
+
+ + + + + +
+
+
+ ) : null + ); + } } diff --git a/src/designer/designer_packages/elsa-workflows-designer/src/modules/notifications/notification-manager.tsx b/src/designer/designer_packages/elsa-workflows-designer/src/modules/notifications/notification-manager.tsx index e3cbbbac7..142601ca7 100644 --- a/src/designer/designer_packages/elsa-workflows-designer/src/modules/notifications/notification-manager.tsx +++ b/src/designer/designer_packages/elsa-workflows-designer/src/modules/notifications/notification-manager.tsx @@ -1,18 +1,13 @@ -import {Component, h, Prop, State, Watch} from '@stencil/core'; -import {Container} from 'typedi'; -import {enter, leave, toggle} from 'el-transition' +import {Component, h, Prop, Watch} from '@stencil/core'; +import {leave, toggle} from 'el-transition' import notificationStore from './notification-store'; import {EventBus} from '../../services'; -import {Notyf, NotyfNotification} from 'notyf'; -import {NotificationType} from './models'; -import {NotificationEventTypes} from './event-types'; import NotificationService from './notification-service'; -import {Input} from "postcss"; @Component({ tag: 'elsa-notifications-manager', shadow: false, - styleUrl: 'notification.scss', + styleUrl: '', }) export class NotificationManager { @Prop() public modalState: boolean; @@ -33,12 +28,11 @@ export class NotificationManager { } deleteNotif = (id) => { - console.log(id); notificationStore.notifications = notificationStore.notifications.filter(item => item.id !== id) } handleToggle = () => { - NotificationManager.NotificationServiceLocal.toogleNotification(); + NotificationManager.NotificationServiceLocal.toggleNotification(); toggle(this.modal); }; @@ -63,7 +57,7 @@ export class NotificationManager { data-transition-leave="transform transition ease-in-out duration-100 sm:duration-100" data-transition-leave-start="translate-x-0" data-transition-leave-end="translate-x-full" - class='hidden z-50 pt-65 fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16'> + class='hidden z-50 top-16 fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16'>
@@ -83,53 +77,27 @@ export class NotificationManager {
- {notifications.length === 0 &&
There is no notifications yet
} -