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

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

@@ -1,10 +1,10 @@
 <template>
 	<div :class="$style.container">
 		<transition name="fade" mode="out-in">
-			<div key="empty" v-if="hasIssues"></div>
-			<div key="listening" v-else-if="isListeningForEvents">
+			<div v-if="hasIssues" key="empty"></div>
+			<div v-else-if="isListeningForEvents" key="listening">
 				<n8n-pulse>
-					<NodeIcon :nodeType="nodeType" :size="40"></NodeIcon>
+					<NodeIcon :node-type="nodeType" :size="40"></NodeIcon>
 				</n8n-pulse>
 				<div v-if="isWebhookNode">
 					<n8n-text tag="div" size="large" color="text-dark" class="mb-2xs" bold>{{
@@ -14,14 +14,14 @@
 						<n8n-text>
 							{{
 								$locale.baseText('ndv.trigger.webhookNode.requestHint', {
-									interpolate: { type: this.webhookHttpMethod },
+									interpolate: { type: webhookHttpMethod },
 								})
 							}}
 						</n8n-text>
 					</div>
 					<CopyInput
 						:value="webhookTestUrl"
-						:toastTitle="$locale.baseText('ndv.trigger.copiedTestUrl')"
+						:toast-title="$locale.baseText('ndv.trigger.copiedTestUrl')"
 						class="mb-2xl"
 						size="medium"
 						:collapse="true"
@@ -30,10 +30,10 @@
 					></CopyInput>
 					<NodeExecuteButton
 						data-test-id="trigger-execute-button"
-						:nodeName="nodeName"
-						@execute="onNodeExecute"
+						:node-name="nodeName"
 						size="medium"
-						telemetrySource="inputs"
+						telemetry-source="inputs"
+						@execute="onNodeExecute"
 					/>
 				</div>
 				<div v-else>
@@ -47,15 +47,15 @@
 					</div>
 					<NodeExecuteButton
 						data-test-id="trigger-execute-button"
-						:nodeName="nodeName"
-						@execute="onNodeExecute"
+						:node-name="nodeName"
 						size="medium"
-						telemetrySource="inputs"
+						telemetry-source="inputs"
+						@execute="onNodeExecute"
 					/>
 				</div>
 			</div>
-			<div key="default" v-else>
-				<div class="mb-xl" v-if="isActivelyPolling">
+			<div v-else key="default">
+				<div v-if="isActivelyPolling" class="mb-xl">
 					<n8n-spinner type="ring" />
 				</div>
 
@@ -71,29 +71,29 @@
 
 					<NodeExecuteButton
 						data-test-id="trigger-execute-button"
-						:nodeName="nodeName"
-						@execute="onNodeExecute"
+						:node-name="nodeName"
 						size="medium"
-						telemetrySource="inputs"
+						telemetry-source="inputs"
+						@execute="onNodeExecute"
 					/>
 				</div>
 
-				<n8n-text size="small" @click="onLinkClick" v-if="activationHint">
+				<n8n-text v-if="activationHint" size="small" @click="onLinkClick">
 					<span v-html="activationHint"></span>&nbsp;
 				</n8n-text>
 				<n8n-link
-					size="small"
 					v-if="activationHint && executionsHelp"
+					size="small"
 					@click="expandExecutionHelp"
 					>{{ $locale.baseText('ndv.trigger.moreInfo') }}</n8n-link
 				>
 				<n8n-info-accordion
-					ref="help"
 					v-if="executionsHelp"
+					ref="help"
 					:class="$style.accordion"
 					:title="$locale.baseText('ndv.trigger.executionsHint.question')"
 					:description="executionsHelp"
-					:eventBus="executionsHelpEventBus"
+					:event-bus="executionsHelpEventBus"
 					@click:body="onLinkClick"
 				></n8n-info-accordion>
 			</div>
@@ -129,17 +129,12 @@ type HelpRef = InstanceType<typeof N8nInfoAccordion>;
 
 export default defineComponent({
 	name: 'TriggerPanel',
-	mixins: [workflowHelpers, copyPaste],
 	components: {
 		NodeExecuteButton,
 		CopyInput,
 		NodeIcon,
 	},
-	data: () => {
-		return {
-			executionsHelpEventBus: createEventBus(),
-		};
-	},
+	mixins: [workflowHelpers, copyPaste],
 	props: {
 		nodeName: {
 			type: String,
@@ -148,6 +143,11 @@ export default defineComponent({
 			type: String,
 		},
 	},
+	data: () => {
+		return {
+			executionsHelpEventBus: createEventBus(),
+		};
+	},
 	computed: {
 		...mapStores(useNodeTypesStore, useNDVStore, useUIStore, useWorkflowsStore),
 		node(): INodeUi | null {