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

packages/editor-ui/src/components/MainHeader/CollaborationPane.vue

@@ -68,7 +68,7 @@ onBeforeUnmount(() => {
 		:class="`collaboration-pane-container ${$style.container}`"
 		data-test-id="collaboration-pane"
 	>
-		<n8n-user-stack :users="activeUsersSorted" :currentUserEmail="currentUserEmail" />
+		<n8n-user-stack :users="activeUsersSorted" :current-user-email="currentUserEmail" />
 	</div>
 </template>
 

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

@@ -1,12 +1,12 @@
 <template>
 	<div>
-		<div :class="{ 'main-header': true, expanded: !this.uiStore.sidebarMenuCollapsed }">
+		<div :class="{ 'main-header': true, expanded: !uiStore.sidebarMenuCollapsed }">
 			<div v-show="!hideMenuBar" class="top-menu">
-				<WorkflowDetails :readOnly="readOnly" />
-				<tab-bar
+				<WorkflowDetails :read-only="readOnly" />
+				<TabBar
 					v-if="onWorkflowPage"
 					:items="tabBarItems"
-					:activeTab="activeHeaderTab"
+					:active-tab="activeHeaderTab"
 					@select="onTabSelected"
 				/>
 			</div>
@@ -89,15 +89,15 @@ export default defineComponent({
 			return this.sourceControlStore.preferences.branchReadOnly;
 		},
 	},
-	mounted() {
-		this.dirtyState = this.uiStore.stateIsDirty;
-		this.syncTabsWithRoute(this.$route);
-	},
 	watch: {
 		$route(to, from) {
 			this.syncTabsWithRoute(to);
 		},
 	},
+	mounted() {
+		this.dirtyState = this.uiStore.stateIsDirty;
+		this.syncTabsWithRoute(this.$route);
+	},
 	methods: {
 		syncTabsWithRoute(route: Route): void {
 			if (

packages/editor-ui/src/components/MainHeader/TabBar.vue

@@ -7,7 +7,7 @@
 			[$style.menuCollapsed]: mainSidebarCollapsed,
 		}"
 	>
-		<n8n-radio-buttons :modelValue="activeTab" :options="items" @update:modelValue="onSelect" />
+		<n8n-radio-buttons :model-value="activeTab" :options="items" @update:modelValue="onSelect" />
 	</div>
 </template>
 
@@ -20,12 +20,7 @@ import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 
 export default defineComponent({
-	name: 'tab-bar',
-	data() {
-		return {
-			MAIN_HEADER_TABS,
-		};
-	},
+	name: 'TabBar',
 	props: {
 		items: {
 			type: Array as PropType<ITabBarItem[]>,
@@ -36,6 +31,11 @@ export default defineComponent({
 			default: MAIN_HEADER_TABS.WORKFLOW,
 		},
 	},
+	data() {
+		return {
+			MAIN_HEADER_TABS,
+		};
+	},
 	computed: {
 		...mapStores(useUIStore),
 		mainSidebarCollapsed(): boolean {

packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue

@@ -1,24 +1,24 @@
 <template>
-	<div class="container" v-if="workflowName">
-		<BreakpointsObserver :valueXS="15" :valueSM="25" :valueMD="50" class="name-container">
+	<div v-if="workflowName" class="container">
+		<BreakpointsObserver :value-x-s="15" :value-s-m="25" :value-m-d="50" class="name-container">
 			<template #default="{ value }">
 				<ShortenName
 					:name="workflowName"
 					:limit="value"
 					:custom="true"
-					testId="workflow-name-input"
+					test-id="workflow-name-input"
 				>
 					<template #default="{ shortenedName }">
 						<InlineTextEdit
-							:modelValue="workflowName"
-							:previewValue="shortenedName"
-							:isEditEnabled="isNameEditEnabled"
-							:maxLength="MAX_WORKFLOW_NAME_LENGTH"
+							:model-value="workflowName"
+							:preview-value="shortenedName"
+							:is-edit-enabled="isNameEditEnabled"
+							:max-length="MAX_WORKFLOW_NAME_LENGTH"
 							:disabled="readOnly"
-							@toggle="onNameToggle"
-							@submit="onNameSubmit"
 							placeholder="Enter workflow name"
 							class="name"
+							@toggle="onNameToggle"
+							@submit="onNameSubmit"
 						/>
 					</template>
 				</ShortenName>
@@ -28,11 +28,11 @@
 		<span v-if="settingsStore.areTagsEnabled" class="tags" data-test-id="workflow-tags-container">
 			<TagsDropdown
 				v-if="isTagsEditEnabled && !readOnly"
-				v-model="appliedTagIds"
-				:createEnabled="true"
-				:eventBus="tagsEditBus"
-				:placeholder="$locale.baseText('workflowDetails.chooseOrCreateATag')"
 				ref="dropdown"
+				v-model="appliedTagIds"
+				:create-enabled="true"
+				:event-bus="tagsEditBus"
+				:placeholder="$locale.baseText('workflowDetails.chooseOrCreateATag')"
 				class="tags-edit"
 				data-test-id="workflow-tags-dropdown"
 				@blur="onTagsBlur"
@@ -45,12 +45,12 @@
 			</div>
 			<TagsContainer
 				v-else
-				:tagIds="currentWorkflowTagIds"
+				:key="currentWorkflowId"
+				:tag-ids="currentWorkflowTagIds"
 				:clickable="true"
 				:responsive="true"
-				:key="currentWorkflowId"
-				@click="onTagsEditEnable"
 				data-test-id="workflow-tags"
+				@click="onTagsEditEnable"
 			/>
 		</span>
 		<span v-else class="tags"></span>
@@ -61,11 +61,11 @@
 			</span>
 			<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]">
 				<div :class="$style.group">
-					<collaboration-pane />
+					<CollaborationPane />
 					<n8n-button
 						type="secondary"
-						@click="onShareButtonClick"
 						data-test-id="workflow-share-button"
+						@click="onShareButtonClick"
 					>
 						{{ $locale.baseText('workflowDetails.share') }}
 					</n8n-button>
@@ -99,7 +99,7 @@
 			<div :class="$style.group">
 				<SaveButton
 					type="primary"
-					:saved="!this.isDirty && !this.isNewWorkflow"
+					:saved="!isDirty && !isNewWorkflow"
 					:disabled="isWorkflowSaving || readOnly"
 					data-test-id="workflow-save-button"
 					@click="onSaveButtonClick"
@@ -121,9 +121,9 @@
 			</div>
 			<div :class="[$style.workflowMenuContainer, $style.group]">
 				<input
+					ref="importFile"
 					:class="$style.hiddenInput"
 					type="file"
-					ref="importFile"
 					data-test-id="workflow-import-input"
 					@change="handleFileImport()"
 				/>
@@ -197,7 +197,6 @@ const hasChanged = (prev: string[], curr: string[]) => {
 
 export default defineComponent({
 	name: 'WorkflowDetails',
-	mixins: [workflowHelpers, genericHelpers],
 	components: {
 		TagsContainer,
 		PushConnectionTracker,
@@ -209,6 +208,7 @@ export default defineComponent({
 		BreakpointsObserver,
 		CollaborationPane,
 	},
+	mixins: [workflowHelpers, genericHelpers],
 	props: {
 		readOnly: {
 			type: Boolean,
@@ -375,6 +375,12 @@ export default defineComponent({
 			return this.workflowsStore.isNewWorkflow;
 		},
 	},
+	watch: {
+		currentWorkflowId() {
+			this.isTagsEditEnabled = false;
+			this.isNameEditEnabled = false;
+		},
+	},
 	methods: {
 		async onSaveButtonClick() {
 			let currentId = undefined;
@@ -659,12 +665,6 @@ export default defineComponent({
 			void this.uiStore.goToUpgrade('workflow_sharing', 'upgrade-workflow-sharing');
 		},
 	},
-	watch: {
-		currentWorkflowId() {
-			this.isTagsEditEnabled = false;
-			this.isNameEditEnabled = false;
-		},
-	},
 });
 </script>