feat: RBAC (#8922)

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
Co-authored-by: Val <68596159+valya@users.noreply.github.com>
Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>
Co-authored-by: Valya Bullions <valya@n8n.io>
Co-authored-by: Danny Martini <danny@n8n.io>
Co-authored-by: Danny Martini <despair.blue@gmail.com>
Co-authored-by: Iván Ovejero <ivov.src@gmail.com>
Co-authored-by: Omar Ajoue <krynble@gmail.com>
Co-authored-by: oleg <me@olegivaniv.com>
Co-authored-by: Michael Kret <michael.k@radency.com>
Co-authored-by: Michael Kret <88898367+michael-radency@users.noreply.github.com>
Co-authored-by: Elias Meire <elias@meire.dev>
Co-authored-by: Giulio Andreini <andreini@netseven.it>
Co-authored-by: Giulio Andreini <g.andreini@gmail.com>
Co-authored-by: Ayato Hayashi <go12limchangyong@gmail.com>

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

@@ -7,7 +7,10 @@
 		:aria-busy="ariaBusy"
 		:href="href"
 		aria-live="polite"
-		v-bind="$attrs"
+		v-bind="{
+			...$attrs,
+			...(props.nativeType ? { type: props.nativeType } : {}),
+		}"
 	>
 		<span v-if="loading || icon" :class="$style.icon">
 			<N8nSpinner v-if="loading" :size="size" />

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

@@ -133,11 +133,18 @@ const onSelect = (item: IMenuItem): void => {
 	background-color: var(--menu-background, var(--color-background-xlight));
 }
 
+.menuHeader {
+	display: flex;
+	flex-direction: column;
+	flex: 0 1 auto;
+	overflow-y: auto;
+}
+
 .menuContent {
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
-	flex-grow: 1;
+	flex: 1 1 auto;
 
 	& > div > :global(.el-menu) {
 		background: none;

packages/design-system/src/components/N8nMenuItem/MenuItem.vue

@@ -19,9 +19,12 @@
 					:icon="item.icon"
 					:size="item.customIconSize || 'large'"
 				/>
-				<span :class="$style.label">{{ item.label }}</span>
+				<span v-if="!compact" :class="$style.label">{{ item.label }}</span>
+				<span v-if="!item.icon && compact" :class="[$style.label, $style.compactLabel]">{{
+					getInitials(item.label)
+				}}</span>
 			</template>
-			<n8n-menu-item
+			<N8nMenuItem
 				v-for="child in availableChildren"
 				:key="child.id"
 				:item="child"
@@ -52,6 +55,7 @@
 					}"
 					data-test-id="menu-item"
 					:index="item.id"
+					:disabled="item.disabled"
 					@click="handleSelect?.(item)"
 				>
 					<N8nIcon
@@ -60,7 +64,10 @@
 						:icon="item.icon"
 						:size="item.customIconSize || 'large'"
 					/>
-					<span :class="$style.label">{{ item.label }}</span>
+					<span v-if="!compact" :class="$style.label">{{ item.label }}</span>
+					<span v-if="!item.icon && compact" :class="[$style.label, $style.compactLabel]">{{
+						getInitials(item.label)
+					}}</span>
 					<N8nTooltip
 						v-if="item.secondaryIcon"
 						:placement="item.secondaryIcon?.tooltip?.placement || 'right'"
@@ -74,6 +81,7 @@
 							:size="item.secondaryIcon.size || 'small'"
 						/>
 					</N8nTooltip>
+					<N8nSpinner v-if="item.isLoading" :class="$style.loading" size="small" />
 				</ElMenuItem>
 			</ConditionalRouterLink>
 		</N8nTooltip>
@@ -141,6 +149,16 @@ const isItemActive = (item: IMenuItem): boolean => {
 		Array.isArray(item.children) && item.children.some((child) => isActive(child));
 	return isActive(item) || hasActiveChild;
 };
+
+const getInitials = (label: string): string => {
+	const words = label.split(' ');
+
+	if (words.length === 1) {
+		return words[0].substring(0, 2);
+	} else {
+		return words[0].charAt(0) + words[1].charAt(0);
+	}
+};
 </script>
 
 <style module lang="scss">
@@ -237,6 +255,11 @@ const isItemActive = (item: IMenuItem): boolean => {
 	margin: 0 !important;
 	border-radius: var(--border-radius-base) !important;
 	overflow: hidden;
+
+	&.compact {
+		padding: var(--spacing-2xs) 0 !important;
+		justify-content: center;
+	}
 }
 
 .icon {
@@ -245,6 +268,10 @@ const isItemActive = (item: IMenuItem): boolean => {
 	text-align: center;
 }
 
+.loading {
+	margin-left: var(--spacing-xs);
+}
+
 .secondaryIcon {
 	display: flex;
 	align-items: center;
@@ -259,6 +286,10 @@ const isItemActive = (item: IMenuItem): boolean => {
 	user-select: none;
 }
 
+.compactLabel {
+	text-overflow: unset;
+}
+
 .item + .item {
 	margin-top: 8px !important;
 }
@@ -271,9 +302,6 @@ const isItemActive = (item: IMenuItem): boolean => {
 		width: initial !important;
 		height: initial !important;
 	}
-	.label {
-		display: none;
-	}
 	.secondaryIcon {
 		display: none;
 	}

packages/design-system/src/components/N8nTabs/Tabs.vue

@@ -31,7 +31,14 @@
 							/></span>
 						</div>
 					</a>
-
+					<RouterLink
+						v-else-if="option.to"
+						:to="option.to"
+						:class="[$style.tab, { [$style.activeTab]: modelValue === option.value }]"
+					>
+						<N8nIcon v-if="option.icon" :icon="option.icon" size="medium" />
+						<span v-if="option.label">{{ option.label }}</span>
+					</RouterLink>
 					<div
 						v-else
 						:class="{ [$style.tab]: true, [$style.activeTab]: modelValue === option.value }"
@@ -50,6 +57,7 @@
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref } from 'vue';
 import N8nIcon from '../N8nIcon';
+import type { RouteLocationRaw } from 'vue-router';
 
 interface TabOptions {
 	value: string;
@@ -58,6 +66,7 @@ interface TabOptions {
 	href?: string;
 	tooltip?: string;
 	align?: 'left' | 'right';
+	to?: RouteLocationRaw;
 }
 
 interface TabsProps {
@@ -152,6 +161,7 @@ const scrollRight = () => scroll(50);
 	font-size: var(--font-size-s);
 	cursor: pointer;
 	white-space: nowrap;
+	color: var(--color-text-base);
 	&:hover {
 		color: var(--color-primary);
 	}

packages/design-system/src/types/button.ts

@@ -9,6 +9,9 @@ export type ButtonType = (typeof BUTTON_TYPE)[number];
 const BUTTON_SIZE = ['small', 'medium', 'large'] as const;
 export type ButtonSize = (typeof BUTTON_SIZE)[number];
 
+const BUTTON_NATIVE_TYPE = ['submit', 'reset', 'button'] as const;
+export type ButtonNativeType = (typeof BUTTON_NATIVE_TYPE)[number];
+
 export interface IconButtonProps {
 	active?: boolean;
 	disabled?: boolean;
@@ -19,6 +22,7 @@ export interface IconButtonProps {
 	size?: ButtonSize;
 	text?: boolean;
 	type?: ButtonType;
+	nativeType?: ButtonNativeType;
 }
 
 export interface ButtonProps extends IconButtonProps {

packages/design-system/src/types/menu.ts

@@ -27,6 +27,8 @@ export type IMenuItem = {
 	activateOnRoutePaths?: string[];
 
 	children?: IMenuItem[];
+	isLoading?: boolean;
+	disabled?: boolean;
 };
 
 export type IRouteMenuItemProperties = {