fix(editor): Move versions check to init function and refactor store (no-changelog) (#8067)

packages/editor-ui/src/components/MainSidebar.vue

@@ -29,7 +29,12 @@
 			/></template>
 			<template #menuSuffix>
 				<div>
-					<div v-if="hasVersionUpdates" :class="$style.updates" @click="openUpdatesPanel">
+					<div
+						v-if="hasVersionUpdates"
+						data-test-id="version-updates-panel-button"
+						:class="$style.updates"
+						@click="openUpdatesPanel"
+					>
 						<div :class="$style.giftContainer">
 							<GiftNotificationIcon />
 						</div>

packages/editor-ui/src/components/UpdatesPanel.vue

@@ -1,5 +1,10 @@
 <template>
-	<ModalDrawer :name="VERSIONS_MODAL_KEY" direction="ltr" width="520px">
+	<ModalDrawer
+		:name="VERSIONS_MODAL_KEY"
+		direction="ltr"
+		width="520px"
+		data-test-id="version-updates-panel"
+	>
 		<template #header>
 			<span :class="$style.title">
 				{{ $locale.baseText('updatesPanel.weVeBeenBusy') }}
@@ -31,7 +36,7 @@
 				</p>
 
 				<n8n-link v-if="infoUrl" :to="infoUrl" :bold="true">
-					<font-awesome-icon icon="info-circle"></font-awesome-icon>
+					<font-awesome-icon icon="info-circle" class="mr-2xs" />
 					<span>
 						{{ $locale.baseText('updatesPanel.howToUpdateYourN8nVersion') }}
 					</span>

packages/editor-ui/src/components/VersionCard.vue

@@ -1,5 +1,11 @@
 <template>
-	<a v-if="version" :href="version.documentationUrl" target="_blank" :class="$style.card">
+	<a
+		v-if="version"
+		:href="version.documentationUrl"
+		target="_blank"
+		:class="$style.card"
+		data-test-id="version-card"
+	>
 		<div :class="$style.header">
 			<div>
 				<div :class="$style.name">