✨ Add new version notification (#1977)

* add menu item

* implement versions modal

* fix up modal

* clean up badges

* implement key features

* fix up spacing

* add error message

* add notification icon

* fix notification

* fix bug when no updates

* address lint issues

* address multi line nodes

* add closing animation

* keep drawer open

* address design feedback

* address badge styling

* use grid for icons

* update cli to return version information

* set env variables

* add scss color variables

* address comments

* fix lint issue

* handle edge cases

* update scss variables, spacing

* update spacing

* build

* override top value for theme

* bolden version

* update config

* check endpoint exists

* handle long names

* set dates

* set title

* fix bug

* update warning

* remove unused component

* refactor components

* add fragments

* inherit styles

* fix icon size

* fix lint issues

* add cli dep

* address comments

* handle network error

* address empty case

* Revert "address comments"

480f969e07c3282c50bc326babbc5812baac5dae

* remove dependency

* build

* update variable names

* update variable names

* refactor verion card

* split out variables

* clean up impl

* clean up scss

* move from nodeview

* refactor out gift notification icon

* fix lint issues

* clean up variables

* update scss variables

* update info url

* Add instanceId to frontendSettings

* Use createHash from crypto module

* Add instanceId to store & send it as http header

* Fix lintings

* Fix interfaces & apply review changes

* Apply review changes

* add console message

* update text info

* update endpoint

* clean up interface

* address comments

* cleanup todo

* Update packages/cli/config/index.ts

Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com>

* update console message

* ⚡ Display node-name on hover

* ⚡ Formatting fix

Co-authored-by: MedAliMarz <servfrdali@yahoo.fr>
Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com>
Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>

packages/cli/src/Server.ts

@@ -21,7 +21,7 @@ import * as clientOAuth1 from 'oauth-1.0a';
 import { RequestOptions } from 'oauth-1.0a';
 import * as csrf from 'csrf';
 import * as requestPromise from 'request-promise-native';
-import { createHmac } from 'crypto';
+import { createHash, createHmac } from 'crypto';
 // IMPORTANT! Do not switch to anther bcrypt library unless really necessary and
 // tested with all possible systems like Windows, Alpine on ARM, FreeBSD, ...
 import { compare } from 'bcryptjs';
@@ -196,6 +196,12 @@ class App {
 				'oauth1': urlBaseWebhook + `${this.restEndpoint}/oauth1-credential/callback`,
 				'oauth2': urlBaseWebhook + `${this.restEndpoint}/oauth2-credential/callback`,
 			},
+			versionNotifications: {
+				enabled: config.get('versionNotifications.enabled'),
+				endpoint: config.get('versionNotifications.endpoint'),
+				infoUrl: config.get('versionNotifications.infoUrl'),
+			},
+			instanceId: '',
 		};
 	}
 
@@ -225,6 +231,7 @@ class App {
 
 		this.versions = await GenericHelpers.getVersions();
 		this.frontendSettings.versionCli = this.versions.cli;
+		this.frontendSettings.instanceId = await generateInstanceId() as string;
 
 		await this.externalHooks.run('frontend.settings', [this.frontendSettings]);
 
@@ -2210,3 +2217,10 @@ async function getExecutionsCount(countFilter: IDataObject): Promise<{ count: nu
 	const count = await Db.collections.Execution!.count(countFilter);
 	return { count, estimate: false };
 }
+
+async function generateInstanceId() {
+	const encryptionKey = await UserSettings.getEncryptionKey();
+	const hash = encryptionKey ? createHash('sha256').update(encryptionKey.slice(Math.round(encryptionKey.length / 2))).digest('hex') : undefined;
+
+	return hash;
+}