Server side env var interpolation

packages/otelbin/.eslintignore

@@ -1 +1,2 @@
-src/lib/urlState/jsurl2.ts
+src/lib/urlState/jsurl2.ts
+src/components/textArea.tsx

packages/otelbin/package.json

@@ -22,6 +22,7 @@
 		"@monaco-editor/react": "^4.6.0",
 		"@radix-ui/react-accordion": "^1.1.2",
 		"@radix-ui/react-dialog": "^1.0.5",
+		"@radix-ui/react-label": "^2.0.2",
 		"@radix-ui/react-popover": "^1.0.7",
 		"@radix-ui/react-select": "^2.0.0",
 		"@radix-ui/react-slot": "^1.0.2",

packages/otelbin/src/components/EnvVarForm.tsx

@@ -0,0 +1,158 @@
+// SPDX-FileCopyrightText: 2023 Dash0 Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useEffect, useRef, useState } from "react";
+import { useEnvVarMenu } from "~/contexts/EditorContext";
+import { IconButton } from "./icon-button";
+import { Check, X, XCircle } from "lucide-react";
+import { Label } from "./label";
+import { Textarea } from "./textArea";
+import { useUrlState } from "~/lib/urlState/client/useUrlState";
+import { envVarBinding } from "./validation/binding";
+import React from "react";
+
+export interface IEnvVar {
+	name: string;
+	linesNumber: number[];
+	value: string;
+}
+
+export default function EnvVarForm({ envVarData }: { envVarData: Record<string, IEnvVar> }) {
+	const { openEnvVarMenu, setOpenEnvVarMenu } = useEnvVarMenu();
+	const [{ env }] = useUrlState([envVarBinding]);
+
+	function handleClose() {
+		setOpenEnvVarMenu(false);
+	}
+
+	const unboundVariables = Object.values(envVarData).filter((envVar) => env[envVar.name] === undefined);
+
+	return (
+		<div
+			style={{
+				width: openEnvVarMenu ? `${400}px` : 0,
+				maxWidth: openEnvVarMenu ? `${400}px` : 0,
+				transition: "all 0.2s ease-in-out",
+			}}
+			className="shrink-0 bg-default shadow-none border-b-default border-r overflow-hidden overflow-y-auto"
+		>
+			<div className="w-[400px] flex flex-col h-full">
+				<div className="flex justify-between items-center px-4 pl-4 pr-1 py-[4.5px] shadow-none border-b-default border-b">
+					<div className="text-sm text-default">
+						<span
+							style={{
+								color: unboundVariables.length > 0 ? "#F87171" : "#69F18E",
+							}}
+						>
+							{unboundVariables.length}
+						</span>{" "}
+						{`${unboundVariables.length > 1 ? "variables" : "variable"} unbound`}
+					</div>
+					<IconButton onClick={handleClose} variant={"transparent"} size={"xs"}>
+						<X height={12} />
+					</IconButton>
+				</div>
+				<div className="px-4">
+					{Object.values(envVarData).map((envVar) => (
+						<EnvVar key={envVar.name} envVar={envVar} />
+					))}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+function EnvVar({ envVar }: { envVar: IEnvVar }) {
+	const textAreaRef = useRef<HTMLTextAreaElement>(null);
+	const [{ env }, getLink] = useUrlState([envVarBinding]);
+	const [envVarValue, setEnvVarValue] = useState(env[envVar.name] ?? envVar.value);
+
+	function handleEnvVarChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
+		setEnvVarValue(event.target.value);
+	}
+
+	function handleEnvVarSubmit() {
+		if (typeof window !== "undefined") {
+			window.history.pushState(null, "", getLink({ env: { ...env, [envVar.name]: envVarValue } }));
+		}
+	}
+
+	useEffect(() => {
+		if (textAreaRef.current) {
+			textAreaRef.current.style.height = "0px";
+			const scrollHeight = textAreaRef.current.scrollHeight;
+			textAreaRef.current.style.height = scrollHeight + "px";
+		}
+	}, [envVarValue]);
+
+	return (
+		<div className="flex flex-col gap-y-1 my-6">
+			<div className="grid w-full items-center gap-1.5 h-full">
+				<div className="flex gap-x-1 items-center">
+					<Label htmlFor="envVar">{envVar.name}</Label>
+					{envVarValue === env[envVar.name] && <Check height={14} color={"#69F18E"} />}
+				</div>
+				<div className="relative">
+					<Textarea
+						value={envVarValue}
+						ref={textAreaRef}
+						onChange={handleEnvVarChange}
+						className="placeholder:italic h-[35px] min-h-[35px] max-h-[100px] overflow-hidden resize-none w-full pr-10"
+						id="envVar"
+						placeholder={env[envVar.name] === "" ? "empty" : "enter value"}
+					/>
+					{envVarValue === env[envVar.name] ? (
+						<IconButton
+							onClick={() => {
+								setEnvVarValue("");
+							}}
+							variant={"transparent"}
+							size={"xs"}
+							className="absolute right-2 top-[6px] z-10"
+						>
+							<XCircle height={16} />
+						</IconButton>
+					) : envVarValue !== env[envVar.name] ? (
+						<IconButton
+							onClick={handleEnvVarSubmit}
+							variant={"transparent"}
+							size={"xs"}
+							className="absolute right-2 top-[6px] z-10"
+						>
+							<Check height={16} />
+						</IconButton>
+					) : !envVarValue ? (
+						<IconButton
+							onClick={handleEnvVarSubmit}
+							variant={"transparent"}
+							size={"xs"}
+							className="absolute right-2 top-[6px] z-10"
+						>
+							<Check height={16} />
+						</IconButton>
+					) : (
+						<IconButton
+							onClick={() => {
+								setEnvVarValue("");
+							}}
+							variant={"transparent"}
+							size={"xs"}
+							className="absolute right-2 top-[6px] z-10"
+						>
+							<XCircle height={16} />
+						</IconButton>
+					)}
+				</div>
+			</div>
+			<Label className="text-[12px] text-[#AFAFB2]" htmlFor="envVar">
+				{`Used ${envVar.linesNumber.length} ${envVar.linesNumber.length > 1 ? `times` : `time`} on line `}
+				{envVar.linesNumber.map((lineNumber, index) => (
+					<React.Fragment key={lineNumber}>
+						<span className="text-blue-400">{lineNumber}</span>
+						{index < envVar.linesNumber.length - 1 ? ` and ` : ``}
+					</React.Fragment>
+				))}
+			</Label>
+		</div>
+	);
+}

packages/otelbin/src/components/label.tsx

@@ -0,0 +1,22 @@
+// SPDX-FileCopyrightText: 2023 Dash0 Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "~/lib/utils";
+
+const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+
+const Label = React.forwardRef<
+	React.ElementRef<typeof LabelPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+	<LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

packages/otelbin/src/components/monaco-editor/Editor.tsx

@@ -26,7 +26,9 @@ import { IconButton } from "~/components/icon-button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/tooltip";
 import { track } from "@vercel/analytics";
 import { useServerSideValidation } from "../validation/useServerSideValidation";
-import { selectConfigType } from "./parseYaml";
+import { extractEnvVarData, extractVariables, selectConfigType } from "./parseYaml";
+import EnvVarForm from "../EnvVarForm";
+import { envVarBinding } from "../validation/binding";
 
 const firaCode = Fira_Code({
 	display: "swap",
@@ -42,10 +44,12 @@ export default function Editor({ locked, setLocked }: { locked: boolean; setLock
 	const { setViewMode, viewMode } = useViewMode();
 	const savedOpenModal = Boolean(typeof window !== "undefined" && localStorage.getItem("welcomeModal"));
 	const [openDialog, setOpenDialog] = useState(savedOpenModal ? !savedOpenModal : true);
-	const [{ config }, getLink] = useUrlState([editorBinding]);
+	const [{ config, env }, getLink] = useUrlState([editorBinding, envVarBinding]);
 	const [currentConfig, setCurrentConfig] = useState<string>(config);
 	const clerk = useClerk();
-	const serverSideValidationResult = useServerSideValidation();
+	const [envVariables, setEnvVariables] = useState<string[]>([]);
+	const envVarData = extractEnvVarData(envVariables, env, editorRef);
+	const serverSideValidationResult = useServerSideValidation(envVarData);
 
 	const onWidthChange = useCallback((newWidth: number) => {
 		localStorage.setItem("width", String(newWidth));
@@ -146,6 +150,10 @@ export default function Editor({ locked, setLocked }: { locked: boolean; setLock
 		}
 	}
 
+	useEffect(() => {
+		setEnvVariables(extractVariables(currentConfig));
+	}, [currentConfig]);
+
 	return (
 		<>
 			<WelcomeModal open={openDialog} setOpen={setOpenDialog} />
@@ -191,6 +199,7 @@ export default function Editor({ locked, setLocked }: { locked: boolean; setLock
 							{viewMode !== "pipeline" && <ValidationErrorConsole errors={totalValidationErrors} font={firaCode} />}
 							{viewMode == "both" && <ResizeBar onWidthChange={onWidthChange} />}
 						</div>
+						{envVariables.length > 0 && <EnvVarForm envVarData={envVarData} />}
 						<div className="z-0 min-h-full w-full shrink grow relative">
 							<AutoSizer>
 								{({ width, height }) => (

packages/otelbin/src/components/monaco-editor/parseYaml.ts

@@ -3,6 +3,8 @@
 
 import { Parser } from "yaml";
 import JsYaml, { FAILSAFE_SCHEMA } from "js-yaml";
+import type { editor } from "monaco-editor";
+import type { IEnvVar } from "../EnvVarForm";
 export interface SourceToken {
 	type:
 		| "byte-order-mark"
@@ -250,3 +252,32 @@ export function selectConfigType(config: string) {
 		return config;
 	}
 }
+
+export function extractVariables(inputString: string): string[] {
+	const variableRegex = /\${([^}]+)}/g;
+	const matches = inputString.match(variableRegex);
+
+	return matches ? matches.map((match) => match) : [];
+}
+
+export function extractEnvVarData(
+	envVars: string[],
+	envUrlState: Record<string, string>,
+	editorRef: React.RefObject<editor.IStandaloneCodeEditor | null> | null
+) {
+	let matches: editor.FindMatch[] = [];
+	const envVarData: Record<string, IEnvVar> = {};
+
+	if (envVars && envVars.length > 0) {
+		envVars.forEach((variable) => {
+			matches = editorRef?.current?.getModel()?.findMatches(variable, true, false, false, null, false) ?? [];
+			envVarData[variable] = {
+				name: variable.slice(2, -1),
+				linesNumber: matches.map((match) => match.range.startLineNumber),
+				value: envUrlState[variable.slice(2, -1)] ?? "",
+			};
+		});
+	}
+
+	return envVarData;
+}

packages/otelbin/src/components/react-flow/decorationStyles.css

@@ -2,3 +2,8 @@
 	background-color: #38bdf8 !important;
 	color: black !important;
 }
+
+.envVarDecoration {
+	color: #fb923c !important;
+	cursor: pointer;
+}

packages/otelbin/src/components/textArea.tsx

@@ -0,0 +1,24 @@
+// SPDX-FileCopyrightText: 2023 Dash0 Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from "react";
+
+import { cn } from "~/lib/utils";
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
+	return (
+		<textarea
+			className={cn(
+				"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+				className
+			)}
+			ref={ref}
+			{...props}
+		/>
+	);
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea };