Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ShareModal: Share link redesign under
newDashboardSharingComponent …
…FF (#87011)
- Loading branch information
1 parent
196134b
commit d1434fa
Showing
17 changed files
with
334 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
73 changes: 73 additions & 0 deletions
73
public/app/features/dashboard-scene/sharing/ShareButton/ShareButton.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| import { render, screen } from '@testing-library/react'; | ||
| import userEvent from '@testing-library/user-event'; | ||
| import React from 'react'; | ||
|
|
||
| import { selectors as e2eSelectors } from '@grafana/e2e-selectors'; | ||
| import { SceneGridLayout, SceneTimeRange, VizPanel } from '@grafana/scenes'; | ||
|
|
||
| import { DashboardGridItem } from '../../scene/DashboardGridItem'; | ||
| import { DashboardScene } from '../../scene/DashboardScene'; | ||
|
|
||
| import ShareButton from './ShareButton'; | ||
|
|
||
| const createAndCopyDashboardShortLinkMock = jest.fn(); | ||
| jest.mock('app/core/utils/shortLinks', () => ({ | ||
| ...jest.requireActual('app/core/utils/shortLinks'), | ||
| createAndCopyDashboardShortLink: () => createAndCopyDashboardShortLinkMock(), | ||
| })); | ||
|
|
||
| const selector = e2eSelectors.pages.Dashboard.DashNav.newShareButton; | ||
| describe('ShareButton', () => { | ||
| it('should render share link button and menu', async () => { | ||
| setup(); | ||
|
|
||
| expect(await screen.findByTestId(selector.shareLink)).toBeInTheDocument(); | ||
| expect(await screen.findByTestId(selector.arrowMenu)).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should call createAndCopyDashboardShortLink when share link clicked', async () => { | ||
| setup(); | ||
|
|
||
| const shareLink = await screen.findByTestId(selector.shareLink); | ||
|
|
||
| await userEvent.click(shareLink); | ||
| expect(createAndCopyDashboardShortLinkMock).toHaveBeenCalled(); | ||
| }); | ||
|
|
||
| it('should render menu when arrow button clicked', async () => { | ||
| setup(); | ||
|
|
||
| const arrowMenu = await screen.findByTestId(selector.arrowMenu); | ||
| await userEvent.click(arrowMenu); | ||
|
|
||
| expect(await screen.findByTestId(selector.menu.container)).toBeInTheDocument(); | ||
| }); | ||
| }); | ||
|
|
||
| function setup() { | ||
| const panel = new VizPanel({ | ||
| title: 'Panel A', | ||
| pluginId: 'table', | ||
| key: 'panel-12', | ||
| }); | ||
|
|
||
| const dashboard = new DashboardScene({ | ||
| title: 'hello', | ||
| uid: 'dash-1', | ||
| $timeRange: new SceneTimeRange({}), | ||
| body: new SceneGridLayout({ | ||
| children: [ | ||
| new DashboardGridItem({ | ||
| key: 'griditem-1', | ||
| x: 0, | ||
| y: 0, | ||
| width: 10, | ||
| height: 12, | ||
| body: panel, | ||
| }), | ||
| ], | ||
| }), | ||
| }); | ||
|
|
||
| render(<ShareButton dashboard={dashboard} />); | ||
| } |
42 changes: 42 additions & 0 deletions
42
public/app/features/dashboard-scene/sharing/ShareButton/ShareButton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import React, { useCallback, useState } from 'react'; | ||
| import { useAsyncFn } from 'react-use'; | ||
|
|
||
| import { selectors as e2eSelectors } from '@grafana/e2e-selectors'; | ||
| import { Button, ButtonGroup, Dropdown } from '@grafana/ui'; | ||
| import { createAndCopyDashboardShortLink } from 'app/core/utils/shortLinks'; | ||
|
|
||
| import { DashboardScene } from '../../scene/DashboardScene'; | ||
| import { DashboardInteractions } from '../../utils/interactions'; | ||
|
|
||
| import ShareMenu from './ShareMenu'; | ||
|
|
||
| const newShareButtonSelector = e2eSelectors.pages.Dashboard.DashNav.newShareButton; | ||
|
|
||
| export default function ShareButton({ dashboard }: { dashboard: DashboardScene }) { | ||
| const [isOpen, setIsOpen] = useState(false); | ||
|
|
||
| const [_, buildUrl] = useAsyncFn(async () => { | ||
| return await createAndCopyDashboardShortLink(dashboard, { useAbsoluteTimeRange: true, theme: 'current' }); | ||
| }, [dashboard]); | ||
|
|
||
| const onMenuClick = useCallback((isOpen: boolean) => { | ||
| if (isOpen) { | ||
| DashboardInteractions.toolbarShareClick(); | ||
| } | ||
|
|
||
| setIsOpen(isOpen); | ||
| }, []); | ||
|
|
||
| const MenuActions = () => <ShareMenu dashboard={dashboard} />; | ||
|
|
||
| return ( | ||
| <ButtonGroup data-testid={newShareButtonSelector.container}> | ||
| <Button data-testid={newShareButtonSelector.shareLink} size="sm" tooltip="Copy shortened URL" onClick={buildUrl}> | ||
| Share | ||
| </Button> | ||
| <Dropdown overlay={MenuActions} placement="bottom-end" onVisibleChange={onMenuClick}> | ||
| <Button data-testid={newShareButtonSelector.arrowMenu} size="sm" icon={isOpen ? 'angle-up' : 'angle-down'} /> | ||
| </Dropdown> | ||
| </ButtonGroup> | ||
| ); | ||
| } |
Oops, something went wrong.