refactor: Enhance type safety by explicitly defining ref types and simplifying conditional checks

Common/UI/Components/Graphs/ServiceDependencyGraph.tsx

@@ -17,6 +17,11 @@ import "reactflow/dist/style.css";
 import type { ElkExtendedEdge, ElkNode, LayoutOptions } from "elkjs";
 import ELK from "elkjs/lib/elk.bundled.js";
 
+// Minimal interface for the ELK layout engine we rely on.
+interface ElkLayoutEngine {
+  layout: (graph: ElkNode) => Promise<ElkNode>;
+}
+
 export interface ServiceNodeData {
   id: string;
   name: string;
@@ -96,7 +101,7 @@ const ServiceDependencyGraph: FunctionComponent<ServiceDependencyGraphProps> = (
   const [rfEdges, setRfEdges] = useState<Edge[]>([]);
 
   useEffect((): void => {
-  const elk = new ELK();
+    const elk: ElkLayoutEngine = new ELK() as unknown as ElkLayoutEngine;
     // fixed node dimensions for layout (px)
     const NODE_WIDTH: number = 220;
     const NODE_HEIGHT: number = 56;
@@ -123,7 +128,7 @@ const ServiceDependencyGraph: FunctionComponent<ServiceDependencyGraphProps> = (
         "elk.layered.spacing.nodeNodeBetweenLayers": "120",
         "elk.spacing.nodeNode": "60",
         "elk.edgeRouting": "POLYLINE",
-  } as LayoutOptions,
+      } as LayoutOptions,
       children: sortedServices.map((svc: ServiceNodeData): ElkNode => {
         return {
           id: svc.id,
@@ -142,11 +147,13 @@ const ServiceDependencyGraph: FunctionComponent<ServiceDependencyGraphProps> = (
 
     const layout: () => Promise<void> = async (): Promise<void> => {
       try {
-        const res = (await elk.layout(elkGraph)) as ElkNode; // casting to bundled ElkNode shape
+        const res: ElkNode = (await elk.layout(elkGraph)) as ElkNode; // casting to bundled ElkNode shape
         const placedNodes: Node[] = (res.children || []).map(
           (child: ElkNode): Node => {
             const svc: ServiceNodeData | undefined = sortedServices.find(
-              (s: ServiceNodeData): boolean => s.id === child.id,
+              (s: ServiceNodeData): boolean => {
+                return s.id === child.id;
+              },
             );
             const background: string = svc?.color || "#ffffff";
             const textColor: string = getContrastText(background);

Common/UI/Components/Input/Input.tsx

@@ -64,7 +64,8 @@ const Input: FunctionComponent<ComponentProps> = (
 
   const [value, setValue] = useState<string | Date>("");
   const [displayValue, setDisplayValue] = useState<string>("");
-  const ref = useRef<HTMLInputElement | null>(null);
+  const ref: React.MutableRefObject<HTMLInputElement | null> =
+    useRef<HTMLInputElement | null>(null);
 
   useEffect(() => {
     if (
@@ -120,7 +121,7 @@ const Input: FunctionComponent<ComponentProps> = (
   }, [value]);
 
   useEffect(() => {
-    const input = ref.current;
+    const input: HTMLInputElement | null = ref.current;
     if (input) {
       input.value = displayValue;
     }

Common/UI/Components/Workflow/ArgumentsForm.tsx

@@ -27,7 +27,9 @@ export interface ComponentProps {
 const ArgumentsForm: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  const formRef = useRef<FormProps<FormValues<JSONObject>> | null>(null);
+  const formRef: React.MutableRefObject<FormProps<
+    FormValues<JSONObject>
+  > | null> = useRef<FormProps<FormValues<JSONObject>> | null>(null);
   const [component, setComponent] = useState<NodeDataProp>(props.component);
   const [showVariableModal, setShowVariableModal] = useState<boolean>(false);
   const [showComponentPickerModal, setShowComponentPickerModal] =

Common/UI/Components/Workflow/Utils.ts

@@ -121,10 +121,7 @@ export const componentInputTypeToFormFieldType: ComponentInputTypeToFormFieldTyp
 
     // Second priority.
 
-    if (
-  typeof argValue === "string" &&
-  argValue.includes("{{")
-    ) {
+    if (typeof argValue === "string" && argValue.includes("{{")) {
       return {
         fieldType: FormFieldSchemaType.Text,
         dropdownOptions: [],