fix: Community nodes - setting page empty state (#15305)

packages/frontend/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue

@@ -39,7 +39,7 @@ const emit = defineEmits<{
 const telemetry = useTelemetry();
 const i18n = useI18n();
 
-const { userActivated } = useUsersStore();
+const { userActivated, isInstanceOwner } = useUsersStore();
 const { popViewStack, updateCurrentViewStack } = useViewStacks();
 const { registerKeyHook } = useKeyboardNavigation();
 const {
@@ -337,6 +337,7 @@ onMounted(() => {
 			:class="$style.communityNodeFooter"
 			v-if="communityNodeDetails"
 			:package-name="communityNodeDetails.packageName"
+			:show-manage="communityNodeDetails.installed && isInstanceOwner"
 		/>
 	</div>
 </template>

packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/CommunityNodeFooter.test.ts

@@ -0,0 +1,58 @@
+import { fireEvent } from '@testing-library/vue';
+import { VIEWS } from '@/constants';
+import { createTestingPinia } from '@pinia/testing';
+import { setActivePinia } from 'pinia';
+import CommunityNodeFooter from './CommunityNodeFooter.vue';
+import { createComponentRenderer } from '@/__tests__/render';
+import { vi } from 'vitest';
+
+const push = vi.fn();
+
+vi.mock('vue-router', async (importOriginal) => {
+	const actual = await importOriginal();
+	return {
+		...(actual as object),
+		useRouter: vi.fn(() => ({
+			push,
+		})),
+	};
+});
+
+describe('CommunityNodeInfo - links & bugs URL', () => {
+	beforeEach(() => {
+		setActivePinia(createTestingPinia());
+		const fetchMock = vi.fn().mockResolvedValue({
+			ok: true,
+			json: async () => ({
+				bugs: {
+					url: 'https://github.com/n8n-io/n8n/issues',
+				},
+			}),
+		});
+
+		vi.stubGlobal('fetch', fetchMock);
+	});
+
+	afterEach(() => {
+		vi.resetAllMocks();
+	});
+
+	it('calls router.push to open settings page when "Manage" is clicked', async () => {
+		const { getByText } = createComponentRenderer(CommunityNodeFooter)({
+			props: { packageName: 'n8n-nodes-test', showManage: true },
+		});
+
+		const manageLink = getByText('Manage');
+		await fireEvent.click(manageLink);
+
+		expect(push).toHaveBeenCalledWith({ name: VIEWS.COMMUNITY_NODES });
+	});
+
+	it('Manage should not be in the footer', async () => {
+		const { queryByText } = createComponentRenderer(CommunityNodeFooter)({
+			props: { packageName: 'n8n-nodes-test', showManage: false },
+		});
+
+		expect(queryByText('Manage')).not.toBeInTheDocument();
+	});
+});

packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/CommunityNodeFooter.vue

@@ -8,6 +8,7 @@ import { N8nText, N8nLink } from '@n8n/design-system';
 
 export interface Props {
 	packageName: string;
+	showManage: boolean;
 }
 const props = defineProps<Props>();
 
@@ -54,10 +55,12 @@ onMounted(async () => {
 
 <template>
 	<div :class="$style.container">
-		<N8nLink theme="text" @click="openSettingsPage">
-			<N8nText size="small" color="primary" bold> Manage </N8nText>
-		</N8nLink>
-		<N8nText size="small" color="primary" bold>|</N8nText>
+		<template v-if="props.showManage">
+			<N8nLink theme="text" @click="openSettingsPage">
+				<N8nText size="small" color="primary" bold> Manage </N8nText>
+			</N8nLink>
+			<N8nText size="small" color="primary" bold>|</N8nText>
+		</template>
 		<N8nLink theme="text" @click="openIssuesPage">
 			<N8nText size="small" color="primary" bold> Report issue </N8nText>
 		</N8nLink>

packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/CommunityNodeInfo.vue

@@ -142,14 +142,14 @@ onMounted(async () => {
 		</div>
 		<div v-if="!isOwner && !communityNodeDetails?.installed" :class="$style.contactOwnerHint">
 			<N8nIcon color="text-light" icon="info-circle" size="large" />
-			<nN8nText color="text-base" size="medium">
+			<N8nText color="text-base" size="medium">
 				<div style="padding-bottom: 8px">
 					{{ i18n.baseText('communityNodeInfo.contact.admin') }}
 				</div>
 				<N8nText bold v-if="ownerEmailList.length">
 					{{ ownerEmailList.join(', ') }}
 				</N8nText>
-			</nN8nText>
+			</N8nText>
 		</div>
 	</div>
 </template>

packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/NodesListPanel.vue

@@ -25,6 +25,7 @@ import CommunityNodeDetails from './CommunityNodeDetails.vue';
 import CommunityNodeInfo from './CommunityNodeInfo.vue';
 import CommunityNodeDocsLink from './CommunityNodeDocsLink.vue';
 import CommunityNodeFooter from './CommunityNodeFooter.vue';
+import { useUsersStore } from '@/stores/users.store';
 
 const i18n = useI18n();
 const { callDebounced } = useDebounce();
@@ -34,6 +35,8 @@ const { pushViewStack, popViewStack, updateCurrentViewStack } = useViewStacks();
 const { setActiveItemIndex, attachKeydownEvent, detachKeydownEvent } = useKeyboardNavigation();
 const nodeCreatorStore = useNodeCreatorStore();
 
+const { isInstanceOwner } = useUsersStore();
+
 const activeViewStack = computed(() => useViewStacks().activeViewStack);
 
 const communityNodeDetails = computed(() => activeViewStack.value.communityNodeDetails);
@@ -233,6 +236,7 @@ function onBackButton() {
 			<CommunityNodeFooter
 				v-if="communityNodeDetails && !isCommunityNodeActionsMode"
 				:package-name="communityNodeDetails.packageName"
+				:show-manage="communityNodeDetails.installed && isInstanceOwner"
 			/>
 		</aside>
 	</transition>