6e9e974cac
Fixes #24663 **Summary** Widget should have access to evaluation errors because that allows it to make a decision on how to handle errors in property pane and give users a more visual cue to take a corrective action for fixing errors in the property pane. The current pop up isn't too conspicuous to notice and also doesn't appear when the user deselects the property pane and reselects it. **Why should this be worked on?** This aligns with Widget Development API. Accessing the evaluation errors from evaluations isn't recommended because it is an internal property. An internal property is not advisable to be used given our roadmap for community widgets. Showing default data instead may not be the right way to handle errors in every use case. Loom Video describing the requirement : https://www.loom.com/share/04c228b06bb34b97894e345b46cf0abe?sid=f855ac90-74fa-4ee3-b882-ec70b1b2d9bf
486 lines
13 KiB
TypeScript
486 lines
13 KiB
TypeScript
import type {
|
|
DataTree,
|
|
WidgetEntity,
|
|
WidgetEntityConfig,
|
|
} from "entities/DataTree/dataTreeFactory";
|
|
import type { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer";
|
|
import type { MetaWidgetsReduxState } from "reducers/entityReducers/metaWidgetsReducer";
|
|
import { buildChildWidgetTree, createCanvasWidget } from "./widgetRenderUtils";
|
|
import type { FlattenedWidgetProps } from "widgets/constants";
|
|
|
|
describe("createCanvasWidget functionality", () => {
|
|
it("returns an empty errors if no evaluations are present", function () {
|
|
const canvasWidget = {} as unknown as FlattenedWidgetProps;
|
|
const dataTree = {} as unknown as WidgetEntity;
|
|
|
|
const response = createCanvasWidget(
|
|
canvasWidget,
|
|
dataTree,
|
|
{} as WidgetEntityConfig,
|
|
);
|
|
expect(response.errors.length).toEqual(0);
|
|
});
|
|
|
|
it("returns an empty errors if no evaluation errors are present", () => {
|
|
const canvasWidget = {} as unknown as FlattenedWidgetProps;
|
|
const dataTree = {
|
|
__evaluation__: {},
|
|
} as unknown as WidgetEntity;
|
|
|
|
const response = createCanvasWidget(
|
|
canvasWidget,
|
|
dataTree,
|
|
{} as WidgetEntityConfig,
|
|
);
|
|
expect(response.errors.length).toEqual(0);
|
|
});
|
|
|
|
it("populates __evaluation__ errors inside widget error property", () => {
|
|
const canvasWidget = {} as unknown as FlattenedWidgetProps;
|
|
|
|
const dataTree = {
|
|
__evaluation__: {
|
|
errors: {
|
|
text: [
|
|
{
|
|
errorMessage: {
|
|
name: "Validation Error",
|
|
message: "Error Message",
|
|
},
|
|
raw: "Error Message Stack",
|
|
},
|
|
],
|
|
},
|
|
},
|
|
} as unknown as WidgetEntity;
|
|
|
|
const response = createCanvasWidget(
|
|
canvasWidget,
|
|
dataTree,
|
|
{} as WidgetEntityConfig,
|
|
);
|
|
expect(response.errors.length).toEqual(1);
|
|
expect(response.errors[0].name).toStrictEqual("Validation Error");
|
|
expect(response.errors[0].message).toStrictEqual("Error Message");
|
|
expect(response.errors[0].stack).toStrictEqual("Error Message Stack");
|
|
expect(response.errors[0].type).toStrictEqual("property");
|
|
});
|
|
});
|
|
|
|
describe("test EditorUtils methods", () => {
|
|
describe("should test buildChildWidgetTree method", () => {
|
|
const metaWidgets = {
|
|
"1_meta": {
|
|
children: ["2_meta"],
|
|
type: "CANVAS",
|
|
widgetId: "1_meta",
|
|
parentId: "2",
|
|
topRow: 0,
|
|
bottomRow: 100,
|
|
widgetName: "meta_one",
|
|
},
|
|
"2_meta": {
|
|
children: [],
|
|
type: "INPUT_WIDGET",
|
|
widgetId: "2_meta",
|
|
parentId: "1_meta",
|
|
topRow: 0,
|
|
bottomRow: 10,
|
|
widgetName: "meta_two",
|
|
},
|
|
} as unknown as MetaWidgetsReduxState;
|
|
const canvasWidgets = {
|
|
"1": {
|
|
children: ["2"],
|
|
type: "FORM_WIDGET",
|
|
widgetId: "1",
|
|
parentId: "0",
|
|
topRow: 0,
|
|
bottomRow: 10,
|
|
widgetName: "one",
|
|
},
|
|
"2": {
|
|
children: ["3", "4", "1_meta"],
|
|
type: "CANVAS",
|
|
widgetId: "2",
|
|
parentId: "1",
|
|
topRow: 0,
|
|
bottomRow: 100,
|
|
widgetName: "two",
|
|
},
|
|
"3": {
|
|
children: [],
|
|
type: "TEXT",
|
|
widgetId: "3",
|
|
parentId: "2",
|
|
topRow: 4,
|
|
bottomRow: 5,
|
|
widgetName: "three",
|
|
},
|
|
"4": {
|
|
children: [],
|
|
type: "BUTTON",
|
|
widgetId: "4",
|
|
parentId: "2",
|
|
topRow: 6,
|
|
bottomRow: 18,
|
|
widgetName: "four",
|
|
},
|
|
} as unknown as CanvasWidgetsReduxState;
|
|
|
|
const dataTree = {
|
|
one: {
|
|
children: ["2"],
|
|
type: "FORM_WIDGET",
|
|
widgetId: "1",
|
|
parentId: "0",
|
|
topRow: 0,
|
|
bottomRow: 10,
|
|
widgetName: "one",
|
|
skipForFormWidget: "test",
|
|
value: "test",
|
|
isDirty: true,
|
|
isValid: true,
|
|
},
|
|
two: {
|
|
children: ["3", "4", "1_meta"],
|
|
type: "CANVAS",
|
|
widgetId: "2",
|
|
parentId: "1",
|
|
topRow: 0,
|
|
bottomRow: 100,
|
|
widgetName: "two",
|
|
skipForFormWidget: "test",
|
|
value: "test",
|
|
isDirty: true,
|
|
isValid: true,
|
|
},
|
|
three: {
|
|
children: [],
|
|
type: "TEXT",
|
|
widgetId: "3",
|
|
parentId: "2",
|
|
topRow: 4,
|
|
bottomRow: 5,
|
|
widgetName: "three",
|
|
skipForFormWidget: "test",
|
|
value: "test",
|
|
isDirty: true,
|
|
isValid: true,
|
|
},
|
|
four: {
|
|
children: [],
|
|
type: "BUTTON",
|
|
widgetId: "4",
|
|
parentId: "2",
|
|
topRow: 6,
|
|
bottomRow: 18,
|
|
widgetName: "four",
|
|
skipForFormWidget: "test",
|
|
value: "test",
|
|
isDirty: true,
|
|
isValid: true,
|
|
},
|
|
meta_one: {
|
|
skipForFormWidget: "test",
|
|
children: ["1_meta"],
|
|
type: "CANVAS",
|
|
widgetId: "1_meta",
|
|
parentId: "2",
|
|
topRow: 0,
|
|
bottomRow: 100,
|
|
widgetName: "meta_one",
|
|
},
|
|
meta_two: {
|
|
children: [],
|
|
type: "INPUT_WIDGET",
|
|
widgetId: "meta_two",
|
|
parentId: "meta_1",
|
|
topRow: 0,
|
|
bottomRow: 10,
|
|
widgetName: "two",
|
|
skipForFormWidget: "test",
|
|
value: "test",
|
|
isDirty: true,
|
|
isValid: true,
|
|
},
|
|
} as unknown as DataTree;
|
|
|
|
it("should return a complete childwidgets Tree", () => {
|
|
const childWidgetTree = [
|
|
{
|
|
bottomRow: 5,
|
|
children: [],
|
|
skipForFormWidget: "test",
|
|
isDirty: true,
|
|
isLoading: false,
|
|
isValid: true,
|
|
parentId: "2",
|
|
topRow: 4,
|
|
type: "TEXT",
|
|
value: "test",
|
|
widgetId: "3",
|
|
widgetName: "three",
|
|
errors: [],
|
|
},
|
|
{
|
|
bottomRow: 18,
|
|
children: [],
|
|
skipForFormWidget: "test",
|
|
isDirty: true,
|
|
isLoading: false,
|
|
isValid: true,
|
|
parentId: "2",
|
|
topRow: 6,
|
|
type: "BUTTON",
|
|
value: "test",
|
|
widgetId: "4",
|
|
widgetName: "four",
|
|
errors: [],
|
|
},
|
|
{
|
|
type: "CANVAS",
|
|
isLoading: false,
|
|
widgetId: "1_meta",
|
|
parentId: "2",
|
|
topRow: 0,
|
|
bottomRow: 100,
|
|
widgetName: "meta_one",
|
|
skipForFormWidget: "test",
|
|
errors: [],
|
|
children: [
|
|
{
|
|
isDirty: true,
|
|
isLoading: false,
|
|
isValid: true,
|
|
value: "test",
|
|
children: [],
|
|
type: "INPUT_WIDGET",
|
|
widgetId: "2_meta",
|
|
parentId: "1_meta",
|
|
topRow: 0,
|
|
bottomRow: 10,
|
|
widgetName: "meta_two",
|
|
skipForFormWidget: "test",
|
|
errors: [],
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
expect(
|
|
buildChildWidgetTree(
|
|
canvasWidgets,
|
|
metaWidgets,
|
|
dataTree,
|
|
new Set<string>("one"),
|
|
{},
|
|
"2",
|
|
),
|
|
).toEqual(childWidgetTree);
|
|
});
|
|
|
|
it("should return a partial childwidgets Tree with properties specified", () => {
|
|
const childWidgetTree = [
|
|
{
|
|
bottomRow: 100,
|
|
children: [
|
|
{
|
|
bottomRow: 5,
|
|
children: [],
|
|
isDirty: true,
|
|
isLoading: false,
|
|
isValid: true,
|
|
parentId: "2",
|
|
topRow: 4,
|
|
type: "TEXT",
|
|
value: "test",
|
|
widgetId: "3",
|
|
widgetName: "three",
|
|
errors: [],
|
|
},
|
|
{
|
|
bottomRow: 18,
|
|
children: [],
|
|
isDirty: true,
|
|
isLoading: false,
|
|
isValid: true,
|
|
parentId: "2",
|
|
topRow: 6,
|
|
type: "BUTTON",
|
|
value: "test",
|
|
widgetId: "4",
|
|
widgetName: "four",
|
|
errors: [],
|
|
},
|
|
{
|
|
isLoading: false,
|
|
parentId: "2",
|
|
topRow: 0,
|
|
type: "CANVAS",
|
|
widgetId: "1_meta",
|
|
bottomRow: 100,
|
|
widgetName: "meta_one",
|
|
errors: [],
|
|
children: [
|
|
{
|
|
isDirty: true,
|
|
isLoading: false,
|
|
isValid: true,
|
|
value: "test",
|
|
children: [],
|
|
type: "INPUT_WIDGET",
|
|
widgetId: "2_meta",
|
|
parentId: "1_meta",
|
|
topRow: 0,
|
|
bottomRow: 10,
|
|
widgetName: "meta_two",
|
|
errors: [],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
isDirty: true,
|
|
isLoading: false,
|
|
isValid: true,
|
|
parentId: "1",
|
|
topRow: 0,
|
|
type: "CANVAS",
|
|
value: "test",
|
|
widgetId: "2",
|
|
widgetName: "two",
|
|
errors: [],
|
|
},
|
|
];
|
|
|
|
expect(
|
|
buildChildWidgetTree(
|
|
canvasWidgets,
|
|
metaWidgets,
|
|
dataTree,
|
|
new Set<string>("two"),
|
|
{},
|
|
"1",
|
|
),
|
|
).toEqual(childWidgetTree);
|
|
});
|
|
|
|
it("should return a partial childwidgets Tree with just loading widgets", () => {
|
|
const childWidgetTree = [
|
|
{
|
|
ENTITY_TYPE: "WIDGET",
|
|
bindingPaths: {},
|
|
bottomRow: 100,
|
|
children: [
|
|
{
|
|
ENTITY_TYPE: "WIDGET",
|
|
bindingPaths: {},
|
|
bottomRow: 5,
|
|
children: [],
|
|
isLoading: false,
|
|
logBlackList: {},
|
|
meta: {},
|
|
overridingPropertyPaths: {},
|
|
parentId: "2",
|
|
privateWidgets: {},
|
|
propertyOverrideDependency: {},
|
|
reactivePaths: {},
|
|
topRow: 4,
|
|
triggerPaths: {},
|
|
type: undefined,
|
|
validationPaths: {},
|
|
widgetId: "3",
|
|
widgetName: "three",
|
|
},
|
|
{
|
|
ENTITY_TYPE: "WIDGET",
|
|
bindingPaths: {},
|
|
bottomRow: 18,
|
|
children: [],
|
|
isLoading: false,
|
|
logBlackList: {},
|
|
meta: {},
|
|
overridingPropertyPaths: {},
|
|
parentId: "2",
|
|
privateWidgets: {},
|
|
propertyOverrideDependency: {},
|
|
reactivePaths: {},
|
|
topRow: 6,
|
|
triggerPaths: {},
|
|
type: undefined,
|
|
validationPaths: {},
|
|
widgetId: "4",
|
|
widgetName: "four",
|
|
},
|
|
{
|
|
ENTITY_TYPE: "WIDGET",
|
|
bindingPaths: {},
|
|
bottomRow: 100,
|
|
isLoading: false,
|
|
logBlackList: {},
|
|
meta: {},
|
|
overridingPropertyPaths: {},
|
|
parentId: "2",
|
|
privateWidgets: {},
|
|
propertyOverrideDependency: {},
|
|
reactivePaths: {},
|
|
topRow: 0,
|
|
triggerPaths: {},
|
|
type: undefined,
|
|
validationPaths: {},
|
|
widgetId: "1_meta",
|
|
widgetName: "meta_one",
|
|
children: [
|
|
{
|
|
ENTITY_TYPE: "WIDGET",
|
|
bindingPaths: {},
|
|
bottomRow: 10,
|
|
children: [],
|
|
isLoading: false,
|
|
logBlackList: {},
|
|
meta: {},
|
|
overridingPropertyPaths: {},
|
|
parentId: "1_meta",
|
|
privateWidgets: {},
|
|
propertyOverrideDependency: {},
|
|
reactivePaths: {},
|
|
topRow: 0,
|
|
triggerPaths: {},
|
|
type: undefined,
|
|
validationPaths: {},
|
|
widgetId: "2_meta",
|
|
widgetName: "meta_two",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
isLoading: false,
|
|
logBlackList: {},
|
|
meta: {},
|
|
overridingPropertyPaths: {},
|
|
parentId: "1",
|
|
privateWidgets: {},
|
|
propertyOverrideDependency: {},
|
|
reactivePaths: {},
|
|
topRow: 0,
|
|
triggerPaths: {},
|
|
type: undefined,
|
|
validationPaths: {},
|
|
widgetId: "2",
|
|
widgetName: "two",
|
|
},
|
|
];
|
|
expect(
|
|
buildChildWidgetTree(
|
|
canvasWidgets,
|
|
metaWidgets,
|
|
{},
|
|
new Set<string>("one"),
|
|
{},
|
|
"1",
|
|
),
|
|
).toEqual(childWidgetTree);
|
|
});
|
|
});
|
|
});
|