set dates

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

@@ -0,0 +1,17 @@
+<template functional>
+	<span>
+		{{$options.format(props.date)}}
+	</span>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+import { format } from 'timeago.js';
+
+export default Vue.extend({
+	name: 'UpdatesPanel',
+	props: ['date'],
+	format,
+});
+</script>

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

@@ -11,7 +11,7 @@
 		</template>
 		<template slot="content">
 			<section :class="$style['description']">
-				<p v-if="currentVersion">You’re on {{ currentVersion.name }}, which was released <strong>{{currentReleaseDate}}</strong> and is <strong> {{ nextVersions.length }} version{{nextVersions.length > 1 ? 's' : ''}}</strong> behind the latest and greatest n8n</p>	
+				<p v-if="currentVersion">You’re on {{ currentVersion.name }}, which was released <strong><TimeAgo :date="currentVersion.createdAt" /></strong> and is <strong> {{ nextVersions.length }} version{{nextVersions.length > 1 ? 's' : ''}}</strong> behind the latest and greatest n8n</p>	
 
 				<a :class="$style.update" :href="infoUrl" v-if="infoUrl" target="_blank">
 					<font-awesome-icon icon="info-circle"></font-awesome-icon>
@@ -33,9 +33,9 @@
 <script lang="ts">
 import Vue from 'vue';
 import { mapGetters } from 'vuex';
-import { format } from 'timeago.js';
 
 import Modal from './Modal.vue';
+import TimeAgo from './TimeAgo.vue';
 import VersionCard from './VersionCard.vue';
 
 export default Vue.extend({
@@ -43,6 +43,7 @@ export default Vue.extend({
 	components: {
 		Modal,
 		VersionCard,
+		TimeAgo,
 	},
 	props: ['modalName', 'visible'],
 	computed: {
@@ -51,9 +52,6 @@ export default Vue.extend({
 			'currentVersion',
 			'infoUrl',
 		]),
-		currentReleaseDate() {
-			return format(this.currentVersion.createdAt);
-		},
 	},
 });
 </script>

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

@@ -13,7 +13,7 @@
 				<el-tag v-if="version.hasBreakingChange" size="small" :class="`${$style['breaking-change']} ${$style['badge']}`">Breaking changes</el-tag>
 			</div>
 			<div :class="$style.released">
-				Released {{releaseDate}}
+				Released&nbsp;<TimeAgo :date="version.createdAt" />
 			</div>
 		</div>
 		<div>
@@ -31,19 +31,16 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { format } from 'timeago.js';
 import NodeIcon from './NodeIcon.vue';
 import { IVersion } from '@/Interface';
+import TimeAgo from './TimeAgo.vue';
 
 
 export default Vue.extend({
-	components: { NodeIcon },
+	components: { NodeIcon, TimeAgo },
 	name: 'UpdatesPanel',
 	props: ['version'],
 	computed: {
-		releaseDate() {
-			return format(this.version.createdAt);
-		},
 		hasMoreThan2Rows(): boolean {
 			const version = this.version as IVersion;
 			return version.nodes && version.nodes.length > 20;