detail.spec.tsx 48 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559
  1. import {browserHistory} from 'react-router';
  2. import {DashboardFixture} from 'sentry-fixture/dashboard';
  3. import {LocationFixture} from 'sentry-fixture/locationFixture';
  4. import {OrganizationFixture} from 'sentry-fixture/organization';
  5. import {ProjectFixture} from 'sentry-fixture/project';
  6. import {ReleaseFixture} from 'sentry-fixture/release';
  7. import {RouteComponentPropsFixture} from 'sentry-fixture/routeComponentPropsFixture';
  8. import {WidgetFixture} from 'sentry-fixture/widget';
  9. import {initializeOrg} from 'sentry-test/initializeOrg';
  10. import {
  11. act,
  12. render,
  13. screen,
  14. userEvent,
  15. waitFor,
  16. within,
  17. } from 'sentry-test/reactTestingLibrary';
  18. import * as modals from 'sentry/actionCreators/modal';
  19. import ProjectsStore from 'sentry/stores/projectsStore';
  20. import CreateDashboard from 'sentry/views/dashboards/create';
  21. import * as types from 'sentry/views/dashboards/types';
  22. import ViewEditDashboard from 'sentry/views/dashboards/view';
  23. import {OrganizationContext} from 'sentry/views/organizationContext';
  24. describe('Dashboards > Detail', function () {
  25. const organization = OrganizationFixture({
  26. features: ['global-views', 'dashboards-basic', 'dashboards-edit', 'discover-query'],
  27. });
  28. const projects = [ProjectFixture()];
  29. describe('prebuilt dashboards', function () {
  30. let initialData;
  31. beforeEach(function () {
  32. act(() => ProjectsStore.loadInitialData(projects));
  33. initialData = initializeOrg({organization});
  34. MockApiClient.addMockResponse({
  35. url: '/organizations/org-slug/tags/',
  36. body: [],
  37. });
  38. MockApiClient.addMockResponse({
  39. url: '/organizations/org-slug/projects/',
  40. body: [ProjectFixture()],
  41. });
  42. MockApiClient.addMockResponse({
  43. url: '/organizations/org-slug/dashboards/',
  44. body: [
  45. DashboardFixture([], {id: 'default-overview', title: 'Default'}),
  46. DashboardFixture([], {id: '1', title: 'Custom Errors'}),
  47. ],
  48. });
  49. MockApiClient.addMockResponse({
  50. url: '/organizations/org-slug/dashboards/default-overview/',
  51. body: DashboardFixture([], {id: 'default-overview', title: 'Default'}),
  52. });
  53. MockApiClient.addMockResponse({
  54. url: '/organizations/org-slug/dashboards/1/visit/',
  55. method: 'POST',
  56. body: [],
  57. statusCode: 200,
  58. });
  59. MockApiClient.addMockResponse({
  60. url: '/organizations/org-slug/users/',
  61. method: 'GET',
  62. body: [],
  63. });
  64. MockApiClient.addMockResponse({
  65. url: '/organizations/org-slug/sdk-updates/',
  66. body: [],
  67. });
  68. MockApiClient.addMockResponse({
  69. url: '/organizations/org-slug/prompts-activity/',
  70. body: {},
  71. });
  72. MockApiClient.addMockResponse({
  73. url: '/organizations/org-slug/events/',
  74. method: 'GET',
  75. body: [],
  76. });
  77. MockApiClient.addMockResponse({
  78. url: '/organizations/org-slug/events-stats/',
  79. body: {data: []},
  80. });
  81. MockApiClient.addMockResponse({
  82. method: 'GET',
  83. url: '/organizations/org-slug/issues/',
  84. body: [],
  85. });
  86. MockApiClient.addMockResponse({
  87. url: '/organizations/org-slug/releases/',
  88. body: [],
  89. });
  90. MockApiClient.addMockResponse({
  91. url: '/organizations/org-slug/metrics/meta/',
  92. body: [],
  93. });
  94. });
  95. afterEach(function () {
  96. MockApiClient.clearMockResponses();
  97. });
  98. it('assigns unique IDs to all widgets so grid keys are unique', async function () {
  99. MockApiClient.addMockResponse({
  100. url: '/organizations/org-slug/events-stats/',
  101. body: {data: []},
  102. });
  103. MockApiClient.addMockResponse({
  104. url: '/organizations/org-slug/dashboards/default-overview/',
  105. body: DashboardFixture(
  106. [
  107. WidgetFixture({
  108. queries: [
  109. {
  110. name: '',
  111. conditions: 'event.type:error',
  112. fields: ['count()'],
  113. aggregates: ['count()'],
  114. columns: [],
  115. orderby: '-count()',
  116. },
  117. ],
  118. title: 'Default Widget 1',
  119. interval: '1d',
  120. }),
  121. WidgetFixture({
  122. queries: [
  123. {
  124. name: '',
  125. conditions: 'event.type:transaction',
  126. fields: ['count()'],
  127. aggregates: ['count()'],
  128. columns: [],
  129. orderby: '-count()',
  130. },
  131. ],
  132. title: 'Default Widget 2',
  133. interval: '1d',
  134. }),
  135. ],
  136. {id: 'default-overview', title: 'Default'}
  137. ),
  138. });
  139. initialData = initializeOrg({
  140. organization: OrganizationFixture({
  141. features: ['global-views', 'dashboards-basic', 'discover-query'],
  142. projects: [ProjectFixture()],
  143. }),
  144. });
  145. render(
  146. <OrganizationContext.Provider value={initialData.organization}>
  147. <ViewEditDashboard
  148. {...RouteComponentPropsFixture()}
  149. organization={initialData.organization}
  150. params={{orgId: 'org-slug', dashboardId: 'default-overview'}}
  151. router={initialData.router}
  152. location={initialData.router.location}
  153. >
  154. {null}
  155. </ViewEditDashboard>
  156. </OrganizationContext.Provider>,
  157. {context: initialData.routerContext}
  158. );
  159. expect(await screen.findByText('Default Widget 1')).toBeInTheDocument();
  160. expect(screen.getByText('Default Widget 2')).toBeInTheDocument();
  161. });
  162. it('opens the widget viewer modal in a prebuilt dashboard using the widget id specified in the url', async () => {
  163. const openWidgetViewerModal = jest.spyOn(modals, 'openWidgetViewerModal');
  164. render(
  165. <CreateDashboard
  166. {...RouteComponentPropsFixture()}
  167. organization={initialData.organization}
  168. params={{templateId: 'default-template', widgetId: '2'}}
  169. router={initialData.router}
  170. location={{...initialData.router.location, pathname: '/widget/2/'}}
  171. >
  172. {null}
  173. </CreateDashboard>,
  174. {context: initialData.routerContext, organization: initialData.organization}
  175. );
  176. await waitFor(() => {
  177. expect(openWidgetViewerModal).toHaveBeenCalledWith(
  178. expect.objectContaining({
  179. organization: initialData.organization,
  180. widget: expect.objectContaining({
  181. displayType: 'line',
  182. interval: '5m',
  183. queries: [
  184. {
  185. aggregates: ['count()'],
  186. columns: [],
  187. conditions: '!event.type:transaction',
  188. fields: ['count()'],
  189. name: 'Events',
  190. orderby: 'count()',
  191. },
  192. ],
  193. title: 'Events',
  194. widgetType: types.WidgetType.DISCOVER,
  195. }),
  196. onClose: expect.anything(),
  197. })
  198. );
  199. });
  200. });
  201. });
  202. describe('custom dashboards', function () {
  203. let initialData, widgets, mockVisit, mockPut;
  204. beforeEach(function () {
  205. window.confirm = jest.fn();
  206. initialData = initializeOrg({
  207. organization,
  208. router: {
  209. location: LocationFixture(),
  210. },
  211. });
  212. widgets = [
  213. WidgetFixture({
  214. queries: [
  215. {
  216. name: '',
  217. conditions: 'event.type:error',
  218. fields: ['count()'],
  219. columns: [],
  220. aggregates: ['count()'],
  221. orderby: '-count()',
  222. },
  223. ],
  224. title: 'Errors',
  225. interval: '1d',
  226. widgetType: types.WidgetType.DISCOVER,
  227. id: '1',
  228. }),
  229. WidgetFixture({
  230. queries: [
  231. {
  232. name: '',
  233. conditions: 'event.type:transaction',
  234. fields: ['count()'],
  235. columns: [],
  236. aggregates: ['count()'],
  237. orderby: '-count()',
  238. },
  239. ],
  240. title: 'Transactions',
  241. interval: '1d',
  242. widgetType: types.WidgetType.DISCOVER,
  243. id: '2',
  244. }),
  245. WidgetFixture({
  246. queries: [
  247. {
  248. name: '',
  249. conditions: 'event.type:transaction transaction:/api/cats',
  250. fields: ['p50()'],
  251. columns: [],
  252. aggregates: ['p50()'],
  253. orderby: '-p50()',
  254. },
  255. ],
  256. title: 'p50 of /api/cats',
  257. interval: '1d',
  258. id: '3',
  259. }),
  260. ];
  261. mockVisit = MockApiClient.addMockResponse({
  262. url: '/organizations/org-slug/dashboards/1/visit/',
  263. method: 'POST',
  264. body: [],
  265. statusCode: 200,
  266. });
  267. MockApiClient.addMockResponse({
  268. url: '/organizations/org-slug/tags/',
  269. body: [],
  270. });
  271. MockApiClient.addMockResponse({
  272. url: '/organizations/org-slug/projects/',
  273. body: [ProjectFixture()],
  274. });
  275. MockApiClient.addMockResponse({
  276. url: '/organizations/org-slug/dashboards/',
  277. body: [
  278. {
  279. ...DashboardFixture([], {
  280. id: 'default-overview',
  281. title: 'Default',
  282. }),
  283. widgetDisplay: ['area'],
  284. },
  285. {
  286. ...DashboardFixture([], {
  287. id: '1',
  288. title: 'Custom Errors',
  289. }),
  290. widgetDisplay: ['area'],
  291. },
  292. ],
  293. });
  294. MockApiClient.addMockResponse({
  295. url: '/organizations/org-slug/dashboards/1/',
  296. body: DashboardFixture(widgets, {
  297. id: '1',
  298. title: 'Custom Errors',
  299. filters: {},
  300. }),
  301. });
  302. mockPut = MockApiClient.addMockResponse({
  303. url: '/organizations/org-slug/dashboards/1/',
  304. method: 'PUT',
  305. body: DashboardFixture(widgets, {id: '1', title: 'Custom Errors'}),
  306. });
  307. MockApiClient.addMockResponse({
  308. url: '/organizations/org-slug/events-stats/',
  309. body: {data: []},
  310. });
  311. MockApiClient.addMockResponse({
  312. method: 'POST',
  313. url: '/organizations/org-slug/dashboards/widgets/',
  314. body: [],
  315. });
  316. MockApiClient.addMockResponse({
  317. method: 'GET',
  318. url: '/organizations/org-slug/recent-searches/',
  319. body: [],
  320. });
  321. MockApiClient.addMockResponse({
  322. method: 'GET',
  323. url: '/organizations/org-slug/issues/',
  324. body: [],
  325. });
  326. MockApiClient.addMockResponse({
  327. url: '/organizations/org-slug/events/',
  328. method: 'GET',
  329. body: [],
  330. });
  331. MockApiClient.addMockResponse({
  332. url: '/organizations/org-slug/users/',
  333. method: 'GET',
  334. body: [],
  335. });
  336. MockApiClient.addMockResponse({
  337. url: '/organizations/org-slug/releases/',
  338. body: [],
  339. });
  340. MockApiClient.addMockResponse({
  341. url: '/organizations/org-slug/sdk-updates/',
  342. body: [],
  343. });
  344. MockApiClient.addMockResponse({
  345. url: '/organizations/org-slug/prompts-activity/',
  346. body: {},
  347. });
  348. MockApiClient.addMockResponse({
  349. url: '/organizations/org-slug/metrics/meta/',
  350. body: [],
  351. });
  352. });
  353. afterEach(function () {
  354. MockApiClient.clearMockResponses();
  355. jest.clearAllMocks();
  356. });
  357. it('can remove widgets', async function () {
  358. const updateMock = MockApiClient.addMockResponse({
  359. url: '/organizations/org-slug/dashboards/1/',
  360. method: 'PUT',
  361. body: DashboardFixture([widgets[0]], {id: '1', title: 'Custom Errors'}),
  362. });
  363. render(
  364. <OrganizationContext.Provider value={initialData.organization}>
  365. <ViewEditDashboard
  366. {...RouteComponentPropsFixture()}
  367. organization={initialData.organization}
  368. params={{orgId: 'org-slug', dashboardId: '1'}}
  369. router={initialData.router}
  370. location={initialData.router.location}
  371. >
  372. {null}
  373. </ViewEditDashboard>
  374. </OrganizationContext.Provider>,
  375. {context: initialData.routerContext}
  376. );
  377. await waitFor(() => expect(mockVisit).toHaveBeenCalledTimes(1));
  378. // Enter edit mode.
  379. await userEvent.click(screen.getByRole('button', {name: 'Edit Dashboard'}));
  380. // Remove the second and third widgets
  381. await userEvent.click(screen.getAllByRole('button', {name: 'Delete Widget'})[1]);
  382. await userEvent.click(screen.getAllByRole('button', {name: 'Delete Widget'})[1]);
  383. // Save changes
  384. await userEvent.click(screen.getByRole('button', {name: 'Save and Finish'}));
  385. expect(updateMock).toHaveBeenCalled();
  386. expect(updateMock).toHaveBeenCalledWith(
  387. '/organizations/org-slug/dashboards/1/',
  388. expect.objectContaining({
  389. data: expect.objectContaining({
  390. title: 'Custom Errors',
  391. widgets: [expect.objectContaining(widgets[0])],
  392. }),
  393. })
  394. );
  395. // Visit should not be called again on dashboard update
  396. expect(mockVisit).toHaveBeenCalledTimes(1);
  397. });
  398. it('appends dashboard-level filters to series request', async function () {
  399. MockApiClient.addMockResponse({
  400. url: '/organizations/org-slug/dashboards/1/',
  401. body: DashboardFixture(widgets, {
  402. id: '1',
  403. title: 'Custom Errors',
  404. filters: {release: ['abc@1.2.0']},
  405. }),
  406. });
  407. const mock = MockApiClient.addMockResponse({
  408. url: '/organizations/org-slug/events-stats/',
  409. body: [],
  410. });
  411. render(
  412. <OrganizationContext.Provider value={initialData.organization}>
  413. <ViewEditDashboard
  414. {...RouteComponentPropsFixture()}
  415. organization={initialData.organization}
  416. params={{orgId: 'org-slug', dashboardId: '1'}}
  417. router={initialData.router}
  418. location={initialData.router.location}
  419. >
  420. {null}
  421. </ViewEditDashboard>
  422. </OrganizationContext.Provider>,
  423. {context: initialData.routerContext}
  424. );
  425. await waitFor(() =>
  426. expect(mock).toHaveBeenLastCalledWith(
  427. '/organizations/org-slug/events-stats/',
  428. expect.objectContaining({
  429. query: expect.objectContaining({
  430. query: 'event.type:transaction transaction:/api/cats release:"abc@1.2.0" ',
  431. }),
  432. })
  433. )
  434. );
  435. });
  436. it('shows add widget option', async function () {
  437. render(
  438. <OrganizationContext.Provider value={initialData.organization}>
  439. <ViewEditDashboard
  440. {...RouteComponentPropsFixture()}
  441. organization={initialData.organization}
  442. params={{orgId: 'org-slug', dashboardId: '1'}}
  443. router={initialData.router}
  444. location={initialData.router.location}
  445. >
  446. {null}
  447. </ViewEditDashboard>
  448. </OrganizationContext.Provider>,
  449. {context: initialData.routerContext}
  450. );
  451. // Enter edit mode.
  452. await userEvent.click(screen.getByRole('button', {name: 'Edit Dashboard'}));
  453. expect(await screen.findByRole('button', {name: 'Add widget'})).toBeInTheDocument();
  454. });
  455. it('shows top level release filter', async function () {
  456. const mockReleases = MockApiClient.addMockResponse({
  457. url: '/organizations/org-slug/releases/',
  458. body: [ReleaseFixture()],
  459. });
  460. initialData = initializeOrg({
  461. organization: OrganizationFixture({
  462. features: [
  463. 'global-views',
  464. 'dashboards-basic',
  465. 'dashboards-edit',
  466. 'discover-query',
  467. ],
  468. projects: [ProjectFixture()],
  469. }),
  470. });
  471. render(
  472. <OrganizationContext.Provider value={initialData.organization}>
  473. <ViewEditDashboard
  474. {...RouteComponentPropsFixture()}
  475. organization={initialData.organization}
  476. params={{orgId: 'org-slug', dashboardId: '1'}}
  477. router={initialData.router}
  478. location={initialData.router.location}
  479. >
  480. {null}
  481. </ViewEditDashboard>
  482. </OrganizationContext.Provider>,
  483. {context: initialData.routerContext}
  484. );
  485. expect(await screen.findByText('All Releases')).toBeInTheDocument();
  486. expect(mockReleases).toHaveBeenCalledTimes(1);
  487. });
  488. it('hides add widget option', async function () {
  489. // @ts-expect-error this is assigning to readonly property...
  490. types.MAX_WIDGETS = 1;
  491. render(
  492. <OrganizationContext.Provider value={initialData.organization}>
  493. <ViewEditDashboard
  494. {...RouteComponentPropsFixture()}
  495. organization={initialData.organization}
  496. params={{orgId: 'org-slug', dashboardId: '1'}}
  497. router={initialData.router}
  498. location={initialData.router.location}
  499. >
  500. {null}
  501. </ViewEditDashboard>
  502. </OrganizationContext.Provider>,
  503. {context: initialData.routerContext}
  504. );
  505. // Enter edit mode.
  506. await userEvent.click(await screen.findByRole('button', {name: 'Edit Dashboard'}));
  507. expect(screen.queryByRole('button', {name: 'Add widget'})).not.toBeInTheDocument();
  508. });
  509. it('renders successfully if more widgets than stored layouts', async function () {
  510. // A case where someone has async added widgets to a dashboard
  511. MockApiClient.addMockResponse({
  512. url: '/organizations/org-slug/dashboards/1/',
  513. body: DashboardFixture(
  514. [
  515. WidgetFixture({
  516. queries: [
  517. {
  518. name: '',
  519. conditions: 'event.type:error',
  520. fields: ['count()'],
  521. aggregates: ['count()'],
  522. columns: [],
  523. orderby: '-count()',
  524. },
  525. ],
  526. title: 'First Widget',
  527. interval: '1d',
  528. id: '1',
  529. layout: {x: 0, y: 0, w: 2, h: 6, minH: 0},
  530. }),
  531. WidgetFixture({
  532. queries: [
  533. {
  534. name: '',
  535. conditions: 'event.type:error',
  536. fields: ['count()'],
  537. aggregates: ['count()'],
  538. columns: [],
  539. orderby: '-count()',
  540. },
  541. ],
  542. title: 'Second Widget',
  543. interval: '1d',
  544. id: '2',
  545. }),
  546. ],
  547. {id: '1', title: 'Custom Errors'}
  548. ),
  549. });
  550. render(
  551. <ViewEditDashboard
  552. {...RouteComponentPropsFixture()}
  553. organization={initialData.organization}
  554. params={{orgId: 'org-slug', dashboardId: '1'}}
  555. router={initialData.router}
  556. location={initialData.router.location}
  557. >
  558. {null}
  559. </ViewEditDashboard>,
  560. {context: initialData.routerContext, organization: initialData.organization}
  561. );
  562. expect(await screen.findByText('First Widget')).toBeInTheDocument();
  563. expect(await screen.findByText('Second Widget')).toBeInTheDocument();
  564. });
  565. it('does not trigger request if layout not updated', async () => {
  566. MockApiClient.addMockResponse({
  567. url: '/organizations/org-slug/dashboards/1/',
  568. body: DashboardFixture(
  569. [
  570. WidgetFixture({
  571. queries: [
  572. {
  573. name: '',
  574. conditions: 'event.type:error',
  575. fields: ['count()'],
  576. aggregates: ['count()'],
  577. columns: [],
  578. orderby: '-count()',
  579. },
  580. ],
  581. title: 'First Widget',
  582. interval: '1d',
  583. id: '1',
  584. layout: {x: 0, y: 0, w: 2, h: 6, minH: 0},
  585. }),
  586. ],
  587. {id: '1', title: 'Custom Errors'}
  588. ),
  589. });
  590. render(
  591. <ViewEditDashboard
  592. {...RouteComponentPropsFixture()}
  593. organization={initialData.organization}
  594. params={{orgId: 'org-slug', dashboardId: '1'}}
  595. router={initialData.router}
  596. location={initialData.router.location}
  597. >
  598. {null}
  599. </ViewEditDashboard>,
  600. {context: initialData.routerContext, organization: initialData.organization}
  601. );
  602. await userEvent.click(await screen.findByText('Edit Dashboard'));
  603. await userEvent.click(await screen.findByText('Save and Finish'));
  604. expect(screen.getByText('Edit Dashboard')).toBeInTheDocument();
  605. expect(mockPut).not.toHaveBeenCalled();
  606. });
  607. it('renders the custom resize handler for a widget', async () => {
  608. MockApiClient.addMockResponse({
  609. url: '/organizations/org-slug/dashboards/1/',
  610. body: DashboardFixture(
  611. [
  612. WidgetFixture({
  613. queries: [
  614. {
  615. name: '',
  616. conditions: 'event.type:error',
  617. fields: ['count()'],
  618. aggregates: ['count()'],
  619. columns: [],
  620. orderby: '-count()',
  621. },
  622. ],
  623. title: 'First Widget',
  624. interval: '1d',
  625. id: '1',
  626. layout: {x: 0, y: 0, w: 2, h: 6, minH: 0},
  627. }),
  628. ],
  629. {id: '1', title: 'Custom Errors'}
  630. ),
  631. });
  632. render(
  633. <ViewEditDashboard
  634. {...RouteComponentPropsFixture()}
  635. organization={initialData.organization}
  636. params={{orgId: 'org-slug', dashboardId: '1'}}
  637. router={initialData.router}
  638. location={initialData.router.location}
  639. >
  640. {null}
  641. </ViewEditDashboard>,
  642. {context: initialData.routerContext, organization: initialData.organization}
  643. );
  644. await userEvent.click(await screen.findByText('Edit Dashboard'));
  645. const widget = screen
  646. .getByText('First Widget')
  647. .closest('.react-grid-item') as HTMLElement;
  648. const resizeHandle = within(widget).getByTestId('custom-resize-handle');
  649. expect(resizeHandle).toBeVisible();
  650. });
  651. it('does not trigger an alert when the widgets have no layout and user cancels without changes', async () => {
  652. MockApiClient.addMockResponse({
  653. url: '/organizations/org-slug/dashboards/1/',
  654. body: DashboardFixture(
  655. [
  656. WidgetFixture({
  657. queries: [
  658. {
  659. name: '',
  660. conditions: 'event.type:error',
  661. fields: ['count()'],
  662. aggregates: ['count()'],
  663. columns: [],
  664. orderby: '-count()',
  665. },
  666. ],
  667. title: 'First Widget',
  668. interval: '1d',
  669. id: '1',
  670. layout: null,
  671. }),
  672. ],
  673. {id: '1', title: 'Custom Errors'}
  674. ),
  675. });
  676. render(
  677. <ViewEditDashboard
  678. {...RouteComponentPropsFixture()}
  679. organization={initialData.organization}
  680. params={{orgId: 'org-slug', dashboardId: '1'}}
  681. router={initialData.router}
  682. location={initialData.router.location}
  683. >
  684. {null}
  685. </ViewEditDashboard>,
  686. {context: initialData.routerContext, organization: initialData.organization}
  687. );
  688. await userEvent.click(await screen.findByText('Edit Dashboard'));
  689. await userEvent.click(await screen.findByText('Cancel'));
  690. expect(window.confirm).not.toHaveBeenCalled();
  691. });
  692. it('opens the widget viewer modal using the widget id specified in the url', async () => {
  693. const openWidgetViewerModal = jest.spyOn(modals, 'openWidgetViewerModal');
  694. const widget = WidgetFixture({
  695. queries: [
  696. {
  697. name: '',
  698. conditions: 'event.type:error',
  699. fields: ['count()'],
  700. aggregates: ['count()'],
  701. columns: [],
  702. orderby: '',
  703. },
  704. ],
  705. title: 'First Widget',
  706. interval: '1d',
  707. id: '1',
  708. layout: null,
  709. });
  710. MockApiClient.addMockResponse({
  711. url: '/organizations/org-slug/dashboards/1/',
  712. body: DashboardFixture([widget], {id: '1', title: 'Custom Errors'}),
  713. });
  714. render(
  715. <ViewEditDashboard
  716. {...RouteComponentPropsFixture()}
  717. organization={initialData.organization}
  718. params={{orgId: 'org-slug', dashboardId: '1', widgetId: 1}}
  719. router={initialData.router}
  720. location={{...initialData.router.location, pathname: '/widget/123/'}}
  721. >
  722. {null}
  723. </ViewEditDashboard>,
  724. {context: initialData.routerContext, organization: initialData.organization}
  725. );
  726. await waitFor(() => {
  727. expect(openWidgetViewerModal).toHaveBeenCalledWith(
  728. expect.objectContaining({
  729. organization: initialData.organization,
  730. widget,
  731. onClose: expect.anything(),
  732. })
  733. );
  734. });
  735. });
  736. it('redirects user to dashboard url if widget is not found', async () => {
  737. const openWidgetViewerModal = jest.spyOn(modals, 'openWidgetViewerModal');
  738. MockApiClient.addMockResponse({
  739. url: '/organizations/org-slug/dashboards/1/',
  740. body: DashboardFixture([], {id: '1', title: 'Custom Errors'}),
  741. });
  742. render(
  743. <ViewEditDashboard
  744. {...RouteComponentPropsFixture()}
  745. organization={initialData.organization}
  746. params={{orgId: 'org-slug', dashboardId: '1', widgetId: 123}}
  747. router={initialData.router}
  748. location={{...initialData.router.location, pathname: '/widget/123/'}}
  749. >
  750. {null}
  751. </ViewEditDashboard>,
  752. {context: initialData.routerContext, organization: initialData.organization}
  753. );
  754. expect(await screen.findByText('All Releases')).toBeInTheDocument();
  755. expect(openWidgetViewerModal).not.toHaveBeenCalled();
  756. expect(initialData.router.replace).toHaveBeenCalledWith(
  757. expect.objectContaining({
  758. pathname: '/organizations/org-slug/dashboard/1/',
  759. query: {},
  760. })
  761. );
  762. });
  763. it('saves a new dashboard with the page filters', async () => {
  764. const mockPOST = MockApiClient.addMockResponse({
  765. url: '/organizations/org-slug/dashboards/',
  766. method: 'POST',
  767. body: [],
  768. });
  769. render(
  770. <CreateDashboard
  771. {...RouteComponentPropsFixture()}
  772. organization={initialData.organization}
  773. params={{templateId: undefined}}
  774. router={initialData.router}
  775. location={{
  776. ...initialData.router.location,
  777. query: {
  778. ...initialData.router.location.query,
  779. statsPeriod: '7d',
  780. project: [2],
  781. environment: ['alpha', 'beta'],
  782. },
  783. }}
  784. >
  785. {null}
  786. </CreateDashboard>,
  787. {
  788. context: initialData.routerContext,
  789. organization: initialData.organization,
  790. }
  791. );
  792. await userEvent.click(await screen.findByText('Save and Finish'));
  793. expect(mockPOST).toHaveBeenCalledWith(
  794. '/organizations/org-slug/dashboards/',
  795. expect.objectContaining({
  796. data: expect.objectContaining({
  797. projects: [2],
  798. environment: ['alpha', 'beta'],
  799. period: '7d',
  800. }),
  801. })
  802. );
  803. });
  804. it('saves a template with the page filters', async () => {
  805. const mockPOST = MockApiClient.addMockResponse({
  806. url: '/organizations/org-slug/dashboards/',
  807. method: 'POST',
  808. body: [],
  809. });
  810. render(
  811. <CreateDashboard
  812. {...RouteComponentPropsFixture()}
  813. organization={initialData.organization}
  814. params={{templateId: 'default-template'}}
  815. router={initialData.router}
  816. location={{
  817. ...initialData.router.location,
  818. query: {
  819. ...initialData.router.location.query,
  820. statsPeriod: '7d',
  821. project: [2],
  822. environment: ['alpha', 'beta'],
  823. },
  824. }}
  825. >
  826. {null}
  827. </CreateDashboard>,
  828. {
  829. context: initialData.routerContext,
  830. organization: initialData.organization,
  831. }
  832. );
  833. await userEvent.click(await screen.findByText('Add Dashboard'));
  834. expect(mockPOST).toHaveBeenCalledWith(
  835. '/organizations/org-slug/dashboards/',
  836. expect.objectContaining({
  837. data: expect.objectContaining({
  838. projects: [2],
  839. environment: ['alpha', 'beta'],
  840. period: '7d',
  841. }),
  842. })
  843. );
  844. });
  845. it('does not render save and cancel buttons on templates', async () => {
  846. MockApiClient.addMockResponse({
  847. url: '/organizations/org-slug/releases/',
  848. body: [
  849. ReleaseFixture({
  850. shortVersion: 'sentry-android-shop@1.2.0',
  851. version: 'sentry-android-shop@1.2.0',
  852. }),
  853. ],
  854. });
  855. render(
  856. <CreateDashboard
  857. {...RouteComponentPropsFixture()}
  858. organization={initialData.organization}
  859. params={{templateId: 'default-template'}}
  860. router={initialData.router}
  861. location={initialData.router.location}
  862. >
  863. {null}
  864. </CreateDashboard>,
  865. {
  866. context: initialData.routerContext,
  867. organization: initialData.organization,
  868. }
  869. );
  870. await userEvent.click(await screen.findByText('24H'));
  871. await userEvent.click(screen.getByText('Last 7 days'));
  872. await screen.findByText('7D');
  873. expect(screen.queryByText('Cancel')).not.toBeInTheDocument();
  874. expect(screen.queryByText('Save')).not.toBeInTheDocument();
  875. });
  876. it('opens the widget viewer with saved dashboard filters', async () => {
  877. const openWidgetViewerModal = jest.spyOn(modals, 'openWidgetViewerModal');
  878. MockApiClient.addMockResponse({
  879. url: '/organizations/org-slug/dashboards/1/',
  880. body: DashboardFixture(widgets, {
  881. id: '1',
  882. filters: {release: ['sentry-android-shop@1.2.0']},
  883. }),
  884. });
  885. render(
  886. <ViewEditDashboard
  887. {...RouteComponentPropsFixture()}
  888. organization={initialData.organization}
  889. params={{orgId: 'org-slug', dashboardId: '1', widgetId: 1}}
  890. router={initialData.router}
  891. location={{...initialData.router.location, pathname: '/widget/1/'}}
  892. >
  893. {null}
  894. </ViewEditDashboard>,
  895. {context: initialData.routerContext, organization: initialData.organization}
  896. );
  897. await waitFor(() => {
  898. expect(openWidgetViewerModal).toHaveBeenCalledWith(
  899. expect.objectContaining({
  900. dashboardFilters: {release: ['sentry-android-shop@1.2.0']},
  901. })
  902. );
  903. });
  904. });
  905. it('opens the widget viewer with unsaved dashboard filters', async () => {
  906. const openWidgetViewerModal = jest.spyOn(modals, 'openWidgetViewerModal');
  907. MockApiClient.addMockResponse({
  908. url: '/organizations/org-slug/dashboards/1/',
  909. body: DashboardFixture(widgets, {
  910. id: '1',
  911. filters: {release: ['sentry-android-shop@1.2.0']},
  912. }),
  913. });
  914. render(
  915. <ViewEditDashboard
  916. {...RouteComponentPropsFixture()}
  917. organization={initialData.organization}
  918. params={{orgId: 'org-slug', dashboardId: '1', widgetId: 1}}
  919. router={initialData.router}
  920. location={{
  921. ...initialData.router.location,
  922. pathname: '/widget/1/',
  923. query: {release: ['unsaved-release-filter@1.2.0']},
  924. }}
  925. >
  926. {null}
  927. </ViewEditDashboard>,
  928. {context: initialData.routerContext, organization: initialData.organization}
  929. );
  930. await waitFor(() => {
  931. expect(openWidgetViewerModal).toHaveBeenCalledWith(
  932. expect.objectContaining({
  933. dashboardFilters: {release: ['unsaved-release-filter@1.2.0']},
  934. })
  935. );
  936. });
  937. });
  938. it('can save dashboard filters in existing dashboard', async () => {
  939. MockApiClient.addMockResponse({
  940. url: '/organizations/org-slug/releases/',
  941. body: [
  942. ReleaseFixture({
  943. shortVersion: 'sentry-android-shop@1.2.0',
  944. version: 'sentry-android-shop@1.2.0',
  945. }),
  946. ],
  947. });
  948. const testData = initializeOrg({
  949. organization: OrganizationFixture({
  950. features: [
  951. 'global-views',
  952. 'dashboards-basic',
  953. 'dashboards-edit',
  954. 'discover-query',
  955. ],
  956. }),
  957. router: {
  958. location: {
  959. ...LocationFixture(),
  960. query: {
  961. statsPeriod: '7d',
  962. release: ['sentry-android-shop@1.2.0'],
  963. },
  964. },
  965. },
  966. });
  967. render(
  968. <ViewEditDashboard
  969. {...RouteComponentPropsFixture()}
  970. organization={testData.organization}
  971. params={{orgId: 'org-slug', dashboardId: '1'}}
  972. router={testData.router}
  973. location={testData.router.location}
  974. >
  975. {null}
  976. </ViewEditDashboard>,
  977. {context: testData.routerContext, organization: testData.organization}
  978. );
  979. await userEvent.click(await screen.findByText('Save'));
  980. expect(mockPut).toHaveBeenCalledWith(
  981. '/organizations/org-slug/dashboards/1/',
  982. expect.objectContaining({
  983. data: expect.objectContaining({
  984. period: '7d',
  985. filters: {release: ['sentry-android-shop@1.2.0']},
  986. }),
  987. })
  988. );
  989. });
  990. it('can clear dashboard filters in compact select', async () => {
  991. MockApiClient.addMockResponse({
  992. url: '/organizations/org-slug/dashboards/1/',
  993. body: DashboardFixture(widgets, {
  994. id: '1',
  995. title: 'Custom Errors',
  996. filters: {release: ['sentry-android-shop@1.2.0']},
  997. }),
  998. });
  999. MockApiClient.addMockResponse({
  1000. url: '/organizations/org-slug/releases/',
  1001. body: [
  1002. ReleaseFixture({
  1003. shortVersion: 'sentry-android-shop@1.2.0',
  1004. version: 'sentry-android-shop@1.2.0',
  1005. }),
  1006. ],
  1007. });
  1008. const testData = initializeOrg({
  1009. organization: OrganizationFixture({
  1010. features: [
  1011. 'global-views',
  1012. 'dashboards-basic',
  1013. 'dashboards-edit',
  1014. 'discover-query',
  1015. ],
  1016. }),
  1017. router: {
  1018. location: {
  1019. ...LocationFixture(),
  1020. query: {
  1021. statsPeriod: '7d',
  1022. },
  1023. },
  1024. },
  1025. });
  1026. render(
  1027. <ViewEditDashboard
  1028. {...RouteComponentPropsFixture()}
  1029. organization={testData.organization}
  1030. params={{orgId: 'org-slug', dashboardId: '1'}}
  1031. router={testData.router}
  1032. location={testData.router.location}
  1033. >
  1034. {null}
  1035. </ViewEditDashboard>,
  1036. {context: testData.routerContext, organization: testData.organization}
  1037. );
  1038. await screen.findByText('7D');
  1039. await userEvent.click(await screen.findByText('sentry-android-shop@1.2.0'));
  1040. await userEvent.click(screen.getAllByText('Clear')[0]);
  1041. screen.getByText('All Releases');
  1042. await userEvent.click(document.body);
  1043. await waitFor(() => {
  1044. expect(browserHistory.push).toHaveBeenCalledWith(
  1045. expect.objectContaining({
  1046. query: expect.objectContaining({
  1047. release: '',
  1048. }),
  1049. })
  1050. );
  1051. });
  1052. });
  1053. it('can save absolute time range in existing dashboard', async () => {
  1054. const testData = initializeOrg({
  1055. organization: OrganizationFixture({
  1056. features: [
  1057. 'global-views',
  1058. 'dashboards-basic',
  1059. 'dashboards-edit',
  1060. 'discover-query',
  1061. ],
  1062. }),
  1063. router: {
  1064. location: {
  1065. ...LocationFixture(),
  1066. query: {
  1067. start: '2022-07-14T07:00:00',
  1068. end: '2022-07-19T23:59:59',
  1069. utc: 'true',
  1070. },
  1071. },
  1072. },
  1073. });
  1074. render(
  1075. <ViewEditDashboard
  1076. {...RouteComponentPropsFixture()}
  1077. organization={testData.organization}
  1078. params={{orgId: 'org-slug', dashboardId: '1'}}
  1079. router={testData.router}
  1080. location={testData.router.location}
  1081. >
  1082. {null}
  1083. </ViewEditDashboard>,
  1084. {context: testData.routerContext, organization: testData.organization}
  1085. );
  1086. await userEvent.click(await screen.findByText('Save'));
  1087. expect(mockPut).toHaveBeenCalledWith(
  1088. '/organizations/org-slug/dashboards/1/',
  1089. expect.objectContaining({
  1090. data: expect.objectContaining({
  1091. start: '2022-07-14T07:00:00.000',
  1092. end: '2022-07-19T23:59:59.000',
  1093. utc: true,
  1094. }),
  1095. })
  1096. );
  1097. });
  1098. it('can clear dashboard filters in existing dashboard', async () => {
  1099. MockApiClient.addMockResponse({
  1100. url: '/organizations/org-slug/releases/',
  1101. body: [
  1102. ReleaseFixture({
  1103. shortVersion: 'sentry-android-shop@1.2.0',
  1104. version: 'sentry-android-shop@1.2.0',
  1105. }),
  1106. ],
  1107. });
  1108. const testData = initializeOrg({
  1109. organization: OrganizationFixture({
  1110. features: [
  1111. 'global-views',
  1112. 'dashboards-basic',
  1113. 'dashboards-edit',
  1114. 'discover-query',
  1115. ],
  1116. }),
  1117. router: {
  1118. location: {
  1119. ...LocationFixture(),
  1120. query: {
  1121. statsPeriod: '7d',
  1122. environment: ['alpha', 'beta'],
  1123. },
  1124. },
  1125. },
  1126. });
  1127. render(
  1128. <ViewEditDashboard
  1129. {...RouteComponentPropsFixture()}
  1130. organization={testData.organization}
  1131. params={{orgId: 'org-slug', dashboardId: '1'}}
  1132. router={testData.router}
  1133. location={testData.router.location}
  1134. >
  1135. {null}
  1136. </ViewEditDashboard>,
  1137. {context: testData.routerContext, organization: testData.organization}
  1138. );
  1139. await screen.findByText('7D');
  1140. await userEvent.click(await screen.findByText('All Releases'));
  1141. await userEvent.click(screen.getByText('sentry-android-shop@1.2.0'));
  1142. await userEvent.keyboard('{Escape}');
  1143. await userEvent.click(screen.getByText('Cancel'));
  1144. screen.getByText('All Releases');
  1145. expect(browserHistory.replace).toHaveBeenCalledWith(
  1146. expect.objectContaining({
  1147. query: expect.objectContaining({
  1148. project: undefined,
  1149. statsPeriod: undefined,
  1150. environment: undefined,
  1151. }),
  1152. })
  1153. );
  1154. });
  1155. it('disables the Edit Dashboard button when there are unsaved filters', async () => {
  1156. MockApiClient.addMockResponse({
  1157. url: '/organizations/org-slug/releases/',
  1158. body: [
  1159. ReleaseFixture({
  1160. shortVersion: 'sentry-android-shop@1.2.0',
  1161. version: 'sentry-android-shop@1.2.0',
  1162. }),
  1163. ],
  1164. });
  1165. const testData = initializeOrg({
  1166. organization: OrganizationFixture({
  1167. features: [
  1168. 'global-views',
  1169. 'dashboards-basic',
  1170. 'dashboards-edit',
  1171. 'discover-basic',
  1172. 'discover-query',
  1173. ],
  1174. }),
  1175. router: {
  1176. location: {
  1177. ...LocationFixture(),
  1178. query: {
  1179. statsPeriod: '7d',
  1180. environment: ['alpha', 'beta'],
  1181. },
  1182. },
  1183. },
  1184. });
  1185. render(
  1186. <ViewEditDashboard
  1187. {...RouteComponentPropsFixture()}
  1188. organization={testData.organization}
  1189. params={{orgId: 'org-slug', dashboardId: '1'}}
  1190. router={testData.router}
  1191. location={testData.router.location}
  1192. >
  1193. {null}
  1194. </ViewEditDashboard>,
  1195. {context: testData.routerContext, organization: testData.organization}
  1196. );
  1197. expect(await screen.findByText('Save')).toBeInTheDocument();
  1198. expect(screen.getByText('Cancel')).toBeInTheDocument();
  1199. expect(screen.getByRole('button', {name: 'Edit Dashboard'})).toBeDisabled();
  1200. });
  1201. it('ignores the order of selection of page filters to render unsaved filters', async () => {
  1202. const testProjects = [
  1203. ProjectFixture({id: '1', name: 'first', environments: ['alpha', 'beta']}),
  1204. ProjectFixture({id: '2', name: 'second', environments: ['alpha', 'beta']}),
  1205. ];
  1206. act(() => ProjectsStore.loadInitialData(testProjects));
  1207. MockApiClient.addMockResponse({
  1208. url: '/organizations/org-slug/projects/',
  1209. body: testProjects,
  1210. });
  1211. MockApiClient.addMockResponse({
  1212. url: '/organizations/org-slug/dashboards/1/',
  1213. body: DashboardFixture(widgets, {
  1214. id: '1',
  1215. title: 'Custom Errors',
  1216. filters: {},
  1217. environment: ['alpha', 'beta'],
  1218. }),
  1219. });
  1220. const testData = initializeOrg({
  1221. organization: OrganizationFixture({
  1222. features: [
  1223. 'global-views',
  1224. 'dashboards-basic',
  1225. 'dashboards-edit',
  1226. 'discover-query',
  1227. ],
  1228. }),
  1229. router: {
  1230. location: {
  1231. ...LocationFixture(),
  1232. query: {
  1233. environment: ['beta', 'alpha'], // Reversed order from saved dashboard
  1234. },
  1235. },
  1236. },
  1237. });
  1238. render(
  1239. <ViewEditDashboard
  1240. {...RouteComponentPropsFixture()}
  1241. organization={testData.organization}
  1242. params={{orgId: 'org-slug', dashboardId: '1'}}
  1243. router={testData.router}
  1244. location={testData.router.location}
  1245. >
  1246. {null}
  1247. </ViewEditDashboard>,
  1248. {context: testData.routerContext, organization: testData.organization}
  1249. );
  1250. await waitFor(() => expect(screen.queryAllByText('Loading\u2026')).toEqual([]));
  1251. await userEvent.click(screen.getByRole('button', {name: 'All Envs'}));
  1252. expect(screen.getByRole('row', {name: 'alpha'})).toHaveAttribute(
  1253. 'aria-selected',
  1254. 'true'
  1255. );
  1256. expect(screen.getByRole('row', {name: 'beta'})).toHaveAttribute(
  1257. 'aria-selected',
  1258. 'true'
  1259. );
  1260. // Save and Cancel should not appear because alpha, beta is the same as beta, alpha
  1261. expect(screen.queryByText('Save')).not.toBeInTheDocument();
  1262. expect(screen.queryByText('Cancel')).not.toBeInTheDocument();
  1263. });
  1264. it('uses releases from the URL query params', async function () {
  1265. const testData = initializeOrg({
  1266. organization: OrganizationFixture({
  1267. features: [
  1268. 'global-views',
  1269. 'dashboards-basic',
  1270. 'dashboards-edit',
  1271. 'discover-query',
  1272. ],
  1273. }),
  1274. router: {
  1275. location: {
  1276. ...LocationFixture(),
  1277. query: {
  1278. release: ['not-selected-1'],
  1279. },
  1280. },
  1281. },
  1282. });
  1283. render(
  1284. <ViewEditDashboard
  1285. {...RouteComponentPropsFixture()}
  1286. organization={testData.organization}
  1287. params={{orgId: 'org-slug', dashboardId: '1'}}
  1288. router={testData.router}
  1289. location={testData.router.location}
  1290. >
  1291. {null}
  1292. </ViewEditDashboard>,
  1293. {context: testData.routerContext, organization: testData.organization}
  1294. );
  1295. await screen.findByText(/not-selected-1/);
  1296. screen.getByText('Save');
  1297. screen.getByText('Cancel');
  1298. });
  1299. it('resets release in URL params', async function () {
  1300. MockApiClient.addMockResponse({
  1301. url: '/organizations/org-slug/dashboards/1/',
  1302. body: DashboardFixture(widgets, {
  1303. id: '1',
  1304. title: 'Custom Errors',
  1305. filters: {
  1306. release: ['abc'],
  1307. },
  1308. }),
  1309. });
  1310. const testData = initializeOrg({
  1311. organization: OrganizationFixture({
  1312. features: [
  1313. 'global-views',
  1314. 'dashboards-basic',
  1315. 'dashboards-edit',
  1316. 'discover-query',
  1317. ],
  1318. }),
  1319. router: {
  1320. location: {
  1321. ...LocationFixture(),
  1322. query: {
  1323. release: ['not-selected-1'],
  1324. },
  1325. },
  1326. },
  1327. });
  1328. render(
  1329. <ViewEditDashboard
  1330. {...RouteComponentPropsFixture()}
  1331. organization={testData.organization}
  1332. params={{orgId: 'org-slug', dashboardId: '1'}}
  1333. router={testData.router}
  1334. location={testData.router.location}
  1335. >
  1336. {null}
  1337. </ViewEditDashboard>,
  1338. {context: testData.routerContext, organization: testData.organization}
  1339. );
  1340. await screen.findByText(/not-selected-1/);
  1341. await userEvent.click(screen.getByText('Cancel'));
  1342. // release isn't used in the redirect
  1343. expect(browserHistory.replace).toHaveBeenCalledWith(
  1344. expect.objectContaining({
  1345. query: {
  1346. end: undefined,
  1347. environment: undefined,
  1348. project: undefined,
  1349. start: undefined,
  1350. statsPeriod: undefined,
  1351. utc: undefined,
  1352. },
  1353. })
  1354. );
  1355. });
  1356. it('reflects selections in the release filter in the query params', async function () {
  1357. MockApiClient.addMockResponse({
  1358. url: '/organizations/org-slug/releases/',
  1359. body: [
  1360. ReleaseFixture({
  1361. shortVersion: 'sentry-android-shop@1.2.0',
  1362. version: 'sentry-android-shop@1.2.0',
  1363. }),
  1364. ],
  1365. });
  1366. const testData = initializeOrg({
  1367. organization: OrganizationFixture({
  1368. features: [
  1369. 'global-views',
  1370. 'dashboards-basic',
  1371. 'dashboards-edit',
  1372. 'discover-query',
  1373. ],
  1374. }),
  1375. router: {
  1376. location: LocationFixture(),
  1377. },
  1378. });
  1379. render(
  1380. <ViewEditDashboard
  1381. {...RouteComponentPropsFixture()}
  1382. organization={testData.organization}
  1383. params={{orgId: 'org-slug', dashboardId: '1'}}
  1384. router={testData.router}
  1385. location={testData.router.location}
  1386. >
  1387. {null}
  1388. </ViewEditDashboard>,
  1389. {context: testData.routerContext, organization: testData.organization}
  1390. );
  1391. await userEvent.click(await screen.findByText('All Releases'));
  1392. await userEvent.click(screen.getByText('sentry-android-shop@1.2.0'));
  1393. await userEvent.click(document.body);
  1394. await waitFor(() => {
  1395. expect(browserHistory.push).toHaveBeenCalledWith(
  1396. expect.objectContaining({
  1397. query: expect.objectContaining({
  1398. release: ['sentry-android-shop@1.2.0'],
  1399. }),
  1400. })
  1401. );
  1402. });
  1403. });
  1404. it('persists release selections made during search requests that do not appear in default query', async function () {
  1405. // Default response
  1406. MockApiClient.addMockResponse({
  1407. url: '/organizations/org-slug/releases/',
  1408. body: [
  1409. ReleaseFixture({
  1410. shortVersion: 'sentry-android-shop@1.2.0',
  1411. version: 'sentry-android-shop@1.2.0',
  1412. }),
  1413. ],
  1414. });
  1415. // Mocked search results
  1416. MockApiClient.addMockResponse({
  1417. url: '/organizations/org-slug/releases/',
  1418. body: [
  1419. ReleaseFixture({
  1420. id: '9',
  1421. shortVersion: 'search-result',
  1422. version: 'search-result',
  1423. }),
  1424. ],
  1425. match: [MockApiClient.matchData({query: 's'})],
  1426. });
  1427. const testData = initializeOrg({
  1428. organization: OrganizationFixture({
  1429. features: [
  1430. 'global-views',
  1431. 'dashboards-basic',
  1432. 'dashboards-edit',
  1433. 'discover-basic',
  1434. 'discover-query',
  1435. ],
  1436. }),
  1437. router: {
  1438. location: LocationFixture(),
  1439. },
  1440. });
  1441. render(
  1442. <ViewEditDashboard
  1443. {...RouteComponentPropsFixture()}
  1444. organization={testData.organization}
  1445. params={{orgId: 'org-slug', dashboardId: '1'}}
  1446. router={testData.router}
  1447. location={testData.router.location}
  1448. >
  1449. {null}
  1450. </ViewEditDashboard>,
  1451. {context: testData.routerContext, organization: testData.organization}
  1452. );
  1453. await userEvent.click(await screen.findByText('All Releases'));
  1454. await userEvent.type(screen.getAllByPlaceholderText('Search\u2026')[2], 's');
  1455. await userEvent.click(await screen.findByRole('option', {name: 'search-result'}));
  1456. // Validate that after search is cleared, search result still appears
  1457. expect(await screen.findByText('Latest Release(s)')).toBeInTheDocument();
  1458. expect(screen.getByRole('option', {name: 'search-result'})).toBeInTheDocument();
  1459. });
  1460. });
  1461. });