refactor(frontend): refactor ScanRangeInput

Author: VictoriaBeilsten-Edmands

frontend/workflows-lib/lib/components/template/controls/ScanRangeInput.tsx

@@ -10,6 +10,12 @@ import { InfoOutlined } from "@mui/icons-material";
 import { validateScanRange } from "../../../utils/validationUtils";
 import { ScanRange } from "../../../types";
 
+export interface RawScanRange {
+  excludedRaw: string;
+  start: string;
+  end: string;
+}
+
 export interface ScanRangeInputProps {
   name: string;
   value: ScanRange;
@@ -41,13 +47,13 @@ const ScanRangeInput = ({
       end: string;
       excluded: string;
     };
-    excludedRaw: string;
-    start: string;
-    end: string;
+    rawRange: RawScanRange;
   }
 
+  type ScanRangeType = "start" | "end" | "excluded";
+
   interface ScanRangeAction {
-    type: "start" | "end" | "excluded";
+    type: ScanRangeType;
     payload: string;
   }
 
@@ -59,23 +65,19 @@ const ScanRangeInput = ({
 
     switch (action.type) {
       case "start":
-        newState.start = action.payload;
+        newState.rawRange.start = action.payload;
         break;
       case "end":
-        newState.end = action.payload;
+        newState.rawRange.end = action.payload;
         break;
       case "excluded":
-        newState.excludedRaw = action.payload;
+        newState.rawRange.excludedRaw = action.payload;
         break;
       default:
         return state;
     }
 
-    const result = validateScanRange(
-      newState.start,
-      newState.end,
-      newState.excludedRaw,
-    );
+    const result = validateScanRange(newState.rawRange);
     newState.componentError = result.errors;
 
     if (result.parsed) {
@@ -90,19 +92,31 @@ const ScanRangeInput = ({
     return newState;
   }
 
-  const [scanRange, handleScanRange] = useReducer(scanRangeReducer, {
+  const [scanRange, dispatch] = useReducer(scanRangeReducer, {
     componentError: {
       start: "",
       end: "",
       excluded: "",
     },
-    excludedRaw: Array.isArray(value.excluded) ? value.excluded.join(", ") : "",
-    start: String(value.start || ""),
-    end: String(value.end || ""),
+    rawRange: {
+      excludedRaw: Array.isArray(value.excluded)
+        ? value.excluded.join(", ")
+        : "",
+      start: String(value.start || ""),
+      end: String(value.end || ""),
+    },
   });
 
   if (!visible) return null;
 
+  const handleScanRangeChange =
+    (
+      type: ScanRangeType,
+    ): React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> =>
+    (event) => {
+      dispatch({ type: type, payload: event.target.value });
+    };
+
   return (
     <Box
       id={id}
@@ -137,15 +151,13 @@ const ScanRangeInput = ({
         <TextField
           type="number"
           label="Start"
-          value={scanRange.start}
-          onChange={(event) => {
-            handleScanRange({ type: "start", payload: event.target.value });
-          }}
+          value={scanRange.rawRange.start}
+          onChange={handleScanRangeChange("start")}
           error={!!scanRange.componentError.start}
           helperText={scanRange.componentError.start || " "}
           disabled={!enabled}
           slotProps={{
-            htmlInput: { step: 1 },
+            htmlInput: { step: 1, min: 0 },
             formHelperText: {
               sx: { minHeight: "3em", whiteSpace: "pre-wrap" },
             },
@@ -159,15 +171,13 @@ const ScanRangeInput = ({
         <TextField
           type="number"
           label="End"
-          value={scanRange.end}
-          onChange={(event) => {
-            handleScanRange({ type: "end", payload: event.target.value });
-          }}
+          value={scanRange.rawRange.end}
+          onChange={handleScanRangeChange("end")}
           error={!!scanRange.componentError.end}
           helperText={scanRange.componentError.end || " "}
           disabled={!enabled}
           slotProps={{
-            htmlInput: { step: 1 },
+            htmlInput: { step: 1, min: 0 },
             formHelperText: {
               sx: { minHeight: "3em", whiteSpace: "pre-wrap" },
             },
@@ -180,10 +190,8 @@ const ScanRangeInput = ({
 
         <TextField
           label="Excluded"
-          value={scanRange.excludedRaw}
-          onChange={(event) => {
-            handleScanRange({ type: "excluded", payload: event.target.value });
-          }}
+          value={scanRange.rawRange.excludedRaw}
+          onChange={handleScanRangeChange("excluded")}
           error={!!scanRange.componentError.excluded}
           helperText={scanRange.componentError.excluded || " "}
           disabled={!enabled}

frontend/workflows-lib/lib/components/template/jsonforms/JsonFormsScanRangeRenderer.tsx

@@ -5,7 +5,6 @@ import { withJsonFormsControlProps } from "@jsonforms/react";
 import { ControlProps } from "@jsonforms/core";
 import ScanRangeInput from "../controls/ScanRangeInput";
 import { ScanRange } from "../../../types";
-import { useMemo } from "react";
 
 const ScanRangeControl = ({
   data,
@@ -23,18 +22,14 @@ const ScanRangeControl = ({
     handleChange(path, value);
   };
 
-  const localValue: ScanRange = useMemo(() => {
-    return {
-      start: data?.start,
-      end: data?.end,
-      excluded: data?.excluded ?? [],
-    };
-  }, [data]);
-
   return (
     <ScanRangeInput
       name={path}
-      value={localValue}
+      value={{
+        start: data?.start,
+        end: data?.end,
+        excluded: data?.excluded ?? [],
+      }}
       handleChange={handleBufferedChange}
       label={label}
       description={description}

frontend/workflows-lib/lib/utils/validationUtils.ts

@@ -1,3 +1,4 @@
+import { RawScanRange } from "../components/template/controls/ScanRangeInput";
 import { ScanRange } from "../types";
 
 export const isStrictPositiveInteger = (value: string): boolean =>
@@ -50,22 +51,22 @@ export interface ScanRangeValidationResult {
 }
 
 export const validateScanRange = (
-  startStr: string,
-  endStr: string,
-  excludedRaw: string,
+  scanRange: RawScanRange,
 ): ScanRangeValidationResult => {
-  const validStart = isStrictPositiveInteger(startStr);
-  const validEnd = isStrictPositiveInteger(endStr);
+  const validStart = isStrictPositiveInteger(scanRange.start);
+  const validEnd = isStrictPositiveInteger(scanRange.end);
 
-  const newStart = parseInt(startStr, 10);
-  const newEnd = parseInt(endStr, 10);
+  const newStart = parseInt(scanRange.start, 10);
+  const newEnd = parseInt(scanRange.end, 10);
 
   let excludedScans: number[] = [];
   let excludedError = "";
 
   try {
     excludedScans =
-      excludedRaw.trim() === "" ? [] : parseExcludedScans(excludedRaw);
+      scanRange.excludedRaw.trim() === ""
+        ? []
+        : parseExcludedScans(scanRange.excludedRaw);
     const outOfRange = excludedScans.filter(
       (num) => num < newStart || num > newEnd,
     );

frontend/workflows-lib/tests/functions/validationUtils.test.ts

@@ -1,3 +1,4 @@
+import { RawScanRange } from "../../lib/components/template/controls/ScanRangeInput";
 import {
   isStrictPositiveInteger,
   parseExcludedScans,
@@ -65,60 +66,100 @@ describe("parseExcludedScans", () => {
 
 describe("validateScanRange", () => {
   it("validates correct input", () => {
-    const result = validateScanRange("1", "10", "3, 4, 5");
+    const result = validateScanRange({
+      start: "1",
+      end: "10",
+      excludedRaw: "3, 4, 5",
+    } as RawScanRange);
     expect(result.errors).toEqual({ start: "", end: "", excluded: "" });
     expect(result.parsed).toEqual({ start: 1, end: 10, excluded: [3, 4, 5] });
   });
 
   it("returns error for invalid start", () => {
-    const result = validateScanRange("abc", "10", "3, 4");
+    const result = validateScanRange({
+      start: "abc",
+      end: "10",
+      excludedRaw: "3, 4",
+    } as RawScanRange);
     expect(result.errors.start).toBe("Start must be a positive integer");
     expect(result.parsed).toBeUndefined();
   });
 
   it("returns error for invalid end", () => {
-    const result = validateScanRange("1", "abc", "3, 4");
+    const result = validateScanRange({
+      start: "1",
+      end: "abc",
+      excludedRaw: "3, 4",
+    } as RawScanRange);
     expect(result.errors.end).toBe("End must be a positive integer");
     expect(result.parsed).toBeUndefined();
   });
 
   it("returns error when end < start", () => {
-    const result = validateScanRange("10", "5", "3, 4");
+    const result = validateScanRange({
+      start: "10",
+      end: "5",
+      excludedRaw: "3, 4",
+    } as RawScanRange);
     expect(result.errors.end).toBe("End cannot be less than start");
     expect(result.parsed).toBeUndefined();
   });
 
   it("returns error for excluded values out of range", () => {
-    const result = validateScanRange("1", "5", "2, 6");
+    const result = validateScanRange({
+      start: "1",
+      end: "5",
+      excludedRaw: "2, 6",
+    } as RawScanRange);
     expect(result.errors.excluded).toBe("Excluded values out of range");
     expect(result.parsed).toBeUndefined();
   });
 
   it("returns error for invalid excluded format", () => {
-    const result = validateScanRange("1", "10", "abc");
+    const result = validateScanRange({
+      start: "1",
+      end: "10",
+      excludedRaw: "abc",
+    } as RawScanRange);
     expect(result.errors.excluded).toBe("Must be positive integers or ranges");
     expect(result.parsed).toBeUndefined();
   });
 
   it("returns empty excluded array for empty input", () => {
-    const result = validateScanRange("1", "10", "");
+    const result = validateScanRange({
+      start: "1",
+      end: "10",
+      excludedRaw: "",
+    } as RawScanRange);
     expect(result.errors.excluded).toBe("");
     expect(result.parsed?.excluded).toEqual([]);
   });
   it("handles duplicates", () => {
-    const result = validateScanRange("1", "10", "1, 1, 9");
+    const result = validateScanRange({
+      start: "1",
+      end: "10",
+      excludedRaw: "1, 1, 9",
+    } as RawScanRange);
     expect(result.errors).toEqual({ start: "", end: "", excluded: "" });
     expect(result.parsed?.excluded).toEqual([1, 9]);
   });
 
   it("handles overlapping ranges", () => {
-    const result = validateScanRange("1", "10", "3-5, 4-6");
+    const result = validateScanRange({
+      start: "1",
+      end: "10",
+      excludedRaw: "3-5, 4-6",
+    });
     expect(result.errors).toEqual({ start: "", end: "", excluded: "" });
     expect(result.parsed?.excluded).toEqual([3, 4, 5, 6]);
   });
 
   it("handles mixed excluded input", () => {
-    const result = validateScanRange("1", "10", "3, 3-5, [4, 5]");
+    const result = validateScanRange({
+      start: "1",
+      end: "10",
+      excludedRaw: "3, 3-5, [4, 5]",
+    });
     expect(result.errors).toEqual({ start: "", end: "", excluded: "" });
     expect(result.parsed?.excluded).toEqual([3, 4, 5]);
   });