refactor(editor): Improve linting for component and prop names (no-changelog) (#8169)

packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ActionItem.vue

@@ -1,21 +1,21 @@
 <template>
 	<n8n-node-creator-node
-		@dragstart="onDragStart"
-		@dragend="onDragEnd"
 		draggable
 		:class="$style.action"
 		:title="action.displayName"
-		:isTrigger="isTriggerAction(action)"
+		:is-trigger="isTriggerAction(action)"
 		data-keyboard-nav="true"
+		@dragstart="onDragStart"
+		@dragend="onDragEnd"
 	>
 		<template #dragContent>
-			<div :class="$style.draggableDataTransfer" ref="draggableDataTransfer" />
-			<div :class="$style.draggable" :style="draggableStyle" v-show="dragging">
-				<node-icon :nodeType="nodeType" @click.capture.stop :size="40" :shrink="false" />
+			<div ref="draggableDataTransfer" :class="$style.draggableDataTransfer" />
+			<div v-show="dragging" :class="$style.draggable" :style="draggableStyle">
+				<NodeIcon :node-type="nodeType" :size="40" :shrink="false" @click.capture.stop />
 			</div>
 		</template>
 		<template #icon>
-			<node-icon :nodeType="action" />
+			<NodeIcon :node-type="action" />
 		</template>
 	</n8n-node-creator-node>
 </template>

packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/CategoryItem.vue

@@ -28,11 +28,11 @@ const categoryName = computed(() => {
 		<div :class="{ [$style.category]: true, [$style.active]: active }">
 			<span :class="$style.name">
 				<span v-text="categoryName" />
-				<font-awesome-icon icon="bolt" v-if="isTrigger" size="xs" :class="$style.triggerIcon" />
+				<font-awesome-icon v-if="isTrigger" icon="bolt" size="xs" :class="$style.triggerIcon" />
 				<slot />
 			</span>
 			<font-awesome-icon v-if="expanded" icon="chevron-down" :class="$style.arrow" />
-			<font-awesome-icon :class="$style.arrow" icon="chevron-up" v-else />
+			<font-awesome-icon v-else :class="$style.arrow" icon="chevron-up" />
 		</div>
 	</div>
 </template>

packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue

@@ -2,23 +2,24 @@
 	<!-- Node Item is draggable only if it doesn't contain actions -->
 	<n8n-node-creator-node
 		:draggable="!showActionArrow"
-		@dragstart="onDragStart"
-		@dragend="onDragEnd"
 		:class="$style.nodeItem"
 		:description="description"
 		:title="displayName"
 		:show-action-arrow="showActionArrow"
 		:is-trigger="isTrigger"
 		:data-test-id="dataTestId"
+		@dragstart="onDragStart"
+		@dragend="onDragEnd"
 	>
 		<template #icon>
 			<div v-if="isSubNode" :class="$style.subNodeBackground"></div>
-			<node-icon :class="$style.nodeIcon" :nodeType="nodeType" />
+			<NodeIcon :class="$style.nodeIcon" :node-type="nodeType" />
 		</template>
 
-		<template #tooltip v-if="isCommunityNode">
+		<template v-if="isCommunityNode" #tooltip>
 			<p
 				:class="$style.communityNodeIcon"
+				@click="onCommunityNodeTooltipClick"
 				v-html="
 					i18n.baseText('generic.communityNode.tooltip', {
 						interpolate: {
@@ -27,13 +28,12 @@
 						},
 					})
 				"
-				@click="onCommunityNodeTooltipClick"
 			/>
 		</template>
 		<template #dragContent>
-			<div :class="$style.draggableDataTransfer" ref="draggableDataTransfer" />
-			<div :class="$style.draggable" :style="draggableStyle" v-show="dragging">
-				<node-icon :nodeType="nodeType" @click.capture.stop :size="40" :shrink="false" />
+			<div ref="draggableDataTransfer" :class="$style.draggableDataTransfer" />
+			<div v-show="dragging" :class="$style.draggable" :style="draggableStyle">
+				<NodeIcon :node-type="nodeType" :size="40" :shrink="false" @click.capture.stop />
 			</div>
 		</template>
 	</n8n-node-creator-node>

packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/SubcategoryItem.vue

@@ -2,16 +2,16 @@
 	<n8n-node-creator-node
 		:class="$style.subCategory"
 		:title="i18n.baseText(`nodeCreator.subcategoryNames.${subcategoryName}`)"
-		:isTrigger="false"
+		:is-trigger="false"
 		:description="i18n.baseText(`nodeCreator.subcategoryDescriptions.${subcategoryName}`)"
-		:showActionArrow="true"
+		:show-action-arrow="true"
 	>
 		<template #icon>
 			<n8n-node-icon
 				type="icon"
 				:name="item.icon"
 				:circle="false"
-				:showTooltip="false"
+				:show-tooltip="false"
 				v-bind="item.iconProps"
 			/>
 		</template>

packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ViewItem.vue

@@ -3,12 +3,12 @@
 		:class="$style.view"
 		:title="view.title"
 		:tag="view.tag"
-		:isTrigger="false"
+		:is-trigger="false"
 		:description="view.description"
-		:showActionArrow="true"
+		:show-action-arrow="true"
 	>
 		<template #icon>
-			<n8n-node-icon type="icon" :name="view.icon" :circle="false" :showTooltip="false" />
+			<n8n-node-icon type="icon" :name="view.icon" :circle="false" :show-tooltip="false" />
 		</template>
 	</n8n-node-creator-node>
 </template>

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

@@ -223,19 +223,19 @@ onMounted(() => {
 
 <template>
 	<div :class="$style.container">
-		<OrderSwitcher :rootView="rootView">
-			<template #triggers v-if="isTriggerRootView || parsedTriggerActionsBaseline.length !== 0">
+		<OrderSwitcher :root-view="rootView">
+			<template v-if="isTriggerRootView || parsedTriggerActionsBaseline.length !== 0" #triggers>
 				<!-- Triggers Category -->
 				<CategorizedItemsRenderer
 					:elements="parsedTriggerActions"
 					:category="triggerCategoryName"
-					:mouseOverTooltip="$locale.baseText('nodeCreator.actionsTooltip.triggersStartWorkflow')"
-					isTriggerCategory
+					:mouse-over-tooltip="$locale.baseText('nodeCreator.actionsTooltip.triggersStartWorkflow')"
+					is-trigger-category
 					:expanded="isTriggerRootView || parsedActionActions.length === 0"
 					@selected="onSelected"
 				>
 					<!-- Empty state -->
-					<template #empty v-if="hasNoTriggerActions">
+					<template v-if="hasNoTriggerActions" #empty>
 						<n8n-callout
 							v-if="hasNoTriggerActions"
 							theme="info"
@@ -251,30 +251,30 @@ onMounted(() => {
 								"
 							/>
 						</n8n-callout>
-						<ItemsRenderer @selected="onSelected" :elements="placeholderTriggerActions" />
+						<ItemsRenderer :elements="placeholderTriggerActions" @selected="onSelected" />
 					</template>
-					<template #empty v-else>
+					<template v-else #empty>
 						<p
 							:class="$style.resetSearch"
-							v-html="$locale.baseText('nodeCreator.actionsCategory.noMatchingTriggers')"
 							@click="resetSearch"
+							v-html="$locale.baseText('nodeCreator.actionsCategory.noMatchingTriggers')"
 						/>
 					</template>
 				</CategorizedItemsRenderer>
 			</template>
-			<template #actions v-if="!isTriggerRootView || parsedActionActionsBaseline.length !== 0">
+			<template v-if="!isTriggerRootView || parsedActionActionsBaseline.length !== 0" #actions>
 				<!-- Actions Category -->
 				<CategorizedItemsRenderer
 					:elements="parsedActionActions"
 					:category="actionsCategoryLocales.actions"
-					:mouseOverTooltip="$locale.baseText('nodeCreator.actionsTooltip.actionsPerformStep')"
+					:mouse-over-tooltip="$locale.baseText('nodeCreator.actionsTooltip.actionsPerformStep')"
 					:expanded="!isTriggerRootView || parsedTriggerActions.length === 0"
 					@selected="onSelected"
 				>
 					<n8n-callout
+						v-if="!userActivated && isTriggerRootView"
 						theme="info"
 						iconless
-						v-if="!userActivated && isTriggerRootView"
 						slim
 						data-test-id="actions-panel-activation-callout"
 					>
@@ -282,7 +282,7 @@ onMounted(() => {
 					</n8n-callout>
 					<!-- Empty state -->
 					<template #empty>
-						<n8n-info-tip theme="info" type="note" v-if="!search" :class="$style.actionsEmpty">
+						<n8n-info-tip v-if="!search" theme="info" type="note" :class="$style.actionsEmpty">
 							<span
 								v-html="
 									$locale.baseText('nodeCreator.actionsCallout.noActionItems', {
@@ -294,15 +294,15 @@ onMounted(() => {
 						<p
 							v-else
 							:class="$style.resetSearch"
-							v-html="$locale.baseText('nodeCreator.actionsCategory.noMatchingActions')"
-							@click="resetSearch"
 							data-test-id="actions-panel-no-matching-actions"
+							@click="resetSearch"
+							v-html="$locale.baseText('nodeCreator.actionsCategory.noMatchingActions')"
 						/>
 					</template>
 				</CategorizedItemsRenderer>
 			</template>
 		</OrderSwitcher>
-		<div :class="$style.apiHint" v-if="containsAPIAction">
+		<div v-if="containsAPIAction" :class="$style.apiHint">
 			<span
 				@click.prevent="addHttpNode"
 				v-html="

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

@@ -209,15 +209,15 @@ registerKeyHook('MainViewArrowLeft', {
 <template>
 	<span>
 		<!-- Main Node Items -->
-		<ItemsRenderer :elements="activeViewStack.items" @selected="onSelected" :class="$style.items">
+		<ItemsRenderer :elements="activeViewStack.items" :class="$style.items" @selected="onSelected">
 			<template
-				#empty
 				v-if="(activeViewStack.items || []).length === 0 && globalSearchItemsDiff.length === 0"
+				#empty
 			>
 				<NoResults
-					:rootView="activeViewStack.rootView"
-					showIcon
-					showRequest
+					:root-view="activeViewStack.rootView"
+					show-icon
+					show-request
 					@addWebhookNode="selectNodeType([WEBHOOK_NODE_TYPE])"
 					@addHttpNode="selectNodeType([HTTP_REQUEST_NODE_TYPE])"
 				/>

packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue

@@ -1,21 +1,21 @@
 <template>
 	<div>
 		<aside :class="{ [$style.nodeCreatorScrim]: true, [$style.active]: showScrim }" />
-		<slide-transition>
+		<SlideTransition>
 			<div
 				v-if="active"
+				ref="nodeCreator"
 				:class="$style.nodeCreator"
 				:style="nodeCreatorInlineStyle"
-				ref="nodeCreator"
+				data-test-id="node-creator"
 				@dragover="onDragOver"
 				@drop="onDrop"
 				@mousedown="onMouseDown"
 				@mouseup="onMouseUp"
-				data-test-id="node-creator"
 			>
 				<NodesListPanel @nodeTypeSelected="onNodeTypeSelected" />
 			</div>
-		</slide-transition>
+		</SlideTransition>
 	</div>
 </template>
 

packages/editor-ui/src/components/Node/NodeCreator/Panel/NoResults.vue

@@ -3,8 +3,8 @@
 		:class="{ [$style.noResults]: true, [$style.iconless]: !showIcon }"
 		data-test-id="node-creator-no-results"
 	>
-		<div :class="$style.icon" v-if="showIcon">
-			<no-results-icon />
+		<div v-if="showIcon" :class="$style.icon">
+			<NoResultsIcon />
 		</div>
 		<div :class="$style.title">
 			<slot name="title" />
@@ -22,7 +22,7 @@
 			</div>
 		</div>
 
-		<div :class="$style.request" v-if="showRequest">
+		<div v-if="showRequest" :class="$style.request">
 			<p v-text="$locale.baseText('nodeCreator.noResults.wantUsToMakeItFaster')" />
 			<div>
 				<n8n-link :to="REQUEST_NODE_FORM_URL">

packages/editor-ui/src/components/Node/NodeCreator/Panel/NoResultsIcon.vue

@@ -33,8 +33,8 @@
 										points="44.5045606 32.0526802 53.8794707 32.0526802 53.8794707 58.5524261 44.5045606 58.5524261"
 									></polygon>
 									<path
-										d="M48.125,23.0859375 C54.15625,23.0859375 59.0625,18.1796875 59.0625,12.1484375 C59.0625,10.3359375 58.5625,8.6484375 57.78125,7.1484375 L49.34375,15.5859375 L44.6875,10.9296875 L53.125,2.4921875 C51.625,1.7109375 49.9375,1.2109375 48.125,1.2109375 C42.09375,1.2109375 37.1875,6.1171875 37.1875,12.1484375 C37.1875,13.4296875 37.4375,14.6484375 37.84375,15.7734375 L32.0625,21.5546875 L26.5,15.9921875 L28.71875,13.7734375 L24.3125,9.3671875 L30.9375,2.7421875 C27.28125,-0.9140625 21.34375,-0.9140625 17.6875,2.7421875 L6.625,13.8046875 L11.03125,18.2109375 L2.21875,18.2109375 L1.38777878e-15,20.4296875 L11.0625,31.4921875 L13.28125,29.2734375 L13.28125,20.4296875 L17.6875,24.8359375 L19.90625,22.6171875 L25.46875,28.1796875 L2.3125,51.3359375 L8.9375,57.9609375 L44.5,22.4296875 C45.625,22.8359375 46.84375,23.0859375 48.125,23.0859375 Z"
 										id="Path"
+										d="M48.125,23.0859375 C54.15625,23.0859375 59.0625,18.1796875 59.0625,12.1484375 C59.0625,10.3359375 58.5625,8.6484375 57.78125,7.1484375 L49.34375,15.5859375 L44.6875,10.9296875 L53.125,2.4921875 C51.625,1.7109375 49.9375,1.2109375 48.125,1.2109375 C42.09375,1.2109375 37.1875,6.1171875 37.1875,12.1484375 C37.1875,13.4296875 37.4375,14.6484375 37.84375,15.7734375 L32.0625,21.5546875 L26.5,15.9921875 L28.71875,13.7734375 L24.3125,9.3671875 L30.9375,2.7421875 C27.28125,-0.9140625 21.34375,-0.9140625 17.6875,2.7421875 L6.625,13.8046875 L11.03125,18.2109375 L2.21875,18.2109375 L1.38777878e-15,20.4296875 L11.0625,31.4921875 L13.28125,29.2734375 L13.28125,20.4296875 L17.6875,24.8359375 L19.90625,22.6171875 L25.46875,28.1796875 L2.3125,51.3359375 L8.9375,57.9609375 L44.5,22.4296875 C45.625,22.8359375 46.84375,23.0859375 48.125,23.0859375 Z"
 									></path>
 								</g>
 							</g>

packages/editor-ui/src/components/Node/NodeCreator/Panel/NodesListPanel.vue

@@ -121,9 +121,9 @@ function onBackButton() {
 		@afterLeave="onTransitionEnd"
 	>
 		<aside
+			:key="`${activeViewStack.uuid}`"
 			:class="[$style.nodesListPanel, activeViewStack.panelClass]"
 			@keydown.capture.stop
-			:key="`${activeViewStack.uuid}`"
 		>
 			<header
 				:class="{
@@ -135,9 +135,9 @@ function onBackButton() {
 			>
 				<div :class="$style.top">
 					<button
+						v-if="viewStacks.length > 1 && !activeViewStack.preventBack"
 						:class="$style.backButton"
 						@click="onBackButton"
-						v-if="viewStacks.length > 1 && !activeViewStack.preventBack"
 					>
 						<font-awesome-icon :class="$style.backButtonIcon" icon="arrow-left" size="2x" />
 					</button>
@@ -149,10 +149,10 @@ function onBackButton() {
 						:name="activeViewStack.nodeIcon.icon"
 						:color="activeViewStack.nodeIcon.color"
 						:circle="false"
-						:showTooltip="false"
+						:show-tooltip="false"
 						:size="20"
 					/>
-					<p :class="$style.title" v-text="activeViewStack.title" v-if="activeViewStack.title" />
+					<p v-if="activeViewStack.title" :class="$style.title" v-text="activeViewStack.title" />
 				</div>
 				<p
 					v-if="activeViewStack.subtitle"
@@ -160,7 +160,7 @@ function onBackButton() {
 					v-text="activeViewStack.subtitle"
 				/>
 			</header>
-			<search-bar
+			<SearchBar
 				v-if="activeViewStack.hasSearch"
 				:class="$style.searchBar"
 				:placeholder="
@@ -168,7 +168,7 @@ function onBackButton() {
 						? searchPlaceholder
 						: $locale.baseText('nodeCreator.searchBar.searchNodes')
 				"
-				:modelValue="activeViewStack.search"
+				:model-value="activeViewStack.search"
 				@update:modelValue="onSearch"
 			/>
 			<div :class="$style.renderedItems">
@@ -182,7 +182,7 @@ function onBackButton() {
 				<ActionsRenderer v-if="isActionsMode && activeViewStack.subcategory" v-bind="$attrs" />
 
 				<!-- Nodes Mode -->
-				<NodesRenderer v-else :rootView="nodeCreatorView" v-bind="$attrs" />
+				<NodesRenderer v-else :root-view="nodeCreatorView" v-bind="$attrs" />
 			</div>
 		</aside>
 	</transition>

packages/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue

@@ -5,17 +5,17 @@
 		</div>
 		<div :class="$style.text">
 			<input
+				ref="inputRef"
 				:placeholder="placeholder"
 				:value="modelValue"
 				:class="$style.input"
-				ref="inputRef"
 				autofocus
 				data-test-id="node-creator-search-bar"
 				tabindex="0"
 				@input="onInput"
 			/>
 		</div>
-		<div :class="$style.suffix" v-if="modelValue.length > 0" @click="clear">
+		<div v-if="modelValue.length > 0" :class="$style.suffix" @click="clear">
 			<button :class="[$style.clear, $style.clickable]">
 				<font-awesome-icon icon="times-circle" />
 			</button>

packages/editor-ui/src/components/Node/NodeCreator/Renderers/CategorizedItemsRenderer.vue

@@ -97,12 +97,12 @@ registerKeyHook(`CategoryLeft_${props.category}`, {
 			:active="activeItemId === category"
 			:count="actionCount"
 			:expanded="expanded"
-			:isTrigger="isTriggerCategory"
+			:is-trigger="isTriggerCategory"
 			data-keyboard-nav-type="category"
 			:data-keyboard-nav-id="category"
 			@click="toggleExpanded"
 		>
-			<span :class="$style.mouseOverTooltip" v-if="mouseOverTooltip">
+			<span v-if="mouseOverTooltip" :class="$style.mouseOverTooltip">
 				<n8n-tooltip placement="top" :popper-class="$style.tooltipPopper">
 					<n8n-icon icon="question-circle" size="small" />
 					<template #content>
@@ -111,7 +111,7 @@ registerKeyHook(`CategoryLeft_${props.category}`, {
 				</n8n-tooltip>
 			</span>
 		</CategoryItem>
-		<div :class="$style.contentSlot" v-if="expanded && actionCount > 0 && $slots.default">
+		<div v-if="expanded && actionCount > 0 && $slots.default" :class="$style.contentSlot">
 			<slot />
 		</div>
 		<!-- Pass through listeners & empty slot to ItemsRenderer -->
@@ -119,7 +119,7 @@ registerKeyHook(`CategoryLeft_${props.category}`, {
 			v-if="expanded"
 			v-bind="$attrs"
 			:elements="elements"
-			:isTrigger="isTriggerCategory"
+			:is-trigger="isTriggerCategory"
 		>
 			<template #default> </template>
 			<template #empty>

packages/editor-ui/src/components/Node/NodeCreator/Renderers/ItemsRenderer.vue

@@ -125,46 +125,46 @@ watch(
 
 				<div
 					v-else
+					ref="iteratorItems"
 					:class="{
 						clickable: !disabled,
 						[$style.active]: activeItemId === item.uuid,
 						[$style.iteratorItem]: true,
 						[$style[item.type]]: true,
 					}"
-					ref="iteratorItems"
 					data-test-id="item-iterator-item"
 					:data-keyboard-nav-type="item.type !== 'label' ? item.type : undefined"
 					:data-keyboard-nav-id="item.uuid"
 					@click="wrappedEmit('selected', item)"
 				>
-					<label-item v-if="item.type === 'label'" :item="item" />
-					<subcategory-item v-if="item.type === 'subcategory'" :item="item.properties" />
+					<LabelItem v-if="item.type === 'label'" :item="item" />
+					<SubcategoryItem v-if="item.type === 'subcategory'" :item="item.properties" />
 
-					<node-item
+					<NodeItem
 						v-if="item.type === 'node'"
-						:nodeType="item.properties"
+						:node-type="item.properties"
 						:active="true"
 						:subcategory="item.subcategory"
 					/>
 
-					<action-item
+					<ActionItem
 						v-if="item.type === 'action'"
-						:nodeType="item.properties"
+						:node-type="item.properties"
 						:action="item.properties"
 						:active="true"
 					/>
 
-					<view-item
+					<ViewItem
 						v-else-if="item.type === 'view'"
 						:view="item.properties"
 						:class="$style.viewItem"
 					/>
 				</div>
 			</div>
-			<n8n-loading :loading="true" :rows="1" variant="p" :class="$style.itemSkeleton" v-else />
+			<n8n-loading v-else :loading="true" :rows="1" variant="p" :class="$style.itemSkeleton" />
 		</div>
 	</div>
-	<div :class="$style.empty" v-else>
+	<div v-else :class="$style.empty">
 		<slot name="empty" />
 	</div>
 </template>

packages/editor-ui/src/components/Node/NodeCreator/__tests__/NodesListPanel.test.ts

@@ -12,15 +12,15 @@ import { createComponentRenderer } from '@/__tests__/render';
 
 function getWrapperComponent(setup: () => void) {
 	const wrapperComponent = defineComponent({
+		components: {
+			NodesListPanel,
+		},
 		props: {
 			nodeTypes: {
 				type: Array as PropType<INodeTypeDescription[]>,
 				required: false,
 			},
 		},
-		components: {
-			NodesListPanel,
-		},
 		setup,
 		template: '<NodesListPanel @nodeTypeSelected="e => $emit(\'nodeTypeSelected\', e)" />',
 	});
@@ -89,6 +89,9 @@ describe('NodesListPanel', () => {
 			);
 
 			const wrapperComponent = defineComponent({
+				components: {
+					NodesListPanel,
+				},
 				props: {
 					nodeTypes: {
 						type: Array as PropType<INodeTypeDescription[]>,
@@ -100,9 +103,6 @@ describe('NodesListPanel', () => {
 						required: false,
 					},
 				},
-				components: {
-					NodesListPanel,
-				},
 				setup(props) {
 					const { setActions, setMergeNodes, setSelectedView } = useNodeCreatorStore();
 
@@ -156,15 +156,15 @@ describe('NodesListPanel', () => {
 		);
 
 		const wrapperComponent = defineComponent({
+			components: {
+				NodesListPanel,
+			},
 			props: {
 				nodeTypes: {
 					type: Array as PropType<INodeTypeDescription[]>,
 					required: true,
 				},
 			},
-			components: {
-				NodesListPanel,
-			},
 			setup(props) {
 				const { setMergeNodes } = useNodeCreatorStore();
 

packages/editor-ui/src/components/Node/NodeCreator/__tests__/useKeyboardNavigation.test.ts

@@ -21,6 +21,9 @@ describe('useKeyboardNavigation', () => {
 
 			return { attachKeydownEvent, detachKeydownEvent, setActiveItemId, activeItemId };
 		},
+		mounted() {
+			this.attachKeydownEvent();
+		},
 		template: `
 			<span>
 				<div
@@ -33,9 +36,6 @@ describe('useKeyboardNavigation', () => {
 				/>
 			</span>
 		`,
-		mounted() {
-			this.attachKeydownEvent();
-		},
 	});
 
 	const renderComponent = createComponentRenderer(TestComponent, {