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

packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue

@@ -37,7 +37,7 @@
 						size="small"
 					>
 						{{ $locale.baseText('executionDetails.runningTimeRunning') }}
-						<execution-time :start-time="execution.startedAt" />
+						<ExecutionTime :start-time="execution.startedAt" />
 					</n8n-text>
 					<n8n-text
 						v-else-if="executionUIDetails.runningTime !== ''"
@@ -62,7 +62,7 @@
 					v-if="executionUIDetails.name === 'error'"
 					:class="[$style.icon, $style.retry]"
 					:items="retryExecutionActions"
-					activatorIcon="redo"
+					activator-icon="redo"
 					data-test-id="retry-execution-button"
 					@select="onRetryMenuItemSelect"
 				/>
@@ -90,16 +90,11 @@ import { VIEWS } from '@/constants';
 import ExecutionTime from '@/components/ExecutionTime.vue';
 
 export default defineComponent({
-	name: 'execution-card',
-	mixins: [executionHelpers],
+	name: 'ExecutionCard',
 	components: {
 		ExecutionTime,
 	},
-	data() {
-		return {
-			VIEWS,
-		};
-	},
+	mixins: [executionHelpers],
 	props: {
 		execution: {
 			type: Object as () => IExecutionsSummary,
@@ -114,6 +109,11 @@ export default defineComponent({
 			default: false,
 		},
 	},
+	data() {
+		return {
+			VIEWS,
+		};
+	},
 	computed: {
 		retryExecutionActions(): object[] {
 			return [

packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue

@@ -12,8 +12,8 @@
 	</div>
 	<div v-else :class="$style.previewContainer">
 		<div
-			:class="$style.executionDetails"
 			v-if="activeExecution"
+			:class="$style.executionDetails"
 			:data-test-id="`execution-preview-details-${executionId}`"
 		>
 			<div>
@@ -96,18 +96,18 @@
 							},
 						}"
 					>
-						<span @click="handleDebugLinkClick" data-test-id="execution-debug-button">{{
+						<span data-test-id="execution-debug-button" @click="handleDebugLinkClick">{{
 							debugButtonData.text
 						}}</span>
 					</router-link>
 				</n8n-button>
 
-				<el-dropdown
+				<ElDropdown
 					v-if="executionUIDetails?.name === 'error'"
+					ref="retryDropdown"
 					trigger="click"
 					class="mr-xs"
 					@command="handleRetryClick"
-					ref="retryDropdown"
 				>
 					<span class="retry-button">
 						<n8n-icon-button
@@ -129,7 +129,7 @@
 							</el-dropdown-item>
 						</el-dropdown-menu>
 					</template>
-				</el-dropdown>
+				</ElDropdown>
 				<n8n-icon-button
 					:title="$locale.baseText('executionDetails.deleteExecution')"
 					icon="trash"
@@ -140,11 +140,11 @@
 				/>
 			</div>
 		</div>
-		<workflow-preview
+		<WorkflowPreview
 			mode="execution"
-			loaderType="spinner"
-			:executionId="executionId"
-			:executionMode="executionMode"
+			loader-type="spinner"
+			:execution-id="executionId"
+			:execution-mode="executionMode"
 		/>
 	</div>
 </template>
@@ -162,23 +162,23 @@ import { MODAL_CONFIRM, VIEWS } from '@/constants';
 type RetryDropdownRef = InstanceType<typeof ElDropdown> & { hide: () => void };
 
 export default defineComponent({
-	name: 'execution-preview',
-	mixins: [executionHelpers],
+	name: 'ExecutionPreview',
 	components: {
 		ElDropdown,
 		WorkflowPreview,
 	},
-	data() {
-		return {
-			VIEWS,
-		};
-	},
+	mixins: [executionHelpers],
 	setup() {
 		return {
 			...useMessage(),
 			...useExecutionDebugging(),
 		};
 	},
+	data() {
+		return {
+			VIEWS,
+		};
+	},
 	computed: {
 		executionUIDetails(): IExecutionUIData | null {
 			return this.activeExecution ? this.getExecutionUIDetails(this.activeExecution) : null;

packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue

@@ -3,8 +3,8 @@
 		:class="[$style.accordion, 'mt-2xl']"
 		:title="$locale.baseText('executionsLandingPage.emptyState.accordion.title')"
 		:items="accordionItems"
-		:initiallyExpanded="shouldExpandAccordion"
-		:headerIcon="accordionIcon"
+		:initially-expanded="shouldExpandAccordion"
+		:header-icon="accordionIcon"
 		@click:body="onAccordionClick"
 		@tooltipClick="onItemTooltipClick"
 	>
@@ -23,9 +23,9 @@
 						</div>
 					</template>
 					<n8n-link
-						@click.prevent="openWorkflowSettings"
 						:class="{ [$style.disabled]: isNewWorkflow }"
 						size="small"
+						@click.prevent="openWorkflowSettings"
 					>
 						{{ $locale.baseText('executionsLandingPage.emptyState.accordion.footer.settingsLink') }}
 					</n8n-link>
@@ -54,7 +54,7 @@ interface IWorkflowSaveSettings {
 }
 
 export default defineComponent({
-	name: 'executions-info-accordion',
+	name: 'ExecutionsInfoAccordion',
 	mixins: [workflowHelpers],
 	props: {
 		initiallyExpanded: {
@@ -76,17 +76,17 @@ export default defineComponent({
 			} as IWorkflowSaveSettings,
 		};
 	},
+	watch: {
+		workflowSettings(newSettings: IWorkflowSettings) {
+			this.updateSettings(newSettings);
+		},
+	},
 	mounted() {
 		this.defaultValues.saveFailedExecutions = this.settingsStore.saveDataErrorExecution;
 		this.defaultValues.saveSuccessfulExecutions = this.settingsStore.saveDataSuccessExecution;
 		this.defaultValues.saveManualExecutions = this.settingsStore.saveManualExecutions;
 		this.updateSettings(this.workflowSettings);
 	},
-	watch: {
-		workflowSettings(newSettings: IWorkflowSettings) {
-			this.updateSettings(newSettings);
-		},
-	},
 	computed: {
 		...mapStores(useRootStore, useSettingsStore, useUIStore, useWorkflowsStore),
 		accordionItems(): object[] {

packages/editor-ui/src/components/ExecutionsView/ExecutionsLandingPage.vue

@@ -16,7 +16,7 @@
 				<n8n-heading tag="h2" size="xlarge" color="text-dark" class="mb-2xs">
 					{{ $locale.baseText('executionsLandingPage.emptyState.heading') }}
 				</n8n-heading>
-				<executions-info-accordion />
+				<ExecutionsInfoAccordion />
 			</div>
 		</div>
 	</div>
@@ -31,7 +31,7 @@ import { defineComponent } from 'vue';
 import ExecutionsInfoAccordion from './ExecutionsInfoAccordion.vue';
 
 export default defineComponent({
-	name: 'executions-landing-page',
+	name: 'ExecutionsLandingPage',
 	components: {
 		ExecutionsInfoAccordion,
 	},

packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue

@@ -1,10 +1,10 @@
 <template>
 	<div :class="$style.container">
-		<executions-sidebar
+		<ExecutionsSidebar
 			:executions="executions"
 			:loading="loading && !executions.length"
-			:loadingMore="loadingMore"
-			:temporaryExecution="temporaryExecution"
+			:loading-more="loadingMore"
+			:temporary-execution="temporaryExecution"
 			:auto-refresh="autoRefresh"
 			@update:autoRefresh="onAutoRefreshToggle"
 			@reloadExecutions="setExecutions"
@@ -12,7 +12,7 @@
 			@loadMore="onLoadMore"
 			@retryExecution="onRetryExecution"
 		/>
-		<div :class="$style.content" v-if="!hidePreview">
+		<div v-if="!hidePreview" :class="$style.content">
 			<router-view
 				name="executionPreview"
 				@deleteCurrentExecution="onDeleteCurrentExecution"
@@ -76,11 +76,20 @@ const MAX_LOADING_ATTEMPTS = 5;
 const LOAD_MORE_PAGE_SIZE = 100;
 
 export default defineComponent({
-	name: 'executions-list',
-	mixins: [executionHelpers, debounceHelper, workflowHelpers],
+	name: 'ExecutionsList',
 	components: {
 		ExecutionsSidebar,
 	},
+	mixins: [executionHelpers, debounceHelper, workflowHelpers],
+	setup() {
+		const externalHooks = useExternalHooks();
+
+		return {
+			externalHooks,
+			...useToast(),
+			...useMessage(),
+		};
+	},
 	data() {
 		return {
 			loading: false,
@@ -91,15 +100,6 @@ export default defineComponent({
 			autoRefreshTimeout: undefined as undefined | NodeJS.Timer,
 		};
 	},
-	setup() {
-		const externalHooks = useExternalHooks();
-
-		return {
-			externalHooks,
-			...useToast(),
-			...useMessage(),
-		};
-	},
 	computed: {
 		...mapStores(useTagsStore, useNodeTypesStore, useSettingsStore, useUIStore, useWorkflowsStore),
 		hidePreview(): boolean {

packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue

@@ -1,7 +1,7 @@
 <template>
 	<div
-		:class="['executions-sidebar', $style.container]"
 		ref="container"
+		:class="['executions-sidebar', $style.container]"
 		data-test-id="executions-sidebar"
 	>
 		<div :class="$style.heading">
@@ -11,17 +11,17 @@
 		</div>
 		<div :class="$style.controls">
 			<el-checkbox
-				:modelValue="autoRefresh"
-				@update:modelValue="$emit('update:autoRefresh', $event)"
+				:model-value="autoRefresh"
 				data-test-id="auto-refresh-checkbox"
+				@update:modelValue="$emit('update:autoRefresh', $event)"
 			>
 				{{ $locale.baseText('executionsList.autoRefresh') }}
 			</el-checkbox>
-			<execution-filter popover-placement="left-start" @filterChanged="onFilterChanged" />
+			<ExecutionFilter popover-placement="left-start" @filterChanged="onFilterChanged" />
 		</div>
 		<div
-			:class="$style.executionList"
 			ref="executionList"
+			:class="$style.executionList"
 			data-test-id="current-executions-list"
 			@scroll="loadMore(20)"
 		>
@@ -33,19 +33,19 @@
 					{{ $locale.baseText('executionsLandingPage.noResults') }}
 				</n8n-text>
 			</div>
-			<execution-card
+			<ExecutionCard
 				v-else-if="temporaryExecution"
-				:execution="temporaryExecution"
 				:ref="`execution-${temporaryExecution.id}`"
+				:execution="temporaryExecution"
 				:data-test-id="`execution-details-${temporaryExecution.id}`"
-				:showGap="true"
+				:show-gap="true"
 				@retryExecution="onRetryExecution"
 			/>
-			<execution-card
+			<ExecutionCard
 				v-for="execution in executions"
 				:key="execution.id"
-				:execution="execution"
 				:ref="`execution-${execution.id}`"
+				:execution="execution"
 				:data-test-id="`execution-details-${execution.id}`"
 				@retryExecution="onRetryExecution"
 			/>
@@ -54,7 +54,7 @@
 			</div>
 		</div>
 		<div :class="$style.infoAccordion">
-			<executions-info-accordion :initiallyExpanded="false" />
+			<ExecutionsInfoAccordion :initially-expanded="false" />
 		</div>
 	</div>
 </template>
@@ -76,7 +76,7 @@ import type { ExecutionFilterType } from '@/Interface';
 type ExecutionCardRef = InstanceType<typeof ExecutionCard>;
 
 export default defineComponent({
-	name: 'executions-sidebar',
+	name: 'ExecutionsSidebar',
 	components: {
 		ExecutionCard,
 		ExecutionsInfoAccordion,