543b7ec72d
* WIP: Performance improvements in entity explorer * WIP: Achieve feature parity for entity explorer with release * Update unit tests * Add sentry profiling to current page entity properties component * Fix page add/delete not showing up on entity explorer issue. Update memoization logic for pagegroup entity * Deal with the ban-ts-ignore eslint issues * Update unit tests * Fix widget entity children visibility * Fix tests and code * Fix tests for scenarios where the collapsed entities are unmount, as this is a part of the performance optimization * Filter undefined children when generating structureDSL * Remove rule from eslintrc Consolidate createPage test command * Update CreatePage tests to remove redundant dsl updates * Revert CreatePage test changes, as adding more checks within this command globally causes other tests to have issues. * re-enable eslint rule, as without it CI tests fail * Revert to ban-ts-comment * Fix typescript ban-ts-ignore issue by upgrading react-scripts and fixing typescript issue across the application * Typescript errors handled Co-authored-by: vicky-primathon.in <vicky.bansal@primathon.in>
444 lines
10 KiB
TypeScript
444 lines
10 KiB
TypeScript
import { CanvasStructure } from "reducers/uiReducers/pageCanvasStructure";
|
|
import { compareAndGenerateImmutableCanvasStructure } from "./canvasStructureHelpers";
|
|
const canvasStructure: CanvasStructure = {
|
|
widgetId: "x",
|
|
widgetName: "x",
|
|
type: "CONTAINER_WIDGET",
|
|
children: [
|
|
{
|
|
widgetId: "y",
|
|
widgetName: "y",
|
|
type: "CONTAINER_WIDGET",
|
|
children: [
|
|
{
|
|
widgetId: "z",
|
|
widgetName: "z",
|
|
type: "CONTAINER_WIDGET",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
widgetId: "m",
|
|
widgetName: "m",
|
|
type: "CONTAINER_WIDGET",
|
|
children: [
|
|
{
|
|
widgetId: "n",
|
|
widgetName: "n",
|
|
type: "CONTAINER_WIDGET",
|
|
children: [
|
|
{
|
|
widgetId: "o",
|
|
widgetName: "o",
|
|
type: "CONTAINER_WIDGET",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
|
|
const simpleDSL: any = {
|
|
widgetId: "x",
|
|
widgetName: "x",
|
|
type: "CONTAINER_WIDGET",
|
|
children: [
|
|
{
|
|
widgetId: "y",
|
|
widgetName: "y",
|
|
type: "CONTAINER_WIDGET",
|
|
|
|
children: [
|
|
{
|
|
widgetId: "z",
|
|
widgetName: "z",
|
|
type: "CONTAINER_WIDGET",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
widgetId: "m",
|
|
widgetName: "m",
|
|
type: "CONTAINER_WIDGET",
|
|
|
|
children: [
|
|
{
|
|
widgetId: "n",
|
|
widgetName: "n",
|
|
type: "CONTAINER_WIDGET",
|
|
|
|
children: [
|
|
{
|
|
widgetId: "o",
|
|
widgetName: "o",
|
|
type: "CONTAINER_WIDGET",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
|
|
const newDSL: any = {
|
|
widgetName: "MainContainer",
|
|
backgroundColor: "none",
|
|
rightColumn: 1224,
|
|
snapColumns: 16,
|
|
detachFromLayout: true,
|
|
widgetId: "0",
|
|
topRow: 0,
|
|
bottomRow: 4320,
|
|
containerStyle: "none",
|
|
snapRows: 33,
|
|
parentRowSpace: 1,
|
|
type: "CANVAS_WIDGET",
|
|
canExtend: true,
|
|
dynamicBindings: {},
|
|
version: 6,
|
|
minHeight: 1292,
|
|
parentColumnSpace: 1,
|
|
leftColumn: 0,
|
|
children: [
|
|
{
|
|
isVisible: true,
|
|
text: "Submit",
|
|
buttonStyle: "PRIMARY_BUTTON",
|
|
widgetName: "Button16",
|
|
isDisabled: false,
|
|
isDefaultClickDisabled: true,
|
|
type: "BUTTON_WIDGET",
|
|
isLoading: false,
|
|
parentColumnSpace: 74,
|
|
parentRowSpace: 40,
|
|
leftColumn: 0,
|
|
rightColumn: 10,
|
|
topRow: 43,
|
|
bottomRow: 50,
|
|
parentId: "0",
|
|
widgetId: "77rkwd5hm7",
|
|
dynamicTriggers: { onClick: true },
|
|
onClick: "{{showModal('Modal1')}}",
|
|
},
|
|
{
|
|
isVisible: true,
|
|
text: "Submit",
|
|
buttonStyle: "PRIMARY_BUTTON",
|
|
widgetName: "Button17",
|
|
isDisabled: false,
|
|
isDefaultClickDisabled: true,
|
|
type: "BUTTON_WIDGET",
|
|
isLoading: false,
|
|
parentColumnSpace: 74,
|
|
parentRowSpace: 40,
|
|
leftColumn: 0,
|
|
rightColumn: 10,
|
|
topRow: 51,
|
|
bottomRow: 58,
|
|
parentId: "0",
|
|
widgetId: "atvf7cgber",
|
|
},
|
|
{
|
|
isVisible: true,
|
|
text: "Submit",
|
|
buttonStyle: "PRIMARY_BUTTON",
|
|
widgetName: "Button20",
|
|
isDisabled: false,
|
|
isDefaultClickDisabled: true,
|
|
type: "BUTTON_WIDGET",
|
|
isLoading: false,
|
|
parentColumnSpace: 74,
|
|
parentRowSpace: 40,
|
|
leftColumn: 0,
|
|
rightColumn: 10,
|
|
topRow: 59,
|
|
bottomRow: 66,
|
|
parentId: "0",
|
|
widgetId: "c09qn063tc",
|
|
},
|
|
{
|
|
isVisible: true,
|
|
text: "Submit",
|
|
buttonStyle: "PRIMARY_BUTTON",
|
|
widgetName: "Button21",
|
|
isDisabled: false,
|
|
isDefaultClickDisabled: true,
|
|
type: "BUTTON_WIDGET",
|
|
isLoading: false,
|
|
parentColumnSpace: 74,
|
|
parentRowSpace: 40,
|
|
leftColumn: 0,
|
|
rightColumn: 10,
|
|
topRow: 67,
|
|
bottomRow: 74,
|
|
parentId: "0",
|
|
widgetId: "cu7873x1s6",
|
|
},
|
|
{
|
|
isVisible: true,
|
|
text: "Submit",
|
|
buttonStyle: "PRIMARY_BUTTON",
|
|
widgetName: "Button22",
|
|
isDisabled: false,
|
|
isDefaultClickDisabled: true,
|
|
type: "BUTTON_WIDGET",
|
|
isLoading: false,
|
|
parentColumnSpace: 74,
|
|
parentRowSpace: 40,
|
|
leftColumn: 0,
|
|
rightColumn: 10,
|
|
topRow: 75,
|
|
bottomRow: 82,
|
|
parentId: "0",
|
|
widgetId: "qgxdk87yiw",
|
|
},
|
|
{
|
|
isVisible: true,
|
|
text: "Submit",
|
|
buttonStyle: "PRIMARY_BUTTON",
|
|
widgetName: "Button23",
|
|
isDisabled: false,
|
|
isDefaultClickDisabled: true,
|
|
type: "BUTTON_WIDGET",
|
|
isLoading: false,
|
|
parentColumnSpace: 74,
|
|
parentRowSpace: 40,
|
|
leftColumn: 0,
|
|
rightColumn: 10,
|
|
topRow: 83,
|
|
bottomRow: 90,
|
|
parentId: "0",
|
|
widgetId: "oeu2eud3q4",
|
|
},
|
|
{
|
|
isVisible: true,
|
|
text: "Submit",
|
|
buttonStyle: "PRIMARY_BUTTON",
|
|
widgetName: "Button24",
|
|
isDisabled: false,
|
|
isDefaultClickDisabled: true,
|
|
type: "BUTTON_WIDGET",
|
|
isLoading: false,
|
|
parentColumnSpace: 74,
|
|
parentRowSpace: 40,
|
|
leftColumn: 0,
|
|
rightColumn: 10,
|
|
topRow: 91,
|
|
bottomRow: 98,
|
|
parentId: "0",
|
|
widgetId: "11sgnzdckq",
|
|
},
|
|
{
|
|
isVisible: true,
|
|
text: "Submit",
|
|
buttonStyle: "PRIMARY_BUTTON",
|
|
widgetName: "Button25",
|
|
isDisabled: false,
|
|
isDefaultClickDisabled: true,
|
|
type: "BUTTON_WIDGET",
|
|
isLoading: false,
|
|
parentColumnSpace: 74,
|
|
parentRowSpace: 40,
|
|
leftColumn: 0,
|
|
rightColumn: 10,
|
|
topRow: 99,
|
|
bottomRow: 106,
|
|
parentId: "0",
|
|
widgetId: "rs2c4g4g0o",
|
|
},
|
|
{
|
|
isVisible: true,
|
|
text: "Submit",
|
|
buttonStyle: "PRIMARY_BUTTON",
|
|
widgetName: "Button13",
|
|
isDisabled: false,
|
|
isDefaultClickDisabled: true,
|
|
type: "BUTTON_WIDGET",
|
|
isLoading: false,
|
|
parentColumnSpace: 34.5,
|
|
parentRowSpace: 40,
|
|
leftColumn: 7,
|
|
rightColumn: 9,
|
|
topRow: 7,
|
|
bottomRow: 8,
|
|
parentId: "0",
|
|
widgetId: "iwsi8fleku",
|
|
dynamicTriggers: { onClick: true },
|
|
onClick: "{{showModal('Modal1')}}",
|
|
},
|
|
{
|
|
isVisible: true,
|
|
shouldScrollContents: false,
|
|
widgetName: "Tabs1",
|
|
tabs:
|
|
'[{"id":"tab2","widgetId":"377zsl4rgg","label":"Tab 2"},{"id":"tab1","widgetId":"9augj62fwd","label":"Tab 1"}]',
|
|
shouldShowTabs: true,
|
|
defaultTab: "Tab 1",
|
|
blueprint: { operations: [{ type: "MODIFY_PROPS" }] },
|
|
type: "TABS_WIDGET",
|
|
isLoading: false,
|
|
parentColumnSpace: 74,
|
|
parentRowSpace: 40,
|
|
leftColumn: 3,
|
|
rightColumn: 11,
|
|
topRow: 11,
|
|
bottomRow: 18,
|
|
parentId: "0",
|
|
widgetId: "g3s5k86c8v",
|
|
children: [
|
|
{
|
|
type: "CANVAS_WIDGET",
|
|
tabId: "tab2",
|
|
tabName: "Tab 2",
|
|
widgetId: "377zsl4rgg",
|
|
parentId: "g3s5k86c8v",
|
|
detachFromLayout: true,
|
|
children: [],
|
|
parentRowSpace: 1,
|
|
parentColumnSpace: 1,
|
|
leftColumn: 0,
|
|
rightColumn: 592,
|
|
topRow: 0,
|
|
bottomRow: 280,
|
|
isLoading: false,
|
|
widgetName: "Canvas1",
|
|
renderMode: "CANVAS",
|
|
},
|
|
{
|
|
type: "CANVAS_WIDGET",
|
|
tabId: "tab1",
|
|
tabName: "Tab 1",
|
|
widgetId: "9augj62fwd",
|
|
parentId: "g3s5k86c8v",
|
|
detachFromLayout: true,
|
|
children: [
|
|
{
|
|
isVisible: true,
|
|
text: "Submit",
|
|
buttonStyle: "PRIMARY_BUTTON",
|
|
widgetName: "Button26",
|
|
isDisabled: false,
|
|
isDefaultClickDisabled: true,
|
|
type: "BUTTON_WIDGET",
|
|
isLoading: false,
|
|
parentColumnSpace: 34.5,
|
|
parentRowSpace: 40,
|
|
leftColumn: 2,
|
|
rightColumn: 4,
|
|
topRow: 1,
|
|
bottomRow: 2,
|
|
parentId: "9augj62fwd",
|
|
widgetId: "o87mpa118i",
|
|
},
|
|
],
|
|
parentRowSpace: 1,
|
|
parentColumnSpace: 1,
|
|
leftColumn: 0,
|
|
rightColumn: 592,
|
|
topRow: 0,
|
|
bottomRow: 280,
|
|
isLoading: false,
|
|
widgetName: "Canvas1",
|
|
renderMode: "CANVAS",
|
|
},
|
|
],
|
|
dynamicBindings: { selectedTab: true },
|
|
},
|
|
],
|
|
};
|
|
describe("Immutable Canvas structures", () => {
|
|
it("generates the same object if it is run with the same dsl", () => {
|
|
const nextState = compareAndGenerateImmutableCanvasStructure(
|
|
canvasStructure,
|
|
simpleDSL,
|
|
);
|
|
|
|
expect(nextState).toBe(canvasStructure);
|
|
});
|
|
it("calculates 100 simple diffs in less than 30ms", () => {
|
|
const start = performance.now();
|
|
for (let i = 0; i < 100; i++) {
|
|
compareAndGenerateImmutableCanvasStructure(canvasStructure, newDSL);
|
|
}
|
|
console.log("Time taken for 100 runs: ", performance.now() - start, "ms");
|
|
const timeTaken = performance.now() - start;
|
|
expect(timeTaken).toBeLessThanOrEqual(30);
|
|
});
|
|
it("updates the diff appropriately", () => {
|
|
const dsl: any = {
|
|
widgetId: "x",
|
|
widgetName: "x",
|
|
children: [
|
|
{
|
|
widgetId: "y",
|
|
widgetName: "y",
|
|
children: [
|
|
{
|
|
widgetId: "z",
|
|
widgetName: "z",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
widgetId: "m",
|
|
widgetName: "newName",
|
|
children: [
|
|
{
|
|
widgetId: "n",
|
|
widgetName: "n",
|
|
children: [
|
|
{
|
|
widgetId: "o",
|
|
widgetName: "o",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
const expectedCanvasStructure = {
|
|
widgetId: "x",
|
|
widgetName: "x",
|
|
children: [
|
|
{
|
|
widgetId: "y",
|
|
widgetName: "y",
|
|
children: [
|
|
{
|
|
widgetId: "z",
|
|
widgetName: "z",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
widgetId: "m",
|
|
widgetName: "newName",
|
|
children: [
|
|
{
|
|
widgetId: "n",
|
|
widgetName: "n",
|
|
children: [
|
|
{
|
|
widgetId: "o",
|
|
widgetName: "o",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
|
|
const nextState = compareAndGenerateImmutableCanvasStructure(
|
|
canvasStructure,
|
|
dsl,
|
|
);
|
|
expect(nextState).not.toBe(expectedCanvasStructure);
|
|
expect(JSON.stringify(nextState)).toBe(
|
|
JSON.stringify(expectedCanvasStructure),
|
|
);
|
|
});
|
|
});
|