mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-18 18:41:14 +00:00
refactor(editor): Standardize components sections order (no-changelog) (#10540)
This commit is contained in:
Ricardo Espinoza
@@ -1,143 +1,3 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:model-value="(!!activeNode || renaming) && !isActiveStickyNode"
|
||||
:before-close="close"
|
||||
:show-close="false"
|
||||
class="data-display-wrapper ndv-wrapper"
|
||||
overlay-class="data-display-overlay"
|
||||
width="auto"
|
||||
append-to-body
|
||||
data-test-id="ndv"
|
||||
:data-has-output-connection="hasOutputConnection"
|
||||
>
|
||||
<n8n-tooltip
|
||||
placement="bottom-start"
|
||||
:visible="showTriggerWaitingWarning"
|
||||
:disabled="!showTriggerWaitingWarning"
|
||||
>
|
||||
<template #content>
|
||||
<div :class="$style.triggerWarning">
|
||||
{{ $locale.baseText('ndv.backToCanvas.waitingForTriggerWarning') }}
|
||||
</div>
|
||||
</template>
|
||||
<div :class="$style.backToCanvas" data-test-id="back-to-canvas" @click="close">
|
||||
<n8n-icon icon="arrow-left" color="text-xlight" size="medium" />
|
||||
<n8n-text color="text-xlight" size="medium" :bold="true">
|
||||
{{ $locale.baseText('ndv.backToCanvas') }}
|
||||
</n8n-text>
|
||||
</div>
|
||||
</n8n-tooltip>
|
||||
|
||||
<div
|
||||
v-if="activeNode"
|
||||
ref="container"
|
||||
class="data-display"
|
||||
tabindex="0"
|
||||
@keydown.capture="onKeyDown"
|
||||
>
|
||||
<div :class="$style.modalBackground" @click="close"></div>
|
||||
<NDVDraggablePanels
|
||||
:key="activeNode.name"
|
||||
:is-trigger-node="isTriggerNode"
|
||||
:hide-input-and-output="activeNodeType === null"
|
||||
:position="isTriggerNode && !showTriggerPanel ? 0 : undefined"
|
||||
:is-draggable="!isTriggerNode"
|
||||
:has-double-width="activeNodeType?.parameterPane === 'wide'"
|
||||
:node-type="activeNodeType"
|
||||
@switch-selected-node="onSwitchSelectedNode"
|
||||
@open-connection-node-creator="onOpenConnectionNodeCreator"
|
||||
@close="close"
|
||||
@init="onPanelsInit"
|
||||
@dragstart="onDragStart"
|
||||
@dragend="onDragEnd"
|
||||
>
|
||||
<template v-if="showTriggerPanel || !isTriggerNode" #input>
|
||||
<TriggerPanel
|
||||
v-if="showTriggerPanel"
|
||||
:node-name="activeNode.name"
|
||||
:push-ref="pushRef"
|
||||
@execute="onNodeExecute"
|
||||
@activate="onWorkflowActivate"
|
||||
/>
|
||||
<InputPanel
|
||||
v-else-if="!isTriggerNode"
|
||||
:workflow="workflowObject"
|
||||
:can-link-runs="canLinkRuns"
|
||||
:run-index="inputRun"
|
||||
:linked-runs="linked"
|
||||
:current-node-name="inputNodeName"
|
||||
:push-ref="pushRef"
|
||||
:read-only="readOnly || hasForeignCredential"
|
||||
:is-production-execution-preview="isProductionExecutionPreview"
|
||||
:is-pane-active="isInputPaneActive"
|
||||
@activate-pane="activateInputPane"
|
||||
@link-run="onLinkRunToInput"
|
||||
@unlink-run="() => onUnlinkRun('input')"
|
||||
@run-change="onRunInputIndexChange"
|
||||
@open-settings="openSettings"
|
||||
@change-input-node="onInputNodeChange"
|
||||
@execute="onNodeExecute"
|
||||
@table-mounted="onInputTableMounted"
|
||||
@item-hover="onInputItemHover"
|
||||
@search="onSearch"
|
||||
/>
|
||||
</template>
|
||||
<template #output>
|
||||
<OutputPanel
|
||||
data-test-id="output-panel"
|
||||
:workflow="workflowObject"
|
||||
:can-link-runs="canLinkRuns"
|
||||
:run-index="outputRun"
|
||||
:linked-runs="linked"
|
||||
:push-ref="pushRef"
|
||||
:is-read-only="readOnly || hasForeignCredential"
|
||||
:block-u-i="blockUi && isTriggerNode && !isExecutableTriggerNode"
|
||||
:is-production-execution-preview="isProductionExecutionPreview"
|
||||
:is-pane-active="isOutputPaneActive"
|
||||
@activate-pane="activateOutputPane"
|
||||
@link-run="onLinkRunToOutput"
|
||||
@unlink-run="() => onUnlinkRun('output')"
|
||||
@run-change="onRunOutputIndexChange"
|
||||
@open-settings="openSettings"
|
||||
@table-mounted="onOutputTableMounted"
|
||||
@item-hover="onOutputItemHover"
|
||||
@search="onSearch"
|
||||
/>
|
||||
</template>
|
||||
<template #main>
|
||||
<NodeSettings
|
||||
:event-bus="settingsEventBus"
|
||||
:dragging="isDragging"
|
||||
:push-ref="pushRef"
|
||||
:node-type="activeNodeType"
|
||||
:foreign-credentials="foreignCredentials"
|
||||
:read-only="readOnly"
|
||||
:block-u-i="blockUi && showTriggerPanel"
|
||||
:executable="!readOnly"
|
||||
:input-size="inputSize"
|
||||
@value-changed="valueChanged"
|
||||
@execute="onNodeExecute"
|
||||
@stop-execution="onStopExecution"
|
||||
@redraw-required="redrawRequired = true"
|
||||
@activate="onWorkflowActivate"
|
||||
@switch-selected-node="onSwitchSelectedNode"
|
||||
@open-connection-node-creator="onOpenConnectionNodeCreator"
|
||||
/>
|
||||
<a
|
||||
v-if="featureRequestUrl"
|
||||
:class="$style.featureRequest"
|
||||
target="_blank"
|
||||
@click="onFeatureRequestClick"
|
||||
>
|
||||
<font-awesome-icon icon="lightbulb" />
|
||||
{{ $locale.baseText('ndv.featureRequest') }}
|
||||
</a>
|
||||
</template>
|
||||
</NDVDraggablePanels>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue';
|
||||
import { createEventBus } from 'n8n-design-system/utils';
|
||||
@@ -796,6 +656,146 @@ onBeforeUnmount(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog
|
||||
:model-value="(!!activeNode || renaming) && !isActiveStickyNode"
|
||||
:before-close="close"
|
||||
:show-close="false"
|
||||
class="data-display-wrapper ndv-wrapper"
|
||||
overlay-class="data-display-overlay"
|
||||
width="auto"
|
||||
append-to-body
|
||||
data-test-id="ndv"
|
||||
:data-has-output-connection="hasOutputConnection"
|
||||
>
|
||||
<n8n-tooltip
|
||||
placement="bottom-start"
|
||||
:visible="showTriggerWaitingWarning"
|
||||
:disabled="!showTriggerWaitingWarning"
|
||||
>
|
||||
<template #content>
|
||||
<div :class="$style.triggerWarning">
|
||||
{{ $locale.baseText('ndv.backToCanvas.waitingForTriggerWarning') }}
|
||||
</div>
|
||||
</template>
|
||||
<div :class="$style.backToCanvas" data-test-id="back-to-canvas" @click="close">
|
||||
<n8n-icon icon="arrow-left" color="text-xlight" size="medium" />
|
||||
<n8n-text color="text-xlight" size="medium" :bold="true">
|
||||
{{ $locale.baseText('ndv.backToCanvas') }}
|
||||
</n8n-text>
|
||||
</div>
|
||||
</n8n-tooltip>
|
||||
|
||||
<div
|
||||
v-if="activeNode"
|
||||
ref="container"
|
||||
class="data-display"
|
||||
tabindex="0"
|
||||
@keydown.capture="onKeyDown"
|
||||
>
|
||||
<div :class="$style.modalBackground" @click="close"></div>
|
||||
<NDVDraggablePanels
|
||||
:key="activeNode.name"
|
||||
:is-trigger-node="isTriggerNode"
|
||||
:hide-input-and-output="activeNodeType === null"
|
||||
:position="isTriggerNode && !showTriggerPanel ? 0 : undefined"
|
||||
:is-draggable="!isTriggerNode"
|
||||
:has-double-width="activeNodeType?.parameterPane === 'wide'"
|
||||
:node-type="activeNodeType"
|
||||
@switch-selected-node="onSwitchSelectedNode"
|
||||
@open-connection-node-creator="onOpenConnectionNodeCreator"
|
||||
@close="close"
|
||||
@init="onPanelsInit"
|
||||
@dragstart="onDragStart"
|
||||
@dragend="onDragEnd"
|
||||
>
|
||||
<template v-if="showTriggerPanel || !isTriggerNode" #input>
|
||||
<TriggerPanel
|
||||
v-if="showTriggerPanel"
|
||||
:node-name="activeNode.name"
|
||||
:push-ref="pushRef"
|
||||
@execute="onNodeExecute"
|
||||
@activate="onWorkflowActivate"
|
||||
/>
|
||||
<InputPanel
|
||||
v-else-if="!isTriggerNode"
|
||||
:workflow="workflowObject"
|
||||
:can-link-runs="canLinkRuns"
|
||||
:run-index="inputRun"
|
||||
:linked-runs="linked"
|
||||
:current-node-name="inputNodeName"
|
||||
:push-ref="pushRef"
|
||||
:read-only="readOnly || hasForeignCredential"
|
||||
:is-production-execution-preview="isProductionExecutionPreview"
|
||||
:is-pane-active="isInputPaneActive"
|
||||
@activate-pane="activateInputPane"
|
||||
@link-run="onLinkRunToInput"
|
||||
@unlink-run="() => onUnlinkRun('input')"
|
||||
@run-change="onRunInputIndexChange"
|
||||
@open-settings="openSettings"
|
||||
@change-input-node="onInputNodeChange"
|
||||
@execute="onNodeExecute"
|
||||
@table-mounted="onInputTableMounted"
|
||||
@item-hover="onInputItemHover"
|
||||
@search="onSearch"
|
||||
/>
|
||||
</template>
|
||||
<template #output>
|
||||
<OutputPanel
|
||||
data-test-id="output-panel"
|
||||
:workflow="workflowObject"
|
||||
:can-link-runs="canLinkRuns"
|
||||
:run-index="outputRun"
|
||||
:linked-runs="linked"
|
||||
:push-ref="pushRef"
|
||||
:is-read-only="readOnly || hasForeignCredential"
|
||||
:block-u-i="blockUi && isTriggerNode && !isExecutableTriggerNode"
|
||||
:is-production-execution-preview="isProductionExecutionPreview"
|
||||
:is-pane-active="isOutputPaneActive"
|
||||
@activate-pane="activateOutputPane"
|
||||
@link-run="onLinkRunToOutput"
|
||||
@unlink-run="() => onUnlinkRun('output')"
|
||||
@run-change="onRunOutputIndexChange"
|
||||
@open-settings="openSettings"
|
||||
@table-mounted="onOutputTableMounted"
|
||||
@item-hover="onOutputItemHover"
|
||||
@search="onSearch"
|
||||
/>
|
||||
</template>
|
||||
<template #main>
|
||||
<NodeSettings
|
||||
:event-bus="settingsEventBus"
|
||||
:dragging="isDragging"
|
||||
:push-ref="pushRef"
|
||||
:node-type="activeNodeType"
|
||||
:foreign-credentials="foreignCredentials"
|
||||
:read-only="readOnly"
|
||||
:block-u-i="blockUi && showTriggerPanel"
|
||||
:executable="!readOnly"
|
||||
:input-size="inputSize"
|
||||
@value-changed="valueChanged"
|
||||
@execute="onNodeExecute"
|
||||
@stop-execution="onStopExecution"
|
||||
@redraw-required="redrawRequired = true"
|
||||
@activate="onWorkflowActivate"
|
||||
@switch-selected-node="onSwitchSelectedNode"
|
||||
@open-connection-node-creator="onOpenConnectionNodeCreator"
|
||||
/>
|
||||
<a
|
||||
v-if="featureRequestUrl"
|
||||
:class="$style.featureRequest"
|
||||
target="_blank"
|
||||
@click="onFeatureRequestClick"
|
||||
>
|
||||
<font-awesome-icon icon="lightbulb" />
|
||||
{{ $locale.baseText('ndv.featureRequest') }}
|
||||
</a>
|
||||
</template>
|
||||
</NDVDraggablePanels>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
// Hide notice(.ndv-connection-hint-notice) warning when node has output connection
|
||||
[data-has-output-connection='true'] .ndv-connection-hint-notice {
|
||||
|
||||
Reference in New Issue
Block a user