mirror of https://github.com/grafana/grafana
Scenes: Refactor original snapshot button in a new component (#82199)
Ezequiel Victorero
2 years ago
committed by
GitHub
parent
ccb4533a86
commit
dbde08b03c
@ -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'); |
||||
}); |
||||
}); |
||||
@ -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); |
||||
} |
||||
}; |
||||
Loading…
Reference in new issue