chore: cleanup branch incorporating Sonar findings

Author: lordrip

packages/ui/src/components/Visualization/Canvas/Form/fields/EndpointField/EndpointField.tsx

@@ -66,16 +66,15 @@ export const EndpointField: FunctionComponent<FieldProps> = ({ propName, require
   }, []);
 
   const handleCreate = useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (type: string, model: any) => {
+    (type: string, model: Record<string, unknown>) => {
       if (!type || model === undefined || typeof model !== 'object' || model?.name === undefined) {
         return;
       }
 
-      endpointsHandler.addNewEndpoint(type, model as unknown as Record<string, unknown>);
+      endpointsHandler.addNewEndpoint(type, model);
 
       setIsOpen(false);
-      onChange(model.name);
+      onChange(model.name as string);
       setLastUpdated(Date.now());
     },
     [endpointsHandler, onChange],

packages/ui/src/components/Visualization/Canvas/Form/fields/EndpointField/EndpointModal.test.tsx

@@ -32,8 +32,11 @@ describe('EndpointModal', () => {
       }
     }
 
+    const sortedEndpoints = [...endpoints];
+    sortedEndpoints.sort((a, b) => a.name?.localeCompare(b.name));
+
     endpointsSchema = {
-      oneOf: endpoints.sort((a, b) => a.name?.localeCompare(b.name)),
+      oneOf: sortedEndpoints,
     };
   });
 

packages/ui/src/components/Visualization/Canvas/Form/fields/EndpointField/EndpointModal.tsx

@@ -1,7 +1,7 @@
 import { isDefined } from '@kaoto/forms';
 import { CanvasFormTabsContext, CanvasFormTabsContextResult, ModelContextProvider, SchemaProvider } from '@kaoto/forms';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant } from '@patternfly/react-core';
-import { FunctionComponent, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { FunctionComponent, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 
 import { CatalogModalContext } from '../../../../../../dynamic-catalog/catalog-modal.provider';
 import { CatalogKind, KaotoSchemaDefinition } from '../../../../../../models';
@@ -14,7 +14,7 @@ export type EndpointModalProps = {
   endpoint?: unknown;
   type?: string;
   endpointsSchema?: KaotoSchemaDefinition['schema'];
-  onConfirm: (type: string, model: unknown) => void;
+  onConfirm: (type: string, model: Record<string, unknown>) => void;
   onCancel: () => void;
 };
 
@@ -33,6 +33,7 @@ export const EndpointModal: FunctionComponent<EndpointModalProps> = ({
   const [endpointModel = endpoint, setEndpointModel] = useState<unknown>();
   const [endpointType, setEndpointType] = useState<string | undefined>(type);
   const catalogModalContext = useContext(CatalogModalContext);
+  const hasSelectedEndpoint = useRef(false);
 
   const selectEndpoint = useCallback(async () => {
     /** Open Catalog modal, filtering the compatible nodes */
@@ -44,7 +45,7 @@ export const EndpointModal: FunctionComponent<EndpointModalProps> = ({
   }, [catalogModalContext]);
 
   const onEndpointModelChange = (_propName: string, model: unknown) => {
-    const jsonRecord = model as Record<string, unknown>;
+    const jsonRecord = { ...(model as Record<string, unknown>) };
     // sanitize generated endpoint model
     for (const key in jsonRecord) {
       if (typeof jsonRecord[key] === 'object') {
@@ -55,30 +56,28 @@ export const EndpointModal: FunctionComponent<EndpointModalProps> = ({
     setEndpointModel(jsonRecord);
   };
 
-  const handleConfirm = useCallback(async () => {
+  const handleConfirm = useCallback(() => {
     if (!endpointType || endpointModel === undefined || typeof endpointModel !== 'object') {
       return;
     }
 
-    onConfirm(endpointType, endpointModel);
+    onConfirm(endpointType, endpointModel as Record<string, unknown>);
   }, [endpointType, endpointModel, onConfirm]);
 
   useEffect(() => {
-    if (isDefined(endpointModel) || !isDefined(endpointsSchema)) {
-      return;
+    if (!isDefined(endpointModel) && !hasSelectedEndpoint.current) {
+      hasSelectedEndpoint.current = true;
+      selectEndpoint()
+        .then((selectedType) => {
+          if (selectedType) {
+            setEndpointType(selectedType);
+            setEndpointModel({});
+          }
+        })
+        .catch(() => {
+          /* catalog modal was dismissed */
+        });
     }
-
-    let isActive = true;
-    void selectEndpoint().then((selectedType) => {
-      if (isActive && selectedType) {
-        setEndpointType(selectedType);
-        setEndpointModel({});
-      }
-    });
-
-    return () => {
-      isActive = false;
-    };
   }, [endpointModel, endpointsSchema, selectEndpoint]);
 
   return (

packages/ui/src/components/Visualization/Canvas/Form/fields/EndpointField/EndpointsField.tsx

@@ -26,14 +26,13 @@ export const EndpointsField: FunctionComponent<FieldProps> = ({ propName, requir
   const confirmModalContext = useContext(ActionConfirmationModalContext);
 
   const handleCreateOrEdit = useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    async (type: string, model: any) => {
+    async (type: string, model: Record<string, unknown>) => {
       if (!type || model === undefined || typeof model !== 'object' || model?.name === undefined) {
         return;
       }
 
       if (operation === 'Create') {
-        endpointsHandler.addNewEndpoint(type, model as unknown as Record<string, unknown>);
+        endpointsHandler.addNewEndpoint(type, model);
         setItems(endpointsHandler.getDefinedEndpointsNameAndType(value));
       } else if (operation === 'Update') {
         const prevName = editModel?.name as string;
@@ -47,7 +46,7 @@ export const EndpointsField: FunctionComponent<FieldProps> = ({ propName, requir
           if (!modalAnswer || modalAnswer === ACTION_ID_CANCEL) return;
         }
 
-        endpointsHandler.updateEndpoint(type, model as unknown as Record<string, unknown>, prevName);
+        endpointsHandler.updateEndpoint(type, model, prevName);
         if (prevName !== model.name) {
           setItems(endpointsHandler.getDefinedEndpointsNameAndType(value));
         }
@@ -85,9 +84,10 @@ export const EndpointsField: FunctionComponent<FieldProps> = ({ propName, requir
 
       if (!modalAnswer || modalAnswer === ACTION_ID_CANCEL) return;
 
-      value.splice(index, 1);
-      setItems(endpointsHandler.getDefinedEndpointsNameAndType(value));
-      onChange(value);
+      const updated = [...value];
+      updated.splice(index, 1);
+      setItems(endpointsHandler.getDefinedEndpointsNameAndType(updated));
+      onChange(updated);
     },
     [endpointsHandler, onChange, confirmModalContext, value],
   );

packages/ui/src/models/visualization/metadata/citrus/endpoints-entity-handler.ts

@@ -8,7 +8,7 @@ import { KaotoSchemaDefinition } from '../../../kaoto-schema';
 import { CamelCatalogService } from '../../flows/camel-catalog.service';
 
 export class EndpointsEntityHandler {
-  constructor(private testResource?: CitrusTestResource | undefined) {
+  constructor(readonly testResource?: CitrusTestResource | undefined) {
     if (!this.testResource) return;
   }
 
@@ -25,22 +25,24 @@ export class EndpointsEntityHandler {
       }
     }
 
+    const sortedEndpoints = [...endpoints];
+    sortedEndpoints.sort((a, b) => a.name?.localeCompare(b.name));
+
     return {
-      oneOf: endpoints.sort((a, b) => a.name?.localeCompare(b.name)),
+      oneOf: sortedEndpoints,
     };
   }
 
   getTestEntity(): Test | undefined {
     return this.testResource?.toJSON() as Test | undefined;
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  getDefinedEndpointsNameAndType(endpoints: Record<string, any>[]): { name: string; type: string }[] {
+  getDefinedEndpointsNameAndType(endpoints: Record<string, unknown>[]): { name: string; type: string }[] {
     const definedEndpoints: { name: string; type: string }[] = [];
 
     for (const endpoint of endpoints) {
       if (endpoint.type !== undefined) {
-        definedEndpoints.push({ name: endpoint.name ?? ('' as string), type: endpoint.type ?? ('unknown' as string) });
+        definedEndpoints.push({ name: (endpoint.name as string) ?? '', type: (endpoint.type as string) ?? 'unknown' });
       } else {
         const type = this.getEndpointType(endpoint);
         if (type) {
@@ -66,7 +68,7 @@ export class EndpointsEntityHandler {
     );
 
     for (const action of testEntity.actions ?? []) {
-      if (action.createEndpoint != undefined) {
+      if (action.createEndpoint !== undefined) {
         const jsonRecord = action.createEndpoint as Record<string, unknown>;
         const type = this.getEndpointType(jsonRecord);
         if (type) {
@@ -133,13 +135,14 @@ export class EndpointsEntityHandler {
     const endpointName = prevName || model['name'];
     if (endpointName) {
       const index = test.endpoints.findIndex((endpoint) => {
-        const type = this.getEndpointType(endpoint);
-        if (type) {
-          const name = this.findEndpointName(type, endpoint);
+        const foundType = this.getEndpointType(endpoint);
+        if (foundType) {
+          const name = this.findEndpointName(foundType, endpoint);
           if (name && name === endpointName) {
             return true;
           }
         }
+        return false;
       });
 
       if (index > -1) {