feat: hoc to support markdown content with variable interpolation

SigNoz · Oct 4, 2023 · 4262137 · 4262137
1 parent 81b10d1
commit 4262137
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 41 deletions.
diff --git a/frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx b/frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx
@@ -1,10 +1,18 @@
+/* eslint-disable no-restricted-syntax */
 /* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import ReactMarkdown from 'react-markdown';
 import { CodeProps } from 'react-markdown/lib/ast-to-react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { a11yDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 
 import CodeCopyBtn from './CodeCopyBtn/CodeCopyBtn';
 
+interface LinkProps {
+	href: string;
+	children: React.ReactElement;
+}
+
 function Pre({ children }: { children: React.ReactNode }): JSX.Element {
 	return (
 		<pre className="code-snippet-container">
@@ -40,4 +48,52 @@ function Code({
 	);
 }
 
-export { Code, Pre };
+function Link({ href, children }: LinkProps): JSX.Element {
+	return (
+		<a href={href} target="_blank" rel="noopener noreferrer">
+			{children}
+		</a>
+	);
+}
+
+const interpolateMarkdown = (
+	markdownContent: any,
+	variables: { [s: string]: unknown } | ArrayLike<unknown>,
+) => {
+	let interpolatedContent = markdownContent;
+
+	const variableEntries = Object.entries(variables);
+
+	// Loop through variables and replace placeholders with values
+	for (const [key, value] of variableEntries) {
+		const placeholder = `{{${key}}}`;
+		const regex = new RegExp(placeholder, 'g');
+		interpolatedContent = interpolatedContent.replace(regex, value);
+	}
+
+	return interpolatedContent;
+};
+
+function MarkdownRenderer({
+	markdownContent,
+	variables,
+}: {
+	markdownContent: any;
+	variables: any;
+}): JSX.Element {
+	const interpolatedMarkdown = interpolateMarkdown(markdownContent, variables);
+
+	return (
+		<ReactMarkdown
+			components={{
+				a: Link,
+				pre: Pre,
+				code: Code,
+			}}
+		>
+			{interpolatedMarkdown}
+		</ReactMarkdown>
+	);
+}
+
+export { Code, Link, MarkdownRenderer, Pre };
diff --git a/frontend/src/container/OnboardingContainer/APM/GoLang/GoLang.tsx b/frontend/src/container/OnboardingContainer/APM/GoLang/GoLang.tsx
@@ -1,9 +1,8 @@
 import './GoLang.styles.scss';
 
 import { Form, Input } from 'antd';
-import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
+import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
-import ReactMarkdown from 'react-markdown';
 
 import ConnectionStatus from '../common/ConnectionStatus/ConnectionStatus';
 import GoLangDocs from './goLang.md';
@@ -14,6 +13,15 @@ export default function GoLang({
 	activeStep: number;
 }): JSX.Element {
 	const [form] = Form.useForm();
+	const serviceName = Form.useWatch('Service Name', form);
+	const SIGNOZ_INGESTION_KEY = null;
+	const REGION = null;
+
+	const variables = {
+		myapp: serviceName || '<myapp>',
+		ingestionKey: SIGNOZ_INGESTION_KEY || '<SIGNOZ_INGESTION_KEY>',
+		region: REGION || 'region',
+	};
 
 	return (
 		<>
@@ -45,14 +53,7 @@ export default function GoLang({
 					</div>
 
 					<div className="content-container">
-						<ReactMarkdown
-							components={{
-								pre: Pre,
-								code: Code,
-							}}
-						>
-							{GoLangDocs}
-						</ReactMarkdown>
+						<MarkdownRenderer markdownContent={GoLangDocs} variables={variables} />
 					</div>
 				</div>
 			)}

diff --git a/frontend/src/container/OnboardingContainer/APM/Java/Java.tsx b/frontend/src/container/OnboardingContainer/APM/Java/Java.tsx
@@ -1,10 +1,10 @@
 import './Java.styles.scss';
 
 import { Form, Input, Select } from 'antd';
-import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
+import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
 import { useEffect, useState } from 'react';
-import ReactMarkdown from 'react-markdown';
+// import ReactMarkdown from 'react-markdown';
 import { trackEvent } from 'utils/segmentAnalytics';
 import { popupContainer } from 'utils/selectPopupContainer';
 
@@ -31,6 +31,9 @@ export default function Java({
 		SprintBootDocs,
 	);
 	const [form] = Form.useForm();
+	const serviceName = Form.useWatch('Service Name', form);
+	const SIGNOZ_INGESTION_KEY = null;
+	const REGION = null;
 
 	useEffect(() => {
 		// on language select
@@ -59,6 +62,12 @@ export default function Java({
 		}
 	};
 
+	const variables = {
+		myapp: serviceName || '<myapp>',
+		ingestionKey: SIGNOZ_INGESTION_KEY || '<SIGNOZ_INGESTION_KEY>',
+		region: REGION || 'region',
+	};
+
 	return (
 		<>
 			{activeStep === 2 && (
@@ -119,14 +128,10 @@ export default function Java({
 					</div>
 
 					<div className="content-container">
-						<ReactMarkdown
-							components={{
-								pre: Pre,
-								code: Code,
-							}}
-						>
-							{selectedFrameWorkDocs}
-						</ReactMarkdown>
+						<MarkdownRenderer
+							markdownContent={selectedFrameWorkDocs}
+							variables={variables}
+						/>
 					</div>
 				</div>
 			)}

diff --git a/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.tsx b/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.tsx
@@ -1,10 +1,9 @@
 import './Javascript.styles.scss';
 
 import { Form, Input, Select } from 'antd';
-import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
+import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
 import { useEffect, useState } from 'react';
-import ReactMarkdown from 'react-markdown';
 import { trackEvent } from 'utils/segmentAnalytics';
 import { popupContainer } from 'utils/selectPopupContainer';
 
@@ -29,6 +28,15 @@ export default function Javascript({
 		ExpressDocs,
 	);
 	const [form] = Form.useForm();
+	const serviceName = Form.useWatch('Service Name', form);
+	const SIGNOZ_INGESTION_KEY = null;
+	const REGION = null;
+
+	const variables = {
+		myapp: serviceName || '<myapp>',
+		ingestionKey: SIGNOZ_INGESTION_KEY || '<SIGNOZ_INGESTION_KEY>',
+		region: REGION || 'region',
+	};
 
 	useEffect(() => {
 		// on language select
@@ -116,14 +124,10 @@ export default function Javascript({
 					</div>
 
 					<div className="content-container">
-						<ReactMarkdown
-							components={{
-								pre: Pre,
-								code: Code,
-							}}
-						>
-							{selectedFrameWorkDocs}
-						</ReactMarkdown>
+						<MarkdownRenderer
+							markdownContent={selectedFrameWorkDocs}
+							variables={variables}
+						/>
 					</div>
 				</div>
 			)}

diff --git a/frontend/src/container/OnboardingContainer/APM/Python/Python.tsx b/frontend/src/container/OnboardingContainer/APM/Python/Python.tsx
@@ -1,10 +1,9 @@
 import './Python.styles.scss';
 
 import { Form, Input, Select } from 'antd';
-import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
+import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
 import { useEffect, useState } from 'react';
-import ReactMarkdown from 'react-markdown';
 import { trackEvent } from 'utils/segmentAnalytics';
 import { popupContainer } from 'utils/selectPopupContainer';
 
@@ -31,6 +30,9 @@ export default function Python({
 	const [selectedFrameWork, setSelectedFrameWork] = useState('django');
 	const [selectedFrameWorkDocs, setSelectedFrameWorkDocs] = useState(DjangoDocs);
 	const [form] = Form.useForm();
+	const serviceName = Form.useWatch('Service Name', form);
+	const SIGNOZ_INGESTION_KEY = null;
+	const REGION = null;
 
 	useEffect(() => {
 		// on language select
@@ -62,6 +64,12 @@ export default function Python({
 		}
 	};
 
+	const variables = {
+		myapp: serviceName || '<myapp>',
+		ingestionKey: SIGNOZ_INGESTION_KEY || '<SIGNOZ_INGESTION_KEY>',
+		region: REGION || 'region',
+	};
+
 	return (
 		<>
 			{activeStep === 2 && (
@@ -126,14 +134,10 @@ export default function Python({
 					</div>
 
 					<div className="content-container">
-						<ReactMarkdown
-							components={{
-								pre: Pre,
-								code: Code,
-							}}
-						>
-							{selectedFrameWorkDocs}
-						</ReactMarkdown>
+						<MarkdownRenderer
+							markdownContent={selectedFrameWorkDocs}
+							variables={variables}
+						/>
 					</div>
 				</div>
 			)}