mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 10:02:05 +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
@@ -1,66 +1,240 @@
|
||||
<template>
|
||||
<n8n-card
|
||||
:class="$style.card"
|
||||
v-on="$listeners"
|
||||
:class="$style.cardLink"
|
||||
@click="onClick"
|
||||
>
|
||||
<template #header v-if="!loading">
|
||||
<span
|
||||
v-text="title"
|
||||
:class="$style.title"
|
||||
/>
|
||||
</template>
|
||||
<n8n-loading :loading="loading" :rows="3" variant="p" />
|
||||
<template #footer v-if="!loading">
|
||||
<slot name="footer" />
|
||||
</template>
|
||||
<template #header>
|
||||
<n8n-heading tag="h2" bold class="ph-no-capture" :class="$style.cardHeading">
|
||||
{{ data.name }}
|
||||
</n8n-heading>
|
||||
</template>
|
||||
<div :class="$style.cardDescription">
|
||||
<n8n-text color="text-light" size="small">
|
||||
<span v-show="data">{{$locale.baseText('workflows.item.updated')}} <time-ago :date="data.updatedAt" /> | </span>
|
||||
<span v-show="data" class="mr-2xs">{{$locale.baseText('workflows.item.created')}} {{ formattedCreatedAtDate }} </span>
|
||||
<span v-if="areTagsEnabled && data.tags && data.tags.length > 0" v-show="data">
|
||||
<n8n-tags
|
||||
:tags="data.tags"
|
||||
:truncateAt="3"
|
||||
truncate
|
||||
@click="onClickTag"
|
||||
/>
|
||||
</span>
|
||||
</n8n-text>
|
||||
</div>
|
||||
<template #append>
|
||||
<div :class="$style.cardActions">
|
||||
<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]" v-show="false">
|
||||
<n8n-badge
|
||||
v-if="credentialPermissions.isOwner"
|
||||
class="mr-xs"
|
||||
theme="tertiary"
|
||||
bold
|
||||
>
|
||||
{{$locale.baseText('workflows.item.owner')}}
|
||||
</n8n-badge>
|
||||
</enterprise-edition>
|
||||
|
||||
<workflow-activator
|
||||
class="mr-s"
|
||||
:workflow-active="data.active"
|
||||
:workflow-id="data.id"
|
||||
ref="activator"
|
||||
/>
|
||||
|
||||
<n8n-action-toggle
|
||||
:actions="actions"
|
||||
theme="dark"
|
||||
@action="onAction"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</n8n-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { genericHelpers } from '@/components/mixins/genericHelpers';
|
||||
import mixins from 'vue-typed-mixins';
|
||||
import {IWorkflowDb, IUser, ITag} from "@/Interface";
|
||||
import {DUPLICATE_MODAL_KEY, EnterpriseEditionFeature, VIEWS} from '@/constants';
|
||||
import {showMessage} from "@/components/mixins/showMessage";
|
||||
import {getWorkflowPermissions, IPermissions} from "@/permissions";
|
||||
import dateformat from "dateformat";
|
||||
import { restApi } from '@/components/mixins/restApi';
|
||||
import WorkflowActivator from '@/components/WorkflowActivator.vue';
|
||||
import Vue from "vue";
|
||||
|
||||
export default mixins(genericHelpers).extend({
|
||||
name: 'Card',
|
||||
export const WORKFLOW_LIST_ITEM_ACTIONS = {
|
||||
OPEN: 'open',
|
||||
DUPLICATE: 'duplicate',
|
||||
DELETE: 'delete',
|
||||
};
|
||||
|
||||
export default mixins(
|
||||
showMessage,
|
||||
restApi,
|
||||
).extend({
|
||||
data() {
|
||||
return {
|
||||
EnterpriseEditionFeature,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
WorkflowActivator,
|
||||
},
|
||||
props: {
|
||||
loading: {
|
||||
type: Boolean,
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: (): IWorkflowDb => ({
|
||||
id: '',
|
||||
createdAt: '',
|
||||
updatedAt: '',
|
||||
active: false,
|
||||
connections: {},
|
||||
nodes: [],
|
||||
name: '',
|
||||
sharedWith: [],
|
||||
ownedBy: {} as IUser,
|
||||
}),
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
currentUser (): IUser {
|
||||
return this.$store.getters['users/currentUser'];
|
||||
},
|
||||
areTagsEnabled(): boolean {
|
||||
return this.$store.getters['settings/areTagsEnabled'];
|
||||
},
|
||||
credentialPermissions(): IPermissions {
|
||||
return getWorkflowPermissions(this.currentUser, this.data, this.$store);
|
||||
},
|
||||
actions(): Array<{ label: string; value: string; }> {
|
||||
return [
|
||||
{
|
||||
label: this.$locale.baseText('workflows.item.open'),
|
||||
value: WORKFLOW_LIST_ITEM_ACTIONS.OPEN,
|
||||
},
|
||||
{
|
||||
label: this.$locale.baseText('workflows.item.duplicate'),
|
||||
value: WORKFLOW_LIST_ITEM_ACTIONS.DUPLICATE,
|
||||
},
|
||||
].concat(this.credentialPermissions.delete ? [{
|
||||
label: this.$locale.baseText('workflows.item.delete'),
|
||||
value: WORKFLOW_LIST_ITEM_ACTIONS.DELETE,
|
||||
}]: []);
|
||||
},
|
||||
formattedCreatedAtDate(): string {
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
return dateformat(this.data.createdAt, `d mmmm${this.data.createdAt.startsWith(currentYear) ? '' : ', yyyy'}`);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async onClick(event?: PointerEvent) {
|
||||
if (event) {
|
||||
if ((this.$refs.activator as Vue)?.$el.contains(event.target as HTMLElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.metaKey || event.ctrlKey) {
|
||||
const route = this.$router.resolve({name: VIEWS.WORKFLOW, params: { name: this.data.id }});
|
||||
window.open(route.href, '_blank');
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.$router.push({
|
||||
name: VIEWS.WORKFLOW,
|
||||
params: { name: this.data.id },
|
||||
});
|
||||
},
|
||||
onClickTag(tagId: string, event: PointerEvent) {
|
||||
event.stopPropagation();
|
||||
|
||||
this.$emit('click:tag', tagId, event);
|
||||
},
|
||||
async onAction(action: string) {
|
||||
if (action === WORKFLOW_LIST_ITEM_ACTIONS.OPEN) {
|
||||
await this.onClick();
|
||||
} else if (action === WORKFLOW_LIST_ITEM_ACTIONS.DUPLICATE) {
|
||||
await this.$store.dispatch('ui/openModalWithData', {
|
||||
name: DUPLICATE_MODAL_KEY,
|
||||
data: {
|
||||
id: this.data.id,
|
||||
name: this.data.name,
|
||||
tags: (this.data.tags || []).map((tag: ITag) => tag.id),
|
||||
},
|
||||
});
|
||||
} else if (action === WORKFLOW_LIST_ITEM_ACTIONS.DELETE) {
|
||||
const deleteConfirmed = await this.confirmMessage(
|
||||
this.$locale.baseText(
|
||||
'mainSidebar.confirmMessage.workflowDelete.message',
|
||||
{ interpolate: { workflowName: this.data.name } },
|
||||
),
|
||||
this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.headline'),
|
||||
'warning',
|
||||
this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.confirmButtonText'),
|
||||
this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.cancelButtonText'),
|
||||
);
|
||||
|
||||
if (deleteConfirmed === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await this.restApi().deleteWorkflow(this.data.id);
|
||||
this.$store.commit('deleteWorkflow', this.data.id);
|
||||
} catch (error) {
|
||||
this.$showError(
|
||||
error,
|
||||
this.$locale.baseText('mainSidebar.showError.stopExecution.title'),
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// Reset tab title since workflow is deleted.
|
||||
this.$showMessage({
|
||||
title: this.$locale.baseText('mainSidebar.showMessage.handleSelect1.title'),
|
||||
type: 'success',
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.card {
|
||||
width: 240px !important;
|
||||
height: 140px;
|
||||
margin-right: var(--spacing-2xs);
|
||||
.cardLink {
|
||||
transition: box-shadow 0.3s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
margin-right: var(--spacing-5xs);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 4px rgba(68,28,23,0.07);
|
||||
}
|
||||
|
||||
> div {
|
||||
height: 100%;
|
||||
box-shadow: 0 2px 8px rgba(#441C17, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
.cardHeading {
|
||||
font-size: var(--font-size-s);
|
||||
line-height: var(--font-line-height-regular);
|
||||
font-weight: var(--font-weight-bold);
|
||||
overflow: hidden;
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.cardDescription {
|
||||
min-height: 19px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cardActions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user