feat(editor): Add docs sidebar to credential modal (#9914)

Co-authored-by: Csaba Tuncsik <csaba@n8n.io>

packages/editor-ui/src/components/CredentialEdit/CredentialDocs.vue

@@ -0,0 +1,160 @@
+<template>
+	<div :class="$style.docs">
+		<div :class="$style.header">
+			<p :class="$style.title">{{ i18n.baseText('credentialEdit.credentialEdit.setupGuide') }}</p>
+			<n8n-link
+				:class="$style.docsLink"
+				theme="text"
+				new-window
+				:to="documentationUrl"
+				@click="onDocumentationUrlClick"
+			>
+				{{ i18n.baseText('credentialEdit.credentialEdit.docs') }}
+				<n8n-icon icon="external-link-alt" size="small" :class="$style.externalIcon" />
+			</n8n-link>
+		</div>
+		<VueMarkdown :source="docs" :options="{ html: true }" :class="$style.markdown" />
+		<Feedback
+			:class="$style.feedback"
+			:model-value="submittedFeedback"
+			@update:model-value="onFeedback"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import Feedback from '@/components/Feedback.vue';
+import { useI18n } from '@/composables/useI18n';
+import { useTelemetry } from '@/composables/useTelemetry';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import type { ICredentialType } from 'n8n-workflow';
+import { ref } from 'vue';
+import VueMarkdown from 'vue-markdown-render';
+
+type Props = {
+	credentialType: ICredentialType;
+	docs: string;
+	documentationUrl: string;
+};
+
+const props = defineProps<Props>();
+
+const workflowsStore = useWorkflowsStore();
+
+const i18n = useI18n();
+const telemetry = useTelemetry();
+
+const submittedFeedback = ref<'positive' | 'negative'>();
+
+function onFeedback(feedback: 'positive' | 'negative') {
+	submittedFeedback.value = feedback;
+	telemetry.track('User gave feedback on credential docs', {
+		feedback,
+		docs_link: props.documentationUrl,
+		credential_type: props.credentialType.name,
+		workflow_id: workflowsStore.workflowId,
+	});
+}
+
+function onDocumentationUrlClick(): void {
+	telemetry.track('User clicked credential modal docs link', {
+		docs_link: props.documentationUrl,
+		credential_type: props.credentialType.name,
+		source: 'modal-docs-sidebar',
+		workflow_id: workflowsStore.workflowId,
+	});
+}
+</script>
+
+<style lang="scss" module>
+.docs {
+	background-color: var(--color-background-light);
+	border-left: var(--border-base);
+	padding: var(--spacing-s);
+	height: 100%;
+	overflow-y: auto;
+}
+
+.title {
+	font-size: var(--font-size-m);
+	font-weight: var(--font-weight-bold);
+}
+
+.header {
+	display: flex;
+	gap: var(--spacing-2xs);
+	justify-content: space-between;
+	align-items: center;
+	border-bottom: var(--border-base);
+	padding-bottom: var(--spacing-s);
+	margin-bottom: var(--spacing-s);
+}
+
+.docsLink {
+	color: var(--color-text-light);
+
+	&:hover .externalIcon {
+		color: var(--color-primary);
+	}
+}
+
+.externalIcon {
+	color: var(--color-text-light);
+	padding-left: var(--spacing-4xs);
+}
+
+.feedback {
+	border-top: var(--border-base);
+	padding-top: var(--spacing-s);
+	margin-top: var(--spacing-s);
+}
+
+.markdown {
+	color: var(--color-text-base);
+	font-size: var(--font-size-xs);
+	line-height: var(--font-line-height-xloose);
+
+	h2 {
+		font-size: var(--font-size-s);
+		color: var(--color-text-base);
+		font-weight: var(--font-weight-bold);
+		margin-top: var(--spacing-s);
+		margin-bottom: var(--spacing-2xs);
+	}
+
+	ul,
+	ol {
+		margin: var(--spacing-2xs) 0;
+		margin-left: var(--spacing-m);
+	}
+
+	ol ol {
+		list-style-type: lower-alpha;
+	}
+
+	li > ul,
+	li > ol {
+		margin: var(--spacing-4xs) 0;
+		margin-left: var(--spacing-xs);
+	}
+
+	li + li {
+		margin-top: var(--spacing-4xs);
+	}
+
+	a {
+		color: var(--color-text-base);
+		text-decoration: underline;
+	}
+
+	p {
+		line-height: var(--font-line-height-xloose);
+		margin-bottom: var(--spacing-2xs);
+	}
+
+	img {
+		width: 100%;
+		padding: var(--spacing-4xs) 0;
+	}
+}
+</style>