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

@@ -4,19 +4,34 @@
 			<n8n-text size="small">
 				<slot>
 					<span
+						v-if="expandFromContent"
+						v-html="preExpansionText"
 						:class="expanded ? $style['expanded'] : $style['truncated']"
 						:id="`${id}-content`"
-						role="region"
-						v-html="sanitizedContent"
+						role="pre-expansion-region"
+					/>
+					<a
+						v-if="expandFromContent"
+						v-html="expansionText"
+						role="expansion-region"
+						:aria-controls="`${id}-content`"
+						:aria-expanded="canTruncate && !expanded ? 'false' : 'true'"
+						@click="toggleExpanded"
+					/>
+					<span
+						:class="expanded ? $style['expanded'] : $style['truncated']"
+						:id="`${id}-content`"
+						role="post-expansion-region"
+						v-html="expandFromContent ? postExpansionText : sanitizedContent"
 					/>
 					<span v-if="canTruncate">
 						<a
 							role="button"
+							@click="toggleExpanded"
 							:aria-controls="`${id}-content`"
 							:aria-expanded="canTruncate && !expanded ? 'false' : 'true'"
-							@click="toggleExpanded"
 						>
-							{{ t(expanded ? 'notice.showLess' : 'notice.showMore') }}
+							{{ expanded ? t('notice.showLess') : expandFromContent ? '' : t('notice.showMore') }}
 						</a>
 					</span>
 				</slot>
@@ -53,14 +68,22 @@ export default Vue.extend({
 			type: Number,
 			default: 150,
 		},
-		truncate: {
+		trailingEllipsis: {
 			type: Boolean,
 			default: false,
 		},
 		content: {
 			type: String,
 			default: '',
 		},
+		expandFromContent: {
+			type: Boolean,
+			default: false,
+		},
+		expansionTextPattern: {
+			type: RegExp,
+			default: () => /./,
+		},
 	},
 	components: {
 		N8nText,
@@ -79,18 +102,37 @@ export default Vue.extend({
 			];
 		},
 		canTruncate(): boolean {
-			return this.truncate && this.content.length > this.truncateAt;
+			return this.truncateAt !== undefined && this.content.length > this.truncateAt;
 		},
 		truncatedContent(): string {
 			if (!this.canTruncate || this.expanded) {
 				return this.content;
 			}
 
-			return this.content.slice(0, this.truncateAt as number) + '...';
+			return this.content.slice(0, this.truncateAt as number) + (this.trailingEllipsis ? '...' : '');
 		},
 		sanitizedContent(): string {
 			return sanitizeHtml(this.truncatedContent);
 		},
+		expansionText(): string {
+			const match = this.truncatedContent.match(this.expansionTextPattern);
+
+			if (match.length !== 1) {
+				throw new Error('Expansion text must appear once in content');
+			}
+
+			return match[0];
+		},
+		preExpansionText(): string {
+			const pre = this.truncatedContent.split(this.expansionTextPattern).shift();
+
+			return sanitizeHtml(pre);
+		},
+		postExpansionText(): string {
+			const post = this.truncatedContent.split(this.expansionTextPattern).pop();
+
+			return sanitizeHtml(post);
+		},
 	},
 	methods: {
 		toggleExpanded() {
@@ -102,19 +144,25 @@ export default Vue.extend({
 
 <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);
 	}
+
+	span {
+		line-height: var(--font-line-height-compact);
+	}
 }
 
 .warning {