fix: stop synchronizing of checkbox field values between steps

frontend/src/components/core/shared/forms/backend-form/backend-form.props.ts

@@ -101,4 +101,5 @@ export interface BackendInputFieldProps {
   options?: { label: string; value: string }[];
   key: string;
   isVisible?: boolean;
+  stepId: string;
 }

frontend/src/components/core/shared/forms/backend-form/backend-form.tsx

@@ -68,14 +68,15 @@ export const BackendForm: React.FC<BackendFormProps> = memo(function Form({
     async (values: Record<string, BackendInputValueType> = {}) => {
       const response = await callApiWithParameters("get_step_form/", {
         run_name: runName,
+        step_id: current_step_id,
         data: values,
       });
       if (response) {
         const data = response.data;
         setBackendFormData(data);
       }
     },
-    [runName],
+    [runName, current_step_id],
   );
 
   useEffect(() => {
@@ -147,10 +148,15 @@ export const BackendForm: React.FC<BackendFormProps> = memo(function Form({
   return (
     <>
       {BackendFormData && (
-        <StyledForm>
+        <StyledForm key={current_step_id}>
           <H3>{BackendFormData.label}</H3>
           {BackendFormData.input_fields.map((inputField) => (
-            <InputField key={inputField.name} onChange={handleChange} {...inputField} />
+            <InputField
+              key={`${current_step_id}_${inputField.name}`}
+              stepId={current_step_id}
+              onChange={handleChange}
+              {...inputField}
+            />
           ))}
           <StyledSubmitDiv>
             <SubmitButton
@@ -175,6 +181,7 @@ const InputField: React.FC<BackendInputFieldProps> = memo(function InputField({
   onChange,
   options,
   isVisible,
+  stepId,
   ...props
 }) {
   const handleInputChange = (value: BackendInputValueType) => {
@@ -185,6 +192,8 @@ const InputField: React.FC<BackendInputFieldProps> = memo(function InputField({
     return null;
   }
 
+  const uniqueId = `${stepId}_${name}`;
+
   switch (type) {
     case "text":
       return <TextInputField onChange={handleInputChange} {...props} />;
@@ -200,10 +209,15 @@ const InputField: React.FC<BackendInputFieldProps> = memo(function InputField({
       );
     case "checkbox-select":
       return (
-        <CheckboxSelectInputField onChange={handleInputChange} options={options ?? []} {...props} />
+        <CheckboxSelectInputField
+          id={uniqueId}
+          onChange={handleInputChange}
+          options={options ?? []}
+          {...props}
+        />
       );
     case "single-checkbox":
-      return <SingleCheckboxInputField onChange={handleInputChange} {...props} />;
+      return <SingleCheckboxInputField id={uniqueId} onChange={handleInputChange} {...props} />;
     case "dropdown":
       return <DropdownInputField onChange={handleInputChange} options={options ?? []} {...props} />;
     case "multi-select":

frontend/src/components/core/shared/input-fields/checkbox-input-fields/checkbox-select-input-field/checkbox-select-input-field.props.ts

@@ -8,4 +8,5 @@ export interface CheckboxSelectInputFieldProps
   options: { label: string; value: string }[];
   value?: string[];
   onChange: (value: string[]) => void;
+  id?: string;
 }

frontend/src/components/core/shared/input-fields/checkbox-input-fields/checkbox-select-input-field/checkbox-select-input-field.tsx

@@ -1,5 +1,5 @@
 import { spacing } from "@protzilla/theme";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { styled } from "styled-components";
 
 import { CheckboxSelectInputFieldProps } from "./checkbox-select-input-field.props.ts";
@@ -30,6 +30,7 @@ export const CheckboxSelectInputField: React.FC<CheckboxSelectInputFieldProps> =
   options,
   value = [],
   onChange,
+  id,
   ...props
 }) => {
   const [selectedValues, setSelectedValues] = useState(() => {
@@ -38,6 +39,11 @@ export const CheckboxSelectInputField: React.FC<CheckboxSelectInputFieldProps> =
     return sortedDefaultOptions;
   });
 
+  useEffect(() => {
+    const sorted = [...value].sort((a, b) => a.localeCompare(b));
+    setSelectedValues(sorted);
+  }, [value]);
+
   const handleChange = (value: string) => {
     const newSelectedValues = selectedValues.includes(value)
       ? selectedValues.filter((v) => v !== value)
@@ -49,15 +55,17 @@ export const CheckboxSelectInputField: React.FC<CheckboxSelectInputFieldProps> =
     onChange(sortedSelection);
   };
 
+  const baseId = id ?? "checkbox";
+
   return (
     <InputContainer {...props}>
       <StyledCheckboxContainer $isSmall={props.isSmall ?? false}>
         {options.map((option) => {
-          const id = `checkbox-${option.value}`;
+          const optionId = `${baseId}-${option.value}`;
           return (
-            <StyledLabel key={option.value} htmlFor={id}>
+            <StyledLabel key={option.value} htmlFor={optionId}>
               <input
-                id={id}
+                id={optionId}
                 type="checkbox"
                 value={option.value}
                 checked={selectedValues.includes(option.value)}

frontend/src/components/core/shared/input-fields/checkbox-input-fields/single-checkbox/single-checkbox-input-field.props.ts

@@ -4,4 +4,5 @@ export interface SingleCheckboxInputFieldProps extends InputContainerProps {
   value?: boolean;
   text?: string;
   onChange: (value: boolean) => void;
+  id?: string;
 }

frontend/src/components/core/shared/input-fields/checkbox-input-fields/single-checkbox/single-checkbox-input-field.tsx

@@ -1,5 +1,5 @@
 import { size } from "@protzilla/theme";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { styled } from "styled-components";
 
 import { SingleCheckboxInputFieldProps } from "./single-checkbox-input-field.props.ts";
@@ -18,12 +18,19 @@ export const SingleCheckboxInputField: React.FC<SingleCheckboxInputFieldProps> =
   value: initialValue,
   text,
   onChange,
+  id,
   ...props
 }) => {
   const [isChecked, setIsChecked] = useState<boolean>(() => {
     return initialValue ?? false;
   });
 
+  const checkboxId = id ?? "checkbox";
+
+  useEffect(() => {
+    setIsChecked(initialValue ?? false);
+  }, [initialValue]);
+
   const handleChange = (value: boolean) => {
     setIsChecked(value);
     onChange(value);
@@ -32,10 +39,10 @@ export const SingleCheckboxInputField: React.FC<SingleCheckboxInputFieldProps> =
   return (
     <InputContainer {...props}>
       <StyledSingleCheckboxContainer $isSmall={props.isSmall ?? false}>
-        <StyledLabel htmlFor={"checkbox"}>
+        <StyledLabel htmlFor={checkboxId}>
           <input
             type="checkbox"
-            id={"checkbox"}
+            id={checkboxId}
             checked={isChecked}
             onChange={(e) => {
               handleChange(e.target.checked);