Individual Workflow Template Page / Part I

packages/design-system/src/components/N8nImage/Image.stories.js

@@ -0,0 +1,24 @@
+import N8nImage from './Image.vue';
+
+export default {
+  title: 'Atoms/Image',
+  component: N8nImage,
+	argTypes: {
+		images: {
+			control: {
+				type: 'array',
+			},
+		},
+	},
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: {
+    N8nImage,
+  },
+  template:
+    '<n8n-image v-bind="$props"></n8n-image>',
+});
+
+export const Image = Template.bind({});

packages/design-system/src/components/N8nImage/Image.vue

@@ -0,0 +1,37 @@
+<template functional>
+	<div :class="$style.image">
+		<img :srcset="$options.methods.getSrcset(props.images)" />
+	</div>
+</template>
+
+<script lang="ts">
+interface IProps {
+	url: string;
+	width: string;
+}
+
+export default {
+	name: 'n8n-image',
+	props: {
+		images: {
+			type: Array,
+		},
+	},
+	methods: {
+		getSrcset(images: IProps[]): string {
+			let srcset = '';
+			if (images) {
+				for (let i = 0; i < images.length; i++) {
+					srcset += images[i].url + ` ${images[i].width}w,`;
+				}
+			}
+			return srcset;
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+.image {
+}
+</style>

packages/design-system/src/components/N8nImage/index.js

@@ -0,0 +1,3 @@
+import Image from './Image.vue';
+
+export default Image;

packages/design-system/src/components/N8nTag/Tag.stories.js

@@ -0,0 +1,24 @@
+import N8nTag from './Tag.vue';
+
+export default {
+	title: 'Atoms/Tag',
+	component: N8nTag,
+	argTypes: {
+		tag: {
+			control: {
+				control: 'text',
+			},
+		},
+	},
+};
+
+const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nTag,
+	},
+	template:
+		'<n8n-tag v-bind="$props"></n8n-tag>',
+});
+
+export const Tag = Template.bind({});

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

@@ -0,0 +1,25 @@
+<template functional>
+	<div :class="$style.tag" v-text="props.tag" />
+</template>
+
+<script lang="ts">
+export default {
+	name: 'n8n-tag',
+	props: {
+		tag: {
+			type: String,
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+.tag {
+	width: fit-content;
+	margin-right: 4px;
+	padding: 3px 4px;
+	background-color: #dbdfe7;
+	border-radius: var(--border-radius-base);
+	font-size: 11px;
+}
+</style>

packages/design-system/src/components/N8nTag/index.js

@@ -0,0 +1,3 @@
+import Tag from './Tag.vue';
+
+export default Tag;

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

@@ -0,0 +1,24 @@
+import N8nTags from './Tags.vue';
+
+export default {
+  title: 'Atoms/Tags',
+  component: N8nTags,
+	argTypes: {
+		tags: {
+			control: {
+				type: 'array',
+			},
+		},
+	},
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: {
+    N8nTags,
+  },
+  template:
+    '<n8n-tags v-bind="$props"></n8n-tags>',
+});
+
+export const Tags = Template.bind({});

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

@@ -0,0 +1,27 @@
+<template functional>
+	<div :class="$style.tags">
+		<n8n-tag v-for="(tag, key) in props.tags" :key="'tag-' + key" :tag="tag.name" />
+	</div>
+</template>
+
+<script lang="ts">
+import N8nTag from '../N8nTag';
+
+export default {
+	name: 'n8n-tags',
+	components: {
+		N8nTag,
+	},
+	props: {
+		tags: {
+			type: Array,
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+.tags {
+	display: flex;
+}
+</style>

packages/design-system/src/components/N8nTags/index.js

@@ -0,0 +1,3 @@
+import Tags from './Tags.vue';
+
+export default Tags;

packages/design-system/src/components/index.js

@@ -1,6 +1,7 @@
 import N8nButton from './N8nButton';
 import N8nIcon from './N8nIcon';
 import N8nIconButton from './N8nIconButton';
+import N8nImage from './N8nImage';
 import N8nInput from './N8nInput';
 import N8nInfoTip from './N8nInfoTip';
 import N8nInputNumber from './N8nInputNumber';
@@ -11,6 +12,8 @@ import N8nMenuItem from './N8nMenuItem';
 import N8nSelect from './N8nSelect';
 import N8nSpinner from './N8nSpinner';
 import N8nSquareButton from './N8nSquareButton';
+import N8nTags from './N8nTags';
+import N8nTag from './N8nTag';
 import N8nText from './N8nText';
 import N8nTooltip from './N8nTooltip';
 import N8nOption from './N8nOption';
@@ -19,6 +22,7 @@ export {
 	N8nButton,
 	N8nIcon,
 	N8nIconButton,
+	N8nImage,
 	N8nInfoTip,
 	N8nInput,
 	N8nInputLabel,
@@ -29,6 +33,8 @@ export {
 	N8nSelect,
 	N8nSpinner,
 	N8nSquareButton,
+	N8nTags,
+	N8nTag,
 	N8nText,
 	N8nTooltip,
 	N8nOption,

packages/editor-ui/package.json

@@ -26,11 +26,17 @@
   },
   "dependencies": {
     "@fontsource/open-sans": "^4.5.0",
+    "@types/markdown-it": "^12.2.3",
+    "markdown-it": "^12.3.0",
+    "markdown-it-emoji": "^2.0.0",
+    "markdown-it-link-attributes": "^3.0.0",
+    "markdown-it-task-lists": "^2.1.1",
     "n8n-design-system": "~0.9.0",
     "timeago.js": "^4.0.2",
     "v-click-outside": "^3.1.2",
     "vue-fragment": "^1.5.2",
-    "vue-i18n": "^8.26.7"
+    "vue-i18n": "^8.26.7",
+    "xss": "^1.0.10"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.35",

packages/editor-ui/src/Interface.ts

@@ -511,6 +511,21 @@ export interface IN8nPromptResponse {
 	updated: boolean;
 }
 
+export interface IN8nTemplate {
+	id: string;
+	categories: ITemplateCategories[];
+	createdAt: string;
+	description: string;
+	image: ITemplateImage[];
+	mainImage: ITemplateMainImage[];
+	name: string;
+	nodes: ITemplateNode[];
+	totalViews: number;
+	user: {
+		username: string;
+	};
+}
+
 export interface IN8nUISettings {
 	endpointWebhook: string;
 	endpointWebhookTest: string;
@@ -545,6 +560,34 @@ export interface IWorkflowSettings extends IWorkflowSettingsWorkflow {
 	executionTimeout?: number;
 }
 
+export interface ITemplateCategories {
+	id: string;
+	name: string;
+}
+
+export interface ITemplateImage {
+	id: string;
+	url: string;
+}
+
+export interface ITemplateMainImage {
+	url: string;
+	width: string;
+}
+export interface ITemplateNode {
+	displayName: string;
+	defaults: {
+		color: string;
+	};
+	icon: string;
+	// iconData: {
+	// 	fileBuffer: string;
+	// 	type: string;
+	// };
+	name: string;
+	typeVersion: number;
+}
+
 export interface ITimeoutHMS {
 	hours: number;
 	minutes: number;
@@ -721,6 +764,10 @@ export interface ISettingsState {
 	promptsData: IN8nPrompts;
 }
 
+export interface ITemplateState {
+	template: {};
+}
+
 export interface IVersionsState {
 	versionNotificationSettings: IVersionNotificationSettings;
 	nextVersions: IVersion[];

packages/editor-ui/src/api/templates-mock.ts

@@ -0,0 +1,70 @@
+import { IN8nTemplate } from '@/Interface';
+
+const template = {
+	id: '23',
+	name: 'New/updated employee in BambooHR -> Create/Update user in Okta and Slack to group',
+	description: 'I made this workflow after discovering that n8n does not have a Todoist trigger. \n\nSteps:\n\n- Configure Todoist webhook by visiting their portal [https://developer.todoist.com/appconsole.html](https://developer.todoist.com/appconsole.html) and checking off the triggers which you want to use. I only used item:completed in my case, but yours could be different.\n- Use the test webhook URL from n8n to test your trigger.\n- Once testing is successful, register the production webhook URL from n8n into the todoist developer portal\n- Adjust the date & time to your liking and appropriate timezone\n- In my case I am sending the data to a Google Sheet but you can change that to whatever app you want to send it to.\n- Profit!\n\nFeel free to reach out to me on [https://twitter.com/sami_abid](https://twitter.com/sami_abid) if you have any questions\n<script>alert("xss");</script>',
+	image: [
+		{
+			id: '564',
+			url: 'https://f000.backblazeb2.com/file/n8n-website-images/ffa19945d89a4feca922859899d435cf.png',
+		},
+	],
+	mainImage: [
+		{
+			url: 'https://f000.backblazeb2.com/file/n8n-website-images/ffa19945d89a4feca922859899d435cf.png',
+			width: '1000',
+		},
+		{
+			url: 'https://f000.backblazeb2.com/file/n8n-website-images/ffa19945d89a4feca922859899d435cf.png',
+			width: '600',
+		},
+	],
+	nodes: [
+		{
+			defaults: {
+				color: '#000000',
+			},
+			displayName: 'Play',
+			icon: 'fa:play',
+			// iconData: {
+			// 	fileBuffer: '',
+			// 	type: '',
+			// },
+			name: 'n8n-nodes-base.start',
+			typeVersion: 1,
+		},
+		{
+			defaults: {
+				color: '#000000',
+			},
+			displayName: 'Webhook',
+			icon: `file:E:\projects\clients\n8n\packages\cli\node_modules\n8n-nodes-base\dist\nodes\Webhook\webhook.svg`,
+			// iconData: {
+			// 	fileBuffer: '',
+			// 	type: '',
+			// },
+			name: 'n8n-nodes-base.webhook',
+			typeVersion: 1,
+		},
+	],
+	totalViews: 1200,
+	categories: [
+		{
+			id: '1',
+			name: 'Security Ops',
+		},
+		{
+			id: '2',
+			name: 'Building Blocks',
+		},
+	],
+	user: {
+		username: 'someusername',
+	},
+	createdAt: '2021-12-15T11:56:35.412Z',
+};
+
+export async function getTemplateById(templateId: string): Promise<IN8nTemplate> {
+	return template;
+}

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

@@ -0,0 +1,7 @@
+import { IN8nTemplate } from '@/Interface';
+import { get} from './helpers';
+import { TEMPLATES_BASE_URL } from '@/constants';
+
+export async function getTemplateById(templateId: string): Promise<IN8nTemplate> {
+	return await get(TEMPLATES_BASE_URL, `/workflow/${templateId}`);
+}