mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-24 20:24:05 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix(editor): Prevent action's panel flickering while dragging a node (#10739)
Some checks are pending
Test Master / install-and-build (push) Waiting to run
Details
Test Master / Unit tests (18.x) (push) Blocked by required conditions
Details
Test Master / Unit tests (20.x) (push) Blocked by required conditions
Details
Test Master / Unit tests (22.4) (push) Blocked by required conditions
Details
Test Master / Lint (push) Blocked by required conditions
Details
Test Master / Notify Slack on failure (push) Blocked by required conditions
Details
Benchmark Docker Image CI / build (push) Waiting to run
Details

Browse source
This commit is contained in:
Raúl Gómez Morales 2024-09-10 10:31:41 +02:00 committed by GitHub
parent 9f3e03d728
commit efa5573278
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 18 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue
View file

@ -28,11 +28,13 @@ import ItemsRenderer from '../Renderers/ItemsRenderer.vue';
import CategorizedItemsRenderer from '../Renderers/CategorizedItemsRenderer.vue'; import CategorizedItemsRenderer from '../Renderers/CategorizedItemsRenderer.vue';
import type { IDataObject } from 'n8n-workflow'; import type { IDataObject } from 'n8n-workflow';
import { useTelemetry } from '@/composables/useTelemetry'; import { useTelemetry } from '@/composables/useTelemetry';
import { useI18n } from '@/composables/useI18n';
const emit = defineEmits<{ const emit = defineEmits<{
nodeTypeSelected: [value: [actionKey: string, nodeName: string] | [nodeName: string]]; nodeTypeSelected: [value: [actionKey: string, nodeName: string] | [nodeName: string]];
}>(); }>();
const telemetry = useTelemetry(); const telemetry = useTelemetry();
const i18n = useI18n();
const { userActivated } = useUsersStore(); const { userActivated } = useUsersStore();
const { popViewStack, updateCurrentViewStack } = useViewStacks(); const { popViewStack, updateCurrentViewStack } = useViewStacks();
@ -238,9 +240,10 @@ onMounted(() => {
<template v-if="isTriggerRootView || parsedTriggerActionsBaseline.length !== 0" #triggers> <template v-if="isTriggerRootView || parsedTriggerActionsBaseline.length !== 0" #triggers>
<!-- Triggers Category --> <!-- Triggers Category -->
<CategorizedItemsRenderer <CategorizedItemsRenderer
v-memo="[search]"
:elements="parsedTriggerActions" :elements="parsedTriggerActions"
:category="triggerCategoryName" :category="triggerCategoryName"
:mouse-over-tooltip="$locale.baseText('nodeCreator.actionsTooltip.triggersStartWorkflow')" :mouse-over-tooltip="i18n.baseText('nodeCreator.actionsTooltip.triggersStartWorkflow')"
is-trigger-category is-trigger-category
:expanded="isTriggerRootView || parsedActionActions.length === 0" :expanded="isTriggerRootView || parsedActionActions.length === 0"
@selected="onSelected" @selected="onSelected"
@ -256,7 +259,7 @@ onMounted(() => {
> >
<span <span
v-html=" v-html="
$locale.baseText('nodeCreator.actionsCallout.noTriggerItems', { i18n.baseText('nodeCreator.actionsCallout.noTriggerItems', {
interpolate: { nodeName: subcategory ?? '' }, interpolate: { nodeName: subcategory ?? '' },
}) })
" "
@ -268,7 +271,7 @@ onMounted(() => {
<p <p
:class="$style.resetSearch" :class="$style.resetSearch"
@click="resetSearch" @click="resetSearch"
v-html="$locale.baseText('nodeCreator.actionsCategory.noMatchingTriggers')" v-html="i18n.baseText('nodeCreator.actionsCategory.noMatchingTriggers')"
/> />
</template> </template>
</CategorizedItemsRenderer> </CategorizedItemsRenderer>
@ -276,9 +279,10 @@ onMounted(() => {
<template v-if="!isTriggerRootView || parsedActionActionsBaseline.length !== 0" #actions> <template v-if="!isTriggerRootView || parsedActionActionsBaseline.length !== 0" #actions>
<!-- Actions Category --> <!-- Actions Category -->
<CategorizedItemsRenderer <CategorizedItemsRenderer
v-memo="[search]"
:elements="parsedActionActions" :elements="parsedActionActions"
:category="actionsCategoryLocales.actions" :category="actionsCategoryLocales.actions"
:mouse-over-tooltip="$locale.baseText('nodeCreator.actionsTooltip.actionsPerformStep')" :mouse-over-tooltip="i18n.baseText('nodeCreator.actionsTooltip.actionsPerformStep')"
:expanded="!isTriggerRootView || parsedTriggerActions.length === 0" :expanded="!isTriggerRootView || parsedTriggerActions.length === 0"
@selected="onSelected" @selected="onSelected"
> >
@ -289,14 +293,14 @@ onMounted(() => {
slim slim
data-test-id="actions-panel-activation-callout" data-test-id="actions-panel-activation-callout"
> >
<span v-html="$locale.baseText('nodeCreator.actionsCallout.triggersStartWorkflow')" /> <span v-html="i18n.baseText('nodeCreator.actionsCallout.triggersStartWorkflow')" />
</n8n-callout> </n8n-callout>
<!-- Empty state --> <!-- Empty state -->
<template #empty> <template #empty>
<n8n-info-tip v-if="!search" theme="info" type="note" :class="$style.actionsEmpty"> <n8n-info-tip v-if="!search" theme="info" type="note" :class="$style.actionsEmpty">
<span <span
v-html=" v-html="
$locale.baseText('nodeCreator.actionsCallout.noActionItems', { i18n.baseText('nodeCreator.actionsCallout.noActionItems', {
interpolate: { nodeName: subcategory ?? '' }, interpolate: { nodeName: subcategory ?? '' },
}) })
" "
@ -307,7 +311,7 @@ onMounted(() => {
:class="$style.resetSearch" :class="$style.resetSearch"
data-test-id="actions-panel-no-matching-actions" data-test-id="actions-panel-no-matching-actions"
@click="resetSearch" @click="resetSearch"
v-html="$locale.baseText('nodeCreator.actionsCategory.noMatchingActions')" v-html="i18n.baseText('nodeCreator.actionsCategory.noMatchingActions')"
/> />
</template> </template>
</CategorizedItemsRenderer> </CategorizedItemsRenderer>
@ -317,7 +321,7 @@ onMounted(() => {
<span <span
@click.prevent="addHttpNode" @click.prevent="addHttpNode"
v-html=" v-html="
$locale.baseText('nodeCreator.actionsList.apiCall', { i18n.baseText('nodeCreator.actionsList.apiCall', {
interpolate: { node: subcategory ?? '' }, interpolate: { node: subcategory ?? '' },
}) })
" "

7
packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue
View file

@ -226,7 +226,12 @@ registerKeyHook('MainViewArrowLeft', {
<template> <template>
<span> <span>
<!-- Main Node Items --> <!-- Main Node Items -->
<ItemsRenderer :elements="activeViewStack.items" :class="$style.items" @selected="onSelected"> <ItemsRenderer
v-memo="[activeViewStack.search]"
:elements="activeViewStack.items"
:class="$style.items"
@selected="onSelected"
>
<template <template
v-if="(activeViewStack.items || []).length === 0 && globalSearchItemsDiff.length === 0" v-if="(activeViewStack.items || []).length === 0 && globalSearchItemsDiff.length === 0"
#empty #empty