mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-13 16:14:07 -08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat(editor): Show strikethrough line for all single main input and single main output nodes in new canvas (no-changelog) (#10925)

Browse source
This commit is contained in:
Alex Grozav 2024-09-25 11:28:07 +03:00 committed by GitHub
parent bdc0622f59
commit a6cfb3b0c5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 52 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.spec.ts
View file

@ -4,7 +4,7 @@ import { NodeConnectionType } from 'n8n-workflow';
import { createCanvasNodeProvide } from '@/__tests__/data';
import { createTestingPinia } from '@pinia/testing';
import { setActivePinia } from 'pinia';
import { CanvasNodeRenderType } from '@/types';
import { CanvasConnectionMode, CanvasNodeRenderType } from '@/types';
const renderComponent = createComponentRenderer(CanvasNodeDefault);
@ -158,6 +158,36 @@ describe('CanvasNodeDefault', () => {
});
expect(getByText('Test Node').closest('.node')).not.toHaveClass('disabled');
});
it('should render strike-through when node is disabled and has node input and output handles', () => {
const { container } = renderComponent({
global: {
provide: {
...createCanvasNodeProvide({
data: {
disabled: true,
inputs: [{ type: NodeConnectionType.Main, index: 0 }],
outputs: [{ type: NodeConnectionType.Main, index: 0 }],
connections: {
[CanvasConnectionMode.Input]: {
[NodeConnectionType.Main]: [
[{ node: 'node', type: NodeConnectionType.Main, index: 0 }],
],
},
[CanvasConnectionMode.Output]: {
[NodeConnectionType.Main]: [
[{ node: 'node', type: NodeConnectionType.Main, index: 0 }],
],
},
},
},
}),
},
},
});
expect(container.querySelector('.disabledStrikeThrough')).toBeVisible();
});
});
describe('running', () => {

20
packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
View file

@ -30,7 +30,14 @@ const {
hasIssues,
render,
} = useCanvasNode();
const { mainOutputs, mainInputs, nonMainInputs, requiredNonMainInputs } = useNodeConnections({
const {
mainOutputs,
mainOutputConnections,
mainInputs,
mainInputConnections,
nonMainInputs,
requiredNonMainInputs,
} = useNodeConnections({
inputs,
outputs,
connections,
@ -86,6 +93,15 @@ const dataTestId = computed(() => {
return `canvas-${type}-node`;
});
const isStrikethroughVisible = computed(() => {
const isSingleMainInputNode =
mainInputs.value.length === 1 && mainInputConnections.value.length <= 1;
const isSingleMainOutputNode =
mainOutputs.value.length === 1 && mainOutputConnections.value.length <= 1;
return isDisabled.value && isSingleMainInputNode && isSingleMainOutputNode;
});
function openContextMenu(event: MouseEvent) {
emit('open:contextmenu', event);
}
@ -103,7 +119,7 @@ function openContextMenu(event: MouseEvent) {
</div>
</N8nTooltip>
<CanvasNodeStatusIcons :class="$style.statusIcons" />
<CanvasNodeDisabledStrikeThrough v-if="isDisabled" />
<CanvasNodeDisabledStrikeThrough v-if="isStrikethroughVisible" />
<div :class="$style.description">
<div v-if="label" :class="$style.label">
{{ label }}

28
packages/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeDisabledStrikeThrough.spec.ts
View file

@ -1,36 +1,12 @@
import CanvasNodeDisabledStrikeThrough from '@/components/canvas/elements/nodes/render-types/parts/CanvasNodeDisabledStrikeThrough.vue';
import { createComponentRenderer } from '@/__tests__/render';
import { NodeConnectionType } from 'n8n-workflow';
import { createCanvasNodeProvide } from '@/__tests__/data';
import { CanvasConnectionMode } from '@/types';
const renderComponent = createComponentRenderer(CanvasNodeDisabledStrikeThrough);
describe('CanvasNodeDisabledStrikeThrough', () => {
it('should render node correctly', () => {
const { container } = renderComponent({
global: {
provide: {
...createCanvasNodeProvide({
data: {
connections: {
[CanvasConnectionMode.Input]: {
[NodeConnectionType.Main]: [
[{ node: 'node', type: NodeConnectionType.Main, index: 0 }],
],
},
[CanvasConnectionMode.Output]: {
[NodeConnectionType.Main]: [
[{ node: 'node', type: NodeConnectionType.Main, index: 0 }],
],
},
},
},
}),
},
},
});
const { container } = renderComponent();
expect(container.firstChild).toBeVisible();
expect(container.firstChild).toHaveClass('disabledStrikeThrough');
});
});

15
packages/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeDisabledStrikeThrough.vue
View file

@ -1,21 +1,8 @@
<script setup lang="ts">
import { computed, useCssModule } from 'vue';
import { useNodeConnections } from '@/composables/useNodeConnections';
import { useCanvasNode } from '@/composables/useCanvasNode';
const $style = useCssModule();
const { inputs, outputs, connections } = useCanvasNode();
const { mainInputConnections, mainOutputConnections } = useNodeConnections({
inputs,
outputs,
connections,
});
const isVisible = computed(
() => mainInputConnections.value.length === 1 && mainOutputConnections.value.length === 1,
);
const isSuccessStatus = computed(
() => false,
// @TODO Implement this
@ -31,7 +18,7 @@ const classes = computed(() => {
</script>
<template>
<div v-if="isVisible" :class="classes"></div>
<div :class="classes"></div>
</template>
<style lang="scss" module>