Skip to content

Commit d1b5b32

Browse files
SahilCs15SahilCs15
authored
Merge pull request #446 from contentstack/VE-6559-conditionally-render-visual-builder-ui-elements-and-hide-when-not-in-use
VE-6559:add isOpenInBuilder utility function and integrate into VisualBuilder components
2 parents b736212 + 8e80517 commit d1b5b32

33 files changed

Lines changed: 832 additions & 287 deletions

‎src/utils/index.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,13 @@ export function isOpeningInTimeline(): boolean {
2727
return !!previewTimestamp;
2828
}
2929
return false;
30-
}
30+
}
31+
32+
export function isOpenInBuilder(): boolean {
33+
if (hasWindow()) {
34+
const urlParams = new URLSearchParams(window.location.search);
35+
const builder = urlParams.get("builder");
36+
return !!builder;
37+
}
38+
return false;
39+
}

‎src/visualBuilder/__test__/click/fields/boolean.test.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
6060
};
6161
});
6262

63+
vi.mock("../../../../utils/index.ts", async () => {
64+
const actual = await vi.importActual("../../../../utils");
65+
return {
66+
__esModule: true,
67+
...actual,
68+
isOpenInBuilder: vi.fn().mockReturnValue(true),
69+
};
70+
});
71+
6372
describe("When an element is clicked in visual builder mode", () => {
6473
let mouseClickEvent: Event;
6574

@@ -107,7 +116,10 @@ describe("When an element is clicked in visual builder mode", () => {
107116
document.body.appendChild(booleanField);
108117

109118
visualBuilder = new VisualBuilder();
110-
await triggerAndWaitForClickAction(visualBuilderPostMessage, booleanField);
119+
await triggerAndWaitForClickAction(
120+
visualBuilderPostMessage,
121+
booleanField
122+
);
111123
});
112124

113125
afterAll(() => {
@@ -147,7 +159,6 @@ describe("When an element is clicked in visual builder mode", () => {
147159
});
148160

149161
test("should send a focus field message to parent", async () => {
150-
151162
await waitFor(() => {
152163
expect(visualBuilderPostMessage?.send).toBeCalledWith(
153164
VisualBuilderPostMessageEvents.FOCUS_FIELD,

‎src/visualBuilder/__test__/click/fields/date.test.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
6060
};
6161
});
6262

63+
vi.mock("../../../../utils/index.ts", async () => {
64+
const actual = await vi.importActual("../../../../utils");
65+
return {
66+
__esModule: true,
67+
...actual,
68+
isOpenInBuilder: vi.fn().mockReturnValue(true),
69+
};
70+
});
71+
6372
describe("When an element is clicked in visual builder mode", () => {
6473
let mouseClickEvent: Event;
6574

@@ -107,7 +116,10 @@ describe("When an element is clicked in visual builder mode", () => {
107116
document.body.appendChild(dateField);
108117

109118
visualBuilder = new VisualBuilder();
110-
await triggerAndWaitForClickAction(visualBuilderPostMessage, dateField);
119+
await triggerAndWaitForClickAction(
120+
visualBuilderPostMessage,
121+
dateField
122+
);
111123
});
112124

113125
afterAll(() => {

‎src/visualBuilder/__test__/click/fields/file.test.tsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
4949
};
5050
});
5151

52+
vi.mock("../../../../utils/index.ts", async () => {
53+
const actual = await vi.importActual("../../../../utils");
54+
return {
55+
__esModule: true,
56+
...actual,
57+
isOpenInBuilder: vi.fn().mockReturnValue(true),
58+
};
59+
});
60+
5261
describe("When an element is clicked in visual builder mode", () => {
5362
let mouseClickEvent: Event;
5463

@@ -105,7 +114,10 @@ describe("When an element is clicked in visual builder mode", () => {
105114
document.body.appendChild(fileField);
106115
document.body.appendChild(imageField);
107116
visualBuilder = new VisualBuilder();
108-
await triggerAndWaitForClickAction(visualBuilderPostMessage, fileField);
117+
await triggerAndWaitForClickAction(
118+
visualBuilderPostMessage,
119+
fileField
120+
);
109121
});
110122

111123
afterAll(() => {
@@ -202,7 +214,10 @@ describe("When an element is clicked in visual builder mode", () => {
202214
document.body.appendChild(container);
203215

204216
visualBuilder = new VisualBuilder();
205-
await triggerAndWaitForClickAction(visualBuilderPostMessage, container);
217+
await triggerAndWaitForClickAction(
218+
visualBuilderPostMessage,
219+
container
220+
);
206221
});
207222

208223
afterAll(() => {

‎src/visualBuilder/__test__/click/fields/group.test.tsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
4949
};
5050
});
5151

52+
vi.mock("../../../../utils/index.ts", async () => {
53+
const actual = await vi.importActual("../../../../utils");
54+
return {
55+
__esModule: true,
56+
...actual,
57+
isOpenInBuilder: vi.fn().mockReturnValue(true),
58+
};
59+
});
60+
5261
describe("When an element is clicked in visual builder mode", () => {
5362
let mouseClickEvent: Event;
5463

@@ -98,7 +107,10 @@ describe("When an element is clicked in visual builder mode", () => {
98107
document.body.appendChild(groupField);
99108

100109
visualBuilder = new VisualBuilder();
101-
await triggerAndWaitForClickAction(visualBuilderPostMessage, groupField);
110+
await triggerAndWaitForClickAction(
111+
visualBuilderPostMessage,
112+
groupField
113+
);
102114
});
103115

104116
afterAll(() => {
@@ -190,7 +202,10 @@ describe("When an element is clicked in visual builder mode", () => {
190202
document.body.appendChild(container);
191203

192204
visualBuilder = new VisualBuilder();
193-
await triggerAndWaitForClickAction(visualBuilderPostMessage, container);
205+
await triggerAndWaitForClickAction(
206+
visualBuilderPostMessage,
207+
container
208+
);
194209
});
195210

196211
afterAll(() => {

‎src/visualBuilder/__test__/click/fields/html-rte.test.tsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
4949
};
5050
});
5151

52+
vi.mock("../../../../utils/index.ts", async () => {
53+
const actual = await vi.importActual("../../../../utils");
54+
return {
55+
__esModule: true,
56+
...actual,
57+
isOpenInBuilder: vi.fn().mockReturnValue(true),
58+
};
59+
});
60+
5261
describe("When an element is clicked in visual builder mode", () => {
5362
let mouseClickEvent: Event;
5463

@@ -96,7 +105,10 @@ describe("When an element is clicked in visual builder mode", () => {
96105
);
97106
document.body.appendChild(htmlRteField);
98107
visualBuilder = new VisualBuilder();
99-
await triggerAndWaitForClickAction(visualBuilderPostMessage, htmlRteField)
108+
await triggerAndWaitForClickAction(
109+
visualBuilderPostMessage,
110+
htmlRteField
111+
);
100112
});
101113

102114
afterAll(() => {
@@ -177,7 +189,10 @@ describe("When an element is clicked in visual builder mode", () => {
177189
document.body.appendChild(container);
178190

179191
visualBuilder = new VisualBuilder();
180-
await triggerAndWaitForClickAction(visualBuilderPostMessage, container);
192+
await triggerAndWaitForClickAction(
193+
visualBuilderPostMessage,
194+
container
195+
);
181196
});
182197
afterAll(() => {
183198
visualBuilder.destroy();

‎src/visualBuilder/__test__/click/fields/json-rte.test.tsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
4949
};
5050
});
5151

52+
vi.mock("../../../../utils/index.ts", async () => {
53+
const actual = await vi.importActual("../../../../utils");
54+
return {
55+
__esModule: true,
56+
...actual,
57+
isOpenInBuilder: vi.fn().mockReturnValue(true),
58+
};
59+
});
60+
5261
describe("When an element is clicked in visual builder mode", () => {
5362
let mouseClickEvent: Event;
5463

@@ -97,7 +106,10 @@ describe("When an element is clicked in visual builder mode", () => {
97106
document.body.appendChild(jsonRteField);
98107
visualBuilder = new VisualBuilder();
99108

100-
await triggerAndWaitForClickAction(visualBuilderPostMessage, jsonRteField);
109+
await triggerAndWaitForClickAction(
110+
visualBuilderPostMessage,
111+
jsonRteField
112+
);
101113
});
102114

103115
afterAll(() => {
@@ -178,7 +190,10 @@ describe("When an element is clicked in visual builder mode", () => {
178190
document.body.appendChild(container);
179191

180192
visualBuilder = new VisualBuilder();
181-
await triggerAndWaitForClickAction(visualBuilderPostMessage, container);
193+
await triggerAndWaitForClickAction(
194+
visualBuilderPostMessage,
195+
container
196+
);
182197
});
183198

184199
afterAll(() => {

‎src/visualBuilder/__test__/click/fields/link.test.tsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
4949
};
5050
});
5151

52+
vi.mock("../../../../utils/index.ts", async () => {
53+
const actual = await vi.importActual("../../../../utils");
54+
return {
55+
__esModule: true,
56+
...actual,
57+
isOpenInBuilder: vi.fn().mockReturnValue(true),
58+
};
59+
});
60+
5261
describe("When an element is clicked in visual builder mode", () => {
5362
beforeAll(() => {
5463
FieldSchemaMap.setFieldSchema(
@@ -91,7 +100,10 @@ describe("When an element is clicked in visual builder mode", () => {
91100

92101
document.body.appendChild(linkField);
93102
visualBuilder = new VisualBuilder();
94-
await triggerAndWaitForClickAction(visualBuilderPostMessage, linkField);
103+
await triggerAndWaitForClickAction(
104+
visualBuilderPostMessage,
105+
linkField
106+
);
95107
});
96108

97109
afterAll(() => {
@@ -173,7 +185,10 @@ describe("When an element is clicked in visual builder mode", () => {
173185
document.body.appendChild(container);
174186

175187
visualBuilder = new VisualBuilder();
176-
await triggerAndWaitForClickAction(visualBuilderPostMessage, container);
188+
await triggerAndWaitForClickAction(
189+
visualBuilderPostMessage,
190+
container
191+
);
177192
});
178193

179194
afterAll(() => {

‎src/visualBuilder/__test__/click/fields/markdown.test.tsx‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,16 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
4949
};
5050
});
5151

52-
describe("When an element is clicked in visual builder mode", () => {
52+
vi.mock("../../../../utils/index.ts", async () => {
53+
const actual = await vi.importActual("../../../../utils");
54+
return {
55+
__esModule: true,
56+
...actual,
57+
isOpenInBuilder: vi.fn().mockReturnValue(true),
58+
};
59+
});
5360

61+
describe("When an element is clicked in visual builder mode", () => {
5462
beforeAll(() => {
5563
FieldSchemaMap.setFieldSchema(
5664
"all_fields",
@@ -93,7 +101,10 @@ describe("When an element is clicked in visual builder mode", () => {
93101
document.body.appendChild(markdownField);
94102

95103
visualBuilder = new VisualBuilder();
96-
await triggerAndWaitForClickAction(visualBuilderPostMessage, markdownField);
104+
await triggerAndWaitForClickAction(
105+
visualBuilderPostMessage,
106+
markdownField
107+
);
97108
});
98109

99110
afterAll(() => {
@@ -174,7 +185,10 @@ describe("When an element is clicked in visual builder mode", () => {
174185
document.body.appendChild(container);
175186

176187
visualBuilder = new VisualBuilder();
177-
await triggerAndWaitForClickAction(visualBuilderPostMessage, container);
188+
await triggerAndWaitForClickAction(
189+
visualBuilderPostMessage,
190+
container
191+
);
178192
});
179193

180194
afterAll(() => {

‎src/visualBuilder/__test__/click/fields/multi-line.test.tsx‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,16 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
4949
};
5050
});
5151

52-
describe("When an element is clicked in visual builder mode", () => {
52+
vi.mock("../../../../utils/index.ts", async () => {
53+
const actual = await vi.importActual("../../../../utils");
54+
return {
55+
__esModule: true,
56+
...actual,
57+
isOpenInBuilder: vi.fn().mockReturnValue(true),
58+
};
59+
});
5360

61+
describe("When an element is clicked in visual builder mode", () => {
5462
beforeAll(async () => {
5563
FieldSchemaMap.setFieldSchema(
5664
"all_fields",
@@ -115,7 +123,10 @@ describe("When an element is clicked in visual builder mode", () => {
115123
document.body.appendChild(multiLineField);
116124
visualBuilder = new VisualBuilder();
117125

118-
await triggerAndWaitForClickAction(visualBuilderPostMessage, multiLineField)
126+
await triggerAndWaitForClickAction(
127+
visualBuilderPostMessage,
128+
multiLineField
129+
);
119130
});
120131

121132
afterAll(() => {
@@ -222,12 +233,15 @@ describe("When an element is clicked in visual builder mode", () => {
222233
audienceMode: false,
223234
};
224235
visualBuilder = new VisualBuilder();
225-
await triggerAndWaitForClickAction(visualBuilderPostMessage, container);
236+
await triggerAndWaitForClickAction(
237+
visualBuilderPostMessage,
238+
container
239+
);
226240
});
227241

228242
afterAll(() => {
229243
visualBuilder.destroy();
230-
})
244+
});
231245
test("should have outline", () => {
232246
expect(container.classList.contains("cslp-edit-mode"));
233247
});
@@ -252,7 +266,6 @@ describe("When an element is clicked in visual builder mode", () => {
252266
VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY
253267
);
254268
});
255-
256269
});
257270

258271
test("container should not contain a contenteditable attribute but the children can", async () => {

0 commit comments

Comments
 (0)