[GEN-2041]: fix auto-fill indicator for destinations (#2018)

This pull request includes several updates to the
`frontend/webapp/containers/main/destinations` directory, focusing on
enhancing the `DestinationFormBody` component and improving the export
structure of the `DestinationsList` component. The most important
changes include adding new hooks and logic to handle auto-filling of
dynamic fields, modifying the component structure for consistency, and
updating export statements.

Enhancements to `DestinationFormBody` component:

* Added `useEffect` and `useRef` hooks to handle the auto-filling check
for dynamic fields and set the `autoFilled` state accordingly.
[[1]](diffhunk://#diff-dfeb6d04b2e764197b17375e8347405ed7c67a7d706a34b6a2eaf09582e3b52cL1-R5)
[[2]](diffhunk://#diff-dfeb6d04b2e764197b17375e8347405ed7c67a7d706a34b6a2eaf09582e3b52cL33-R63)
* Modified the `DestinationFormBody` component to be a functional
component using arrow function syntax for consistency.
[[1]](diffhunk://#diff-dfeb6d04b2e764197b17375e8347405ed7c67a7d706a34b6a2eaf09582e3b52cL33-R63)
[[2]](diffhunk://#diff-dfeb6d04b2e764197b17375e8347405ed7c67a7d706a34b6a2eaf09582e3b52cL155-R182)
* Updated the rendering logic to display a notification note when the
connection details are auto-filled.

Improvements to `DestinationsList` component:

* Changed the `DestinationsList` component to be exported directly
instead of using a separate export statement.
[[1]](diffhunk://#diff-0fc3893b30022c16fec91cb64d38fa36de0dc4e8eabbbbb7a3b94701b45a4badL37-R37)
[[2]](diffhunk://#diff-0fc3893b30022c16fec91cb64d38fa36de0dc4e8eabbbbb7a3b94701b45a4badL75-L76)

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

@@ -1,8 +1,8 @@
-import React, { Dispatch, SetStateAction, useMemo, useState } from 'react';
+import React, { Dispatch, SetStateAction, useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { SignalUppercase } from '@/utils';
-import { type ConnectionStatus, TestConnection } from './test-connection';
 import { DestinationDynamicFields } from './dynamic-fields';
+import { type ConnectionStatus, TestConnection } from './test-connection';
 import { Divider, Input, MonitoringCheckboxes, NotificationNote, SectionTitle } from '@/reuseable-components';
 import { NOTIFICATION_TYPE, type DestinationInput, type DestinationTypeItem, type DynamicField } from '@/types';
 
@@ -30,12 +30,37 @@ const NotesWrapper = styled.div`
   gap: 12px;
 `;
 
-export function DestinationFormBody({ isUpdate, destination, formData, formErrors, validateForm, handleFormChange, dynamicFields, setDynamicFields }: Props) {
+export const DestinationFormBody = ({ isUpdate, destination, formData, formErrors, validateForm, handleFormChange, dynamicFields, setDynamicFields }: Props) => {
   const { supportedSignals, testConnectionSupported, displayName } = destination || {};
 
+  const [autoFilled, setAutoFilled] = useState(false);
   const [isFormDirty, setIsFormDirty] = useState(false);
   const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>();
 
+  const autoFillCheckRef = useRef(false);
+
+  useEffect(() => {
+    if (!!dynamicFields.length && !autoFillCheckRef.current) {
+      autoFillCheckRef.current = true;
+      let didAutoFill = false;
+
+      for (let i = 0; i < dynamicFields.length; i++) {
+        const { required, value } = dynamicFields[i];
+
+        if (required) {
+          if (value !== undefined) {
+            didAutoFill = true;
+          } else {
+            didAutoFill = false;
+            break;
+          }
+        }
+      }
+
+      setAutoFilled(didAutoFill);
+    }
+  }, [dynamicFields, isFormDirty]);
+
   const dirtyForm = () => {
     setIsFormDirty(true);
     setConnectionStatus(undefined);
@@ -99,11 +124,13 @@ export function DestinationFormBody({ isUpdate, destination, formData, formError
             }
           />
 
-          {testConnectionSupported && (
+          {(testConnectionSupported || autoFilled) && (
             <NotesWrapper>
-              {connectionStatus === NOTIFICATION_TYPE.ERROR && <NotificationNote type={NOTIFICATION_TYPE.ERROR} message='Connection failed. Please check your input and try again.' />}
-              {connectionStatus === NOTIFICATION_TYPE.SUCCESS && <NotificationNote type={NOTIFICATION_TYPE.SUCCESS} message='Connection succeeded.' />}
-              {!connectionStatus && <NotificationNote type={NOTIFICATION_TYPE.DEFAULT} message={`Odigos autocompleted ${displayName} connection details.`} />}
+              {testConnectionSupported && connectionStatus === NOTIFICATION_TYPE.ERROR && (
+                <NotificationNote type={NOTIFICATION_TYPE.ERROR} message='Connection failed. Please check your input and try again.' />
+              )}
+              {testConnectionSupported && connectionStatus === NOTIFICATION_TYPE.SUCCESS && <NotificationNote type={NOTIFICATION_TYPE.SUCCESS} message='Connection succeeded.' />}
+              {autoFilled && <NotificationNote type={NOTIFICATION_TYPE.DEFAULT} message={`Odigos autocompleted ${displayName} connection details.`} />}
             </NotesWrapper>
           )}
 
@@ -152,4 +179,4 @@ export function DestinationFormBody({ isUpdate, destination, formData, formError
       />
     </Container>
   );
-}
+};

frontend/webapp/containers/main/destinations/destination-modal/choose-destination-body/destinations-list/index.tsx

@@ -34,7 +34,7 @@ interface DestinationsListProps {
   setSelectedItems: (item: DestinationTypeItem) => void;
 }
 
-const DestinationsList: React.FC<DestinationsListProps> = ({ items, setSelectedItems }) => {
+export const DestinationsList: React.FC<DestinationsListProps> = ({ items, setSelectedItems }) => {
   function renderCategoriesList() {
     if (!items.length) {
       return (
@@ -72,5 +72,3 @@ const DestinationsList: React.FC<DestinationsListProps> = ({ items, setSelectedI
     </Container>
   );
 };
-
-export { DestinationsList };