Skip to content

Commit f62098a

Browse files
compulimcompulim
authoredSep 11, 2024··
Fix copy button animation reset (#5295)
1 parent fc1cd39 commit f62098a

7 files changed

+95
-0
lines changed
 

‎CHANGELOG.md

+2
Original file line numberDiff line numberDiff line change
@@ -53,13 +53,15 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
5353
- Improved focus trap implementation by preserving focus state and removing sentinels, in PR [#5243](https://github.com/microsoft/BotFramework-WebChat/pull/5243), by [@OEvgeny](https://github.com/OEvgeny)
5454
- Reworked pre-chat activity layout to use author entity for improved consistency and flexibility, in PR [#5274](https://github.com/microsoft/BotFramework-WebChat/pull/5274), by [@OEvgeny](https://github.com/OEvgeny)
5555
- Updated styles for suggested actions and attachments in Fluent theme to improve readability and consistency, in PR [#5275](https://github.com/microsoft/BotFramework-WebChat/pull/5275), by [@OEvgeny](https://github.com/OEvgeny)
56+
- Moved from `redux-devtools-extension@2.13.9` to `@redux/devtools-extension@3.3.0`, in PR [#5292](https://github.com/microsoft/BotFramework-WebChat/pull/5292), by [@compulim](https://github.com/compulim)
5657

5758
### Fixed
5859

5960
- Fixed [#5256](https://github.com/microsoft/BotFramework-WebChat/issues/5256). `styleOptions.maxMessageLength` should support any JavaScript number value including `Infinity`, by [@compulim](https://github.com/compulim), in PR [#5255](https://github.com/microsoft/BotFramework-WebChat/issues/pull/5255)
6061
- Fixes [#4965](https://github.com/microsoft/BotFramework-WebChat/issues/4965). Removed keyboard helper screen in [#5234](https://github.com/microsoft/BotFramework-WebChat/pull/5234), by [@amirmursal](https://github.com/amirmursal) and [@OEvgeny](https://github.com/OEvgeny)
6162
- Fixes [#5268](https://github.com/microsoft/BotFramework-WebChat/issues/5268). Concluded livestream is sealed and activities received afterwards are ignored, and `streamSequence` is not required in final activity, in PR [#5273](https://github.com/microsoft/BotFramework-WebChat/pull/5273), by [@compulim](https://github.com/compulim)
6263
- Fixes [#5288](https://github.com/microsoft/BotFramework-WebChat/issues/5288). Fixed citation and sensitivity label bleeding when using Fluent skin pack, in PR [#5287](https://github.com/microsoft/BotFramework-WebChat/pull/5287), by [@compulim](https://github.com/compulim)
64+
- Fixes [#5294](https://github.com/microsoft/BotFramework-WebChat/issues/5294). Fixed copy button animation reset to "Copied" after hiding and showing Web Chat, in PR [#5295](https://github.com/microsoft/BotFramework-WebChat/pull/5295), by [@compulim](https://github.com/compulim)
6365

6466
# Removed
6567

‎__tests__/html/copyButton.hideAndShow.html

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!doctype html>
2+
<html lang="en-US">
3+
<head>
4+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
5+
<script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
6+
<script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
7+
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
8+
<script crossorigin="anonymous" src="/test-harness.js"></script>
9+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
10+
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
11+
</head>
12+
<body>
13+
<main id="webchat" style="position: relative"></main>
14+
<script type="text/babel">
15+
run(async function () {
16+
const {
17+
React,
18+
ReactDOM: { render },
19+
WebChat: { ReactWebChat }
20+
} = window; // Imports in UMD fashion.
21+
22+
const { directLine, store } = testHelpers.createDirectLineEmulator();
23+
24+
render(<ReactWebChat directLine={directLine} store={store} />, document.getElementById('webchat'));
25+
26+
await pageConditions.uiConnected();
27+
28+
expect(window.isSecureContext).toBe(true);
29+
30+
await host.sendDevToolsCommand('Browser.setPermission', {
31+
permission: { name: 'clipboard-write' },
32+
setting: 'granted'
33+
});
34+
35+
await expect(navigator.permissions.query({ name: 'clipboard-write' })).resolves.toHaveProperty(
36+
'state',
37+
'granted'
38+
);
39+
40+
await directLine.emulateIncomingActivity({
41+
entities: [
42+
{
43+
'@context': 'https://schema.org',
44+
'@id': '',
45+
'@type': 'Message',
46+
keywords: ['AllowCopy'],
47+
type: 'https://schema.org/Message'
48+
}
49+
],
50+
text: 'Mollit *aute* **aute** dolor ea ex magna incididunt nostrud sit nisi.',
51+
type: 'message'
52+
});
53+
54+
await pageConditions.numActivitiesShown(1);
55+
56+
// WHEN: Focus on the "Copy" button via keyboard.
57+
await host.click(document.querySelector(`[data-testid="${WebChat.testIds.copyButton}"]`));
58+
59+
// THEN: The "Copy" button should say "Copied".
60+
await host.snapshot();
61+
62+
// WHEN: After 1 second.
63+
await testHelpers.sleep(1_000);
64+
65+
// THEN: The "Copy" button should back to normal.
66+
await host.snapshot();
67+
68+
// WHEN: Hiding Web Chat and showing it back.
69+
document.getElementById('webchat').style.display = 'none';
70+
document.body.offsetWidth; // Need for browser to refresh the layout.
71+
document.getElementById('webchat').style.display = '';
72+
73+
// THEN: The "Copy" button should kept at normal.
74+
await host.snapshot();
75+
});
76+
</script>
77+
</body>
78+
</html>

‎__tests__/html/copyButton.hideAndShow.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
2+
3+
test('copy button should not show as copied on hide/show', () => runHTML('copyButton.hideAndShow'));

‎packages/component/src/Attachment/Text/private/ActivityCopyButton.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,18 @@ const ActivityCopyButton = ({ className, htmlText, plainText }: Props) => {
2828
const copyText = localize('COPY_BUTTON_TEXT');
2929
const disabled = !permissionGranted || uiState === 'disabled';
3030

31+
useEffect(() => {
32+
const { current } = buttonRef;
33+
34+
if (current) {
35+
const handleAnimationEnd = () => current.classList.remove('webchat__activity-copy-button--copied');
36+
37+
current.addEventListener('animationend', handleAnimationEnd);
38+
39+
return () => current.removeEventListener('animationend', handleAnimationEnd);
40+
}
41+
}, [buttonRef]);
42+
3143
const handleClick = useCallback(() => {
3244
const { current: htmlText } = htmlTextRef;
3345

0 commit comments

Comments
 (0)
Please sign in to comment.