Add onCopy prop for QuickEmbed (#1319)

* Add onCopy prop for QuickEmbed

* Make onCopy prop optional

* update onCopy prop description

* use userEvent instead of fireEvent

* update onCopy prop description

---------

Co-authored-by: Joseph Axisa <josephaxisa@google.com>

Author: zeckertG

packages/embed-components/src/QuickEmbed/QuickEmbed.spec.tsx

@@ -50,6 +50,8 @@ describe('QuickEmbed', () => {
     ...overrides,
   })
   const onClose = jest.fn()
+  const onCopy = jest.fn()
+  document.execCommand = jest.fn()
 
   beforeEach(() => {
     jest.spyOn(window, 'location', 'get').mockReturnValue({
@@ -69,7 +71,7 @@ describe('QuickEmbed', () => {
   })
 
   it('renders', () => {
-    renderWithTheme(<QuickEmbed onClose={onClose} />)
+    renderWithTheme(<QuickEmbed onClose={onClose} onCopy={onCopy} />)
 
     expect(
       screen.getByRole('heading', { name: 'Get embed URL' })
@@ -103,7 +105,7 @@ describe('QuickEmbed', () => {
       href: 'https://example.com/looks/42',
       pathname: '/looks/42',
     } as Location)
-    renderWithTheme(<QuickEmbed onClose={onClose} />)
+    renderWithTheme(<QuickEmbed onClose={onClose} onCopy={onCopy} />)
 
     expect(
       screen.getByRole('heading', { name: 'Get embed URL' })
@@ -124,7 +126,7 @@ describe('QuickEmbed', () => {
     ;(useThemesStoreState as jest.Mock).mockReturnValue(
       getMockStoreState({ selectedTheme: customTheme1 })
     )
-    renderWithTheme(<QuickEmbed onClose={onClose} />)
+    renderWithTheme(<QuickEmbed onClose={onClose} onCopy={onCopy} />)
 
     expect(
       screen.getByRole('heading', { name: 'Get embed URL' })
@@ -153,4 +155,34 @@ describe('QuickEmbed', () => {
       )
     })
   })
+
+  it('close button function triggers on click', async () => {
+    renderWithTheme(<QuickEmbed onClose={onClose} onCopy={onCopy} />)
+    const closeBtn = screen.getByRole('button', { name: 'Close' })
+
+    expect(closeBtn).toBeInTheDocument()
+    await userEvent.click(closeBtn)
+
+    expect(onClose).toHaveBeenCalled()
+  })
+
+  it('onCopy not called when not passed in', async () => {
+    renderWithTheme(<QuickEmbed onClose={onClose} />)
+    const copyBtn = screen.getByRole('button', { name: 'Copy Link' })
+
+    expect(copyBtn).toBeInTheDocument()
+    await userEvent.click(copyBtn)
+
+    expect(onCopy).not.toHaveBeenCalled()
+  })
+
+  it('copy button function triggers on click', async () => {
+    renderWithTheme(<QuickEmbed onClose={onClose} onCopy={onCopy} />)
+    const copyBtn = screen.getByRole('button', { name: 'Copy Link' })
+
+    expect(copyBtn).toBeInTheDocument()
+    await userEvent.click(copyBtn)
+
+    expect(onCopy).toHaveBeenCalled()
+  })
 })

packages/embed-components/src/QuickEmbed/QuickEmbed.tsx

@@ -43,16 +43,28 @@ import { EmbedUrl } from '@looker/embed-services'
 import { useThemesStoreState, SelectTheme, useThemeActions } from '../Theme'
 
 interface QuickEmbedProps {
+  /** A function triggered when close button is clicked. */
   onClose: () => void
+  /**
+   * An optional callback triggered when the copy button is clicked.
+   * The copy to clipboard action is already handled
+   */
+  onCopy?: () => void
 }
 
-export const QuickEmbed = ({ onClose }: QuickEmbedProps) => {
+export const QuickEmbed = ({ onClose, onCopy }: QuickEmbedProps) => {
   const service = new EmbedUrl()
   const [toggleValue, setToggle] = useState(false)
   const [embedUrl, setEmbedUrl] = useState<string>(service.embedUrl(false))
   const { selectedTheme } = useThemesStoreState()
   const { selectThemeAction } = useThemeActions()
 
+  const handleCopy = () => {
+    if (onCopy) {
+      onCopy()
+    }
+  }
+
   const handleToggle = () => {
     const newToggleValue = !toggleValue
     if (newToggleValue) {
@@ -108,9 +120,11 @@ export const QuickEmbed = ({ onClose }: QuickEmbedProps) => {
       </Space>
 
       <Space mt="large" between>
-        <CopyToClipboard content={embedUrl}>
-          <ButtonOutline iconBefore={<Link />}>Copy Link</ButtonOutline>
-        </CopyToClipboard>
+        <Space onClick={handleCopy} width="fit-content">
+          <CopyToClipboard content={embedUrl}>
+            <ButtonOutline iconBefore={<Link />}>Copy Link</ButtonOutline>
+          </CopyToClipboard>
+        </Space>
         <Button onClick={onClose}>Close</Button>
       </Space>
     </Section>