feat: added custom dropdown for destination columns (#30)

Multiwoven · Apr 10, 2024 · 5266158 · 5266158
1 parent 281d6aa
commit 5266158
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 85 deletions.
diff --git a/ui/src/views/Activate/Syncs/SyncForm/ConfigureSyncs/FieldMap.tsx b/ui/src/views/Activate/Syncs/SyncForm/ConfigureSyncs/FieldMap.tsx
@@ -1,5 +1,5 @@
 import EntityItem from '@/components/EntityItem';
-import { Box, Input, Select } from '@chakra-ui/react';
+import { Box, Input } from '@chakra-ui/react';
 import TemplateMapping from './TemplateMapping/TemplateMapping';
 import { FieldMap as FieldMapType } from '@/views/Activate/Syncs/types';
 
@@ -16,47 +16,13 @@ type FieldMapProps = {
   selectedConfigOptions?: FieldMapType[] | null;
 };
 
-const DropdownField = ({
-  selectedConfigOptions,
-  entityName,
-  isDisabled,
-  id,
-  fieldType,
-  onChange,
-  options,
-  disabledOptions,
-}: FieldMapProps) => {
-  return (
-    <Select
-      value={selectedConfigOptions?.[id]?.to}
-      placeholder={`Select a field from ${entityName}`}
-      backgroundColor={isDisabled ? 'gray.300' : 'gray.100'}
-      isDisabled={isDisabled}
-      onChange={(e) => onChange(id, fieldType, e.target.value)}
-      isRequired
-      borderWidth='1px'
-      borderStyle='solid'
-      borderColor={isDisabled ? 'gray.500' : 'gray.400'}
-      color='black.500'
-      _placeholder={{ color: isDisabled ? 'black.500' : 'gray.600' }}
-    >
-      {options?.map((option) => (
-        <option key={option} value={option} disabled={disabledOptions?.includes?.(option)}>
-          {option}
-        </option>
-      ))}
-    </Select>
-  );
-};
-
 const FieldMap = ({
   id,
   fieldType,
   icon,
   entityName,
   options,
   value,
-  disabledOptions = [],
   onChange,
   isDisabled,
   selectedConfigOptions,
@@ -67,19 +33,7 @@ const FieldMap = ({
         <EntityItem icon={icon} name={entityName} />
       </Box>
       <Box position='relative'>
-        {fieldType === 'destination' ? (
-          <DropdownField
-            icon={icon}
-            selectedConfigOptions={selectedConfigOptions}
-            entityName={entityName}
-            isDisabled={isDisabled}
-            id={id}
-            fieldType={fieldType}
-            onChange={onChange}
-            options={options}
-            disabledOptions={disabledOptions}
-          />
-        ) : fieldType === 'custom' ? (
+        {fieldType === 'custom' ? (
           <Input
             value={value}
             onChange={(e) => onChange(id, fieldType, e.target.value)}
@@ -94,7 +48,12 @@ const FieldMap = ({
             columnOptions={options ? options : []}
             handleUpdateConfig={onChange}
             mappingId={id}
-            selectedConfig={selectedConfigOptions?.[id]?.from}
+            selectedConfig={
+              fieldType === 'model'
+                ? selectedConfigOptions?.[id]?.from
+                : selectedConfigOptions?.[id]?.to
+            }
+            fieldType={fieldType}
           />
         )}
       </Box>

diff --git a/ui/src/views/Activate/Syncs/SyncForm/ConfigureSyncs/SelectStreams.tsx b/ui/src/views/Activate/Syncs/SyncForm/ConfigureSyncs/SelectStreams.tsx
@@ -130,6 +130,7 @@ const SelectStreams = ({
             borderWidth='1px'
             borderColor='gray.400'
             fontSize='14px'
+            isRequired
           >
             {refreshOptions?.map((refreshMode) => (
               <option value={refreshMode.value} key={refreshMode.value}>

diff --git a/ui/src/views/Activate/Syncs/SyncForm/ConfigureSyncs/TemplateMapping/Columns.tsx b/ui/src/views/Activate/Syncs/SyncForm/ConfigureSyncs/TemplateMapping/Columns.tsx
@@ -15,6 +15,7 @@ import NoConnectorsFound from '@/assets/images/empty-state-illustration.svg';
 
 type ColumnsProps = {
   columnOptions: string[];
+  fieldType: 'model' | 'destination';
   catalogMapping?: SyncsConfigurationForTemplateMapping;
   showFilter?: boolean;
   showDescription?: boolean;
@@ -26,9 +27,10 @@ const Columns = ({
   columnOptions,
   catalogMapping,
   onSelect,
+  fieldType,
   showFilter = false,
   showDescription = false,
-  height = '170px',
+  height = fieldType === 'model' ? '170px' : '225px',
 }: ColumnsProps): JSX.Element => {
   const [searchTerm, setSearchTerm] = useState<string>('');
 

diff --git a/ui/src/views/Activate/Syncs/SyncForm/ConfigureSyncs/TemplateMapping/TemplateMapping.tsx b/ui/src/views/Activate/Syncs/SyncForm/ConfigureSyncs/TemplateMapping/TemplateMapping.tsx
@@ -29,6 +29,7 @@ type TemplateMappingProps = {
   entityName: string;
   isDisabled: boolean;
   columnOptions: string[];
+  fieldType: 'model' | 'destination';
   handleUpdateConfig: (
     id: number,
     type: 'model' | 'destination',
@@ -63,6 +64,7 @@ const TemplateMapping = ({
   handleUpdateConfig,
   mappingId,
   selectedConfig,
+  fieldType,
 }: TemplateMappingProps): JSX.Element => {
   const [activeTab, setActiveTab] = useState(OPTION_TYPE.STANDARD);
   const [selectedTemplate, setSelectedTemplate] = useState('');
@@ -88,15 +90,15 @@ const TemplateMapping = ({
     if (activeTab === OPTION_TYPE.TEMPLATE) {
       handleUpdateConfig(
         mappingId,
-        'model',
+        fieldType,
         selectedTemplate > '' ? selectedTemplate : 'current_timestamp',
         activeTab,
       );
       setIsPopOverOpen(false);
     } else {
       handleUpdateConfig(
         mappingId,
-        'model',
+        fieldType,
         selectedStaticOptionValue > '' ? selectedStaticOptionValue.toString() : 'null',
         activeTab,
       );
@@ -143,44 +145,47 @@ const TemplateMapping = ({
           flex='1 1 0%'
         >
           <Stack gap='12px' height='100%'>
-            <Stack spacing='16'>
-              <Tabs
-                size='md'
-                variant='indicator'
-                background='gray.300'
-                padding={1}
-                borderRadius='8px'
-                borderStyle='solid'
-                borderWidth='1px'
-                borderColor='gray.400'
-                width='fit-content'
-              >
-                <TabList gap='8px'>
-                  <TabName
-                    title='Column'
-                    handleActiveTab={() => setActiveTab(OPTION_TYPE.STANDARD)}
-                  />
-                  <TabName
-                    title='Static Value'
-                    handleActiveTab={() => setActiveTab(OPTION_TYPE.STATIC)}
-                  />
-                  <TabName
-                    title='Template'
-                    handleActiveTab={() => setActiveTab(OPTION_TYPE.TEMPLATE)}
-                  />
-                </TabList>
-                <TabIndicator />
-              </Tabs>
-            </Stack>
+            {fieldType === 'model' && (
+              <Stack spacing='16'>
+                <Tabs
+                  size='md'
+                  variant='indicator'
+                  background='gray.300'
+                  padding={1}
+                  borderRadius='8px'
+                  borderStyle='solid'
+                  borderWidth='1px'
+                  borderColor='gray.400'
+                  width='fit-content'
+                >
+                  <TabList gap='8px'>
+                    <TabName
+                      title='Column'
+                      handleActiveTab={() => setActiveTab(OPTION_TYPE.STANDARD)}
+                    />
+                    <TabName
+                      title='Static Value'
+                      handleActiveTab={() => setActiveTab(OPTION_TYPE.STATIC)}
+                    />
+                    <TabName
+                      title='Template'
+                      handleActiveTab={() => setActiveTab(OPTION_TYPE.TEMPLATE)}
+                    />
+                  </TabList>
+                  <TabIndicator />
+                </Tabs>
+              </Stack>
+            )}
             <Box backgroundColor='gray.100' height='100%'>
               {activeTab === OPTION_TYPE.STANDARD && (
                 <Columns
                   columnOptions={columnOptions}
                   showFilter
                   onSelect={(value) => {
-                    handleUpdateConfig(mappingId, 'model', value, activeTab);
+                    handleUpdateConfig(mappingId, fieldType, value, activeTab);
                     setIsPopOverOpen(false);
                   }}
+                  fieldType={fieldType}
                 />
               )}
               {activeTab === OPTION_TYPE.STATIC && (

diff --git a/ui/src/views/Activate/Syncs/SyncForm/ConfigureSyncs/TemplateMapping/TemplateOptions.tsx b/ui/src/views/Activate/Syncs/SyncForm/ConfigureSyncs/TemplateMapping/TemplateOptions.tsx
@@ -147,6 +147,7 @@ const TemplateOptions = ({
               columnOptions={columnOptions}
               onSelect={(value: string) => handleSelection(value, OPTION_TYPE.COLUMNS)}
               height='125px'
+              fieldType='model'
             />
           )}
           {activeTab === OPTION_TYPE.VARIABLE && (
@@ -163,6 +164,7 @@ const TemplateOptions = ({
               catalogMapping={catalogMapping}
               onSelect={(value: string) => handleSelection(value, OPTION_TYPE.FILTER)}
               height='125px'
+              fieldType='model'
             />
           )}
         </Box>

diff --git a/...c/views/Activate/Syncs/SyncForm/ConfigureSyncs/TemplateMapping/__tests__/Columns.test.tsx b/...c/views/Activate/Syncs/SyncForm/ConfigureSyncs/TemplateMapping/__tests__/Columns.test.tsx
@@ -10,7 +10,12 @@ import { columnOptions, catalogMappingMock } from '../mocks/Columns';
 describe('Columns component', () => {
   test('renders column options', () => {
     const { getByText } = render(
-      <Columns columnOptions={columnOptions} showFilter={false} showDescription={false} />,
+      <Columns
+        columnOptions={columnOptions}
+        showFilter={false}
+        showDescription={false}
+        fieldType='model'
+      />,
     );
 
     expect(getByText('Column 1')).toBeInTheDocument();
@@ -20,7 +25,12 @@ describe('Columns component', () => {
 
   test('renders filtered column options based on search term', () => {
     const { getByPlaceholderText, getByText } = render(
-      <Columns columnOptions={columnOptions} showFilter={true} showDescription={false} />,
+      <Columns
+        columnOptions={columnOptions}
+        showFilter={true}
+        showDescription={false}
+        fieldType='model'
+      />,
     );
 
     const input = getByPlaceholderText('Search Columns');
@@ -37,6 +47,7 @@ describe('Columns component', () => {
         catalogMapping={catalogMappingMock}
         showFilter={false}
         showDescription={true}
+        fieldType='model'
       />,
     );
 
@@ -47,7 +58,12 @@ describe('Columns component', () => {
 
   test('renders no results found message when no columns match search term', () => {
     const { getByPlaceholderText, getByText } = render(
-      <Columns columnOptions={columnOptions} showFilter={true} showDescription={false} />,
+      <Columns
+        columnOptions={columnOptions}
+        showFilter={true}
+        showDescription={false}
+        fieldType='model'
+      />,
     );
 
     const input = getByPlaceholderText('Search Columns');