dash0hq · bripkens · Nov 7, 2023 · Nov 6, 2023
diff --git a/packages/otelbin/src/components/monaco-editor/Editor.tsx b/packages/otelbin/src/components/monaco-editor/Editor.tsx
@@ -4,7 +4,6 @@
 "use client";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
-import React from "react";
 import type { IError } from "./ValidationErrorConsole";
 import ValidationErrorConsole from "./ValidationErrorConsole";
 import EditorTopBar from "../EditorTopBar";
@@ -37,7 +36,7 @@ export default function Editor({ locked, setLocked }: { locked: boolean; setLock
 	const editorDidMount = useEditorDidMount();
 	const editorRef = useEditorRef();
 	const monacoRef = useMonacoRef();
-	const [width, setWidth] = useState(Number(localStorage.getItem("width") || 440));
+	const [width, setWidth] = useState(Number(localStorage.getItem("width") ?? 440));
 	const { setViewMode, viewMode } = useViewMode();
 	const savedOpenModal = Boolean(typeof window !== "undefined" && localStorage.getItem("welcomeModal"));
 	const [openDialog, setOpenDialog] = useState(savedOpenModal ? !savedOpenModal : true);
@@ -127,6 +126,17 @@ export default function Editor({ locked, setLocked }: { locked: boolean; setLock
 		}
 	}, [clerk.loaded]);
 
+	function calculateViewWidth(viewMode: string, width: number) {
+		switch (viewMode) {
+			case "code":
+				return "100%";
+			case "pipeline":
+				return "0px";
+			default:
+				return `${width}px`;
+		}
+	}
+
 	return (
 		<>
 			<WelcomeModal open={openDialog} setOpen={setOpenDialog} />
@@ -136,7 +146,7 @@ export default function Editor({ locked, setLocked }: { locked: boolean; setLock
 					<div
 						className={`relative flex shrink-0 select-none flex-col`}
 						style={{
-							width: viewMode === "code" ? "100%" : viewMode === "pipeline" ? "0px" : `${width}px`,
+							width: calculateViewWidth(viewMode, width),
 						}}
 					>
 						<EditorTopBar config={currentConfig} font={firaCode} />

diff --git a/packages/otelbin/src/components/monaco-editor/ValidationErrorConsole.tsx b/packages/otelbin/src/components/monaco-editor/ValidationErrorConsole.tsx
@@ -89,7 +89,7 @@ export default function ValidationErrorConsole({ errors, font }: { errors?: IErr
 							errors.customErrors.map((error: string, index: number) => {
 								return <ErrorMessage key={index} customErrors={error} font={font} />;
 							})}
-						{errors?.jsYamlError?.mark?.line && <ErrorMessage jsYamlError={errors && errors.jsYamlError} font={font} />}
+						{errors?.jsYamlError?.mark?.line && <ErrorMessage jsYamlError={errors?.jsYamlError} font={font} />}
 					</div>
 				)}
 			</div>

diff --git a/packages/otelbin/src/components/monaco-editor/otelCollectorConfigValidation.test.ts b/packages/otelbin/src/components/monaco-editor/otelCollectorConfigValidation.test.ts
@@ -7,10 +7,11 @@ import {
 	extractMainItemsData,
 	extractServiceItems,
 	findLeafs,
+	getParsedValue,
 	type IValidateItem,
+	type IItem,
 } from "./parseYaml";
 import { capitalize, customValidate } from "./otelCollectorConfigValidation";
-import { type IItem, getParsedValue } from "./parseYaml";
 import type { editor } from "monaco-editor";
 
 const editorBinding = {
@@ -117,7 +118,7 @@ describe("findLeafs", () => {
 	});
 
 	it("should return an empty object if yamlItems is undefined", () => {
-		const result = findLeafs(undefined);
+		const result = findLeafs();
 
 		expect(result).toEqual({});
 	});

diff --git a/packages/otelbin/src/components/monaco-editor/otelCollectorConfigValidation.ts b/packages/otelbin/src/components/monaco-editor/otelCollectorConfigValidation.ts
@@ -71,10 +71,10 @@ export function validateOtelCollectorConfigurationAndSetMarkers(
 	} catch (error: unknown) {
 		const knownError = error as IJsYamlError;
 		const errorLineNumber = knownError.mark?.line;
-		const errorMessage = knownError.reason || "Unknown error";
+		const errorMessage = knownError.reason ?? "Unknown error";
 		const errorMarker = {
-			startLineNumber: errorLineNumber || 0,
-			endLineNumber: errorLineNumber || 0,
+			startLineNumber: errorLineNumber ?? 0,
+			endLineNumber: errorLineNumber ?? 0,
 			startColumn: 0,
 			endColumn: 0,
 			severity: 8,
@@ -101,7 +101,7 @@ export function customValidate(
 	if (!mainItemsData) return totalErrors;
 	for (const key of Object.keys(mainItemsData)) {
 		const mainItems = mainItemsData[key];
-		const serviceItems = serviceItemsData && serviceItemsData[key];
+		const serviceItems = serviceItemsData?.[key];
 
 		if (!serviceItems) continue;
 
@@ -112,7 +112,7 @@ export function customValidate(
 			) {
 				const errorMessage = `${capitalize(key)} "${item.source}" is not defined.`;
 				const { line, column } = findLineAndColumn(configData, item.offset);
-				const endColumn = column + (item.source?.length || 0);
+				const endColumn = column + (item.source?.length ?? 0);
 
 				const errorMarker = {
 					startLineNumber: line || 0,
@@ -130,12 +130,12 @@ export function customValidate(
 			if (!serviceItems.some((serviceItem) => serviceItem.source === item.source)) {
 				const errorMessage = `${capitalize(key)} "${item.source}" is unused.`;
 				const { line, column } = findLineAndColumn(configData, item.offset);
-				const endColumn = column + (item.source?.length || 0);
+				const endColumn = column + (item.source?.length ?? 0);
 
 				const errorMarker = {
-					startLineNumber: line || 0,
+					startLineNumber: line ?? 0,
 					endLineNumber: 0,
-					startColumn: column || 0,
+					startColumn: column ?? 0,
 					endColumn: endColumn,
 					severity: 4,
 					message: errorMessage,

diff --git a/packages/otelbin/src/components/monaco-editor/parseYaml.test.ts b/packages/otelbin/src/components/monaco-editor/parseYaml.test.ts
@@ -138,7 +138,7 @@ describe("findPipelinesKeyValues", () => {
 	});
 
 	it("should return an empty object if yamlItems is undefined", () => {
-		const result = findPipelinesKeyValues(undefined);
+		const result = findPipelinesKeyValues();
 
 		expect(result).toEqual({});
 	});

diff --git a/packages/otelbin/src/components/monaco-editor/parseYaml.ts b/packages/otelbin/src/components/monaco-editor/parseYaml.ts
@@ -91,7 +91,7 @@ export function extractMainItemsData(docElements: IItem[]) {
 				.filter((item: IItem) => item.key?.source === key)[0]
 				?.value?.items?.map((item: IItem) => {
 					return { source: item.key?.source, offset: item.key?.offset };
-				}) || [];
+				}) ?? [];
 	});
 	return mainItemsData;
 }
@@ -108,8 +108,7 @@ export function extractServiceItems(docElements: IItem[]) {
 export function findLeafs(yamlItems?: IItem[], parent?: IItem, serviceItemsData?: IValidateItem) {
 	if (yamlItems?.length === 0 || yamlItems === undefined) return {};
 	else if (Array.isArray(yamlItems) && yamlItems.length > 0) {
-		for (let i = 0; i < yamlItems.length; i++) {
-			const item = yamlItems[i];
+		for (const item of yamlItems) {
 			if (item?.value) {
 				if (item.value.source && parent) {
 					const source = item.value.source;
@@ -142,8 +141,7 @@ export function findPipelinesKeyValues(
 ) {
 	if (yamlItems?.length === 0 || yamlItems === undefined) return {};
 	else if (Array.isArray(yamlItems) && yamlItems.length > 0) {
-		for (let i = 0; i < yamlItems.length; i++) {
-			const item = yamlItems[i];
+		for (const item of yamlItems) {
 			if (item?.value) {
 				if (item.value.source && parent) {
 					const source = item.value.source;
@@ -181,11 +179,11 @@ export function findLineAndColumn(config: string, targetOffset?: number) {
 
 	for (let i = 0; i < lines.length; i++) {
 		const line = lines[i];
-		const lineLength = line?.length || 0;
+		const lineLength = line?.length ?? 0;
 
 		if (currentOffset + lineLength >= (targetOffset || 0)) {
 			lineIndex = i + 1;
-			column = (targetOffset || 0) - currentOffset + 1;
+			column = (targetOffset ?? 0) - currentOffset + 1;
 			break;
 		}
 

diff --git a/packages/otelbin/src/components/react-flow/FlowClick.ts b/packages/otelbin/src/components/react-flow/FlowClick.ts
@@ -6,13 +6,14 @@ import type { RefObject } from "react";
 import "./decorationStyles.css";
 import {
 	type IValidateItem,
+	type IItem,
+	type ILeaf,
 	extractMainItemsData,
 	extractServiceItems,
-	type ILeaf,
 	findLineAndColumn,
 	findPipelinesKeyValues,
+	getParsedValue,
 } from "../monaco-editor/parseYaml";
-import { type IItem, getParsedValue } from "../monaco-editor/parseYaml";
 type EditorRefType = RefObject<editor.IStandaloneCodeEditor | null>;
 
 export interface IData {
@@ -43,7 +44,7 @@ export function FlowClick(
 	);
 
 	const isConnector = data.type.includes("connectors");
-	const dataType = (event.altKey ? (isConnector ? data.type.split("/")[1] : data.type) : data.type.split("/")[0]) || "";
+	const dataType = (event.altKey ? (isConnector ? data.type.split("/")[1] : data.type) : data.type.split("/")[0]) ?? "";
 	const clickedItem = findClickedItem(data.label, dataType, mainItemsData, pipelinesKeyValues);
 
 	if (clickedItem) {
@@ -84,10 +85,10 @@ export function FlowClick(
 
 		const highlightDecoration: editor.IModelDeltaDecoration = {
 			range: {
-				startLineNumber: line || 0,
-				startColumn: column || 0,
-				endLineNumber: line || 0,
-				endColumn: column + (clickedItem?.source?.length || 0),
+				startLineNumber: line ?? 0,
+				startColumn: column ?? 0,
+				endLineNumber: line ?? 0,
+				endColumn: column + (clickedItem?.source?.length ?? 0),
 			},
 			options: {
 				isWholeLine: true,
@@ -96,7 +97,7 @@ export function FlowClick(
 			},
 		};
 
-		const newDecorations = editorRef?.current?.getModel()?.deltaDecorations([], [highlightDecoration]) || [""];
+		const newDecorations = editorRef?.current?.getModel()?.deltaDecorations([], [highlightDecoration]) ?? [""];
 		oldDecoration = newDecorations;
 		setTimeout(() => {
 			editorRef?.current?.getModel()?.deltaDecorations(oldDecoration, []);

diff --git a/packages/otelbin/src/components/react-flow/ReactFlow.tsx b/packages/otelbin/src/components/react-flow/ReactFlow.tsx
@@ -90,7 +90,7 @@ export default function Flow({
 	};
 
 	useEffect(() => {
-		if (editorRef && editorRef.current && nodeInfo) {
+		if (editorRef?.current && nodeInfo) {
 			const cursorChangeEventListener = editorRef.current.onDidChangeCursorPosition(handleCursorPositionChange);
 			return () => {
 				cursorChangeEventListener.dispose();

diff --git a/packages/otelbin/src/components/react-flow/node-types/ExportersNode.tsx b/packages/otelbin/src/components/react-flow/node-types/ExportersNode.tsx
@@ -2,9 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { IData } from "../FlowClick";
-import Node from "./Node";
 import ExporterIcon from "~/components/assets/svg/exporter.svg";
-import { handleStyle } from "./Node";
+import Node, { handleStyle } from "./Node";
 import { memo } from "react";
 import { Handle, Position } from "reactflow";
 

diff --git a/packages/otelbin/src/components/react-flow/node-types/ParentNodeTag.tsx b/packages/otelbin/src/components/react-flow/node-types/ParentNodeTag.tsx
@@ -3,7 +3,7 @@
 
 import { parentNodesConfig } from "./ParentsNode";
 
-export default function ParentNodeTag({ tag }: { findIndex: number; tag: string }) {
+export default function ParentNodeTag({ tag }: { tag: string }) {
 	function FormatTag(tagName: string) {
 		const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
 		let resultString = [""];

diff --git a/packages/otelbin/src/components/react-flow/node-types/ParentsNode.tsx b/packages/otelbin/src/components/react-flow/node-types/ParentsNode.tsx
@@ -1,9 +1,9 @@
 // SPDX-FileCopyrightText: 2023 Dash0 Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { memo } from "react";
+import { memo } from "react";
 import ParentNodeTag from "./ParentNodeTag";
-import { useNodes, useReactFlow } from "reactflow";
+import { useNodes } from "reactflow";
 import { BarChart4, ListTree, Workflow } from "lucide-react";
 
 interface IData {
@@ -47,18 +47,11 @@ export const parentNodesConfig = [
 ];
 
 const ParentsNode = ({ data }: { data: IData }) => {
-	const rectaFlowInstance = useReactFlow();
 	const nodes = useNodes();
 	const childNodes = nodes.filter((node) => node.parentNode === data.label);
 	const childProcessorsNodes = childNodes.filter((node) => node.type === "processorsNode");
 	const maxWidth = childProcessorsNodes.length * 200 + 430;
 
-	const parentNodes = rectaFlowInstance
-		.getNodes()
-		.filter((node) => node.type === "parentNodeType")
-		.map((node) => node.data.label);
-	const findIndex = parentNodes.findIndex((node) => node === data.label);
-
 	return (
 		<>
 			{parentNodesConfig
@@ -76,7 +69,7 @@ const ParentsNode = ({ data }: { data: IData }) => {
 							}}
 							className="rounded-[4px] text-[10px] text-black"
 						>
-							<ParentNodeTag findIndex={findIndex} tag={data.label} />
+							<ParentNodeTag tag={data.label} />
 						</div>
 					);
 				})}

diff --git a/packages/otelbin/src/components/react-flow/node-types/ProcessorsNode.tsx b/packages/otelbin/src/components/react-flow/node-types/ProcessorsNode.tsx
@@ -2,9 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { IData } from "../FlowClick";
-import Node from "./Node";
 import ProcessorIcon from "~/components/assets/svg/processor.svg";
-import { handleStyle } from "./Node";
+import Node, { handleStyle } from "./Node";
 import { memo } from "react";
 import { Handle, Position } from "reactflow";
 

diff --git a/packages/otelbin/src/components/react-flow/node-types/ReceiversNode.tsx b/packages/otelbin/src/components/react-flow/node-types/ReceiversNode.tsx
@@ -2,9 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { IData } from "../FlowClick";
-import Node from "./Node";
 import ReceiverIcon from "~/components/assets/svg/receiver.svg";
-import { handleStyle } from "./Node";
+import Node, { handleStyle } from "./Node";
 import { memo } from "react";
 import { Handle, Position } from "reactflow";
 

diff --git a/packages/otelbin/src/components/react-flow/useNodes.tsx b/packages/otelbin/src/components/react-flow/useNodes.tsx
@@ -37,7 +37,7 @@ const createNode = (pipelineName: string, parentNode: IPipeline, height: number,
 
 	const receiverPosition = (index: number, parentHeight: number, receivers: string[]): XYPosition => {
 		const positionY = calcYPosition(index, parentHeight, receivers);
-		return { x: 50, y: positionY !== undefined ? positionY : parentHeight / 2 };
+		return { x: 50, y: positionY ?? parentHeight / 2 };
 	};
 
 	const exporterPosition = (
@@ -48,7 +48,7 @@ const createNode = (pipelineName: string, parentNode: IPipeline, height: number,
 	): XYPosition => {
 		const positionY = calcYPosition(index, parentHeight, exporters);
 		const processorLength = (processors?.length ?? 0) * 200 + 260;
-		return { x: processorLength, y: positionY !== undefined ? positionY : parentHeight / 2 };
+		return { x: processorLength, y: positionY ?? parentHeight / 2 };
 	};
 	const processors = parentNode.processors;
 	const receivers = parentNode.receivers;
@@ -143,7 +143,7 @@ export const useNodes = (value: IConfig) => {
 		for (const [pipelineName, pipeline] of Object.entries(pipelines)) {
 			const receivers = pipeline.receivers?.length ?? 0;
 			const exporters = pipeline.exporters?.length ?? 0;
-			const maxNodes = Math.max(receivers, exporters) || 1;
+			const maxNodes = Math.max(receivers, exporters) ?? 1;
 			const spaceBetweenParents = 40;
 			const spaceBetweenNodes = 90;
 			const totalSpacing = maxNodes * spaceBetweenNodes;

diff --git a/packages/otelbin/src/components/validation-type/ValidationTile.tsx b/packages/otelbin/src/components/validation-type/ValidationTile.tsx
@@ -43,7 +43,7 @@ export default function ValidationTile({
 			case 1:
 				return versions[0];
 			default:
-				return `${versions && versions[versions.length - 1]} - ${versions && versions[0]}`;
+				return `${versions && versions[versions.length - 1]} - ${versions?.[0]}`;
 		}
 	}
 

diff --git a/packages/otelbin/src/components/welcome-modal/WelcomeModal.tsx b/packages/otelbin/src/components/welcome-modal/WelcomeModal.tsx
@@ -102,16 +102,14 @@ function StepDiv({
 	handleKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
 }) {
 	return (
-		<>
-			<div
-				className={`h-[10px] rounded-full ${
-					activeStep
-						? "w-[30px] bg-neutral-500"
-						: `w-[10px] bg-neutral-350 ${isClickable ? "cursor-pointer hover:bg-neutral-400" : "cursor-default"}`
-				} `}
-				onClick={isClickable ? handleClick : undefined}
-				onKeyDown={isClickable ? handleKeyDown : undefined}
-			/>
-		</>
+		<div
+			className={`h-[10px] rounded-full ${
+				activeStep
+					? "w-[30px] bg-neutral-500"
+					: `w-[10px] bg-neutral-350 ${isClickable ? "cursor-pointer hover:bg-neutral-400" : "cursor-default"}`
+			} `}
+			onClick={isClickable ? handleClick : undefined}
+			onKeyDown={isClickable ? handleKeyDown : undefined}
+		/>
 	);
 }