diff --git a/CHANGELOG.md b/CHANGELOG.md index 17c82b7..3e91d7e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## 3.6.0 (IN PROGRESS) + +### Features / Enhancements + +- Update tooltip to prevent opening drawer when selecting text (#235) + ## 3.5.0 (2024-07-25) ### Features / Enhancements diff --git a/package.json b/package.json index c27303a..2145fea 100644 --- a/package.json +++ b/package.json @@ -80,5 +80,5 @@ "test:e2e:docker": "docker compose --profile e2e up --exit-code-from test", "upgrade": "npm upgrade --save" }, - "version": "3.5.0" + "version": "3.6.0" } diff --git a/provisioning/dashboards/panels.json b/provisioning/dashboards/panels.json index 36a1d77..16080f1 100644 --- a/provisioning/dashboards/panels.json +++ b/provisioning/dashboards/panels.json @@ -79,19 +79,25 @@ "colors": "event", "dateFormat": "inherit", "defaultView": "month", - "descriptionField": "description", + "descriptionField": ["description"], + "displayFields": ["description", "labels", "links", "location", "text", "time"], "labelFields": ["slug", "version"], "locationField": "version", + "locationLabel": "", + "preformattedDescription": false, "quickLinks": false, "scrollToTime": { "hours": 0, "minutes": 0 }, + "showEventTooltip": true, + "showMonthTime": true, "textField": "name", "timeField": "updatedAt", + "timeRangeType": "default", "views": ["day", "week", "month", "work_week", "year", "agenda"] }, - "pluginVersion": "3.0.0", + "pluginVersion": "3.6.0", "targets": [ { "datasource": { @@ -163,8 +169,7 @@ "value": null } ] - }, - "unitScale": true + } }, "overrides": [ { diff --git a/src/components/BigEventContent/BigEventContent.test.tsx b/src/components/BigEventContent/BigEventContent.test.tsx index 55b69db..65723af 100644 --- a/src/components/BigEventContent/BigEventContent.test.tsx +++ b/src/components/BigEventContent/BigEventContent.test.tsx @@ -358,4 +358,71 @@ describe('Big Event Content', () => { expect(selectors.month(true)).not.toBeInTheDocument(); expect(selectors.agenda(true)).not.toBeInTheDocument(); }); + + describe('Click on Tooltip', () => { + it('Should call stopPropagation on tooltip body click', () => { + const onClick = jest.fn(); + + const eventStopPropagationSpy = jest.spyOn(Event.prototype, 'stopPropagation'); + const event = { + title: '123', + start: new Date('2020-02-02 02:00'), + end: new Date('2020-02-02 02:30'), + resource: { + location: 'Room', + labels: ['111', '222'], + links: [ + { + href: 'test.com', + title: 'Link 1', + onClick: onClick, + }, + ], + }, + }; + const options = { + ...defaultOptions, + event: event, + options: { + ...defaultOptions.options, + showEventTooltip: true, + }, + }; + + render( + getComponent({ + ...options, + isMonth: true, + }) + ); + + /** + * Check event + */ + expect(screen.getByText('123')).toBeInTheDocument(); + expect(selectors.month(true)).toBeInTheDocument(); + + /** + * Hover on element + */ + fireEvent.mouseEnter(selectors.month()); + + expect(screen.getByText('Link 1')).toBeInTheDocument(); + expect(selectors.tooltipContentWrap()).toBeInTheDocument(); + + fireEvent.click(selectors.tooltipContentWrap()); + + /** + * Call onClick on link should not be triggered + */ + expect(onClick).toHaveBeenCalledTimes(0); + + expect(eventStopPropagationSpy).toHaveBeenCalledTimes(2); + + /** + * Should not open Details Drawer + */ + expect(screen.queryByText('Event Details')).not.toBeInTheDocument(); + }); + }); }); diff --git a/src/components/BigEventContent/BigEventContent.tsx b/src/components/BigEventContent/BigEventContent.tsx index 707b1de..0f899da 100644 --- a/src/components/BigEventContent/BigEventContent.tsx +++ b/src/components/BigEventContent/BigEventContent.tsx @@ -147,15 +147,22 @@ export const BigEventContent: React.FC = ({ event, localizer, isMonth = f theme="info-alt" placement="auto" interactive - content={ - - } + content={() => ( +
{ + event.stopPropagation(); + }} + > + +
+ )} > {eventContentElement} diff --git a/src/constants/tests.ts b/src/constants/tests.ts index 7e23a07..fb3db35 100644 --- a/src/constants/tests.ts +++ b/src/constants/tests.ts @@ -50,6 +50,7 @@ export const TEST_IDS = { month: 'data-testid event-content month', longDuration: 'data-testid event-content long-duration', averageDuration: 'data-testid event-content average-duration', + tooltipContentWrap: 'data-testid event-content tooltip-content-wrap', }, eventDetails: { root: 'data-testid event-details',