diff --git a/packages/design-system/src/components/N8nBlockUi/BlockUi.stories.js b/packages/design-system/src/components/N8nBlockUi/BlockUi.stories.js new file mode 100644 index 0000000000..f2b6ce2fec --- /dev/null +++ b/packages/design-system/src/components/N8nBlockUi/BlockUi.stories.js @@ -0,0 +1,20 @@ +import N8nBlockUi from './BlockUi.vue'; + +export default { + title: 'Atoms/BlockUI', + component: N8nBlockUi, +}; + +const Template = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { + N8nBlockUi, + }, + template: + '
', +}); + +export const BlockUi = Template.bind({}); +BlockUi.args = { + show: false +}; diff --git a/packages/design-system/src/components/N8nBlockUi/BlockUi.vue b/packages/design-system/src/components/N8nBlockUi/BlockUi.vue new file mode 100644 index 0000000000..27713effab --- /dev/null +++ b/packages/design-system/src/components/N8nBlockUi/BlockUi.vue @@ -0,0 +1,40 @@ + + + + + + + diff --git a/packages/design-system/src/components/N8nBlockUi/__tests__/BlockUi.spec.ts b/packages/design-system/src/components/N8nBlockUi/__tests__/BlockUi.spec.ts new file mode 100644 index 0000000000..7b9c619048 --- /dev/null +++ b/packages/design-system/src/components/N8nBlockUi/__tests__/BlockUi.spec.ts @@ -0,0 +1,16 @@ +import { render, screen } from '@testing-library/vue'; +import N8nBlockUi from '../BlockUi.vue'; + +describe('components', () => { + describe('N8nBlockUi', () => { + it('should render but not visible', () => { + render(N8nBlockUi); + expect(screen.queryByRole('dialog', { hidden: true })).not.toBeVisible(); + }); + + it('should render and is visible', () => { + render(N8nBlockUi, { props: { show: true } }); + expect(screen.getByRole('dialog', { hidden: true })).toBeVisible(); + }); + }); +}); diff --git a/packages/design-system/src/components/N8nBlockUi/index.ts b/packages/design-system/src/components/N8nBlockUi/index.ts new file mode 100644 index 0000000000..f9c7857d44 --- /dev/null +++ b/packages/design-system/src/components/N8nBlockUi/index.ts @@ -0,0 +1,3 @@ +import N8nBlockUi from './BlockUi.vue'; + +export default N8nBlockUi; diff --git a/packages/design-system/src/plugins/n8nComponents.ts b/packages/design-system/src/plugins/n8nComponents.ts index 990b7311d9..d62076e8d4 100644 --- a/packages/design-system/src/plugins/n8nComponents.ts +++ b/packages/design-system/src/plugins/n8nComponents.ts @@ -4,6 +4,7 @@ import N8nActionDropdown from '../components/N8nActionDropdown'; import N8nActionToggle from '../components/N8nActionToggle'; import N8nAvatar from '../components/N8nAvatar'; import N8nBadge from "../components/N8nBadge"; +import N8nBlockUi from "../components/N8nBlockUi"; import N8nButton from '../components/N8nButton'; import { N8nElButton } from '../components/N8nButton/overrides'; import N8nCallout from '../components/N8nCallout'; @@ -51,6 +52,7 @@ export default { app.component('n8n-action-toggle', N8nActionToggle); app.component('n8n-avatar', N8nAvatar); app.component('n8n-badge', N8nBadge); + app.component('n8n-block-ui', N8nBlockUi); app.component('n8n-button', N8nButton); app.component('el-button', N8nElButton); app.component('n8n-callout', N8nCallout); diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue index e0f5e043f4..2d22d5978c 100644 --- a/packages/editor-ui/src/components/NodeDetailsView.vue +++ b/packages/editor-ui/src/components/NodeDetailsView.vue @@ -72,6 +72,7 @@ :linkedRuns="linked" :sessionId="sessionId" :isReadOnly="readOnly || hasForeignCredential" + :blockUI="blockUi && isTriggerNode" @linkRun="onLinkRunToOutput" @unlinkRun="() => onUnlinkRun('output')" @runChange="onRunOutputIndexChange" @@ -87,8 +88,10 @@ :sessionId="sessionId" :nodeType="activeNodeType" :isReadOnly="readOnly || hasForeignCredential" + :blockUI="blockUi && showTriggerPanel" @valueChanged="valueChanged" @execute="onNodeExecute" + @stopExecution="onStopExecution" @activate="onWorkflowActivate" /> {{ disabledHint }}
@@ -113,6 +115,7 @@ /> + @@ -224,6 +227,9 @@ export default mixins(externalHooks, nodeHelpers).extend({ isCommunityNode(): boolean { return isCommunityPackageName(this.node.type); }, + isTriggerNode(): boolean { + return this.$store.getters['nodeTypes/isTriggerNode'](this.node.type); + }, }, props: { eventBus: {}, @@ -239,6 +245,10 @@ export default mixins(externalHooks, nodeHelpers).extend({ isReadOnly: { type: Boolean, }, + blockUI: { + type: Boolean, + default: false, + }, }, data() { return { @@ -758,6 +768,9 @@ export default mixins(externalHooks, nodeHelpers).extend({ node_type: this.node.type, }); }, + onStopExecution(){ + this.$emit('stopExecution'); + }, }, mounted() { this.setNodeValues(); diff --git a/packages/editor-ui/src/components/OutputPanel.vue b/packages/editor-ui/src/components/OutputPanel.vue index 96b0ab03dd..83c83909f9 100644 --- a/packages/editor-ui/src/components/OutputPanel.vue +++ b/packages/editor-ui/src/components/OutputPanel.vue @@ -10,6 +10,7 @@ :executingMessage="$locale.baseText('ndv.output.executing')" :sessionId="sessionId" :isReadOnly="isReadOnly" + :blockUI="blockUI" paneType="output" @runChange="onRunIndexChange" @linkRun="onLinkRun" @@ -109,6 +110,10 @@ export default mixins( sessionId: { type: String, }, + blockUI: { + type: Boolean, + default: false, + }, }, computed: { node(): INodeUi { diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue index 292df910ed..4e7b97b5ff 100644 --- a/packages/editor-ui/src/components/RunData.vue +++ b/packages/editor-ui/src/components/RunData.vue @@ -321,7 +321,7 @@ - + @@ -367,7 +367,7 @@ import { genericHelpers } from '@/components/mixins/genericHelpers'; import { nodeHelpers } from '@/components/mixins/nodeHelpers'; import { pinData } from '@/components/mixins/pinData'; import { CodeEditor } from "@/components/forms"; -import { dataPinningEventBus } from '../event-bus/data-pinning-event-bus'; +import { dataPinningEventBus } from '@/event-bus/data-pinning-event-bus'; import { clearJsonKey, executionDataToJson, stringSizeInBytes } from './helpers'; import RunDataTable from './RunDataTable.vue'; import RunDataJson from '@/components/RunDataJson.vue'; @@ -437,6 +437,10 @@ export default mixins( showMappingHint: { type: Boolean, }, + blockUI: { + type: Boolean, + default: false, + }, }, data () { return { @@ -1383,4 +1387,9 @@ export default mixins( height: 100%; } +.uiBlocker { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + diff --git a/packages/editor-ui/src/components/TriggerPanel.vue b/packages/editor-ui/src/components/TriggerPanel.vue index 5b07dbb17b..716db8de20 100644 --- a/packages/editor-ui/src/components/TriggerPanel.vue +++ b/packages/editor-ui/src/components/TriggerPanel.vue @@ -28,6 +28,12 @@ :copy-button-text="$locale.baseText('generic.clickToCopy')" @copy="onTestLinkCopied" > +
{{ @@ -60,7 +66,6 @@
+ " :loading="stopExecutionInProgress" @click.stop="stopExecution" /> + @click.stop="stopWaitingForWebhook" /> + @click.stop="clearExecutionData" />