mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-16 17:46:45 +00:00
b0e98b59a6
This PR introduces banner framework overhaul: First version of the banner framework was built to allow multiple banners to be shown at the same time. Since that proven to be the case we don't need and it turned out to be pretty messy keeping only one banner visible in such setup, this PR reworks it so it renders only one banner at a time, based on [this priority list](https://www.notion.so/n8n/Banner-stack-60948c4167c743718fde80d6745258d5?pvs=4#6afd052ec8d146a1b0fab8884a19add7) that is assembled together with our product & design team. ### How to test banner stack: 1. Available banners and their priorities are registered [here](f9f122d46d/packages/editor-ui/src/components/banners/BannerStack.vue (L14)) 2. Banners are pushed to stack using `pushBannerToStack` action, for example: ``` useUIStore().pushBannerToStack('TRIAL'); ``` 4. Try pushing different banners to stack and check if only the one with highest priorities is showing up ### How to test the _Email confirmation_ banner: 1. Comment out [this line](b80d2e3bec/packages/editor-ui/src/stores/cloudPlan.store.ts (L59)), so cloud data is always fetched 2. Create an [override](https://chrome.google.com/webstore/detail/resource-override/pkoacgokdfckfpndoffpifphamojphii) (URL -> File) that will serve user data that triggers this banner: - **URL**: `*/rest/cloud/proxy/admin/user/me` - **File**: ``` { "confirmed": false, "id": 1, "email": "test@test.com", "username": "test" } ``` 3. Run n8n
75 lines
1.5 KiB
Vue
75 lines
1.5 KiB
Vue
<script lang="ts" setup>
|
|
import { useUIStore } from '@/stores/ui.store';
|
|
import { computed, useSlots } from 'vue';
|
|
import type { BannerName } from 'n8n-workflow';
|
|
|
|
interface Props {
|
|
name: BannerName;
|
|
theme?: string;
|
|
customIcon?: string;
|
|
dismissible?: boolean;
|
|
}
|
|
|
|
const uiStore = useUIStore();
|
|
const slots = useSlots();
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
theme: 'info',
|
|
dismissible: true,
|
|
});
|
|
|
|
const emit = defineEmits(['close']);
|
|
|
|
const hasTrailingContent = computed(() => {
|
|
return !!slots.trailingContent;
|
|
});
|
|
|
|
async function onCloseClick() {
|
|
await uiStore.dismissBanner(props.name);
|
|
emit('close');
|
|
}
|
|
</script>
|
|
<template>
|
|
<n8n-callout
|
|
:theme="props.theme"
|
|
:icon="props.customIcon"
|
|
iconSize="medium"
|
|
:roundCorners="false"
|
|
:data-test-id="`banners-${props.name}`"
|
|
>
|
|
<div :class="[$style.mainContent, !hasTrailingContent ? $style.keepSpace : '']">
|
|
<slot name="mainContent" />
|
|
</div>
|
|
<template #trailingContent>
|
|
<div :class="$style.trailingContent">
|
|
<slot name="trailingContent" />
|
|
<n8n-icon
|
|
v-if="dismissible"
|
|
size="small"
|
|
icon="times"
|
|
title="Dismiss"
|
|
class="clickable"
|
|
:data-test-id="`banner-${props.name}-close`"
|
|
@click="onCloseClick"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</n8n-callout>
|
|
</template>
|
|
|
|
<style lang="scss" module>
|
|
.mainContent {
|
|
display: flex;
|
|
gap: var(--spacing-4xs);
|
|
}
|
|
|
|
.keepSpace {
|
|
padding: 5px 0;
|
|
}
|
|
.trailingContent {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-l);
|
|
}
|
|
</style>
|