diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx index e1954ce8e..b105c14c5 100644 --- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx +++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx @@ -9,19 +9,8 @@ import { GET_DESTINATION_TYPE_DETAILS } from '@/graphql'; import { Body, Container, SideMenuWrapper } from '../styled'; import { Divider, SectionTitle } from '@/reuseable-components'; import { ConnectionNotification } from './connection-notification'; -import { - useConnectDestinationForm, - useConnectEnv, - useDestinationFormData, - useEditDestinationFormHandlers, -} from '@/hooks'; -import { - StepProps, - DestinationInput, - DestinationTypeItem, - DestinationDetailsResponse, - ConfiguredDestination, -} from '@/types'; +import { useComputePlatform, useConnectDestinationForm, useConnectEnv, useDestinationFormData, useEditDestinationFormHandlers } from '@/hooks'; +import { StepProps, DestinationInput, DestinationTypeItem, DestinationDetailsResponse, ConfiguredDestination } from '@/types'; const SIDE_MENU_DATA: StepProps[] = [ { @@ -42,38 +31,24 @@ interface ConnectDestinationModalBodyProps { onFormValidChange: (isValid: boolean) => void; } -export function ConnectDestinationModalBody({ - destination, - onSubmitRef, - onFormValidChange, -}: ConnectDestinationModalBodyProps) { +export function ConnectDestinationModalBody({ destination, onSubmitRef, onFormValidChange }: ConnectDestinationModalBodyProps) { const [destinationName, setDestinationName] = useState(''); const [showConnectionError, setShowConnectionError] = useState(false); - const { - dynamicFields, - exportedSignals, - setDynamicFields, - setExportedSignals, - } = useDestinationFormData(); + const { dynamicFields, exportedSignals, setDynamicFields, setExportedSignals } = useDestinationFormData(); const { connectEnv } = useConnectEnv(); + const { refetch } = useComputePlatform(); const { buildFormDynamicFields } = useConnectDestinationForm(); - const { handleDynamicFieldChange, handleSignalChange } = - useEditDestinationFormHandlers(setExportedSignals, setDynamicFields); + const { handleDynamicFieldChange, handleSignalChange } = useEditDestinationFormHandlers(setExportedSignals, setDynamicFields); - const addConfiguredDestination = useAppStore( - ({ addConfiguredDestination }) => addConfiguredDestination - ); + const addConfiguredDestination = useAppStore(({ addConfiguredDestination }) => addConfiguredDestination); - const { data } = useQuery( - GET_DESTINATION_TYPE_DETAILS, - { - variables: { type: destination?.type }, - skip: !destination, - } - ); + const { data } = useQuery(GET_DESTINATION_TYPE_DETAILS, { + variables: { type: destination?.type }, + skip: !destination, + }); useLayoutEffect(() => { if (!destination) return; @@ -109,9 +84,7 @@ export function ConnectDestinationModalBody({ }, [dynamicFields, destinationName, exportedSignals]); useEffect(() => { - const isFormValid = dynamicFields.every((field) => - field.required ? field.value : true - ); + const isFormValid = dynamicFields.every((field) => (field.required ? field.value : true)); onFormValidChange(isFormValid); }, [dynamicFields]); @@ -131,9 +104,7 @@ export function ConnectDestinationModalBody({ handleDynamicFieldChange(name, value); } function processFieldValue(field) { - return field.componentType === INPUT_TYPES.DROPDOWN - ? field.value.value - : field.value; + return field.componentType === INPUT_TYPES.DROPDOWN ? field.value.value : field.value; } function processFormFields() { @@ -185,17 +156,16 @@ export function ConnectDestinationModalBody({ try { // Await connection and store the configured destination if successful - await connectEnv(body, storeConfiguredDestination); + // await connectEnv(body, storeConfiguredDestination); + await connectEnv(body, refetch); } catch (error) { console.error('Failed to submit destination configuration:', error); // Handle error (e.g., show notification or alert) } } - if (!destination) return null; - const actionButton = useMemo(() => { - if (destination.testConnectionSupported) { + if (!!destination?.testConnectionSupported) { return ( { @@ -212,13 +182,9 @@ export function ConnectDestinationModalBody({ ); } return null; - }, [ - destination, - destinationName, - exportedSignals, - processFormFields, - onFormValidChange, - ]); + }, [destination, destinationName, exportedSignals, processFormFields, onFormValidChange]); + + if (!destination) return null; return ( @@ -227,16 +193,9 @@ export function ConnectDestinationModalBody({ - - - + + + setSelectedItem - ); + const setDrawerItem = useDrawerStore(({ setSelectedItem }) => setSelectedItem); + const { refetch } = useComputePlatform(); - async function updateExistingDestination( - id: string, - destination: DestinationInput - ) { + async function updateExistingDestination(id: string, destination: DestinationInput) { try { const { data } = await updateDestinationMutation({ variables: { id, destination }, }); - setDrawerItem({ id, item: data?.updateDestination, type: 'destination' }); - console.log({ data }); + + setDrawerItem(null); + refetch(); + return data?.updateDestination?.id; } catch (error) { console.error('Error updating destination:', error);