mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-09 22:24:05 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Optimizing main sidebar to have more space for Projects (#9686)

Browse source 
Co-authored-by: Omar Ajoue <krynble@gmail.com>
This commit is contained in:
Csaba Tuncsik 2024-06-25 11:14:02 +02:00 committed by GitHub
parent 31c456700a
commit 5cdcb61f66
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 271 additions and 341 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

102
cypress/e2e/10-undo-redo.cy.ts
View file

@ -47,28 +47,28 @@ describe('Undo/Redo', () => {
SET_NODE_NAME,
);
WorkflowPage.actions.zoomToFit();
WorkflowPage.getters
.canvasNodeByName('Code')
.should('have.css', 'left', '860px')
.should('have.css', 'top', '220px');
WorkflowPage.getters.canvasNodeByName('Code').then(($codeNode) => {
const cssLeft = parseInt($codeNode.css('left'));
const cssTop = parseInt($codeNode.css('top'));
WorkflowPage.actions.hitUndo();
WorkflowPage.getters.canvasNodes().should('have.have.length', 2);
WorkflowPage.getters.nodeConnections().should('have.length', 1);
WorkflowPage.actions.hitUndo();
WorkflowPage.getters.canvasNodes().should('have.have.length', 1);
WorkflowPage.getters.nodeConnections().should('have.length', 0);
WorkflowPage.actions.hitRedo();
WorkflowPage.getters.canvasNodes().should('have.have.length', 2);
WorkflowPage.getters.nodeConnections().should('have.length', 1);
WorkflowPage.actions.hitRedo();
WorkflowPage.getters.canvasNodes().should('have.have.length', 3);
WorkflowPage.getters.nodeConnections().should('have.length', 2);
// Last node should be added back to original position
WorkflowPage.getters
.canvasNodeByName('Code')
.should('have.css', 'left', '860px')
.should('have.css', 'top', '220px');
WorkflowPage.actions.hitUndo();
WorkflowPage.getters.canvasNodes().should('have.have.length', 2);
WorkflowPage.getters.nodeConnections().should('have.length', 1);
WorkflowPage.actions.hitUndo();
WorkflowPage.getters.canvasNodes().should('have.have.length', 1);
WorkflowPage.getters.nodeConnections().should('have.length', 0);
WorkflowPage.actions.hitRedo();
WorkflowPage.getters.canvasNodes().should('have.have.length', 2);
WorkflowPage.getters.nodeConnections().should('have.length', 1);
WorkflowPage.actions.hitRedo();
WorkflowPage.getters.canvasNodes().should('have.have.length', 3);
WorkflowPage.getters.nodeConnections().should('have.length', 2);
// Last node should be added back to original position
WorkflowPage.getters
.canvasNodeByName('Code')
.should('have.css', 'left', cssLeft + 'px')
.should('have.css', 'top', cssTop + 'px');
});
});
it('should undo/redo deleting node using context menu', () => {
@ -135,22 +135,30 @@ describe('Undo/Redo', () => {
it('should undo/redo moving nodes', () => {
WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
cy.drag('[data-test-id="canvas-node"].jtk-drag-selected', [50, 150], { clickToFinish: true });
WorkflowPage.getters
.canvasNodeByName('Code')
.should('have.css', 'left', '740px')
.should('have.css', 'top', '320px');
WorkflowPage.getters.canvasNodeByName(CODE_NODE_NAME).then(($node) => {
const initialPosition = $node.position();
cy.drag('[data-test-id="canvas-node"].jtk-drag-selected', [50, 150], { clickToFinish: true });
WorkflowPage.actions.hitUndo();
WorkflowPage.getters
.canvasNodeByName('Code')
.should('have.css', 'left', '640px')
.should('have.css', 'top', '220px');
WorkflowPage.actions.hitRedo();
WorkflowPage.getters
.canvasNodeByName('Code')
.should('have.css', 'left', '740px')
.should('have.css', 'top', '320px');
WorkflowPage.getters.canvasNodeByName(CODE_NODE_NAME).then(($node) => {
const cssLeft = parseInt($node.css('left'));
const cssTop = parseInt($node.css('top'));
expect(cssLeft).to.be.greaterThan(initialPosition.left);
expect(cssTop).to.be.greaterThan(initialPosition.top);
});
WorkflowPage.actions.hitUndo();
WorkflowPage.getters
.canvasNodeByName(CODE_NODE_NAME)
.should('have.css', 'left', `${initialPosition.left}px`)
.should('have.css', 'top', `${initialPosition.top}px`);
WorkflowPage.actions.hitRedo();
WorkflowPage.getters.canvasNodeByName(CODE_NODE_NAME).then(($node) => {
const cssLeft = parseInt($node.css('left'));
const cssTop = parseInt($node.css('top'));
expect(cssLeft).to.be.greaterThan(initialPosition.left);
expect(cssTop).to.be.greaterThan(initialPosition.top);
});
});
});
it('should undo/redo deleting a connection using context menu', () => {
@ -292,8 +300,12 @@ describe('Undo/Redo', () => {
WorkflowPage.getters
.canvasNodes()
.first()
.should('have.css', 'left', `${initialPosition.left + 120}px`)
.should('have.css', 'top', `${initialPosition.top + 140}px`);
.then(($node) => {
const cssLeft = parseInt($node.css('left'));
const cssTop = parseInt($node.css('top'));
expect(cssLeft).to.be.greaterThan(initialPosition.left);
expect(cssTop).to.be.greaterThan(initialPosition.top);
});
// Delete the set node
WorkflowPage.getters.canvasNodeByName(EDIT_FIELDS_SET_NODE_NAME).click().click();
@ -322,8 +334,12 @@ describe('Undo/Redo', () => {
WorkflowPage.getters
.canvasNodes()
.first()
.should('have.css', 'left', `${initialPosition.left + 120}px`)
.should('have.css', 'top', `${initialPosition.top + 140}px`);
.then(($node) => {
const cssLeft = parseInt($node.css('left'));
const cssTop = parseInt($node.css('top'));
expect(cssLeft).to.be.greaterThan(initialPosition.left);
expect(cssTop).to.be.greaterThan(initialPosition.top);
});
// Third redo: Should delete the Set node
WorkflowPage.actions.hitRedo();
WorkflowPage.getters.canvasNodes().should('have.length', 3);
@ -340,9 +356,6 @@ describe('Undo/Redo', () => {
WorkflowPage.getters.canvasNodes().should('have.length', 2);
WorkflowPage.getters.nodeConnections().should('have.length', 1);
cy.get(WorkflowPage.getters.getEndpointSelector('input', 'Switch')).should('have.length', 1);
cy.get(WorkflowPage.getters.getEndpointSelector('input', 'Switch'))
.should('have.css', 'left', '637px')
.should('have.css', 'top', '501px');
cy.fixture('Test_workflow_form_switch.json').then((data) => {
cy.get('body').paste(JSON.stringify(data));
@ -355,9 +368,6 @@ describe('Undo/Redo', () => {
WorkflowPage.getters.canvasNodes().should('have.length', 2);
WorkflowPage.getters.nodeConnections().should('have.length', 1);
cy.get(WorkflowPage.getters.getEndpointSelector('input', 'Switch')).should('have.length', 1);
cy.get(WorkflowPage.getters.getEndpointSelector('input', 'Switch'))
.should('have.css', 'left', '637px')
.should('have.css', 'top', '501px');
});
it('should not undo/redo when NDV or a modal is open', () => {

2
cypress/e2e/11-inline-expression-editor.cy.ts
View file

@ -14,6 +14,7 @@ describe('Inline expression editor', () => {
describe('Static data', () => {
beforeEach(() => {
WorkflowPage.actions.addNodeToCanvas('Hacker News');
WorkflowPage.actions.zoomToFit();
WorkflowPage.actions.openNode('Hacker News');
WorkflowPage.actions.openInlineExpressionEditor();
});
@ -75,6 +76,7 @@ describe('Inline expression editor', () => {
ndv.actions.close();
WorkflowPage.actions.addNodeToCanvas('No Operation');
WorkflowPage.actions.addNodeToCanvas('Hacker News');
WorkflowPage.actions.zoomToFit();
WorkflowPage.actions.openNode('Hacker News');
WorkflowPage.actions.openInlineExpressionEditor();
});

17
cypress/e2e/12-canvas-actions.cy.ts
View file

@ -125,6 +125,8 @@ describe('Canvas Actions', () => {
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(EDIT_FIELDS_SET_NODE_NAME);
WorkflowPage.actions.zoomToFit();
WorkflowPage.getters.canvasNodes().should('have.length', 3);
WorkflowPage.getters.nodeConnections().should('have.length', 2);
WorkflowPage.actions.addNodeBetweenNodes(
CODE_NODE_NAME,
EDIT_FIELDS_SET_NODE_NAME,
@ -132,12 +134,15 @@ describe('Canvas Actions', () => {
);
WorkflowPage.getters.canvasNodes().should('have.length', 4);
WorkflowPage.getters.nodeConnections().should('have.length', 3);
// And last node should be pushed to the right
WorkflowPage.getters
.canvasNodes()
.last()
.should('have.css', 'left', '860px')
.should('have.css', 'top', '220px');
WorkflowPage.getters.canvasNodeByName(EDIT_FIELDS_SET_NODE_NAME).then(($editFieldsNode) => {
const editFieldsNodeLeft = parseFloat($editFieldsNode.css('left'));
WorkflowPage.getters.canvasNodeByName(HTTP_REQUEST_NODE_NAME).then(($httpNode) => {
const httpNodeLeft = parseFloat($httpNode.css('left'));
expect(httpNodeLeft).to.be.lessThan(editFieldsNodeLeft);
});
});
});
it('should delete connections by pressing the delete button', () => {

22
cypress/e2e/12-canvas.cy.ts
View file

@ -69,7 +69,9 @@ describe('Canvas Node Manipulation and Navigation', () => {
WorkflowPage.getters.canvasNodeByName(MANUAL_TRIGGER_NODE_DISPLAY_NAME).click();
for (let i = 0; i < 2; i++) {
WorkflowPage.actions.addNodeToCanvas(EDIT_FIELDS_SET_NODE_NAME, true);
WorkflowPage.getters.nodeViewBackground().click(600 + i * 100, 200, { force: true });
WorkflowPage.getters
.nodeViewBackground()
.click((i + 1) * 200, (i + 1) * 200, { force: true });
}
WorkflowPage.actions.zoomToFit();
@ -197,13 +199,23 @@ describe('Canvas Node Manipulation and Navigation', () => {
WorkflowPage.getters.canvasNodeByName(MANUAL_TRIGGER_NODE_DISPLAY_NAME).click();
WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
WorkflowPage.actions.zoomToFit();
cy.drag('[data-test-id="canvas-node"].jtk-drag-selected', [50, 150], { clickToFinish: true });
WorkflowPage.getters
.canvasNodes()
.last()
.should('have.css', 'left', '740px')
.should('have.css', 'top', '320px');
.then(($node) => {
const { left, top } = $node.position();
cy.drag('[data-test-id="canvas-node"].jtk-drag-selected', [50, 150], {
clickToFinish: true,
});
WorkflowPage.getters
.canvasNodes()
.last()
.then(($node) => {
const { left: newLeft, top: newTop } = $node.position();
expect(newLeft).to.be.greaterThan(left);
expect(newTop).to.be.greaterThan(top);
});
});
});
it('should zoom in', () => {

2
cypress/e2e/13-pinning.cy.ts
View file

@ -109,6 +109,8 @@ describe('Data pinning', () => {
.parent()
.should('have.class', 'is-disabled');
cy.get('body').type('{esc}');
// Unpin using context menu
workflowPage.actions.openNode(EDIT_FIELDS_SET_NODE_NAME);
ndv.actions.setPinnedData([{ test: 1 }]);

8
cypress/e2e/14-mapping.cy.ts
View file

@ -18,6 +18,8 @@ describe('Data mapping', () => {
cy.fixture('Test_workflow-actions_paste-data.json').then((data) => {
cy.get('body').paste(JSON.stringify(data));
});
workflowPage.actions.zoomToFit();
workflowPage.actions.openNode('Set');
ndv.actions.executePrevious();
ndv.actions.switchInputMode('Table');
@ -49,6 +51,7 @@ describe('Data mapping', () => {
cy.fixture('Test_workflow_3.json').then((data) => {
cy.get('body').paste(JSON.stringify(data));
});
workflowPage.actions.zoomToFit();
workflowPage.actions.openNode('Set');
ndv.actions.switchInputMode('Table');
@ -111,6 +114,7 @@ describe('Data mapping', () => {
cy.fixture('Test_workflow_3.json').then((data) => {
cy.get('body').paste(JSON.stringify(data));
});
workflowPage.actions.zoomToFit();
workflowPage.actions.openNode('Set');
ndv.actions.switchInputMode('JSON');
@ -149,6 +153,7 @@ describe('Data mapping', () => {
cy.fixture('Test_workflow_3.json').then((data) => {
cy.get('body').paste(JSON.stringify(data));
});
workflowPage.actions.zoomToFit();
workflowPage.actions.openNode('Set');
ndv.actions.clearParameterInput('value');
@ -255,6 +260,7 @@ describe('Data mapping', () => {
cy.fixture('Test_workflow_3.json').then((data) => {
cy.get('body').paste(JSON.stringify(data));
});
workflowPage.actions.zoomToFit();
workflowPage.actions.openNode('Set');
@ -286,6 +292,7 @@ describe('Data mapping', () => {
cy.fixture('Test_workflow_3.json').then((data) => {
cy.get('body').paste(JSON.stringify(data));
});
workflowPage.actions.zoomToFit();
workflowPage.actions.openNode('Set');
ndv.actions.typeIntoParameterInput('value', 'test_value');
@ -307,6 +314,7 @@ describe('Data mapping', () => {
cy.fixture('Test_workflow_3.json').then((data) => {
cy.get('body').paste(JSON.stringify(data));
});
workflowPage.actions.zoomToFit();
workflowPage.actions.openNode('Set');
ndv.actions.clearParameterInput('value');

32
cypress/e2e/19-execution.cy.ts
View file

@ -1,6 +1,6 @@
import { NDV, WorkflowExecutionsTab, WorkflowPage as WorkflowPageClass } from '../pages';
import { SCHEDULE_TRIGGER_NODE_NAME, EDIT_FIELDS_SET_NODE_NAME } from '../constants';
import { errorToast, successToast } from '../pages/notifications';
import { clearNotifications, errorToast, successToast } from '../pages/notifications';
const workflowPage = new WorkflowPageClass();
const executionsTab = new WorkflowExecutionsTab();
@ -62,13 +62,13 @@ describe('Execution', () => {
.within(() => cy.get('.fa-check'))
.should('exist');
successToast().should('be.visible');
clearNotifications();
// Clear execution data
workflowPage.getters.clearExecutionDataButton().should('be.visible');
workflowPage.getters.clearExecutionDataButton().click();
workflowPage.getters.clearExecutionDataButton().should('not.exist');
// Check success toast (works because Cypress waits enough for the element to show after the http request node has finished)
successToast().should('be.visible');
});
it('should test manual workflow stop', () => {
@ -106,6 +106,9 @@ describe('Execution', () => {
.canvasNodeByName('Set')
.within(() => cy.get('.fa-check').should('not.exist'));
successToast().should('be.visible');
clearNotifications();
workflowPage.getters.stopExecutionButton().should('exist');
workflowPage.getters.stopExecutionButton().click();
@ -121,13 +124,13 @@ describe('Execution', () => {
.canvasNodeByName('Set')
.within(() => cy.get('.fa-check').should('not.exist'));
successToast().should('be.visible');
clearNotifications();
// Clear execution data
workflowPage.getters.clearExecutionDataButton().should('be.visible');
workflowPage.getters.clearExecutionDataButton().click();
workflowPage.getters.clearExecutionDataButton().should('not.exist');
// Check success toast (works because Cypress waits enough for the element to show after the http request node has finished)
successToast().should('be.visible');
});
it('should test webhook workflow', () => {
@ -194,13 +197,13 @@ describe('Execution', () => {
.within(() => cy.get('.fa-check'))
.should('exist');
successToast().should('be.visible');
clearNotifications();
// Clear execution data
workflowPage.getters.clearExecutionDataButton().should('be.visible');
workflowPage.getters.clearExecutionDataButton().click();
workflowPage.getters.clearExecutionDataButton().should('not.exist');
// Check success toast (works because Cypress waits enough for the element to show after the http request node has finished)
successToast().should('be.visible');
});
it('should test webhook workflow stop', () => {
@ -239,6 +242,9 @@ describe('Execution', () => {
});
});
successToast().should('be.visible');
clearNotifications();
workflowPage.getters.stopExecutionButton().click();
// Check canvas nodes after 1st step (workflow passed the manual trigger node
workflowPage.getters
@ -268,13 +274,13 @@ describe('Execution', () => {
.canvasNodeByName('Set')
.within(() => cy.get('.fa-check').should('not.exist'));
successToast().should('be.visible');
clearNotifications();
// Clear execution data
workflowPage.getters.clearExecutionDataButton().should('be.visible');
workflowPage.getters.clearExecutionDataButton().click();
workflowPage.getters.clearExecutionDataButton().should('not.exist');
// Check success toast (works because Cypress waits enough for the element to show after the http request node has finished)
successToast().should('be.visible');
});
describe('execution preview', () => {

3
cypress/e2e/25-stickies.cy.ts
View file

@ -26,6 +26,9 @@ function checkStickiesStyle(
describe('Canvas Actions', () => {
beforeEach(() => {
workflowPage.actions.visit();
cy.get('#collapse-change-button').should('be.visible').click();
cy.get('#side-menu[class*=collapsed i]').should('be.visible');
workflowPage.actions.zoomToFit();
});
it('adds sticky to canvas with default text and position', () => {

2
cypress/e2e/9-expression-editor-modal.cy.ts
View file

@ -14,6 +14,7 @@ describe('Expression editor modal', () => {
describe('Static data', () => {
beforeEach(() => {
WorkflowPage.actions.addNodeToCanvas('Hacker News');
WorkflowPage.actions.zoomToFit();
WorkflowPage.actions.openNode('Hacker News');
WorkflowPage.actions.openExpressionEditorModal();
});
@ -69,6 +70,7 @@ describe('Expression editor modal', () => {
ndv.actions.close();
WorkflowPage.actions.addNodeToCanvas('No Operation');
WorkflowPage.actions.addNodeToCanvas('Hacker News');
WorkflowPage.actions.zoomToFit();
WorkflowPage.actions.openNode('Hacker News');
WorkflowPage.actions.openExpressionEditorModal();
});

8
cypress/pages/sidebar/main-sidebar.ts
View file

@ -11,16 +11,14 @@ export class MainSidebar extends BasePage {
credentials: () => this.getters.menuItem('credentials'),
executions: () => this.getters.menuItem('executions'),
adminPanel: () => this.getters.menuItem('cloud-admin'),
userMenu: () => cy.get('div[class="action-dropdown-container"]'),
userMenu: () => cy.getByTestId('user-menu'),
logo: () => cy.getByTestId('n8n-logo'),
};
actions = {
goToSettings: () => {
this.getters.settings().should('be.visible');
// We must wait before ElementUI menu is done with its animations
cy.get('[data-old-overflow]').should('not.exist');
this.getters.settings().click();
this.getters.userMenu().click();
cy.getByTestId('user-menu-item-settings').should('be.visible').click();
},
goToCredentials: () => {
this.getters.credentials().should('be.visible');

63
packages/editor-ui/src/components/MainSidebar.vue
View file

@ -28,10 +28,7 @@
<template #beforeLowerMenu>
<BecomeTemplateCreatorCta v-if="fullyExpanded && !userIsTrialing" />
<ExecutionsUsage
v-if="fullyExpanded && userIsTrialing"
:cloud-plan-data="currentPlanAndUsageData"
/></template>
</template>
<template #menuSuffix>
<div>
<div
@ -106,7 +103,7 @@
</template>
<script lang="ts">
import type { CloudPlanAndUsageData, IExecutionResponse, IMenuItem, IVersion } from '@/Interface';
import type { IExecutionResponse, IMenuItem, IVersion } from '@/Interface';
import GiftNotificationIcon from './GiftNotificationIcon.vue';
import { useMessage } from '@/composables/useMessage';
@ -123,7 +120,6 @@ import { useUsersStore } from '@/stores/users.store';
import { useVersionsStore } from '@/stores/versions.store';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { useTemplatesStore } from '@/stores/templates.store';
import ExecutionsUsage from '@/components/executions/ExecutionsUsage.vue';
import BecomeTemplateCreatorCta from '@/components/BecomeTemplateCreatorCta/BecomeTemplateCreatorCta.vue';
import MainSidebarSourceControl from '@/components/MainSidebarSourceControl.vue';
import { hasPermission } from '@/utils/rbac/permissions';
@ -137,7 +133,6 @@ export default defineComponent({
name: 'MainSidebar',
components: {
GiftNotificationIcon,
ExecutionsUsage,
MainSidebarSourceControl,
BecomeTemplateCreatorCta,
ProjectNavigation,
@ -189,10 +184,6 @@ export default defineComponent({
isCollapsed(): boolean {
return this.uiStore.sidebarMenuCollapsed;
},
canUserAccessSettings(): boolean {
const accessibleRoute = this.findFirstAccessibleSettingsRoute();
return accessibleRoute !== null;
},
showUserArea(): boolean {
return hasPermission(['authenticated']);
},
@ -212,10 +203,7 @@ export default defineComponent({
];
},
mainMenuItems(): IMenuItem[] {
const items: IMenuItem[] = [];
const defaultSettingsRoute = this.findFirstAccessibleSettingsRoute();
const regularItems: IMenuItem[] = [
const items: IMenuItem[] = [
{
id: 'cloud-admin',
position: 'bottom',
@ -261,15 +249,6 @@ export default defineComponent({
position: 'bottom',
route: { to: { name: VIEWS.EXECUTIONS } },
},
{
id: 'settings',
icon: 'cog',
label: this.$locale.baseText('settings'),
position: 'bottom',
available: this.canUserAccessSettings && this.usersStore.currentUser !== null,
activateOnRouteNames: [VIEWS.USERS_SETTINGS, VIEWS.API_SETTINGS, VIEWS.PERSONAL_SETTINGS],
route: { to: defaultSettingsRoute },
},
{
id: 'help',
icon: 'question',
@ -321,20 +300,11 @@ export default defineComponent({
],
},
];
return [...items, ...regularItems];
return items;
},
userIsTrialing(): boolean {
return this.cloudPlanStore.userIsTrialing;
},
currentPlanAndUsageData(): CloudPlanAndUsageData | null {
const planData = this.cloudPlanStore.currentPlanData;
const usage = this.cloudPlanStore.currentUsageData;
if (!planData || !usage) return null;
return {
...planData,
usage,
};
},
},
async mounted() {
this.basePath = this.rootStore.baseUrl;
@ -345,12 +315,7 @@ export default defineComponent({
}
void this.$nextTick(() => {
if (window.innerWidth < 900 || this.uiStore.isNodeView) {
this.uiStore.sidebarMenuCollapsed = true;
} else {
this.uiStore.sidebarMenuCollapsed = false;
}
this.uiStore.sidebarMenuCollapsed = window.innerWidth < 900;
this.fullyExpanded = !this.isCollapsed;
});
@ -435,24 +400,6 @@ export default defineComponent({
break;
}
},
findFirstAccessibleSettingsRoute() {
const settingsRoutes = this.$router
.getRoutes()
.find((route) => route.path === '/settings')
?.children.map((route) => route.name ?? '');
let defaultSettingsRoute = { name: VIEWS.USERS_SETTINGS };
for (const route of settingsRoutes ?? []) {
if (this.canUserAccessRouteByName(route.toString())) {
defaultSettingsRoute = {
name: route.toString() as VIEWS,
};
break;
}
}
return defaultSettingsRoute;
},
onResize(event: UIEvent) {
void this.callDebounced(this.onResizeEnd, { debounceTime: 100 }, event);
},

148
packages/editor-ui/src/components/banners/TrialBanner.vue
View file

@ -4,18 +4,49 @@ import { i18n as locale } from '@/plugins/i18n';
import { useCloudPlanStore } from '@/stores/cloudPlan.store';
import { computed } from 'vue';
import { useUIStore } from '@/stores/ui.store';
import type { CloudPlanAndUsageData } from '@/Interface';
const trialDaysLeft = computed(() => {
const { trialDaysLeft } = useCloudPlanStore();
return -1 * trialDaysLeft;
});
const PROGRESS_BAR_MINIMUM_THRESHOLD = 8;
const cloudPlanStore = useCloudPlanStore();
const trialDaysLeft = computed(() => -1 * cloudPlanStore.trialDaysLeft);
const messageText = computed(() => {
return locale.baseText('banners.trial.message', {
adjustToNumber: trialDaysLeft.value,
interpolate: { count: String(trialDaysLeft.value) },
});
});
const cloudPlanData = computed<CloudPlanAndUsageData | null>(() => {
const planData = cloudPlanStore.currentPlanData;
const usage = cloudPlanStore.currentUsageData;
if (!planData || !usage) return null;
return {
...planData,
usage,
};
});
const trialHasExecutionsLeft = computed(() => {
if (!cloudPlanData.value?.usage) return 0;
return cloudPlanData.value.usage.executions < cloudPlanData.value.monthlyExecutionsLimit;
});
const currentExecutionsWithThreshold = computed(() => {
if (!cloudPlanData.value?.usage) return 0;
const usedExecutions = cloudPlanData.value.usage.executions;
const executionsQuota = cloudPlanData.value.monthlyExecutionsLimit;
const threshold = (PROGRESS_BAR_MINIMUM_THRESHOLD * executionsQuota) / 100;
return usedExecutions < threshold ? threshold : usedExecutions;
});
const maxExecutions = computed(() => {
if (!cloudPlanData.value?.monthlyExecutionsLimit) return 0;
return cloudPlanData.value.monthlyExecutionsLimit;
});
const currentExecutions = computed(() => {
if (!cloudPlanData.value?.usage) return 0;
const usedExecutions = cloudPlanData.value.usage.executions;
const executionsQuota = cloudPlanData.value.monthlyExecutionsLimit;
return usedExecutions > executionsQuota ? executionsQuota : usedExecutions;
});
function onUpdatePlanClick() {
void useUIStore().goToUpgrade('canvas-nav', 'upgrade-canvas-nav', 'redirect');
@ -25,7 +56,31 @@ function onUpdatePlanClick() {
<template>
<BaseBanner name="TRIAL" theme="custom">
<template #mainContent>
<span>{{ messageText }}</span>
<div :class="$style.content">
<span>{{ messageText }}</span>
<span :class="$style.pipe"> | </span>
<div :class="$style.usageCounter">
<div :class="$style.progressBarDiv">
<progress
:class="[
trialHasExecutionsLeft ? $style.progressBarSuccess : $style.progressBarDanger,
$style.progressBar,
]"
:value="currentExecutionsWithThreshold"
:max="maxExecutions"
></progress>
</div>
<div :class="$style.executionsCountSection">
<N8nText size="xsmall" :color="trialHasExecutionsLeft ? 'text-dark' : 'danger'">
{{ currentExecutions }}/{{ maxExecutions }} </N8nText
>&nbsp;<N8nText
size="xsmall"
:color="trialHasExecutionsLeft ? 'text-dark' : 'danger'"
>{{ locale.baseText('executionUsage.label.executions') }}</N8nText
>
</div>
</div>
</div>
</template>
<template #trailingContent>
<n8n-button type="success" icon="gem" size="small" @click="onUpdatePlanClick">{{
@ -34,3 +89,86 @@ function onUpdatePlanClick() {
</template>
</BaseBanner>
</template>
<style module lang="scss">
.content {
display: flex;
align-items: center;
gap: var(--spacing-3xs);
}
.pipe {
display: inline-block;
font-size: var(--font-size-m);
padding: 0 0 2px;
}
.progressBarDiv {
display: flex;
align-items: center;
}
.progressBar {
width: 62.4px;
border: 0;
height: 5px;
border-radius: 20px;
background-color: var(--color-foreground-base);
}
.progressBar::-webkit-progress-bar {
width: 62.4px;
border: 0;
height: 5px;
border-radius: 20px;
background-color: var(--color-foreground-base);
}
.progressBar::-moz-progress-bar {
width: 62.4px;
border: 0;
height: 5px;
border-radius: 20px;
background-color: var(--color-foreground-base);
}
.progressBarSuccess::-moz-progress-bar {
background: var(--color-foreground-xdark);
border-radius: 20px;
}
.progressBarSuccess::-webkit-progress-value {
background: var(--color-foreground-xdark);
border-radius: 20px;
}
.progressBarDanger::-webkit-progress-value {
background: var(--color-danger);
border-radius: 20px;
}
.progressBarDanger::-moz-progress-bar {
background: var(--color-danger);
}
.usageText {
margin-left: var(--spacing-s);
margin-right: var(--spacing-s);
margin-top: var(--spacing-xs);
line-height: var(--spacing-xs);
}
.usageCounter {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: var(--font-size-3xs);
}
.danger {
color: var(--color-danger);
}
.executionsCountSection {
margin-left: var(--spacing-xs);
}
</style>

203
packages/editor-ui/src/components/executions/ExecutionsUsage.vue
View file

@ -1,203 +0,0 @@
<template>
<div :class="$style.container">
<div v-if="isTrialExpired" :class="$style.usageText">
<n8n-text size="small" color="danger">
{{ locale.baseText('executionUsage.expired.text') }}
</n8n-text>
</div>
<div v-else-if="!isTrialExpired && trialHasExecutionsLeft" :class="$style.usageText">
<i18n-t tag="span" keypath="executionUsage.currentUsage">
<template #text>
<n8n-text size="small" color="text-dark">
{{ locale.baseText('executionUsage.currentUsage.text') }}
</n8n-text>
</template>
<template #count>
<n8n-text size="small" :bold="true" color="warning">
{{
locale.baseText('executionUsage.currentUsage.count', {
adjustToNumber: daysLeftOnTrial || 0,
})
}}
</n8n-text>
</template>
</i18n-t>
</div>
<div v-else-if="!trialHasExecutionsLeft" :class="$style.usageText">
<n8n-text size="small">
{{ locale.baseText('executionUsage.ranOutOfExecutions.text') }}
</n8n-text>
</div>
<div v-if="!isTrialExpired" :class="$style.usageCounter">
<div :class="$style.progressBarDiv">
<progress
:class="[
trialHasExecutionsLeft ? $style.progressBarSuccess : $style.progressBarDanger,
$style.progressBar,
]"
:value="currentExecutionsWithThreshold"
:max="maxExecutions"
></progress>
</div>
<div :class="$style.executionsCountSection">
<n8n-text size="xsmall" :color="trialHasExecutionsLeft ? 'text-dark' : 'danger'">
{{ currentExecutions }}/{{ maxExecutions }}
</n8n-text>
<n8n-text size="xsmall" :color="trialHasExecutionsLeft ? 'text-dark' : 'danger'">{{
locale.baseText('executionUsage.label.executions')
}}</n8n-text>
</div>
</div>
<div :class="$style.upgradeButtonSection">
<n8n-button
:label="locale.baseText('executionUsage.button.upgrade')"
size="xmini"
icon="gem"
type="success"
:block="true"
@click="onUpgradeClicked"
/>
</div>
</div>
</template>
<script setup lang="ts">
import { i18n as locale } from '@/plugins/i18n';
import { DateTime } from 'luxon';
import type { CloudPlanAndUsageData } from '@/Interface';
import { computed } from 'vue';
import { useUIStore } from '@/stores/ui.store';
const PROGRESS_BAR_MINIMUM_THRESHOLD = 8;
const props = defineProps<{ cloudPlanData: CloudPlanAndUsageData | null }>();
const now = DateTime.utc();
const daysLeftOnTrial = computed(() => {
const { days = 0 } = getPlanExpirationDate().diff(now, ['days']).toObject();
return Math.ceil(days);
});
const isTrialExpired = computed(() => {
if (!props.cloudPlanData?.expirationDate) return false;
const trialEndsAt = DateTime.fromISO(props.cloudPlanData.expirationDate);
return now.toMillis() > trialEndsAt.toMillis();
});
const getPlanExpirationDate = () => DateTime.fromISO(props?.cloudPlanData?.expirationDate ?? '');
const trialHasExecutionsLeft = computed(() => {
if (!props.cloudPlanData?.usage) return 0;
return props.cloudPlanData.usage.executions < props.cloudPlanData.monthlyExecutionsLimit;
});
const currentExecutions = computed(() => {
if (!props.cloudPlanData?.usage) return 0;
const usedExecutions = props.cloudPlanData.usage.executions;
const executionsQuota = props.cloudPlanData.monthlyExecutionsLimit;
return usedExecutions > executionsQuota ? executionsQuota : usedExecutions;
});
const currentExecutionsWithThreshold = computed(() => {
if (!props.cloudPlanData?.usage) return 0;
const usedExecutions = props.cloudPlanData.usage.executions;
const executionsQuota = props.cloudPlanData.monthlyExecutionsLimit;
const threshold = (PROGRESS_BAR_MINIMUM_THRESHOLD * executionsQuota) / 100;
return usedExecutions < threshold ? threshold : usedExecutions;
});
const maxExecutions = computed(() => {
if (!props.cloudPlanData?.monthlyExecutionsLimit) return 0;
return props.cloudPlanData.monthlyExecutionsLimit;
});
const onUpgradeClicked = () => {
void useUIStore().goToUpgrade('canvas-nav', 'upgrade-canvas-nav', 'redirect');
};
</script>
<style module lang="scss">
.container {
display: flex;
flex-direction: column;
background-color: var(--color-background-light);
border: var(--border-base);
border-right: 0;
}
.progressBarDiv {
display: flex;
align-items: center;
}
.progressBar {
width: 62.4px;
border: 0;
height: 5px;
border-radius: 20px;
background-color: var(--color-foreground-base);
}
.progressBar::-webkit-progress-bar {
width: 62.4px;
border: 0;
height: 5px;
border-radius: 20px;
background-color: var(--color-foreground-base);
}
.progressBar::-moz-progress-bar {
width: 62.4px;
border: 0;
height: 5px;
border-radius: 20px;
background-color: var(--color-foreground-base);
}
.progressBarSuccess::-moz-progress-bar {
background: var(--color-foreground-xdark);
border-radius: 20px;
}
.progressBarSuccess::-webkit-progress-value {
background: var(--color-foreground-xdark);
border-radius: 20px;
}
.progressBarDanger::-webkit-progress-value {
background: var(--color-danger);
border-radius: 20px;
}
.progressBarDanger::-moz-progress-bar {
background: var(--color-danger);
}
.usageText {
margin-left: var(--spacing-s);
margin-right: var(--spacing-s);
margin-top: var(--spacing-xs);
line-height: var(--spacing-xs);
}
.usageCounter {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: var(--spacing-2xs);
font-size: var(--font-size-3xs);
}
.danger {
color: var(--color-danger);
}
.executionsCountSection {
margin-left: var(--spacing-xs);
}
.upgradeButtonSection {
margin: var(--spacing-s);
}
</style>