✨ Add Templates (#2720)

* Templates Bugs / Fixed Various Bugs / Multiply Api Request, Carousel Gradient, Core Nodes Filters ...

* Updated MainSidebar Paddings

* N8N-Templates Bugfixing - Remove Unnecesairy Icon (Shape), Refatctor infiniteScrollEnabled Prop + updated infiniterScroll functinality

* N8N-2853 Fixed Carousel Arrows Bug after Cleaning the SearchBar

* fix telemetry init

* fix search tracking issues

* N8N-2853 Created FilterTemplateNode Constant Array, Filter PlayButton and WebhookRespond from Nodes, Added Box for showing more nodes inside TemplateList, Updated NewWorkflowButton to primary, Fixed Markdown issue with Code

* N8N-2853 Removed Placeholder if Workflows Or Collections are not found, Updated the Logic

* fix telemetry events

* clean up session id

* update user inserted event

* N8N-2853 Fixed Categories to Moving if the names are long

* Add todos

* Update Routes on loading

* fix spacing

* Update Border Color

* Update Border Readius

* fix filter fn

* fix constant, console error

* N8N-2853 PR Fixes, Refactoring, Removing unnecesairy code ..

* N8N-2853 PR Fixes - Editor-ui Fixes, Refactoring, Removing Dead Code ...

* N8N-2853 Refactor Card to LongCard

* clean up spacing, replace css var

* clean up spacing

* set categories as optional in node

* replace vars

* refactor store

* remove unnesssary import

* fix error

* fix templates view to start

* add to cache

* fix coll view data

* fix categories

* fix category event

* fix collections carousel

* fix initial load and search

* fix infinite load

* fix query param

* fix scrolling issues

* fix scroll to top

* fix search

* fix collections search

* fix navigation bug

* rename view

* update package lock

* rename workflow view

* rename coll view

* update routes

* add wrapper component

* set session id

* fix search tracking

* fix session tracking

* remove deleted mutation

* remove check for unsupported nodes

* refactor filters

* lazy load template

* clean up types

* refactor infinte scroll

* fix end of search

* Fix spacing

* fix coll loading

* fix types

* fix coll view list

* fix navigation

* rename types

* rename state

* fix search responsiveness

* fix coll view spacing

* fix search view spacing

* clean up views

* set background color

* center page not vert

* fix workflow view

* remove import

* fix background color

* fix background

* clean props

* clean up imports

* refactor button

* update background color

* fix spacing issue

* rename event

* update telemetry event

* update endpoints, add loading view, check for endpoint health

* remove conolse log

* N8N-2853 Fixed Menu Items Padding

* replace endpoints

* fix type issues

* fix categories

* N8N-2853 Fixed ParameterInput Placeholder after ElementUI Upgrade

* update createdAt

* ⚡ Fix placeholder in creds config modal

* ✏️ Adjust docstring to `credText` placeholder version

* N8N-2853 Optimized

* N8N-2853 Optimized code

* ⚡ Add deployment type to FE settings

* ⚡ Add deployment type to interfaces

* N8N-2853 Removed Animated prop from components

* ⚡ Add deployment type to store module

* ✨ Create hiring banner

* ⚡ Display hiring banner

* ⏪ Undo unrelated change

* N8N-2853 Refactor TemplateFilters

* ⚡ Fix indentation

* N8N-2853 Reorder items / TemplateList

* 👕 Fix lint

* N8N-2853 Refactor TemplateFilters Component

* N8N-2853 Reorder TemplateList

* refactor template card

* update timeout

* fix removelistener

* fix spacing

* split enabled from offline

* add spacing to go back

* N8N-2853 Fixed Screens for Tablet & Mobile

* N8N-2853 Update Stores Order

* remove image componet

* remove placeholder changes

* N8N-2853 Fixed Chinnese Placeholders for El Select Component that comes from the Library Upgrade

* N8N-2853 Fixed Vue Agile Console Warnings

* N8N-2853 Update Collection Route

* ✏️ Update jobs URL

* 🚚 Move logging to root component

* ⚡ Refactor `deploymentType` to `isInternalUser`

* ⚡ Improve syntax

* fix cut bug in readonly view

* N8N-3012 Fixed Details section in templates with lots of description, Fixed Mardown Block with overflox-x

* N8N-3012 Increased Font-size, Spacing and Line-height of the Categories Items

* N8N-3012 Fixed Vue-agile client width error on resize

* only delay redirect for root path

* N8N-3012 Fixed Carousel Arrows that Disappear

* N8N-3012 Make Loading Screen same color as Templates

* N8N-3012 Markdown renders inline block as block code

* add offline warning

* hide log from workflow iframe

* update text

* make search button larger

* N8N-3012 Categories / Tags extended all the way in details section

* load data in cred modals

* remove deleted message

* add external hook

* remove import

* update env variable description

* fix markdown width issue

* disable telemetry for demo, add session id to template pages

* fix telemetery bugs

* N8N-3012 Not found Collections/Wokrkflow

* N8N-3012 Checkboxes change order when categories are changed

* N8N-3012 Refactor SortedCategories inside TemplateFilters component

* fix firefox bug

* add telemetry requirements

* add error check

* N8N-3012 Update GoBackButton to check if Route History is present

* N8N-3012 Fixed WF Nodes Icons

* hide workflow screenshots

* remove unnessary mixins

* rename prop

* fix design a bit

* rename data

* clear workspace on destroy

* fix copy paste bug

* fix disabled state

* N8N-3012 Fixed Saving/Leave without saving Modal

* fix telemetry issue

* fix telemetry issues, error bug

* fix error notification

* disable workflow menu items on templates

* fix i18n elementui issue

* Remove Emit - NodeType from HoverableNodeIcon component

* TechnicalFixes: NavigateTo passed down as function should be helper

* TechnicalFixes: Update NavigateTo function

* TechnicalFixes: Add FilterCoreNodes directly as function

* check for empty connecitions

* fix titles

* respect new lines

* increase categories to be sliced

* rename prop

* onUseWorkflow

* refactor click event

* fix bug, refactor

* fix loading story

* add default

* fix styles at right level of abstraction

* add wrapper with width

* remove loading blocks component

* add story

* rename prop

* fix spacing

* refactor tag, add story

* move margin to container

* fix tag redirect, remove unnessary check

* make version optional

* rename view

* move from workflows to templates store

* remove unnessary change

* remove unnessary css

* rename component

* refactor collection card

* add boolean to prevent shrink

* clean up carousel

* fix redirection bug on save

* remove listeners to fix multiple listeners bug

* remove unnessary types

* clean up boolean set

* fix node select bug

* rename component

* remove unnessary class

* fix redirection bug

* remove unnessary error

* fix typo

* fix blockquotes, pre

* refactor markdown rendering

* remove console log

* escape markdown

* fix safari bug

* load active workflows to fix modal bug

* ⬆️ Update package-lock.json file

* ⚡ Add n8n version as header

Co-authored-by: Mutasem Aldmour <[email protected]>
Co-authored-by: Mutasem <[email protected]>
Co-authored-by: Iván Ovejero <[email protected]>
Co-authored-by: Jan Oberhauser <[email protected]>

packages/cli/config/index.ts

@@ -690,6 +690,21 @@ const config = convict({
 		},
 	},
 
+	templates: {
+		enabled: {
+			doc: 'Whether templates feature is enabled to load workflow templates.',
+			format: Boolean,
+			default: true,
+			env: 'N8N_TEMPLATES_ENABLED',
+		},
+		host: {
+			doc: 'Endpoint host to retrieve workflow templates from endpoints.',
+			format: String,
+			default: 'https://api.n8n.io/',
+			env: 'N8N_TEMPLATES_HOST',
+		},
+	},
+
 	binaryDataManager: {
 		availableModes: {
 			format: String,

packages/cli/src/Interfaces.ts

@@ -412,6 +412,11 @@ export interface IN8nUISettings {
 	personalizationSurvey: IPersonalizationSurvey;
 	defaultLocale: string;
 	logLevel: 'info' | 'debug' | 'warn' | 'error' | 'verbose';
+	deploymentType: string;
+	templates: {
+		enabled: boolean;
+		host: string;
+	};
 }
 
 export interface IPersonalizationSurveyAnswers {

packages/cli/src/Server.ts

@@ -286,6 +286,11 @@ class App {
 			},
 			defaultLocale: config.get('defaultLocale'),
 			logLevel: config.get('logs.level'),
+			deploymentType: config.get('deployment.type'),
+			templates: {
+				enabled: config.get('templates.enabled'),
+				host: config.get('templates.host'),
+			},
 		};
 	}
 

packages/design-system/.storybook/font-awesome-icons.js

@@ -17,6 +17,8 @@ import {
 	faCheck,
 	faChevronDown,
 	faChevronUp,
+	faChevronLeft,
+	faChevronRight,
 	faCode,
 	faCodeBranch,
 	faCog,
@@ -100,6 +102,8 @@ library.add(faCalendar);
 library.add(faCheck);
 library.add(faChevronDown);
 library.add(faChevronUp);
+library.add(faChevronLeft);
+library.add(faChevronRight);
 library.add(faCode);
 library.add(faCodeBranch);
 library.add(faCog);

packages/design-system/package.json

@@ -30,14 +30,14 @@
     "@fortawesome/free-solid-svg-icons": "5.x",
     "@fortawesome/vue-fontawesome": "2.x",
     "core-js": "3.x",
-    "element-ui": "2.13.x"
+    "element-ui": "2.15.x"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/vue-fontawesome": "^2.0.2",
     "core-js": "^3.6.5",
-    "element-ui": "~2.13.0",
+    "element-ui": "2.15.x",
     "storybook-addon-themes": "^6.1.0",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
@@ -48,6 +48,7 @@
     "@storybook/addon-links": "^6.3.6",
     "@storybook/vue": "^6.3.6",
     "@types/jest": "^26.0.13",
+    "@types/markdown-it": "^12.2.3",
     "@typescript-eslint/eslint-plugin": "^4.29.0",
     "@typescript-eslint/parser": "^4.29.0",
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -63,6 +64,10 @@
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-vue": "^7.16.0",
     "gulp": "^4.0.0",
+    "markdown-it": "^12.3.2",
+    "markdown-it-emoji": "^2.0.0",
+    "markdown-it-link-attributes": "^4.0.0",
+    "markdown-it-task-lists": "^2.1.1",
     "prettier": "^2.3.2",
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",
@@ -74,6 +79,7 @@
     "gulp-clean-css": "^4.3.0",
     "gulp-dart-sass": "^1.0.2",
     "node-notifier": ">=8.0.1",
-    "trim": ">=0.0.3"
+    "trim": ">=0.0.3",
+    "xss": "^1.0.10"
   }
 }

packages/design-system/src/components/N8nLoading/Loading.stories.js

@@ -0,0 +1,43 @@
+import N8nLoading from './Loading.vue';
+
+export default {
+	title: 'Atoms/Loading',
+	component: N8nLoading,
+	argTypes: {
+		animated: {
+			control: {
+				type: 'boolean',
+			},
+		},
+		loading: {
+			control: {
+				type: 'boolean',
+			},
+		},
+		rows: {
+			control: {
+				type: 'select',
+				options: [1, 2, 3, 4, 5],
+			},
+		},
+		variant: {
+			control: {
+				type: 'select',
+				options: ['button', 'h1', 'image', 'p'],
+			},
+		},
+	},
+};
+
+const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nLoading,
+	},
+	template: '<n8n-loading v-bind="$props"></n8n-loading>',
+});
+
+export const Loading = Template.bind({});
+Loading.args = {
+	variant: 'p',
+};

packages/design-system/src/components/N8nLoading/Loading.vue

@@ -0,0 +1,86 @@
+<template>
+	<el-skeleton :loading="loading" :animated="animated">
+		<template slot="template">
+			<el-skeleton-item
+				v-if="variant === 'button'"
+				:variant="variant"
+			/>
+
+			<div v-if="variant === 'h1'">
+				<div
+					v-for="(item, index) in rows"
+					:key="index"
+					:class="{
+						[$style.h1Last]: item === rows && rows > 1 && shrinkLast,
+					}"
+				>
+					<el-skeleton-item
+						:variant="variant"
+					/>
+				</div>
+			</div>
+			<el-skeleton-item
+				v-if="variant === 'image'"
+				:variant="variant"
+			/>
+			<div v-if="variant === 'p'">
+				<div
+					v-for="(item, index) in rows"
+					:key="index"
+					:class="{
+						[$style.pLast]: item === rows && rows > 1 && shrinkLast,
+					}">
+						<el-skeleton-item
+							:variant="variant"
+						/>
+				</div>
+			</div>
+		</template>
+	</el-skeleton>
+</template>
+
+<script lang="ts">
+import ElSkeleton from 'element-ui/lib/skeleton';
+import ElSkeletonItem from 'element-ui/lib/skeleton-item';
+
+export default {
+	name: 'n8n-loading',
+	components: {
+		ElSkeleton,
+		ElSkeletonItem,
+	},
+	props: {
+		animated: {
+			type: Boolean,
+			default: true,
+		},
+		loading: {
+			type: Boolean,
+			default: true,
+		},
+		rows: {
+			type: Number,
+			default: 1,
+		},
+		shrinkLast: {
+			type: Boolean,
+			default: true,
+		},
+		variant: {
+			type: String,
+			default: 'p',
+			validator: (value: string): boolean => ['p', 'h1', 'button', 'image'].includes(value),
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+.h1Last {
+  width: 40%;
+}
+
+.pLast {
+  width: 61%;
+}
+</style>

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

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

packages/design-system/src/components/N8nMarkdown/Markdown.stories.js

@@ -0,0 +1,48 @@
+import N8nMarkdown from './Markdown.vue';
+
+export default {
+	title: 'Atoms/Markdown',
+	component: N8nMarkdown,
+	argTypes: {
+		content: {
+			control: {
+				type: 'text',
+			},
+		},
+		loading: {
+			control: {
+				type: 'boolean',
+			},
+		},
+		loadingBlocks: {
+			control: {
+				type: 'select',
+				options: [1, 2, 3, 4, 5],
+			},
+		},
+		loadingRows: {
+			control: {
+				type: 'select',
+				options: [1, 2, 3, 4, 5],
+			},
+		},
+	},
+};
+
+const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nMarkdown,
+	},
+	template: '<n8n-markdown v-bind="$props"></n8n-markdown>',
+});
+
+export const Markdown = Template.bind({});
+Markdown.args = {
+	content: `I wanted a system to monitor website content changes and notify me. So I made it using n8n.\n\nEspecially my competitor blogs. I wanted to know how often they are posting new articles. (I used their sitemap.xml file) (The below workflow may vary)\n\nIn the Below example, I used HackerNews for example.\n\nExplanation:\n\n- First HTTP Request node crawls the webpage and grabs the website source code\n- Then wait for x minutes\n- Again, HTTP Node crawls the webpage\n- If Node compares both results are equal if anything is changed. It’ll go to the false branch and notify me in telegram.\n\n**Workflow:**\n\n![](fileId:1)\n\n**Sample Response:**\n\n![](https://community.n8n.io/uploads/default/original/2X/d/d21ba41d7ac9ff5cd8148fedb07d0f1ff53b2529.png)\n`,
+	loading: false,
+	images: [{
+		id: 1,
+		url: 'https://community.n8n.io/uploads/default/optimized/2X/b/b737a95de4dfe0825d50ca098171e9f33a459e74_2_690x288.png',
+	}],
+};