n8n/packages/editor-ui/src/components/banners/BannerStack.vue
Milorad FIlipović 4240e76253
feat(editor): Implement new banners framework (#6603)
*  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
2023-07-14 15:36:17 +02:00

37 lines
1 KiB
Vue

<script setup lang="ts">
import TrialOverBanner from '@/components/banners/TrialOverBanner.vue';
import TrialBanner from '@/components/banners/TrialBanner.vue';
import V1Banner from '@/components/banners/V1Banner.vue';
import { useUIStore } from '@/stores/ui.store';
import { onMounted, watch } from 'vue';
import { getBannerRowHeight } from '@/utils';
import type { Banners } from 'n8n-workflow';
const uiStore = useUIStore();
function shouldShowBanner(bannerName: Banners) {
return uiStore.banners[bannerName].dismissed === false;
}
async function updateCurrentBannerHeight() {
const bannerHeight = await getBannerRowHeight();
uiStore.updateBannersHeight(bannerHeight);
}
onMounted(async () => {
await updateCurrentBannerHeight();
});
watch(uiStore.banners, async () => {
await updateCurrentBannerHeight();
});
</script>
<template>
<div data-test-id="banner-stack">
<trial-over-banner v-if="shouldShowBanner('TRIAL_OVER')" />
<trial-banner v-if="shouldShowBanner('TRIAL')" />
<v1-banner v-if="shouldShowBanner('V1')" />
</div>
</template>