mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-23 04:39:08 +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
187
packages/editor-ui/src/views/WorkflowsView.vue
Normal file
187
packages/editor-ui/src/views/WorkflowsView.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<resources-list-layout
|
||||
ref="layout"
|
||||
resource-key="workflows"
|
||||
:resources="allWorkflows"
|
||||
:initialize="initialize"
|
||||
:filters="filters"
|
||||
:additional-filters-handler="onFilter"
|
||||
:show-aside="allWorkflows.length > 0"
|
||||
:shareable="false"
|
||||
@click:add="addWorkflow"
|
||||
@update:filters="filters = $event"
|
||||
>
|
||||
<template v-slot="{ data }">
|
||||
<workflow-card :data="data" @click:tag="onClickTag" />
|
||||
</template>
|
||||
<template #empty>
|
||||
<div class="text-center mt-s">
|
||||
<n8n-heading tag="h2" size="xlarge" class="mb-2xs">
|
||||
{{ $locale.baseText(currentUser.firstName ? 'workflows.empty.heading' : 'workflows.empty.heading.userNotSetup', { interpolate: { name: currentUser.firstName } }) }}
|
||||
</n8n-heading>
|
||||
<n8n-text size="large" color="text-base">
|
||||
{{ $locale.baseText('workflows.empty.description') }}
|
||||
</n8n-text>
|
||||
</div>
|
||||
<div class="text-center mt-2xl">
|
||||
<n8n-card :class="[$style.emptyStateCard, 'mr-s']" hoverable @click="addWorkflow">
|
||||
<n8n-icon :class="$style.emptyStateCardIcon" icon="file" />
|
||||
<n8n-text size="large" class="mt-xs" color="text-base">
|
||||
{{ $locale.baseText('workflows.empty.startFromScratch') }}
|
||||
</n8n-text>
|
||||
</n8n-card>
|
||||
<n8n-card :class="$style.emptyStateCard" hoverable @click="goToTemplates">
|
||||
<n8n-icon :class="$style.emptyStateCardIcon" icon="box-open" />
|
||||
<n8n-text size="large" class="mt-xs" color="text-base">
|
||||
{{ $locale.baseText('workflows.empty.browseTemplates') }}
|
||||
</n8n-text>
|
||||
</n8n-card>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:filters="{ setKeyValue }">
|
||||
<div class="mb-s" v-if="areTagsEnabled">
|
||||
<n8n-input-label
|
||||
:label="$locale.baseText('workflows.filters.tags')"
|
||||
:bold="false"
|
||||
size="small"
|
||||
color="text-base"
|
||||
class="mb-3xs"
|
||||
/>
|
||||
<TagsDropdown
|
||||
:placeholder="$locale.baseText('workflowOpen.filterWorkflows')"
|
||||
:currentTagIds="filters.tags"
|
||||
:createEnabled="false"
|
||||
@update="setKeyValue('tags', $event)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</resources-list-layout>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {showMessage} from '@/components/mixins/showMessage';
|
||||
import mixins from 'vue-typed-mixins';
|
||||
|
||||
import SettingsView from './SettingsView.vue';
|
||||
import ResourcesListLayout from "@/components/layouts/ResourcesListLayout.vue";
|
||||
import PageViewLayout from "@/components/layouts/PageViewLayout.vue";
|
||||
import PageViewLayoutList from "@/components/layouts/PageViewLayoutList.vue";
|
||||
import WorkflowCard from "@/components/WorkflowCard.vue";
|
||||
import TemplateCard from "@/components/TemplateCard.vue";
|
||||
import { debounceHelper } from '@/components/mixins/debounce';
|
||||
import {VIEWS} from '@/constants';
|
||||
import Vue from "vue";
|
||||
import {ITag, IUser, IWorkflowDb} from "@/Interface";
|
||||
import TagsDropdown from "@/components/TagsDropdown.vue";
|
||||
|
||||
type IResourcesListLayoutInstance = Vue & { sendFiltersTelemetry: (source: string) => void };
|
||||
|
||||
export default mixins(
|
||||
showMessage,
|
||||
debounceHelper,
|
||||
).extend({
|
||||
name: 'SettingsPersonalView',
|
||||
components: {
|
||||
ResourcesListLayout,
|
||||
TemplateCard,
|
||||
PageViewLayout,
|
||||
PageViewLayoutList,
|
||||
SettingsView,
|
||||
WorkflowCard,
|
||||
TagsDropdown,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
filters: {
|
||||
search: '',
|
||||
ownedBy: '',
|
||||
sharedWith: '',
|
||||
tags: [] as string[],
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
currentUser(): IUser {
|
||||
return this.$store.getters['users/currentUser'];
|
||||
},
|
||||
areTagsEnabled(): boolean {
|
||||
return this.$store.getters['settings/areTagsEnabled'];
|
||||
},
|
||||
allWorkflows(): IWorkflowDb[] {
|
||||
return this.$store.getters['allWorkflows'];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
addWorkflow() {
|
||||
this.$router.push({ name: VIEWS.NEW_WORKFLOW });
|
||||
|
||||
this.$telemetry.track('User clicked add workflow button', {
|
||||
source: 'Workflows list',
|
||||
});
|
||||
},
|
||||
goToTemplates() {
|
||||
this.$router.push({ name: VIEWS.TEMPLATES });
|
||||
},
|
||||
async initialize() {
|
||||
this.$store.dispatch('users/fetchUsers'); // Can be loaded in the background, used for filtering
|
||||
|
||||
return await Promise.all([
|
||||
this.$store.dispatch('fetchAllWorkflows'),
|
||||
this.$store.dispatch('fetchActiveWorkflows'),
|
||||
]);
|
||||
},
|
||||
onClickTag(tagId: string, event: PointerEvent) {
|
||||
if (!this.filters.tags.includes(tagId)) {
|
||||
this.filters.tags.push(tagId);
|
||||
}
|
||||
},
|
||||
onFilter(resource: IWorkflowDb, filters: { tags: string[]; search: string; }, matches: boolean): boolean {
|
||||
if (this.areTagsEnabled && filters.tags.length > 0) {
|
||||
matches = matches && filters.tags.every(
|
||||
(tag) => (resource.tags as ITag[])?.find((resourceTag) => typeof resourceTag === 'object' ? `${resourceTag.id}` === `${tag}` : `${resourceTag}` === `${tag}`),
|
||||
);
|
||||
}
|
||||
|
||||
return matches;
|
||||
},
|
||||
sendFiltersTelemetry(source: string) {
|
||||
(this.$refs.layout as IResourcesListLayoutInstance).sendFiltersTelemetry(source);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'filters.tags'() {
|
||||
this.sendFiltersTelemetry('tags');
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('users/showPersonalizationSurvey');
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.emptyStateCard {
|
||||
width: 192px;
|
||||
text-align: center;
|
||||
display: inline-flex;
|
||||
height: 230px;
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emptyStateCardIcon {
|
||||
font-size: 48px;
|
||||
|
||||
svg {
|
||||
width: 48px!important;
|
||||
color: var(--color-foreground-dark);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user