refactor: update Checkbox component to use 'value' prop instead of 'i…

…nitialValue' for better state management

frontend/webapp/containers/main/actions/action-form-body/custom-fields/pii-masking.tsx

@@ -66,7 +66,7 @@ const PiiMasking: React.FC<Props> = ({ value, setValue, errorMessage }) => {
       <FieldLabel title='Attributes to mask' required />
       <ListContainer $hasError={!!errorMessage}>
         {strictPicklist.map(({ id, label }) => (
-          <Checkbox key={id} title={label} disabled={isLastSelection && mappedValue.includes(id)} initialValue={mappedValue.includes(id)} onChange={(bool) => handleChange(id, bool)} />
+          <Checkbox key={id} title={label} disabled={isLastSelection && mappedValue.includes(id)} value={mappedValue.includes(id)} onChange={(bool) => handleChange(id, bool)} />
         ))}
       </ListContainer>
       {!!errorMessage && <FieldError>{errorMessage}</FieldError>}

frontend/webapp/containers/main/destinations/destination-form-body/dynamic-fields/index.tsx

@@ -24,7 +24,7 @@ export const DestinationDynamicFields: React.FC<Props> = ({ fields, onChange, fo
       case INPUT_TYPES.TEXTAREA:
         return <TextArea key={field.name} {...rest} onChange={(e) => onChange(field.name, e.target.value)} errorMessage={formErrors[field.name]} />;
       case INPUT_TYPES.CHECKBOX:
-        return <Checkbox key={field.name} {...rest} initialValue={rest.value == 'true'} onChange={(bool) => onChange(field.name, String(bool))} errorMessage={formErrors[field.name]} />;
+        return <Checkbox key={field.name} {...rest} value={rest.value == 'true'} onChange={(bool) => onChange(field.name, String(bool))} errorMessage={formErrors[field.name]} />;
       default:
         return null;
     }

frontend/webapp/containers/main/instrumentation-rules/rule-form-body/custom-fields/payload-collection.tsx

@@ -91,7 +91,7 @@ const PayloadCollection: React.FC<Props> = ({ value, setValue, formErrors }) =>
       <FieldLabel title='Type of data to collect' required />
       <ListContainer $hasError={!!errorMessage}>
         {strictPicklist.map(({ id, label }) => (
-          <Checkbox key={id} title={label} disabled={isLastSelection && mappedValue.includes(id)} initialValue={mappedValue.includes(id)} onChange={(bool) => handleChange(id, bool)} />
+          <Checkbox key={id} title={label} disabled={isLastSelection && mappedValue.includes(id)} value={mappedValue.includes(id)} onChange={(bool) => handleChange(id, bool)} />
         ))}
       </ListContainer>
       {!!errorMessage && <FieldError>{errorMessage}</FieldError>}

frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-fast/source-controls/index.tsx

@@ -34,7 +34,7 @@ export const SourceControls: React.FC<Props> = ({ selectedSources, searchText, s
         <SearchWrapper>
           <Input placeholder='Search Kubernetes Namespaces' icon={SearchIcon} value={searchText} onChange={(e) => setSearchText(e.target.value.toLowerCase())} />
         </SearchWrapper>
-        {/* <Checkbox title='Select all' initialValue={selectAll} onChange={onSelectAll} /> */}
+        {/* <Checkbox title='Select all' value={selectAll} onChange={onSelectAll} /> */}
         <Toggle title='Show selected only' initialValue={showSelectedOnly} onChange={setShowSelectedOnly} />
       </FlexContainer>
 

frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-fast/sources-list/index.tsx

@@ -139,7 +139,7 @@ export const SourcesList: React.FC<Props> = ({
           <Group data-id={`namespace-${namespace}`} key={`namespace-${namespace}`} $selected={isNamespaceAllSourcesSelected} $isOpen={isNamespaceSelected && hasFilteredSources}>
             <NamespaceItem $selected={isNamespaceAllSourcesSelected} onClick={() => onSelectNamespace(namespace)}>
               <FlexRow>
-                <Checkbox disabled={namespaceLoaded && !isNamespaceCanSelect} initialValue={isNamespaceAllSourcesSelected} onChange={(bool) => onSelectAll(bool, namespace)} />
+                <Checkbox disabled={namespaceLoaded && !isNamespaceCanSelect} value={isNamespaceAllSourcesSelected} onChange={(bool) => onSelectAll(bool, namespace)} />
                 <Text>{namespace}</Text>
               </FlexRow>
 
@@ -166,7 +166,7 @@ export const SourcesList: React.FC<Props> = ({
                     return (
                       <SourceItem key={`source-${source.name}`} $selected={isSourceSelected} onClick={() => onSelectSource(source)}>
                         <FlexRow>
-                          <Checkbox initialValue={isSourceSelected} onChange={() => onSelectSource(source, namespace)} />
+                          <Checkbox value={isSourceSelected} onChange={() => onSelectSource(source, namespace)} />
                           <Text>{source.name}</Text>
                           <Text opacity={0.8} size={10}>
                             {source.numberOfInstances} running instance{source.numberOfInstances !== 1 && 's'} · {source.kind}

frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-simple/source-controls/index.tsx

@@ -63,12 +63,7 @@ export const SourceControls: React.FC<Props> = ({
         <ToggleWrapper>
           <Toggle title='Select all' initialValue={selectAll} onChange={onSelectAll} />
           <Toggle title='Show selected only' initialValue={showSelectedOnly} onChange={setShowSelectedOnly} />
-          <Checkbox
-            title='Future apps'
-            tooltip='Automatically instrument all future apps'
-            initialValue={!!selectedNamespace ? selectedFutureApps[selectedNamespace] : false}
-            onChange={onSelectFutureApps}
-          />
+          <Checkbox title='Future apps' tooltip='Automatically instrument all future apps' value={!!selectedNamespace ? selectedFutureApps[selectedNamespace] : false} onChange={onSelectFutureApps} />
         </ToggleWrapper>
       </FlexContainer>
 

frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-simple/sources-list/index.tsx

@@ -115,7 +115,7 @@ export const SourcesList: React.FC<Props> = ({
 
             {isSelected && (
               <SelectedTextWrapper>
-                <Checkbox initialValue={true} />
+                <Checkbox value={true} />
               </SelectedTextWrapper>
             )}
           </ListItem>

frontend/webapp/reuseable-components/checkbox/index.tsx

@@ -9,7 +9,7 @@ interface CheckboxProps {
   title?: string;
   titleColor?: React.CSSProperties['color'];
   tooltip?: string;
-  initialValue?: boolean;
+  value?: boolean;
   onChange?: (value: boolean) => void;
   disabled?: boolean;
   style?: React.CSSProperties;
@@ -36,9 +36,9 @@ const CheckboxWrapper = styled.div<{ $isChecked: boolean; $disabled?: CheckboxPr
   transition: border 0.3s, background-color 0.3s;
 `;
 
-export const Checkbox: React.FC<CheckboxProps> = ({ title, titleColor, tooltip, initialValue = false, onChange, disabled, style }) => {
-  const [isChecked, setIsChecked] = useState(initialValue);
-  useEffect(() => setIsChecked(initialValue), [initialValue]);
+export const Checkbox: React.FC<CheckboxProps> = ({ title, titleColor, tooltip, value = false, onChange, disabled, style }) => {
+  const [isChecked, setIsChecked] = useState(value);
+  useEffect(() => setIsChecked(value), [value]);
 
   const handleToggle: React.MouseEventHandler<HTMLDivElement> = (e) => {
     if (disabled) return;

frontend/webapp/reuseable-components/dropdown/index.tsx

@@ -250,7 +250,7 @@ const DropdownListItem: React.FC<{
   if (isMulti) {
     return (
       <DropdownItem className={isSelected ? 'selected' : ''}>
-        <Checkbox title={option.value} titleColor={theme.text.secondary} initialValue={isSelected} onChange={(toAdd) => (toAdd ? onSelect(option) : onDeselect?.(option))} style={{ width: '100%' }} />
+        <Checkbox title={option.value} titleColor={theme.text.secondary} value={isSelected} onChange={(toAdd) => (toAdd ? onSelect(option) : onDeselect?.(option))} style={{ width: '100%' }} />
       </DropdownItem>
     );
   }

frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx

@@ -84,9 +84,7 @@ export const MonitoringCheckboxes: React.FC<Props> = ({ isVertical, title = 'Mon
 
           if (!allowed) return null;
 
-          return (
-            <Checkbox key={monitor.id} title={monitor.title} disabled={!allowed || (isLastSelection && selected)} initialValue={selected} onChange={(value) => handleChange(monitor.type, value)} />
-          );
+          return <Checkbox key={monitor.id} title={monitor.title} disabled={!allowed || (isLastSelection && selected)} value={selected} onChange={(value) => handleChange(monitor.type, value)} />;
         })}
       </ListContainer>
 

frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx

@@ -66,7 +66,7 @@ const BaseNode: React.FC<Props> = ({ id: nodeId, data }) => {
         ) : // : type === 'source' && SOME_INDICATOR_THAT_THIS_IS_INSTRUMENTED ? ( <Image src={getEntityIcon(OVERVIEW_ENTITY_TYPES.RULE)} alt='' width={18} height={18} /> )
         null}
 
-        {type === 'source' ? <Checkbox initialValue={getSourceLocation().index !== -1} onChange={onSelectSource} /> : null}
+        {type === 'source' ? <Checkbox value={getSourceLocation().index !== -1} onChange={onSelectSource} /> : null}
       </>
     );
   };

frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx

@@ -78,7 +78,7 @@ const HeaderNode: React.FC<Props> = ({ data }) => {
 
     return (
       <ActionsWrapper>
-        <Checkbox initialValue={sources.length === totalSelectedSources} onChange={onSelect} />
+        <Checkbox value={sources.length === totalSelectedSources} onChange={onSelect} />
       </ActionsWrapper>
     );
   };