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

packages/editor-ui/src/components/CredentialEdit/AuthTypeSelector.vue

@@ -118,18 +118,18 @@ defineExpose({
 <template>
 	<div v-if="filteredNodeAuthOptions.length > 0" data-test-id="node-auth-type-selector">
 		<div v-for="parameter in authRelatedFields" :key="parameter.name" class="mb-l">
-			<parameter-input-full
+			<ParameterInputFull
 				:parameter="parameter"
 				:value="authRelatedFieldsValues[parameter.name] || parameter.default"
 				:path="parameter.name"
-				:displayOptions="false"
+				:display-options="false"
 				@update="valueChanged"
 			/>
 		</div>
 		<div>
 			<n8n-input-label
 				:label="$locale.baseText('credentialEdit.credentialConfig.authTypeSelectorLabel')"
-				:tooltipText="$locale.baseText('credentialEdit.credentialConfig.authTypeSelectorTooltip')"
+				:tooltip-text="$locale.baseText('credentialEdit.credentialConfig.authTypeSelectorTooltip')"
 				:required="true"
 			/>
 		</div>

packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue

@@ -1,6 +1,6 @@
 <template>
 	<div :class="$style.container" data-test-id="node-credentials-config-container">
-		<banner
+		<Banner
 			v-show="showValidationWarning"
 			theme="danger"
 			:message="
@@ -13,7 +13,7 @@
 			"
 		/>
 
-		<banner
+		<Banner
 			v-if="authError && !showValidationWarning"
 			theme="danger"
 			:message="
@@ -25,40 +25,40 @@
 				)
 			"
 			:details="authError"
-			:buttonLabel="$locale.baseText('credentialEdit.credentialConfig.retry')"
-			buttonLoadingLabel="Retrying"
-			:buttonTitle="$locale.baseText('credentialEdit.credentialConfig.retryCredentialTest')"
-			:buttonLoading="isRetesting"
+			:button-label="$locale.baseText('credentialEdit.credentialConfig.retry')"
+			button-loading-label="Retrying"
+			:button-title="$locale.baseText('credentialEdit.credentialConfig.retryCredentialTest')"
+			:button-loading="isRetesting"
 			@click="$emit('retest')"
 		/>
 
-		<banner
+		<Banner
 			v-show="showOAuthSuccessBanner && !showValidationWarning"
 			theme="success"
 			:message="$locale.baseText('credentialEdit.credentialConfig.accountConnected')"
-			:buttonLabel="$locale.baseText('credentialEdit.credentialConfig.reconnect')"
-			:buttonTitle="$locale.baseText('credentialEdit.credentialConfig.reconnectOAuth2Credential')"
+			:button-label="$locale.baseText('credentialEdit.credentialConfig.reconnect')"
+			:button-title="$locale.baseText('credentialEdit.credentialConfig.reconnectOAuth2Credential')"
 			@click="$emit('oauth')"
 		>
-			<template #button v-if="isGoogleOAuthType">
+			<template v-if="isGoogleOAuthType" #button>
 				<p
-					v-text="`${$locale.baseText('credentialEdit.credentialConfig.reconnect')}:`"
 					:class="$style.googleReconnectLabel"
+					v-text="`${$locale.baseText('credentialEdit.credentialConfig.reconnect')}:`"
 				/>
 				<GoogleAuthButton @click="$emit('oauth')" />
 			</template>
-		</banner>
+		</Banner>
 
-		<banner
+		<Banner
 			v-show="testedSuccessfully && !showValidationWarning"
 			theme="success"
 			:message="$locale.baseText('credentialEdit.credentialConfig.connectionTestedSuccessfully')"
-			:buttonLabel="$locale.baseText('credentialEdit.credentialConfig.retry')"
-			:buttonLoadingLabel="$locale.baseText('credentialEdit.credentialConfig.retrying')"
-			:buttonTitle="$locale.baseText('credentialEdit.credentialConfig.retryCredentialTest')"
-			:buttonLoading="isRetesting"
-			@click="$emit('retest')"
+			:button-label="$locale.baseText('credentialEdit.credentialConfig.retry')"
+			:button-loading-label="$locale.baseText('credentialEdit.credentialConfig.retrying')"
+			:button-title="$locale.baseText('credentialEdit.credentialConfig.retryCredentialTest')"
+			:button-loading="isRetesting"
 			data-test-id="credentials-config-container-test-success"
+			@click="$emit('retest')"
 		/>
 
 		<template v-if="credentialPermissions.update">
@@ -73,7 +73,7 @@
 
 			<AuthTypeSelector
 				v-if="showAuthTypeSelector && isNewCredential"
-				:credentialType="credentialType"
+				:credential-type="credentialType"
 				@authTypeChanged="onAuthTypeChange"
 			/>
 
@@ -81,17 +81,17 @@
 				v-if="isOAuthType && credentialProperties.length"
 				:label="$locale.baseText('credentialEdit.credentialConfig.oAuthRedirectUrl')"
 				:value="oAuthCallbackUrl"
-				:copyButtonText="$locale.baseText('credentialEdit.credentialConfig.clickToCopy')"
+				:copy-button-text="$locale.baseText('credentialEdit.credentialConfig.clickToCopy')"
 				:hint="
 					$locale.baseText('credentialEdit.credentialConfig.subtitle', { interpolate: { appName } })
 				"
-				:toastTitle="
+				:toast-title="
 					$locale.baseText('credentialEdit.credentialConfig.redirectUrlCopiedToClipboard')
 				"
-				:redactValue="true"
+				:redact-value="true"
 			/>
 		</template>
-		<enterprise-edition v-else :features="[EnterpriseEditionFeature.Sharing]">
+		<EnterpriseEdition v-else :features="[EnterpriseEditionFeature.Sharing]">
 			<div>
 				<n8n-info-tip :bold="false">
 					{{
@@ -101,14 +101,14 @@
 					}}
 				</n8n-info-tip>
 			</div>
-		</enterprise-edition>
+		</EnterpriseEdition>
 
 		<CredentialInputs
 			v-if="credentialType && credentialPermissions.update"
-			:credentialData="credentialData"
-			:credentialProperties="credentialProperties"
-			:documentationUrl="documentationUrl"
-			:showValidationWarnings="showValidationWarning"
+			:credential-data="credentialData"
+			:credential-properties="credentialProperties"
+			:documentation-url="documentationUrl"
+			:show-validation-warnings="showValidationWarning"
 			@update="onDataChange"
 		/>
 
@@ -119,7 +119,7 @@
 				!isOAuthConnected &&
 				credentialPermissions.isOwner
 			"
-			:isGoogleOAuthType="isGoogleOAuthType"
+			:is-google-o-auth-type="isGoogleOAuthType"
 			@click="$emit('oauth')"
 		/>
 

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

@@ -1,10 +1,10 @@
 <template>
 	<Modal
 		:name="modalName"
-		:customClass="$style.credentialModal"
-		:eventBus="modalBus"
+		:custom-class="$style.credentialModal"
+		:event-bus="modalBus"
 		:loading="loading"
-		:beforeClose="beforeClose"
+		:before-close="beforeClose"
 		width="70%"
 		height="80%"
 	>
@@ -12,15 +12,15 @@
 			<div :class="$style.header">
 				<div :class="$style.credInfo">
 					<div :class="$style.credIcon">
-						<CredentialIcon :credentialTypeName="defaultCredentialTypeName" />
+						<CredentialIcon :credential-type-name="defaultCredentialTypeName" />
 					</div>
 					<InlineNameEdit
-						:modelValue="credentialName"
+						:model-value="credentialName"
 						:subtitle="credentialType ? credentialType.displayName : ''"
 						:readonly="!credentialPermissions.update || !credentialType"
 						type="Credential"
-						@update:modelValue="onNameEdit"
 						data-test-id="credential-name"
+						@update:modelValue="onNameEdit"
 					/>
 				</div>
 				<div :class="$style.credActions">
@@ -31,20 +31,20 @@
 						type="tertiary"
 						:disabled="isSaving"
 						:loading="isDeleting"
-						@click="deleteCredential"
 						data-test-id="credential-delete-button"
+						@click="deleteCredential"
 					/>
 					<SaveButton
 						v-if="(hasUnsavedChanges || credentialId) && credentialPermissions.save"
 						:saved="!hasUnsavedChanges && !isTesting"
-						:isSaving="isSaving || isTesting"
-						:savingLabel="
+						:is-saving="isSaving || isTesting"
+						:saving-label="
 							isTesting
 								? $locale.baseText('credentialEdit.credentialEdit.testing')
 								: $locale.baseText('credentialEdit.credentialEdit.saving')
 						"
-						@click="saveCredential"
 						data-test-id="credential-save-button"
+						@click="saveCredential"
 					/>
 				</div>
 			</div>
@@ -56,28 +56,28 @@
 					<n8n-menu
 						mode="tabs"
 						:items="sidebarItems"
-						:transparentBackground="true"
+						:transparent-background="true"
 						@select="onTabSelect"
 					></n8n-menu>
 				</div>
-				<div v-if="activeTab === 'connection'" :class="$style.mainContent" ref="content">
+				<div v-if="activeTab === 'connection'" ref="content" :class="$style.mainContent">
 					<CredentialConfig
-						:credentialType="credentialType"
-						:credentialProperties="credentialProperties"
-						:credentialData="credentialData"
-						:credentialId="credentialId"
-						:showValidationWarning="showValidationWarning"
-						:authError="authError"
-						:testedSuccessfully="testedSuccessfully"
-						:isOAuthType="isOAuthType"
-						:isOAuthConnected="isOAuthConnected"
-						:isRetesting="isRetesting"
-						:parentTypes="parentTypes"
-						:requiredPropertiesFilled="requiredPropertiesFilled"
-						:credentialPermissions="credentialPermissions"
+						:credential-type="credentialType"
+						:credential-properties="credentialProperties"
+						:credential-data="credentialData"
+						:credential-id="credentialId"
+						:show-validation-warning="showValidationWarning"
+						:auth-error="authError"
+						:tested-successfully="testedSuccessfully"
+						:is-o-auth-type="isOAuthType"
+						:is-o-auth-connected="isOAuthConnected"
+						:is-retesting="isRetesting"
+						:parent-types="parentTypes"
+						:required-properties-filled="requiredPropertiesFilled"
+						:credential-permissions="credentialPermissions"
 						:mode="mode"
-						:selectedCredential="selectedCredential"
-						:showAuthTypeSelector="requiredCredentials"
+						:selected-credential="selectedCredential"
+						:show-auth-type-selector="requiredCredentials"
 						@update="onDataChange"
 						@oauth="oAuthCredentialAuthorize"
 						@retest="retestCredential"
@@ -88,24 +88,24 @@
 				<div v-else-if="activeTab === 'sharing' && credentialType" :class="$style.mainContent">
 					<CredentialSharing
 						:credential="currentCredential"
-						:credentialData="credentialData"
-						:credentialId="credentialId"
-						:credentialPermissions="credentialPermissions"
-						:modalBus="modalBus"
+						:credential-data="credentialData"
+						:credential-id="credentialId"
+						:credential-permissions="credentialPermissions"
+						:modal-bus="modalBus"
 						@update:modelValue="onChangeSharedWith"
 					/>
 				</div>
 				<div v-else-if="activeTab === 'details' && credentialType" :class="$style.mainContent">
 					<CredentialInfo
-						:nodeAccess="nodeAccess"
-						:nodesWithAccess="nodesWithAccess"
-						:currentCredential="currentCredential"
-						:credentialPermissions="credentialPermissions"
+						:node-access="nodeAccess"
+						:nodes-with-access="nodesWithAccess"
+						:current-credential="currentCredential"
+						:credential-permissions="credentialPermissions"
 						@accessChange="onNodeAccessChange"
 					/>
 				</div>
 				<div v-else-if="activeTab.startsWith('coming-soon')" :class="$style.mainContent">
-					<FeatureComingSoon :featureId="activeTab.split('/')[1]"></FeatureComingSoon>
+					<FeatureComingSoon :feature-id="activeTab.split('/')[1]"></FeatureComingSoon>
 				</div>
 			</div>
 		</template>

packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue

@@ -16,7 +16,7 @@
 								fallback: node.displayName,
 							})
 						"
-						:modelValue="!!nodeAccess[node.name]"
+						:model-value="!!nodeAccess[node.name]"
 						@update:modelValue="(val) => onNodeAccessChange(node.name, val)"
 					/>
 					<n8n-text v-else>
@@ -75,10 +75,10 @@ import type { INodeTypeDescription } from 'n8n-workflow';
 
 export default defineComponent({
 	name: 'CredentialInfo',
-	props: ['nodesWithAccess', 'nodeAccess', 'currentCredential', 'credentialPermissions'],
 	components: {
 		TimeAgo,
 	},
+	props: ['nodesWithAccess', 'nodeAccess', 'currentCredential', 'credentialPermissions'],
 	methods: {
 		onNodeAccessChange(name: string, value: string) {
 			this.$emit('accessChange', {

packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue

@@ -1,5 +1,5 @@
 <template>
-	<div @keydown.stop :class="$style.container" v-if="credentialProperties.length">
+	<div v-if="credentialProperties.length" :class="$style.container" @keydown.stop>
 		<form
 			v-for="parameter in credentialProperties"
 			:key="parameter.name"
@@ -9,14 +9,14 @@
 		>
 			<!-- Why form? to break up inputs, to prevent Chrome autofill -->
 			<n8n-notice v-if="parameter.type === 'notice'" :content="parameter.displayName" />
-			<parameter-input-expanded
+			<ParameterInputExpanded
 				v-else
 				:parameter="parameter"
 				:value="credentialData[parameter.name]"
-				:documentationUrl="documentationUrl"
-				:showValidationWarnings="showValidationWarnings"
+				:documentation-url="documentationUrl"
+				:show-validation-warnings="showValidationWarnings"
 				:label="label"
-				eventSource="credentials"
+				event-source="credentials"
 				@update="valueChanged"
 			/>
 		</form>
@@ -31,15 +31,15 @@ import ParameterInputExpanded from '../ParameterInputExpanded.vue';
 
 export default defineComponent({
 	name: 'CredentialsInput',
+	components: {
+		ParameterInputExpanded,
+	},
 	props: [
 		'credentialProperties',
 		'credentialData', // ICredentialsDecryptedResponse
 		'documentationUrl',
 		'showValidationWarnings',
 	],
-	components: {
-		ParameterInputExpanded,
-	},
 	data(): { label: IParameterLabel } {
 		return {
 			label: {

packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue

@@ -12,7 +12,7 @@
 						uiStore.contextBasedTranslationKeys.credentials.sharing.unavailable.description,
 					)
 				"
-				:buttonText="
+				:button-text="
 					$locale.baseText(
 						uiStore.contextBasedTranslationKeys.credentials.sharing.unavailable.button,
 					)
@@ -26,7 +26,7 @@
 				:description="
 					$locale.baseText('credentialEdit.credentialSharing.isDefaultUser.description')
 				"
-				:buttonText="$locale.baseText('credentialEdit.credentialSharing.isDefaultUser.button')"
+				:button-text="$locale.baseText('credentialEdit.credentialSharing.isDefaultUser.button')"
 				@click:button="goToUsersSettings"
 			/>
 		</div>
@@ -61,7 +61,7 @@
 				class="mb-s"
 				size="large"
 				:users="usersList"
-				:currentUserId="usersStore.currentUser.id"
+				:current-user-id="usersStore.currentUser.id"
 				:placeholder="$locale.baseText('credentialEdit.credentialSharing.select.placeholder')"
 				data-test-id="credential-sharing-modal-users-select"
 				@update:modelValue="onAddSharee"
@@ -73,7 +73,7 @@
 			<n8n-users-list
 				:actions="usersListActions"
 				:users="sharedWithList"
-				:currentUserId="usersStore.currentUser.id"
+				:current-user-id="usersStore.currentUser.id"
 				:readonly="!credentialPermissions.share"
 				@delete="onRemoveSharee"
 			/>
@@ -151,6 +151,9 @@ export default defineComponent({
 			});
 		},
 	},
+	mounted() {
+		void this.loadUsers();
+	},
 	methods: {
 		async onAddSharee(userId: string) {
 			const sharee = { ...this.usersStore.getUserById(userId), isOwner: false };
@@ -196,9 +199,6 @@ export default defineComponent({
 			void this.uiStore.goToUpgrade('credential_sharing', 'upgrade-credentials-sharing');
 		},
 	},
-	mounted() {
-		void this.loadUsers();
-	},
 });
 </script>