Fix copy button animation reset (#5295)

microsoft · Sep 11, 2024 · f62098a · f62098a
1 parent fc1cd39
commit f62098a
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -53,13 +53,15 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  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)
 -  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)
 -  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)
+-  Moved from `[email protected]` to `@redux/[email protected]`, in PR [#5292](https://github.com/microsoft/BotFramework-WebChat/pull/5292), by [@compulim](https://github.com/compulim)
 
 ### Fixed
 
 -  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)
 -  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)
 -  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)
 -  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)
+-  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)
 
 # Removed
 

diff --git a/...-hide-and-show-js-copy-button-should-not-show-as-copied-on-hide-show-1-snap.png b/...-hide-and-show-js-copy-button-should-not-show-as-copied-on-hide-show-1-snap.png
diff --git a/...-hide-and-show-js-copy-button-should-not-show-as-copied-on-hide-show-2-snap.png b/...-hide-and-show-js-copy-button-should-not-show-as-copied-on-hide-show-2-snap.png
diff --git a/...-hide-and-show-js-copy-button-should-not-show-as-copied-on-hide-show-3-snap.png b/...-hide-and-show-js-copy-button-should-not-show-as-copied-on-hide-show-3-snap.png
diff --git a/__tests__/html/copyButton.hideAndShow.html b/__tests__/html/copyButton.hideAndShow.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat" style="position: relative"></main>
+    <script type="text/babel">
+      run(async function () {
+        const {
+          React,
+          ReactDOM: { render },
+          WebChat: { ReactWebChat }
+        } = window; // Imports in UMD fashion.
+
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        render(<ReactWebChat directLine={directLine} store={store} />, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        expect(window.isSecureContext).toBe(true);
+
+        await host.sendDevToolsCommand('Browser.setPermission', {
+          permission: { name: 'clipboard-write' },
+          setting: 'granted'
+        });
+
+        await expect(navigator.permissions.query({ name: 'clipboard-write' })).resolves.toHaveProperty(
+          'state',
+          'granted'
+        );
+
+        await directLine.emulateIncomingActivity({
+          entities: [
+            {
+              '@context': 'https://schema.org',
+              '@id': '',
+              '@type': 'Message',
+              keywords: ['AllowCopy'],
+              type: 'https://schema.org/Message'
+            }
+          ],
+          text: 'Mollit *aute* **aute** dolor ea ex magna incididunt nostrud sit nisi.',
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(1);
+
+        // WHEN: Focus on the "Copy" button via keyboard.
+        await host.click(document.querySelector(`[data-testid="${WebChat.testIds.copyButton}"]`));
+
+        // THEN: The "Copy" button should say "Copied".
+        await host.snapshot();
+
+        // WHEN: After 1 second.
+        await testHelpers.sleep(1_000);
+
+        // THEN: The "Copy" button should back to normal.
+        await host.snapshot();
+
+        // WHEN: Hiding Web Chat and showing it back.
+        document.getElementById('webchat').style.display = 'none';
+        document.body.offsetWidth; // Need for browser to refresh the layout.
+        document.getElementById('webchat').style.display = '';
+
+        // THEN: The "Copy" button should kept at normal.
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/copyButton.hideAndShow.js b/__tests__/html/copyButton.hideAndShow.js
@@ -0,0 +1,3 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+test('copy button should not show as copied on hide/show', () => runHTML('copyButton.hideAndShow'));
diff --git a/packages/component/src/Attachment/Text/private/ActivityCopyButton.tsx b/packages/component/src/Attachment/Text/private/ActivityCopyButton.tsx
@@ -28,6 +28,18 @@ const ActivityCopyButton = ({ className, htmlText, plainText }: Props) => {
   const copyText = localize('COPY_BUTTON_TEXT');
   const disabled = !permissionGranted || uiState === 'disabled';
 
+  useEffect(() => {
+    const { current } = buttonRef;
+
+    if (current) {
+      const handleAnimationEnd = () => current.classList.remove('webchat__activity-copy-button--copied');
+
+      current.addEventListener('animationend', handleAnimationEnd);
+
+      return () => current.removeEventListener('animationend', handleAnimationEnd);
+    }
+  }, [buttonRef]);
+
   const handleClick = useCallback(() => {
     const { current: htmlText } = htmlTextRef;