forked from grafana/grafana
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Scenes: Refactor original snapshot button in a new component (grafana…
- Loading branch information
1 parent
ccb4533
commit dbde08b
Showing
10 changed files
with
138 additions
and
116 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
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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
60 changes: 60 additions & 0 deletions
60
public/app/features/dashboard-scene/scene/GoToSnapshotOriginButton.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,60 @@ | ||
| import { fireEvent, render, screen } from '@testing-library/react'; | ||
| import React from 'react'; | ||
|
|
||
| import { config, locationService } from '@grafana/runtime'; | ||
| import { ConfirmModal } from '@grafana/ui'; | ||
|
|
||
| import appEvents from '../../../core/app_events'; | ||
| import { ShowModalReactEvent } from '../../../types/events'; | ||
|
|
||
| import { GoToSnapshotOriginButton } from './GoToSnapshotOriginButton'; | ||
|
|
||
| describe('GoToSnapshotOriginButton component', () => { | ||
| beforeEach(async () => { | ||
| locationService.push('/'); | ||
| const location = window.location; | ||
| //@ts-ignore | ||
| delete window.location; | ||
| window.location = { | ||
| ...location, | ||
| href: 'http://snapshots.grafana.com/snapshots/dashboard/abcdefghi/my-dash', | ||
| }; | ||
| jest.spyOn(appEvents, 'publish'); | ||
| }); | ||
| config.appUrl = 'http://snapshots.grafana.com/'; | ||
|
|
||
| it('renders button and triggers onClick redirects to the original dashboard', () => { | ||
| render(<GoToSnapshotOriginButton originalURL={'/d/c0d2742f-b827-466d-9269-fb34d6af24ff'} />); | ||
|
|
||
| // Check if the button renders with the correct testid | ||
| expect(screen.getByTestId('button-snapshot')).toBeInTheDocument(); | ||
|
|
||
| // Simulate a button click | ||
| fireEvent.click(screen.getByTestId('button-snapshot')); | ||
|
|
||
| expect(appEvents.publish).toHaveBeenCalledTimes(0); | ||
| expect(locationService.getLocation().pathname).toEqual('/d/c0d2742f-b827-466d-9269-fb34d6af24ff'); | ||
| expect(window.location.href).toBe('http://snapshots.grafana.com/snapshots/dashboard/abcdefghi/my-dash'); | ||
| }); | ||
|
|
||
| it('renders button and triggers onClick opens a confirmation modal', () => { | ||
| render(<GoToSnapshotOriginButton originalURL={'http://www.anotherdomain.com/'} />); | ||
|
|
||
| // Check if the button renders with the correct testid | ||
| expect(screen.getByTestId('button-snapshot')).toBeInTheDocument(); | ||
|
|
||
| // Simulate a button click | ||
| fireEvent.click(screen.getByTestId('button-snapshot')); | ||
|
|
||
| expect(appEvents.publish).toHaveBeenCalledTimes(1); | ||
| expect(appEvents.publish).toHaveBeenCalledWith( | ||
| new ShowModalReactEvent( | ||
| expect.objectContaining({ | ||
| component: ConfirmModal, | ||
| }) | ||
| ) | ||
| ); | ||
| expect(locationService.getLocation().pathname).toEqual('/'); | ||
| expect(window.location.href).toBe('http://snapshots.grafana.com/snapshots/dashboard/abcdefghi/my-dash'); | ||
| }); | ||
| }); |
62 changes: 62 additions & 0 deletions
62
public/app/features/dashboard-scene/scene/GoToSnapshotOriginButton.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,62 @@ | ||
| import { css } from '@emotion/css'; | ||
| import React from 'react'; | ||
|
|
||
| import { textUtil } from '@grafana/data'; | ||
| import { config, locationService } from '@grafana/runtime'; | ||
| import { ConfirmModal, ToolbarButton } from '@grafana/ui'; | ||
|
|
||
| import appEvents from '../../../core/app_events'; | ||
| import { t } from '../../../core/internationalization'; | ||
| import { ShowModalReactEvent } from '../../../types/events'; | ||
|
|
||
| export function GoToSnapshotOriginButton(props: { originalURL: string }) { | ||
| return ( | ||
| <ToolbarButton | ||
| key="button-snapshot" | ||
| data-testid="button-snapshot" | ||
| tooltip={t('dashboard.toolbar.open-original', 'Open original dashboard')} | ||
| icon="link" | ||
| onClick={() => onOpenSnapshotOriginalDashboard(props.originalURL)} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| const onOpenSnapshotOriginalDashboard = (originalUrl: string) => { | ||
| const relativeURL = originalUrl ?? ''; | ||
| const sanitizedRelativeURL = textUtil.sanitizeUrl(relativeURL); | ||
| try { | ||
| const sanitizedAppUrl = new URL(sanitizedRelativeURL, config.appUrl); | ||
| const appUrl = new URL(config.appUrl); | ||
| if (sanitizedAppUrl.host !== appUrl.host) { | ||
| appEvents.publish( | ||
| new ShowModalReactEvent({ | ||
| component: ConfirmModal, | ||
| props: { | ||
| title: 'Proceed to external site?', | ||
| modalClass: css({ | ||
| width: 'max-content', | ||
| maxWidth: '80vw', | ||
| }), | ||
| body: ( | ||
| <> | ||
| <p> | ||
| {`This link connects to an external website at`} <code>{relativeURL}</code> | ||
| </p> | ||
| <p>{"Are you sure you'd like to proceed?"}</p> | ||
| </> | ||
| ), | ||
| confirmVariant: 'primary', | ||
| confirmText: 'Proceed', | ||
| onConfirm: () => { | ||
| window.location.href = sanitizedAppUrl.href; | ||
| }, | ||
| }, | ||
| }) | ||
| ); | ||
| } else { | ||
| locationService.push(sanitizedRelativeURL); | ||
| } | ||
| } catch (err) { | ||
| console.error('Failed to open original dashboard', err); | ||
| } | ||
| }; |
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