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

packages/editor-ui/src/components/RunDataAi/AiRunContentBlock.vue

@@ -8,10 +8,10 @@
 			<!-- @click.stop to prevent event from bubbling to blockHeader and toggling expanded state when clicking on rawSwitch -->
 			<el-switch
 				v-if="contentParsed"
-				@click.stop
+				v-model="isShowRaw"
 				:class="$style.rawSwitch"
 				active-text="RAW JSON"
-				v-model="isShowRaw"
+				@click.stop
 			/>
 		</header>
 		<main
@@ -21,24 +21,24 @@
 			}"
 		>
 			<div
-				:key="index"
 				v-for="({ parsedContent, raw }, index) in parsedRun"
+				:key="index"
 				:class="$style.contentText"
 				:data-content-type="parsedContent?.type"
 			>
 				<template v-if="parsedContent && !isShowRaw">
 					<template v-if="parsedContent.type === 'json'">
-						<vue-markdown
+						<VueMarkdown
 							:source="jsonToMarkdown(parsedContent.data as JsonMarkdown)"
 							:class="$style.markdown"
 						/>
 					</template>
 					<template v-if="parsedContent.type === 'markdown'">
-						<vue-markdown :source="parsedContent.data" :class="$style.markdown" />
+						<VueMarkdown :source="parsedContent.data" :class="$style.markdown" />
 					</template>
 					<p
-						:class="$style.runText"
 						v-if="parsedContent.type === 'text'"
+						:class="$style.runText"
 						v-text="parsedContent.data"
 					/>
 				</template>
@@ -49,11 +49,11 @@
 							size="small"
 							:class="$style.copyToClipboard"
 							type="secondary"
-							@click="copyToClipboard(raw)"
 							:title="$locale.baseText('nodeErrorView.copyToClipboard')"
 							icon="copy"
+							@click="copyToClipboard(raw)"
 						/>
-						<vue-markdown :source="jsonToMarkdown(raw as JsonMarkdown)" :class="$style.markdown" />
+						<VueMarkdown :source="jsonToMarkdown(raw as JsonMarkdown)" :class="$style.markdown" />
 					</div>
 				</template>
 			</div>

packages/editor-ui/src/components/RunDataAi/RunDataAi.vue

@@ -1,14 +1,14 @@
 <template>
 	<div v-if="aiData" :class="$style.container">
 		<div :class="{ [$style.tree]: true, [$style.slim]: slim }">
-			<el-tree
+			<ElTree
 				:data="executionTree"
 				:props="{ label: 'node' }"
 				default-expand-all
 				:indent="12"
-				@node-click="onItemClick"
 				:expand-on-click-node="false"
 				data-test-id="lm-chat-logs-tree"
+				@node-click="onItemClick"
 			>
 				<template #default="{ node, data }">
 					<div
@@ -20,8 +20,8 @@
 						:style="{ '--item-depth': data.depth }"
 					>
 						<button
-							:class="$style.treeToggle"
 							v-if="data.children.length"
+							:class="$style.treeToggle"
 							@click="toggleTreeItem(node)"
 						>
 							<font-awesome-icon :icon="node.expanded ? 'angle-down' : 'angle-up'" />
@@ -31,13 +31,13 @@
 								{{ node.label }}
 							</template>
 							<span :class="$style.leafLabel">
-								<node-icon :node-type="getNodeType(data.node)!" :size="17" />
-								<span v-text="node.label" v-if="!slim" />
+								<NodeIcon :node-type="getNodeType(data.node)!" :size="17" />
+								<span v-if="!slim" v-text="node.label" />
 							</span>
 						</n8n-tooltip>
 					</div>
 				</template>
-			</el-tree>
+			</ElTree>
 		</div>
 		<div :class="$style.runData">
 			<div v-if="selectedRun.length === 0" :class="$style.empty">
@@ -56,7 +56,7 @@
 				:key="`${data.node}__${data.runIndex}__index`"
 				data-test-id="lm-chat-logs-entry"
 			>
-				<RunDataAiContent :inputData="data" :contentIndex="index" />
+				<RunDataAiContent :input-data="data" :content-index="index" />
 			</div>
 		</div>
 	</div>

packages/editor-ui/src/components/RunDataAi/RunDataAiContent.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="$style.container">
 		<header :class="$style.header">
-			<node-icon
+			<NodeIcon
 				v-if="runMeta?.node"
 				:class="$style.nodeIcon"
 				:node-type="runMeta.node"
@@ -35,7 +35,7 @@
 								},
 							})
 						}}
-						<n8n-info-tip type="tooltip" theme="info-light" tooltipPlacement="right">
+						<n8n-info-tip type="tooltip" theme="info-light" tooltip-placement="right">
 							<div>
 								<n8n-text :bold="true" size="small">
 									{{ $locale.baseText('runData.aiContentBlock.tokens.prompt') }}
@@ -65,8 +65,8 @@
 			</div>
 		</header>
 
-		<main :class="$style.content" v-for="(run, index) in props.inputData.data" :key="index">
-			<AiRunContentBlock :runData="run" />
+		<main v-for="(run, index) in props.inputData.data" :key="index" :class="$style.content">
+			<AiRunContentBlock :run-data="run" />
 		</main>
 	</div>
 </template>