mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-20 03:12:15 +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
132
packages/editor-ui/src/components/VersionCard.vue
Normal file
132
packages/editor-ui/src/components/VersionCard.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<template functional>
|
||||
<a v-if="props.version" :set="version = props.version" :href="version.documentationUrl" target="_blank" :class="$style.card">
|
||||
<div :class="$style.header">
|
||||
<div>
|
||||
<div :class="$style.name">
|
||||
Version {{version.name}}
|
||||
</div>
|
||||
<WarningTooltip v-if="version.hasSecurityIssue">
|
||||
<template>
|
||||
This version has a security issue.<br/>It is listed here for completeness.
|
||||
</template>
|
||||
</WarningTooltip>
|
||||
<Badge
|
||||
v-if="version.hasSecurityFix"
|
||||
text="Security update"
|
||||
type="danger"
|
||||
/>
|
||||
<Badge
|
||||
v-if="version.hasBreakingChange"
|
||||
text="Breaking changes"
|
||||
type="warning"
|
||||
/>
|
||||
</div>
|
||||
<div :class="$style['release-date']">
|
||||
Released <TimeAgo :date="version.createdAt" />
|
||||
</div>
|
||||
</div>
|
||||
<div :class="$style.divider" v-if="version.description || (version.nodes && version.nodes.length)"></div>
|
||||
<div>
|
||||
<div v-if="version.description" v-html="version.description" :class="$style.description"></div>
|
||||
<div v-if="version.nodes && version.nodes.length > 0" :class="$style.nodes">
|
||||
<NodeIcon
|
||||
v-for="node in version.nodes"
|
||||
:key="node.name"
|
||||
:nodeType="node"
|
||||
:title="$options.nodeName(node)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import NodeIcon from './NodeIcon.vue';
|
||||
import TimeAgo from './TimeAgo.vue';
|
||||
import Badge from './Badge.vue';
|
||||
import WarningTooltip from './WarningTooltip.vue';
|
||||
import { IVersionNode } from '@/Interface';
|
||||
|
||||
Vue.component('NodeIcon', NodeIcon);
|
||||
Vue.component('TimeAgo', TimeAgo);
|
||||
Vue.component('Badge', Badge);
|
||||
Vue.component('WarningTooltip', WarningTooltip);
|
||||
|
||||
export default Vue.extend({
|
||||
components: { NodeIcon, TimeAgo, Badge, WarningTooltip },
|
||||
name: 'UpdatesPanel',
|
||||
props: ['version'],
|
||||
// @ts-ignore
|
||||
nodeName (node: IVersionNode): string {
|
||||
return node !== null ? node.displayName : 'unknown';
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style module lang="scss">
|
||||
.card {
|
||||
background-color: $--version-card-background-color;
|
||||
border: $--version-card-border;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
padding: 16px;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 2px 10px $--version-card-box-shadow-color;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> * {
|
||||
display: flex;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
> div:first-child {
|
||||
flex-grow: 1;
|
||||
|
||||
> * {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
color: $--version-card-name-text-color;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: $--version-card-border;
|
||||
width: 100%;
|
||||
margin: 10px 0 15px 0;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 19px;
|
||||
color: $--version-card-description-text-color;
|
||||
}
|
||||
|
||||
.release-date {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
font-weight: 400;
|
||||
color: $--version-card-release-date-text-color;
|
||||
}
|
||||
|
||||
.nodes {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
grid-row-gap: 12px;
|
||||
margin-block-start: 24px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user