PromucFlow_constructor/app/client/src/entities/DataTree/dataTreeWidget.ts
ashit-rath 32fee08c5c
feat: JSON Form widget (#8472)
* initial layout

* updated parser to support nested array

* array field rendering

* changes

* ts fix

* minor revert FormWidget

* modified schema structure

* select and switch fields

* added checkbox field

* added RadioGroupField

* partial DateField and defaults, typing refactoring

* added label and field type change

* minor ts changes

* changes

* modified widget/utils for nested panelConfig, modified schema to object approach

* array/object label support

* hide field configuration when children not present

* added tooltip

* field visibility option

* disabled state

* upgraded tslib, form initial values

* custom field configuration - add/hide/edit

* field configuration - label change

* return input when field configuration reaches max depth

* minor changes

* form - scroll, fixedfooter, enitity defn and other minior changes

* form title

* unregister on unmount

* fixes

* zero state

* fix field padding

* patched updating form values, removed linting warnings

* configured action buttons

* minor fix

* minor change

* property pane - sort fields in field configuration

* refactor include all properties

* checkbox properties

* date properties

* refactor typings and radio group properties

* switch, multselect, select, array, object properties

* minor changes

* default value

* ts fixes

* checkbox field properties implementation

* date field prop implementation

* switch field

* select field and fix deep nested meta properties

* multiselect implementation

* minor change

* input field implementation

* fix position jump on field type change

* initial accordian

* field state property and auto-complete of JSONFormComputeControl

* merge fixes

* renamed FormBuilder to JSONForm

* source data validation minor change

* custom field default value fix

* Editable keys for custom field

* minor fixes

* replaced useFieldArray with custom logic, added widget icon

* array and object accordian with border/background styling

* minor change

* disabled states for array and objects

* default value minor fix

* form level styles

* modified logic for isDisabled for array and object, added disabledWhenInvalid, exposed isValid to fieldState for text input, removed useDisableChildren

* added isValid for all field types

* fixed reset to default values

* debounce form values update

* minor change

* minor change

* fix crash - source data change multi-select to array, fix crash - change of options

* fix positioning

* detect date type in source data

* fix crash - when object is passed to regex input field

* fixed default sourceData path for fields

* accodion keep children mounted on collapse

* jest test for schemaParser

* widget/helper and useRegisterFieldInvalid test

* tests for property config helper and generatePanelPropertyConfig

* fix input field validation not appearing

* fix date field type detection

* rename data -> formData

* handle null/undefined field value change in sourceData

* added null/undefined as valid values for defaultValue text field

* auto detect email field

* set formData default value on initial load

* switch field inline positioning

* field margin fix for row direction

* select full width

* fiex date field default value - out of range

* fix any field type to array

* array default value logic change

* base cypress test changes

* initial json form render cy test

* key sanitization

* fix fieldState update logic

* required design, object/array background color, accordion changes, fix - add new custom field

* minor change

* cypress tests

* fix date formatted value, field state cypress test

* cypress - field properties test and fixes

* rename test file

* fix accessort change to blank value, cypress tests

* fix array field default value for modified accessor

* minor fix

* added animate loading

* fix empty state, add new custom field

* test data fix

* fix warnings

* fix timePrecision visibility

* button styling

* ported input v2

* fix jest tests

* fix cypress tests

* perf changes

* perf improvement

* added comments

* multiselect changes

* input field perf refactor

* array field, object field refactor performance

* checkbox field refactor

* refectored date, radio, select and switch

* fixes

* test fixes

* fixes

* minor fix

* rename field renderer

* remove tracked fieldRenderer field

* cypress test fixes

* cypress changes

* array default value fixes

* arrayfield passedDefaultValue

* auto enabled JS mode for few properties, reverted swith and date property controls

* cypress changes

* added widget sniping mode and fixed object passedDefaultValue

* multiselect v2

* select v2

* fix jest tests

* test fixes

* field limit

* rename field type dropdown texts

* field type changes fixes

* jest fixes

* loading state submit button

* default source data for new widget

* modify limit message

* multiseelct default value changes and cypress fix

* select default value

* keep default value intact on field type change

* TextTable cypress text fix

* review changes

* fixed footer changes

* collapse styles section by default

* fixed footer changes

* form modes

* custom field key rentention

* fixed footer fix in view mode

* non ascii characters

* fix meta merge in dataTreeWidget

* minor fixes

* rename useRegisterFieldInvalid.ts -> useRegisterFieldValidity.ts

* modified dependency injection into evaluated values

* refactored fixedfooter logic

* minor change

* accessor update

* minor change

* fixes

* QA fixes date field, scroll content

* fix phone number field, removed visiblity option from array item

* fix sourceData autocomplete

* reset logic

* fix multiselect reset

* form values hydration on widget drag

* code review changes

* reverted order of merge dataTreeWidget

* fixes

* added button titles, fixed hydration issue

* default value fixes

* upgraded react hook form, modified array-level/field-level default value logic

* fixed select validation

* added icon entity explorer, modified icon align control

* modify accessor validation for mongo db _id

* update email field regex

* review changes

* explicitly handle empty source data validation
2022-03-24 12:43:25 +05:30

164 lines
5.2 KiB
TypeScript

import WidgetFactory from "utils/WidgetFactory";
import { getAllPathsFromPropertyConfig } from "entities/Widget/utils";
import { getEntityDynamicBindingPathList } from "utils/DynamicBindingUtils";
import _ from "lodash";
import { FlattenedWidgetProps } from "reducers/entityReducers/canvasWidgetsReducer";
import { setOverridingProperty } from "./utils";
import {
OverridingPropertyPaths,
PropertyOverrideDependency,
OverridingPropertyType,
DataTreeWidget,
ENTITY_TYPE,
} from "./dataTreeFactory";
export const generateDataTreeWidget = (
widget: FlattenedWidgetProps,
widgetMetaProps: Record<string, unknown> = {},
): DataTreeWidget => {
const derivedProps: any = {};
const blockedDerivedProps: Record<string, true> = {};
const unInitializedDefaultProps: Record<string, undefined> = {};
const propertyOverrideDependency: PropertyOverrideDependency = {};
const overridingPropertyPaths: OverridingPropertyPaths = {};
const defaultMetaProps = WidgetFactory.getWidgetMetaPropertiesMap(
widget.type,
);
const derivedPropertyMap = WidgetFactory.getWidgetDerivedPropertiesMap(
widget.type,
);
const defaultProps = WidgetFactory.getWidgetDefaultPropertiesMap(widget.type);
const propertyPaneConfigs = WidgetFactory.getWidgetPropertyPaneConfig(
widget.type,
);
const dynamicBindingPathList = getEntityDynamicBindingPathList(widget);
// Ensure all dynamic bindings are strings as they will be evaluated
dynamicBindingPathList.forEach((dynamicPath) => {
const propertyPath = dynamicPath.key;
const propertyValue = _.get(widget, propertyPath);
if (_.isObject(propertyValue)) {
// Stringify this because composite controls may have bindings in the sub controls
_.set(widget, propertyPath, JSON.stringify(propertyValue));
}
});
// Derived props are stored in different maps for further treatment
Object.keys(derivedPropertyMap).forEach((propertyName) => {
// TODO regex is too greedy
// Replace the references to `this` with the widget name reference
// in the derived property bindings
derivedProps[propertyName] = derivedPropertyMap[propertyName].replace(
/this./g,
`${widget.widgetName}.`,
);
// Add these to the dynamicBindingPathList as well
dynamicBindingPathList.push({
key: propertyName,
});
});
Object.keys(derivedProps).forEach((propertyName) => {
// Do not log errors for the derived property bindings
blockedDerivedProps[propertyName] = true;
});
const overridingMetaPropsMap: Record<string, boolean> = {};
Object.entries(defaultProps).forEach(
([propertyName, defaultPropertyName]) => {
if (!(defaultPropertyName in widget)) {
unInitializedDefaultProps[defaultPropertyName] = undefined;
}
// defaultProperty on eval needs to override the widget's property eg: defaultText overrides text
setOverridingProperty({
propertyOverrideDependency,
overridingPropertyPaths,
value: defaultPropertyName,
key: propertyName,
type: OverridingPropertyType.DEFAULT,
});
if (propertyName in defaultMetaProps) {
// Overriding properties will override the values of a property when evaluated
setOverridingProperty({
propertyOverrideDependency,
overridingPropertyPaths,
value: `meta.${propertyName}`,
key: propertyName,
type: OverridingPropertyType.META,
});
overridingMetaPropsMap[propertyName] = true;
}
},
);
const overridingMetaProps: Record<string, unknown> = {};
// overridingMetaProps has all meta property value either from metaReducer or default set by widget whose dependent property also has default property.
Object.entries(defaultMetaProps).forEach(([key, value]) => {
if (overridingMetaPropsMap[key]) {
overridingMetaProps[key] =
key in widgetMetaProps ? widgetMetaProps[key] : value;
}
});
const {
bindingPaths,
triggerPaths,
validationPaths,
} = getAllPathsFromPropertyConfig(widget, propertyPaneConfigs, {
...derivedPropertyMap,
...defaultMetaProps,
...unInitializedDefaultProps,
..._.keyBy(dynamicBindingPathList, "key"),
...overridingPropertyPaths,
});
/**
* Spread operator does not merge deep objects properly.
* Eg a = {
* foo: { bar: 100 }
* }
* b = {
* foo: { baz: 200 }
* }
*
* { ...a, ...b }
*
* {
* foo: { baz: 200 } // bar in "a" object got overridden by baz in "b"
* }
*
* Therefore spread is replaced with "merge" which merges objects recursively.
*/
return _.merge(
{},
widget,
unInitializedDefaultProps,
defaultMetaProps,
widgetMetaProps,
derivedProps,
{
defaultProps,
defaultMetaProps: Object.keys(defaultMetaProps),
dynamicBindingPathList,
logBlackList: {
...widget.logBlackList,
...blockedDerivedProps,
},
meta: _.merge(overridingMetaProps, widgetMetaProps),
propertyOverrideDependency,
overridingPropertyPaths,
bindingPaths,
triggerPaths,
validationPaths,
ENTITY_TYPE: ENTITY_TYPE.WIDGET,
privateWidgets: {
...widget.privateWidgets,
},
},
);
};