Merge pull request #183 from DevDataPlatform/feature/fix-most-issues

Fixed remaining priority issues

src/components/Connections/CreateConnectionForm.test.tsx

@@ -210,7 +210,8 @@ describe('Connections Setup', () => {
 
     // check normalization after sync checkbox
     const normalizationCheckbox = screen.getByTestId('normalizationCheckbox')
-      .firstChild?.firstChild?.firstChild;
+      .firstChild?.firstChild;
+
     expect(normalizationCheckbox).not.toBeChecked();
     await act(() => userEvent.click(normalizationCheckbox));
     expect(normalizationCheckbox).toBeChecked();

src/components/Connections/CreateConnectionForm.tsx

@@ -8,6 +8,11 @@ import {
   Switch,
   Select,
   MenuItem,
+  RadioGroup,
+  Radio,
+  FormControl,
+  FormLabel,
+  Grid,
 } from '@mui/material';
 import {
   Table,
@@ -156,13 +161,17 @@ const CreateConnectionForm = ({
     setShowForm(false);
   };
 
+  const handleRadioChange = (event: any) => {
+    setNormalize(event.target.value === 'normalized');
+  };
+
   // create/update a connection
   const onSubmit = async (data: any) => {
     const payload: any = {
       name: data.name,
       sourceId: data.sources.id,
       streams: sourceStreams,
-      normalize: normalize,
+      normalize,
     };
     if (data.destinationSchema) {
       payload.destinationSchema = data.destinationSchema;
@@ -279,22 +288,54 @@ const CreateConnectionForm = ({
 
           <Box
             sx={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              alignItems: 'center',
               ...(blockId && { pointerEvents: 'none' }),
             }}
           >
-            <FormControlLabel
-              data-testid="normalizationCheckbox"
-              control={
-                <Switch
-                  checked={normalize}
-                  onChange={(event) => setNormalize(event.target.checked)}
-                />
-              }
-              label="Normalize after sync?"
-            />
+            <FormControl sx={{ width: '100%' }}>
+              <FormLabel component="legend">Select type</FormLabel>
+              <RadioGroup
+                aria-label="normalize-radio-group"
+                value={normalize ? 'normalized' : 'raw'}
+                onChange={handleRadioChange}
+              >
+                <Grid container>
+                  <Grid
+                    item
+                    xs={5.8}
+                    sx={{
+                      px: 2,
+                      py: 1,
+                      background: '#f2f2eb',
+                      borderRadius: 2,
+                    }}
+                  >
+                    <FormControlLabel
+                      data-testid="normalizationCheckbox"
+                      value="normalized"
+                      control={<Radio />}
+                      label="Normalized"
+                    />
+                  </Grid>
+                  <Grid item xs={0.4} />
+                  <Grid
+                    item
+                    xs={5.8}
+                    sx={{
+                      px: 2,
+                      py: 1,
+                      background: '#f2f2eb',
+                      borderRadius: 2,
+                    }}
+                  >
+                    <FormControlLabel
+                      value="raw"
+                      control={<Radio />}
+                      label="Raw"
+                    />
+                  </Grid>
+                </Grid>
+              </RadioGroup>
+            </FormControl>
           </Box>
 
           {sourceStreams.length > 0 && (

src/components/Destinations/CreateDestinationForm.tsx

@@ -154,6 +154,10 @@ const CreateDestinationForm = ({
       });
     }
 
+    // Todo: need to find a better way to do this
+    result = result.map((res: any) => ({ ...res, order: res.order + 1 }));
+    result.sort((a: any, b: any) => a.order - b.order);
+
     return result;
   };
 

src/components/Flows/FlowCreate.tsx

@@ -19,6 +19,8 @@ import Input from '../UI/Input/Input';
 interface FlowCreateInterface {
   updateCrudVal: (...args: any) => any;
   mutate: (...args: any) => any;
+  flowId?: string;
+  setSelectedFlow?: (args: string) => any;
 }
 
 type ApiResponseConnection = {
@@ -32,19 +34,27 @@ type DispConnection = {
 };
 
 type DeploymentDef = {
+  active: boolean;
   name: string;
   dbtTransform: string;
   connectionBlocks: Array<any>;
-  cron: string;
+  cron: string | object;
 };
 
-const FlowCreate = ({ updateCrudVal, mutate }: FlowCreateInterface) => {
+const FlowCreate = ({
+  flowId,
+  updateCrudVal,
+  mutate,
+  setSelectedFlow = () => {},
+}: FlowCreateInterface) => {
+  const isEditPage = flowId !== '' && flowId !== undefined;
   const { data: session } = useSession();
   const toastContext = useContext(GlobalContext);
 
   const [connections, setConnections] = useState<DispConnection[]>([]);
-  const { register, handleSubmit, control } = useForm<DeploymentDef>({
+  const { register, handleSubmit, control, setValue } = useForm<DeploymentDef>({
     defaultValues: {
+      active: true,
       name: '',
       dbtTransform: 'no',
       connectionBlocks: [],
@@ -53,20 +63,54 @@ const FlowCreate = ({ updateCrudVal, mutate }: FlowCreateInterface) => {
   });
 
   const handleClickCancel = () => {
+    setSelectedFlow('');
     updateCrudVal('index');
   };
 
-  const processCronExpression = (cron: string) => {
-    switch (cron) {
-      case 'daily':
-        return '0 1 * * *';
-      case 'weekly':
-        return '0 1 * * 1';
-      default: // daily is the default
-        return '0 1 * * *';
+  const convertCronExpression = (input: string) => {
+    const cronMappings: any = {
+      daily: '0 1 * * *',
+      weekly: '0 1 * * 1',
+    };
+
+    if (input in cronMappings) {
+      return cronMappings[input];
     }
+
+    const reverseCronMappings = Object.fromEntries(
+      Object.entries(cronMappings).map(([key, value]) => [value, key])
+    );
+
+    return reverseCronMappings[input] || '0 1 * * *';
   };
 
+  useEffect(() => {
+    if (flowId) {
+      (async () => {
+        try {
+          const data: any = await httpGet(session, `prefect/flows/${flowId}`);
+          setValue('name', data.name);
+          setValue('active', data.isScheduleActive);
+          setValue(
+            'connectionBlocks',
+            data.parameters.airbyte_blocks.map((data: any) => data.name)
+          );
+          setValue(
+            'dbtTransform',
+            data.parameters.dbt_blocks.length > 0 ? 'yes' : 'no'
+          );
+          setValue('cron', {
+            id: convertCronExpression(data.cron),
+            label: convertCronExpression(data.cron),
+          });
+        } catch (err: any) {
+          console.error(err);
+          errorToast(err.message, [], toastContext);
+        }
+      })();
+    }
+  }, [flowId]);
+
   useEffect(() => {
     (async () => {
       try {
@@ -90,25 +134,44 @@ const FlowCreate = ({ updateCrudVal, mutate }: FlowCreateInterface) => {
   }, []);
 
   const onSubmit = async (data: any) => {
-    console.log(data);
     try {
-      const blocks = data.connectionBlocks.map((block: any, index: number) => ({
-        ...block,
-        seq: index + 1,
-      }));
-      const response = await httpPost(session, 'prefect/flows/', {
-        name: data.name,
-        connectionBlocks: blocks,
-        dbtTransform: data.dbtTransform,
-        cron: processCronExpression(data.cron.id),
-      });
-      mutate();
-      updateCrudVal('index');
-      successToast(
-        `Flow ${response.name} created successfully`,
-        [],
-        toastContext
-      );
+      if (isEditPage) {
+        await httpPost(
+          session,
+          `prefect/flows/${flowId}/set_schedule/${
+            data.active ? 'active' : 'inactive'
+          }`,
+          {}
+        );
+        successToast(
+          `Flow ${data.name} updated successfully`,
+          [],
+          toastContext
+        );
+        setSelectedFlow('');
+        mutate();
+        updateCrudVal('index');
+      } else {
+        const blocks = data.connectionBlocks.map(
+          (block: any, index: number) => ({
+            ...block,
+            seq: index + 1,
+          })
+        );
+        const response = await httpPost(session, 'prefect/flows/', {
+          name: data.name,
+          connectionBlocks: blocks,
+          dbtTransform: data.dbtTransform,
+          cron: convertCronExpression(data.cron.id),
+        });
+        mutate();
+        updateCrudVal('index');
+        successToast(
+          `Flow ${response.name} created successfully`,
+          [],
+          toastContext
+        );
+      }
     } catch (err: any) {
       console.error(err);
       errorToast(err.message, [], toastContext);
@@ -124,7 +187,7 @@ const FlowCreate = ({ updateCrudVal, mutate }: FlowCreateInterface) => {
             gutterBottom
             color="#000"
           >
-            Create a new Flow
+            {flowId ? 'Update flow' : 'Create a new Flow'}
           </Typography>
           <Box display="flex" alignItems="center">
             <Typography
@@ -164,11 +227,34 @@ const FlowCreate = ({ updateCrudVal, mutate }: FlowCreateInterface) => {
               Flow details
             </Typography>
             <Stack gap="12px">
+              {isEditPage && (
+                <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Controller
+                    name="active"
+                    control={control}
+                    render={({ field: { value, onChange } }) => (
+                      <Stack direction={'row'} alignItems="center" gap={'10%'}>
+                        <Switch
+                          checked={value}
+                          value={value}
+                          onChange={(event, value) => {
+                            onChange(value);
+                          }}
+                        />
+                      </Stack>
+                    )}
+                  />
+                  <InputLabel sx={{ marginBottom: '5px' }}>
+                    Is Active ?
+                  </InputLabel>
+                </Box>
+              )}
               <Box>
                 <Input
                   sx={{ width: '90%' }}
                   variant="outlined"
                   register={register}
+                  disabled={isEditPage}
                   name="name"
                   label="Flow name"
                   placeholder="Enter the flow name"
@@ -183,6 +269,7 @@ const FlowCreate = ({ updateCrudVal, mutate }: FlowCreateInterface) => {
                   render={({ field }: any) => (
                     <Autocomplete
                       id="connectionBlocks"
+                      disabled={isEditPage}
                       multiple
                       ChipProps={{
                         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -221,6 +308,8 @@ const FlowCreate = ({ updateCrudVal, mutate }: FlowCreateInterface) => {
                   render={({ field: { value, onChange } }) => (
                     <Stack direction={'row'} alignItems="center" gap={'10%'}>
                       <Switch
+                        checked={value === 'yes'}
+                        disabled={isEditPage}
                         value={value}
                         onChange={(event, value) => {
                           onChange(value ? 'yes' : 'no');
@@ -245,6 +334,8 @@ const FlowCreate = ({ updateCrudVal, mutate }: FlowCreateInterface) => {
                 render={({ field }) => (
                   <Autocomplete
                     id="cron"
+                    value={field.value}
+                    disabled={isEditPage}
                     data-testid="cronautocomplete"
                     options={[
                       { id: 'daily', label: 'daily' },