mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(editor): Rework banners framework and add email confirmation banner (#7205)

Browse Source 
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
This commit is contained in:
Milorad FIlipović
2023-09-21 09:47:21 +02:00
committed by GitHub
parent 2491ccf4d9
commit b0e98b59a6
18 changed files with 424 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
View File

@@ -163,7 +163,6 @@ import {
import type { IPermissions } from '@/permissions';
import { getWorkflowPermissions } from '@/permissions';
import { createEventBus } from 'n8n-design-system/utils';
import { useCloudPlanStore } from '@/stores';
import { nodeViewEventBus } from '@/event-bus';
import { genericHelpers } from '@/mixins/genericHelpers';
@@ -223,7 +222,6 @@ export default defineComponent({
useUsageStore,
useWorkflowsStore,
useUsersStore,
useCloudPlanStore,
useSourceControlStore,
),
currentUser(): IUser | null {

113
packages/editor-ui/src/components/__tests__/BannersStack.test.ts
View File

@@ -1,4 +1,3 @@
import { within } from '@testing-library/vue';
import { merge } from 'lodash-es';
import userEvent from '@testing-library/user-event';
@@ -11,6 +10,7 @@ import { useUIStore } from '@/stores/ui.store';
import { useUsersStore } from '@/stores/users.store';
import type { RenderOptions } from '@/__tests__/render';
import { createComponentRenderer } from '@/__tests__/render';
import { waitFor } from '@testing-library/vue';
let uiStore: ReturnType<typeof useUIStore>;
let usersStore: ReturnType<typeof useUsersStore>;
@@ -20,11 +20,7 @@ const initialState = {
settings: merge({}, SETTINGS_STORE_DEFAULT_STATE.settings),
},
[STORES.UI]: {
banners: {
V1: { dismissed: false },
TRIAL: { dismissed: false },
TRIAL_OVER: { dismissed: false },
},
bannerStack: ['TRIAL_OVER', 'V1', 'NON_PRODUCTION_LICENSE', 'EMAIL_CONFIRMATION'],
},
[STORES.USERS]: {
currentUserId: 'aaa-bbb',
@@ -66,37 +62,14 @@ describe('BannerStack', () => {
vi.clearAllMocks();
});
it('should render default configuration', async () => {
const { getByTestId } = renderComponent();
it('should render banner with the highest priority', async () => {
const { getByTestId, queryByTestId } = renderComponent();
const bannerStack = getByTestId('banner-stack');
expect(bannerStack).toBeInTheDocument();
expect(within(bannerStack).getByTestId('banners-TRIAL')).toBeInTheDocument();
expect(within(bannerStack).getByTestId('banners-TRIAL_OVER')).toBeInTheDocument();
expect(within(bannerStack).getByTestId('banners-V1')).toBeInTheDocument();
});
it('should not render dismissed banners', async () => {
const { getByTestId } = renderComponent({
pinia: createTestingPinia({
initialState: merge(initialState, {
[STORES.UI]: {
banners: {
V1: { dismissed: true },
TRIAL: { dismissed: true },
},
},
}),
}),
});
const bannerStack = getByTestId('banner-stack');
expect(bannerStack).toBeInTheDocument();
expect(within(bannerStack).queryByTestId('banners-V1')).not.toBeInTheDocument();
expect(within(bannerStack).queryByTestId('banners-TRIAL')).not.toBeInTheDocument();
expect(within(bannerStack).getByTestId('banners-TRIAL_OVER')).toBeInTheDocument();
// Only V1 banner should be visible
expect(getByTestId('banners-V1')).toBeInTheDocument();
expect(queryByTestId('banners-TRIAL_OVER')).not.toBeInTheDocument();
});
it('should dismiss banner on click', async () => {
@@ -104,24 +77,15 @@ describe('BannerStack', () => {
const dismissBannerSpy = vi
.spyOn(useUIStore(), 'dismissBanner')
.mockImplementation(async (banner, mode) => {});
const closeTrialBannerButton = getByTestId('banner-TRIAL_OVER-close');
expect(getByTestId('banners-V1')).toBeInTheDocument();
const closeTrialBannerButton = getByTestId('banner-V1-close');
expect(closeTrialBannerButton).toBeInTheDocument();
await userEvent.click(closeTrialBannerButton);
expect(dismissBannerSpy).toHaveBeenCalledWith('TRIAL_OVER');
expect(dismissBannerSpy).toHaveBeenCalledWith('V1');
});
it('should permanently dismiss banner on click', async () => {
const { getByTestId } = renderComponent({
pinia: createTestingPinia({
initialState: merge(initialState, {
[STORES.UI]: {
banners: {
V1: { dismissed: false },
},
},
}),
}),
});
const { getByTestId } = renderComponent();
const dismissBannerSpy = vi
.spyOn(useUIStore(), 'dismissBanner')
.mockImplementation(async (banner, mode) => {});
@@ -144,4 +108,59 @@ describe('BannerStack', () => {
});
expect(queryByTestId('banner-confirm-v1')).not.toBeInTheDocument();
});
it('should send email confirmation request from the banner', async () => {
const { getByTestId, getByText } = renderComponent({
pinia: createTestingPinia({
initialState: {
...initialState,
[STORES.UI]: {
bannerStack: ['EMAIL_CONFIRMATION'],
},
},
}),
});
const confirmEmailSpy = vi.spyOn(useUsersStore(), 'confirmEmail');
getByTestId('confirm-email-button').click();
await waitFor(() => expect(confirmEmailSpy).toHaveBeenCalled());
await waitFor(() => {
expect(getByText('Confirmation email sent')).toBeInTheDocument();
});
});
it('should show error message if email confirmation fails', async () => {
const ERROR_MESSAGE = 'Something went wrong';
const { getByTestId, getByText } = renderComponent({
pinia: createTestingPinia({
initialState: {
...initialState,
[STORES.UI]: {
bannerStack: ['EMAIL_CONFIRMATION'],
},
},
}),
});
const confirmEmailSpy = vi.spyOn(useUsersStore(), 'confirmEmail').mockImplementation(() => {
throw new Error(ERROR_MESSAGE);
});
getByTestId('confirm-email-button').click();
await waitFor(() => expect(confirmEmailSpy).toHaveBeenCalled());
await waitFor(() => {
expect(getByText(ERROR_MESSAGE)).toBeInTheDocument();
});
});
it('should render empty banner stack when there are no banners to display', async () => {
const { queryByTestId } = renderComponent({
pinia: createTestingPinia({
initialState: {
...initialState,
[STORES.UI]: {
bannerStack: [],
},
},
}),
});
expect(queryByTestId('banner-stack')).toBeEmptyDOMElement();
});
});

49
packages/editor-ui/src/components/banners/BannerStack.vue
View File

@@ -1,38 +1,59 @@
<script setup lang="ts">
<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 { onMounted, watch } from 'vue';
import { computed, onMounted } from 'vue';
import { getBannerRowHeight } from '@/utils';
import type { BannerName } from 'n8n-workflow';
const uiStore = useUIStore();
function shouldShowBanner(bannerName: BannerName) {
return uiStore.banners[bannerName].dismissed === false;
}
async function updateCurrentBannerHeight() {
const bannerHeight = await getBannerRowHeight();
uiStore.updateBannersHeight(bannerHeight);
}
onMounted(async () => {
await updateCurrentBannerHeight();
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;
});
watch(uiStore.banners, async () => {
onMounted(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')" />
<non-production-license-banner v-if="shouldShowBanner('NON_PRODUCTION_LICENSE')" />
<component :is="currentlyShownBanner" />
</div>
</template>

12
packages/editor-ui/src/components/banners/BaseBanner.vue
View File

@@ -1,5 +1,6 @@
<script lang="ts" setup>
import { useUIStore } from '@/stores/ui.store';
import { computed, useSlots } from 'vue';
import type { BannerName } from 'n8n-workflow';
interface Props {
@@ -10,6 +11,7 @@ interface Props {
}
const uiStore = useUIStore();
const slots = useSlots();
const props = withDefaults(defineProps<Props>(), {
theme: 'info',
@@ -18,6 +20,10 @@ const props = withDefaults(defineProps<Props>(), {
const emit = defineEmits(['close']);
const hasTrailingContent = computed(() => {
return !!slots.trailingContent;
});
async function onCloseClick() {
await uiStore.dismissBanner(props.name);
emit('close');
@@ -31,7 +37,7 @@ async function onCloseClick() {
:roundCorners="false"
:data-test-id="`banners-${props.name}`"
>
<div :class="$style.mainContent">
<div :class="[$style.mainContent, !hasTrailingContent ? $style.keepSpace : '']">
<slot name="mainContent" />
</div>
<template #trailingContent>
@@ -56,6 +62,10 @@ async function onCloseClick() {
display: flex;
gap: var(--spacing-4xs);
}
.keepSpace {
padding: 5px 0;
}
.trailingContent {
display: flex;
align-items: center;

54
packages/editor-ui/src/components/banners/EmailConfirmationBanner.vue Normal file
View File

@@ -0,0 +1,54 @@
<script lang="ts" setup>
import BaseBanner from '@/components/banners/BaseBanner.vue';
import { useToast } from '@/composables';
import { i18n as locale } from '@/plugins/i18n';
import { useUsersStore } from '@/stores/users.store';
import { computed } from 'vue';
const toast = useToast();
const userEmail = computed(() => {
const { currentUserCloudInfo } = useUsersStore();
return currentUserCloudInfo?.email ?? '';
});
async function onConfirmEmailClick() {
try {
await useUsersStore().confirmEmail();
toast.showMessage({
type: 'success',
title: locale.baseText('banners.confirmEmail.toast.success.heading'),
message: locale.baseText('banners.confirmEmail.toast.success.message'),
});
} catch (error) {
toast.showMessage({
type: 'error',
title: locale.baseText('banners.confirmEmail.toast.error.heading'),
message: error.message,
});
}
}
</script>
<template>
<base-banner name="EMAIL_CONFIRMATION" theme="warning">
<template #mainContent>
<span>
{{ locale.baseText('banners.confirmEmail.message.1') }}
<router-link to="/settings/personal">{{ userEmail }}</router-link>
{{ locale.baseText('banners.confirmEmail.message.2') }}
</span>
</template>
<template #trailingContent>
<n8n-button
type="success"
@click="onConfirmEmailClick"
icon="envelope"
size="small"
data-test-id="confirm-email-button"
>
{{ locale.baseText('banners.confirmEmail.button') }}
</n8n-button>
</template>
</base-banner>
</template>