fix: sync creation process (#48)

* style: layout fix for the cross icon * fix: persist state for sync mode
Multiwoven · Apr 16, 2024 · e3e71ff · e3e71ff
1 parent 0fa80c5
commit e3e71ff
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 15 deletions.
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';
@@ -18,20 +18,23 @@ type ConfigureSyncsProps = {
   selectedStream: Stream | null;
   configuration: FieldMapType[] | null;
   schemaMode: SchemaMode | null;
+  selectedSyncMode: string;
   setSelectedStream: Dispatch<SetStateAction<Stream | null>>;
   setConfiguration: Dispatch<SetStateAction<FieldMapType[] | null>>;
   setSchemaMode: Dispatch<SetStateAction<SchemaMode | null>>;
+  setSelectedSyncMode: Dispatch<SetStateAction<string>>;
 };
 
 const ConfigureSyncs = ({
   selectedStream,
   configuration,
+  selectedSyncMode,
   setSelectedStream,
   setConfiguration,
   setSchemaMode,
+  setSelectedSyncMode,
 }: ConfigureSyncsProps): JSX.Element | null => {
   const { state, stepInfo, handleMoveForward } = useContext(SteppedFormContext);
-  const [selectedSyncMode, setSelectedSyncMode] = useState('');
   const { forms } = state;
 
   const modelInfo = forms.find((form) => form.stepKey === 'selectModel');
@@ -63,9 +66,9 @@ const ConfigureSyncs = ({
   };
 
   const { data: catalogData } = useQuery({
-    queryKey: ['syncs', 'catalog', selectedDestination.id],
-    queryFn: () => getCatalog(selectedDestination.id),
-    enabled: !!selectedDestination.id,
+    queryKey: ['syncs', 'catalog', selectedDestination?.id],
+    queryFn: () => getCatalog(selectedDestination?.id),
+    enabled: !!selectedDestination?.id,
     refetchOnMount: false,
     refetchOnWindowFocus: false,
   });

diff --git a/ui/src/views/Activate/Syncs/SyncForm/ConfigureSyncs/MapFields.tsx b/ui/src/views/Activate/Syncs/SyncForm/ConfigureSyncs/MapFields.tsx
@@ -174,16 +174,20 @@ const MapFields = ({
             isDisabled={!stream || isRequired}
             selectedConfigOptions={configuration}
           />
-          {!isRequired && (
-            <Box py='20px' position='relative' top='12px' color='gray.600'>
-              <CloseButton
-                size='sm'
-                marginLeft='10px'
-                _hover={{ backgroundColor: 'none' }}
-                onClick={() => handleRemoveMap(index)}
-              />
-            </Box>
-          )}
+          <Box
+            py='20px'
+            position='relative'
+            top='12px'
+            color='gray.600'
+            visibility={isRequired ? 'hidden' : 'visible'}
+          >
+            <CloseButton
+              size='sm'
+              marginLeft='10px'
+              _hover={{ backgroundColor: 'none' }}
+              onClick={() => handleRemoveMap(index)}
+            />
+          </Box>
         </Box>
       ))}
       <Box>

diff --git a/ui/src/views/Activate/Syncs/SyncForm/ConfigureSyncs/TemplateMapping/TemplateMapping.tsx b/ui/src/views/Activate/Syncs/SyncForm/ConfigureSyncs/TemplateMapping/TemplateMapping.tsx
@@ -124,6 +124,7 @@ const TemplateMapping = ({
           _placeholder={{ color: isDisabled ? 'black.500' : 'gray.600' }}
           value={selectedConfig}
           onClick={() => setIsPopOverOpen((prevState) => !prevState)}
+          autoComplete='off'
         />
       </PopoverTrigger>
       <PopoverContent>

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