fix(editor): Update tags filter/editor to not show non existing tag as a selectable option (#10297)

cypress/e2e/17-workflow-tags.cy.ts

@@ -1,4 +1,5 @@
 import { WorkflowPage } from '../pages';
+import { getVisibleSelect } from '../utils';
 
 const wf = new WorkflowPage();
 
@@ -70,4 +71,20 @@ describe('Workflow tags', () => {
 		wf.getters.workflowTags().click();
 		wf.getters.tagPills().should('have.length', TEST_TAGS.length - 1);
 	});
+
+	it('should not show non existing tag as a selectable option', () => {
+		const NON_EXISTING_TAG = 'My Test Tag';
+
+		wf.getters.createTagButton().click();
+		wf.actions.addTags(TEST_TAGS);
+		cy.get('body').click(0, 0);
+		wf.getters.workflowTags().click();
+		wf.getters.tagsDropdown().find('input:focus').type(NON_EXISTING_TAG);
+
+		getVisibleSelect()
+			.find('li')
+			.should('have.length', 2)
+			.filter(`:contains("${NON_EXISTING_TAG}")`)
+			.should('not.have.length');
+	});
 });

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

@@ -639,7 +639,6 @@ function showCreateWorkflowSuccessToast(id?: string) {
 				v-if="isTagsEditEnabled && !readOnly"
 				ref="dropdown"
 				v-model="appliedTagIds"
-				:create-enabled="true"
 				:event-bus="tagsEventBus"
 				:placeholder="$locale.baseText('workflowDetails.chooseOrCreateATag')"
 				class="tags-edit"

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

@@ -13,7 +13,6 @@
 			:filter-method="filterOptions"
 			filterable
 			multiple
-			:allow-create="createEnabled"
 			:reserve-keyword="false"
 			loading-text="..."
 			popper-class="tags-dropdown"
@@ -23,7 +22,7 @@
 			@remove-tag="onRemoveTag"
 		>
 			<n8n-option
-				v-if="options.length === 0 && filter && createEnabled"
+				v-if="options.length === 0 && filter"
 				:key="CREATE_KEY"
 				ref="createRef"
 				:value="CREATE_KEY"
@@ -35,11 +34,11 @@
 				</span>
 			</n8n-option>
 			<n8n-option v-else-if="options.length === 0" value="message" disabled>
-				<span v-if="createEnabled">{{ i18n.baseText('tagsDropdown.typeToCreateATag') }}</span>
+				<span>{{ i18n.baseText('tagsDropdown.typeToCreateATag') }}</span>
-				<span v-else-if="allTags.length > 0">{{
+				<span v-if="allTags.length > 0">{{
 					i18n.baseText('tagsDropdown.noMatchingTagsExist')
 				}}</span>
-				<span v-else>{{ i18n.baseText('tagsDropdown.noTagsExist') }}</span>
+				<span v-else-if="filter">{{ i18n.baseText('tagsDropdown.noTagsExist') }}</span>
 			</n8n-option>
 
 			<!-- key is id+index for keyboard navigation to work well with filter -->
@@ -90,10 +89,6 @@ export default defineComponent({
 			type: Array as PropType<string[]>,
 			default: () => [],
 		},
-		createEnabled: {
-			type: Boolean,
-			default: false,
-		},
 		eventBus: {
 			type: Object as PropType<EventBus>,
 			default: null,