✨ 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/editor-ui/src/views/NodeView.vue

@@ -125,6 +125,7 @@ import { moveNodeWorkflow } from '@/components/mixins/moveNodeWorkflow';
 import { restApi } from '@/components/mixins/restApi';
 import { showMessage } from '@/components/mixins/showMessage';
 import { titleChange } from '@/components/mixins/titleChange';
+import { newVersions } from '@/components/mixins/newVersions';
 
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 import { workflowRun } from '@/components/mixins/workflowRun';
@@ -198,6 +199,7 @@ export default mixins(
 	titleChange,
 	workflowHelpers,
 	workflowRun,
+	newVersions,
 )
 	.extend({
 		name: 'NodeView',
@@ -2200,8 +2202,10 @@ export default mixins(
 				this.$store.commit('setExecutionTimeout', settings.executionTimeout);
 				this.$store.commit('setMaxExecutionTimeout', settings.maxExecutionTimeout);
 				this.$store.commit('setVersionCli', settings.versionCli);
+				this.$store.commit('setInstanceId', settings.instanceId);
 				this.$store.commit('setOauthCallbackUrls', settings.oauthCallbackUrls);
 				this.$store.commit('setN8nMetadata', settings.n8nMetadata || {});
+				this.$store.commit('versions/setVersionNotificationSettings', settings.versionNotifications);
 			},
 			async loadNodeTypes (): Promise<void> {
 				const nodeTypes = await this.restApi().getNodeTypes();
@@ -2228,6 +2232,7 @@ export default mixins(
 			},
 		},
 
+
 		async mounted () {
 			this.$root.$on('importWorkflowData', async (data: IDataObject) => {
 				const resData = await this.importWorkflowData(data.data as IWorkflowDataUpdate);
@@ -2267,6 +2272,10 @@ export default mixins(
 					this.$showError(error, 'Init Problem', 'There was a problem initializing the workflow:');
 				}
 				this.stopLoading();
+
+				setTimeout(() => {
+					this.checkForNewVersions();
+				}, 0);
 			});
 
 			this.$externalHooks().run('nodeView.mount');