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

packages/design-system/src/components/N8nCard/Card.stories.ts

@@ -19,6 +19,25 @@ export const Default: StoryFn = (args, {argTypes}) => ({
 	template: `<n8n-card v-bind="$props">This is a card.</n8n-card>`,
 });
 
+export const Hoverable: StoryFn = (args, {argTypes}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nCard,
+		N8nIcon,
+		N8nText,
+	},
+	template: `<div style="width: 140px; text-align: center;">
+		<n8n-card v-bind="$props">
+			<n8n-icon icon="plus" size="xlarge" />
+			<n8n-text size="large" class="mt-2xs">Add</n8n-text>
+		</n8n-card>
+	</div>`,
+});
+
+Hoverable.args = {
+	hoverable: true,
+};
+
 
 export const WithSlots: StoryFn = (args, {argTypes}) => ({
 	props: Object.keys(argTypes),

packages/design-system/src/components/N8nCard/Card.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="['card', $style.card]" v-on="$listeners">
+	<div :class="classes" v-on="$listeners">
 		<div :class="$style.icon" v-if="$slots.prepend">
 			<slot name="prepend"/>
 		</div>
@@ -26,6 +26,21 @@ import Vue from 'vue';
 export default Vue.extend({
 	name: 'n8n-card',
 	inheritAttrs: true,
+	props: {
+		hoverable: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	computed: {
+		classes(): Record<string, boolean> {
+			return {
+				card: true,
+				[this.$style.card]: true,
+				[this.$style.hoverable]: this.hoverable,
+			};
+		},
+	},
 });
 </script>
 
@@ -73,4 +88,17 @@ export default Vue.extend({
 	align-items: center;
 	margin-right: var(--spacing-s);
 }
+
+.hoverable {
+  cursor: pointer;
+  transition-property: border, color;
+  transition-duration: 0.3s;
+  transition-timing-function: ease;
+
+  &:hover,
+  &:focus {
+	color: var(--color-primary);
+	border-color: var(--color-primary);
+  }
+}
 </style>

packages/design-system/src/components/N8nCard/__tests__/__snapshots__/Card.spec.ts.snap

@@ -1,11 +1,11 @@
 // Vitest Snapshot v1
 
 exports[`components > N8nCard > should render correctly 1`] = `
-"<div class=\\"card _card_nk81s_1\\">
+"<div class=\\"card _card_10dnp_1\\">
   <!---->
-  <div class=\\"_content_nk81s_20\\">
+  <div class=\\"_content_10dnp_20\\">
     <!---->
-    <div class=\\"_body_nk81s_28\\">This is a card.</div>
+    <div class=\\"_body_10dnp_28\\">This is a card.</div>
     <!---->
   </div>
   <!---->
@@ -13,12 +13,12 @@ exports[`components > N8nCard > should render correctly 1`] = `
 `;
 
 exports[`components > N8nCard > should render correctly with header and footer 1`] = `
-"<div class=\\"card _card_nk81s_1\\">
+"<div class=\\"card _card_10dnp_1\\">
   <!---->
-  <div class=\\"_content_nk81s_20\\">
-    <div class=\\"_header_nk81s_12\\">Header</div>
-    <div class=\\"_body_nk81s_28\\">This is a card.</div>
-    <div class=\\"_footer_nk81s_13\\">Footer</div>
+  <div class=\\"_content_10dnp_20\\">
+    <div class=\\"_header_10dnp_12\\">Header</div>
+    <div class=\\"_body_10dnp_28\\">This is a card.</div>
+    <div class=\\"_footer_10dnp_13\\">Footer</div>
   </div>
   <!---->
 </div>"

packages/design-system/src/components/N8nInfoTip/__tests__/__snapshots__/InfoTip.spec.ts.snap

@@ -1,9 +1,9 @@
 // Vitest Snapshot v1
 
-exports[`N8nInfoTip > should render correctly as note 1`] = `"<div class=\\"n8n-info-tip _info_3egb8_33 _note_3egb8_16 _base_3egb8_1 _bold_3egb8_12\\"><span class=\\"_iconText_3egb8_28\\"><span class=\\"n8n-icon n8n-text _compact_91pa9_34 _size-medium_91pa9_19 _regular_91pa9_5\\"></span><span>Need help doing something?<a href=\\"/docs\\" target=\\"_blank\\">Open docs</a></span></span></div>"`;
+exports[`N8nInfoTip > should render correctly as note 1`] = `"<div class=\\"n8n-info-tip _info_3egb8_33 _note_3egb8_16 _base_3egb8_1 _bold_3egb8_12\\"><span class=\\"_iconText_3egb8_28\\"><span class=\\"n8n-icon n8n-text _compact_odhsl_34 _size-medium_odhsl_19 _regular_odhsl_5\\"></span><span>Need help doing something?<a href=\\"/docs\\" target=\\"_blank\\">Open docs</a></span></span></div>"`;
 
 exports[`N8nInfoTip > should render correctly as tooltip 1`] = `
 "<div class=\\"n8n-info-tip _info_3egb8_33 _tooltip_3egb8_23 _base_3egb8_1 _bold_3egb8_12\\">
-  <n8n-tooltip-stub justifybuttons=\\"flex-end\\" buttons=\\"\\" placement=\\"top\\"><span class=\\"_iconText_3egb8_28\\"><span class=\\"n8n-icon n8n-text _compact_91pa9_34 _size-medium_91pa9_19 _regular_91pa9_5\\"></span></span><span>Need help doing something?<a href=\\"/docs\\" target=\\"_blank\\">Open docs</a></span></n8n-tooltip-stub>
+  <n8n-tooltip-stub justifybuttons=\\"flex-end\\" buttons=\\"\\" placement=\\"top\\"><span class=\\"_iconText_3egb8_28\\"><span class=\\"n8n-icon n8n-text _compact_odhsl_34 _size-medium_odhsl_19 _regular_odhsl_5\\"></span></span><span>Need help doing something?<a href=\\"/docs\\" target=\\"_blank\\">Open docs</a></span></n8n-tooltip-stub>
 </div>"
 `;

packages/design-system/src/components/N8nLink/Link.vue

@@ -107,6 +107,11 @@ export default Vue.extend({
 	text-decoration: underline;
 }
 
+.text-underline {
+	composes: text;
+	text-decoration: underline;
+}
+
 .danger-underline {
 	composes: danger;
 	text-decoration: underline;

packages/design-system/src/components/N8nMenu/Menu.vue

@@ -73,7 +73,7 @@ export default Vue.extend({
 	},
 	data() {
 		return {
-			activeTab: '',
+			activeTab: this.value,
 		};
 	},
 	props: {
@@ -101,6 +101,10 @@ export default Vue.extend({
 		items: {
 			type: Array as PropType<IMenuItem[]>,
 		},
+		value: {
+			type: String,
+			default: '',
+		},
 	},
 	mounted() {
 		if (this.mode === 'router') {
@@ -112,6 +116,8 @@ export default Vue.extend({
 		} else {
 			this.activeTab =  this.items.length > 0 ? this.items[0].id : '';
 		}
+
+		this.$emit('input', this.activeTab);
 	},
 	computed: {
 		upperMenuItems(): IMenuItem[] {
@@ -127,6 +133,12 @@ export default Vue.extend({
 				this.activeTab = option;
 			}
 			this.$emit('select', option);
+			this.$emit('input', this.activeTab);
+		},
+	},
+	watch: {
+		value(value: string) {
+			this.activeTab = value;
 		},
 	},
 });
@@ -148,7 +160,7 @@ export default Vue.extend({
 
 	& > div > :global(.el-menu) {
 		background: none;
-		padding: 12px;
+		padding: var(--menu-padding, 12px);
 	}
 }
 

packages/design-system/src/components/N8nTag/Tag.vue

@@ -20,10 +20,16 @@ export default Vue.extend({
 <style lang="scss" module>
 .tag {
 	min-width: max-content;
-	padding: var(--spacing-4xs);
-	background-color: var(--color-foreground-base);
+	padding: 1px var(--spacing-4xs);
+	color: var(--color-text-dark);
+	background-color: var(--color-background-base);
 	border-radius: var(--border-radius-base);
 	font-size: var(--font-size-2xs);
 	cursor: pointer;
+	transition: background-color 0.3s ease;
+
+	&:hover {
+		background-color: hsl(var(--color-background-base-h), var(--color-background-base-s), calc(var(--color-background-base-l) - 4%));
+	}
 }
 </style>

packages/design-system/src/components/N8nTags/Tags.stories.js

@@ -33,3 +33,31 @@ Tags.args = {
 		},
 	],
 };
+
+
+export const Truncated = Template.bind({});
+Truncated.args = {
+	truncate: true,
+	tags: [
+		{
+			id: 1,
+			name: 'very long tag name',
+		},
+		{
+			id: 2,
+			name: 'tag1',
+		},
+		{
+			id: 3,
+			name: 'tag2 yo',
+		},
+		{
+			id: 4,
+			name: 'tag3',
+		},
+		{
+			id: 5,
+			name: 'tag4',
+		},
+	],
+};

packages/design-system/src/components/N8nTags/Tags.vue

@@ -1,21 +1,65 @@
 <template>
 	<div :class="['n8n-tags', $style.tags]">
-		<n8n-tag v-for="tag in tags" :key="tag.id" :text="tag.name" @click="$emit('click', tag.id, $event)"/>
+		<n8n-tag v-for="tag in visibleTags" :key="tag.id" :text="tag.name" @click="$emit('click', tag.id, $event)"/>
+		<n8n-link
+			v-if="truncate && !showAll && hiddenTagsLength > 0"
+			theme="text"
+			underline
+			size="small"
+			@click.stop.prevent="showAll = true"
+		>
+			{{ t('tags.showMore', hiddenTagsLength) }}
+		</n8n-link>
 	</div>
 </template>
 
 <script lang="ts">
 import N8nTag from '../N8nTag';
-import Vue from 'vue';
+import N8nLink from '../N8nLink';
+import Locale from "../../mixins/locale";
+import Vue, {PropType} from 'vue';
+import mixins from "vue-typed-mixins";
 
-export default Vue.extend({
+interface ITag {
+	id: string;
+	name: string;
+}
+
+export default mixins(Locale).extend({
 	name: 'n8n-tags',
 	components: {
 		N8nTag,
+		N8nLink,
+	},
+	data() {
+		return {
+			showAll: false,
+		};
 	},
 	props: {
 		tags: {
-			type: Array,
+			type: Array as PropType<ITag[]>,
+			default: () => [],
+		},
+		truncate: {
+			type: Boolean,
+			default: false,
+		},
+		truncateAt: {
+			type: Number,
+			default: 3,
+		},
+	},
+	computed: {
+		visibleTags(): ITag[] {
+			if (this.truncate && !this.showAll && this.tags.length > this.truncateAt) {
+				return this.tags.slice(0, this.truncateAt);
+			}
+
+			return this.tags;
+		},
+		hiddenTagsLength(): number {
+			return this.tags.length - this.truncateAt;
 		},
 	},
 });
@@ -23,22 +67,24 @@ export default Vue.extend({
 
 <style lang="scss" module>
 .tags {
-	display: flex;
+	display: inline-flex;
 	flex-wrap: wrap;
-  overflow-x: scroll;
+	align-items: center;
+	overflow-x: scroll;
 
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  &::-webkit-scrollbar {
-	display: none;
-  }
+	/* Hide scrollbar for Chrome, Safari and Opera */
+	&::-webkit-scrollbar {
+		display: none;
+	}
 
-  /* Hide scrollbar for IE, Edge and Firefox */
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+	/* Hide scrollbar for IE, Edge and Firefox */
+	-ms-overflow-style: none; /* IE and Edge */
+	scrollbar-width: none; /* Firefox */
 
+	margin-top: calc(var(--spacing-4xs) * -1); // Cancel out top margin of first tags row
 
 	* {
-		margin: 0 var(--spacing-4xs) var(--spacing-4xs) 0;
+		margin: var(--spacing-4xs) var(--spacing-4xs) 0 0;
 	}
 }
 </style>

packages/design-system/src/components/N8nText/Text.stories.js

@@ -13,7 +13,7 @@ export default {
 		color: {
 			control: {
 				type: 'select',
-				options: ['primary', 'text-dark', 'text-base', 'text-light', 'text-xlight'],
+				options: ['primary', 'text-dark', 'text-base', 'text-light', 'text-xlight', 'danger', 'success'],
 			},
 		},
 	},

packages/design-system/src/components/N8nText/Text.vue

@@ -21,7 +21,7 @@ export default Vue.extend({
 		},
 		color: {
 			type: String,
-			validator: (value: string): boolean => ['primary', 'text-dark', 'text-base', 'text-light', 'text-xlight', 'danger'].includes(value),
+			validator: (value: string): boolean => ['primary', 'text-dark', 'text-base', 'text-light', 'text-xlight', 'danger', 'success'].includes(value),
 		},
 		align: {
 			type: String,
@@ -122,6 +122,10 @@ export default Vue.extend({
 	color: var(--color-danger);
 }
 
+.success {
+	color: var(--color-success);
+}
+
 .align-left {
 	text-align: left;
 }

packages/design-system/src/components/N8nUserSelect/UserSelect.vue

@@ -1,5 +1,5 @@
 <template>
-	<el-select
+	<n8n-select
 		:value="value"
 		:filterable="true"
 		:filterMethod="setFilter"
@@ -16,16 +16,17 @@
 		<template #prefix v-if="$slots.prefix">
 			<slot name="prefix" />
 		</template>
-		<el-option
+		<n8n-option
 			v-for="user in sortedUsers"
 			:key="user.id"
 			:value="user.id"
 			:class="$style.itemContainer"
 			:label="getLabel(user)"
+			:disabled="user.disabled"
 		>
 			<n8n-user-info v-bind="user" :isCurrentUser="currentUserId === user.id" />
-		</el-option>
-	</el-select>
+		</n8n-option>
+	</n8n-select>
 </template>
 
 <script lang="ts">

packages/design-system/src/css/common/var.scss

@@ -759,7 +759,7 @@ $cascader-height: 200px;
 /* Switch
 -------------------------- */
 /// color||Color|0
-$switch-on-color: var(--color-primary);
+$switch-on-color: #13ce66;
 /// color||Color|0
 $switch-off-color: var(--color-text-light);
 /// fontSize||Font|1

packages/design-system/src/locale/lang/en.js

@@ -19,4 +19,5 @@ export default {
 	}`),
 	"formInput.validator.defaultPasswordRequirements": "8+ characters, at least 1 number and 1 capital letter",
 	"sticky.markdownHint": `You can style with <a href="https://docs.n8n.io/workflows/sticky-notes/" target="_blank">Markdown</a>`,
+	'tags.showMore': (count) => `+${count} more`,
 };

packages/editor-ui/src/Interface.ts

@@ -286,6 +286,8 @@ export interface IWorkflowDb {
 	settings?: IWorkflowSettings;
 	tags?: ITag[] | string[]; // string[] when store or requested, ITag[] from API response
 	pinData?: IPinData;
+	sharedWith?: Array<Partial<IUser>>;
+	ownedBy?: Partial<IUser>;
 }
 
 // Identical to cli.Interfaces.ts
@@ -884,6 +886,7 @@ export interface IRootState {
 	urlBaseEditor: string;
 	urlBaseWebhook: string;
 	workflow: IWorkflowDb;
+	workflowsById: IWorkflowsMap;
 	sidebarMenuItems: IMenuItem[];
 	instanceId: string;
 	nodeMetadata: {[nodeName: string]: INodeMetadata};
@@ -918,6 +921,7 @@ export interface ITagsState {
 export interface IModalState {
 	open: boolean;
 	mode?: string | null;
+	data?: Record<string, unknown>;
 	activeId?: string | null;
 	curlCommand?: string;
 	httpNodeParameters?: string;
@@ -1055,9 +1059,12 @@ export interface IUsersState {
 	users: {[userId: string]: IUser};
 }
 
-export interface IWorkflowsState {
+export interface IWorkflowsMap {
+	[name: string]: IWorkflowDb;
 }
 
+export interface IWorkflowsState {}
+
 export interface ICommunityNodesState {
 	availablePackageCount: number;
 	installedPackages: ICommunityPackageMap;

packages/editor-ui/src/api/workflows.ts

@@ -9,3 +9,13 @@ export async function getNewWorkflow(context: IRestApiContext, name?: string) {
 	};
 }
 
+export async function getWorkflows(context: IRestApiContext, filter?: object) {
+	const sendData = filter ? { filter } : undefined;
+
+	return await makeRestApiRequest(context, 'GET', `/workflows`, sendData);
+}
+
+export async function getActiveWorkflows(context: IRestApiContext) {
+	return await makeRestApiRequest(context, 'GET', `/active`);
+}
+

packages/editor-ui/src/components/CollectionCard.vue

@@ -16,7 +16,7 @@
 
 <script lang="ts">
 import { genericHelpers } from '@/components/mixins/genericHelpers';
-import Card from '@/components/WorkflowCard.vue';
+import Card from '@/components/CollectionWorkflowCard.vue';
 import mixins from 'vue-typed-mixins';
 import NodeList from '@/components/NodeList.vue';
 

packages/editor-ui/src/components/CollectionWorkflowCard.vue

@@ -0,0 +1,66 @@
+<template>
+	<n8n-card
+		:class="$style.card"
+		v-on="$listeners"
+	>
+		<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>
+	</n8n-card>
+</template>
+
+<script lang="ts">
+import { genericHelpers } from '@/components/mixins/genericHelpers';
+import mixins from 'vue-typed-mixins';
+
+export default mixins(genericHelpers).extend({
+	name: 'Card',
+	props: {
+		loading: {
+			type: Boolean,
+		},
+		title: {
+			type: String,
+		},
+	},
+});
+</script>
+
+<style lang="scss" module>
+.card {
+	width: 240px !important;
+	height: 140px;
+	margin-right: var(--spacing-2xs);
+	cursor: pointer;
+
+	&:last-child {
+		margin-right: var(--spacing-5xs);
+	}
+
+	&:hover {
+		box-shadow: 0 2px 4px rgba(68,28,23,0.07);
+	}
+
+	> div {
+		height: 100%;
+	}
+}
+
+.title {
+	display: -webkit-box;
+	-webkit-line-clamp: 4;
+	-webkit-box-orient: vertical;
+	font-size: var(--font-size-s);
+	line-height: var(--font-line-height-regular);
+	font-weight: var(--font-weight-bold);
+	overflow: hidden;
+	white-space: normal;
+}
+</style>

packages/editor-ui/src/components/CollectionsCarousel.vue

@@ -21,7 +21,7 @@
 <script lang="ts">
 import { PropType } from "vue";
 import { ITemplatesCollection } from "@/Interface";
-import Card from '@/components/WorkflowCard.vue';
+import Card from '@/components/CollectionWorkflowCard.vue';
 import CollectionCard from '@/components/CollectionCard.vue';
 import VueAgile from 'vue-agile';
 

packages/editor-ui/src/components/CredentialCard.vue

@@ -86,7 +86,9 @@ export default mixins(
 		},
 	},
 	computed: {
-		...mapGetters('users', ['currentUser']),
+		currentUser (): IUser {
+			return this.$store.getters['users/currentUser'];
+		},
 		credentialType(): ICredentialType {
 			return this.$store.getters['credentials/getCredentialTypeByName'](this.data.type);
 		},

packages/editor-ui/src/components/DuplicateWorkflowDialog.vue

@@ -47,15 +47,15 @@ import { showMessage } from "@/components/mixins/showMessage";
 import TagsDropdown from "@/components/TagsDropdown.vue";
 import Modal from "./Modal.vue";
 import { mapGetters } from "vuex";
+import {restApi} from "@/components/mixins/restApi";
+import {IWorkflowDb} from "@/Interface";
 
-export default mixins(showMessage, workflowHelpers).extend({
+export default mixins(showMessage, workflowHelpers, restApi).extend({
 	components: { TagsDropdown, Modal },
 	name: "DuplicateWorkflow",
-	props: ["modalName", "isActive"],
+	props: ["modalName", "isActive", "data"],
 	data() {
-		const currentTagIds = this.$store.getters[
-			"workflowTags"
-		] as string[];
+		const currentTagIds = this.data.tags;
 
 		return {
 			name: '',
@@ -68,7 +68,7 @@ export default mixins(showMessage, workflowHelpers).extend({
 		};
 	},
 	async mounted() {
-		this.$data.name = await this.$store.dispatch('workflows/getDuplicateCurrentWorkflowName');
+		this.name = await this.$store.dispatch('workflows/getDuplicateCurrentWorkflowName', this.data.name);
 		this.$nextTick(() => this.focusOnNameInput());
 	},
 	computed: {
@@ -113,21 +113,29 @@ export default mixins(showMessage, workflowHelpers).extend({
 				return;
 			}
 
-			const currentWorkflowId = this.$store.getters.workflowId;
+			const currentWorkflowId = this.data.id;
 
-			this.$data.isSaving = true;
+			this.isSaving = true;
 
-			const saved = await this.saveAsNewWorkflow({name, tags: this.currentTagIds, resetWebhookUrls: true, openInNewWindow: true, resetNodeIds: true});
+			const { createdAt, updatedAt, ...workflow } = await this.restApi().getWorkflow(this.data.id);
+			const saved = await this.saveAsNewWorkflow({
+				name,
+				data: workflow,
+				tags: this.currentTagIds,
+				resetWebhookUrls: true,
+				openInNewWindow: true,
+				resetNodeIds: true,
+			});
 
 			if (saved) {
 				this.closeDialog();
 				this.$telemetry.track('User duplicated workflow', {
 					old_workflow_id: currentWorkflowId,
-					workflow_id: this.$store.getters.workflowId,
+					workflow_id: this.data.id,
 				});
 			}
 
-			this.$data.isSaving = false;
+			this.isSaving = false;
 		},
 		closeDialog(): void {
 			this.modalBus.$emit("close");

packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue

@@ -62,8 +62,7 @@
 		<PushConnectionTracker class="actions">
 			<template>
 				<span class="activator">
-					<span>{{ $locale.baseText('workflowDetails.active') + ':' }}</span>
-					<WorkflowActivator :workflow-active="isWorkflowActive" :workflow-id="currentWorkflowId"/>
+					<WorkflowActivator :workflow-active="isWorkflowActive" :workflow-id="currentWorkflowId" />
 				</span>
 				<SaveButton
 					type="secondary"
@@ -308,7 +307,14 @@ export default mixins(workflowHelpers, titleChange).extend({
 		async onWorkflowMenuSelect(action: string): Promise<void> {
 			switch (action) {
 				case WORKFLOW_MENU_ACTIONS.DUPLICATE: {
-					this.$store.dispatch('ui/openModal', DUPLICATE_MODAL_KEY);
+					await this.$store.dispatch('ui/openModalWithData', {
+						name: DUPLICATE_MODAL_KEY,
+						data: {
+							id: this.$store.getters.workflowId,
+							name: this.$store.getters.workflowName,
+							tags: this.$store.getters.workflowTags,
+						},
+					});
 					break;
 				}
 				case WORKFLOW_MENU_ACTIONS.DOWNLOAD: {
@@ -347,15 +353,15 @@ export default mixins(workflowHelpers, titleChange).extend({
 						this.$locale.baseText('mainSidebar.prompt.workflowUrl') + ':',
 						this.$locale.baseText('mainSidebar.prompt.importWorkflowFromUrl') + ':',
 						{
-							confirmButtonText: this.$locale.baseText('mainSidebar.prompt.import'),
-							cancelButtonText: this.$locale.baseText('mainSidebar.prompt.cancel'),
-							inputErrorMessage: this.$locale.baseText('mainSidebar.prompt.invalidUrl'),
-							inputPattern: /^http[s]?:\/\/.*\.json$/i,
-						},
-					) as MessageBoxInputData;
+								confirmButtonText: this.$locale.baseText('mainSidebar.prompt.import'),
+								cancelButtonText: this.$locale.baseText('mainSidebar.prompt.cancel'),
+								inputErrorMessage: this.$locale.baseText('mainSidebar.prompt.invalidUrl'),
+								inputPattern: /^http[s]?:\/\/.*\.json$/i,
+							},
+						) as MessageBoxInputData;
 
-					this.$root.$emit('importWorkflowUrl', { url: promptResponse.value });
-				} catch (e) {}
+						this.$root.$emit('importWorkflowUrl', { url: promptResponse.value });
+					} catch (e) {}
 					break;
 				}
 				case WORKFLOW_MENU_ACTIONS.IMPORT_FROM_FILE: {
@@ -465,7 +471,6 @@ $--header-spacing: 20px;
 
 .tags {
 	flex: 1;
-	padding-right: 20px;
 	margin-right: $--header-spacing;
 }
 

packages/editor-ui/src/components/MainSidebar.vue

@@ -78,7 +78,6 @@ import {
 	VERSIONS_MODAL_KEY,
 	EXECUTIONS_MODAL_KEY,
 	VIEWS,
-	WORKFLOW_OPEN_MODAL_KEY,
 } from '@/constants';
 import { userHelpers } from './mixins/userHelpers';
 import { debounceHelper } from './mixins/debounce';
@@ -174,20 +173,7 @@ export default mixins(
 						icon: 'network-wired',
 						label: this.$locale.baseText('mainSidebar.workflows'),
 						position: 'top',
-						activateOnRouteNames: [ VIEWS.NEW_WORKFLOW, VIEWS.WORKFLOWS, VIEWS.WORKFLOW ],
-						children: [
-							{
-								id: 'workflow',
-								label: this.$locale.baseText('mainSidebar.new'),
-								icon: 'file',
-								activateOnRouteNames: [ VIEWS.NEW_WORKFLOW ],
-							},
-							{
-								id: 'workflow-open',
-								label: this.$locale.baseText('mainSidebar.open'),
-								icon: 'folder-open',
-							},
-						],
+						activateOnRouteNames: [ VIEWS.WORKFLOWS ],
 					},
 					{
 						id: 'templates',
@@ -333,12 +319,10 @@ export default mixins(
 			},
 			async handleSelect (key: string) {
 				switch (key) {
-					case 'workflow': {
-						await this.createNewWorkflow();
-						break;
-					}
-					case 'workflow-open': {
-						this.$store.dispatch('ui/openModal', WORKFLOW_OPEN_MODAL_KEY);
+					case 'workflows': {
+						if (this.$router.currentRoute.name !== VIEWS.WORKFLOWS) {
+							this.$router.push({name: VIEWS.WORKFLOWS});
+						}
 						break;
 					}
 					case 'templates': {

packages/editor-ui/src/components/ModalRoot.vue

@@ -8,6 +8,7 @@
 			:open="isOpen(name)"
 			:activeId="getActiveId(name)"
 			:mode="getMode(name)"
+			:data="getData(name)"
 		></slot>
 	</div>
 </template>
@@ -25,6 +26,9 @@ export default Vue.extend({
 		isOpen(name: string) {
 			return this.$store.getters['ui/isModalOpen'](name);
 		},
+		getData(name: string) {
+			return this.$store.getters['ui/getModalData'](name);
+		},
 		getMode(name: string) {
 			return this.$store.getters['ui/getModalMode'](name);
 		},

packages/editor-ui/src/components/Modals.vue

@@ -26,8 +26,9 @@
 		</ModalRoot>
 
 		<ModalRoot :name="DUPLICATE_MODAL_KEY">
-			<template v-slot:default="{ modalName, active }">
+			<template v-slot:default="{ modalName, active, data }">
 				<DuplicateWorkflowDialog
+					:data="data"
 					:isActive="active"
 					:modalName="modalName"
 				/>
@@ -52,10 +53,6 @@
 			</template>
 		</ModalRoot>
 
-		<ModalRoot :name="WORKFLOW_OPEN_MODAL_KEY">
-			<WorkflowOpen />
-		</ModalRoot>
-
 		<ModalRoot :name="WORKFLOW_SETTINGS_MODAL_KEY">
 			<WorkflowSettings />
 		</ModalRoot>
@@ -130,7 +127,6 @@ import {
 	VALUE_SURVEY_MODAL_KEY,
 	VERSIONS_MODAL_KEY,
 	WORKFLOW_ACTIVE_MODAL_KEY,
-	WORKFLOW_OPEN_MODAL_KEY,
 	WORKFLOW_SETTINGS_MODAL_KEY,
 	IMPORT_CURL_MODAL_KEY,
 } from '@/constants';
@@ -151,7 +147,6 @@ import TagsManager from "./TagsManager/TagsManager.vue";
 import UpdatesPanel from "./UpdatesPanel.vue";
 import ValueSurvey from "./ValueSurvey.vue";
 import WorkflowSettings from "./WorkflowSettings.vue";
-import WorkflowOpen from "./WorkflowOpen.vue";
 import DeleteUserModal from "./DeleteUserModal.vue";
 import ExecutionsList from "./ExecutionsList.vue";
 import ActivationModal from "./ActivationModal.vue";
@@ -179,7 +174,6 @@ export default Vue.extend({
 		UpdatesPanel,
 		ValueSurvey,
 		WorkflowSettings,
-		WorkflowOpen,
 		ImportCurlModal,
 	},
 	data: () => ({
@@ -197,7 +191,6 @@ export default Vue.extend({
 		INVITE_USER_MODAL_KEY,
 		TAGS_MANAGER_MODAL_KEY,
 		VERSIONS_MODAL_KEY,
-		WORKFLOW_OPEN_MODAL_KEY,
 		WORKFLOW_SETTINGS_MODAL_KEY,
 		VALUE_SURVEY_MODAL_KEY,
 		EXECUTIONS_MODAL_KEY,

packages/editor-ui/src/components/TagsDropdown.vue

@@ -245,6 +245,23 @@ $--max-input-height: 60px;
 </style>
 
 <style lang="scss">
+.tags-container {
+	.el-tag {
+		padding: 1px var(--spacing-4xs);
+		color: var(--color-text-dark);
+		background-color: var(--color-background-base);
+		border-radius: var(--border-radius-base);
+		font-size: var(--font-size-2xs);
+		border: 0;
+
+		.el-tag__close {
+			max-height: 14px;
+			max-width: 14px;
+			line-height: 14px;
+		}
+	}
+}
+
 .tags-dropdown {
 	$--item-font-size: 14px;
 	$--item-line-height: 18px;

packages/editor-ui/src/components/WorkflowActivator.vue

@@ -1,5 +1,13 @@
 <template>
 	<div class="workflow-activator">
+		<div :class="$style.activeStatusText">
+			<n8n-text v-if="workflowActive" :color="couldNotBeStarted ? 'danger' : 'success'" size="small" bold>
+				{{ $locale.baseText('workflowActivator.active') }}
+			</n8n-text>
+			<n8n-text v-else color="text-base" size="small" bold>
+				{{ $locale.baseText('workflowActivator.inactive') }}
+			</n8n-text>
+		</div>
 		<n8n-tooltip :disabled="!disabled" placement="bottom">
 			<div slot="content">{{ $locale.baseText('workflowActivator.thisWorkflowHasNoTriggerNodes') }}</div>
 			<el-switch
@@ -113,10 +121,21 @@ export default mixins(
 	);
 </script>
 
-<style lang="scss" scoped>
-
-.workflow-activator {
+<style lang="scss" module>
+.activeStatusText {
+	width: 64px; // Required to avoid jumping when changing active state
+	padding-right: var(--spacing-2xs);
+	box-sizing: border-box;
 	display: inline-block;
+	text-align: right;
+}
+</style>
+
+<style lang="scss" scoped>
+.workflow-activator {
+	display: inline-flex;
+	flex-wrap: nowrap;
+	align-items: center;
 }
 
 .could-not-be-started {
@@ -128,5 +147,4 @@ export default mixins(
 ::v-deep .el-loading-spinner {
 	margin-top: -10px;
 }
-
 </style>

packages/editor-ui/src/components/WorkflowCard.vue

@@ -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>
+
+

packages/editor-ui/src/components/WorkflowOpen.vue

@@ -1,333 +0,0 @@
-<template>
-	<Modal
-		:name="WORKFLOW_OPEN_MODAL_KEY"
-		width="80%"
-		minWidth="620px"
-		:classic="true"
-	>
-			<template v-slot:header>
-				<div class="workflows-header">
-					<n8n-heading tag="h1" size="xlarge" class="title">
-						{{ $locale.baseText('workflowOpen.openWorkflow') }}
-					</n8n-heading>
-					<div class="tags-filter" v-if="areTagsEnabled">
-						<TagsDropdown
-							:placeholder="$locale.baseText('workflowOpen.filterWorkflows')"
-							:currentTagIds="filterTagIds"
-							:createEnabled="false"
-							@update="updateTagsFilter"
-							@esc="onTagsFilterEsc"
-							@blur="onTagsFilterBlur"
-						/>
-					</div>
-					<div class="search-filter">
-						<n8n-input :placeholder="$locale.baseText('workflowOpen.searchWorkflows')" ref="inputFieldFilter" v-model="filterText">
-							<font-awesome-icon slot="prefix" icon="search"></font-awesome-icon>
-						</n8n-input>
-					</div>
-					<div class="open-wf-button">
-						<n8n-button
-							:label="$locale.baseText('workflowOpen.newWFButton.label')"
-							:title="$locale.baseText('workflowOpen.newWFButton.title')"
-							size="large"
-							icon="plus"
-							type="primary"
-							@click="onNewWFClick"
-						/>
-					</div>
-				</div>
-			</template>
-
-			<template v-slot:content>
-				<el-table class="search-table" :data="filteredWorkflows" stripe @cell-click="openWorkflow" :default-sort = "{prop: 'updatedAt', order: 'descending'}" v-loading="isDataLoading">
-					<el-table-column property="name" :label="$locale.baseText('workflowOpen.name')" class-name="clickable" sortable>
-						<template slot-scope="scope">
-							<div class="ph-no-capture" :key="scope.row.id">
-								<span class="name">{{scope.row.name}}</span>
-								<TagsContainer v-if="areTagsEnabled" class="hidden-sm-and-down" :tagIds="getIds(scope.row.tags)" :limit="3" @click="onTagClick" :clickable="true" :hoverable="true" />
-							</div>
-						</template>
-					</el-table-column>
-					<el-table-column property="createdAt" :label="$locale.baseText('workflowOpen.created')" class-name="clickable" width="155" sortable></el-table-column>
-					<el-table-column property="updatedAt" :label="$locale.baseText('workflowOpen.updated')" class-name="clickable" width="155" sortable></el-table-column>
-					<el-table-column :label="$locale.baseText('workflowOpen.active')" width="75">
-						<template slot-scope="scope">
-							<workflow-activator :workflow-active="scope.row.active" :workflow-id="scope.row.id" @workflowActiveChanged="workflowActiveChanged" />
-						</template>
-					</el-table-column>
-				</el-table>
-			</template>
-	</Modal>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import mixins from 'vue-typed-mixins';
-
-import { ITag, IWorkflowShortResponse } from '@/Interface';
-
-import { restApi } from '@/components/mixins/restApi';
-import { genericHelpers } from '@/components/mixins/genericHelpers';
-import { workflowHelpers } from '@/components/mixins/workflowHelpers';
-import { showMessage } from '@/components/mixins/showMessage';
-
-import Modal from '@/components/Modal.vue';
-import TagsContainer from '@/components/TagsContainer.vue';
-import TagsDropdown from '@/components/TagsDropdown.vue';
-import WorkflowActivator from '@/components/WorkflowActivator.vue';
-import { convertToDisplayDate } from './helpers';
-import { mapGetters } from 'vuex';
-import { MODAL_CANCEL, MODAL_CLOSE, MODAL_CONFIRMED, VIEWS, WORKFLOW_OPEN_MODAL_KEY } from '../constants';
-import { titleChange } from './mixins/titleChange';
-
-export default mixins(
-	genericHelpers,
-	restApi,
-	showMessage,
-	workflowHelpers,
-	titleChange,
-).extend({
-	name: 'WorkflowOpen',
-	components: {
-		WorkflowActivator,
-		TagsContainer,
-		TagsDropdown,
-		Modal,
-	},
-	props: ['modalName'],
-	data () {
-		return {
-			filterText: '',
-			isDataLoading: false,
-			workflows: [] as IWorkflowShortResponse[],
-			filterTagIds: [] as string[],
-			prevFilterTagIds: [] as string[],
-			WORKFLOW_OPEN_MODAL_KEY,
-		};
-	},
-	computed: {
-		...mapGetters('settings', ['areTagsEnabled']),
-		filteredWorkflows (): IWorkflowShortResponse[] {
-			return this.workflows
-				.filter((workflow: IWorkflowShortResponse) => {
-					if (this.filterText && !workflow.name.toLowerCase().includes(this.filterText.toLowerCase())) {
-						return false;
-					}
-
-					if (this.filterTagIds.length === 0) {
-						return true;
-					}
-
-					if (!workflow.tags || workflow.tags.length === 0) {
-						return false;
-					}
-
-					return this.filterTagIds.reduce((accu: boolean, id: string) =>  accu && !!workflow.tags.find(tag => tag.id === id), true);
-				});
-		},
-	},
-	async mounted() {
-		this.filterText = '';
-		this.filterTagIds = [];
-
-		this.isDataLoading = true;
-		await this.loadActiveWorkflows();
-		await this.loadWorkflows();
-		this.isDataLoading = false;
-
-		Vue.nextTick(() => {
-			// Make sure that users can directly type in the filter
-			(this.$refs.inputFieldFilter as HTMLInputElement).focus();
-		});
-	},
-	methods: {
-		getIds(tags: ITag[] | undefined) {
-			return (tags || []).map((tag) => tag.id);
-		},
-		updateTagsFilter(tags: string[]) {
-			this.filterTagIds = tags;
-		},
-		onTagClick(tagId: string) {
-			if (tagId !== 'count' && !this.filterTagIds.includes(tagId)) {
-				this.filterTagIds.push(tagId);
-			}
-		},
-		async openWorkflow (data: IWorkflowShortResponse, column: any, cell: any, e: PointerEvent) { // tslint:disable-line:no-any
-			if (column.label !== 'Active') {
-
-				const currentWorkflowId = this.$store.getters.workflowId;
-
-				if (e.metaKey || e.ctrlKey) {
-					const route = this.$router.resolve({name: VIEWS.WORKFLOW, params: {name: data.id}});
-					window.open(route.href, '_blank');
-
-					return;
-				}
-
-				if (data.id === currentWorkflowId) {
-					this.$showMessage({
-						title: this.$locale.baseText('workflowOpen.showMessage.title'),
-						message: this.$locale.baseText('workflowOpen.showMessage.message'),
-						type: 'error',
-						duration: 1500,
-					});
-					// Do nothing if current workflow is the one user chose to open
-					return;
-				}
-
-				const result = this.$store.getters.getStateIsDirty;
-				if(result) {
-					const confirmModal = await this.confirmModal(
-						this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
-						this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
-						'warning',
-						this.$locale.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
-						this.$locale.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
-						true,
-					);
-
-					if (confirmModal === MODAL_CONFIRMED) {
-						const saved = await this.saveCurrentWorkflow({}, false);
-						if (saved) this.$store.dispatch('settings/fetchPromptsData');
-
-						this.$router.push({
-							name: VIEWS.WORKFLOW,
-							params: { name: data.id },
-						});
-					} else if (confirmModal === MODAL_CANCEL) {
-						this.$store.commit('setStateDirty', false);
-
-						this.$router.push({
-							name: VIEWS.WORKFLOW,
-							params: { name: data.id },
-						});
-					} else if (confirmModal === MODAL_CLOSE) {
-						return;
-					}
-				} else {
-					this.$router.push({
-						name: VIEWS.WORKFLOW,
-						params: { name: data.id },
-					});
-				}
-				this.$store.commit('ui/closeAllModals');
-			}
-		},
-		async loadWorkflows () {
-			try {
-				this.workflows = await this.restApi().getWorkflows();
-				this.workflows.forEach((workflowData: IWorkflowShortResponse) => {
-					workflowData.createdAt = convertToDisplayDate(workflowData.createdAt as number);
-					workflowData.updatedAt = convertToDisplayDate(workflowData.updatedAt as number);
-				});
-			} catch (error) {
-				this.$showError(
-					error,
-					this.$locale.baseText('workflowOpen.showError.title'),
-				);
-			}
-		},
-		async loadActiveWorkflows () {
-			try {
-				const activeWorkflows = await this.restApi().getActiveWorkflows();
-				this.$store.commit('setActiveWorkflows', activeWorkflows);
-			} catch (error) {
-				this.$showError(
-					error,
-					this.$locale.baseText('workflowOpen.couldNotLoadActiveWorkflows'),
-				);
-			}
-		},
-		async onNewWFClick () {
-			const result = this.$store.getters.getStateIsDirty;
-			if(result) {
-				const confirmModal = await this.confirmModal(
-					this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
-					this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
-					'warning',
-					this.$locale.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
-					this.$locale.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
-					true,
-				);
-				if (confirmModal === MODAL_CONFIRMED) {
-					const saved = await this.saveCurrentWorkflow({}, false);
-					if (saved) this.$store.dispatch('settings/fetchPromptsData');
-					if (this.$router.currentRoute.name === VIEWS.NEW_WORKFLOW) {
-						this.$root.$emit('newWorkflow');
-					} else {
-						this.$router.push({ name: VIEWS.NEW_WORKFLOW });
-					}
-					this.$showMessage({
-						title: this.$locale.baseText('mainSidebar.showMessage.handleSelect2.title'),
-						type: 'success',
-					});
-				} else if (confirmModal === MODAL_CANCEL) {
-					this.$store.commit('setStateDirty', false);
-					if (this.$router.currentRoute.name === VIEWS.NEW_WORKFLOW) {
-						this.$root.$emit('newWorkflow');
-					} else {
-						this.$router.push({ name: VIEWS.NEW_WORKFLOW });
-					}
-					this.$showMessage({
-						title: this.$locale.baseText('mainSidebar.showMessage.handleSelect2.title'),
-						type: 'success',
-					});
-				} else if (confirmModal === MODAL_CLOSE) {
-					return;
-				}
-			} else {
-				if (this.$router.currentRoute.name !== VIEWS.NEW_WORKFLOW) {
-					this.$router.push({ name: VIEWS.NEW_WORKFLOW });
-				}
-				this.$showMessage({
-					title: this.$locale.baseText('mainSidebar.showMessage.handleSelect3.title'),
-					type: 'success',
-				});
-			}
-			this.$titleReset();
-			this.$store.commit('ui/closeModal', WORKFLOW_OPEN_MODAL_KEY);
-		},
-		workflowActiveChanged (data: { id: string, active: boolean }) {
-			for (const workflow of this.workflows) {
-				if (workflow.id === data.id) {
-					workflow.active = data.active;
-				}
-			}
-		},
-		onTagsFilterBlur() {
-			this.prevFilterTagIds = this.filterTagIds;
-		},
-		onTagsFilterEsc() {
-			// revert last applied tags
-			this.filterTagIds = this.prevFilterTagIds;
-		},
-	},
-});
-</script>
-
-<style scoped lang="scss">
-.workflows-header {
-	display: flex;
-
-	> *:first-child {
-		flex-grow: 1;
-	}
-
-	.search-filter {
-		margin-left: 12px;
-		margin-right: 24px;
-		min-width: 160px;
-	}
-
-	.tags-filter {
-		flex-grow: 1;
-		max-width: 270px;
-		min-width: 220px;
-	}
-}
-
-.search-table .name {
-	font-weight: 400;
-	margin-right: 10px;
-}
-</style>

packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue

@@ -0,0 +1,173 @@
+<template>
+	<n8n-popover
+		trigger="click"
+	>
+		<template slot="reference">
+			<n8n-button
+				icon="filter"
+				type="tertiary"
+				size="medium"
+				:active="hasFilters"
+				:class="[$style['filter-button'], 'ml-2xs']"
+			>
+				<n8n-badge
+					v-show="filtersLength > 0"
+					theme="primary"
+					class="mr-4xs"
+				>
+					{{ filtersLength }}
+				</n8n-badge>
+				{{ $locale.baseText('forms.resourceFiltersDropdown.filters') }}
+			</n8n-button>
+		</template>
+		<div :class="$style['filters-dropdown']">
+			<slot :filters="value" :setKeyValue="setKeyValue" />
+			<enterprise-edition class="mb-s" :features="[EnterpriseEditionFeature.Sharing]" v-if="shareable">
+				<n8n-input-label
+					:label="$locale.baseText('forms.resourceFiltersDropdown.ownedBy')"
+					:bold="false"
+					size="small"
+					color="text-base"
+					class="mb-3xs"
+				/>
+				<n8n-user-select
+					:users="ownedByUsers"
+					:currentUserId="currentUser.id"
+					:value="value.ownedBy"
+					size="small"
+					@input="setKeyValue('ownedBy', $event)"
+				/>
+			</enterprise-edition>
+			<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]" v-if="shareable">
+				<n8n-input-label
+					:label="$locale.baseText('forms.resourceFiltersDropdown.sharedWith')"
+					:bold="false"
+					size="small"
+					color="text-base"
+					class="mb-3xs"
+				/>
+				<n8n-user-select
+					:users="sharedWithUsers"
+					:currentUserId="currentUser.id"
+					:value="value.sharedWith"
+					size="small"
+					@input="setKeyValue('sharedWith', $event)"
+				/>
+			</enterprise-edition>
+			<div :class="[$style['filters-dropdown-footer'], 'mt-s']" v-if="hasFilters">
+				<n8n-link @click="resetFilters">
+					{{ $locale.baseText('forms.resourceFiltersDropdown.reset') }}
+				</n8n-link>
+			</div>
+		</div>
+	</n8n-popover>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+import {EnterpriseEditionFeature} from "@/constants";
+import {IResource} from "@/components/layouts/ResourcesListLayout.vue";
+import {IUser} from "@/Interface";
+
+export type IResourceFiltersType = Record<string, boolean | string | string[]>;
+
+export default Vue.extend({
+	props: {
+		value: {
+			type: Object as PropType<IResourceFiltersType>,
+			default: () => ({}),
+		},
+		keys: {
+			type: Array as PropType<string[]>,
+			default: () => [],
+		},
+		shareable: {
+			type: Boolean,
+			default: true,
+		},
+		reset: {
+			type: Function as PropType<() => void>,
+		},
+	},
+	data() {
+		return {
+			EnterpriseEditionFeature,
+		};
+	},
+	computed: {
+		currentUser(): IUser {
+			return this.$store.getters['users/currentUser'];
+		},
+		allUsers(): IUser[] {
+			return this.$store.getters['users/allUsers'];
+		},
+		ownedByUsers(): IUser[] {
+			return this.allUsers.map((user) => user.id === this.value.sharedWith ? { ...user, disabled: true } : user);
+		},
+		sharedWithUsers(): IUser[] {
+			return this.allUsers.map((user) => user.id === this.value.ownedBy ? { ...user, disabled: true } : user);
+		},
+		filtersLength(): number {
+			let length = 0;
+
+			(this.keys as string[]).forEach((key) => {
+				if (key === 'search') {
+					return;
+				}
+
+				length += (Array.isArray(this.value[key]) ? this.value[key].length > 0 : this.value[key] !== '') ? 1 : 0;
+			});
+
+			return length;
+		},
+		hasFilters(): boolean {
+			return this.filtersLength > 0;
+		},
+	},
+	methods: {
+		setKeyValue(key: string, value: unknown) {
+			const filters = {
+				...this.value,
+				[key]: value,
+			};
+
+			this.$emit('input', filters);
+		},
+		resetFilters() {
+			if (this.reset) {
+				this.reset();
+			} else {
+				const filters = { ...this.value };
+
+				(this.keys as string[]).forEach((key) => {
+					filters[key] = Array.isArray(this.value[key]) ? [] : '';
+				});
+
+				this.$emit('input', filters);
+			}
+		},
+	},
+	watch: {
+		filtersLength(value: number) {
+			this.$emit('update:filtersLength', value);
+		},
+	},
+});
+</script>
+
+<style lang="scss" module>
+.filter-button {
+	height: 36px;
+	align-items: center;
+}
+
+.filters-dropdown {
+	width: 280px;
+}
+
+.filters-dropdown-footer {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+</style>

packages/editor-ui/src/components/forms/ResourceOwnershipSelect.ee.vue

@@ -0,0 +1,59 @@
+<template>
+		<n8n-menu
+			:items="menuItems"
+			mode="tabs"
+			:value="value ? 'owner' : 'all'"
+			@input="onSelectOwner"
+		/>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { IMenuItem } from 'n8n-design-system';
+
+export default Vue.extend({
+	props: {
+		value: {
+			type: Boolean,
+			default: true,
+		},
+		myResourcesLabel: {
+			type: String,
+			default: '',
+		},
+		allResourcesLabel: {
+			type: String,
+			default: '',
+		},
+	},
+	computed: {
+		menuItems(): IMenuItem[] {
+			return [
+				{
+					id: 'owner',
+					icon: 'user',
+					label: this.myResourcesLabel,
+					position: 'top',
+				},
+				{
+					id: 'all',
+					icon: 'globe-americas',
+					label: this.allResourcesLabel,
+					position: 'top',
+				},
+			];
+		},
+	},
+	methods: {
+		onSelectOwner(type: string) {
+			this.$emit('input', type === 'owner');
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.menu-container {
+	--menu-padding: 0;
+}
+</style>

packages/editor-ui/src/components/layouts/ResourcesListLayout.vue

@@ -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>
+

packages/editor-ui/src/components/mixins/workflowActivate.ts

@@ -35,7 +35,6 @@ export const workflowActivate = mixins(
 					}
 					currWorkflowId = this.$store.getters.workflowId as string;
 				}
-
 				const isCurrentWorkflow = currWorkflowId === this.$store.getters['workflowId'];
 
 				const activeWorkflows = this.$store.getters.getActiveWorkflows;

packages/editor-ui/src/components/mixins/workflowHelpers.ts

@@ -730,11 +730,11 @@ export const workflowHelpers = mixins(
 				}
 			},
 
-			async saveAsNewWorkflow ({name, tags, resetWebhookUrls, resetNodeIds, openInNewWindow}: {name?: string, tags?: string[], resetWebhookUrls?: boolean, openInNewWindow?: boolean, resetNodeIds?: boolean} = {}, redirect = true): Promise<boolean> {
+			async saveAsNewWorkflow ({ name, tags, resetWebhookUrls, resetNodeIds, openInNewWindow, data }: {name?: string, tags?: string[], resetWebhookUrls?: boolean, openInNewWindow?: boolean, resetNodeIds?: boolean, data?: IWorkflowDataUpdate} = {}, redirect = true): Promise<boolean> {
 				try {
 					this.$store.commit('addActiveAction', 'workflowSaving');
 
-					const workflowDataRequest: IWorkflowDataUpdate = await this.getWorkflowDataToSave();
+					const workflowDataRequest: IWorkflowDataUpdate = data || await this.getWorkflowDataToSave();
 					// make sure that the new ones are not active
 					workflowDataRequest.active = false;
 					const changedNodes = {} as IDataObject;
@@ -765,6 +765,9 @@ export const workflowHelpers = mixins(
 						workflowDataRequest.tags = tags;
 					}
 					const workflowData = await this.restApi().createNewWorkflow(workflowDataRequest);
+
+					this.$store.commit('addWorkflow', workflowData);
+
 					if (openInNewWindow) {
 						const routeData = this.$router.resolve({name: VIEWS.WORKFLOW, params: {name: workflowData.id}});
 						window.open(routeData.href, '_blank');

packages/editor-ui/src/constants.ts

@@ -30,7 +30,6 @@ export const DELETE_USER_MODAL_KEY = 'deleteUser';
 export const INVITE_USER_MODAL_KEY = 'inviteUser';
 export const DUPLICATE_MODAL_KEY = 'duplicate';
 export const TAGS_MANAGER_MODAL_KEY = 'tagsManager';
-export const WORKFLOW_OPEN_MODAL_KEY = 'workflowOpen';
 export const VERSIONS_MODAL_KEY = 'versions';
 export const WORKFLOW_SETTINGS_MODAL_KEY = 'settings';
 export const PERSONALIZATION_MODAL_KEY = 'personalization';

packages/editor-ui/src/modules/ui.ts

@@ -17,7 +17,6 @@ import {
 	VALUE_SURVEY_MODAL_KEY,
 	VERSIONS_MODAL_KEY,
 	WORKFLOW_ACTIVE_MODAL_KEY,
-	WORKFLOW_OPEN_MODAL_KEY,
 	WORKFLOW_SETTINGS_MODAL_KEY,
 	VIEWS,
 	ONBOARDING_CALL_SIGNUP_MODAL_KEY,
@@ -77,9 +76,6 @@ const module: Module<IUiState, IRootState> = {
 			[TAGS_MANAGER_MODAL_KEY]: {
 				open: false,
 			},
-			[WORKFLOW_OPEN_MODAL_KEY]: {
-				open: false,
-			},
 			[VALUE_SURVEY_MODAL_KEY]: {
 				open: false,
 			},
@@ -213,6 +209,9 @@ const module: Module<IUiState, IRootState> = {
 		getModalMode: (state: IUiState) => {
 			return (name: string) => state.modals[name].mode;
 		},
+		getModalData: (state: IUiState) => {
+			return (name: string) => state.modals[name].data;
+		},
 		sidebarMenuCollapsed: (state: IUiState): boolean => state.sidebarMenuCollapsed,
 		ndvSessionId: (state: IUiState): string => state.ndv.sessionId,
 		getPanelDisplayMode: (state: IUiState)  => {
@@ -276,6 +275,11 @@ const module: Module<IUiState, IRootState> = {
 			const { name, id } = params;
 			Vue.set(state.modals[name], 'activeId', id);
 		},
+		setModalData: (state: IUiState, params: { name: string, data: Record<string, unknown> }) => {
+			const { name, data } = params;
+
+			Vue.set(state.modals[name], 'data', data);
+		},
 		setCurlCommand: (state: IUiState, params: {name: string, command: string}) => {
 			const { name, command } = params;
 			Vue.set(state.modals[name], 'curlCommand', command);
@@ -379,6 +383,10 @@ const module: Module<IUiState, IRootState> = {
 		openModal: async (context: ActionContext<IUiState, IRootState>, modalKey: string) => {
 			context.commit('openModal', modalKey);
 		},
+		openModalWithData: async (context: ActionContext<IUiState, IRootState>, payload: { name: string, data: Record<string, unknown> }) => {
+			context.commit('setModalData', payload);
+			context.commit('openModal', payload.name);
+		},
 		openDeleteUserModal: async (context: ActionContext<IUiState, IRootState>, { id }: {id: string}) => {
 			context.commit('setActiveId', { name: DELETE_USER_MODAL_KEY, id });
 			context.commit('openModal', DELETE_USER_MODAL_KEY);

packages/editor-ui/src/modules/workflows.ts

@@ -27,9 +27,7 @@ const module: Module<IWorkflowsState, IRootState> = {
 			return workflowData;
 		},
 
-		getDuplicateCurrentWorkflowName: async (context: ActionContext<IWorkflowsState, IRootState>): Promise<string> => {
-			const currentWorkflowName = context.rootGetters.workflowName;
-
+		getDuplicateCurrentWorkflowName: async (context: ActionContext<IWorkflowsState, IRootState>, currentWorkflowName: string): Promise<string> => {
 			if (currentWorkflowName && (currentWorkflowName.length + DUPLICATE_POSTFFIX.length) >= MAX_WORKFLOW_NAME_LENGTH) {
 				return currentWorkflowName;
 			}

packages/editor-ui/src/permissions.ts

@@ -4,7 +4,7 @@
  * @usage getCredentialPermissions(user, credential).isOwner;
  */
 
-import {IUser, ICredentialsResponse, IRootState} from "@/Interface";
+import {IUser, ICredentialsResponse, IRootState, IWorkflowDb} from "@/Interface";
 import {Store} from "vuex";
 import {EnterpriseEditionFeature} from "@/constants";
 
@@ -69,3 +69,22 @@ export const getCredentialPermissions = (user: IUser, credential: ICredentialsRe
 
 	return parsePermissionsTable(user, table);
 };
+
+export const getWorkflowPermissions = (user: IUser, workflow: IWorkflowDb, store: Store<IRootState>) => {
+	const table: IPermissionsTable = [
+		// { name: UserRole.ResourceOwner, test: () => !!(workflow && workflow.ownedBy && workflow.ownedBy.id === user.id) || !store.getters['settings/isEnterpriseFeatureEnabled'](EnterpriseEditionFeature.Sharing) },
+		{ name: UserRole.ResourceOwner, test: () => true },
+		// { name: UserRole.ResourceReader, test: () => !!(workflow && workflow.sharedWith && workflow.sharedWith.find((sharee) => sharee.id === user.id)) },
+		{ name: UserRole.ResourceReader, test: () => true },
+		{ name: 'read', test: [UserRole.ResourceOwner, UserRole.InstanceOwner, UserRole.ResourceReader] },
+		{ name: 'save', test: [UserRole.ResourceOwner, UserRole.InstanceOwner] },
+		{ name: 'updateName', test: [UserRole.ResourceOwner, UserRole.InstanceOwner] },
+		{ name: 'updateConnection', test: [UserRole.ResourceOwner]  },
+		{ name: 'updateSharing', test: [UserRole.ResourceOwner]  },
+		{ name: 'updateNodeAccess', test: [UserRole.ResourceOwner]  },
+		{ name: 'delete', test: [UserRole.ResourceOwner, UserRole.InstanceOwner]  },
+		{ name: 'use', test: [UserRole.ResourceOwner, UserRole.ResourceReader]  },
+	];
+
+	return parsePermissionsTable(user, table);
+};

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -325,20 +325,15 @@
 	"credentials.empty.heading.userNotSetup": "Set up a credential",
 	"credentials.empty.description": "Credentials let workflows interact with your apps and services",
 	"credentials.empty.button": "Add first credential",
-	"credentials.menu.myCredentials": "My credentials",
-	"credentials.menu.allCredentials": "All credentials",
+	"credentials.menu.my": "My credentials",
+	"credentials.menu.all": "All credentials",
 	"credentials.item.open": "Open",
 	"credentials.item.delete": "Delete",
 	"credentials.item.updated": "Last updated",
 	"credentials.item.created": "Created",
 	"credentials.item.owner": "Owner",
 	"credentials.search.placeholder": "Search credentials...",
-	"credentials.filters": "Filters",
 	"credentials.filters.type": "Type",
-	"credentials.filters.ownedBy": "Owned by",
-	"credentials.filters.sharedWith": "Shared with",
-	"credentials.filters.apply": "Apply filters",
-	"credentials.filters.reset": "Reset all",
 	"credentials.filters.active": "Some credentials may be hidden since filters are applied.",
 	"credentials.filters.active.reset": "Remove filters",
 	"credentials.sort.lastUpdated": "Sort by last updated",
@@ -480,6 +475,10 @@
 	"forgotPassword.returnToSignIn": "Back to sign in",
 	"forgotPassword.sendingEmailError": "Problem sending email",
 	"forgotPassword.smtpErrorContactAdministrator": "Please contact your administrator (problem with your SMTP setup)",
+	"forms.resourceFiltersDropdown.filters": "Filters",
+	"forms.resourceFiltersDropdown.ownedBy": "Owned by",
+	"forms.resourceFiltersDropdown.sharedWith": "Shared with",
+	"forms.resourceFiltersDropdown.reset": "Reset all",
 	"generic.oauth1Api": "OAuth1 API",
 	"generic.oauth2Api": "OAuth2 API",
 	"genericHelpers.loading": "Loading",
@@ -1197,6 +1196,8 @@
 	"workflowActivator.workflowIsActive": "Workflow is already active",
 	"workflowActivator.activateWorkflow": "Activate workflow",
 	"workflowActivator.deactivateWorkflow": "Deactivate workflow",
+	"workflowActivator.active": "Active",
+	"workflowActivator.inactive": "Inactive",
 	"workflowActivator.showError.title": "Workflow could not be {newStateName}",
 	"workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.message": "Please resolve outstanding issues before you activate it",
 	"workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.title": "Problem activating workflow",
@@ -1280,6 +1281,39 @@
 	"workflowSettings.timeoutAfter": "Timeout After",
 	"workflowSettings.timeoutWorkflow": "Timeout Workflow",
 	"workflowSettings.timezone": "Timezone",
+	"workflows.heading": "Workflows",
+	"workflows.add": "Add Workflow",
+	"workflows.menu.my": "My workflows",
+	"workflows.menu.all": "All workflows",
+	"workflows.item.open": "Open",
+	"workflows.item.duplicate": "Duplicate",
+	"workflows.item.delete": "Delete",
+	"workflows.item.updated": "Last updated",
+	"workflows.item.created": "Created",
+	"workflows.item.owner": "Owner",
+	"workflows.search.placeholder": "Search workflows...",
+	"workflows.filters": "Filters",
+	"workflows.filters.tags": "Tags",
+	"workflows.filters.ownedBy": "Owned by",
+	"workflows.filters.sharedWith": "Shared with",
+	"workflows.filters.apply": "Apply filters",
+	"workflows.filters.reset": "Reset all",
+	"workflows.filters.active": "Some workflows may be hidden since filters are applied.",
+	"workflows.filters.active.reset": "Remove filters",
+	"workflows.sort.lastUpdated": "Sort by last updated",
+	"workflows.sort.lastCreated": "Sort by last created",
+	"workflows.sort.nameAsc": "Sort by name (A-Z)",
+	"workflows.sort.nameDesc": "Sort by name (Z-A)",
+	"workflows.noResults": "No workflows found",
+	"workflows.noResults.withSearch.switchToShared.preamble": "some workflows may be",
+	"workflows.noResults.withSearch.switchToShared.link": "hidden",
+	"workflows.noResults.switchToShared.preamble": "but there are some",
+	"workflows.noResults.switchToShared.link": "shared with you",
+	"workflows.empty.heading": "👋 Welcome {name}!",
+	"workflows.empty.heading.userNotSetup": "👋 Welcome!",
+	"workflows.empty.description": "Create your first workflow",
+	"workflows.empty.startFromScratch": "Start from scratch",
+	"workflows.empty.browseTemplates": "Browse templates",
 	"importCurlModal.title": "Import cURL command",
 	"importCurlModal.input.label": "cURL Command",
 	"importCurlModal.input.placeholder": "Paste the cURL command here",

packages/editor-ui/src/router.ts

@@ -20,13 +20,13 @@ import TemplatesCollectionView from '@/views/TemplatesCollectionView.vue';
 import TemplatesWorkflowView from '@/views/TemplatesWorkflowView.vue';
 import TemplatesSearchView from '@/views/TemplatesSearchView.vue';
 import CredentialsView from '@/views/CredentialsView.vue';
+import WorkflowsView from '@/views/WorkflowsView.vue';
 import { Store } from 'vuex';
 import { IPermissions, IRootState, IWorkflowsState } from './Interface';
 import { LOGIN_STATUS, ROLE } from './modules/userHelpers';
 import { RouteConfigSingleView } from 'vue-router/types/router';
 import { VIEWS } from './constants';
 import { store } from './store';
-import e from 'express';
 
 Vue.use(Router);
 
@@ -69,7 +69,7 @@ const router = new Router({
 			name: VIEWS.HOMEPAGE,
 			meta: {
 				getRedirect(store: Store<IRootState>) {
-					return { name: VIEWS.NEW_WORKFLOW };
+					return { name: VIEWS.WORKFLOWS };
 				},
 				permissions: {
 					allow: {
@@ -189,6 +189,21 @@ const router = new Router({
 				},
 			},
 		},
+		{
+			path: '/workflows',
+			name: VIEWS.WORKFLOWS,
+			components: {
+				default: WorkflowsView,
+				sidebar: MainSidebar,
+			},
+			meta: {
+				permissions: {
+					allow: {
+						loginStatus: [LOGIN_STATUS.LoggedIn],
+					},
+				},
+			},
+		},
 		{
 			path: '/workflow',
 			name: VIEWS.NEW_WORKFLOW,

packages/editor-ui/src/store.ts

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import Vuex from 'vuex';
+import Vuex, {ActionContext} from 'vuex';
 
 import {
 	PLACEHOLDER_EMPTY_WORKFLOW_ID,
@@ -32,6 +32,8 @@ import {
 	IWorkflowDb,
 	XYPosition,
 	IRestApiContext,
+	IWorkflowsState,
+	IWorkflowsMap,
 } from './Interface';
 
 import nodeTypes from './modules/nodeTypes';
@@ -48,6 +50,7 @@ import {dataPinningEventBus} from "@/event-bus/data-pinning-event-bus";
 import communityNodes from './modules/communityNodes';
 import nodeCreator from './modules/nodeCreator';
 import { isJsonKeyObject } from './utils';
+import {getActiveWorkflows, getWorkflows} from "@/api/workflows";
 import { getPairedItemsMapping } from './pairedItemUtils';
 
 Vue.use(Vuex);
@@ -100,6 +103,7 @@ const state: IRootState = {
 		tags: [],
 		pinData: {},
 	},
+	workflowsById: {},
 	sidebarMenuItems: [],
 	instanceId: '',
 	nodeMetadata: {},
@@ -181,6 +185,25 @@ export const store = new Vuex.Store({
 			Vue.set(state, 'activeExecutions', newActiveExecutions);
 		},
 
+		// Workflows
+		setWorkflows: (state: IRootState, workflows: IWorkflowDb[]) => {
+			state.workflowsById = workflows.reduce<IWorkflowsMap>((acc, workflow: IWorkflowDb) => {
+				if (workflow.id) {
+					acc[workflow.id] = workflow;
+				}
+
+				return acc;
+			}, {});
+		},
+		deleteWorkflow: (state: IRootState, id: string) => {
+			const { [id]: deletedWorkflow, ...workflows } = state.workflowsById;
+
+			state.workflowsById = workflows;
+		},
+		addWorkflow: (state: IRootState, workflow: IWorkflowDb) => {
+			Vue.set(state.workflowsById, workflow.id, workflow);
+		},
+
 		// Active Workflows
 		setActiveWorkflows(state, newActiveWorkflows: string[]) {
 			state.activeWorkflows = newActiveWorkflows;
@@ -191,12 +214,20 @@ export const store = new Vuex.Store({
 			if (index === -1) {
 				state.activeWorkflows.push(workflowId);
 			}
+
+			if (state.workflowsById[workflowId]) {
+				Vue.set(state.workflowsById[workflowId], 'active', true);
+			}
 		},
 		setWorkflowInactive(state, workflowId: string) {
 			const index = state.activeWorkflows.indexOf(workflowId);
 			if (index !== -1) {
 				state.activeWorkflows.splice(index, 1);
 			}
+
+			if (state.workflowsById[workflowId]) {
+				Vue.set(state.workflowsById[workflowId], 'active', false);
+			}
 		},
 		// Set state condition dirty or not
 		// ** Dirty: if current workflow state has been synchronized with database AKA has it been saved
@@ -831,6 +862,12 @@ export const store = new Vuex.Store({
 			return state.sessionId;
 		},
 
+		// Workflows
+		allWorkflows(state: IRootState): IWorkflowDb[] {
+			return Object.values(state.workflowsById)
+				.sort((a, b) => a.name.localeCompare(b.name));
+		},
+
 		// Active Workflows
 		getActiveWorkflows: (state): string[] => {
 			return state.activeWorkflows;
@@ -1011,4 +1048,18 @@ export const store = new Vuex.Store({
 			return state.sidebarMenuItems;
 		},
 	},
+	actions: {
+		fetchAllWorkflows: async (context: ActionContext<IWorkflowsState, IRootState>): Promise<IWorkflowDb[]> => {
+			const workflows = await getWorkflows(context.rootGetters.getRestApiContext);
+			context.commit('setWorkflows', workflows);
+
+			return workflows;
+		},
+		fetchActiveWorkflows: async (context: ActionContext<IWorkflowsState, IRootState>): Promise<string[]> => {
+			const activeWorkflows = await getActiveWorkflows(context.rootGetters.getRestApiContext);
+			context.commit('setActiveWorkflows', activeWorkflows);
+
+			return activeWorkflows;
+		},
+	},
 });

packages/editor-ui/src/views/CredentialsView.vue

@@ -1,229 +1,45 @@
 <template>
-	<page-view-layout>
-		<template #aside>
-			<div :class="[$style['heading-wrapper'], 'mb-xs']">
-				<n8n-heading size="2xlarge">
-					{{ $locale.baseText('credentials.heading') }}
-				</n8n-heading>
-			</div>
-
-			<div class="mt-xs mb-l">
-				<n8n-button size="large" block @click="addCredential">
-					{{ $locale.baseText('credentials.add') }}
-				</n8n-button>
-			</div>
-
-			<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]">
-				<div :class="$style.sidebarContainer">
-					<n8n-menu :items="menuItems" mode="tabs" @select="onSelectOwner" ref="selectOwnerMenu"></n8n-menu>
-				</div>
-			</enterprise-edition>
+	<resources-list-layout
+		ref="layout"
+		resource-key="credentials"
+		:resources="allCredentials"
+		:initialize="initialize"
+		:filters="filters"
+		:additional-filters-handler="onFilter"
+		@click:add="addCredential"
+		@update:filters="filters = $event"
+	>
+		<template v-slot="{ data }">
+			<credential-card :data="data"/>
 		</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="allCredentials.length === 0">
-				<n8n-action-box
-					emoji="👋"
-					:heading="$locale.baseText(currentUser.firstName ? 'credentials.empty.heading' : 'credentials.empty.heading.userNotSetup', {
-						interpolate: { name: currentUser.firstName }
-					})"
-					:description="$locale.baseText('credentials.empty.description')"
-					:buttonText="$locale.baseText('credentials.empty.button')"
-					buttonType="secondary"
-					@click="addCredential"
+		<template v-slot:filters="{ setKeyValue }">
+			<div class="mb-s">
+				<n8n-input-label
+					:label="$locale.baseText('credentials.filters.type')"
+					:bold="false"
+					size="small"
+					color="text-base"
+					class="mb-3xs"
 				/>
+				<n8n-select
+					:value="filters.type"
+					size="small"
+					multiple
+					filterable
+					ref="typeInput"
+					:class="$style['type-input']"
+					@input="setKeyValue('type', $event)"
+				>
+					<n8n-option
+						v-for="credentialType in allCredentialTypes"
+						:key="credentialType.name"
+						:value="credentialType.name"
+						:label="credentialType.displayName"
+					/>
+				</n8n-select>
 			</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('credentials.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="filters.sortBy"
-									size="medium"
-								>
-									<n8n-option value="lastUpdated" :label="$locale.baseText('credentials.sort.lastUpdated')"/>
-									<n8n-option value="lastCreated" :label="$locale.baseText('credentials.sort.lastCreated')"/>
-									<n8n-option value="nameAsc" :label="$locale.baseText('credentials.sort.nameAsc')"/>
-									<n8n-option value="nameDesc" :label="$locale.baseText('credentials.sort.nameDesc')"/>
-								</n8n-select>
-								<n8n-popover
-									trigger="click"
-								>
-									<template slot="reference">
-										<n8n-button
-											icon="filter"
-											type="tertiary"
-											size="medium"
-											:active="hasFilters"
-											:class="[$style['filter-button'], 'ml-2xs']"
-										>
-											<n8n-badge
-												v-show="filtersLength > 0"
-												theme="primary"
-												class="mr-4xs"
-											>
-												{{ filtersLength }}
-											</n8n-badge>
-											{{ $locale.baseText('credentials.filters') }}
-										</n8n-button>
-									</template>
-									<div :class="$style['filters-dropdown']">
-										<div class="mb-s">
-											<n8n-input-label
-												:label="$locale.baseText('credentials.filters.type')"
-												:bold="false"
-												size="small"
-												color="text-base"
-												class="mb-3xs"
-											/>
-											<n8n-select
-												v-model="filters.type"
-												size="small"
-												multiple
-												filterable
-												ref="typeInput"
-												:class="$style['type-input']"
-											>
-												<n8n-option
-													v-for="credentialType in allCredentialTypes"
-													:key="credentialType.name"
-													:value="credentialType.name"
-													:label="credentialType.displayName"
-												/>
-											</n8n-select>
-										</div>
-										<enterprise-edition class="mb-s" :features="[EnterpriseEditionFeature.Sharing]">
-											<n8n-input-label
-												:label="$locale.baseText('credentials.filters.ownedBy')"
-												:bold="false"
-												size="small"
-												color="text-base"
-												class="mb-3xs"
-											/>
-											<n8n-select
-												v-model="filters.ownedBy"
-												class="ph-no-capture"
-												:class="$style['user-select']"
-												size="small"
-												filterable
-											>
-												<template
-													v-for="user in allUsers"
-												>
-													<n8n-option
-														v-if="!user.isPending"
-														:key="user.id"
-														:value="user.id"
-														:label="user.fullName"
-														:disabled="user.id === filters.sharedWith"
-													>
-														<n8n-user-info
-															v-bind="user"
-															:class="$style['user-info']"
-															:isCurrentUser="user.id === currentUser.id"
-															:disabled="user.id === filters.sharedWith"
-														/>
-													</n8n-option>
-												</template>
-											</n8n-select>
-										</enterprise-edition>
-										<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]">
-											<n8n-input-label
-												:label="$locale.baseText('credentials.filters.sharedWith')"
-												:bold="false"
-												size="small"
-												color="text-base"
-												class="mb-3xs"
-											/>
-											<n8n-select
-												v-model="filters.sharedWith"
-												class="ph-no-capture"
-												:class="$style['user-select']"
-												size="small"
-												filterable
-											>
-												<template v-for="user in allUsers">
-													<n8n-option
-														v-if="!user.isPending"
-														:key="user.id"
-														:value="user.id"
-														:label="user.fullName"
-														:disabled="user.id === filters.ownedBy"
-													>
-														<n8n-user-info
-															v-bind="user"
-															:class="$style['user-info']"
-															:isCurrentUser="user.id === currentUser.id"
-															:disabled="user.id === filters.ownedBy"
-														/>
-													</n8n-option>
-												</template>
-											</n8n-select>
-										</enterprise-edition>
-										<div :class="[$style['filters-dropdown-footer'], 'mt-s']" v-if="hasFilters">
-											<n8n-link @click="resetFilters">
-												{{ $locale.baseText('credentials.filters.reset') }}
-											</n8n-link>
-										</div>
-									</div>
-								</n8n-popover>
-							</div>
-						</div>
-					</div>
-				</template>
-
-				<div v-show="hasFilters" class="mt-xs">
-					<n8n-info-tip :bold="false">
-						{{ $locale.baseText('credentials.filters.active') }}
-						<n8n-link @click="resetFilters" size="small">
-							{{ $locale.baseText('credentials.filters.active.reset') }}
-						</n8n-link>
-					</n8n-info-tip>
-				</div>
-
-				<div class="mt-xs mb-l">
-					<ul class="list-style-none" v-if="filteredAndSortedSubviewCredentials.length > 0">
-						<li v-for="credential in filteredAndSortedSubviewCredentials" :key="credential.id" class="mb-2xs">
-							<credential-card :data="credential"/>
-						</li>
-					</ul>
-					<n8n-text color="text-base" size="medium" v-else>
-						{{ $locale.baseText('credentials.noResults') }}
-						<template v-if="!hasFilters && filters.owner && credentialsNotOwned.length > 0">
-							<span v-if="!filters.search">
-								({{ $locale.baseText('credentials.noResults.switchToShared.preamble') }}
-								<n8n-link @click="setOwnerFilter(false)">{{
-										$locale.baseText('credentials.noResults.switchToShared.link')
-									}}</n8n-link>)
-							</span>
-							<span v-else>
-								({{ $locale.baseText('credentials.noResults.withSearch.switchToShared.preamble') }}
-								<n8n-link @click="setOwnerFilter(false)">{{
-										$locale.baseText('credentials.noResults.withSearch.switchToShared.link')
-									}}</n8n-link>)
-							</span>
-						</template>
-					</n8n-text>
-				</div>
-			</page-view-layout-list>
 		</template>
-	</page-view-layout>
+	</resources-list-layout>
 </template>
 
 <script lang="ts">
@@ -232,16 +48,19 @@ import {ICredentialsResponse, IUser} from '@/Interface';
 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 CredentialCard from "@/components/CredentialCard.vue";
-import {CREDENTIAL_SELECT_MODAL_KEY} from "@/constants";
 import {ICredentialType} from "n8n-workflow";
-import {EnterpriseEditionFeature} from "@/constants";
 import TemplateCard from "@/components/TemplateCard.vue";
-import Vue from "vue";
 import { debounceHelper } from '@/components/mixins/debounce';
-import { IMenuItem } from 'n8n-design-system';
+import ResourceOwnershipSelect from "@/components/forms/ResourceOwnershipSelect.ee.vue";
+import ResourceFiltersDropdown from "@/components/forms/ResourceFiltersDropdown.vue";
+import {CREDENTIAL_SELECT_MODAL_KEY} from '@/constants';
+import Vue from "vue";
+
+type IResourcesListLayoutInstance = Vue & { sendFiltersTelemetry: (source: string) => void };
 
 export default mixins(
 	showMessage,
@@ -249,49 +68,26 @@ export default mixins(
 ).extend({
 	name: 'SettingsPersonalView',
 	components: {
+		ResourcesListLayout,
 		TemplateCard,
 		PageViewLayout,
 		PageViewLayoutList,
 		SettingsView,
 		CredentialCard,
+		ResourceOwnershipSelect,
+		ResourceFiltersDropdown,
 	},
 	data() {
 		return {
-			loading: true,
 			filters: {
-				owner: true,
-				sortBy: 'lastUpdated',
 				search: '',
-				type: [] as string[],
 				ownedBy: '',
 				sharedWith: '',
+				type: '',
 			},
-			filtersInput: {
-				type: [] as string[],
-				ownedBy: '',
-				sharedWith: '',
-			},
-			resettingFilters: false,
-			EnterpriseEditionFeature,
 		};
 	},
 	computed: {
-		menuItems(): IMenuItem[] {
-			return [
-				{
-					id: 'owner',
-					icon: 'user',
-					label: this.$locale.baseText('credentials.menu.myCredentials'),
-					position: 'top',
-				},
-				{
-					id: 'all',
-					icon: 'globe-americas',
-					label: this.$locale.baseText('credentials.menu.allCredentials'),
-					position: 'top',
-				},
-			];
-		},
 		currentUser(): IUser {
 			return this.$store.getters['users/currentUser'];
 		},
@@ -307,88 +103,10 @@ export default mixins(
 		credentialTypesById(): Record<ICredentialType['name'], ICredentialType> {
 			return this.$store.getters['credentials/credentialTypesById'];
 		},
-		filtersLength(): number {
-			let length = 0;
-
-			if (this.filters.ownedBy) {
-				length += 1;
-			}
-			if (this.filters.sharedWith) {
-				length += 1;
-			}
-			if (this.filters.type.length > 0) {
-				length += 1;
-			}
-
-			return length;
-		},
-		subviewCredentials(): ICredentialsResponse[] {
-			return this.allCredentials.filter((credential: ICredentialsResponse) => {
-				if (this.filters.owner && this.$store.getters['settings/isEnterpriseFeatureEnabled'](EnterpriseEditionFeature.Sharing)) {
-					return !!(credential.ownedBy && credential.ownedBy.id === this.currentUser.id);
-				}
-
-				return true;
-			});
-		},
-		filteredAndSortedSubviewCredentials(): ICredentialsResponse[] {
-			const filtered: ICredentialsResponse[] = this.subviewCredentials.filter((credential: ICredentialsResponse) => {
-				let matches = true;
-
-				if (this.filters.ownedBy) {
-					matches = matches && !!(credential.ownedBy && credential.ownedBy.id === this.filters.ownedBy);
-				}
-
-				if (this.filters.sharedWith) {
-					matches = matches && !!(credential.sharedWith && credential.sharedWith.find((sharee) => sharee.id === this.filters.sharedWith));
-				}
-
-				if (this.filters.type.length > 0) {
-					matches = matches && this.filters.type.includes(credential.type);
-				}
-
-				if (this.filters.search) {
-					const searchString = this.filters.search.toLowerCase();
-
-					matches = matches && (
-						credential.name.toLowerCase().includes(searchString) ||
-						this.credentialTypesById[credential.type] && this.credentialTypesById[credential.type].displayName.toLowerCase().includes(searchString)
-					);
-				}
-
-				return matches;
-			});
-
-			return filtered.sort((a, b) => {
-				switch (this.filters.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.localeCompare(b.name);
-					case 'nameDesc':
-						return b.name.localeCompare(a.name);
-					default:
-						return 0;
-				}
-			});
-		},
-		credentialsNotOwned(): ICredentialsResponse[] {
-			return this.allCredentials.filter((credential: ICredentialsResponse) => {
-				return credential.ownedBy && credential.ownedBy.id !== this.currentUser.id;
-			});
-		},
-		hasFilters(): boolean {
-			return this.filters.type.length > 0 ||
-				this.filters.ownedBy !== '' ||
-				this.filters.sharedWith !== '';
-		},
 	},
 	methods: {
 		addCredential() {
 			this.$store.dispatch('ui/openModal', CREDENTIAL_SELECT_MODAL_KEY);
-			this.resetFilters();
 
 			this.$telemetry.track('User clicked add cred button', {
 				source: 'Creds list',
@@ -406,160 +124,36 @@ export default mixins(
 
 			await Promise.all(loadPromises);
 
-			this.loading = false;
-			this.$nextTick(this.focusSearchInput);
-
 			this.$store.dispatch('users/fetchUsers'); // Can be loaded in the background, used for filtering
 		},
-		resetFilters() {
-			this.filters.search = '';
-			this.filters.type = [];
-			this.filters.ownedBy = '';
-			this.filters.sharedWith = '';
-			this.filtersInput.type = [];
-			this.filtersInput.ownedBy = '';
-			this.filtersInput.sharedWith = '';
-
-			this.resettingFilters = true;
-			this.sendFiltersTelemetry('reset');
-		},
-		focusSearchInput() {
-			if (this.$refs.search) {
-				(this.$refs.search as Vue & { focus: () => void }).focus();
+		onFilter(resource: ICredentialsResponse, filters: { type: string[]; search: string; }, matches: boolean): boolean {
+			if (filters.type.length > 0) {
+				matches = matches && filters.type.includes(resource.type);
 			}
-		},
-		setOwnerFilter(active: boolean) {
-			(this.$refs.selectOwnerMenu as Vue & { $children: Array<{ activeIndex: string; }> }).$children[0].activeIndex = active ? 'owner' : 'all';
-			this.filters.owner = active;
-		},
-		onSelectOwner(type: string) {
-			this.filters.owner = type === 'owner';
-		},
-		sendSubviewTelemetry() {
-			this.$telemetry.track('User changed credentials sub view', {
-				sub_view: this.filters.owner ? 'My credentials' : 'All credentials',
-			});
-		},
-		sendSortingTelemetry() {
-			this.$telemetry.track('User changed sorting in cred list', {
-				sub_view: this.filters.owner ? 'My credentials' : 'All credentials',
-				sorting: this.filters.sortBy,
-			});
+
+			if (filters.search) {
+				const searchString = filters.search.toLowerCase();
+
+				matches = matches || (
+					this.credentialTypesById[resource.type] && this.credentialTypesById[resource.type].displayName.toLowerCase().includes(searchString)
+				);
+			}
+
+			return matches;
 		},
 		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> = [];
-
-			['ownedBy', 'sharedWith', 'type', 'search'].forEach((key) => {
-				if (filters[key]) {
-					filtersSet.push(key);
-					filterValues.push(key === 'search' ? null : filters[key]);
-				}
-			});
-
-			this.$telemetry.track('User set filters in cred list', {
-				filters_set: filtersSet,
-				filter_values: filterValues,
-				sub_view: this.filters.owner ? 'My credentials' : 'All credentials',
-				creds_total_in_view: this.subviewCredentials.length,
-				creds_after_filtering: this.filteredAndSortedSubviewCredentials.length,
-			});
+			(this.$refs.layout as IResourcesListLayoutInstance).sendFiltersTelemetry(source);
 		},
 	},
-	mounted() {
-		this.initialize();
-	},
 	watch: {
-		'filters.owner'() {
-			this.sendSubviewTelemetry();
-		},
-		'filters.ownedBy'(value) {
-			if (value) {
-				this.setOwnerFilter(false);
-			}
-			this.sendFiltersTelemetry('ownedBy');
-		},
-		'filters.sharedWith'() {
-			this.sendFiltersTelemetry('sharedWith');
-		},
 		'filters.type'() {
 			this.sendFiltersTelemetry('type');
 		},
-		'filters.search'() {
-			this.callDebounced('sendFiltersTelemetry', { debounceTime: 1000, trailing: true }, 'search');
-		},
-		'filters.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;
-}
-
-.sort-and-filter {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-between;
-}
-
-.filter-button {
-	height: 36px;
-	align-items: center;
-}
-
-.filters-dropdown {
-	width: 280px;
-}
-
-.filters-dropdown-footer {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-
-.header-loading {
-	height: 36px;
-}
-
-.card-loading {
-	height: 69px;
-}
-
-.user-select {
-	--select-option-line-height: auto;
-}
-
-.user-info {
-	margin: var(--spacing-2xs) 0;
-}
-
 .type-input {
 	--max-width: 265px;
 }

packages/editor-ui/src/views/NodeView.vue

@@ -142,7 +142,6 @@ import {
 	STICKY_NODE_TYPE,
 	VIEWS,
 	WEBHOOK_NODE_TYPE,
-	WORKFLOW_OPEN_MODAL_KEY,
 	TRIGGER_NODE_FILTER,
 } from '@/constants';
 import { copyPaste } from '@/components/mixins/copyPaste';
@@ -869,15 +868,6 @@ export default mixins(
 					e.preventDefault();
 
 					this.callDebounced('cutSelectedNodes', { debounceTime: 1000 });
-				} else if (e.key === 'o' && this.isCtrlKeyPressed(e) === true) {
-					// Open workflow dialog
-					e.stopPropagation();
-					e.preventDefault();
-					if (this.isDemo) {
-						return;
-					}
-
-					this.$store.dispatch('ui/openModal', WORKFLOW_OPEN_MODAL_KEY);
 				} else if (e.key === 'n' && this.isCtrlKeyPressed(e) === true && e.altKey === true) {
 					// Create a new workflow
 					e.stopPropagation();

packages/editor-ui/src/views/WorkflowsView.vue

@@ -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>
+
+