mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-12 13:27:31 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Show placeholder nodes when no trigger nodes available on new canvas (no-changelog) (#11106)

Browse source
This commit is contained in:
Alex Grozav 2024-10-21 13:09:03 +03:00 committed by GitHub
parent 3b2f63e248
commit f78a7dd3e1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 15 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
packages/editor-ui/src/components/canvas/WorkflowCanvas.spec.ts
View file

@ -100,6 +100,7 @@ describe('WorkflowCanvas', () => {
workflow, workflow,
workflowObject, workflowObject,
fallbackNodes, fallbackNodes,
showFallbackNodes: true,
}, },
}); });
@ -109,9 +110,8 @@ describe('WorkflowCanvas', () => {
expect(container.querySelector(`[data-id="${fallbackNodes[0].id}"]`)).toBeInTheDocument(); expect(container.querySelector(`[data-id="${fallbackNodes[0].id}"]`)).toBeInTheDocument();
}); });
it('should not render fallback nodes when non-sticky nodes are present', async () => { it('should not render fallback nodes when showFallbackNodes is false', async () => {
const nonStickyNodes = [createTestNode({ id: '1', name: 'Non-Sticky Node 1' })]; const nodes = [createTestNode({ id: '1', name: 'Non-Sticky Node 1' })];
const stickyNodes = [createTestNode({ id: '2', name: 'Sticky Node', type: STICKY_NODE_TYPE })];
const fallbackNodes = [ const fallbackNodes = [
createTestNode({ createTestNode({
id: CanvasNodeRenderType.AddNodes, id: CanvasNodeRenderType.AddNodes,
@ -123,7 +123,7 @@ describe('WorkflowCanvas', () => {
const workflow = createTestWorkflow({ const workflow = createTestWorkflow({
id: '1', id: '1',
name: 'Test Workflow', name: 'Test Workflow',
nodes: [...nonStickyNodes, ...stickyNodes], nodes,
connections: {}, connections: {},
}); });
@ -134,13 +134,13 @@ describe('WorkflowCanvas', () => {
workflow, workflow,
workflowObject, workflowObject,
fallbackNodes, fallbackNodes,
showFallbackNodes: false,
}, },
}); });
await waitFor(() => expect(container.querySelectorAll('.vue-flow__node')).toHaveLength(2)); await waitFor(() => expect(container.querySelectorAll('.vue-flow__node')).toHaveLength(1));
expect(container.querySelector(`[data-id="${nonStickyNodes[0].id}"]`)).toBeInTheDocument(); expect(container.querySelector(`[data-id="${nodes[0].id}"]`)).toBeInTheDocument();
expect(container.querySelector(`[data-id="${stickyNodes[0].id}"]`)).toBeInTheDocument();
expect(container.querySelector(`[data-id="${fallbackNodes[0].id}"]`)).not.toBeInTheDocument(); expect(container.querySelector(`[data-id="${fallbackNodes[0].id}"]`)).not.toBeInTheDocument();
}); });
}); });

11
packages/editor-ui/src/components/canvas/WorkflowCanvas.vue
View file

@ -7,7 +7,6 @@ import { useCanvasMapping } from '@/composables/useCanvasMapping';
import type { EventBus } from 'n8n-design-system'; import type { EventBus } from 'n8n-design-system';
import { createEventBus } from 'n8n-design-system'; import { createEventBus } from 'n8n-design-system';
import type { CanvasEventBusEvents } from '@/types'; import type { CanvasEventBusEvents } from '@/types';
import { STICKY_NODE_TYPE } from '@/constants';
defineOptions({ defineOptions({
inheritAttrs: false, inheritAttrs: false,
@ -19,6 +18,7 @@ const props = withDefaults(
workflow: IWorkflowDb; workflow: IWorkflowDb;
workflowObject: Workflow; workflowObject: Workflow;
fallbackNodes?: IWorkflowDb['nodes']; fallbackNodes?: IWorkflowDb['nodes'];
showFallbackNodes?: boolean;
eventBus?: EventBus<CanvasEventBusEvents>; eventBus?: EventBus<CanvasEventBusEvents>;
readOnly?: boolean; readOnly?: boolean;
executing?: boolean; executing?: boolean;
@ -27,6 +27,7 @@ const props = withDefaults(
id: 'canvas', id: 'canvas',
eventBus: () => createEventBus<CanvasEventBusEvents>(), eventBus: () => createEventBus<CanvasEventBusEvents>(),
fallbackNodes: () => [], fallbackNodes: () => [],
showFallbackNodes: true,
}, },
); );
@ -36,11 +37,9 @@ const workflow = toRef(props, 'workflow');
const workflowObject = toRef(props, 'workflowObject'); const workflowObject = toRef(props, 'workflowObject');
const nodes = computed(() => { const nodes = computed(() => {
const stickyNoteNodes = props.workflow.nodes.filter((node) => node.type === STICKY_NODE_TYPE); return props.showFallbackNodes
? [...props.workflow.nodes, ...props.fallbackNodes]
return props.workflow.nodes.length > stickyNoteNodes.length : props.workflow.nodes;
? props.workflow.nodes
: [...props.fallbackNodes, ...stickyNoteNodes];
}); });
const connections = computed(() => props.workflow.connections); const connections = computed(() => props.workflow.connections);

3
packages/editor-ui/src/views/NodeView.v2.vue
View file

@ -241,6 +241,8 @@ const fallbackNodes = computed<INodeUi[]>(() =>
], ],
); );
const showFallbackNodes = computed(() => triggerNodes.value.length === 0);
const keyBindingsEnabled = computed(() => { const keyBindingsEnabled = computed(() => {
return !ndvStore.activeNode && uiStore.activeModals.length === 0; return !ndvStore.activeNode && uiStore.activeModals.length === 0;
}); });
@ -1566,6 +1568,7 @@ onBeforeUnmount(() => {
:workflow="editableWorkflow" :workflow="editableWorkflow"
:workflow-object="editableWorkflowObject" :workflow-object="editableWorkflowObject"
:fallback-nodes="fallbackNodes" :fallback-nodes="fallbackNodes"
:show-fallback-nodes="showFallbackNodes"
:event-bus="canvasEventBus" :event-bus="canvasEventBus"
:read-only="isCanvasReadOnly" :read-only="isCanvasReadOnly"
:executing="isWorkflowRunning" :executing="isWorkflowRunning"