Update tooltip to prevent opening drawer when selecting text (#235)

* tooltip stopPropagation click * update test * Update version * Update panels.json --------- Co-authored-by: Mikhail Volkov <[email protected]>
VolkovLabs · Aug 13, 2024 · f173deb · f173deb
1 parent 4a4dc1a
commit f173deb
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -147,15 +147,22 @@ export const BigEventContent: React.FC<Props> = ({ event, localizer, isMonth = f
       theme="info-alt"
       placement="auto"
       interactive
-      content={
-        <EventDetails
-          event={activeEvent}
-          fields={options.displayFields}
-          locationLabel={options.locationLabel}
-          preformattedDescription={options.preformattedDescription}
-          isForTooltip
-        />
-      }
+      content={() => (
+        <div
+          data-testid={TEST_IDS.eventContent.tooltipContentWrap}
+          onClick={(event) => {
+            event.stopPropagation();
+          }}
+        >
+          <EventDetails
+            event={activeEvent}
+            fields={options.displayFields}
+            locationLabel={options.locationLabel}
+            preformattedDescription={options.preformattedDescription}
+            isForTooltip
+          />
+        </div>
+      )}
     >
       {eventContentElement}
     </Tooltip>

diff --git 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',