mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 10:02:05 +00:00
feat: add resource locator parameter (#3932)
* ✨ Added resource locator interfaces to `n8n-workflow` package * ✅ Updating Trello node to use resource locator property type * ✨ Added resource locator prop to Delete Board` Trello operation * ✔️ Fiixing linting errors in Trello node * ✨ Added list mode to Trello test node * ⚡ Updating resource locator modes interface * ⚡ Updating Trello test node validation messages and placeholders * N8N-4175 resource locator component (#3812) * ✨ Implemented initial version of resource locator component * ✨ Implemented front-end validation for resource locator component. Improved responsiveness. Minor refactoring. * ⚡ Setting resource locator default state to list. Updating hover states and expand icon. * 🔨 Moving resource locator component to `ParameterInput` from `ParameterInputFull * 🔨 Moving `ResourceLocator` to a separate Vue component * 🔨 Implementing expression and drag'n'drop support in ResourceLocator` component * 🔨 Cleaning up `ResourceLocator` component code * ✨ Implemented resource locator selected mode persistance * 💄 Minor refactoring and fixes in `ResourceLocator` * 🔨 Updating `ResourceLocator` front-end validation logic * ⚡ Saving resource locator mode in node parameters * 💄 Updating the `ResourceLocator` component based on the design review * 🐛 Fixing resource locator mode parameters handling when loading node parameter values on front-end * 💄 Removing leftover unused CSS * ⚡ Updating interfaces to support resource locator value types * ⚡ Updating `ResourceLocator` component to work with object parameter values * 🔨 Cleaning up `ResourceLocator` and related components code * ⚡ Preventing `DraggableTarget` to be sticky if disabled * 🐛 Fixing a bug with resource locator value parameter * 👌 Adding new type alias for all possible node parameter value types * 👌 Updating `ResourceLocator` and related components based on PR review feedback * ⚡ Adding disabled mode to `ResourceLocator` component, fixing expression handling, minor refactoring. * 💄 Updating disabled state styling in `ResourceLocator` component * ⚡ Setting correct default value for test node and removing unnecessary logic * 💄 Added regex URL validation to Trello test node * ✨ Updating Trello test node with another (list mode only) test case * ✔️ Fixing linting error in Trello node * 🔨 Removing hardcoded custom modes and modes order * Add value extractor to routing node (#3777) * ✨ add value extractor to routing node * ✨ add value extractor to property modes * 🔊 improve error logging for value extractor * 🔥 remove old extractValue methods from RoutingNode * ⚡ extractValue inside getNodeParameter * 🔥 remove extract value test from RoutingNode * ✨ make value extraction optional * 🥅 move extract value so proper error messages are sent * 🚨 readd accidentally removed eslint-disable * ✨ add resource locator support extractValue * 🚨 remove unused import * 🐛 fix getting value of resource locator * 💄 Updating resource locator component styling and handling reset value action * ✨ create v2 of Trello node for resource locator * 💄 Updating ResourceLocator droppable & activeDrop classes and removing input padding-right * ⚡ Updating Trello test node with single-mode test case * ⚡ Updating field names in Trello node to avoid name clash * 💄 Updating test Trello node mode order and board:update parameter name * 💄 Updating test node parameter names and display options * List mode search endpoint (#3936) * 🚧 super basic version of the search endpoint This version is built using a hacked up version of the Google Drive node. I need to properly create a v2 for it but it's does work. * 🚧 fixed up type errors and return urls * ✨ add v3 of Google Drive node with RLC * ✨ add RLC to Google Drive Shared Drive operations * ♻️ address some small changes requested in review * 🐛 move list search out of /nodes/ and add check for required param * ✨ google drive folder search * ✨ google drive search sort by name * ✨ add searchable flag for RLC * ✏️ fix google drive wording for v3 * Trello and Airtable search backend (#3974) * ✨ add search to Trello boards * ✨ add RLC to Trello cards * ♻️ use new versioning system for Trello v2 * 🐛 move list search out of /nodes/ and add check for required param * ✨ re-add trello search methods * 🥅 throw error if RLC search isn't sent a method name This will likely be removed when the declarative style of search has been added. * ✨ add requires filter field to RLC search * ✨ add searchable flag to Trello searches * ✨ add RLC for cardId and boardId on all operations * ✨ add ID and URL RLC to Airtable * N8 n 4179 resource locator list mode (#3933) * ✨ Implemented initial version of list mode dropdown * ✨ Handling mode switching and expression support in list mode * 🔨 Removing `sortedModes` references * ⚡ Fixing list mode UI after latest mege * 💄 Updating padding-right for input fields with suffix slots * ✨ Minor fixes to validation, mode switching logic and styling * update error * 2 or more regex * update regex to be more strict * remove expr colors * update hint * 🚧 super basic version of the search endpoint This version is built using a hacked up version of the Google Drive node. I need to properly create a v2 for it but it's does work. * 🚧 fixed up type errors and return urls * begin list impl * ✨ add v3 of Google Drive node with RLC * fix ts issue * introduce dropdown * add more behavior * update design * show search * add filtering * push up selected * add keyboard nav * add loading * add caching * remove console * fix build issues * add debounce * fix click * keep event on focus * fix input size bug * add resource locator type * update type * update interface * update resource locator types * ✨ add search to Trello boards * ✨ add RLC to Google Drive Shared Drive operations * update * update name * add package * use stringify pckg * handle long vals * fix bug in url id modes * remove console log * add lazy loading * add lazy loading on filtering * clean up * make search clearable * add error state * ✨ add RLC to Trello cards * ♻️ address some small changes requested in review * ♻️ use new versioning system for Trello v2 * refactor a bit * fix how loading happens * clear after blur * update api * comment out test code * update api * relaod in case of error * update endpoint * 🐛 move list search out of /nodes/ and add check for required param * 🐛 move list search out of /nodes/ and add check for required param * update req handling * update endpoint * ✨ re-add trello search methods * 🥅 throw error if RLC search isn't sent a method name This will likely be removed when the declarative style of search has been added. * get api to work * update scroll handling * ✨ google drive folder search * ✨ add requires filter field to RLC search * ✨ google drive search sort by name * remove console * ✨ add searchable flag for RLC * ✨ add searchable flag to Trello searches * update searchable * ✨ add RLC for cardId and boardId on all operations * ✨ add ID and URL RLC to Airtable * fix up search * remove extra padding * add link button * update popper pos * format * fix formating * update mode change * add name urls * update regex and errors * upate error * update errors * update airtable regex * update trello regex rules * udpate param name * update * update param * update param * update drive node * update params * add keyboard nav * fix bug * update airtable default mode * fix default value issue * hide long selected value * update duplicate reqs * update node * clean up impl * dedupe resources * fix up nv * resort params * update icon * set placeholders * default to id mode * add telemetry * add refresh opt * clean up tmp val * revert test change * make placeholder optional * update validation * remove description as param hint * support more general values * fix links on long names * update resource item styles * update pos * update icon color * update link alt * check if required * move validation to workflow * update naming * only show warning at param level * show right border on focus * fix hover on all item * fix long names bug * fix expr bug * add expr * update legacy mode * fix up impl * clean up node types * clean up types * remove unnessary type * clean up types * clean up types * clean up types * clea n up localizaiton * remove unused key * clean up helpers * clean up paraminput * clean up paraminputfull * refactor into one loop * update component * update class names * update prop types * update name cases * update casing * clean up classes * clean up resource locator * update drop handling * update mode * add url for link mode * clear value by default * add placeholder * remove legacy hint * handle expr in legacy * fix typos * revert padding change * fix up spacing * update to link component * support urls for id * fix replacement * build Co-authored-by: Milorad Filipovic <milorad@n8n.io> Co-authored-by: Valya Bullions <valya@n8n.io> * refactor: Resource locator review changes (#4109) * ✨ Implemented initial version of list mode dropdown * ✨ Handling mode switching and expression support in list mode * 🔨 Removing `sortedModes` references * ⚡ Fixing list mode UI after latest mege * 💄 Updating padding-right for input fields with suffix slots * ✨ Minor fixes to validation, mode switching logic and styling * update error * 2 or more regex * update regex to be more strict * remove expr colors * update hint * 🚧 super basic version of the search endpoint This version is built using a hacked up version of the Google Drive node. I need to properly create a v2 for it but it's does work. * 🚧 fixed up type errors and return urls * begin list impl * ✨ add v3 of Google Drive node with RLC * fix ts issue * introduce dropdown * add more behavior * update design * show search * add filtering * push up selected * add keyboard nav * add loading * add caching * remove console * fix build issues * add debounce * fix click * keep event on focus * fix input size bug * add resource locator type * update type * update interface * update resource locator types * ✨ add search to Trello boards * ✨ add RLC to Google Drive Shared Drive operations * update * update name * add package * use stringify pckg * handle long vals * fix bug in url id modes * remove console log * add lazy loading * add lazy loading on filtering * clean up * make search clearable * add error state * ✨ add RLC to Trello cards * ♻️ address some small changes requested in review * ♻️ use new versioning system for Trello v2 * refactor a bit * fix how loading happens * clear after blur * update api * comment out test code * update api * relaod in case of error * update endpoint * 🐛 move list search out of /nodes/ and add check for required param * 🐛 move list search out of /nodes/ and add check for required param * update req handling * update endpoint * ✨ re-add trello search methods * 🥅 throw error if RLC search isn't sent a method name This will likely be removed when the declarative style of search has been added. * get api to work * update scroll handling * ✨ google drive folder search * ✨ add requires filter field to RLC search * ✨ google drive search sort by name * remove console * ✨ add searchable flag for RLC * ✨ add searchable flag to Trello searches * update searchable * ✨ add RLC for cardId and boardId on all operations * ✨ add ID and URL RLC to Airtable * fix up search * remove extra padding * add link button * update popper pos * format * fix formating * update mode change * add name urls * update regex and errors * upate error * update errors * update airtable regex * update trello regex rules * udpate param name * update * update param * update param * update drive node * update params * add keyboard nav * fix bug * update airtable default mode * fix default value issue * hide long selected value * update duplicate reqs * update node * clean up impl * dedupe resources * fix up nv * resort params * update icon * set placeholders * default to id mode * add telemetry * add refresh opt * clean up tmp val * revert test change * make placeholder optional * update validation * remove description as param hint * support more general values * fix links on long names * update resource item styles * update pos * update icon color * update link alt * check if required * move validation to workflow * update naming * only show warning at param level * show right border on focus * fix hover on all item * fix long names bug * ♻️ refactor extractValue to allow multiple props with same name * ♻️ use correct import for displayParameterPath * fix expr bug * add expr * update legacy mode * fix up impl * clean up node types * clean up types * ♻️ remove new version of google drive node * ♻️ removed versioned Trello node for RLC * remove unnessary type * ♻️ remove versioned Airtable not for RLC * clean up types * clean up types * clean up types * clea n up localizaiton * remove unused key * clean up helpers * clean up paraminput * clean up paraminputfull * refactor into one loop * update component * update class names * update prop types * update name cases * update casing * clean up classes * 💬 updated RLC URL regex error wording * clean up resource locator * update drop handling * update mode * 💬 reword value extractor errors * 🚨 remove unneeded eslint ignores for RLC modes * 💬 update Trello 400 error message * 🚨 re-add removed types in editor-ui Also ts-ignore something that was clean up in another commit. I've added a comment to fix after someone else can look at it. * 💬 remove hints from Google Drive RLCs * 🥅 rethrow correct errors in Trello node * ✨ add url for id mode on Google Drive * 🔥 remove unused Google Drive file * 🔊 change console.error to use logger instead * 🔀 fix bad merges * ♻️ small changes from review * ♻️ remove ts-ignore Co-authored-by: Milorad Filipovic <milorad@n8n.io> Co-authored-by: Mutasem <mutdmour@gmail.com> * fix build * update tests * fix bug with credential card * update popover component * fix expressions url * fix type issue * format * update alt * fix lint issues * fix eslint issues Co-authored-by: Milorad Filipovic <milorad@n8n.io> Co-authored-by: Milorad FIlipović <miloradfilipovic19@gmail.com> Co-authored-by: Valya <68596159+valya@users.noreply.github.com> Co-authored-by: Valya Bullions <valya@n8n.io>
This commit is contained in:
Mutasem Aldmour
@@ -0,0 +1,327 @@
|
||||
<template>
|
||||
<n8n-popover
|
||||
placement="bottom"
|
||||
width="318"
|
||||
:popper-class="$style.popover"
|
||||
:value="show"
|
||||
trigger="manual"
|
||||
>
|
||||
<div :class="$style.messageContainer" v-if="errorView">
|
||||
<slot name="error"></slot>
|
||||
</div>
|
||||
<div :class="$style.searchInput" v-if="filterable && !errorView" @keydown="onKeyDown">
|
||||
<n8n-input size="medium" :value="filter" :clearable="true" @input="onFilterInput" @blur="onSearchBlur" ref="search" :placeholder="$locale.baseText('resourceLocator.search.placeholder')">
|
||||
<font-awesome-icon :class="$style.searchIcon" icon="search" slot="prefix" />
|
||||
</n8n-input>
|
||||
</div>
|
||||
<div v-if="filterRequired && !filter && !errorView && !loading" :class="$style.searchRequired">
|
||||
{{ $locale.baseText('resourceLocator.mode.list.searchRequired') }}
|
||||
</div>
|
||||
<div :class="$style.messageContainer" v-else-if="!errorView && sortedResources.length === 0 && !loading">
|
||||
{{ $locale.baseText('resourceLocator.mode.list.noResults') }}
|
||||
</div>
|
||||
<div v-else-if="!errorView" ref="resultsContainer" :class="{[$style.container]: true, [$style.pushDownResults]: filterable}" @scroll="onResultsEnd">
|
||||
<div
|
||||
v-for="(result, i) in sortedResources"
|
||||
:key="result.value"
|
||||
:class="{ [$style.resourceItem]: true, [$style.selected]: result.value === value, [$style.hovering]: hoverIndex === i }"
|
||||
@click="() => onItemClick(result.value)"
|
||||
@mouseenter="() => onItemHover(i)"
|
||||
@mouseleave="() => onItemHoverLeave()"
|
||||
:ref="`item-${i}`"
|
||||
>
|
||||
<div :class="$style.resourceNameContainer">
|
||||
<span>{{ result.name }}</span>
|
||||
</div>
|
||||
<div :class="$style.urlLink">
|
||||
<font-awesome-icon
|
||||
v-if="showHoverUrl && result.url && hoverIndex === i"
|
||||
icon="external-link-alt"
|
||||
:title="result.linkAlt || $locale.baseText('resourceLocator.mode.list.openUrl')"
|
||||
@click="openUrl($event, result.url)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="loading && !errorView">
|
||||
<div v-for="(_, i) in 3" :key="i" :class="$style.loadingItem">
|
||||
<n8n-loading :class="$style.loader" variant="p" :rows="1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<slot slot="reference" />
|
||||
</n8n-popover>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { IResourceLocatorResultExpanded } from '@/Interface';
|
||||
import Vue, { PropType } from 'vue';
|
||||
|
||||
const SEARCH_BAR_HEIGHT_PX = 40;
|
||||
const SCROLL_MARGIN_PX = 10;
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'resource-locator-dropdown',
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number],
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
resources: {
|
||||
type: Array as PropType<IResourceLocatorResultExpanded[]>,
|
||||
},
|
||||
filterable: {
|
||||
type: Boolean,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
},
|
||||
filter: {
|
||||
type: String,
|
||||
},
|
||||
hasMore: {
|
||||
type: Boolean,
|
||||
},
|
||||
errorView: {
|
||||
type: Boolean,
|
||||
},
|
||||
filterRequired: {
|
||||
type: Boolean,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hoverIndex: 0,
|
||||
showHoverUrl: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$on('keyDown', this.onKeyDown);
|
||||
},
|
||||
computed: {
|
||||
sortedResources(): IResourceLocatorResultExpanded[] {
|
||||
const seen = new Set();
|
||||
const { selected, notSelected } = this.resources.reduce((acc, item: IResourceLocatorResultExpanded) => {
|
||||
if (seen.has(item.value)) {
|
||||
return acc;
|
||||
}
|
||||
seen.add(item.value);
|
||||
|
||||
if (this.value && item.value === this.value) {
|
||||
acc.selected = item;
|
||||
} else {
|
||||
acc.notSelected.push(item);
|
||||
}
|
||||
|
||||
return acc;
|
||||
}, { selected: null as IResourceLocatorResultExpanded | null, notSelected: [] as IResourceLocatorResultExpanded[] });
|
||||
|
||||
if (selected) {
|
||||
return [
|
||||
selected,
|
||||
...notSelected,
|
||||
];
|
||||
}
|
||||
|
||||
return notSelected;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
openUrl(event: MouseEvent ,url: string) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
window.open(url, '_blank');
|
||||
},
|
||||
onKeyDown(e: KeyboardEvent) {
|
||||
const container = this.$refs.resultsContainer as HTMLElement;
|
||||
|
||||
if (e.key === 'ArrowDown') {
|
||||
if (this.hoverIndex < this.sortedResources.length - 1) {
|
||||
this.hoverIndex++;
|
||||
|
||||
const items = this.$refs[`item-${this.hoverIndex}`] as HTMLElement[];
|
||||
if (container && Array.isArray(items) && items.length === 1) {
|
||||
const item = items[0];
|
||||
if ((item.offsetTop + item.clientHeight) > (container.scrollTop + container.offsetHeight)) {
|
||||
const top = item.offsetTop - container.offsetHeight + item.clientHeight;
|
||||
container.scrollTo({ top });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (e.key === 'ArrowUp') {
|
||||
if (this.hoverIndex > 0) {
|
||||
this.hoverIndex--;
|
||||
|
||||
const searchOffset = this.filterable ? SEARCH_BAR_HEIGHT_PX : 0;
|
||||
const items = this.$refs[`item-${this.hoverIndex}`] as HTMLElement[];
|
||||
if (container && Array.isArray(items) && items.length === 1) {
|
||||
const item = items[0];
|
||||
if (item.offsetTop <= container.scrollTop + searchOffset) {
|
||||
container.scrollTo({ top: item.offsetTop - searchOffset });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (e.key === 'Enter') {
|
||||
this.$emit('input', this.sortedResources[this.hoverIndex].value);
|
||||
}
|
||||
|
||||
},
|
||||
onFilterInput(value: string) {
|
||||
this.$emit('filter', value);
|
||||
},
|
||||
onSearchBlur() {
|
||||
this.$emit('hide');
|
||||
},
|
||||
onItemClick(selected: string) {
|
||||
this.$emit('input', selected);
|
||||
},
|
||||
onItemHover(index: number) {
|
||||
this.hoverIndex = index;
|
||||
|
||||
setTimeout(() => {
|
||||
if (this.hoverIndex === index) {
|
||||
this.showHoverUrl = true;
|
||||
}
|
||||
}, 250);
|
||||
},
|
||||
onItemHoverLeave() {
|
||||
this.showHoverUrl = false;
|
||||
},
|
||||
onResultsEnd() {
|
||||
if (this.loading || !this.hasMore) {
|
||||
return;
|
||||
}
|
||||
|
||||
const container = this.$refs.resultsContainer as HTMLElement;
|
||||
if (container) {
|
||||
const diff = container.offsetHeight - (container.scrollHeight - container.scrollTop);
|
||||
if (diff > -(SCROLL_MARGIN_PX) && diff < SCROLL_MARGIN_PX) {
|
||||
this.$emit('loadMore');
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
show(toShow) {
|
||||
if (toShow) {
|
||||
this.hoverIndex = 0;
|
||||
this.showHoverUrl = false;
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (toShow && this.filterable && this.$refs.search) {
|
||||
(this.$refs.search as HTMLElement).focus();
|
||||
}
|
||||
}, 0);
|
||||
},
|
||||
loading() {
|
||||
setTimeout(this.onResultsEnd, 0); // in case of filtering
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.popover {
|
||||
padding: 0;
|
||||
border: var(--border-base);
|
||||
}
|
||||
|
||||
.pushDownResults {
|
||||
padding-top: 36px;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
max-height: 236px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.messageContainer {
|
||||
height: 236px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
border-bottom: var(--border-base);
|
||||
--input-border-color: none;
|
||||
--input-font-size: var(--font-size-2xs);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 316px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.resourceItem {
|
||||
display: flex;
|
||||
padding: 0 var(--spacing-xs);
|
||||
white-space: nowrap;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-background-base);
|
||||
}
|
||||
}
|
||||
|
||||
.loadingItem {
|
||||
padding: 10px var(--spacing-xs);
|
||||
}
|
||||
|
||||
.loader {
|
||||
max-width: 120px;
|
||||
|
||||
* {
|
||||
margin-top: 0 !important;
|
||||
max-height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.hovering {
|
||||
background-color: var(--color-background-base);
|
||||
}
|
||||
|
||||
.searchRequired {
|
||||
height: 50px;
|
||||
margin-top: 40px;
|
||||
padding-left: var(--spacing-xs);
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-base);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.urlLink {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: var(--font-size-3xs);
|
||||
color: var(--color-text-base);
|
||||
margin-left: var(--spacing-2xs);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.resourceNameContainer {
|
||||
font-size: var(--font-size-2xs);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.searchIcon {
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user