From 72c30c7739a47b42d0f2dbb60c171d914bd3790c Mon Sep 17 00:00:00 2001
From: yashashk <yashashk@sanketika.in>
Date: Wed, 13 Nov 2024 16:55:51 +0530
Subject: [PATCH 1/2] #OBS-I304 : Fixed add transformations and pii section

---
 .../AddTransformationExpression.tsx           | 236 ++++++++++--------
 .../Processing/ProcessingSection/Pii/Pii.tsx  | 113 +++++++--
 2 files changed, 228 insertions(+), 121 deletions(-)

diff --git a/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/AddTransformationExpression/AddTransformationExpression.tsx b/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/AddTransformationExpression/AddTransformationExpression.tsx
index cca7033c..90f7e2fe 100644
--- a/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/AddTransformationExpression/AddTransformationExpression.tsx
+++ b/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/AddTransformationExpression/AddTransformationExpression.tsx
@@ -6,12 +6,20 @@ import {
     DialogActions,
     DialogContent,
     DialogTitle,
-    Popover
+    Popover,
+    Grid,
+    FormControl,
+    InputLabel,
+    Select,
+    MenuItem,
+    TextField,
+    FormLabel,
+    RadioGroup,
+    FormControlLabel,
+    Radio
 } from '@mui/material';
-import TransformationForm from 'components/Form/DynamicForm';
-import {v4 as uuidv4} from 'uuid';
-import schema from './Schema';
-import React, { useEffect, useRef, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import React, { useEffect, useState } from 'react';
 import * as _ from 'lodash';
 import { Stack } from '@mui/material';
 import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
@@ -20,7 +28,6 @@ import JSONataPlayground from 'components/JsonPlay/JSONataPlayground';
 import { evaluateDataType } from 'pages/StepsPages/Processing/utils/dataTypeUtil';
 import { Alert } from '@mui/material';
 import en from 'utils/locales/en.json';
-import { useAsyncDebounce } from 'react-table';
 
 interface FormData {
     [key: string]: unknown;
@@ -40,33 +47,30 @@ interface TransformationFormProps {
 }
 
 const AddTransformationExpression = (props: any) => {
-    const { data, handleAddOrEdit, onClose, edit = false, transformationOptions, jsonData } = props;
+    const { data, handleAddOrEdit, onClose, edit = false, transformationOptions, jsonData, } = props;
+
     const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
     const [evaluationData, setEvaluationData] = useState<string>('');
     const [stateId, setStateId] = useState<string>(uuidv4())
     const [transformErrors, setTransformErrors] = useState<boolean>(false);
-    const [extraErrors, setExtraErrors] = useState<any>({});
 
     const open = Boolean(anchorEl);
 
-    const [formErrors, setFormErrors] = useState<unknown[]>([]);
-    const [formData, setFormData] = useState<{ [key: string]: any }>({});
-
-    if (!_.isEmpty(transformationOptions))
-        _.set(
-            schema,
-            ['schema', 'properties', 'section', 'properties', 'transformations', 'enum'],
-            transformationOptions
-        );
+    const [formData, setFormData] = useState<any>({
+        section: {
+            transformations: '',
+            transformationType: '',
+            transformationMode: 'Strict'
+        }
+    });
 
     useEffect(() => {
         if (!_.isEmpty(data)) {
-            const type = _.get(data, ['transformationType']);
-
+            const type = _.get(data, ['transformation']);
             const existingData = {
                 section: {
                     transformations: _.get(data, ['column']),
-                    transformationType: _.isEqual(type, 'custom') ? 'jsonata' : type,
+                    transformationType: type,
                     transformationMode: _.get(data, ['transformationMode']),
                     expression: _.get(data, ['transformation'])
                 }
@@ -81,32 +85,17 @@ const AddTransformationExpression = (props: any) => {
         setAnchorEl(event.currentTarget);
     };
 
-    const handleClose = async () => {
-        
-        const newData = {...formData};
-        const keyPath = ['section', 'expression'];
-        _.set(newData, keyPath, evaluationData);
-        setFormData(newData);
-        setFormErrors([])
-        if (evaluationData) {
-            const newExtraErrors = {
+    const handleClose = () => {
+        if (!transformationTypeError) {
+            setFormData((prevState: any) => ({
+                ...prevState,
                 section: {
-                    expression: {
-                        __errors: []
-                    }
+                    ...prevState.section,
+                    transformationType: evaluationData
                 }
-            };
-            try {
-                await evaluateDataType(evaluationData, jsonData);
-                setExtraErrors(newExtraErrors);
-            } catch (error) {
-                const message = _.get(error, 'message');
-                _.set(newExtraErrors, ['section', 'expression', '__errors', 0], message);
-                setFormErrors([message]);
-                setExtraErrors(newExtraErrors)
-            }
+            }));
         }
-        setStateId(uuidv4())
+
         setAnchorEl(null);
     };
 
@@ -114,10 +103,6 @@ const AddTransformationExpression = (props: any) => {
         setAnchorEl(null);
     };
 
-    const isJsonata = true;
-
-    const jsonataData = _.get(formData, ['section', 'expression']);
-
     const onHandleClick = async () => {
         const newData = _.get(formData, ['section']);
         const array = [];
@@ -133,7 +118,7 @@ const AddTransformationExpression = (props: any) => {
                 field_key: _.get(newData, ['transformations'], ''),
                 transformation_function: {
                     type: 'jsonata',
-                    expr: _.get(newData, ['expression'], ''),
+                    expr: _.get(newData, ['transformationType'], ''),
                     category: 'transform'
                 },
                 mode: _.get(newData, ['transformationMode'], '')
@@ -141,48 +126,66 @@ const AddTransformationExpression = (props: any) => {
             action: 'upsert'
         };
 
-        const datatype = await evaluateDataType(_.get(newData, ['expression'], ''), jsonData);
-        _.set(
-            obj,
-            ['value', 'transformation_function', 'datatype'],
-            _.get(datatype, 'data_type')
-        );        
+        try {
+            const datatype = await evaluateDataType(_.get(newData, ['transformationType'], ''), jsonData);
+            _.set(
+                obj,
+                ['value', 'transformation_function', 'datatype'],
+                _.get(datatype, 'data_type')
+            );
 
-        array.push(obj);
-        handleAddOrEdit(array);
-        onClose();
+            array.push(obj);
+            handleAddOrEdit(array);
+            onClose();
+        }
+        catch (error) {
+            const message = _.get(error, 'message', 'Invalid transformation type');
+            setTransformationTypeError(message);
+        }
     };
 
-    const handleChange: TransformationFormProps['onChange'] = useAsyncDebounce(async (formData, errors) => {
-        
-        const expression = _.get(formData, ['section', 'expression']);
-        const newExtraErrors = {
-            section: {
-                expression: {
-                    __errors: []
-                }
+    const transformationType = _.get(formData, ['section', 'transformationType']);
+    const handleErrors = async () => {
+        if (transformationType) {
+            try {
+                await evaluateDataType(transformationType, jsonData);
+                setTransformationTypeError(null);
+                setStateId(uuidv4());
+            } catch (error) {
+                const message = _.get(error, 'message', 'Invalid transformation type');
+                setTransformationTypeError(message);
             }
-        };
+        }
+    };
 
-        if (errors) {
-            setFormErrors(errors);
-        } else {
-            setFormErrors([]);
+    useEffect(() => {
+        handleErrors()
+        if (_.isEmpty(transformationType)) {
+            setTransformationTypeError(null)
         }
+    }, [transformationType])
 
-        if (expression) {
-            try {
-                await evaluateDataType(expression, jsonData);
-            } catch (error) {
-                const message = _.get(error, 'message');
-                _.set(newExtraErrors, ['section', 'expression', '__errors', 0], message);
-                setFormErrors([message]);
+    const [transformationTypeError, setTransformationTypeError] = useState<string | null>(null);
+    const handleInputChange: any = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = event.target;
+        setFormData((prevState: any) => ({
+            ...prevState,
+            section: {
+                ...prevState.section,
+                [name]: value
             }
-        } 
-        setExtraErrors(newExtraErrors);
-        setFormData(formData);
-        setStateId(uuidv4())
-    }, 800);
+        }));
+    };
+
+    const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setFormData((prevState: any) => ({
+            ...prevState,
+            section: {
+                ...prevState.section,
+                transformationMode: event.target.value
+            }
+        }));
+    };
 
     return (
         <>
@@ -209,21 +212,55 @@ const AddTransformationExpression = (props: any) => {
                     ) : null}
                 </DialogTitle>
                 <DialogContent>
-                    <Stack mt={-4} width="auto">
-                        <TransformationForm
-                            schema={schema}
-                            formData={formData}
-                            setFormData={setFormData}
-                            onChange={handleChange}
-                            extraErrors={extraErrors}
-                            customClassNames={{
-                                container: 'customContainerClass',
-                                sectionContainer: 'customSectionContainerClass',
-                                connectorName: 'customConnectorNameClass',
-                                sectionContainers: 'customSectionContainersClass'
-                            }}
-                            key={stateId}
-                        />
+                    <Stack mt={2} spacing={2} width="auto">
+                        <Grid>
+                            <FormControl fullWidth >
+                                <InputLabel>Select Field</InputLabel>
+                                <Select
+                                    required
+                                    name='transformations'
+                                    label="Select Field"
+                                    value={formData.section.transformations}
+                                    onChange={handleInputChange}
+                                >
+                                    {transformationOptions.map((option: string) => (
+                                        <MenuItem key={option} value={option}>
+                                            {option}
+                                        </MenuItem>
+                                    ))}
+                                </Select>
+                            </FormControl>
+                        </Grid>
+                        <Grid>
+                            <TextField
+                                name='transformationType'
+                                label={'Add JSONAta Expression'}
+                                required
+                                variant="outlined"
+                                fullWidth
+                                value={formData.section.transformationType}
+                                onChange={handleInputChange}
+                                error={Boolean(!_.isEmpty(transformationTypeError))}
+                                helperText={
+                                    transformationTypeError || `Ex: $sum(Product.(Price * Quantity)) FirstName & " " & Surname` 
+                                }
+                            />
+                        </Grid>
+                        <Grid>
+                            <FormControl>
+                                <FormLabel required id="demo-radio-buttons-group-label">Skip On Transformation Failure?</FormLabel>
+                                <RadioGroup
+                                    name="radio-buttons-group"
+                                    value={formData.section.transformationMode}
+                                    onChange={handleRadioChange}
+                                >
+                                    <Box display="flex">
+                                        <FormControlLabel value="Strict" control={<Radio />} label="Yes" />
+                                        <FormControlLabel value="Lenient" control={<Radio />} label="No" />
+                                    </Box>
+                                </RadioGroup>
+                            </FormControl>
+                        </Grid>
                     </Stack>
 
                     <Alert severity="info" sx={{ background: '#f1fcf9' }}>
@@ -231,7 +268,6 @@ const AddTransformationExpression = (props: any) => {
                     </Alert>
                 </DialogContent>
                 <DialogActions sx={{ px: 4 }}>
-                    
                     <Box mx={2}>
                         <Button onClick={handleClick} sx={{ width: 'auto' }}>
                             Try Out
@@ -242,9 +278,7 @@ const AddTransformationExpression = (props: any) => {
                         autoFocus
                         onClick={onHandleClick}
                         disabled={
-                            !_.isEmpty(formErrors) ||
-                            _.isEmpty(formData) || _.isEmpty(formData.section['transformations']) ||
-                            (isJsonata && !jsonataData)
+                            !_.isEmpty(transformationTypeError) || _.isEmpty(_.get(formData, ["section", "transformations"])) || _.isEmpty(_.get(formData, ["section", "transformationType"]))
                         }
                         size="large"
                         sx={{ width: 'auto' }}
diff --git a/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/Pii/Pii.tsx b/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/Pii/Pii.tsx
index dc382c20..f172e74a 100644
--- a/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/Pii/Pii.tsx
+++ b/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/Pii/Pii.tsx
@@ -6,9 +6,17 @@ import {
     DialogActions,
     DialogContent,
     DialogTitle,
-    Alert
+    Alert,
+    Grid,
+    FormControl,
+    FormLabel,
+    RadioGroup,
+    FormControlLabel,
+    Radio,
+    Select,
+    InputLabel,
+    MenuItem
 } from '@mui/material';
-import AddPii from 'components/Form/DynamicForm';
 import schema from './Schema';
 import React, { useEffect, useState } from 'react';
 import * as _ from 'lodash';
@@ -45,7 +53,13 @@ const AddPIIDialog = (props: any) => {
     } = props;
 
     const [formErrors, setFormErrors] = useState<unknown[]>([]);
-    const [formData, setFormData] = useState<{ [key: string]: any }>({});
+    const [formData, setFormData] = useState<any>({
+        section: {
+            transformations: '',
+            transformationType: 'Mask',
+            transformationMode: 'Strict',
+        }
+    });
 
     if (!_.isEmpty(transformationOptions))
         _.set(
@@ -62,8 +76,7 @@ const AddPIIDialog = (props: any) => {
                 section: {
                     transformations,
                     transformationType: _.get(data, ['transformationType']),
-                    transformationMode: _.get(data, ['transformationMode']),
-                    expression: _.get(data, ['transformation'])
+                    transformationMode: _.get(data, ['transformationMode'])
                 }
             };
 
@@ -115,6 +128,28 @@ const AddPIIDialog = (props: any) => {
         }
     };
 
+    const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = event.target;
+        setFormData((prevState: any) => ({
+            ...prevState,
+            section: {
+                ...prevState.section,
+                [name]: value
+            }
+        }));
+    };
+
+    const handleInputChange: any = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = event.target;
+        setFormData((prevState: any) => ({
+            ...prevState,
+            section: {
+                ...prevState.section,
+                [name]: value
+            }
+        }));
+    };
+
     return (
         <Box sx={{ p: 1, py: 1.5, width: '28vw', height: 'auto', maxWidth: '100%' }}>
             <DialogTitle
@@ -137,23 +172,61 @@ const AddPIIDialog = (props: any) => {
                 ) : null}
             </DialogTitle>
             <DialogContent>
-                <Stack mt={-4} width="auto">
-                    <AddPii
-                        schema={schema}
-                        formData={formData}
-                        setFormData={setFormData}
-                        onChange={handleChange}
-                        customClassNames={{
-                            container: 'customContainerClass',
-                            sectionContainer: 'customSectionContainerClass',
-                            connectorName: 'customConnectorNameClass',
-                            sectionContainers: 'customSectionContainersClass'
-                        }}
-                    />
-                </Stack>
-                <Alert severity="info" sx={{ background: '#f1fcf9' }}>
+                <Stack mt={2} spacing={2} width="auto">
+                    <Grid>
+                        <FormControl fullWidth >
+                            <InputLabel>Select Sensitive Field</InputLabel>
+                            <Select
+                                name='transformations'
+                                labelId="dedupKey-select-label"
+                                id="dedupKey-select"
+                                label="Select Sensitive Field"
+                                value={formData.section.transformations}
+                                onChange={handleInputChange}
+                                required
+                            >
+                                {transformationOptions.map((option: string) => (
+                                    <MenuItem key={option} value={option}>
+                                        {option}
+                                    </MenuItem>
+                                ))}
+                            </Select>
+                        </FormControl>
+                    </Grid>
+                    <Grid>
+                        <FormControl>
+                            <FormLabel required>Select Action</FormLabel>
+                            <RadioGroup
+                                name="transformationType"
+                                value={formData.section.transformationType}
+                                onChange={handleRadioChange}
+                            >
+                                <Box display="flex">
+                                    <FormControlLabel value="Mask" control={<Radio />} label="Mask" />
+                                    <FormControlLabel value="Encrypt" control={<Radio />} label="Encrypt" />
+                                </Box>
+                            </RadioGroup>
+                        </FormControl>
+                    </Grid>
+                    <Grid>
+                        <FormControl>
+                            <FormLabel required>Skip On Transformation Failure?</FormLabel>
+                            <RadioGroup
+                                name="transformationMode"
+                                value={formData.section.transformationMode}
+                                onChange={handleRadioChange}
+                            >
+                                <Box display="flex">
+                                    <FormControlLabel value="Strict" control={<Radio />} label="Yes" />
+                                    <FormControlLabel value="Lenient" control={<Radio />} label="No" />
+                                </Box>
+                            </RadioGroup>
+                        </FormControl>
+                    </Grid>
+                    <Alert severity="info" sx={{ background: '#f1fcf9' }}>
                     {en.transformationNotSupported}
                 </Alert>
+                </Stack>
             </DialogContent>
             <DialogActions sx={{ px: 4 }}>
                 <Button

From c9b4675b4790c3495b449b74a7e389ac1be1b06d Mon Sep 17 00:00:00 2001
From: yashashk <yashashk@sanketika.in>
Date: Wed, 13 Nov 2024 16:57:33 +0530
Subject: [PATCH 2/2] #OBS-I304 : deleted json schema form to render ui

---
 .../AddTransformationExpression/Schema.ts     | 75 ----------------
 .../Processing/ProcessingSection/Pii/Pii.tsx  | 13 ---
 .../ProcessingSection/Pii/Schema.ts           | 89 -------------------
 3 files changed, 177 deletions(-)
 delete mode 100644 web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/AddTransformationExpression/Schema.ts
 delete mode 100644 web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/Pii/Schema.ts

diff --git a/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/AddTransformationExpression/Schema.ts b/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/AddTransformationExpression/Schema.ts
deleted file mode 100644
index cfcbae5d..00000000
--- a/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/AddTransformationExpression/Schema.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { RJSFSchema, UiSchema } from '@rjsf/utils';
-import { processData } from '../../Constant';
-
-interface FormSchema {
-    title: string;
-    schema: RJSFSchema;
-    uiSchema: UiSchema;
-}
-
-const initialOptions = [''];
-
-const schema: FormSchema = 
-{
-    title: '',
-    schema: {
-        type: 'object',
-        properties: {
-            section: {
-                title: '',
-                type: 'object',
-                properties: {
-                    transformations: {
-                        title: processData.section2Properties.selectFiled,
-                        enum: initialOptions,
-                        type: 'string',
-                        uniqueItems: true
-                    },
-                    expression: {
-                        type: 'string',
-                        title: processData.section2Properties.selectTransform
-                    },
-                    transformationMode: {
-                        type: 'string',
-                        title: processData.section2Properties.mode,
-                        default: "Strict",
-                        oneOf: [
-                            {
-                                title: 'Yes',
-                                enum: ['Strict']
-                            },
-                            {
-                                title: 'No',
-                                enum: ['Lenient']
-                            }
-                        ]
-                    }
-                },
-                required: ['transformations', 'expression', 'transformationMode']
-            }
-        }
-    },
-    uiSchema: {
-        'ui:submitButtonOptions': {
-            norender: true
-        },
-        section: {
-            transformations: {
-                'ui:widget': 'select'
-            },
-            expression: {
-                'ui:widget': 'text',
-                'ui:help': 'Ex: "$sum(Product.(Price * Quantity))"'
-            },
-            transformationMode: {
-                'ui:widget': 'radio',
-                'ui:options': {
-                    inline: true,
-                    label: true
-                }
-            }
-        }
-    }
-};
-
-export default schema;
diff --git a/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/Pii/Pii.tsx b/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/Pii/Pii.tsx
index f172e74a..7fc9c52d 100644
--- a/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/Pii/Pii.tsx
+++ b/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/Pii/Pii.tsx
@@ -17,7 +17,6 @@ import {
     InputLabel,
     MenuItem
 } from '@mui/material';
-import schema from './Schema';
 import React, { useEffect, useState } from 'react';
 import * as _ from 'lodash';
 import { Stack } from '@mui/material';
@@ -61,13 +60,6 @@ const AddPIIDialog = (props: any) => {
         }
     });
 
-    if (!_.isEmpty(transformationOptions))
-        _.set(
-            schema,
-            ['schema', 'properties', 'section', 'properties', 'transformations', 'enum'],
-            transformationOptions
-        );
-
     useEffect(() => {
         const transformations = _.get(data, ['column'], '');
 
@@ -83,11 +75,6 @@ const AddPIIDialog = (props: any) => {
             setFormData(existingData);
         }
 
-        _.set(
-            schema,
-            ['uiSchema', 'section', 'transformations', 'ui:disabled'],
-            _.includes(_.map(addedSuggestions, 'column'), transformations)
-        );
     }, [data, addedSuggestions]);
 
     const onHandleClick = async () => {
diff --git a/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/Pii/Schema.ts b/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/Pii/Schema.ts
deleted file mode 100644
index b5897d2a..00000000
--- a/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/Pii/Schema.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { RJSFSchema, UiSchema } from '@rjsf/utils';
-import { processData } from '../../Constant';
-
-interface FormSchema {
-    title: string;
-    schema: RJSFSchema;
-    uiSchema: UiSchema;
-}
-
-const initialOptions = [''];
-
-const schema: FormSchema =
-{
-    title: '',
-    schema: {
-        type: 'object',
-        properties: {
-            section: {
-                title: '',
-                type: 'object',
-                properties: {
-                    transformations: {
-                        title: processData.section1Properties.selectFiled,
-                        enum: initialOptions,
-                        type: 'string',
-                        uniqueItems: true
-                    },
-                    transformationType: {
-                        type: 'string',
-                        title: processData.section1Properties.selectTransform,
-                        default: "mask",
-                        oneOf: [
-                            {
-                                title: 'Mask',
-                                enum: ['mask']
-                            },
-                            {
-                                title: 'Encrypt',
-                                enum: ['encrypt']
-                            }
-                        ]
-                    },
-                    transformationMode: {
-                        type: 'string',
-                        title: processData.section1Properties.mode,
-                        default: "Strict",
-                        oneOf: [
-                            {
-                                title: 'Yes',
-                                enum: ['Strict']
-                            },
-                            {
-                                title: 'No',
-                                enum: ['Lenient']
-                            }
-                        ]
-                    }
-                },
-                required: ['transformations', 'transformationType', 'transformationMode']
-            }
-        }
-    },
-    uiSchema: {
-        'ui:submitButtonOptions': {
-            norender: true
-        },
-        section: {
-            transformations: {
-                'ui:widget': 'select'
-            },
-            transformationType: {
-                'ui:widget': 'radio',
-                'ui:options': {
-                    inline: true,
-                    label: true
-                }
-            },
-            transformationMode: {
-                'ui:widget': 'radio',
-                'ui:options': {
-                    inline: true,
-                    label: true
-                }
-            }
-        }
-    }
-};
-
-export default schema;
\ No newline at end of file