Discoverability flow and scopes notice for HTTP Request node

packages/cli/src/CredentialsHelper.ts

@@ -296,6 +296,9 @@ export class CredentialsHelper extends ICredentialsHelper {
 	getScopes(type: string): string[] {
 		const scopeProperty = this.getCredentialsProperties(type).find(({ name }) => name === 'scope');
 
+		// edge case: scope property exists but is required to be empty string, e.g. GoToWebinar
+		if (scopeProperty?.default === '') return [];
+
 		if (!scopeProperty?.default || typeof scopeProperty.default !== 'string') {
 			const errorMessage = `No \`scope\` property found for credential type: ${type}`;
 

packages/design-system/src/components/N8nNotice/Notice.vue

@@ -1,24 +1,14 @@
 <template>
-	<div :id="id" :class="classes" role="alert">
+	<div :id="id" :class="classes" role="alert" @click=onClick>
 		<div class="notice-content">
-			<n8n-text size="small">
+			<n8n-text size="small" :compact="true">
 				<slot>
 					<span
-						:class="expanded ? $style['expanded'] : $style['truncated']"
+						:class="showFullContent ? $style['expanded'] : $style['truncated']"
 						:id="`${id}-content`"
 						role="region"
-						v-html="sanitizedContent"
+						v-html="sanitizeHtml(showFullContent ? fullContent : content)"
 					/>
-					<span v-if="canTruncate">
-						<a
-							role="button"
-							:aria-controls="`${id}-content`"
-							:aria-expanded="canTruncate && !expanded ? 'false' : 'true'"
-							@click="toggleExpanded"
-						>
-							{{ t(expanded ? 'notice.showLess' : 'notice.showMore') }}
-						</a>
-					</span>
 				</slot>
 			</n8n-text>
 		</div>
@@ -30,9 +20,7 @@ import Vue from 'vue';
 import sanitizeHtml from 'sanitize-html';
 import N8nText from "../../components/N8nText";
 import Locale from "../../mixins/locale";
-import {uid} from "../../utils";
-
-const DEFAULT_TRUNCATION_MAX_LENGTH = 150;
+import { uid } from "../../utils";
 
 export default Vue.extend({
 	name: 'n8n-notice',
@@ -49,15 +37,11 @@ export default Vue.extend({
 			type: String,
 			default: 'warning',
 		},
-		truncateAt: {
-			type: Number,
-			default: 150,
-		},
-		truncate: {
-			type: Boolean,
-			default: false,
-		},
 		content: {
+			required: true,
+			type: String,
+		},
+		fullContent: {
 			type: String,
 			default: '',
 		},
@@ -67,7 +51,7 @@ export default Vue.extend({
 	},
 	data() {
 		return {
-			expanded: false,
+			showFullContent: false,
 		};
 	},
 	computed: {
@@ -79,38 +63,46 @@ export default Vue.extend({
 			];
 		},
 		canTruncate(): boolean {
-			return this.truncate && this.content.length > this.truncateAt;
-		},
-		truncatedContent(): string {
-			if (!this.canTruncate || this.expanded) {
-				return this.content;
-			}
-
-			return this.content.slice(0, this.truncateAt as number) + '...';
-		},
-		sanitizedContent(): string {
-			return sanitizeHtml(this.truncatedContent);
+			return this.fullContent !== undefined;
 		},
 	},
 	methods: {
 		toggleExpanded() {
-			this.expanded = !this.expanded;
+			this.showFullContent = !this.showFullContent;
+		},
+		sanitizeHtml(text: string): string {
+			return sanitizeHtml(
+				text, {
+					allowedAttributes: { a: ['data-key', 'href', 'target'] },
+				}
+			);
+		},
+		onClick(e) {
+			if (e.target.localName !== 'a') return;
+
+			if (e.target.dataset.key === 'show-less') {
+				this.showFullContent = false;
+			} else if (e.target.dataset.key === 'toggle-expand') {
+				this.showFullContent = !this.showFullContent;
+			}
 		},
 	},
 });
 </script>
 
 <style lang="scss" module>
 .notice {
+	font-size: var(--font-size-2xs);
 	display: flex;
 	color: var(--custom-font-black);
-	margin: 0;
-	padding: var(--spacing-xs);
+	margin: var(--spacing-s) 0;
+	padding: var(--spacing-2xs);
 	background-color: var(--background-color);
 	border-width: 1px 1px 1px 7px;
 	border-style: solid;
 	border-color: var(--border-color);
 	border-radius: var(--border-radius-small);
+	line-height: var(--font-line-height-compact);
 
 	a {
 		font-weight: var(--font-weight-bold);

packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts

@@ -11,6 +11,7 @@ describe('components', () => {
 				slots: {
 					default: 'This is a notice.',
 				},
+				stubs: ['n8n-text'],
 			});
 			expect(wrapper.html()).toMatchSnapshot();
 		});
@@ -23,73 +24,37 @@ describe('components', () => {
 							id: 'notice',
 							content: 'This is a notice.',
 						},
+						stubs: ['n8n-text'],
 					});
 					expect(wrapper.html()).toMatchSnapshot();
 				});
 
-				it('should render html', () => {
+				it('should render HTML', () => {
 					const wrapper = render(N8nNotice, {
 						props: {
 							id: 'notice',
 							content: '<strong>Hello world!</strong> This is a notice.',
 						},
+						stubs: ['n8n-text'],
 					});
 
 					expect(wrapper.container.querySelectorAll('strong')).toHaveLength(1);
 					expect(wrapper.html()).toMatchSnapshot();
 				});
 
-				it('should sanitize rendered html', () => {
+				it('should sanitize rendered HTML', () => {
 					const wrapper = render(N8nNotice, {
 						props: {
 							id: 'notice',
 							content: '<script>alert(1);</script> This is a notice.',
 						},
+						stubs: ['n8n-text'],
 					});
 
 					expect(wrapper.container.querySelector('script')).not.toBeTruthy();
 					expect(wrapper.html()).toMatchSnapshot();
 				});
 			});
 		});
-
-		describe('truncation', () => {
-			it('should truncate content longer than 150 characters', async () => {
-				const wrapper = render(N8nNotice, {
-					props: {
-						id: 'notice',
-						truncate: true,
-						content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-					},
-				});
-
-				const button = await wrapper.findByRole('button');
-				const region = await wrapper.findByRole('region');
-
-				expect(button).toBeVisible();
-				expect(button).toHaveTextContent('Show more');
-
-				expect(region).toBeVisible();
-				expect(region.textContent!.endsWith('...')).toBeTruthy();
-			});
-
-			it('should expand truncated text when clicking show more', async () => {
-				const wrapper = render(N8nNotice, {
-					props: {
-						id: 'notice',
-						truncate: true,
-						content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-					},
-				});
-
-				const button = await wrapper.findByRole('button');
-				const region = await wrapper.findByRole('region');
-
-				await fireEvent.click(button);
-
-				expect(button).toHaveTextContent('Show less');
-				expect(region.textContent!.endsWith('...')).not.toBeTruthy();
-			});
-		});
 	});
 });

packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap

@@ -1,28 +1,33 @@
 // Vitest Snapshot v1
 
-exports[`components > N8nNotice > props > content > should render correctly with content prop 1`] = `
-"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_4m4il_1 _warning_4m4il_16\\">
-  <div class=\\"notice-content\\"><span class=\\"_size-small_9dlpz_24 _regular_9dlpz_5\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_4m4il_41\\">This is a notice.</span>
-    <!----></span></div>
+exports[`components > N8nNotice > props > content > should render HTML 1`] = `
+"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_kaqw5_1 _warning_kaqw5_18\\">
+  <div class=\\"notice-content\\">
+    <n8n-text-stub size=\\"small\\" compact=\\"true\\" tag=\\"span\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_kaqw5_43\\"><strong>Hello world!</strong> This is a notice.</span></n8n-text-stub>
+  </div>
 </div>"
 `;
 
-exports[`components > N8nNotice > props > content > should render html 1`] = `
-"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_4m4il_1 _warning_4m4il_16\\">
-  <div class=\\"notice-content\\"><span class=\\"_size-small_9dlpz_24 _regular_9dlpz_5\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_4m4il_41\\"><strong>Hello world!</strong> This is a notice.</span>
-    <!----></span></div>
+exports[`components > N8nNotice > props > content > should render correctly with content prop 1`] = `
+"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_kaqw5_1 _warning_kaqw5_18\\">
+  <div class=\\"notice-content\\">
+    <n8n-text-stub size=\\"small\\" compact=\\"true\\" tag=\\"span\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_kaqw5_43\\">This is a notice.</span></n8n-text-stub>
+  </div>
 </div>"
 `;
 
-exports[`components > N8nNotice > props > content > should sanitize rendered html 1`] = `
-"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_4m4il_1 _warning_4m4il_16\\">
-  <div class=\\"notice-content\\"><span class=\\"_size-small_9dlpz_24 _regular_9dlpz_5\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_4m4il_41\\"> This is a notice.</span>
-    <!----></span></div>
+exports[`components > N8nNotice > props > content > should sanitize rendered HTML 1`] = `
+"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_kaqw5_1 _warning_kaqw5_18\\">
+  <div class=\\"notice-content\\">
+    <n8n-text-stub size=\\"small\\" compact=\\"true\\" tag=\\"span\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_kaqw5_43\\"> This is a notice.</span></n8n-text-stub>
+  </div>
 </div>"
 `;
 
 exports[`components > N8nNotice > should render correctly 1`] = `
-"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_4m4il_1 _warning_4m4il_16\\">
-  <div class=\\"notice-content\\"><span class=\\"_size-small_9dlpz_24 _regular_9dlpz_5\\">This is a notice.</span></div>
+"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_kaqw5_1 _warning_kaqw5_18\\">
+  <div class=\\"notice-content\\">
+    <n8n-text-stub size=\\"small\\" compact=\\"true\\" tag=\\"span\\">This is a notice.</n8n-text-stub>
+  </div>
 </div>"
 `;

packages/editor-ui/src/Interface.ts

@@ -159,6 +159,9 @@ export interface IExternalHooks {
 	run(eventName: string, metadata?: IDataObject): Promise<void>;
 }
 
+/**
+ * @deprecated Do not add methods to this interface.
+ */
 export interface IRestApi {
 	getActiveWorkflows(): Promise<string[]>;
 	getActivationError(id: string): Promise<IActivationError | undefined >;
@@ -822,9 +825,14 @@ export interface ICredentialMap {
 	[name: string]: ICredentialsResponse;
 }
 
+interface IScopesMap {
+	[credentialType: string]: string[];
+}
+
 export interface ICredentialsState {
 	credentialTypes: ICredentialTypeMap;
 	credentials: ICredentialMap;
+	scopes: IScopesMap;
 }
 
 export interface ITagsState {

packages/editor-ui/src/api/credentials.ts

@@ -20,6 +20,10 @@ export async function getAllCredentials(context: IRestApiContext): Promise<ICred
 	return await makeRestApiRequest(context, 'GET', '/credentials');
 }
 
+export async function getScopes(context: IRestApiContext, credentialType: string): Promise<string[]> {
+	return await makeRestApiRequest(context, 'GET', '/oauth2-credential/scopes', { credentialType });
+}
+
 export async function createNewCredential(context: IRestApiContext, data: ICredentialsDecrypted): Promise<ICredentialsResponse> {
 	return makeRestApiRequest(context, 'POST', `/credentials`, data as unknown as IDataObject);
 }

packages/editor-ui/src/components/Node.vue

@@ -75,7 +75,7 @@
 <script lang="ts">
 
 import Vue from 'vue';
-import { WAIT_TIME_UNLIMITED } from '@/constants';
+import { CUSTOM_API_CALL_KEY, WAIT_TIME_UNLIMITED } from '@/constants';
 import { externalHooks } from '@/components/mixins/externalHooks';
 import { nodeBase } from '@/components/mixins/nodeBase';
 import { nodeHelpers } from '@/components/mixins/nodeHelpers';
@@ -336,7 +336,11 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 	},
 	methods: {
 		setSubtitle() {
-			this.nodeSubtitle = this.getNodeSubtitle(this.data, this.nodeType, this.getWorkflow()) || '';
+			const nodeSubtitle = this.getNodeSubtitle(this.data, this.nodeType, this.getWorkflow()) || '';
+
+			this.nodeSubtitle = nodeSubtitle.includes(CUSTOM_API_CALL_KEY)
+				? ''
+				: nodeSubtitle;
 		},
 		disableNode () {
 			this.disableNodes([this.data]);

packages/editor-ui/src/components/NodeCredentials.vue

@@ -101,11 +101,11 @@ export default mixins(
 		}),
 		isProxyAuth(): boolean {
 			return this.isHttpRequestNodeV2(this.node) &&
-				this.node.parameters.authenticateWith === 'nodeCredential';
+				this.node.parameters.authentication === 'existingCredentialType';
 		},
 		isGenericAuth(): boolean {
 			return this.isHttpRequestNodeV2(this.node) &&
-				this.node.parameters.authenticateWith === 'genericAuth';
+				this.node.parameters.authentication === 'genericCredentialType';
 		},
 		credentialTypesNode (): string[] {
 			return this.credentialTypesNodeDescription