From 9b645577ac12ab6b8513a0e059402d707c4b8c0b Mon Sep 17 00:00:00 2001
From: Yusuf Musleh <yusuf@opencraft.com>
Date: Wed, 14 Aug 2024 08:11:19 +0300
Subject: [PATCH] feat: Broadcast clipboard on lib component copy

---
 src/library-authoring/components/ComponentCard.test.tsx | 7 +++++++
 src/library-authoring/components/ComponentCard.tsx      | 9 +++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/library-authoring/components/ComponentCard.test.tsx b/src/library-authoring/components/ComponentCard.test.tsx
index 0041f5e9a0..cb800e762e 100644
--- a/src/library-authoring/components/ComponentCard.test.tsx
+++ b/src/library-authoring/components/ComponentCard.test.tsx
@@ -40,6 +40,13 @@ const contentHit: ContentHit = {
   lastPublished: null,
 };
 
+const clipboardBroadcastChannelMock = {
+  postMessage: jest.fn(),
+  close: jest.fn(),
+};
+
+(global as any).BroadcastChannel = jest.fn(() => clipboardBroadcastChannelMock);
+
 const RootWrapper = () => (
   <AppProvider store={store}>
     <IntlProvider locale="en">
diff --git a/src/library-authoring/components/ComponentCard.tsx b/src/library-authoring/components/ComponentCard.tsx
index 9bae1303fc..621a492bcc 100644
--- a/src/library-authoring/components/ComponentCard.tsx
+++ b/src/library-authoring/components/ComponentCard.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useContext, useMemo, useState } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   ActionRow,
@@ -17,6 +17,7 @@ import TagCount from '../../generic/tag-count';
 import { ToastContext } from '../../generic/toast-context';
 import { type ContentHit, Highlight } from '../../search-manager';
 import messages from './messages';
+import { STUDIO_CLIPBOARD_CHANNEL } from '../../constants';
 
 type ComponentCardProps = {
   contentHit: ContentHit,
@@ -26,9 +27,13 @@ type ComponentCardProps = {
 const ComponentCardMenu = ({ usageKey }: { usageKey: string }) => {
   const intl = useIntl();
   const { showToast } = useContext(ToastContext);
+  const [clipboardBroadcastChannel] = useState(() => new BroadcastChannel(STUDIO_CLIPBOARD_CHANNEL));
   const updateClipboardClick = () => {
     updateClipboard(usageKey)
-      .then(() => showToast(intl.formatMessage(messages.copyToClipboardSuccess)))
+      .then((clipboardData) => {
+        clipboardBroadcastChannel.postMessage(clipboardData);
+        showToast(intl.formatMessage(messages.copyToClipboardSuccess))
+      })
       .catch(() => showToast(intl.formatMessage(messages.copyToClipboardError)));
   };