admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-22 04:10:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add variables feature (#5602)

Browse Source 
* feat: add variables db models and migrations

* feat: variables api endpoints

* feat: add $variables to expressions

* test: fix ActiveWorkflowRunner tests failing

* test: a different fix for the tests broken by $variables

* feat: variables licensing

* fix: could create one extra variable than licensed for

* feat: Add Variables UI page and $vars global property (#5750)

* feat: add support for row slot to datatable

* feat: add variables create, read, update, delete

* feat: add vars autocomplete

* chore: remove alert

* feat: add variables autocomplete for code and expressions

* feat: add tests for variable components

* feat: add variables search and sort

* test: update tests for variables view

* chore: fix test and linting issue

* refactor: review changes

* feat: add variable creation telemetry

* fix: Improve variables listing and disabled case, fix resource sorting (no-changelog) (#5903)

* fix: Improve variables disabled experience and fix sorting

* fix: update action box margin

* test: update tests for variables row and datatable

* fix: Add ee controller to base controller

* fix: variables.ee routes not being added

* feat: add variables validation

* fix: fix vue-fragment bug that breaks everything

* chore: Update lock

* feat: Add variables input validation and permissions (no-changelog) (#5910)

* feat: add input validation

* feat: handle variables view for non-instance-owner users

* test: update variables tests

* fix: fix data-testid pattern

* feat: improve overflow styles

* test: fix variables row snapshot

* feat: update sorting to take newly created variables into account

* fix: fix list layout overflow

* fix: fix adding variables on page other than 1. fix validation

* feat: add docs link

* fix: fix default displayName function for resource-list-layout

* feat: improve vars expressions ux, cm-tooltip

* test: fix datatable test

* feat: add MATCH_REGEX validation rule

* fix: overhaul how datatable pagination selector works

* feat: update  completer description

* fix: conditionally update usage syntax based on key validation

* test: update datatable snapshot

* fix: fix variables-row button margins

* fix: fix pagination overflow

* test: Fix broken test

* test: Update snapshot

* fix: Remove duplicate declaration

* feat: add custom variables icon

---------

Co-authored-by: Alex Grozav <alex@grozav.com>
Co-authored-by: Omar Ajoue <krynble@gmail.com>
This commit is contained in:
Val
2023-04-18 11:41:55 +01:00
committed by GitHub
parent 1555387ece
commit 1bb987140a
94 changed files with 2925 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
View File

@@ -8,14 +8,17 @@
</div>
<div class="mt-xs mb-l">
<n8n-button
size="large"
block
@click="$emit('click:add', $event)"
data-test-id="resources-list-add"
>
{{ $locale.baseText(`${resourceKey}.add`) }}
</n8n-button>
<slot name="add-button">
<n8n-button
size="large"
block
:disabled="disabled"
@click="$emit('click:add', $event)"
data-test-id="resources-list-add"
>
{{ $locale.baseText(`${resourceKey}.add`) }}
</n8n-button>
</slot>
</div>
<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]" v-if="shareable">
@@ -55,7 +58,7 @@
/>
</slot>
</div>
<page-view-layout-list v-else>
<page-view-layout-list :overflow="type !== 'list'" v-else>
<template #header>
<div class="mb-xs">
<div :class="$style['filters-row']">
@@ -75,23 +78,14 @@
<div :class="$style['sort-and-filter']">
<n8n-select v-model="sortBy" size="medium" data-test-id="resources-list-sort">
<n8n-option
value="lastUpdated"
:label="$locale.baseText(`${resourceKey}.sort.lastUpdated`)"
/>
<n8n-option
value="lastCreated"
:label="$locale.baseText(`${resourceKey}.sort.lastCreated`)"
/>
<n8n-option
value="nameAsc"
:label="$locale.baseText(`${resourceKey}.sort.nameAsc`)"
/>
<n8n-option
value="nameDesc"
:label="$locale.baseText(`${resourceKey}.sort.nameDesc`)"
v-for="sortOption in sortOptions"
:key="sortOption"
:value="sortOption"
:label="$locale.baseText(`${resourceKey}.sort.${sortOption}`)"
/>
</n8n-select>
<resource-filters-dropdown
v-if="showFiltersDropdown"
:keys="filterKeys"
:reset="resetFilters"
:value="filters"
@@ -121,18 +115,41 @@
<div class="pb-xs" />
</template>
<n8n-recycle-scroller
<slot name="preamble" />
<div
v-if="filteredAndSortedSubviewResources.length > 0"
data-test-id="resources-list"
:class="[$style.list, 'list-style-none']"
:items="filteredAndSortedSubviewResources"
:item-size="itemSize"
item-key="id"
:class="$style.listWrapper"
ref="listWrapperRef"
>
<template #default="{ item, updateItemSize }">
<slot :data="item" :updateItemSize="updateItemSize" />
</template>
</n8n-recycle-scroller>
<n8n-recycle-scroller
v-if="type === 'list'"
data-test-id="resources-list"
:class="[$style.list, 'list-style-none']"
:items="filteredAndSortedSubviewResources"
:item-size="typeProps.itemSize"
item-key="id"
>
<template #default="{ item, updateItemSize }">
<slot :data="item" :updateItemSize="updateItemSize" />
</template>
</n8n-recycle-scroller>
<n8n-datatable
v-if="typeProps.columns"
data-test-id="resources-table"
:class="$style.datatable"
:columns="typeProps.columns"
:rows="filteredAndSortedSubviewResources"
:currentPage="currentPage"
:rowsPerPage="rowsPerPage"
@update:currentPage="setCurrentPage"
@update:rowsPerPage="setRowsPerPage"
>
<template #row="{ columns, row }">
<slot :data="row" :columns="columns" />
</template>
</n8n-datatable>
</div>
<n8n-text color="text-base" size="medium" data-test-id="resources-list-empty" v-else>
{{ $locale.baseText(`${resourceKey}.noResults`) }}
@@ -156,6 +173,8 @@
</span>
</template>
</n8n-text>
<slot name="postamble" />
</page-view-layout-list>
</template>
</page-view-layout>
@@ -177,6 +196,7 @@ import ResourceFiltersDropdown from '@/components/forms/ResourceFiltersDropdown.
import { mapStores } from 'pinia';
import { useSettingsStore } from '@/stores/settings';
import { useUsersStore } from '@/stores/users';
import { DatatableColumn } from 'n8n-design-system';
export interface IResource {
id: string;
@@ -213,13 +233,17 @@ export default mixins(showMessage, debounceHelper).extend({
type: String,
default: '' as IResourceKeyType,
},
displayName: {
type: Function as PropType<(resource: IResource) => string>,
default: (resource: IResource) => resource.name,
},
resources: {
type: Array,
default: (): IResource[] => [],
},
itemSize: {
type: Number,
default: 80,
disabled: {
type: Boolean,
default: false,
},
initialize: {
type: Function as PropType<() => Promise<void>>,
@@ -240,13 +264,37 @@ export default mixins(showMessage, debounceHelper).extend({
type: Boolean,
default: true,
},
showFiltersDropdown: {
type: Boolean,
default: true,
},
sortFns: {
type: Object as PropType<Record<string, (a: IResource, b: IResource) => number>>,
default: (): Record<string, (a: IResource, b: IResource) => number> => ({}),
},
sortOptions: {
type: Array as PropType<string[]>,
default: () => ['lastUpdated', 'lastCreated', 'nameAsc', 'nameDesc'],
},
type: {
type: String as PropType<'datatable' | 'list'>,
default: 'list',
},
typeProps: {
type: Object as PropType<{ itemSize: number } | { columns: DatatableColumn[] }>,
default: () => ({
itemSize: 0,
}),
},
},
data() {
return {
loading: true,
isOwnerSubview: false,
sortBy: 'lastUpdated',
sortBy: this.sortOptions[0],
hasFilters: false,
currentPage: 1,
rowsPerPage: 10 as number | '*',
resettingFilters: false,
EnterpriseEditionFeature,
};
@@ -292,7 +340,7 @@ export default mixins(showMessage, debounceHelper).extend({
if (this.filters.search) {
const searchString = this.filters.search.toLowerCase();
matches = matches && resource.name.toLowerCase().includes(searchString);
matches = matches && this.displayName(resource).toLowerCase().includes(searchString);
}
if (this.additionalFiltersHandler) {
@@ -305,15 +353,23 @@ export default mixins(showMessage, debounceHelper).extend({
return filtered.sort((a, b) => {
switch (this.sortBy) {
case 'lastUpdated':
return new Date(b.updatedAt).valueOf() - new Date(a.updatedAt).valueOf();
return this.sortFns['lastUpdated']
? this.sortFns['lastUpdated'](a, b)
: new Date(b.updatedAt).valueOf() - new Date(a.updatedAt).valueOf();
case 'lastCreated':
return new Date(b.createdAt).valueOf() - new Date(a.createdAt).valueOf();
return this.sortFns['lastCreated']
? this.sortFns['lastCreated'](a, b)
: new Date(b.createdAt).valueOf() - new Date(a.createdAt).valueOf();
case 'nameAsc':
return a.name.trim().localeCompare(b.name.trim());
return this.sortFns['nameAsc']
? this.sortFns['nameAsc'](a, b)
: this.displayName(a).trim().localeCompare(this.displayName(b).trim());
case 'nameDesc':
return b.name.localeCompare(a.name);
return this.sortFns['nameDesc']
? this.sortFns['nameDesc'](a, b)
: this.displayName(b).trim().localeCompare(this.displayName(a).trim());
default:
return 0;
return this.sortFns[this.sortBy] ? this.sortFns[this.sortBy](a, b) : 0;
}
});
},
@@ -333,6 +389,12 @@ export default mixins(showMessage, debounceHelper).extend({
this.loading = false;
this.$nextTick(this.focusSearchInput);
},
setCurrentPage(page: number) {
this.currentPage = page;
},
setRowsPerPage(rowsPerPage: number | '*') {
this.rowsPerPage = rowsPerPage;
},
resetFilters() {
Object.keys(this.filters).forEach((key) => {
this.filters[key] = Array.isArray(this.filters[key]) ? [] : '';
@@ -418,7 +480,8 @@ export default mixins(showMessage, debounceHelper).extend({
'filters.search'() {
this.callDebounced('sendFiltersTelemetry', { debounceTime: 1000, trailing: true }, 'search');
},
sortBy() {
sortBy(newValue) {
this.$emit('sort', newValue);
this.sendSortingTelemetry();
},
},
@@ -446,6 +509,10 @@ export default mixins(showMessage, debounceHelper).extend({
//flex-direction: column;
}
.listWrapper {
height: 100%;
}
.sort-and-filter {
display: flex;
flex-direction: row;
@@ -460,4 +527,8 @@ export default mixins(showMessage, debounceHelper).extend({
.card-loading {
height: 69px;
}
.datatable {
padding-bottom: var(--spacing-s);
}
</style>