fix(cypress): demo plugin (#36056)

webapp/channels/src/components/plugin_link_tooltip/index.test.tsx

@@ -94,6 +94,37 @@ describe('PluginLinkTooltip', () => {
         expect(screen.getByTestId('textarea')).toHaveFocus();
     });
 
+    test('should not block interaction with elements outside the tooltip', async () => {
+        renderWithContext(
+            <>
+                <textarea
+                    data-testid='textarea'
+                    defaultValue='some text'
+                />
+                <PluginLinkTooltip
+                    nodeAttributes={{
+                        href: 'https://example.com/tooltip',
+                    }}
+                >
+                    {'This is a link'}
+                </PluginLinkTooltip>
+                <div id={RootHtmlPortalId}/>
+            </>,
+            baseState,
+        );
+
+        // # Hover over the link to show the tooltip
+        await userEvent.hover(screen.getByText('This is a link'));
+        await waitFor(() => {
+            expect(screen.queryByText('This is a link tooltip')).toBeVisible();
+        });
+
+        // * Verify the overlay has pointer-events: none so it doesn't block clicks
+        const overlay = document.querySelector('.plugin-link-tooltip-floating-overlay') as HTMLElement;
+        expect(overlay).toBeInTheDocument();
+        expect(overlay.style.pointerEvents || getComputedStyle(overlay).pointerEvents).toBe('none');
+    });
+
     test('should not take focus when hovered without a tooltip', async () => {
         renderWithContext(
             <>

webapp/channels/src/components/plugin_link_tooltip/plugin_link_tooltip.scss

@@ -2,6 +2,11 @@
 
 .plugin-link-tooltip-floating-overlay {
     z-index: variables.$z-index-popover;
+    pointer-events: none;
+
+    > * {
+        pointer-events: auto;
+    }
 }
 
 // This is as per UX guidelines what the container of the

webapp/channels/src/components/post_markdown/index.test.ts

@@ -5,7 +5,21 @@ import {TestHelper} from 'utils/test_helper';
 
 import type {GlobalState} from 'types/store';
 
-import {makeGetMentionKeysForPost} from './index';
+import {hasPluginTooltips, makeGetMentionKeysForPost} from './index';
+
+describe('hasPluginTooltips', () => {
+    it('should be false when LinkTooltip is an empty array', () => {
+        expect(hasPluginTooltips([])).toBe(false);
+    });
+
+    it('should be false when LinkTooltip is undefined', () => {
+        expect(hasPluginTooltips(undefined)).toBe(false);
+    });
+
+    it('should be true when LinkTooltip has registered components', () => {
+        expect(hasPluginTooltips([{id: 'test', pluginId: 'com.example', component: () => null}])).toBe(true);
+    });
+});
 
 describe('makeGetMentionKeysForPost', () => {
     const channel = TestHelper.getChannelMock({});

webapp/channels/src/components/post_markdown/index.ts

@@ -56,6 +56,10 @@ export function makeGetMentionKeysForPost(): (
     );
 }
 
+export function hasPluginTooltips(linkTooltip?: unknown[]): boolean {
+    return Boolean(linkTooltip?.length);
+}
+
 function makeMapStateToProps() {
     const getMentionKeysForPost = makeGetMentionKeysForPost();
 
@@ -73,7 +77,7 @@ function makeMapStateToProps() {
             channel,
             currentTeam,
             pluginHooks: state.plugins.components.MessageWillFormat,
-            hasPluginTooltips: Boolean(state.plugins.components.LinkTooltip),
+            hasPluginTooltips: hasPluginTooltips(state.plugins.components.LinkTooltip),
             isUserCanManageMembers: channel && canManageMembers(state, channel),
             mentionKeys: getMentionKeysForPost(state, ownProps.post, channel),
             highlightKeys: getHighlightWithoutNotificationKeys(state),