[gen-1131] chore: connect destination form

frontend/graph/model/destination.go

@@ -10,11 +10,11 @@ type GetDestinationTypesResponse struct {
 }
 
 type DestinationTypesCategoryItem struct {
-	Type                    common.DestinationType `json:"type"`
-	DisplayName             string                 `json:"display_name"`
-	ImageUrl                string                 `json:"image_url"`
-	SupportedSignals        SupportedSignals       `json:"supported_signals"`
-	TestConnectionSupported bool                   `json:"test_connection_supported"`
+	Type                    string           `json:"type"`
+	DisplayName             string           `json:"display_name"`
+	ImageUrl                string           `json:"image_url"`
+	SupportedSignals        SupportedSignals `json:"supported_signals"`
+	TestConnectionSupported bool             `json:"test_connection_supported"`
 }
 
 type SupportedSignals struct {

frontend/services/destinations.go

@@ -31,7 +31,7 @@ func GetDestinationTypes() model.GetDestinationTypesResponse {
 func DestinationTypeConfigToCategoryItem(destConfig destinations.Destination) model.DestinationTypesCategoryItem {
 
 	return model.DestinationTypesCategoryItem{
-		Type:                    common.DestinationType(destConfig.Metadata.Type),
+		Type:                    string(destConfig.Metadata.Type),
 		DisplayName:             destConfig.Metadata.DisplayName,
 		ImageUrl:                GetImageURL(destConfig.Spec.Image),
 		TestConnectionSupported: destConfig.Spec.TestConnectionSupported,

frontend/webapp/app/setup/choose-destination/page.tsx

@@ -1,6 +1,6 @@
 'use client';
-import { ChooseDestinationContainer } from '@/containers/main';
 import React from 'react';
+import { ChooseDestinationContainer } from '@/containers/main';
 
 export default function ChooseDestinationPage() {
   return (

frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx

@@ -11,6 +11,10 @@ interface AddDestinationModalProps {
   handleCloseModal: () => void;
 }
 
+interface DestinationCategory {
+  name: string;
+  items: DestinationTypeItem[];
+}
 function ModalActionComponent({
   onNext,
   onBack,
@@ -60,19 +64,22 @@ export function AddDestinationModal({
   function buildDestinationTypeList() {
     const destinationTypes = data?.destinationTypes?.categories || [];
     const destinationTypeList: DestinationTypeItem[] = destinationTypes.reduce(
-      (acc: DestinationTypeItem[], category: any) => {
-        const items = category.items.map((item: any) => ({
+      (acc: DestinationTypeItem[], category: DestinationCategory) => {
+        const items = category.items.map((item: DestinationTypeItem) => ({
           category: category.name,
           displayName: item.displayName,
           imageUrl: item.imageUrl,
           supportedSignals: item.supportedSignals,
+          testConnectionSupported: item.testConnectionSupported,
+          type: item.type,
         }));
         return [...acc, ...items];
       },
       []
     );
     setDestinationTypeList(destinationTypeList);
   }
+
   function handleNextStep(item: DestinationTypeItem) {
     setSelectedItem(item);
   }

frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx

@@ -1,8 +1,24 @@
-import React from 'react';
-import { DestinationTypeItem, StepProps } from '@/types';
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  DestinationDetailsResponse,
+  DestinationTypeItem,
+  DynamicField,
+  StepProps,
+} from '@/types';
 import { SideMenu } from '@/components';
-import { Divider, SectionTitle } from '@/reuseable-components';
+import {
+  Button,
+  CheckboxList,
+  Divider,
+  Input,
+  SectionTitle,
+} from '@/reuseable-components';
 import { Body, Container, SideMenuWrapper } from '../styled';
+import { GET_DESTINATION_TYPE_DETAILS } from '@/graphql';
+import { useQuery } from '@apollo/client';
+import styled from 'styled-components';
+import { DynamicConnectDestinationFormFields } from '../dynamic-form-fields';
+import { useConnectDestinationForm } from '@/hooks';
 const SIDE_MENU_DATA: StepProps[] = [
   {
     title: 'DESTINATIONS',
@@ -16,14 +32,77 @@ const SIDE_MENU_DATA: StepProps[] = [
   },
 ];
 
+const FormContainer = styled.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 24px;
+`;
+
 interface ConnectDestinationModalBodyProps {
   destination: DestinationTypeItem | undefined;
 }
 
 export function ConnectDestinationModalBody({
   destination,
 }: ConnectDestinationModalBodyProps) {
-  console.log({ destination });
+  const { data } = useQuery<DestinationDetailsResponse>(
+    GET_DESTINATION_TYPE_DETAILS,
+    {
+      variables: { type: destination?.type },
+      skip: !destination,
+    }
+  );
+  const [checkedState, setCheckedState] = useState<boolean[]>([]);
+  const [destinationName, setDestinationName] = useState<string>('');
+  const [dynamicFields, setDynamicFields] = useState<DynamicField[]>([]);
+  const [formData, setFormData] = useState<Record<string, any>>({});
+  const { buildFormDynamicFields } = useConnectDestinationForm();
+
+  const monitors = useMemo(() => {
+    if (!destination) return [];
+
+    const { logs, metrics, traces } = destination.supportedSignals;
+    return [
+      logs.supported && {
+        id: 'logs',
+        title: 'Logs',
+      },
+      metrics.supported && {
+        id: 'metrics',
+        title: 'Metrics',
+      },
+      traces.supported && {
+        id: 'traces',
+        title: 'Traces',
+      },
+    ].filter(Boolean);
+  }, [destination]);
+
+  useEffect(() => {
+    data && console.log({ destination, data });
+
+    if (data) {
+      const df = buildFormDynamicFields(data.destinationTypeDetails.fields);
+      console.log(
+        'is missing fileds',
+        df.length !== data.destinationTypeDetails.fields.length
+      );
+      console.log({ df });
+      setDynamicFields(df);
+    }
+  }, [data]);
+
+  function handleDynamicFieldChange(name: string, value: any) {
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  }
+
+  function handleSubmit() {
+    console.log({ formData });
+  }
+
+  if (!destination) return null;
+
   return (
     <Container>
       <SideMenuWrapper>
@@ -37,7 +116,28 @@ export function ConnectDestinationModalBody({
           buttonText="Check connection"
           onButtonClick={() => {}}
         />
-        <Divider margin="0 0 24px 0" />
+        <Divider margin="24px 0" />
+        <FormContainer>
+          <CheckboxList
+            checkedState={checkedState}
+            setCheckedState={setCheckedState}
+            monitors={monitors as []}
+            title="This connection will monitor:"
+          />
+          <Input
+            title="Destination name"
+            placeholder="Enter destination name"
+            value={destinationName}
+            onChange={(e) => setDestinationName(e.target.value)}
+          />
+          <DynamicConnectDestinationFormFields
+            fields={dynamicFields}
+            onChange={handleDynamicFieldChange}
+          />
+          <Button onClick={handleSubmit} disabled={!destinationName}>
+            <span>CONNECT</span>
+          </Button>
+        </FormContainer>
       </Body>
     </Container>
   );

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

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { INPUT_TYPES } from '@/utils/constants/string';
+import { Dropdown, Input } from '@/reuseable-components';
+
+export function DynamicConnectDestinationFormFields({
+  fields,
+  onChange,
+}: {
+  fields: any[];
+  onChange: (name: string, value: any) => void;
+}) {
+  return fields?.map((field: any) => {
+    switch (field.componentType) {
+      case INPUT_TYPES.INPUT:
+        return (
+          <Input
+            key={field.name}
+            {...field}
+            onChange={(value) => onChange(field.name, value)}
+          />
+        );
+
+      case INPUT_TYPES.DROPDOWN:
+        return (
+          <Dropdown
+            key={field.name}
+            {...field}
+            onSelect={(option) => onChange(field.name, option.value)}
+          />
+        );
+      case INPUT_TYPES.MULTI_INPUT:
+        return <div></div>;
+
+      case INPUT_TYPES.KEY_VALUE_PAIR:
+        return <div></div>;
+      case INPUT_TYPES.TEXTAREA:
+        return <div></div>;
+      default:
+        return null;
+    }
+  });
+}

frontend/webapp/containers/main/destinations/add-destination/styled.ts

@@ -3,6 +3,8 @@ import styled from 'styled-components';
 export const Body = styled.div`
   padding: 32px 32px 0;
   border-left: 1px solid rgba(249, 249, 249, 0.08);
+  min-height: 600px;
+  width: 692px;
 `;
 
 export const SideMenuWrapper = styled.div`