admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-18 02:21:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(editor): Implement new banners framework (#6603)

Browse Source 
* ⚡ Implemented new grid row - banners
* ✨ Fixing node creator and executions sidebar position after layout update
* 💄 Added configurable round corners to the Callout component
* ⚡ Fixing mouse position detection and main tab bar position
* ⚡ Implemented basic banner component structure
* ⚡ Implemented banner state and dismiss logic
* ⚡ Fixing grid layout. Updating banners height state dynamically
* ⚡ Fix zoom to fit position, mouse position in demo mode and callout vertical alignment
* ⚡ Implementing proper trial banners logic
* 💄 Only showing execution usage data once the sidebar is fully expanded
* ✨ Implemented permanent/temporary dismiss logic for v1 flag
* ⚡ Minor refactoring of banner logic
* ⚡ Updating permanent dismiss logic to work with all banners
* 👕 Fixing linting errors
* ✔️ Updating Callout component test snapshots
* 💄 Tweaking zoom to fit position
* ✔️ Updating testing endpoints to use new store data
* ✅ Added banners unit tests
* ✔️ Fixing failing banner tests
* ✅ Added more banner tests
* ⚡ Updating banners dimensions on resize, removing leftover code
* ✔️ Removing store import from API file
* 👕 Fixing lint errors
* ⚡ Updating migration files
* ⚡ Using query parameters in migrations
* 👌 Addressing design review feedback
* ⚡ Updating upgrade plan button click
* ⚡ Updating the migrations syntax
* 👌 Updating permanent banner dismiss endpoint and back-end logic
* 👌 Refactoring trial banner component and ui store
* 👌 Addressing more points from code review
* 👌 Moving DOM logic from the store
* ✔️ Updated callout component snapshots
* 👌 Updating mysql migration file
* ✔️ Updating e2e test canvas coordinates after setting it's position to absolute
* 👌 Addressing back-end review feedback
* 👌 Improving typing around banners
* 👕 Fixing lint errors
This commit is contained in:
Milorad FIlipović
2023-07-14 15:36:17 +02:00
committed by GitHub
parent ff0759530d
commit 4240e76253
47 changed files with 637 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
packages/design-system/src/components/N8nCallout/Callout.vue
View File

@@ -2,7 +2,7 @@
<div :class="classes" role="alert">
<div :class="$style.messageSection">
<div :class="$style.icon" v-if="!iconless">
<n8n-icon :icon="getIcon" :size="theme === 'secondary' ? 'medium' : 'large'" />
<n8n-icon :icon="getIcon" :size="getIconSize" />
</div>
<n8n-text size="small">
<slot />
@@ -42,7 +42,10 @@ export default defineComponent({
},
icon: {
type: String,
default: 'info-circle',
},
iconSize: {
type: String,
default: 'medium',
},
iconless: {
type: Boolean,
@@ -50,9 +53,9 @@ export default defineComponent({
slim: {
type: Boolean,
},
overrideIcon: {
roundCorners: {
type: Boolean,
default: false,
default: true,
},
},
computed: {
@@ -62,16 +65,20 @@ export default defineComponent({
this.$style.callout,
this.$style[this.theme],
this.slim ? this.$style.slim : '',
this.roundCorners ? this.$style.round : '',
];
},
getIcon(): string {
if (this.overrideIcon) return this.icon;
if (Object.keys(CALLOUT_DEFAULT_ICONS).includes(this.theme)) {
return CALLOUT_DEFAULT_ICONS[this.theme];
return this.icon ?? CALLOUT_DEFAULT_ICONS?.[this.theme] ?? CALLOUT_DEFAULT_ICONS.info;
},
getIconSize(): string {
if (this.iconSize) {
return this.iconSize;
}
return this.icon;
if (this.theme === 'secondary') {
return 'medium';
}
return 'large';
},
},
});
@@ -84,7 +91,6 @@ export default defineComponent({
font-size: var(--font-size-2xs);
padding: var(--spacing-xs);
border: var(--border-width-base) var(--border-style-base);
border-radius: var(--border-radius-base);
align-items: center;
line-height: var(--font-line-height-loose);
@@ -94,6 +100,10 @@ export default defineComponent({
}
}
.round {
border-radius: var(--border-radius-base);
}
.messageSection {
display: flex;
align-items: center;
@@ -102,7 +112,7 @@ export default defineComponent({
.info,
.custom {
border-color: var(--color-foreground-base);
background-color: var(--color-background-light);
background-color: var(--color-foreground-xlight);
color: var(--color-info);
}
@@ -125,7 +135,8 @@ export default defineComponent({
}
.icon {
margin-right: var(--spacing-xs);
line-height: 1;
margin-right: var(--spacing-2xs);
}
.secondary {

26
packages/design-system/src/components/N8nCallout/__tests__/__snapshots__/Callout.spec.ts.snap
View File

@@ -1,10 +1,10 @@
// Vitest Snapshot v1
exports[`components > N8nCallout > should render additional slots correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout callout custom\\">
"<div role=\\"alert\\" class=\\"n8n-callout callout custom round\\">
<div class=\\"messageSection\\">
<div class=\\"icon\\">
<n8n-icon-stub icon=\\"code-branch\\" size=\\"large\\"></n8n-icon-stub>
<n8n-icon-stub icon=\\"code-branch\\" size=\\"medium\\"></n8n-icon-stub>
</div>
<n8n-text-stub size=\\"small\\" tag=\\"span\\">
<n8n-text-stub size=\\"small\\" tag=\\"span\\">This is a secondary callout.</n8n-text-stub>
@@ -15,10 +15,10 @@ exports[`components > N8nCallout > should render additional slots correctly 1`]
`;
exports[`components > N8nCallout > should render custom theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout callout custom\\">
"<div role=\\"alert\\" class=\\"n8n-callout callout custom round\\">
<div class=\\"messageSection\\">
<div class=\\"icon\\">
<n8n-icon-stub icon=\\"code-branch\\" size=\\"large\\"></n8n-icon-stub>
<n8n-icon-stub icon=\\"code-branch\\" size=\\"medium\\"></n8n-icon-stub>
</div>
<n8n-text-stub size=\\"small\\" tag=\\"span\\">
<n8n-text-stub size=\\"small\\" tag=\\"span\\">This is a secondary callout.</n8n-text-stub>
@@ -28,10 +28,10 @@ exports[`components > N8nCallout > should render custom theme correctly 1`] = `
`;
exports[`components > N8nCallout > should render danger theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout callout danger\\">
"<div role=\\"alert\\" class=\\"n8n-callout callout danger round\\">
<div class=\\"messageSection\\">
<div class=\\"icon\\">
<n8n-icon-stub icon=\\"times-circle\\" size=\\"large\\"></n8n-icon-stub>
<n8n-icon-stub icon=\\"times-circle\\" size=\\"medium\\"></n8n-icon-stub>
</div>
<n8n-text-stub size=\\"small\\" tag=\\"span\\">
<n8n-text-stub size=\\"small\\" tag=\\"span\\">This is a danger callout.</n8n-text-stub>
@@ -41,10 +41,10 @@ exports[`components > N8nCallout > should render danger theme correctly 1`] = `
`;
exports[`components > N8nCallout > should render info theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout callout info\\">
"<div role=\\"alert\\" class=\\"n8n-callout callout info round\\">
<div class=\\"messageSection\\">
<div class=\\"icon\\">
<n8n-icon-stub icon=\\"info-circle\\" size=\\"large\\"></n8n-icon-stub>
<n8n-icon-stub icon=\\"info-circle\\" size=\\"medium\\"></n8n-icon-stub>
</div>
<n8n-text-stub size=\\"small\\" tag=\\"span\\">
<n8n-text-stub size=\\"small\\" tag=\\"span\\">This is an info callout.</n8n-text-stub>
@@ -54,7 +54,7 @@ exports[`components > N8nCallout > should render info theme correctly 1`] = `
`;
exports[`components > N8nCallout > should render secondary theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout callout secondary\\">
"<div role=\\"alert\\" class=\\"n8n-callout callout secondary round\\">
<div class=\\"messageSection\\">
<div class=\\"icon\\">
<n8n-icon-stub icon=\\"info-circle\\" size=\\"medium\\"></n8n-icon-stub>
@@ -67,10 +67,10 @@ exports[`components > N8nCallout > should render secondary theme correctly 1`] =
`;
exports[`components > N8nCallout > should render success theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout callout success\\">
"<div role=\\"alert\\" class=\\"n8n-callout callout success round\\">
<div class=\\"messageSection\\">
<div class=\\"icon\\">
<n8n-icon-stub icon=\\"check-circle\\" size=\\"large\\"></n8n-icon-stub>
<n8n-icon-stub icon=\\"check-circle\\" size=\\"medium\\"></n8n-icon-stub>
</div>
<n8n-text-stub size=\\"small\\" tag=\\"span\\">
<n8n-text-stub size=\\"small\\" tag=\\"span\\">This is a success callout.</n8n-text-stub>
@@ -80,10 +80,10 @@ exports[`components > N8nCallout > should render success theme correctly 1`] = `
`;
exports[`components > N8nCallout > should render warning theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout callout warning\\">
"<div role=\\"alert\\" class=\\"n8n-callout callout warning round\\">
<div class=\\"messageSection\\">
<div class=\\"icon\\">
<n8n-icon-stub icon=\\"exclamation-triangle\\" size=\\"large\\"></n8n-icon-stub>
<n8n-icon-stub icon=\\"exclamation-triangle\\" size=\\"medium\\"></n8n-icon-stub>
</div>
<n8n-text-stub size=\\"small\\" tag=\\"span\\">
<n8n-text-stub size=\\"small\\" tag=\\"span\\">This is a warning callout.</n8n-text-stub>