From 7cd45885bf13479948a4c5bb441d24b3c042a624 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Mon, 31 Jul 2023 15:17:05 +0300
Subject: [PATCH] fix: Fix tags overflow handler in workflows header (#6784)

* fix: fix tags container overflowing

* fix: fix intersection observer error
---
 .../src/components/IntersectionObserver.vue   |  4 +-
 .../components/MainHeader/WorkflowDetails.vue | 29 ++++++++------
 .../src/components/TagsContainer.vue          | 40 +++++++++++++++++--
 .../src/stores/logStreaming.store.ts          |  2 -
 4 files changed, 56 insertions(+), 19 deletions(-)

diff --git a/packages/editor-ui/src/components/IntersectionObserver.vue b/packages/editor-ui/src/components/IntersectionObserver.vue
index f6382c8e26..93ed8e5bb7 100644
--- a/packages/editor-ui/src/components/IntersectionObserver.vue
+++ b/packages/editor-ui/src/components/IntersectionObserver.vue
@@ -54,7 +54,9 @@ export default defineComponent({
 		this.observer = observer;
 
 		this.eventBus.on('observe', (observed: Element) => {
-			observer.observe(observed);
+			if (observed) {
+				observer.observe(observed);
+			}
 		});
 
 		this.eventBus.on('unobserve', (observed: Element) => {
diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
index 87a4e5c10d..c22934e85a 100644
--- a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -26,19 +26,18 @@
 		</BreakpointsObserver>
 
 		<span v-if="settingsStore.areTagsEnabled" class="tags" data-test-id="workflow-tags-container">
-			<div v-if="isTagsEditEnabled && !readOnly">
-				<TagsDropdown
-					v-model="appliedTagIds"
-					:createEnabled="true"
-					:eventBus="tagsEditBus"
-					:placeholder="$locale.baseText('workflowDetails.chooseOrCreateATag')"
-					ref="dropdown"
-					class="tags-edit"
-					data-test-id="workflow-tags-dropdown"
-					@blur="onTagsBlur"
-					@esc="onTagsEditEsc"
-				/>
-			</div>
+			<TagsDropdown
+				v-if="isTagsEditEnabled && !readOnly"
+				v-model="appliedTagIds"
+				:createEnabled="true"
+				:eventBus="tagsEditBus"
+				:placeholder="$locale.baseText('workflowDetails.chooseOrCreateATag')"
+				ref="dropdown"
+				class="tags-edit"
+				data-test-id="workflow-tags-dropdown"
+				@blur="onTagsBlur"
+				@esc="onTagsEditEsc"
+			/>
 			<div v-else-if="currentWorkflowTagIds.length === 0 && !readOnly">
 				<span class="add-tag clickable" data-test-id="new-tag-link" @click="onTagsEditEnable">
 					+ {{ $locale.baseText('workflowDetails.addTag') }}
@@ -658,12 +657,16 @@ $--header-spacing: 20px;
 }
 
 .tags {
+	display: flex;
+	align-items: center;
+	width: 100%;
 	flex: 1;
 	margin-right: $--header-spacing;
 }
 
 .tags-edit {
 	min-width: 100px;
+	width: 100%;
 	max-width: 460px;
 }
 
diff --git a/packages/editor-ui/src/components/TagsContainer.vue b/packages/editor-ui/src/components/TagsContainer.vue
index 579a34cb3b..dadbe98821 100644
--- a/packages/editor-ui/src/components/TagsContainer.vue
+++ b/packages/editor-ui/src/components/TagsContainer.vue
@@ -3,8 +3,10 @@
 		:threshold="1.0"
 		@observed="onObserved"
 		class="tags-container"
+		:style="style"
 		:enabled="responsive"
 		:event-bus="intersectionEventBus"
+		ref="tagsContainer"
 	>
 		<span class="tags">
 			<span
@@ -47,6 +49,7 @@ import IntersectionObserved from './IntersectionObserved.vue';
 import { mapStores } from 'pinia';
 import { useTagsStore } from '@/stores/tags.store';
 import { createEventBus } from 'n8n-design-system/utils';
+import { debounce } from 'lodash-es';
 
 // random upper limit if none is set to minimize performance impact of observers
 const DEFAULT_MAX_TAGS_LIMIT = 20;
@@ -63,12 +66,29 @@ export default defineComponent({
 	props: ['tagIds', 'limit', 'clickable', 'responsive', 'hoverable'],
 	data() {
 		return {
+			maxWidth: 320,
 			intersectionEventBus: createEventBus(),
 			visibility: {} as { [id: string]: boolean },
+			debouncedSetMaxWidth: () => {},
 		};
 	},
+	created() {
+		this.debouncedSetMaxWidth = debounce(this.setMaxWidth, 100);
+	},
+	mounted() {
+		this.setMaxWidth();
+		window.addEventListener('resize', this.debouncedSetMaxWidth);
+	},
+	beforeUnmount() {
+		window.removeEventListener('resize', this.debouncedSetMaxWidth);
+	},
 	computed: {
 		...mapStores(useTagsStore),
+		style() {
+			return {
+				'max-width': `${this.maxWidth}px`,
+			};
+		},
 		tags() {
 			const tags = this.tagIds
 				.map((tagId: string) => this.tagsStore.getTagById(tagId))
@@ -109,6 +129,17 @@ export default defineComponent({
 		},
 	},
 	methods: {
+		setMaxWidth() {
+			const container = this.$refs.tagsContainer.$el as HTMLElement;
+			const parent = container.parentNode as HTMLElement;
+
+			if (parent) {
+				this.maxWidth = 0;
+				void this.$nextTick(() => {
+					this.maxWidth = parent.clientWidth;
+				});
+			}
+		},
 		onObserved({ el, isIntersecting }: { el: HTMLElement; isIntersecting: boolean }) {
 			if (el.dataset.id) {
 				this.visibility = { ...this.visibility, [el.dataset.id]: isIntersecting };
@@ -130,12 +161,15 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .tags-container {
-	display: inline-flex;
-	overflow: hidden;
+	display: block;
+	max-width: 300px;
 }
 
 .tags {
-	display: flex;
+	display: block;
+	white-space: nowrap;
+	overflow: hidden;
+	max-width: 100%;
 
 	> span {
 		padding-right: 4px; // why not margin? for space between tags to be clickable
diff --git a/packages/editor-ui/src/stores/logStreaming.store.ts b/packages/editor-ui/src/stores/logStreaming.store.ts
index 205ed8aa34..f246d237b8 100644
--- a/packages/editor-ui/src/stores/logStreaming.store.ts
+++ b/packages/editor-ui/src/stores/logStreaming.store.ts
@@ -161,8 +161,6 @@ export const useLogStreamingStore = defineStore('logStreaming', {
 			delete this.items[id];
 		},
 		clearDestinationItemTrees() {
-			console.log('clearing destinations');
-
 			this.items = {} as DestinationSettingsStore;
 		},
 		setSelectionAndBuildItems(destination: MessageEventBusDestinationOptions) {