Skip to content

Commit

Permalink
Merge pull request #134 from Sanketika-Obsrv/storage-dashboard-fix
Browse files Browse the repository at this point in the history 
Removed json schema form to render ui in PII and Transformation section
  • Loading branch information
@HarishGangula
HarishGangula authored Nov 13, 2024
2 parents fb65393 + 2c4e2a5 commit 4e1a66d
Show file tree
Hide file tree
Showing 4 changed files with 228 additions and 298 deletions.
236 changes: 135 additions & 101 deletions .../Processing/ProcessingSection/AddTransformationExpression/AddTransformationExpression.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
Expand All @@ -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'])
}
Expand All @@ -81,43 +85,24 @@ 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);
};

const closeTransformations = () => {
setAnchorEl(null);
};

const isJsonata = true;

const jsonataData = _.get(formData, ['section', 'expression']);

const onHandleClick = async () => {
const newData = _.get(formData, ['section']);
const array = [];
Expand All @@ -133,56 +118,74 @@ 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'], '')
},
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 (
<>
Expand All @@ -209,29 +212,62 @@ 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' }}>
{en.transformationNotSupported}
</Alert>
</DialogContent>
<DialogActions sx={{ px: 4 }}>

<Box mx={2}>
<Button onClick={handleClick} sx={{ width: 'auto' }}>
Try Out
Expand All @@ -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' }}
Expand Down
Loading

0 comments on commit 4e1a66d

Please sign in to comment.