feat: update edit sync for cursor field

Multiwoven · Apr 16, 2024 · 54e74ab · 54e74ab
1 parent 2fce5fa
commit 54e74ab
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 6 deletions.
diff --git a/ui/src/views/Activate/Syncs/EditSync/EditSync.tsx b/ui/src/views/Activate/Syncs/EditSync/EditSync.tsx
@@ -29,6 +29,7 @@ const EditSync = (): JSX.Element | null => {
   const [isEditLoading, setIsEditLoading] = useState<boolean>(false);
   const [configuration, setConfiguration] = useState<FieldMapType[] | null>(null);
   const [selectedSyncMode, setSelectedSyncMode] = useState('');
+  const [cursorField, setCursorField] = useState('');
 
   const { syncId } = useParams();
   const showToast = useCustomToast();
@@ -92,6 +93,7 @@ const EditSync = (): JSX.Element | null => {
               sync_interval: data.sync_interval,
               sync_interval_unit: data.sync_interval_unit,
               sync_mode: selectedSyncMode,
+              cursor_field: cursorField,
             },
           };
 
@@ -163,6 +165,7 @@ const EditSync = (): JSX.Element | null => {
         setConfiguration(transformedConfigs);
       }
       setSelectedSyncMode(syncData?.sync_mode ?? 'full_refresh');
+      setCursorField(syncData?.cursor_field || '');
     }
   }, [syncFetchResponse]);
 
@@ -193,6 +196,8 @@ const EditSync = (): JSX.Element | null => {
                 setSelectedSyncMode={setSelectedSyncMode}
                 selectedSyncMode={selectedSyncMode}
                 selectedStreamName={syncData?.stream_name}
+                selectedCursorField={cursorField}
+                setCursorField={setCursorField}
               />
               {catalogData?.data.attributes.catalog.schema_mode === SchemaMode.schemaless ? (
                 <MapCustomFields

diff --git a/ui/src/views/Activate/Syncs/SyncForm/ConfigureSyncs/ConfigureSyncs.tsx b/ui/src/views/Activate/Syncs/SyncForm/ConfigureSyncs/ConfigureSyncs.tsx
@@ -2,7 +2,7 @@ import ContentContainer from '@/components/ContentContainer';
 import { SteppedFormContext } from '@/components/SteppedForm/SteppedForm';
 import { ModelEntity } from '@/views/Models/types';
 import { Box } from '@chakra-ui/react';
-import { FormEvent, useContext, Dispatch, SetStateAction, useState } from 'react';
+import { FormEvent, useContext, Dispatch, SetStateAction } from 'react';
 import SelectStreams from './SelectStreams';
 import { Stream, FieldMap as FieldMapType } from '@/views/Activate/Syncs/types';
 import MapFields from './MapFields';
@@ -19,23 +19,26 @@ type ConfigureSyncsProps = {
   configuration: FieldMapType[] | null;
   schemaMode: SchemaMode | null;
   selectedSyncMode: string;
+  cursorField: string;
   setSelectedStream: Dispatch<SetStateAction<Stream | null>>;
   setConfiguration: Dispatch<SetStateAction<FieldMapType[] | null>>;
   setSchemaMode: Dispatch<SetStateAction<SchemaMode | null>>;
   setSelectedSyncMode: Dispatch<SetStateAction<string>>;
+  setCursorField: Dispatch<SetStateAction<string>>;
 };
 
 const ConfigureSyncs = ({
   selectedStream,
   configuration,
   selectedSyncMode,
+  cursorField,
   setSelectedStream,
   setConfiguration,
   setSchemaMode,
   setSelectedSyncMode,
+  setCursorField,
 }: ConfigureSyncsProps): JSX.Element | null => {
   const { state, stepInfo, handleMoveForward } = useContext(SteppedFormContext);
-  const [cursorField, setCursorField] = useState('');
 
   const { forms } = state;
 

diff --git a/ui/src/views/Activate/Syncs/SyncForm/ConfigureSyncs/SelectStreams.tsx b/ui/src/views/Activate/Syncs/SyncForm/ConfigureSyncs/SelectStreams.tsx
@@ -100,8 +100,7 @@ const SelectStreams = ({
         })
       : [];
 
-  const sourceDefinedCursor =
-    selectedStreamIndex !== -1 ? streams?.[selectedStreamIndex]?.source_defined_cursor : false;
+  const sourceDefinedCursor = modelDiscoverData?.data?.attributes?.catalog?.source_defined_cursor;
 
   return (
     <Box
@@ -205,7 +204,7 @@ const SelectStreams = ({
               borderColor='gray.400'
               fontSize='14px'
               isRequired
-              disabled={!selectedStream}
+              disabled={isEdit}
             >
               {modelColumns?.map((modelColumn) => (
                 <option value={modelColumn} key={modelColumn}>

diff --git a/ui/src/views/Activate/Syncs/SyncForm/SyncForm.tsx b/ui/src/views/Activate/Syncs/SyncForm/SyncForm.tsx
@@ -16,6 +16,7 @@ const SyncForm = (): JSX.Element => {
   const [configuration, setConfiguration] = useState<FieldMapType[] | null>(null);
   const [schemaMode, setSchemaMode] = useState<SchemaMode | null>(null);
   const [selectedSyncMode, setSelectedSyncMode] = useState('');
+  const [cursorField, setCursorField] = useState('');
 
   const navigate = useNavigate();
   const steps = [
@@ -44,11 +45,13 @@ const SyncForm = (): JSX.Element => {
           selectedStream={selectedStream}
           configuration={configuration}
           schemaMode={schemaMode}
+          cursorField={cursorField}
           selectedSyncMode={selectedSyncMode}
           setSelectedStream={setSelectedStream}
           setConfiguration={setConfiguration}
           setSchemaMode={setSchemaMode}
           setSelectedSyncMode={setSelectedSyncMode}
+          setCursorField={setCursorField}
         />
       ),
       isRequireContinueCta: false,

diff --git a/ui/src/views/Activate/Syncs/types.ts b/ui/src/views/Activate/Syncs/types.ts
@@ -8,7 +8,6 @@ export type Stream = {
   json_schema: RJSFSchema;
   url: string;
   supported_sync_modes: string[];
-  source_defined_cursor: boolean;
 };
 
 export enum SchemaMode {
@@ -30,6 +29,7 @@ export type DiscoverResponse = {
         catalog_hash: string;
         connector_id: number;
         workspace_id: number;
+        source_defined_cursor: boolean;
       };
     };
     id: string;
@@ -71,6 +71,7 @@ export interface SyncEntity extends ConfigSync {
   sync_mode: string;
   sync_interval: number;
   sync_interval_unit: string;
+  cursor_field: string;
 }
 
 export type CreateSyncPayload = {
@@ -95,6 +96,7 @@ export type CreateSyncResponse = {
     sync_interval: number;
     sync_interval_unit: 'minutes';
     sync_mode: 'full_refresh';
+    cursor_field: string;
     source: {
       connector_name: string;
       icon: string;