mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-18 02:21:13 +00:00
✨ 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>
This commit is contained in:
Mutasem Aldmour
122
packages/editor-ui/src/components/UpdatesPanel.vue
Normal file
122
packages/editor-ui/src/components/UpdatesPanel.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<Modal
|
||||
:name="modalName"
|
||||
:drawer="true"
|
||||
:visible="visible"
|
||||
drawerDirection="ltr"
|
||||
drawerWidth="520px"
|
||||
>
|
||||
<template slot="header">
|
||||
<span :class="$style.title">We’ve been busy ✨</span>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<section :class="$style['description']">
|
||||
|
||||
<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['info-url']"
|
||||
:href="infoUrl"
|
||||
v-if="infoUrl"
|
||||
target="_blank"
|
||||
>
|
||||
<font-awesome-icon icon="info-circle"></font-awesome-icon>
|
||||
<span>How to update your n8n version</span>
|
||||
</a>
|
||||
|
||||
</section>
|
||||
<section :class="$style.versions">
|
||||
<div
|
||||
v-for="version in nextVersions"
|
||||
:key="version.name"
|
||||
:class="$style['versions-card']"
|
||||
>
|
||||
<VersionCard :version="version" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
import Modal from './Modal.vue';
|
||||
import TimeAgo from './TimeAgo.vue';
|
||||
import VersionCard from './VersionCard.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'UpdatesPanel',
|
||||
components: {
|
||||
Modal,
|
||||
VersionCard,
|
||||
TimeAgo,
|
||||
},
|
||||
props: ['modalName', 'visible'],
|
||||
computed: {
|
||||
...mapGetters('versions', ['nextVersions', 'currentVersion', 'infoUrl']),
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style module lang="scss">
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
color: $--updates-panel-text-color;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.description {
|
||||
padding: 0px 30px;
|
||||
margin-block-start: 16px;
|
||||
margin-block-end: 30px;
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: $--updates-panel-description-text-color;
|
||||
font-weight: 400;
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
|
||||
div {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.versions {
|
||||
background-color: $--updates-panel-dark-background-color;
|
||||
border-top: $--updates-panel-border;
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
overflow-y: scroll;
|
||||
padding-bottom: 220px;
|
||||
}
|
||||
|
||||
.versions-card {
|
||||
margin-block-end: 15px;
|
||||
}
|
||||
|
||||
.info-url {
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
|
||||
svg {
|
||||
color: $--updates-panel-info-icon-color;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $--updates-panel-info-url-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user