feat(editor-ui): Resizable main panel (#3980)

* Introduce node deprecation (#3930)

✨ Introduce node deprecation

* 🚧 Scaffold out Code node

* 👕 Fix lint

* 📘 Create types file

* 🚚 Rename theme

* 🔥 Remove unneeded prop

* ⚡ Override keybindings

* ⚡ Expand lintings

* ⚡ Create editor content getter

* 🚚 Ensure all helpers use `$`

* ✨ Add autocompletion

* ♻️ Refactore Resize UI lib component, allow to use it in different than n8n-sticky context

* 🚧 Use variable width for node settings and allow for resizing

* ✨ Use store to keep track of wide and regular main panel widths

* ♻️ Extract Resize wrapper from the Sticky and create a story for it

* 🐛 Fixed cherry-pick conflicts

* ⚡ Filter out welcome note node

* ⚡ Convey error line number

* ⚡ Highlight error line

* ⚡ Restore logging from node

* ✨ More autocompletions

* ⚡ Streamline completions

* 💄 Fix drag-button border

* ✏️ Update placeholders

* ⚡ Update linter to new methods

* ✨ Preserve main panel width in local storage

* 🐛 Fallback to max size size if window is too big

* 🔥 Remove `$nodeItem` completions

* ⚡ Re-update placeholders

* 🎨 Fix formatting

* 📦 Update `package-lock.json`

* ⚡ Refresh with multi-line empty string

* ♻️ Refactored DraggablePanels to use relative units and implemented independent resizing, cleaned store

* 🐛 Re-implement dragging indicators and move border styles to NDVDraggablePanels component

* 🚨 Fix semis

* 🚨 Remove unsused UI state props

* ♻️ Use only relative left position and calculate right based on it, fix quirks

* 🚨Fix linting error

* ♻️ Store and retrieve main panel dimensions from store to make them persistable in the same app mount session

* 🐛 Prevent resizing of unknown nodes

* ♻️ Add typings for `nodeType` prop, remove unused `convertRemToPixels` import

* 🏷️ Add typings for `nodeType` prop in NodeSettings.vue

* 🐛 Prevent the main panel resize below 280px

* 🐛 Fix inputless panel left position

* ✨ Resize resource locator on main panel size change

* 🐛 Resize resource locator on window resize

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>

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

@@ -1,5 +1,5 @@
 <template>
-	<div class="resource-locator">
+	<div class="resource-locator" ref="container">
 		<resource-locator-dropdown
 			:value="value ? value.value: ''"
 			:show="showResourceDropdown"
@@ -10,6 +10,7 @@
 			:filter="searchFilter"
 			:hasMore="currentQueryHasMore"
 			:errorView="currentQueryError"
+			:width="width"
 			@input="onListItemSelected"
 			@hide="onDropdownHide"
 			@filter="onSearchFilter"
@@ -251,10 +252,12 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
 	},
 	data() {
 		return {
+			mainPanelMutationSubscription: () => {},
 			showResourceDropdown: false,
 			searchFilter: '',
 			cachedResponses: {} as { [key: string]: IResourceLocatorQuery },
 			hasCompletedASearch: false,
+			width: 0,
 		};
 	},
 	computed: {
@@ -423,8 +426,23 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
 	},
 	mounted() {
 		this.$on('refreshList', this.refreshList);
+		this.setWidth();
+		window.addEventListener('resize', this.setWidth);
+		this.mainPanelMutationSubscription = this.$store.subscribe(this.setWidthOnMainPanelResize);
+	},
+	beforeDestroy() {
+		// Unsubscribe
+		this.mainPanelMutationSubscription();
+		window.removeEventListener('resize', this.setWidth);
 	},
 	methods: {
+		setWidth() {
+			this.width = (this.$refs.container as HTMLElement).offsetWidth;
+		},
+		setWidthOnMainPanelResize(mutation: { type: string }) {
+			// Update the width when main panel dimension change
+			if(mutation.type === 'ui/setMainPanelDimensions') this.setWidth();
+		},
 		getLinkAlt(entity: string) {
 			if (this.selectedMode === 'list' && entity) {
 				return this.$locale.baseText('resourceLocator.openSpecificResource', { interpolate: { entity, appName: this.appName } });

packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue

@@ -1,7 +1,7 @@
 <template>
 	<n8n-popover
 		placement="bottom"
-		width="318"
+		:width="width"
 		:popper-class="$style.popover"
 		:value="show"
 		trigger="manual"
@@ -90,6 +90,9 @@ export default Vue.extend({
 		filterRequired: {
 			type: Boolean,
 		},
+		width: {
+			type: Number,
+		},
 	},
 	data() {
 		return {
@@ -254,7 +257,7 @@ export default Vue.extend({
 	--input-font-size: var(--font-size-2xs);
 	position: absolute;
 	top: 0;
-	width: 316px;
+	width: 100%;
 	z-index: 1;
 }