✨ User management v2 Front End (#3795)

* feat: Added responsive generic page view layout.

* feat: Added empty state.

* feat: Added credentials view empty state.

* test: Added unit tests for N8nActionBox

* feat: Added credentials list initial design.

* feat: Added credential actions. Started working on filters.

* feat: Updated InfoTip markup, added tests and changed stories to typescript.

* feat: Added credentials filtering by type. Added support for apply/reset filters.

* feat: Added credential sharing user select and user list. Added paywall component.

* feat: Updated credentials view permissions.

* feat: Added support for temporary sharing config for unsaved credentials.

* test: Fixed broken snapshots.

* feat: Added overflow styles to page-view-layout list.

* feat: Handled sharee specific views.

* feat: Integration between FE and BE to support real-world credential sharing scenario.

* feat: Added front end permissions table.

* feat: Refactored credential sharing flow. Updated design elements.

* feat: Added margin and padding auto spacer utilities.

* feat: Rehauled permissions to support instanceOwner role and action inheritance.

* feat: Updated credentials view to apply filters automatically.

* feat: Removed apply filters button and added active button state.

* test: Updated component snapshots.

* refactor: Renamed ResourceSharee to ResourceReader.

* feat: Credential sharing error handling, permissions improvement.

* feat: Updated permissions and error handling.

packages/design-system/src/components/N8nActionBox/ActionBox.stories.js → packages/design-system/src/components/N8nActionBox/ActionBox.stories.ts

@@ -1,5 +1,8 @@
+/* tslint:disable:variable-name */
+
 import N8nActionBox from './ActionBox.vue';
 import { action } from '@storybook/addon-actions';
+import {StoryFn} from "@storybook/vue";
 
 export default {
 	title: 'Atoms/ActionBox',
@@ -21,7 +24,7 @@ const methods = {
 	onClick: action('click'),
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nActionBox,

packages/design-system/src/components/N8nActionBox/ActionBox.vue

@@ -1,14 +1,25 @@
 <template>
 	<div :class="['n8n-action-box', $style.container]">
-		<div :class="$style.heading" v-if="heading">
-			<n8n-heading size="xlarge" align="center">{{ heading }}</n8n-heading>
+		<div :class="$style.emoji" v-if="emoji">
+			{{ emoji }}
+		</div>
+		<div :class="$style.heading" v-if="heading || $slots.heading">
+			<n8n-heading size="xlarge" align="center">
+				<slot name="heading">{{ heading }}</slot>
+			</n8n-heading>
 		</div>
 		<div :class="$style.description" @click="$emit('descriptionClick', $event)">
 			<n8n-text color="text-base">
-				<span v-html="description"></span>
+				<slot name="description">
+					<span v-html="description"></span>
+				</slot>
 			</n8n-text>
 		</div>
-		<n8n-button v-if="buttonText" :label="buttonText" size="large"
+		<n8n-button
+			v-if="buttonText"
+			:label="buttonText"
+			:type="buttonType"
+			size="large"
 			@click="$emit('click', $event)"
 		/>
 		<n8n-callout
@@ -42,12 +53,18 @@ export default Vue.extend({
 		N8nCallout,
 	},
 	props: {
+		emoji: {
+			type: String,
+		},
 		heading: {
 			type: String,
 		},
 		buttonText: {
 			type: String,
 		},
+		buttonType: {
+			type: String,
+		},
 		description: {
 			type: String,
 		},
@@ -76,6 +93,10 @@ export default Vue.extend({
 
 	> * {
 		margin-bottom: var(--spacing-l);
+
+		&:last-child {
+			margin-bottom: 0;
+		}
 	}
 }
 

packages/design-system/src/components/N8nActionBox/__tests__/ActionBox.spec.ts

@@ -0,0 +1,26 @@
+import { render } from '@testing-library/vue';
+import N8NActionBox from '../ActionBox.vue';
+
+describe('components', () => {
+	describe('N8NActionBox', () => {
+		describe('props', () => {
+			it('should render correctly', () => {
+				const wrapper = render(N8NActionBox, {
+					props: {
+						emoji: "😿",
+						heading: "Headline you need to know",
+						description: "Long description that you should know something is the way it is because of how it is. ",
+						buttonText: "Do something",
+					},
+					stubs: [
+						'n8n-heading',
+						'n8n-text',
+						'n8n-button',
+						'n8n-callout',
+					],
+				});
+				expect(wrapper.html()).toMatchSnapshot();
+			});
+		});
+	});
+});

packages/design-system/src/components/N8nActionBox/__tests__/__snapshots__/ActionBox.spec.ts.snap

@@ -0,0 +1,15 @@
+// Vitest Snapshot v1
+
+exports[`components > N8NActionBox > props > should render correctly 1`] = `
+"<div class=\\"n8n-action-box _container_1ng3s_1\\">
+  <div class=\\"_emoji_1ng3s_16\\"> 😿 </div>
+  <div class=\\"_heading_1ng3s_20\\">
+    <n8n-heading-stub tag=\\"span\\" size=\\"xlarge\\" align=\\"center\\">Headline you need to know</n8n-heading-stub>
+  </div>
+  <div class=\\"_description_1ng3s_24\\">
+    <n8n-text-stub size=\\"medium\\" color=\\"text-base\\" tag=\\"span\\"><span>Long description that you should know something is the way it is because of how it is. </span></n8n-text-stub>
+  </div>
+  <n8n-button-stub label=\\"Do something\\" type=\\"primary\\" size=\\"large\\"></n8n-button-stub>
+  <!---->
+</div>"
+`;

packages/design-system/src/components/N8nActionToggle/ActionToggle.vue

@@ -1,6 +1,13 @@
 <template>
 	<span :class="$style.container">
-		<el-dropdown :placement="placement" :size="size" trigger="click" @command="onCommand" @visible-change="onVisibleChange">
+		<el-dropdown
+			:placement="placement"
+			:size="size"
+			trigger="click"
+			@click.native.stop
+			@command="onCommand"
+			@visible-change="onVisibleChange"
+		>
 			<span :class="{[$style.button]: true, [$style[theme]]: !!theme}">
 				<component :is="$options.components.N8nIcon"
 					icon="ellipsis-v"

packages/design-system/src/components/N8nBadge/Badge.stories.js

@@ -6,7 +6,7 @@ export default {
 	argTypes: {
 		theme: {
 			type: 'text',
-			options: ['default', 'secondary'],
+			options: ['default', 'primary', 'secondary', 'tertiary'],
 		},
 		size: {
 			type: 'select',

packages/design-system/src/components/N8nBadge/Badge.vue

@@ -18,7 +18,7 @@ export default Vue.extend({
 		theme: {
 			type: String,
 			default: 'default',
-			validator: (value: string) => ['default', 'secondary'].includes(value),
+			validator: (value: string) => ['default', 'primary', 'secondary', 'tertiary'].includes(value),
 		},
 		size: {
 			type: String,
@@ -51,10 +51,27 @@ export default Vue.extend({
 	border-color: var(--color-text-light);
 }
 
+.primary {
+	composes: badge;
+  	padding: var(--spacing-5xs) var(--spacing-3xs);
+	border-radius: var(--border-radius-xlarge);
+  	color: var(--color-foreground-xlight);
+	background-color: var(--color-primary);
+  	border-color: var(--color-primary);
+}
+
 .secondary {
 	composes: badge;
 	border-radius: var(--border-radius-xlarge);
 	color: var(--color-secondary);
 	background-color: var(--color-secondary-tint-1);
 }
+
+.tertiary {
+	composes: badge;
+	border-radius: var(--border-radius-base);
+	color: var(--color-text-light);
+  	border-color: var(--color-text-light);
+    padding: 1px var(--spacing-4xs);
+}
 </style>

packages/design-system/src/components/N8nBadge/__tests__/__snapshots__/Badge.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1
 
-exports[`components > N8nBadge > props > should render default theme correctly 1`] = `"<span class=\\"n8n-badge _default_13dw2_9 _badge_13dw2_1\\"><n8n-text-stub bold=\\"true\\" size=\\"large\\" compact=\\"true\\" tag=\\"span\\"><n8n-text-stub size=\\"medium\\" tag=\\"span\\">Default badge</n8n-text-stub></n8n-text-stub></span>"`;
+exports[`components > N8nBadge > props > should render default theme correctly 1`] = `"<span class=\\"n8n-badge _default_1xljn_9 _badge_1xljn_1\\"><n8n-text-stub bold=\\"true\\" size=\\"large\\" compact=\\"true\\" tag=\\"span\\"><n8n-text-stub size=\\"medium\\" tag=\\"span\\">Default badge</n8n-text-stub></n8n-text-stub></span>"`;
 
-exports[`components > N8nBadge > props > should render secondary theme correctly 1`] = `"<span class=\\"n8n-badge _secondary_13dw2_16 _badge_13dw2_1\\"><n8n-text-stub size=\\"medium\\" compact=\\"true\\" tag=\\"span\\"><n8n-text-stub size=\\"medium\\" tag=\\"span\\">Secondary badge</n8n-text-stub></n8n-text-stub></span>"`;
+exports[`components > N8nBadge > props > should render secondary theme correctly 1`] = `"<span class=\\"n8n-badge _secondary_1xljn_25 _badge_1xljn_1\\"><n8n-text-stub size=\\"medium\\" compact=\\"true\\" tag=\\"span\\"><n8n-text-stub size=\\"medium\\" tag=\\"span\\">Secondary badge</n8n-text-stub></n8n-text-stub></span>"`;
 
-exports[`components > N8nBadge > props > should render with default values correctly 1`] = `"<span class=\\"n8n-badge _default_13dw2_9 _badge_13dw2_1\\"><n8n-text-stub size=\\"small\\" compact=\\"true\\" tag=\\"span\\"><n8n-text-stub size=\\"medium\\" tag=\\"span\\">A Badge</n8n-text-stub></n8n-text-stub></span>"`;
+exports[`components > N8nBadge > props > should render with default values correctly 1`] = `"<span class=\\"n8n-badge _default_1xljn_9 _badge_1xljn_1\\"><n8n-text-stub size=\\"small\\" compact=\\"true\\" tag=\\"span\\"><n8n-text-stub size=\\"medium\\" tag=\\"span\\">A Badge</n8n-text-stub></n8n-text-stub></span>"`;

packages/design-system/src/components/N8nButton/Button.vue

@@ -70,6 +70,10 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		active: {
+			type: Boolean,
+			default: false,
+		},
 		float: {
 			type: String,
 			validator: (value: string): boolean =>
@@ -96,6 +100,7 @@ export default Vue.extend({
 				`${this.text ? ` ${this.$style['text']}` : ''}` +
 				`${this.disabled ? ` ${this.$style['disabled']}` : ''}` +
 				`${this.block ? ` ${this.$style['block']}` : ''}` +
+				`${this.active ? ` ${this.$style['active']}` : ''}` +
 				`${this.icon || this.loading ? ` ${this.$style['icon']}` : ''}`;
 		},
 	},
@@ -140,7 +145,7 @@ export default Vue.extend({
 		outline: $focus-outline-width solid $button-focus-outline-color;
 	}
 
-	&:active {
+	&:active, &.active {
 		color: $button-active-color;
 		border-color: $button-active-border-color;
 		background-color: $button-active-background-color;
@@ -389,8 +394,7 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0);
 	}
 }
 
-.loading,
-.active {
+.loading {
 	position: relative;
 	pointer-events: none;
 

packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap

@@ -1,12 +1,12 @@
 // Vitest Snapshot v1
 
-exports[`components > N8nButton > overrides > should render correctly 1`] = `"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_cccce_115 _secondary_cccce_170 _medium_cccce_254 _icon_cccce_239\\" icon=\\"plus-circle\\" type=\\"secondary\\"><span class=\\"_icon_cccce_239\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></button>"`;
+exports[`components > N8nButton > overrides > should render correctly 1`] = `"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_dnko0_115 _secondary_dnko0_170 _medium_dnko0_254 _icon_dnko0_239\\" icon=\\"plus-circle\\" type=\\"secondary\\"><span class=\\"_icon_dnko0_239\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></button>"`;
 
-exports[`components > N8nButton > props > icon > should render icon button 1`] = `"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_cccce_115 _primary_cccce_288 _medium_cccce_254 _icon_cccce_239\\"><span class=\\"_icon_cccce_239\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></button>"`;
+exports[`components > N8nButton > props > icon > should render icon button 1`] = `"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_dnko0_115 _primary_dnko0_288 _medium_dnko0_254 _icon_dnko0_239\\"><span class=\\"_icon_dnko0_239\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></button>"`;
 
-exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `"<button disabled=\\"disabled\\" aria-disabled=\\"false\\" aria-busy=\\"true\\" aria-live=\\"polite\\" class=\\"button _button_cccce_115 _primary_cccce_288 _medium_cccce_254 _loading_cccce_352 _icon_cccce_239\\"><span class=\\"_icon_cccce_239\\"><n8n-spinner-stub size=\\"medium\\" type=\\"dots\\"></n8n-spinner-stub></span><span>Button</span></button>"`;
+exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `"<button disabled=\\"disabled\\" aria-disabled=\\"false\\" aria-busy=\\"true\\" aria-live=\\"polite\\" class=\\"button _button_dnko0_115 _primary_dnko0_288 _medium_dnko0_254 _loading_dnko0_352 _icon_dnko0_239\\"><span class=\\"_icon_dnko0_239\\"><n8n-spinner-stub size=\\"medium\\" type=\\"dots\\"></n8n-spinner-stub></span><span>Button</span></button>"`;
 
 exports[`components > N8nButton > should render correctly 1`] = `
-"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_cccce_115 _primary_cccce_288 _medium_cccce_254\\">
+"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_dnko0_115 _primary_dnko0_288 _medium_dnko0_254\\">
   <!----><span>Button</span></button>"
 `;

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

@@ -2,6 +2,9 @@
 
 import N8nCard from './Card.vue';
 import {StoryFn} from "@storybook/vue";
+import N8nButton from "../N8nButton/Button.vue";
+import N8nIcon from "../N8nIcon/Icon.vue";
+import N8nText from "../N8nText/Text.vue";
 
 export default {
 	title: 'Atoms/Card',
@@ -16,14 +19,32 @@ export const Default: StoryFn = (args, {argTypes}) => ({
 	template: `<n8n-card v-bind="$props">This is a card.</n8n-card>`,
 });
 
-export const WithHeaderAndFooter: StoryFn = (args, {argTypes}) => ({
+
+export const WithSlots: StoryFn = (args, {argTypes}) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nCard,
+		N8nButton,
+		N8nIcon,
+		N8nText,
 	},
 	template: `<n8n-card v-bind="$props">
-		<template #header>Header</template>
-		This is a card.
-		<template #footer>Footer</template>
+		<template slot="prepend">
+			<n8n-icon icon="check" size="large" />
+		</template>
+		<template slot="header">
+			<strong>Card header</strong>
+		</template>
+		<n8n-text color="text-light" size="medium" class="mt-2xs mb-2xs">
+			This is the card body.
+		</n8n-text>
+		<template slot="footer">
+			<n8n-text size="medium">
+				Card footer
+			</n8n-text>
+		</template>
+		<template slot="append">
+			<n8n-button>Click me</n8n-button>
+		</template>
 	</n8n-card>`,
 });

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

@@ -1,13 +1,21 @@
 <template>
 	<div :class="['card', $style.card]" v-on="$listeners">
-		<div :class="$style.header" v-if="$slots.header">
-			<slot name="header" />
+		<div :class="$style.icon" v-if="$slots.prepend">
+			<slot name="prepend" />
 		</div>
-		<div :class="$style.body" v-if="$slots.default">
-			<slot />
+		<div :class="$style.content">
+			<div :class="$style.header" v-if="$slots.header">
+				<slot name="header" />
+			</div>
+			<div :class="$style.body" v-if="$slots.default">
+				<slot />
+			</div>
+			<div :class="$style.footer" v-if="$slots.footer">
+				<slot name="footer" />
+			</div>
 		</div>
-		<div :class="$style.footer" v-if="$slots.footer">
-			<slot name="footer" />
+		<div :class="$style.actions" v-if="$slots.append">
+			<slot name="append" />
 		</div>
 	</div>
 </template>
@@ -17,6 +25,7 @@ import Vue from 'vue';
 
 export default Vue.extend({
 	name: 'n8n-card',
+	inheritAttrs: true,
 });
 </script>
 
@@ -27,8 +36,9 @@ export default Vue.extend({
 	background-color: var(--color-background-xlight);
 	padding: var(--spacing-s);
 	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
+	flex-direction: row;
+	width: 100%;
+	align-items: center;
 }
 
 .header,
@@ -39,11 +49,27 @@ export default Vue.extend({
 	align-items: center;
 }
 
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1;
+}
+
 .body {
 	width: 100%;
 	height: 100%;
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
 }
+
+.icon {
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: var(--spacing-s);
+}
 </style>

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

@@ -0,0 +1,25 @@
+// Vitest Snapshot v1
+
+exports[`components > N8nCard > should render correctly 1`] = `
+"<div class=\\"card _card_1oonz_1\\">
+  <!---->
+  <div class=\\"_content_1oonz_20\\">
+    <!---->
+    <div class=\\"_body_1oonz_27\\">This is a card.</div>
+    <!---->
+  </div>
+  <!---->
+</div>"
+`;
+
+exports[`components > N8nCard > should render correctly with header and footer 1`] = `
+"<div class=\\"card _card_1oonz_1\\">
+  <!---->
+  <div class=\\"_content_1oonz_20\\">
+    <div class=\\"_header_1oonz_12\\">Header</div>
+    <div class=\\"_body_1oonz_27\\">This is a card.</div>
+    <div class=\\"_footer_1oonz_13\\">Footer</div>
+  </div>
+  <!---->
+</div>"
+`;