mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(editor): Add stop current execution button in new canvas (no-changelog) (#9968)

Browse Source
This commit is contained in:
Alex Grozav
2024-07-10 11:53:27 +03:00
committed by GitHub
parent 90e3f56a9d
commit 2107de2f4a
15 changed files with 245 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
packages/editor-ui/src/components/canvas/elements/buttons/CanvasExecuteWorkflowButton.spec.ts Normal file
View File

@@ -0,0 +1,33 @@
import { createComponentRenderer } from '@/__tests__/render';
import CanvasExecuteWorkflowButton from './CanvasExecuteWorkflowButton.vue';
const renderComponent = createComponentRenderer(CanvasExecuteWorkflowButton);
describe('CanvasExecuteWorkflowButton', () => {
it('should render correctly', () => {
const wrapper = renderComponent();
expect(wrapper.html()).toMatchSnapshot();
});
it('should render different label when executing', () => {
const wrapper = renderComponent({
props: {
executing: true,
},
});
expect(wrapper.getAllByText('Executing workflow')).toHaveLength(2);
});
it('should render different label when executing and waiting for webhook', () => {
const wrapper = renderComponent({
props: {
executing: true,
waitingForWebhook: true,
},
});
expect(wrapper.getAllByText('Waiting for trigger event')).toHaveLength(2);
});
});

27
packages/editor-ui/src/components/canvas/elements/buttons/CanvasExecuteWorkflowButton.vue
View File

@@ -2,31 +2,36 @@
import KeyboardShortcutTooltip from '@/components/KeyboardShortcutTooltip.vue';
import { computed } from 'vue';
import { useI18n } from '@/composables/useI18n';
import { useUIStore } from '@/stores/ui.store';
defineEmits<{
click: [event: MouseEvent];
}>();
const uiStore = useUIStore();
const locale = useI18n();
const props = defineProps<{
waitingForWebhook: boolean;
executing: boolean;
}>();
const workflowRunning = computed(() => uiStore.isActionActive['workflowRunning']);
const i18n = useI18n();
const runButtonText = computed(() => {
if (!workflowRunning.value) {
return locale.baseText('nodeView.runButtonText.executeWorkflow');
const label = computed(() => {
if (!props.executing) {
return i18n.baseText('nodeView.runButtonText.executeWorkflow');
}
return locale.baseText('nodeView.runButtonText.executingWorkflow');
if (props.waitingForWebhook) {
return i18n.baseText('nodeView.runButtonText.waitingForTriggerEvent');
}
return i18n.baseText('nodeView.runButtonText.executingWorkflow');
});
</script>
<template>
<KeyboardShortcutTooltip :label="runButtonText" :shortcut="{ metaKey: true, keys: ['↵'] }">
<KeyboardShortcutTooltip :label="label" :shortcut="{ metaKey: true, keys: ['↵'] }">
<N8nButton
:loading="workflowRunning"
:label="runButtonText"
:loading="executing"
:label="label"
size="large"
icon="flask"
type="primary"

22
packages/editor-ui/src/components/canvas/elements/buttons/CanvasStopCurrentExecutionButton.spec.ts Normal file
View File

@@ -0,0 +1,22 @@
import { createComponentRenderer } from '@/__tests__/render';
import CanvasStopCurrentExecutionButton from './CanvasStopCurrentExecutionButton.vue';
const renderComponent = createComponentRenderer(CanvasStopCurrentExecutionButton);
describe('CanvasStopCurrentExecutionButton', () => {
it('should render correctly', () => {
const wrapper = renderComponent();
expect(wrapper.html()).toMatchSnapshot();
});
it('should render different title when loading', () => {
const wrapper = renderComponent({
props: {
stopping: true,
},
});
expect(wrapper.getByTitle('Stopping current execution')).toBeInTheDocument();
});
});

28
packages/editor-ui/src/components/canvas/elements/buttons/CanvasStopCurrentExecutionButton.vue Normal file
View File

@@ -0,0 +1,28 @@
<script lang="ts" setup>
import { useI18n } from '@/composables/useI18n';
import { computed } from 'vue';
const props = defineProps<{
stopping?: boolean;
}>();
const i18n = useI18n();
const title = computed(() =>
props.stopping
? i18n.baseText('nodeView.stoppingCurrentExecution')
: i18n.baseText('nodeView.stopCurrentExecution'),
);
</script>
<template>
<n8n-icon-button
icon="stop"
size="large"
class="stop-execution"
type="secondary"
:title="title"
:loading="stopping"
data-test-id="stop-execution-button"
/>
</template>

12
packages/editor-ui/src/components/canvas/elements/buttons/CanvasStopWaitingForWebhookButton.spec.ts Normal file
View File

@@ -0,0 +1,12 @@
import { createComponentRenderer } from '@/__tests__/render';
import CanvasStopWaitingForWebhookButton from './CanvasStopWaitingForWebhookButton.vue';
const renderComponent = createComponentRenderer(CanvasStopWaitingForWebhookButton);
describe('CanvasStopCurrentExecutionButton', () => {
it('should render correctly', () => {
const wrapper = renderComponent();
expect(wrapper.html()).toMatchSnapshot();
});
});

15
packages/editor-ui/src/components/canvas/elements/buttons/CanvasStopWaitingForWebhookButton.vue Normal file
View File

@@ -0,0 +1,15 @@
<script lang="ts" setup>
import { useI18n } from '@/composables/useI18n';
const i18n = useI18n();
</script>
<template>
<n8n-icon-button
class="stop-execution"
icon="stop"
size="large"
:title="i18n.baseText('nodeView.stopWaitingForWebhookCall')"
type="secondary"
data-test-id="stop-execution-waiting-for-webhook-button"
/>
</template>

7
packages/editor-ui/src/components/canvas/elements/buttons/__snapshots__/CanvasExecuteWorkflowButton.spec.ts.snap Normal file
View File

@@ -0,0 +1,7 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`CanvasExecuteWorkflowButton > should render correctly 1`] = `
"<button class="button button primary large withIcon el-tooltip__trigger el-tooltip__trigger" aria-live="polite" data-test-id="execute-workflow-button"><span class="icon"><span class="n8n-text compact size-large regular n8n-icon n8n-icon"><svg class="svg-inline--fa fa-flask fa-w-14 large" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="flask" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M437.2 403.5L320 215V64h8c13.3 0 24-10.7 24-24V24c0-13.3-10.7-24-24-24H120c-13.3 0-24 10.7-24 24v16c0 13.3 10.7 24 24 24h8v151L10.8 403.5C-18.5 450.6 15.3 512 70.9 512h306.2c55.7 0 89.4-61.5 60.1-108.5zM137.9 320l48.2-77.6c3.7-5.2 5.8-11.6 5.8-18.4V64h64v160c0 6.9 2.2 13.2 5.8 18.4l48.2 77.6h-172z"></path></svg></span></span><span>Test workflow</span></button>
<!--teleport start-->
<!--teleport end-->"
`;

7
packages/editor-ui/src/components/canvas/elements/buttons/__snapshots__/CanvasStopCurrentExecutionButton.spec.ts.snap Normal file
View File

@@ -0,0 +1,7 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`CanvasStopCurrentExecutionButton > should render correctly 1`] = `
"<button class="button button secondary large withIcon square stop-execution stop-execution" aria-live="polite" title="Stop current execution" data-test-id="stop-execution-button"><span class="icon"><span class="n8n-text compact size-large regular n8n-icon n8n-icon"><svg class="svg-inline--fa fa-stop fa-w-14 large" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="stop" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z"></path></svg></span></span>
<!--v-if-->
</button>"
`;

7
packages/editor-ui/src/components/canvas/elements/buttons/__snapshots__/CanvasStopWaitingForWebhookButton.spec.ts.snap Normal file
View File

@@ -0,0 +1,7 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`CanvasStopCurrentExecutionButton > should render correctly 1`] = `
"<button class="button button secondary large withIcon square stop-execution stop-execution" aria-live="polite" title="Stop waiting for webhook call" data-test-id="stop-execution-waiting-for-webhook-button"><span class="icon"><span class="n8n-text compact size-large regular n8n-icon n8n-icon"><svg class="svg-inline--fa fa-stop fa-w-14 large" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="stop" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z"></path></svg></span></span>
<!--v-if-->
</button>"
`;