fix(editor): Connect up new project viewer role to the FE (#9913)

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

@@ -15,13 +15,19 @@
 				</slot>
 			</N8nText>
 		</div>
-		<N8nButton
-			v-if="buttonText"
-			:label="buttonText"
-			:type="buttonType"
-			size="large"
-			@click="$emit('click:button', $event)"
-		/>
+		<N8nTooltip :disabled="!buttonDisabled">
+			<template #content>
+				<slot name="disabledButtonTooltip"></slot>
+			</template>
+			<N8nButton
+				v-if="buttonText"
+				:label="buttonText"
+				:type="buttonType"
+				:disabled="buttonDisabled"
+				size="large"
+				@click="$emit('click:button', $event)"
+			/>
+		</N8nTooltip>
 		<N8nCallout
 			v-if="calloutText"
 			:theme="calloutTheme"
@@ -41,12 +47,14 @@ import N8nHeading from '../N8nHeading';
 import N8nText from '../N8nText';
 import N8nCallout, { type CalloutTheme } from '../N8nCallout';
 import type { ButtonType } from 'n8n-design-system/types/button';
+import N8nTooltip from 'n8n-design-system/components/N8nTooltip/Tooltip.vue';
 
 interface ActionBoxProps {
 	emoji: string;
 	heading: string;
 	buttonText: string;
 	buttonType: ButtonType;
+	buttonDisabled?: boolean;
 	description: string;
 	calloutText?: string;
 	calloutTheme?: CalloutTheme;

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

@@ -9,7 +9,9 @@ exports[`N8NActionBox > should render correctly 1`] = `
   <div class="description">
     <n8n-text-stub color="text-base" bold="false" size="medium" compact="false" tag="span"></n8n-text-stub>
   </div>
-  <n8n-button-stub block="false" element="button" label="Do something" square="false" active="false" disabled="false" loading="false" outline="false" size="large" text="false" type="primary"></n8n-button-stub>
+  <n8n-button-stub block="false" element="button" label="Do something" square="false" active="false" disabled="false" loading="false" outline="false" size="large" text="false" type="primary" class="el-tooltip__trigger"></n8n-button-stub>
+  <!--teleport start-->
+  <!--teleport end-->
   <!--v-if-->
 </div>"
 `;

packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue

@@ -6,6 +6,7 @@
 			:trigger="trigger"
 			:popper-class="popperClass"
 			:teleported="teleported"
+			:disabled="disabled"
 			@command="onSelect"
 			@visible-change="onVisibleChange"
 		>
@@ -76,6 +77,7 @@ interface ActionDropdownProps {
 	trigger?: (typeof TRIGGER)[number];
 	hideArrow?: boolean;
 	teleported?: boolean;
+	disabled?: boolean;
 }
 
 const props = withDefaults(defineProps<ActionDropdownProps>(), {
@@ -86,6 +88,7 @@ const props = withDefaults(defineProps<ActionDropdownProps>(), {
 	trigger: 'click',
 	hideArrow: false,
 	teleported: true,
+	disabled: false,
 });
 
 const attrs = useAttrs();

packages/design-system/src/css/dropdown.scss

@@ -19,6 +19,14 @@
 		}
 	}
 
+	@include mixins.when(disabled) {
+		.el-tooltip__trigger {
+			opacity: 0.25;
+			cursor: not-allowed;
+			background: unset;
+		}
+	}
+
 	& .el-dropdown__caret-button {
 		padding-left: 5px;
 		padding-right: 5px;