feat(editor): create new workflows page #4267

alexgrozav · 2022-10-05T10:05:51Z

No description provided.

…s for workflows view

mutdmour · 2022-10-05T15:54:21Z

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

-						break;
-					}
-					case 'workflow-open': {
-						this.$store.dispatch('ui/openModal', WORKFLOW_OPEN_MODAL_KEY);


reminder to also delete modal completely

mutdmour · 2022-10-06T09:07:51Z

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

+				});
+			}
+		},
+		onActiveChange (data: { id: string, active: boolean }) {


we should move this to workflow activator level.. that's where we are making the api request now

Wasn't entirely sure how it works. Thanks for pointing that out! Fixed now.

mutdmour · 2022-10-06T09:08:27Z

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

+					return;
+				}
+
+				if (event.metaKey || event.ctrlKey) {


❤️ thanks for keeping this

mutdmour · 2022-10-06T09:09:21Z

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

+		value: {
+			type: Object,
+			default: () => ({}),
+		},
+		keys: {
+			type: Array,
+			default: (): string[] => [],


would be great to add types here... as PropType<whatever>

Good point. Done!

mutdmour · 2022-10-06T09:11:02Z

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

@@ -0,0 +1,65 @@
+<template>
+	<n8n-select


this is not the same as n8n-user-select ?

Migrated to n8n-user-select (added support for disabled entries as well).

mutdmour · 2022-10-06T09:15:31Z

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

+
+import PageViewLayout from "@/components/layouts/PageViewLayout.vue";
+import PageViewLayoutList from "@/components/layouts/PageViewLayoutList.vue";
+import CredentialCard from "@/components/CredentialCard.vue";


is this still used?

Good catch, removed.

mutdmour · 2022-10-06T09:16:10Z

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

+	showMessage,
+	debounceHelper,
+).extend({
+	name: 'ResourcesListLayout',


reminder to write in kebab-case

For future reference: https://eslint.vuejs.org/rules/component-definition-name-casing.html

mutdmour · 2022-10-06T09:16:42Z

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

+				}
+			});
+
+			this.$telemetry.track('User set filters in cred list', {


should be refactored out..

mutdmour · 2022-10-06T09:19:23Z

packages/editor-ui/src/store.ts

@@ -185,12 +204,20 @@ export const store = new Vuex.Store({
 			if (index === -1) {
 				state.activeWorkflows.push(workflowId);
 			}
+
+			if (state.workflows[workflowId]) {
+				state.workflows[workflowId].active = true;


Vue.set for reactivity?

mutdmour · 2022-10-06T09:19:28Z

packages/editor-ui/src/store.ts

 		},
 		setWorkflowInactive(state, workflowId: string) {
 			const index = state.activeWorkflows.indexOf(workflowId);
 			if (index !== -1) {
 				state.activeWorkflows.splice(index, 1);
 			}
+
+			if (state.workflows[workflowId]) {
+				state.workflows[workflowId].active = false;


Vue.set for reactivity?

linear · 2022-10-06T09:21:43Z

N8N-4605

mutdmour · 2022-10-11T11:30:01Z

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

+			size="small"
+			@click.stop.prevent="showAll = true"
+		>
+			+{{ hiddenTagsLength }} more


Good point. Also added story for truncated tags.

mutdmour · 2022-10-11T11:34:15Z

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

@@ -725,15 +724,6 @@ export default mixins(
 					e.preventDefault();

 					this.callDebounced('cutSelectedNodes', { debounceTime: 1000 });
-				} else if (e.key === 'o' && this.isCtrlKeyPressed(e) === true) {


reminder to remind Deb to update docs

mutdmour · 2022-10-11T11:35:24Z

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

 				sub_view: this.getTelemetrySubview(),
 			});
 		},
 		sendSortingTelemetry() {
-			this.$telemetry.track('User changed sorting in cred list', {
+			this.$telemetry.track(`User changed sorting in ${this.resourceKey} list`, {


reminder to update telemetry table with new event and let david know....

Done. David is aware and agreed to the change.

mutdmour · 2022-10-11T11:37:46Z

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

@@ -151,3 +171,8 @@ export default Vue.extend({
 	align-items: center;
 }
 </style>
+
+<style lang="scss" scoped>


no closing tag here?

Forgot about this. Removed.

… whitespace

mutdmour · 2022-10-12T10:00:15Z

packages/cli/config/schema.ts

@@ -880,6 +880,7 @@ export const schema = {
 			sharing: {
 				format: Boolean,
 				default: false,
+				env: 'N8N_ENTERPRISE_FEATURES_SHARING',


I assume you did not mean to push this?

That's absolutely right, fixed.

…d status

janober · 2022-10-21T06:45:48Z

Got released with [email protected]

* 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

alexgrozav added 4 commits September 29, 2022 11:59

feat(editor): extract credentials view into reusable layout component…

cad2b89

…s for workflows view

feat(editor): add workflow card and start work on empty state

75ab4c9

chore: merge master into n8n-4605-create-layout-of-new-workflow-list

bd40d76

feat: add hoverable card and finish workflows empty state

9267bf7

alexgrozav added ui Enhancement in /editor-ui or /design-system n8n team Authored by the n8n team labels Oct 5, 2022

alexgrozav added 7 commits October 5, 2022 13:06

fix: undo workflows response interface changes

810400e

chore: fix linting issues.

fc16bd1

fix: remove enterprise sharing env schema

2a58fef

fix(editor): fix workflows resource view when sharing is enabled

9631518

fix: change owner tag design and order

b06c79f

feat: add personalization survey on workflows page

3483d62

fix: update component snapshots

955c8b5

mutdmour reviewed Oct 6, 2022

View reviewed changes

alexgrozav added 14 commits October 6, 2022 14:43

feat: refactored workflow card to use workflow-activator properly

1d5e300

fix: fix workflow activator and proptypes

dc68e50

fix: hide owner tag for workflow card until sharing is available

19a96e0

fix: fixed ownedBy and sharedWith appearing for workflows list

c6d1f80

feat: update tags component design

4027a50

refactor: change resource filter select to n8n-user-select

734d42d

fix: made telemetry messages reusable

da0a7fe

chore: remove unused import

f956db4

refactor: fix component name casing

20d75b6

refactor: use Vue.set to make workflow property reactive

caafde4

test: update design-system snapshots

9c6fd84

feat: add support for clicking on tags for filtering

ccfca45

chore: merge master into n8n-4605-create-layout-of-new-workflow-list

f89bee3

chore: fix tags linting issues

075b06c

mutdmour reviewed Oct 11, 2022

View reviewed changes

alexgrozav added 2 commits October 11, 2022 16:06

fix: fix resources list layout when title words are very long

c7e2851

refactor: add active and inactive status text to workflow activator

b40081c

alexgrozav changed the title ~~feat(editor): create new workflows page (N8N-4605)~~ feat(editor): create new workflows page Oct 11, 2022

alexgrozav added 3 commits October 11, 2022 17:19

fix: fix credentials and workflows sorting when name contains leading…

c118534

… whitespace

fix: remove wrongfully added style tag

b47185d

feat: add translations and storybook examples for truncated tags

b62044b

mutdmour reviewed Oct 12, 2022

View reviewed changes

alexgrozav added 9 commits October 12, 2022 13:40

fix: remove enterprise sharing env from schema

ae9b351

chore: merge master into n8n-4605-create-layout-of-new-workflow-list

515228e

refactor: fix workflows module and workflows field store naming conflict

df47cb5

fix: fix workflow activator wrapping

24ac2ac

feat: updated empty workflows list cards design

85bd0fe

Merge branch 'master' into n8n-4605-create-layout-of-new-workflow-list

4f6e2f5

feat: update workflow activator margins and workflow card

b73b3f0

feat: add duplicate workflow functionality and update tags

d024cf3

feat: fix duplicate workflow flow

bcc61f7

mutdmour previously approved these changes Oct 18, 2022

View reviewed changes

fix: fix status color for workflow activator with could not be starte…

3930bc6

…d status

alexgrozav dismissed mutdmour’s stale review via 3930bc6 October 18, 2022 12:39

alexgrozav added 2 commits October 18, 2022 15:43

fix: remove createdAt and updatedAt from workflow duplication

2a0cd68

chore: merge master

7956f21

mutdmour approved these changes Oct 18, 2022

View reviewed changes

alexgrozav merged commit be7aac3 into master Oct 18, 2022

alexgrozav deleted the n8n-4605-create-layout-of-new-workflow-list branch October 18, 2022 13:28

n8n-assistant bot added the Upcoming Release Will be part of the upcoming release label Oct 18, 2022

janober removed the Upcoming Release Will be part of the upcoming release label Oct 21, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(editor): create new workflows page #4267

feat(editor): create new workflows page #4267

alexgrozav commented Oct 5, 2022

mutdmour Oct 5, 2022

alexgrozav Oct 6, 2022

mutdmour Oct 6, 2022

alexgrozav Oct 6, 2022

mutdmour Oct 6, 2022

mutdmour Oct 6, 2022

alexgrozav Oct 6, 2022

mutdmour Oct 6, 2022

alexgrozav Oct 10, 2022

mutdmour Oct 6, 2022

alexgrozav Oct 10, 2022

mutdmour Oct 6, 2022

ivov Oct 6, 2022

alexgrozav Oct 10, 2022

mutdmour Oct 6, 2022

alexgrozav Oct 10, 2022

mutdmour Oct 6, 2022

alexgrozav Oct 10, 2022

mutdmour Oct 6, 2022

alexgrozav Oct 10, 2022

linear bot commented Oct 6, 2022

mutdmour Oct 11, 2022

alexgrozav Oct 11, 2022

mutdmour Oct 11, 2022

alexgrozav Oct 11, 2022

mutdmour Oct 11, 2022

alexgrozav Oct 11, 2022

mutdmour Oct 11, 2022

alexgrozav Oct 11, 2022

mutdmour Oct 12, 2022

alexgrozav Oct 12, 2022

janober commented Oct 21, 2022

feat(editor): create new workflows page #4267

feat(editor): create new workflows page #4267

Conversation

alexgrozav commented Oct 5, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

linear bot commented Oct 6, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

janober commented Oct 21, 2022