Skip to content

Commit b40ec71

Browse files
JamesNewbyAtMicrosoftOEvgenycompulim
authored
Replacing hideUploadButton param inside SendBox.tsx with disableFileUpload to also hide file upload DropZone as well as button (#5508)
* adding hideUploadButton boolean to file upload dropzone and adding to test * adding space * adding changelog details * replacing hideAttachFileButton flag with disableFileUpload * adding for backward compat * Bring back old tests * Rework disableFileUpload: - change condition to hide upload button even if hideUploadButton is not set - fix white label layout when button hidden - revert test changes - add missing test variants - changelog touch-ups * added testing for drag and drop, deprecation patch, and removed dual flag logic Co-authored-by: Eugene <EOlonov@gmail.com> * Improve test and cover false scenario * Remove unused test id * fix warning display * Improve message Co-authored-by: William Wong <compulim@users.noreply.github.com> --------- Co-authored-by: Eugene <EOlonov@gmail.com> Co-authored-by: William Wong <compulim@users.noreply.github.com>
1 parent 562f97e commit b40ec71

File tree

18 files changed

+194
-19
lines changed

18 files changed

+194
-19
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
3939
- `activityGroupingDecoratorMiddleware`, related to PR [#5504](https://github.com/microsoft/BotFramework-WebChat/pull/5504)
4040
- `sendBoxMiddleware`, related to PR [#5504](https://github.com/microsoft/BotFramework-WebChat/pull/5504)
4141
- `sendBoxToolbarMiddleware`, related to PR [#5504](https://github.com/microsoft/BotFramework-WebChat/pull/5504)
42+
- `styleOptions.hideUploadButton` is being deprecated in favor of `styleOptions.disableFileUpload`. The option will be removed on or after 2027-07-14
4243

4344
### Added
4445

@@ -102,6 +103,9 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
102103
- Attaching files will no longer remove previously attached files
103104
- Updated Fluent theme to use the new attachment preview feature
104105
- Added collapsible activity and activity with abstract handling, in PR [#5506](https://github.com/microsoft/BotFramework-WebChat/pull/5506), in PR [#5513](https://github.com/microsoft/BotFramework-WebChat/pull/5513), by [@OEvgeny](https://github.com/OEvgeny)
106+
- Added `disableFileUpload` flag to completelly disable file upload feature, in PR [#5508](https://github.com/microsoft/BotFramework-WebChat/pull/5508), by [@JamesNewbyAtMicrosoft](https://github.com/JamesNewbyAtMicrosoft)
107+
- Deprecated `hideUploadButton` in favor of `disableFileUpload`.
108+
- Updated `BasicSendBoxToolbar` to rely solely on `disableFileUpload`.
105109

106110
### Changed
107111

‎__tests__/html/fluentTheme/hideAttachFileButton.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,13 @@
2020
WebChat: { FluentThemeProvider, ReactWebChat }
2121
} = window; // Imports in UMD fashion.
2222

23+
const warnings = [];
24+
const warn = console.warn.bind(console);
25+
console.warn = (message) => {
26+
warnings.push(message);
27+
warn(message);
28+
};
29+
2330
const { directLine, store } = testHelpers.createDirectLineEmulator();
2431

2532
const App = () => (
@@ -34,10 +41,15 @@
3441
);
3542

3643
await pageConditions.uiConnected();
44+
45+
expect(warnings).toEqual([
46+
'botframework-webchat: `styleOptions.hideUploadButton` is being deprecated in favor of `styleOptions.disableFileUpload`. The option will be removed on or after 2027-07-14.'
47+
]);
3748

3849
// THEN: No attach button should be render.
3950
expect(pageElements.byTestId(WebChat.testIds.sendBoxUploadButton)).toBeFalsy();
4051
await host.snapshot();
52+
4153
});
4254
</script>
4355
</body>

‎__tests__/html2/basic/disableFileUpload.copilot.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Disable file upload (copilot)</title>
5+
<script>
6+
location = './disableFileUpload?theme=fluent&variant=copilot';
7+
</script>
8+
</head>
9+
<body></body>
10+
</html>

‎__tests__/html2/basic/disableFileUpload.copilot.html.snap-1.png‎

5.72 KB
Loading

‎__tests__/html2/basic/disableFileUpload.false.fluent.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Disable file upload (false) (fluent)</title>
5+
<script>
6+
location = './disableFileUpload?disableFileUpload=false&theme=fluent';
7+
</script>
8+
</head>
9+
<body></body>
10+
</html>

‎__tests__/html2/basic/disableFileUpload.false.fluent.html.snap-1.png‎

7.72 KB
Loading

‎__tests__/html2/basic/disableFileUpload.fluent.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Disable file upload (fluent)</title>
5+
<script>
6+
location = './disableFileUpload?theme=fluent';
7+
</script>
8+
</head>
9+
<body></body>
10+
</html>

‎__tests__/html2/basic/disableFileUpload.fluent.html.snap-1.png‎

6.29 KB
Loading

‎__tests__/html2/basic/disableFileUpload.html‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!doctype html>
2+
<html lang="en-US">
3+
<head>
4+
<title>Disable file upload</title>
5+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
6+
<script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
7+
<script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
8+
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
9+
<script crossorigin="anonymous" src="/test-harness.js"></script>
10+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
11+
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
12+
<script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
13+
</head>
14+
<body>
15+
<main id="webchat"></main>
16+
<script>
17+
run(async function () {
18+
const { directLine, store } = testHelpers.createDirectLineEmulator();
19+
20+
const disableFileUpload = new URLSearchParams(location.search || '').get('disableFileUpload') !== 'false';
21+
const { isFluentTheme } = renderWebChat(
22+
{
23+
directLine,
24+
store,
25+
styleOptions: { disableFileUpload }
26+
},
27+
document.getElementById('webchat')
28+
);
29+
30+
await pageConditions.uiConnected();
31+
32+
// DOM-based checks
33+
if (disableFileUpload) {
34+
expect(pageElements.byTestId(WebChat.testIds.sendBoxUploadButton)).toBeFalsy();
35+
expect(pageElements.byTestId(WebChat.testIds.sendBoxDropZone)).toBeFalsy();
36+
} else {
37+
expect(pageElements.byTestId(WebChat.testIds.sendBoxUploadButton)).toBeDefined();
38+
expect(pageElements.byTestId(WebChat.testIds.sendBoxDropZone)).toBeDefined();
39+
}
40+
41+
// Keyboard interaction: try to tab to the upload button
42+
await pageObjects.focusSendBoxTextBox();
43+
await host.sendTab();
44+
45+
if (disableFileUpload) {
46+
expect(document.activeElement).not.toBe(pageElements.byTestId(WebChat.testIds.sendBoxUploadButton));
47+
} else {
48+
expect(document.activeElement).toBe(pageElements.byTestId(WebChat.testIds.sendBoxUploadButton));
49+
}
50+
51+
if (isFluentTheme) {
52+
// We cannot mimic drag-and-drop in WebDriver yet. So we are doing as good as we could.
53+
const dataTransfer = new DataTransfer();
54+
55+
dataTransfer.items.add(new File([new ArrayBuffer(100)], 'simple.txt'));
56+
57+
const dragEnterDocumentEvent = new DragEvent('dragenter', {
58+
bubbles: true,
59+
cancelable: true,
60+
dataTransfer
61+
});
62+
63+
document.dispatchEvent(dragEnterDocumentEvent);
64+
65+
const dropEvent = new DragEvent('drop', {
66+
bubbles: true,
67+
cancelable: true,
68+
dataTransfer
69+
});
70+
71+
document.querySelector(`[data-testid="${WebChat.testIds['sendBoxDropZone']}"]`)?.dispatchEvent(dropEvent);
72+
73+
if (disableFileUpload) {
74+
// Attachment bar item should not appear
75+
expect(pageElements.byTestId(WebChat.testIds.sendBoxAttachmentBarItem)).toBeFalsy();
76+
} else {
77+
// Attachment bar item should appear
78+
expect(pageElements.byTestId(WebChat.testIds.sendBoxAttachmentBarItem)).toBeDefined();
79+
}
80+
}
81+
82+
await host.snapshot('local');
83+
});
84+
</script>
85+
</body>
86+
</html>

‎__tests__/html2/basic/disableFileUpload.html.snap-1.png‎

5.6 KB
Loading

0 commit comments

Comments
 (0)