admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-16 17:46:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): Workflow diff UX improvements (#19047)

Browse Source
This commit is contained in:
Raúl Gómez Morales
2025-09-03 16:48:10 +02:00
committed by GitHub
parent fc094518d6
commit 277685e9e5
6 changed files with 46 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/frontend/@n8n/i18n/src/locales/en.json
View File

@@ -3438,6 +3438,7 @@
"workflowDiff.changes": "Changes", "workflowDiff.changes": "Changes",
"workflowDiff.nodes": "Nodes", "workflowDiff.nodes": "Nodes",
"workflowDiff.connectors": "Connectors", "workflowDiff.connectors": "Connectors",
"workflowDiff.compare": "Compare versions",
"workflowDiff.settings": "Settings", "workflowDiff.settings": "Settings",
"workflowDiff.local": "Local", "workflowDiff.local": "Local",
"workflowDiff.remote": "Remote ({branchName})", "workflowDiff.remote": "Remote ({branchName})",

25
packages/frontend/editor-ui/src/components/SourceControlPullModal.ee.vue
View File

@@ -15,7 +15,15 @@ import {
notifyUserAboutPullWorkFolderOutcome, notifyUserAboutPullWorkFolderOutcome,
} from '@/utils/sourceControlUtils'; } from '@/utils/sourceControlUtils';
import { type SourceControlledFile, SOURCE_CONTROL_FILE_TYPE } from '@n8n/api-types'; import { type SourceControlledFile, SOURCE_CONTROL_FILE_TYPE } from '@n8n/api-types';
import { N8nBadge, N8nButton, N8nHeading, N8nInfoTip, N8nLink, N8nText } from '@n8n/design-system'; import {
N8nBadge,
N8nButton,
N8nHeading,
N8nInfoTip,
N8nLink,
N8nText,
N8nTooltip,
} from '@n8n/design-system';
import { useI18n } from '@n8n/i18n'; import { useI18n } from '@n8n/i18n';
import type { EventBus } from '@n8n/utils/event-bus'; import type { EventBus } from '@n8n/utils/event-bus';
import dateformat from 'dateformat'; import dateformat from 'dateformat';
@@ -355,12 +363,17 @@ onMounted(() => {
{{ getStatusText(file.status) }} {{ getStatusText(file.status) }}
</N8nBadge> </N8nBadge>
<template v-if="isWorkflowDiffsEnabled"> <template v-if="isWorkflowDiffsEnabled">
<N8nIconButton <N8nTooltip
v-if="file.type === SOURCE_CONTROL_FILE_TYPE.workflow" v-if="file.type === SOURCE_CONTROL_FILE_TYPE.workflow"
icon="file-diff" :content="i18n.baseText('workflowDiff.compare')"
type="secondary" placement="top"
@click="openDiffModal(file.id)" >
/> <N8nIconButton
icon="file-diff"
type="secondary"
@click="openDiffModal(file.id)"
/>
</N8nTooltip>
</template> </template>
</span> </span>
</div> </div>

16
packages/frontend/editor-ui/src/components/SourceControlPushModal.ee.vue
View File

@@ -33,6 +33,7 @@ import {
N8nPopover, N8nPopover,
N8nSelect, N8nSelect,
N8nText, N8nText,
N8nTooltip,
} from '@n8n/design-system'; } from '@n8n/design-system';
import { useI18n } from '@n8n/i18n'; import { useI18n } from '@n8n/i18n';
import type { EventBus } from '@n8n/utils/event-bus'; import type { EventBus } from '@n8n/utils/event-bus';
@@ -889,12 +890,17 @@ onMounted(async () => {
{{ getStatusText(file.status) }} {{ getStatusText(file.status) }}
</N8nBadge> </N8nBadge>
<template v-if="isWorkflowDiffsEnabled"> <template v-if="isWorkflowDiffsEnabled">
<N8nIconButton <N8nTooltip
v-if="file.type === SOURCE_CONTROL_FILE_TYPE.workflow" v-if="file.type === SOURCE_CONTROL_FILE_TYPE.workflow"
icon="file-diff" :content="i18n.baseText('workflowDiff.compare')"
type="secondary" placement="top"
@click="openDiffModal(file.id)" >
/> <N8nIconButton
icon="file-diff"
type="secondary"
@click="openDiffModal(file.id)"
/>
</N8nTooltip>
</template> </template>
</span> </span>
</N8nCheckbox> </N8nCheckbox>

4
packages/frontend/editor-ui/src/features/workflow-diff/NodeDiff.vue
View File

@@ -40,6 +40,10 @@ const props = withDefaults(
border: none; border: none;
border-radius: 0; border-radius: 0;
:global(.blob-num) {
display: none;
}
&:global([theme='dark']) { &:global([theme='dark']) {
--fgColor-default: var(--color-text-dark); --fgColor-default: var(--color-text-dark);
--bgColor-default: var(--color-background-light); --bgColor-default: var(--color-background-light);

2
packages/frontend/editor-ui/src/features/workflow-diff/WorkflowDiffModal.test.ts
View File

@@ -133,7 +133,7 @@ describe('WorkflowDiffModal', () => {
// Component should render with the basic structure // Component should render with the basic structure
expect(container.querySelector('.header')).toBeInTheDocument(); expect(container.querySelector('.header')).toBeInTheDocument();
expect(container.querySelector('h1')).toBeInTheDocument(); expect(container.querySelector('h4')).toBeInTheDocument();
}); });
it('should initialize with correct props', () => { it('should initialize with correct props', () => {

13
packages/frontend/editor-ui/src/features/workflow-diff/WorkflowDiffModal.vue
View File

@@ -267,9 +267,16 @@ const nodeDiffs = computed(() => {
const targetNode = targetWorkFlow.value?.state.value?.workflow?.nodes.find( const targetNode = targetWorkFlow.value?.state.value?.workflow?.nodes.find(
(node) => node.id === selectedDetailId.value, (node) => node.id === selectedDetailId.value,
); );
function replacer(key: string, value: unknown) {
if (key === 'position') {
return undefined; // exclude this property
}
return value;
}
return { return {
oldString: JSON.stringify(sourceNode, null, 2) ?? '', oldString: JSON.stringify(sourceNode, replacer, 2) ?? '',
newString: JSON.stringify(targetNode, null, 2) ?? '', newString: JSON.stringify(targetNode, replacer, 2) ?? '',
}; };
}); });
@@ -399,7 +406,7 @@ const modifiers = [
icon-size="large" icon-size="large"
@click="handleBeforeClose" @click="handleBeforeClose"
></N8nIconButton> ></N8nIconButton>
<N8nHeading tag="h1" size="xlarge"> <N8nHeading tag="h4" size="medium">
{{ {{
sourceWorkFlow.state.value?.workflow?.name || sourceWorkFlow.state.value?.workflow?.name ||
targetWorkFlow.state.value?.workflow?.name targetWorkFlow.state.value?.workflow?.name