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

packages/editor-ui/src/views/SetupWorkflowFromTemplateView/AppsRequiringCredsNotice.vue

@@ -22,11 +22,11 @@ const appNodeCounts = computed(() => {
 </script>
 
 <template>
-	<n8n-notice :class="$style.notice" theme="info">
+	<N8nNotice :class="$style.notice" theme="info">
 		<i18n-t tag="span" keypath="templateSetup.instructions" scope="global">
 			<span v-html="appNodeCounts" />
 		</i18n-t>
-	</n8n-notice>
+	</N8nNotice>
 </template>
 
 <style lang="scss" module>

packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupTemplateFormStep.vue

@@ -87,13 +87,13 @@ const onCredentialModalOpened = () => {
 
 <template>
 	<li :class="$style.container" data-test-id="setup-credentials-form-step">
-		<n8n-heading tag="h2" size="large">
+		<N8nHeading tag="h2" size="large">
 			<div v-if="nodeType" :class="$style.heading" data-test-id="credential-step-heading">
 				<span :class="$style.headingOrder">{{ order }}.</span>
 				<span :class="$style.headingIcon"><NodeIcon :node-type="nodeType" /></span>
 				{{ appName }}
 			</div>
-		</n8n-heading>
+		</N8nHeading>
 
 		<p :class="$style.description" data-test-id="credential-step-description">
 			<i18n-t
@@ -110,8 +110,8 @@ const onCredentialModalOpened = () => {
 			<CredentialPicker
 				:class="$style.credentialPicker"
 				:app-name="appName"
-				:credentialType="props.credentials.credentialType"
-				:selectedCredentialId="selectedCredentialId"
+				:credential-type="props.credentials.credentialType"
+				:selected-credential-id="selectedCredentialId"
 				@credential-selected="onCredentialSelected"
 				@credential-deselected="onCredentialDeselected"
 				@credential-modal-opened="onCredentialModalOpened"

packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupWorkflowFromTemplateView.vue

@@ -93,11 +93,11 @@ onMounted(async () => {
 </script>
 
 <template>
-	<TemplatesView :goBackEnabled="true">
+	<TemplatesView :go-back-enabled="true">
 		<template #header>
-			<n8n-heading v-if="isReady" tag="h1" size="2xlarge"
+			<N8nHeading v-if="isReady" tag="h1" size="2xlarge"
 				>{{ i18n.baseText('templateSetup.title', { interpolate: { name: title } }) }}
-			</n8n-heading>
+			</N8nHeading>
 			<n8n-loading v-else variant="h1" />
 		</template>
 
@@ -111,9 +111,9 @@ onMounted(async () => {
 				<div>
 					<ol v-if="isReady" :class="$style.appCredentialsContainer">
 						<SetupTemplateFormStep
-							:class="$style.appCredential"
-							:key="credentials.key"
 							v-for="(credentials, index) in setupTemplateStore.credentialUsages"
+							:key="credentials.key"
+							:class="$style.appCredential"
 							:order="index + 1"
 							:credentials="credentials"
 						/>
@@ -125,9 +125,9 @@ onMounted(async () => {
 				</div>
 
 				<div :class="$style.actions">
-					<n8n-link :href="skipSetupUrl" :newWindow="false" @click="onSkipSetup($event)">{{
+					<N8nLink :href="skipSetupUrl" :new-window="false" @click="onSkipSetup($event)">{{
 						i18n.baseText('templateSetup.skip')
-					}}</n8n-link>
+					}}</N8nLink>
 
 					<n8n-tooltip
 						v-if="isReady"
@@ -140,8 +140,8 @@ onMounted(async () => {
 							:disabled="
 								setupTemplateStore.isSaving || setupTemplateStore.numFilledCredentials === 0
 							"
-							@click="setupTemplateStore.createWorkflow({ router })"
 							data-test-id="continue-button"
+							@click="setupTemplateStore.createWorkflow({ router })"
 						/>
 					</n8n-tooltip>
 					<div v-else>