mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-18 10:31:15 +00:00
feat(editor): create new workflows page (#4267)
* feat(editor): extract credentials view into reusable layout components for workflows view * feat(editor): add workflow card and start work on empty state * feat: add hoverable card and finish workflows empty state * fix: undo workflows response interface changes * chore: fix linting issues. * fix: remove enterprise sharing env schema * fix(editor): fix workflows resource view when sharing is enabled * fix: change owner tag design and order * feat: add personalization survey on workflows page * fix: update component snapshots * feat: refactored workflow card to use workflow-activator properly * fix: fix workflow activator and proptypes * fix: hide owner tag for workflow card until sharing is available * fix: fixed ownedBy and sharedWith appearing for workflows list * feat: update tags component design * refactor: change resource filter select to n8n-user-select * fix: made telemetry messages reusable * chore: remove unused import * refactor: fix component name casing * refactor: use Vue.set to make workflow property reactive * feat: add support for clicking on tags for filtering * chore: fix tags linting issues * fix: fix resources list layout when title words are very long * refactor: add active and inactive status text to workflow activator * fix: fix credentials and workflows sorting when name contains leading whitespace * fix: remove wrongfully added style tag * feat: add translations and storybook examples for truncated tags * fix: remove enterprise sharing env from schema * refactor: fix workflows module and workflows field store naming conflict * fix: fix workflow activator wrapping * feat: updated empty workflows list cards design * feat: update workflow activator margins and workflow card * feat: add duplicate workflow functionality and update tags * feat: fix duplicate workflow flow * fix: fix status color for workflow activator with could not be started status * fix: remove createdAt and updatedAt from workflow duplication
This commit is contained in:
Alex Grozav
@@ -0,0 +1,408 @@
|
||||
<template>
|
||||
<page-view-layout>
|
||||
<template #aside v-if="showAside">
|
||||
<div :class="[$style['heading-wrapper'], 'mb-xs']">
|
||||
<n8n-heading size="2xlarge">
|
||||
{{ $locale.baseText(`${resourceKey}.heading`) }}
|
||||
</n8n-heading>
|
||||
</div>
|
||||
|
||||
<div class="mt-xs mb-l">
|
||||
<n8n-button size="large" block @click="$emit('click:add', $event)">
|
||||
{{ $locale.baseText(`${resourceKey}.add`) }}
|
||||
</n8n-button>
|
||||
</div>
|
||||
|
||||
<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]" v-if="shareable">
|
||||
<resource-ownership-select
|
||||
v-model="isOwnerSubview"
|
||||
:my-resources-label="$locale.baseText(`${resourceKey}.menu.my`)"
|
||||
:all-resources-label="$locale.baseText(`${resourceKey}.menu.all`)"
|
||||
/>
|
||||
</enterprise-edition>
|
||||
</template>
|
||||
|
||||
<div v-if="loading">
|
||||
<n8n-loading :class="[$style['header-loading'], 'mb-l']" variant="custom"/>
|
||||
<n8n-loading :class="[$style['card-loading'], 'mb-2xs']" variant="custom"/>
|
||||
<n8n-loading :class="$style['card-loading']" variant="custom"/>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="ph-no-capture" v-if="resources.length === 0">
|
||||
<slot name="empty">
|
||||
<n8n-action-box
|
||||
emoji="👋"
|
||||
:heading="$locale.baseText(currentUser.firstName ? `${resourceKey}.empty.heading` : `${resourceKey}.empty.heading.userNotSetup`, {
|
||||
interpolate: { name: currentUser.firstName }
|
||||
})"
|
||||
:description="$locale.baseText(`${resourceKey}.empty.description`)"
|
||||
:buttonText="$locale.baseText(`${resourceKey}.empty.button`)"
|
||||
buttonType="secondary"
|
||||
@click="$emit('click:add', $event)"
|
||||
/>
|
||||
</slot>
|
||||
</div>
|
||||
<page-view-layout-list v-else>
|
||||
<template #header>
|
||||
<div class="mb-xs">
|
||||
<div :class="$style['filters-row']">
|
||||
<n8n-input
|
||||
:class="[$style['search'], 'mr-2xs']"
|
||||
:placeholder="$locale.baseText(`${resourceKey}.search.placeholder`)"
|
||||
v-model="filters.search"
|
||||
size="medium"
|
||||
clearable
|
||||
ref="search"
|
||||
>
|
||||
<n8n-icon icon="search" slot="prefix"/>
|
||||
</n8n-input>
|
||||
<div :class="$style['sort-and-filter']">
|
||||
<n8n-select
|
||||
v-model="sortBy"
|
||||
size="medium"
|
||||
>
|
||||
<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`)"/>
|
||||
</n8n-select>
|
||||
<resource-filters-dropdown
|
||||
:keys="filterKeys"
|
||||
:reset="resetFilters"
|
||||
:value="filters"
|
||||
:shareable="shareable"
|
||||
@input="$emit('update:filters', $event)"
|
||||
@update:filtersLength="onUpdateFiltersLength"
|
||||
>
|
||||
<template v-slot="resourceFiltersSlotProps">
|
||||
<slot name="filters" v-bind="resourceFiltersSlotProps" />
|
||||
</template>
|
||||
</resource-filters-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-show="hasFilters" class="mt-xs">
|
||||
<n8n-info-tip :bold="false">
|
||||
{{ $locale.baseText(`${resourceKey}.filters.active`) }}
|
||||
<n8n-link @click="resetFilters" size="small">
|
||||
{{ $locale.baseText(`${resourceKey}.filters.active.reset`) }}
|
||||
</n8n-link>
|
||||
</n8n-info-tip>
|
||||
</div>
|
||||
|
||||
<div class="mt-xs mb-l">
|
||||
<ul :class="[$style.list, 'list-style-none']" v-if="filteredAndSortedSubviewResources.length > 0">
|
||||
<li v-for="resource in filteredAndSortedSubviewResources" :key="resource.id" class="mb-2xs">
|
||||
<slot :data="resource" />
|
||||
</li>
|
||||
</ul>
|
||||
<n8n-text color="text-base" size="medium" v-else>
|
||||
{{ $locale.baseText(`${resourceKey}.noResults`) }}
|
||||
<template v-if="!hasFilters && isOwnerSubview && resourcesNotOwned.length > 0">
|
||||
<span v-if="!filters.search">
|
||||
({{ $locale.baseText(`${resourceKey}.noResults.switchToShared.preamble`) }}
|
||||
<n8n-link @click="setOwnerSubview(false)">{{$locale.baseText(`${resourceKey}.noResults.switchToShared.link`) }}</n8n-link>)
|
||||
</span>
|
||||
<span v-else>
|
||||
({{ $locale.baseText(`${resourceKey}.noResults.withSearch.switchToShared.preamble`) }}
|
||||
<n8n-link @click="setOwnerSubview(false)">{{$locale.baseText(`${resourceKey}.noResults.withSearch.switchToShared.link`) }}</n8n-link>)
|
||||
</span>
|
||||
</template>
|
||||
</n8n-text>
|
||||
</div>
|
||||
</page-view-layout-list>
|
||||
</template>
|
||||
</page-view-layout>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {showMessage} from '@/components/mixins/showMessage';
|
||||
import {IUser} from '@/Interface';
|
||||
import mixins from 'vue-typed-mixins';
|
||||
|
||||
import PageViewLayout from "@/components/layouts/PageViewLayout.vue";
|
||||
import PageViewLayoutList from "@/components/layouts/PageViewLayoutList.vue";
|
||||
import {EnterpriseEditionFeature} from "@/constants";
|
||||
import TemplateCard from "@/components/TemplateCard.vue";
|
||||
import Vue, {PropType} from "vue";
|
||||
import {debounceHelper} from '@/components/mixins/debounce';
|
||||
import ResourceOwnershipSelect from "@/components/forms/ResourceOwnershipSelect.ee.vue";
|
||||
import ResourceFiltersDropdown from "@/components/forms/ResourceFiltersDropdown.vue";
|
||||
|
||||
export interface IResource {
|
||||
id: string;
|
||||
name: string;
|
||||
updatedAt: string;
|
||||
createdAt: string;
|
||||
ownedBy?: Partial<IUser>;
|
||||
sharedWith?: Array<Partial<IUser>>;
|
||||
}
|
||||
|
||||
interface IFilters {
|
||||
search: string;
|
||||
ownedBy: string;
|
||||
sharedWith: string;
|
||||
|
||||
[key: string]: boolean | string | string[];
|
||||
}
|
||||
|
||||
type IResourceKeyType = 'credentials' | 'workflows';
|
||||
|
||||
const filterKeys = ['ownedBy', 'sharedWith'];
|
||||
|
||||
export default mixins(
|
||||
showMessage,
|
||||
debounceHelper,
|
||||
).extend({
|
||||
name: 'resources-list-layout',
|
||||
components: {
|
||||
TemplateCard,
|
||||
PageViewLayout,
|
||||
PageViewLayoutList,
|
||||
ResourceOwnershipSelect,
|
||||
ResourceFiltersDropdown,
|
||||
},
|
||||
props: {
|
||||
resourceKey: {
|
||||
type: String,
|
||||
default: '' as IResourceKeyType,
|
||||
},
|
||||
resources: {
|
||||
type: Array,
|
||||
default: (): IResource[] => [],
|
||||
},
|
||||
initialize: {
|
||||
type: Function as PropType<() => Promise<void>>,
|
||||
default: () => () => Promise.resolve(),
|
||||
},
|
||||
filters: {
|
||||
type: Object,
|
||||
default: (): IFilters => ({ search: '', ownedBy: '', sharedWith: '' }),
|
||||
},
|
||||
additionalFiltersHandler: {
|
||||
type: Function,
|
||||
},
|
||||
showAside: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
shareable: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
isOwnerSubview: true,
|
||||
sortBy: 'lastUpdated',
|
||||
hasFilters: false,
|
||||
resettingFilters: false,
|
||||
EnterpriseEditionFeature,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
currentUser(): IUser {
|
||||
return this.$store.getters['users/currentUser'];
|
||||
},
|
||||
allUsers(): IUser[] {
|
||||
return this.$store.getters['users/allUsers'];
|
||||
},
|
||||
subviewResources(): IResource[] {
|
||||
if (!this.shareable) {
|
||||
return this.resources as IResource[];
|
||||
}
|
||||
|
||||
return (this.resources as IResource[]).filter((resource) => {
|
||||
if (this.isOwnerSubview && this.$store.getters['settings/isEnterpriseFeatureEnabled'](EnterpriseEditionFeature.Sharing)) {
|
||||
return !!(resource.ownedBy && resource.ownedBy.id === this.currentUser.id);
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
},
|
||||
filterKeys(): string[] {
|
||||
return Object.keys(this.filters);
|
||||
},
|
||||
filteredAndSortedSubviewResources(): IResource[] {
|
||||
const filtered: IResource[] = this.subviewResources.filter((resource: IResource) => {
|
||||
let matches = true;
|
||||
|
||||
if (this.filters.ownedBy) {
|
||||
matches = matches && !!(resource.ownedBy && resource.ownedBy.id === this.filters.ownedBy);
|
||||
}
|
||||
|
||||
if (this.filters.sharedWith) {
|
||||
matches = matches && !!(resource.sharedWith && resource.sharedWith.find((sharee) => sharee.id === this.filters.sharedWith));
|
||||
}
|
||||
|
||||
if (this.filters.search) {
|
||||
const searchString = this.filters.search.toLowerCase();
|
||||
|
||||
matches = matches && resource.name.toLowerCase().includes(searchString);
|
||||
}
|
||||
|
||||
if (this.additionalFiltersHandler) {
|
||||
matches = this.additionalFiltersHandler(resource, this.filters, matches);
|
||||
}
|
||||
|
||||
return matches;
|
||||
});
|
||||
|
||||
return filtered.sort((a, b) => {
|
||||
switch (this.sortBy) {
|
||||
case 'lastUpdated':
|
||||
return (new Date(b.updatedAt)).valueOf() - (new Date(a.updatedAt)).valueOf();
|
||||
case 'lastCreated':
|
||||
return (new Date(b.createdAt)).valueOf() - (new Date(a.createdAt)).valueOf();
|
||||
case 'nameAsc':
|
||||
return a.name.trim().localeCompare(b.name.trim());
|
||||
case 'nameDesc':
|
||||
return b.name.localeCompare(a.name);
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
},
|
||||
resourcesNotOwned(): IResource[] {
|
||||
return (this.resources as IResource[]).filter((resource) => {
|
||||
return resource.ownedBy && resource.ownedBy.id !== this.currentUser.id;
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async onMounted() {
|
||||
await this.initialize();
|
||||
|
||||
this.loading = false;
|
||||
this.$nextTick(this.focusSearchInput);
|
||||
},
|
||||
resetFilters() {
|
||||
Object.keys(this.filters).forEach((key) => {
|
||||
this.filters[key] = Array.isArray(this.filters[key]) ? [] : '';
|
||||
});
|
||||
|
||||
this.resettingFilters = true;
|
||||
this.sendFiltersTelemetry('reset');
|
||||
},
|
||||
focusSearchInput() {
|
||||
if (this.$refs.search) {
|
||||
(this.$refs.search as Vue & { focus: () => void }).focus();
|
||||
}
|
||||
},
|
||||
setOwnerSubview(active: boolean) {
|
||||
this.isOwnerSubview = active;
|
||||
},
|
||||
getTelemetrySubview(): string {
|
||||
return this.$locale.baseText(`${this.resourceKey as IResourceKeyType}.menu.${this.isOwnerSubview ? 'my' : 'all'}`);
|
||||
},
|
||||
sendSubviewTelemetry() {
|
||||
this.$telemetry.track(`User changed ${this.resourceKey} sub view`, {
|
||||
sub_view: this.getTelemetrySubview(),
|
||||
});
|
||||
},
|
||||
sendSortingTelemetry() {
|
||||
this.$telemetry.track(`User changed sorting in ${this.resourceKey} list`, {
|
||||
sub_view: this.getTelemetrySubview(),
|
||||
sorting: this.sortBy,
|
||||
});
|
||||
},
|
||||
sendFiltersTelemetry(source: string) {
|
||||
// Prevent sending multiple telemetry events when resetting filters
|
||||
// Timeout is required to wait for search debounce to be over
|
||||
if (this.resettingFilters) {
|
||||
if (source !== 'reset') {
|
||||
return;
|
||||
}
|
||||
|
||||
setTimeout(() => this.resettingFilters = false, 1500);
|
||||
}
|
||||
|
||||
const filters = this.filters as Record<string, string[] | string | boolean>;
|
||||
const filtersSet: string[] = [];
|
||||
const filterValues: Array<string[] | string | boolean | null> = [];
|
||||
|
||||
Object.keys(filters).forEach((key) => {
|
||||
if (filters[key]) {
|
||||
filtersSet.push(key);
|
||||
filterValues.push(key === 'search' ? null : filters[key]);
|
||||
}
|
||||
});
|
||||
|
||||
this.$telemetry.track(`User set filters in ${this.resourceKey} list`, {
|
||||
filters_set: filtersSet,
|
||||
filter_values: filterValues,
|
||||
sub_view: this.getTelemetrySubview(),
|
||||
[`${this.resourceKey}_total_in_view`]: this.subviewResources.length,
|
||||
[`${this.resourceKey}_after_filtering`]: this.filteredAndSortedSubviewResources.length,
|
||||
});
|
||||
},
|
||||
onUpdateFiltersLength(length: number) {
|
||||
this.hasFilters = length > 0;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.onMounted();
|
||||
},
|
||||
watch: {
|
||||
isOwnerSubview() {
|
||||
this.sendSubviewTelemetry();
|
||||
},
|
||||
'filters.ownedBy'(value) {
|
||||
if (value) {
|
||||
this.setOwnerSubview(false);
|
||||
}
|
||||
this.sendFiltersTelemetry('ownedBy');
|
||||
},
|
||||
'filters.sharedWith'() {
|
||||
this.sendFiltersTelemetry('sharedWith');
|
||||
},
|
||||
'filters.search'() {
|
||||
this.callDebounced('sendFiltersTelemetry', {debounceTime: 1000, trailing: true}, 'search');
|
||||
},
|
||||
sortBy() {
|
||||
this.sendSortingTelemetry();
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.heading-wrapper {
|
||||
padding-bottom: 1px; // Match input height
|
||||
}
|
||||
|
||||
.filters-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.search {
|
||||
max-width: 240px;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sort-and-filter {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.header-loading {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.card-loading {
|
||||
height: 69px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user