|
1 | 1 | import { useEffect } from 'react'; |
2 | | -import { Stack, TextInput as Input, Text, SegmentedControl, Box } from '@mantine/core'; |
| 2 | +import { Stack, TextInput as Input, Text, SegmentedControl, Box, Group, Flex } from '@mantine/core'; |
| 3 | +import { LockIcon } from '@assets/icons/Lock.icon'; |
3 | 4 | import { useForm, Controller } from 'react-hook-form'; |
4 | 5 | import { useFocusTrap } from '@mantine/hooks'; |
5 | 6 |
|
6 | 7 | import { Button } from '@ui/button'; |
7 | 8 | import { ITemplate, TemplateModeEnum } from '@impler/shared'; |
| 9 | +import { ImportConfigEnum } from '@types'; |
8 | 10 | import { SAMPLE_DATE_FORMATS, VARIABLES } from '@config'; |
9 | 11 | import { MultiSelect } from '@ui/multi-select'; |
10 | 12 | import { validateDateFormatString } from '@shared/utils'; |
@@ -63,11 +65,24 @@ export function UpdateImportForm({ onSubmit, data, isAutoImportAvailable }: Upda |
63 | 65 | render={({ field }) => ( |
64 | 66 | <SegmentedControl |
65 | 67 | fullWidth |
66 | | - value={field.value || 'manual'} |
| 68 | + value={field.value || ImportConfigEnum.MANUAL} |
67 | 69 | onChange={field.onChange} |
68 | 70 | data={[ |
69 | | - { label: 'Manual', value: 'manual' }, |
70 | | - { label: 'Automatic', value: 'automatic', disabled: !isAutoImportAvailable }, |
| 71 | + { label: 'Manual', value: ImportConfigEnum.MANUAL }, |
| 72 | + { |
| 73 | + value: ImportConfigEnum.AUTOMATED, |
| 74 | + disabled: !isAutoImportAvailable, |
| 75 | + label: ( |
| 76 | + <Group position="center" spacing={4}> |
| 77 | + {!isAutoImportAvailable && ( |
| 78 | + <Flex> |
| 79 | + <LockIcon size="md" /> |
| 80 | + </Flex> |
| 81 | + )} |
| 82 | + Automatic |
| 83 | + </Group> |
| 84 | + ), |
| 85 | + }, |
71 | 86 | ]} |
72 | 87 | /> |
73 | 88 | )} |
|
0 commit comments