feat(editor): Add clear execution button to new canvas (no-changelog) (#10010)

This commit is contained in:
Alex Grozav 2024-07-11 16:37:01 +03:00 committed by GitHub
parent 071130a2dc
commit c2adaa58cd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 52 additions and 0 deletions

View file

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

View file

@ -0,0 +1,13 @@
<script setup lang="ts">
import { useI18n } from '@/composables/useI18n';
const i18n = useI18n();
</script>
<template>
<n8n-icon-button
:title="i18n.baseText('nodeView.deletesTheCurrentExecutionData')"
icon="trash"
size="large"
data-test-id="clear-execution-data-button"
/>
</template>

View file

@ -0,0 +1,7 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`CanvasClearExecutionDataButton > should render correctly 1`] = `
"<button class="button button primary large withIcon square" aria-live="polite" title="Deletes the current execution data" data-test-id="clear-execution-data-button"><span class="icon"><span class="n8n-text compact size-large regular n8n-icon n8n-icon"><svg class="svg-inline--fa fa-trash fa-w-14 large" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trash" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"></path></svg></span></span>
<!--v-if-->
</button>"
`;

View file

@ -83,6 +83,7 @@ import { getNodeViewTab } from '@/utils/canvasUtils';
import { parseCanvasConnectionHandleString } from '@/utils/canvasUtilsV2';
import CanvasStopCurrentExecutionButton from '@/components/canvas/elements/buttons/CanvasStopCurrentExecutionButton.vue';
import CanvasStopWaitingForWebhookButton from '@/components/canvas/elements/buttons/CanvasStopWaitingForWebhookButton.vue';
import CanvasClearExecutionDataButton from '@/components/canvas/elements/buttons/CanvasClearExecutionDataButton.vue';
import { nodeViewEventBus } from '@/event-bus';
const NodeCreation = defineAsyncComponent(
@ -614,6 +615,16 @@ const isStopExecutionButtonVisible = computed(
const isStopWaitingForWebhookButtonVisible = computed(
() => isWorkflowRunning.value && isExecutionWaitingForWebhook.value,
);
const isClearExecutionButtonVisible = computed(
() =>
!isReadOnlyRoute.value &&
!isReadOnlyEnvironment.value &&
!isWorkflowRunning.value &&
!allTriggerNodesDisabled.value &&
workflowExecutionData.value,
);
const workflowExecutionData = computed(() => workflowsStore.workflowExecutionData);
async function onRunWorkflow() {
trackRunWorkflow();
@ -672,6 +683,11 @@ async function onStopWaitingForWebhook() {
await stopWaitingForWebhook();
}
async function onClearExecutionData() {
workflowsStore.workflowExecutionData = null;
nodeHelpers.updateNodesExecutionIssues();
}
function onRunWorkflowButtonMouseEnter() {
nodeViewEventBus.emit('runWorkflowButton:mouseenter');
}
@ -1083,6 +1099,10 @@ onBeforeUnmount(() => {
v-if="isStopWaitingForWebhookButtonVisible"
@click="onStopWaitingForWebhook"
/>
<CanvasClearExecutionDataButton
v-if="isClearExecutionButtonVisible"
@click="onClearExecutionData"
/>
</div>
<Suspense>
<NodeCreation