chore(editor): Clean up feature flag for trigger button variant (#13411)

This commit is contained in:
autologie 2025-02-24 10:22:46 +01:00 committed by GitHub
parent dd43854a8e
commit 8ff7ba9b82
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 10 additions and 72 deletions

View file

@ -3,14 +3,9 @@ import { computed, ref, useCssModule, watch } from 'vue';
import { useNodeConnections } from '@/composables/useNodeConnections';
import { useI18n } from '@/composables/useI18n';
import { useCanvasNode } from '@/composables/useCanvasNode';
import {
LOCAL_STORAGE_CANVAS_TRIGGER_BUTTON_VARIANT,
NODE_INSERT_SPACER_BETWEEN_INPUT_GROUPS,
} from '@/constants';
import { NODE_INSERT_SPACER_BETWEEN_INPUT_GROUPS } from '@/constants';
import type { CanvasNodeDefaultRender } from '@/types';
import { useCanvas } from '@/composables/useCanvas';
import { useLocalStorage } from '@vueuse/core';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
const $style = useCssModule();
const i18n = useI18n();
@ -111,8 +106,6 @@ const isStrikethroughVisible = computed(() => {
const showTooltip = ref(false);
const triggerButtonVariant = useLocalStorage<1 | 2>(LOCAL_STORAGE_CANVAS_TRIGGER_BUTTON_VARIANT, 2);
watch(initialized, () => {
if (initialized.value) {
showTooltip.value = true;
@ -140,9 +133,6 @@ function openContextMenu(event: MouseEvent) {
<div :class="$style.description">
<div v-if="label" :class="$style.label">
{{ label }}
<div v-if="renderOptions.trigger && triggerButtonVariant === 1" :class="$style.triggerIcon">
<FontAwesomeIcon icon="bolt" size="lg" />
</div>
</div>
<div v-if="isDisabled" :class="$style.disabledLabel">
({{ i18n.baseText('node.disabled') }})
@ -327,11 +317,4 @@ function openContextMenu(event: MouseEvent) {
bottom: var(--canvas-node--status-icons-offset);
right: var(--canvas-node--status-icons-offset);
}
.triggerIcon {
display: inline;
position: static;
color: var(--color-primary);
padding: var(--spacing-4xs);
}
</style>

View file

@ -17,8 +17,7 @@ exports[`CanvasNodeDefault > configurable > should render configurable node corr
<div
class="label"
>
Test Node
<!--v-if-->
Test Node
</div>
<!--v-if-->
<div
@ -47,8 +46,7 @@ exports[`CanvasNodeDefault > configuration > should render configurable configur
<div
class="label"
>
Test Node
<!--v-if-->
Test Node
</div>
<!--v-if-->
<div
@ -77,8 +75,7 @@ exports[`CanvasNodeDefault > configuration > should render configuration node co
<div
class="label"
>
Test Node
<!--v-if-->
Test Node
</div>
<!--v-if-->
<div
@ -107,8 +104,7 @@ exports[`CanvasNodeDefault > should render node correctly 1`] = `
<div
class="label"
>
Test Node
<!--v-if-->
Test Node
</div>
<!--v-if-->
<div
@ -137,8 +133,7 @@ exports[`CanvasNodeDefault > trigger > should render trigger node correctly 1`]
<div
class="label"
>
Test Node
<!--v-if-->
Test Node
</div>
<!--v-if-->
<div

View file

@ -2,10 +2,9 @@
import { useCanvasOperations } from '@/composables/useCanvasOperations';
import { useI18n } from '@/composables/useI18n';
import { useRunWorkflow } from '@/composables/useRunWorkflow';
import { CHAT_TRIGGER_NODE_TYPE, LOCAL_STORAGE_CANVAS_TRIGGER_BUTTON_VARIANT } from '@/constants';
import { CHAT_TRIGGER_NODE_TYPE } from '@/constants';
import { useUIStore } from '@/stores/ui.store';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { useLocalStorage } from '@vueuse/core';
import { computed, useCssModule } from 'vue';
import { useRouter } from 'vue-router';
@ -25,16 +24,12 @@ const {
class?: string;
}>();
const variant = useLocalStorage<1 | 2>(LOCAL_STORAGE_CANVAS_TRIGGER_BUTTON_VARIANT, 2);
const style = useCssModule();
const containerClass = computed(() => ({
[cls ?? '']: true,
[style.container]: true,
[style.interactive]: !disabled && !readOnly,
[style.hovered]: !!hovered,
[style.variant1]: variant.value === 1,
[style.variant2]: variant.value === 2,
}));
const router = useRouter();
@ -53,31 +48,13 @@ const testId = computed(() => `execute-workflow-button-${name}`);
<!-- click and mousedown event are suppressed to avoid unwanted selection or dragging of the node -->
<div :class="containerClass" @click.stop.prevent @mousedown.stop.prevent>
<div>
<div v-if="variant === 2" :class="$style.bolt">
<div :class="$style.bolt">
<FontAwesomeIcon icon="bolt" size="lg" />
</div>
<template v-if="!readOnly">
<N8nButton
v-if="variant === 1 && type === CHAT_TRIGGER_NODE_TYPE"
type="secondary"
size="large"
:disabled="isExecuting"
:data-test-id="testId"
@click.capture="toggleChatOpen('node')"
>{{ isChatOpen ? i18n.baseText('chat.hide') : i18n.baseText('chat.open') }}</N8nButton
>
<N8nButton
v-else-if="variant === 1"
type="secondary"
size="large"
:disabled="isExecuting"
:data-test-id="testId"
@click.capture="runEntireWorkflow('node', name)"
>{{ i18n.baseText('nodeView.runButtonText.executeWorkflow') }}</N8nButton
>
<N8nButton
v-else-if="variant === 2 && type === CHAT_TRIGGER_NODE_TYPE"
v-if="type === CHAT_TRIGGER_NODE_TYPE"
:type="isChatOpen ? 'secondary' : 'primary'"
size="large"
:disabled="isExecuting"
@ -116,23 +93,6 @@ const testId = computed(() => `execute-workflow-button-${name}`);
align-items: center;
}
&.interactive.hovered button {
pointer-events: all;
}
}
.variant1 {
& button {
margin-right: var(--spacing-xl);
display: none;
}
&.interactive button {
display: block;
}
}
.variant2 {
& button {
margin-right: var(--spacing-s);
opacity: 0;
@ -145,6 +105,7 @@ const testId = computed(() => `execute-workflow-button-${name}`);
&.interactive.hovered button {
opacity: 1;
translate: 0 0;
pointer-events: all;
}
}

View file

@ -442,7 +442,6 @@ export const LOCAL_STORAGE_EXPERIMENT_OVERRIDES = 'N8N_EXPERIMENT_OVERRIDES';
export const LOCAL_STORAGE_HIDE_GITHUB_STAR_BUTTON = 'N8N_HIDE_HIDE_GITHUB_STAR_BUTTON';
export const LOCAL_STORAGE_NDV_INPUT_PANEL_DISPLAY_MODE = 'N8N_NDV_INPUT_PANEL_DISPLAY_MODE';
export const LOCAL_STORAGE_NDV_OUTPUT_PANEL_DISPLAY_MODE = 'N8N_NDV_OUTPUT_PANEL_DISPLAY_MODE';
export const LOCAL_STORAGE_CANVAS_TRIGGER_BUTTON_VARIANT = 'Canvas.TriggerButtonVariant';
export const BASE_NODE_SURVEY_URL = 'https://n8n-community.typeform.com/to/BvmzxqYv#nodename=';
export const HIRING_BANNER = `