mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 10:02:05 +00:00
refactor(editor): Standardize components sections order (no-changelog) (#10540)
This commit is contained in:
Ricardo Espinoza
@@ -1,138 +1,3 @@
|
||||
<template>
|
||||
<RunData
|
||||
:node="currentNode"
|
||||
:nodes="isMappingMode ? rootNodesParents : parentNodes"
|
||||
:workflow="workflow"
|
||||
:run-index="runIndex"
|
||||
:linked-runs="linkedRuns"
|
||||
:can-link-runs="!mappedNode && canLinkRuns"
|
||||
:too-much-data-title="$locale.baseText('ndv.input.tooMuchData.title')"
|
||||
:no-data-in-branch-message="$locale.baseText('ndv.input.noOutputDataInBranch')"
|
||||
:is-executing="isExecutingPrevious"
|
||||
:executing-message="$locale.baseText('ndv.input.executingPrevious')"
|
||||
:push-ref="pushRef"
|
||||
:override-outputs="connectedCurrentNodeOutputs"
|
||||
:mapping-enabled="isMappingEnabled"
|
||||
:distance-from-active="currentNodeDepth"
|
||||
:is-production-execution-preview="isProductionExecutionPreview"
|
||||
:is-pane-active="isPaneActive"
|
||||
pane-type="input"
|
||||
data-test-id="ndv-input-panel"
|
||||
@activate-pane="activatePane"
|
||||
@item-hover="$emit('itemHover', $event)"
|
||||
@link-run="onLinkRun"
|
||||
@unlink-run="onUnlinkRun"
|
||||
@run-change="onRunIndexChange"
|
||||
@table-mounted="$emit('tableMounted', $event)"
|
||||
@search="$emit('search', $event)"
|
||||
>
|
||||
<template #header>
|
||||
<div :class="$style.titleSection">
|
||||
<span :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
|
||||
<n8n-radio-buttons
|
||||
v-if="isActiveNodeConfig && !readOnly"
|
||||
:options="inputModes"
|
||||
:model-value="inputMode"
|
||||
@update:model-value="onInputModeChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #input-select>
|
||||
<InputNodeSelect
|
||||
v-if="parentNodes.length && currentNodeName"
|
||||
:model-value="currentNodeName"
|
||||
:workflow="workflow"
|
||||
:nodes="parentNodes"
|
||||
@update:model-value="onInputNodeChange"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="isMappingMode" #before-data>
|
||||
<!--
|
||||
Hide the run linking buttons for both input and ouput panels when in 'Mapping Mode' because the run indices wouldn't match.
|
||||
Although this is not the most elegant solution, it's straightforward and simpler than introducing a new props and logic to handle this.
|
||||
-->
|
||||
<component :is="'style'">button.linkRun { display: none }</component>
|
||||
<div :class="$style.mappedNode">
|
||||
<InputNodeSelect
|
||||
:model-value="mappedNode"
|
||||
:workflow="workflow"
|
||||
:nodes="rootNodesParents"
|
||||
@update:model-value="onMappedNodeSelected"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #node-not-run>
|
||||
<div
|
||||
v-if="(isActiveNodeConfig && rootNode) || parentNodes.length"
|
||||
:class="$style.noOutputData"
|
||||
>
|
||||
<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
|
||||
$locale.baseText('ndv.input.noOutputData.title')
|
||||
}}</n8n-text>
|
||||
<n8n-tooltip v-if="!readOnly" :visible="showDraggableHint && showDraggableHintWithDelay">
|
||||
<template #content>
|
||||
<div
|
||||
v-html="
|
||||
$locale.baseText('dataMapping.dragFromPreviousHint', {
|
||||
interpolate: { name: focusedMappableInput },
|
||||
})
|
||||
"
|
||||
></div>
|
||||
</template>
|
||||
<NodeExecuteButton
|
||||
type="secondary"
|
||||
hide-icon
|
||||
:transparent="true"
|
||||
:node-name="isActiveNodeConfig ? rootNode : currentNodeName ?? ''"
|
||||
:label="$locale.baseText('ndv.input.noOutputData.executePrevious')"
|
||||
telemetry-source="inputs"
|
||||
data-test-id="execute-previous-node"
|
||||
@execute="onNodeExecute"
|
||||
/>
|
||||
</n8n-tooltip>
|
||||
<n8n-text v-if="!readOnly" tag="div" size="small">
|
||||
{{ $locale.baseText('ndv.input.noOutputData.hint') }}
|
||||
</n8n-text>
|
||||
</div>
|
||||
<div v-else :class="$style.notConnected">
|
||||
<div>
|
||||
<WireMeUp />
|
||||
</div>
|
||||
<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
|
||||
$locale.baseText('ndv.input.notConnected.title')
|
||||
}}</n8n-text>
|
||||
<n8n-text tag="div">
|
||||
{{ $locale.baseText('ndv.input.notConnected.message') }}
|
||||
<a
|
||||
href="https://docs.n8n.io/workflows/connections/"
|
||||
target="_blank"
|
||||
@click="onConnectionHelpClick"
|
||||
>
|
||||
{{ $locale.baseText('ndv.input.notConnected.learnMore') }}
|
||||
</a>
|
||||
</n8n-text>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #no-output-data>
|
||||
<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
|
||||
$locale.baseText('ndv.input.noOutputData')
|
||||
}}</n8n-text>
|
||||
</template>
|
||||
|
||||
<template #recovered-artificial-output-data>
|
||||
<div :class="$style.recoveredOutputData">
|
||||
<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
|
||||
$locale.baseText('executionDetails.executionFailed.recoveredNodeTitle')
|
||||
}}</n8n-text>
|
||||
<n8n-text>
|
||||
{{ $locale.baseText('executionDetails.executionFailed.recoveredNodeMessage') }}
|
||||
</n8n-text>
|
||||
</div>
|
||||
</template>
|
||||
</RunData>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import type { INodeUi } from '@/Interface';
|
||||
import {
|
||||
@@ -468,6 +333,141 @@ export default defineComponent({
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RunData
|
||||
:node="currentNode"
|
||||
:nodes="isMappingMode ? rootNodesParents : parentNodes"
|
||||
:workflow="workflow"
|
||||
:run-index="runIndex"
|
||||
:linked-runs="linkedRuns"
|
||||
:can-link-runs="!mappedNode && canLinkRuns"
|
||||
:too-much-data-title="$locale.baseText('ndv.input.tooMuchData.title')"
|
||||
:no-data-in-branch-message="$locale.baseText('ndv.input.noOutputDataInBranch')"
|
||||
:is-executing="isExecutingPrevious"
|
||||
:executing-message="$locale.baseText('ndv.input.executingPrevious')"
|
||||
:push-ref="pushRef"
|
||||
:override-outputs="connectedCurrentNodeOutputs"
|
||||
:mapping-enabled="isMappingEnabled"
|
||||
:distance-from-active="currentNodeDepth"
|
||||
:is-production-execution-preview="isProductionExecutionPreview"
|
||||
:is-pane-active="isPaneActive"
|
||||
pane-type="input"
|
||||
data-test-id="ndv-input-panel"
|
||||
@activate-pane="activatePane"
|
||||
@item-hover="$emit('itemHover', $event)"
|
||||
@link-run="onLinkRun"
|
||||
@unlink-run="onUnlinkRun"
|
||||
@run-change="onRunIndexChange"
|
||||
@table-mounted="$emit('tableMounted', $event)"
|
||||
@search="$emit('search', $event)"
|
||||
>
|
||||
<template #header>
|
||||
<div :class="$style.titleSection">
|
||||
<span :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
|
||||
<n8n-radio-buttons
|
||||
v-if="isActiveNodeConfig && !readOnly"
|
||||
:options="inputModes"
|
||||
:model-value="inputMode"
|
||||
@update:model-value="onInputModeChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #input-select>
|
||||
<InputNodeSelect
|
||||
v-if="parentNodes.length && currentNodeName"
|
||||
:model-value="currentNodeName"
|
||||
:workflow="workflow"
|
||||
:nodes="parentNodes"
|
||||
@update:model-value="onInputNodeChange"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="isMappingMode" #before-data>
|
||||
<!--
|
||||
Hide the run linking buttons for both input and ouput panels when in 'Mapping Mode' because the run indices wouldn't match.
|
||||
Although this is not the most elegant solution, it's straightforward and simpler than introducing a new props and logic to handle this.
|
||||
-->
|
||||
<component :is="'style'">button.linkRun { display: none }</component>
|
||||
<div :class="$style.mappedNode">
|
||||
<InputNodeSelect
|
||||
:model-value="mappedNode"
|
||||
:workflow="workflow"
|
||||
:nodes="rootNodesParents"
|
||||
@update:model-value="onMappedNodeSelected"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #node-not-run>
|
||||
<div
|
||||
v-if="(isActiveNodeConfig && rootNode) || parentNodes.length"
|
||||
:class="$style.noOutputData"
|
||||
>
|
||||
<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
|
||||
$locale.baseText('ndv.input.noOutputData.title')
|
||||
}}</n8n-text>
|
||||
<n8n-tooltip v-if="!readOnly" :visible="showDraggableHint && showDraggableHintWithDelay">
|
||||
<template #content>
|
||||
<div
|
||||
v-html="
|
||||
$locale.baseText('dataMapping.dragFromPreviousHint', {
|
||||
interpolate: { name: focusedMappableInput },
|
||||
})
|
||||
"
|
||||
></div>
|
||||
</template>
|
||||
<NodeExecuteButton
|
||||
type="secondary"
|
||||
hide-icon
|
||||
:transparent="true"
|
||||
:node-name="isActiveNodeConfig ? rootNode : currentNodeName ?? ''"
|
||||
:label="$locale.baseText('ndv.input.noOutputData.executePrevious')"
|
||||
telemetry-source="inputs"
|
||||
data-test-id="execute-previous-node"
|
||||
@execute="onNodeExecute"
|
||||
/>
|
||||
</n8n-tooltip>
|
||||
<n8n-text v-if="!readOnly" tag="div" size="small">
|
||||
{{ $locale.baseText('ndv.input.noOutputData.hint') }}
|
||||
</n8n-text>
|
||||
</div>
|
||||
<div v-else :class="$style.notConnected">
|
||||
<div>
|
||||
<WireMeUp />
|
||||
</div>
|
||||
<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
|
||||
$locale.baseText('ndv.input.notConnected.title')
|
||||
}}</n8n-text>
|
||||
<n8n-text tag="div">
|
||||
{{ $locale.baseText('ndv.input.notConnected.message') }}
|
||||
<a
|
||||
href="https://docs.n8n.io/workflows/connections/"
|
||||
target="_blank"
|
||||
@click="onConnectionHelpClick"
|
||||
>
|
||||
{{ $locale.baseText('ndv.input.notConnected.learnMore') }}
|
||||
</a>
|
||||
</n8n-text>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #no-output-data>
|
||||
<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
|
||||
$locale.baseText('ndv.input.noOutputData')
|
||||
}}</n8n-text>
|
||||
</template>
|
||||
|
||||
<template #recovered-artificial-output-data>
|
||||
<div :class="$style.recoveredOutputData">
|
||||
<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
|
||||
$locale.baseText('executionDetails.executionFailed.recoveredNodeTitle')
|
||||
}}</n8n-text>
|
||||
<n8n-text>
|
||||
{{ $locale.baseText('executionDetails.executionFailed.recoveredNodeMessage') }}
|
||||
</n8n-text>
|
||||
</div>
|
||||
</template>
|
||||
</RunData>
|
||||
</template>
|
||||
|
||||
<style lang="scss" module>
|
||||
.mappedNode {
|
||||
padding: 0 var(--spacing-s) var(--spacing-s);
|
||||
|
||||
Reference in New Issue
Block a user