mirror of
https://github.com/n8n-io/n8n.git
synced 2025-03-05 20:50:17 -08: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
60 lines
2.2 KiB
Vue
60 lines
2.2 KiB
Vue
<script lang="ts">
|
|
import NonProductionLicenseBanner from '@/components/banners/NonProductionLicenseBanner.vue';
|
|
import TrialOverBanner from '@/components/banners/TrialOverBanner.vue';
|
|
import TrialBanner from '@/components/banners/TrialBanner.vue';
|
|
import V1Banner from '@/components/banners/V1Banner.vue';
|
|
import EmailConfirmationBanner from '@/components/banners/EmailConfirmationBanner.vue';
|
|
import type { Component } from 'vue';
|
|
import type { N8nBanners } from '@/Interface';
|
|
|
|
// All banners that can be shown in the app should be registered here.
|
|
// This component renders the banner with the highest priority from the banner stack, located in the UI store.
|
|
// When registering a new banner, please consult this document to determine it's priority:
|
|
// https://www.notion.so/n8n/Banner-stack-60948c4167c743718fde80d6745258d5
|
|
export const N8N_BANNERS: N8nBanners = {
|
|
V1: { priority: 350, component: V1Banner as Component },
|
|
TRIAL_OVER: { priority: 260, component: TrialOverBanner as Component },
|
|
EMAIL_CONFIRMATION: { priority: 250, component: EmailConfirmationBanner as Component },
|
|
TRIAL: { priority: 150, component: TrialBanner as Component },
|
|
NON_PRODUCTION_LICENSE: { priority: 140, component: NonProductionLicenseBanner as Component },
|
|
};
|
|
</script>
|
|
|
|
<script setup lang="ts">
|
|
import { useUIStore } from '@/stores/ui.store';
|
|
import { computed, onMounted } from 'vue';
|
|
import { getBannerRowHeight } from '@/utils';
|
|
|
|
const uiStore = useUIStore();
|
|
|
|
async function updateCurrentBannerHeight() {
|
|
const bannerHeight = await getBannerRowHeight();
|
|
uiStore.updateBannersHeight(bannerHeight);
|
|
}
|
|
|
|
const currentlyShownBanner = computed(() => {
|
|
void updateCurrentBannerHeight();
|
|
if (uiStore.bannerStack.length === 0) return null;
|
|
// Find the banner with the highest priority
|
|
let banner = N8N_BANNERS[uiStore.bannerStack[0]];
|
|
uiStore.bannerStack.forEach((bannerName, index) => {
|
|
if (index === 0) return;
|
|
const bannerToCompare = N8N_BANNERS[bannerName];
|
|
if (bannerToCompare.priority > banner.priority) {
|
|
banner = bannerToCompare;
|
|
}
|
|
});
|
|
return banner.component;
|
|
});
|
|
|
|
onMounted(async () => {
|
|
await updateCurrentBannerHeight();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div data-test-id="banner-stack">
|
|
<component :is="currentlyShownBanner" />
|
|
</div>
|
|
</template>
|