From 21b705d6f8866462a723eb223066a62f9f12f47a Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Mon, 23 Dec 2024 12:24:03 +0200
Subject: [PATCH 1/2] [GEN-2080]: fix useConnectDestinationForm to support
 additional component properties for checkboxes (#2043)

This pull request focuses on replacing the `initialValue` prop with the
`value` prop for the `Checkbox` component across various parts of the
codebase. This change aims to standardize the usage of the `Checkbox`
component and ensure consistency in its implementation.

Key changes include:

*Checkbox Component Update:*
*
[`frontend/webapp/reuseable-components/checkbox/index.tsx`](diffhunk://#diff-e3e26dd8177396b9bc7c42ef92c2501572b33fed1806496d512ed90c2539f831L12-R12):
Replaced `initialValue` prop with `value` prop in the `Checkbox`
component. Updated the state management and useEffect hook accordingly.
[[1]](diffhunk://#diff-e3e26dd8177396b9bc7c42ef92c2501572b33fed1806496d512ed90c2539f831L12-R12)
[[2]](diffhunk://#diff-e3e26dd8177396b9bc7c42ef92c2501572b33fed1806496d512ed90c2539f831L39-R41)

*Usage in Forms and Fields:*
*
[`frontend/webapp/containers/main/actions/action-form-body/custom-fields/pii-masking.tsx`](diffhunk://#diff-1d91fa50761c80281ff07b7acecbeceb87478bdfd17634c6ee9ff0dd8905b5d5L69-R69):
Updated `Checkbox` component to use `value` instead of `initialValue`.
*
[`frontend/webapp/containers/main/destinations/destination-form-body/dynamic-fields/index.tsx`](diffhunk://#diff-c17889e1ffea148a206f57df5da9f8cc755e7e522a9057a339f6887c01ed5815L27-R27):
Updated `Checkbox` component to use `value` instead of `initialValue`.
*
[`frontend/webapp/containers/main/instrumentation-rules/rule-form-body/custom-fields/payload-collection.tsx`](diffhunk://#diff-e24d6b5b41b8be540f0fb09e0cc33f0d4aff8a7e61e19053129e9e1d36c845daL94-R94):
Updated `Checkbox` component to use `value` instead of `initialValue`.

*Usage in Source Selection:*
*
[`frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-fast/source-controls/index.tsx`](diffhunk://#diff-9730809c6d075f90b2e6e31dc914c93f5507fc1ad62343607b690162c0af150dL37-R37):
Updated `Checkbox` component to use `value` instead of `initialValue`.
*
[`frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-fast/sources-list/index.tsx`](diffhunk://#diff-6b67649d370d208941f4e5a78c0c9de2f5b9b65fd49e0ede8ef57066982450aaL142-R142):
Updated `Checkbox` component to use `value` instead of `initialValue`.
[[1]](diffhunk://#diff-6b67649d370d208941f4e5a78c0c9de2f5b9b65fd49e0ede8ef57066982450aaL142-R142)
[[2]](diffhunk://#diff-6b67649d370d208941f4e5a78c0c9de2f5b9b65fd49e0ede8ef57066982450aaL169-R169)

*Other Updates:*
*
[`frontend/webapp/hooks/destinations/useConnectDestinationForm.ts`](diffhunk://#diff-ff55b24fb020911d3ee70fd88fce706bdc4348bfdebe633f7e6967f560218b4eL8-R61):
Refactored the `buildFormDynamicFields` function to use the `value` prop
for various input types including `CHECKBOX`.
*
[`frontend/webapp/reuseable-components/dropdown/index.tsx`](diffhunk://#diff-707b6e11fbf977d74c45816fab07924a0eaa2d139b296cc58b74c98fd76f463dL253-R253):
Updated `Checkbox` component to use `value` instead of `initialValue` in
the dropdown list item.

These changes ensure that the `Checkbox` component is consistently using
the `value` prop, which improves the readability and maintainability of
the codebase.
---
 .../custom-fields/pii-masking.tsx             |  2 +-
 .../dynamic-fields/index.tsx                  |  2 +-
 .../custom-fields/payload-collection.tsx      |  2 +-
 .../source-controls/index.tsx                 |  2 +-
 .../sources-list/index.tsx                    |  4 +-
 .../source-controls/index.tsx                 |  7 +--
 .../sources-list/index.tsx                    |  2 +-
 .../destinations/useConnectDestinationForm.ts | 60 +++++++++----------
 .../reuseable-components/checkbox/index.tsx   |  8 +--
 .../reuseable-components/dropdown/index.tsx   |  2 +-
 .../reuseable-components/input/index.tsx      |  8 +--
 .../monitoring-checkboxes/index.tsx           |  4 +-
 .../nodes-data-flow/nodes/base-node.tsx       |  2 +-
 .../nodes-data-flow/nodes/header-node.tsx     |  2 +-
 14 files changed, 48 insertions(+), 59 deletions(-)

diff --git a/frontend/webapp/containers/main/actions/action-form-body/custom-fields/pii-masking.tsx b/frontend/webapp/containers/main/actions/action-form-body/custom-fields/pii-masking.tsx
index 3a719af67..e386c8941 100644
--- a/frontend/webapp/containers/main/actions/action-form-body/custom-fields/pii-masking.tsx
+++ b/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>}
diff --git a/frontend/webapp/containers/main/destinations/destination-form-body/dynamic-fields/index.tsx b/frontend/webapp/containers/main/destinations/destination-form-body/dynamic-fields/index.tsx
index d7e73213d..e3c3ddff5 100644
--- a/frontend/webapp/containers/main/destinations/destination-form-body/dynamic-fields/index.tsx
+++ b/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;
     }
diff --git a/frontend/webapp/containers/main/instrumentation-rules/rule-form-body/custom-fields/payload-collection.tsx b/frontend/webapp/containers/main/instrumentation-rules/rule-form-body/custom-fields/payload-collection.tsx
index 9c472399e..8752cdfa7 100644
--- a/frontend/webapp/containers/main/instrumentation-rules/rule-form-body/custom-fields/payload-collection.tsx
+++ b/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>}
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-fast/source-controls/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-fast/source-controls/index.tsx
index 89020fd47..6dcb96291 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-fast/source-controls/index.tsx
+++ b/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>
 
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-fast/sources-list/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-fast/sources-list/index.tsx
index 2788b5069..4eefe39df 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-fast/sources-list/index.tsx
+++ b/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}
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-simple/source-controls/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-simple/source-controls/index.tsx
index c141fb400..0dacbbb7c 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-simple/source-controls/index.tsx
+++ b/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>
 
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-simple/sources-list/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-simple/sources-list/index.tsx
index 1c0c74ee8..c86524e71 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-simple/sources-list/index.tsx
+++ b/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>
diff --git a/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts b/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
index 5d4cff9b8..4dd8827b3 100644
--- a/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
+++ b/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
@@ -5,64 +5,60 @@ export function useConnectDestinationForm() {
   function buildFormDynamicFields(fields: DestinationDetailsField[]): DynamicField[] {
     return fields
       .map((field) => {
-        const { name, componentType, displayName, componentProperties, initialValue } = field;
+        const { componentType, displayName, initialValue, componentProperties, ...restOfField } = field;
 
         let componentPropertiesJson;
         let initialValuesJson;
-        switch (componentType) {
-          case INPUT_TYPES.DROPDOWN:
-            componentPropertiesJson = safeJsonParse<{ [key: string]: string }>(componentProperties, {});
-
-            const options = Array.isArray(componentPropertiesJson.values)
-              ? componentPropertiesJson.values.map((value) => ({
-                  id: value,
-                  value,
-                }))
-              : Object.entries(componentPropertiesJson.values).map(([key, value]) => ({
-                  id: key,
-                  value,
-                }));
-
-            return {
-              name,
-              componentType,
-              title: displayName,
-              onSelect: () => {},
-              options,
-              placeholder: 'Select an option',
-              ...componentPropertiesJson,
-            };
 
+        switch (componentType) {
           case INPUT_TYPES.INPUT:
           case INPUT_TYPES.TEXTAREA:
-            componentPropertiesJson = safeJsonParse<string[]>(componentProperties, []);
+          case INPUT_TYPES.CHECKBOX:
+          case INPUT_TYPES.KEY_VALUE_PAIR:
+            componentPropertiesJson = safeJsonParse<{ [key: string]: string }>(componentProperties, {});
 
             return {
-              name,
               componentType,
               title: displayName,
+              value: initialValue,
+              ...restOfField,
               ...componentPropertiesJson,
             };
 
           case INPUT_TYPES.MULTI_INPUT:
-            componentPropertiesJson = safeJsonParse<string[]>(componentProperties, []);
+            componentPropertiesJson = safeJsonParse<{ [key: string]: string }>(componentProperties, {});
             initialValuesJson = safeJsonParse<string[]>(initialValue, []);
 
             return {
-              name,
               componentType,
               title: displayName,
-              initialValues: initialValuesJson,
               value: initialValuesJson,
+              initialValues: initialValuesJson,
+              ...restOfField,
               ...componentPropertiesJson,
             };
 
-          case INPUT_TYPES.KEY_VALUE_PAIR:
-          case INPUT_TYPES.CHECKBOX:
+          case INPUT_TYPES.DROPDOWN:
+            componentPropertiesJson = safeJsonParse<{ [key: string]: string }>(componentProperties, {});
+
+            const options = Array.isArray(componentPropertiesJson.values)
+              ? componentPropertiesJson.values.map((value) => ({
+                  id: value,
+                  value,
+                }))
+              : Object.entries(componentPropertiesJson.values).map(([key, value]) => ({
+                  id: key,
+                  value,
+                }));
+
             return {
-              name,
               componentType,
               title: displayName,
+              value: initialValue,
+              placeholder: componentPropertiesJson.placeholder || 'Select an option',
+              options,
+              onSelect: () => {},
+              ...restOfField,
               ...componentPropertiesJson,
             };
 
diff --git a/frontend/webapp/reuseable-components/checkbox/index.tsx b/frontend/webapp/reuseable-components/checkbox/index.tsx
index 41bf10d21..05552a840 100644
--- a/frontend/webapp/reuseable-components/checkbox/index.tsx
+++ b/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;
diff --git a/frontend/webapp/reuseable-components/dropdown/index.tsx b/frontend/webapp/reuseable-components/dropdown/index.tsx
index eeba6c37c..08007b487 100644
--- a/frontend/webapp/reuseable-components/dropdown/index.tsx
+++ b/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>
     );
   }
diff --git a/frontend/webapp/reuseable-components/input/index.tsx b/frontend/webapp/reuseable-components/input/index.tsx
index 28f94ce10..04daaf130 100644
--- a/frontend/webapp/reuseable-components/input/index.tsx
+++ b/frontend/webapp/reuseable-components/input/index.tsx
@@ -1,10 +1,10 @@
-import React, { useState, forwardRef, type ChangeEvent, type KeyboardEventHandler } from 'react';
+import React, { useState, forwardRef, type ChangeEvent, type KeyboardEventHandler, type InputHTMLAttributes } from 'react';
 import theme from '@/styles/theme';
 import styled, { css } from 'styled-components';
 import { EyeClosedIcon, EyeOpenIcon, SVG } from '@/assets';
 import { FieldError, FieldLabel } from '@/reuseable-components';
 
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   title?: string;
   icon?: SVG;
   tooltip?: string;
@@ -116,10 +116,10 @@ const Button = styled.button`
 
 // Wrap Input with forwardRef to handle the ref prop
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ icon: Icon, buttonLabel, onButtonClick, hasError, errorMessage, title, tooltip, required, initialValue, onChange, type = 'text', name, ...props }, ref) => {
+  ({ icon: Icon, buttonLabel, onButtonClick, hasError, errorMessage, title, tooltip, required, initialValue, value: v, onChange, type = 'text', name, ...props }, ref) => {
     const isSecret = type === 'password';
     const [revealSecret, setRevealSecret] = useState(false);
-    const [value, setValue] = useState<string>(initialValue || '');
+    const [value, setValue] = useState<string>(v?.toString() || initialValue || '');
 
     const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
       e.stopPropagation();
diff --git a/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx b/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx
index f87ec8597..0f087596b 100644
--- a/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx
+++ b/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>
 
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
index 26de7526a..318102bc4 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
+++ b/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}
       </>
     );
   };
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx
index 77f35072d..34f74ad92 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx
+++ b/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>
     );
   };

From 016e7be4e6446cb59be4b1c9b5a04416cb37c104 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Mon, 23 Dec 2024 12:42:01 +0200
Subject: [PATCH 2/2] [GEN-2079]: enhance tooltip positioning logic with useRef
 for better accuracy (#2041)

---
 .../reuseable-components/tooltip/index.tsx    | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/frontend/webapp/reuseable-components/tooltip/index.tsx b/frontend/webapp/reuseable-components/tooltip/index.tsx
index 7e77424f4..77a66e8a2 100644
--- a/frontend/webapp/reuseable-components/tooltip/index.tsx
+++ b/frontend/webapp/reuseable-components/tooltip/index.tsx
@@ -1,9 +1,8 @@
-import React, { useState, PropsWithChildren } from 'react';
-import Image from 'next/image';
+import React, { useState, PropsWithChildren, useRef, MouseEvent, forwardRef } from 'react';
 import ReactDOM from 'react-dom';
-import { Text } from '../text';
-import styled from 'styled-components';
+import { Text } from '..';
 import { InfoIcon } from '@/assets';
+import styled from 'styled-components';
 
 interface Position {
   top: number;
@@ -27,17 +26,17 @@ const TooltipContainer = styled.div`
 export const Tooltip: React.FC<TooltipProps> = ({ text, withIcon, children }) => {
   const [isHovered, setIsHovered] = useState(false);
   const [popupPosition, setPopupPosition] = useState<Position>({ top: 0, left: 0 });
+  const popupRef = useRef<HTMLDivElement>(null);
 
-  const handleMouseEvent = (e: React.MouseEvent) => {
+  const handleMouseEvent = (e: MouseEvent) => {
     const { type, clientX, clientY } = e;
     const { innerWidth, innerHeight } = window;
 
     let top = clientY;
     let left = clientX;
-    const textLen = text?.length || 0;
 
-    if (top >= innerHeight / 2) top += -40;
-    if (left >= innerWidth / 2) left += -(textLen * 8);
+    if (top >= innerHeight / 2) top += -(popupRef.current?.clientHeight || 40);
+    if (left >= innerWidth / 2) left += -(popupRef.current?.clientWidth || Math.min((text?.length || 0) * 7.5, 300));
 
     setPopupPosition({ top, left });
     setIsHovered(type !== 'mouseleave');
@@ -49,7 +48,11 @@ export const Tooltip: React.FC<TooltipProps> = ({ text, withIcon, children }) =>
     <TooltipContainer onMouseEnter={handleMouseEvent} onMouseMove={handleMouseEvent} onMouseLeave={handleMouseEvent}>
       {children}
       {withIcon && <InfoIcon />}
-      {isHovered && <Popup {...popupPosition}>{text}</Popup>}
+      {isHovered && (
+        <Popup ref={popupRef} {...popupPosition}>
+          {text}
+        </Popup>
+      )}
     </TooltipContainer>
   );
 };
@@ -70,11 +73,11 @@ const PopupContainer = styled.div<{ $top: number; $left: number }>`
   pointer-events: none;
 `;
 
-const Popup: React.FC<PopupProps> = ({ top, left, children }) => {
+const Popup = forwardRef<HTMLDivElement, PopupProps>(({ top, left, children }, ref) => {
   return ReactDOM.createPortal(
-    <PopupContainer $top={top} $left={left}>
+    <PopupContainer ref={ref} $top={top} $left={left}>
       <Text size={12}>{children}</Text>
     </PopupContainer>,
     document.body,
   );
-};
+});