From 619091ee0fca4dd23a7a3b74bf39acd28aea8ce0 Mon Sep 17 00:00:00 2001 From: Roshan Ghojoghi Date: Tue, 7 Nov 2023 01:29:53 +0300 Subject: [PATCH] fix: sonarCloud issues --- .../src/components/monaco-editor/Editor.tsx | 16 ++++++++++++--- .../monaco-editor/ValidationErrorConsole.tsx | 2 +- .../otelCollectorConfigValidation.test.ts | 5 +++-- .../otelCollectorConfigValidation.ts | 16 +++++++-------- .../monaco-editor/parseYaml.test.ts | 2 +- .../src/components/monaco-editor/parseYaml.ts | 12 +++++------ .../src/components/react-flow/FlowClick.ts | 17 ++++++++-------- .../src/components/react-flow/ReactFlow.tsx | 2 +- .../react-flow/node-types/ExportersNode.tsx | 3 +-- .../react-flow/node-types/ParentNodeTag.tsx | 2 +- .../react-flow/node-types/ParentsNode.tsx | 13 +++--------- .../react-flow/node-types/ProcessorsNode.tsx | 3 +-- .../react-flow/node-types/ReceiversNode.tsx | 3 +-- .../src/components/react-flow/useNodes.tsx | 6 +++--- .../validation-type/ValidationTile.tsx | 2 +- .../components/welcome-modal/WelcomeModal.tsx | 20 +++++++++---------- .../otelbin/src/contexts/EditorContext.tsx | 17 +++++++--------- 17 files changed, 68 insertions(+), 73 deletions(-) diff --git a/packages/otelbin/src/components/monaco-editor/Editor.tsx b/packages/otelbin/src/components/monaco-editor/Editor.tsx index 543a3bcd..027728fa 100644 --- 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 ( <> @@ -136,7 +146,7 @@ export default function Editor({ locked, setLocked }: { locked: boolean; setLock
diff --git a/packages/otelbin/src/components/monaco-editor/ValidationErrorConsole.tsx b/packages/otelbin/src/components/monaco-editor/ValidationErrorConsole.tsx index 61063ceb..ca852f9c 100644 --- 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 ; })} - {errors?.jsYamlError?.mark?.line && } + {errors?.jsYamlError?.mark?.line && }
)} diff --git a/packages/otelbin/src/components/monaco-editor/otelCollectorConfigValidation.test.ts b/packages/otelbin/src/components/monaco-editor/otelCollectorConfigValidation.test.ts index dc14d6f4..271ff800 100644 --- 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 index 905867e1..3dbaf32b 100644 --- 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 index bddd5bb2..be31eb48 100644 --- 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 index 0c901169..b7033aaa 100644 --- 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 index 4728e9ca..5a970e5c 100644 --- 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; 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 index f3f9fab1..a37e38fc 100644 --- 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 index 5d257690..7aacd13c 100644 --- 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 index 39c0652d..62794580 100644 --- 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 index 7b2d73b9..5cc0ff72 100644 --- 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" > - + ); })} diff --git a/packages/otelbin/src/components/react-flow/node-types/ProcessorsNode.tsx b/packages/otelbin/src/components/react-flow/node-types/ProcessorsNode.tsx index f4abe44e..b6af4f81 100644 --- 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 index 88b3592d..4f0c4d12 100644 --- 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 index aaddb573..cbbbac54 100644 --- 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 index d9a5783a..9fd75ad2 100644 --- 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 index 62821201..06f55a6d 100644 --- 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) => void; }) { return ( - <> -
- +
); } diff --git a/packages/otelbin/src/contexts/EditorContext.tsx b/packages/otelbin/src/contexts/EditorContext.tsx index d90409ab..a6cdee19 100644 --- a/packages/otelbin/src/contexts/EditorContext.tsx +++ b/packages/otelbin/src/contexts/EditorContext.tsx @@ -11,8 +11,7 @@ import { fromPosition, toCompletionList } from "monaco-languageserver-types"; import { type languages } from "monaco-editor/esm/vs/editor/editor.api.js"; import type { IItem } from "../components/monaco-editor/parseYaml"; import { getParsedValue } from "../components/monaco-editor/parseYaml"; -import { type WorkerGetter } from "monaco-worker-manager"; -import { createWorkerManager } from "monaco-worker-manager"; +import { type WorkerGetter, createWorkerManager } from "monaco-worker-manager"; import { type CompletionList, type Position } from "vscode-languageserver-types"; import { validateOtelCollectorConfigurationAndSetMarkers } from "~/components/monaco-editor/otelCollectorConfigValidation"; @@ -188,9 +187,7 @@ export const EditorProvider = ({ children }: { children: ReactNode }) => { function findSymbols(yamlItems: IItem[], currentPath: string, searchFilter: string, cursorOffset: number) { if (yamlItems.length === 0) return; else if (Array.isArray(yamlItems)) { - for (let i = 0; i < yamlItems.length; i++) { - const item = yamlItems[i]; - + for (const item of yamlItems) { if (item?.key && item.key.source.includes(searchFilter)) { const keyOffset = item.key.offset; const keyLength = item.key.source.length; @@ -198,18 +195,18 @@ export const EditorProvider = ({ children }: { children: ReactNode }) => { if (cursorOffset >= keyOffset && cursorOffset <= sepNewLineOffset) { setTimeout(() => { - setPath(correctKey(currentPath, item.key.source) as string); + setPath(correctKey(currentPath, item.key.source)); }, 10); return; } } if (item?.value) { - if (item.value.source && item.value.source.includes(searchFilter)) { + if (item?.value?.source?.includes(searchFilter)) { const valueOffset = item.value.offset; const valueLength = item.value.source.length; const valueEndOffset = - item.value.end && item.value.end.length > 0 && item.value.end[0] && item.value.end[0].offset - ? item.value.end[0].offset + item?.value?.end?.length && item.value.end?.[0]?.offset + ? item.value.end?.[0].offset : valueLength + valueOffset; if (cursorOffset >= valueOffset && cursorOffset <= valueEndOffset) { @@ -240,7 +237,7 @@ export const EditorProvider = ({ children }: { children: ReactNode }) => { } editorRef.current.onDidChangeCursorPosition((e) => { - const cursorOffset = editorRef?.current?.getModel()?.getOffsetAt(e.position) || 0; + const cursorOffset = editorRef?.current?.getModel()?.getOffsetAt(e.position) ?? 0; const wordAtCursor: editor.IWordAtPosition = editorRef?.current?.getModel()?.getWordAtPosition(e.position) || { word: "", startColumn: 0,