Add tooltip to screen source names (#893)

mattermost · Nov 11, 2024 · f64e911 · f64e911
1 parent fefebc6
commit f64e911
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/e2e/tests/desktop.spec.ts b/e2e/tests/desktop.spec.ts
@@ -100,7 +100,7 @@ test.describe('desktop', () => {
                     message: [
                         {id: '1', name: 'source_1', thumbnailURL},
                         {id: '2', name: 'source_2', thumbnailURL},
-                        {id: '3', name: 'source_3', thumbnailURL},
+                        {id: '3', name: 'very very very very very long source name', thumbnailURL},
                     ],
                 },
                 window.location.origin);
@@ -113,9 +113,17 @@ test.describe('desktop', () => {
         await page.locator('#calls-widget-menu-screenshare').click();
         await expect(page.locator('#calls-screen-source-modal')).toBeVisible();
         expect(await page.locator('#calls-screen-source-modal').screenshot()).toMatchSnapshot('calls-screen-source-modal.png');
+
+        // Verify tooltip shows correctly
+        await page.getByText('very very').hover();
+        await expect(page.locator('#tooltip-screen-source-name')).toBeVisible();
+        await expect(page.locator('#tooltip-screen-source-name')).toContainText('very very very very very long source name');
+
         await page.locator('#calls-screen-source-modal button:has-text("source_2")').click();
+
         await page.locator('#calls-screen-source-modal button:has-text("Share")').click();
         await expect(page.locator('#calls-screen-source-modal')).toBeHidden();
+
         await devPage.leaveCall();
     });
 

diff --git a/webapp/src/components/screen_source_modal/component.tsx b/webapp/src/components/screen_source_modal/component.tsx
@@ -2,6 +2,7 @@ import './component.scss';
 
 import {DesktopCaptureSource} from '@mattermost/desktop-api';
 import React, {CSSProperties} from 'react';
+import {OverlayTrigger, Tooltip} from 'react-bootstrap';
 import {IntlShape} from 'react-intl';
 import CompassIcon from 'src/components/icons/compassIcon';
 import {logDebug, logErr} from 'src/log';
@@ -30,7 +31,7 @@ export default class ScreenSourceModal extends React.PureComponent<Props, State>
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
-            zIndex: 10000,
+            zIndex: 1000,
             background: 'rgba(0, 0, 0, 0.64)',
         },
         modal: {
@@ -133,7 +134,17 @@ export default class ScreenSourceModal extends React.PureComponent<Props, State>
                             src={source.thumbnailURL}
                         />
                     </div>
-                    <span style={this.style.sourceLabel as CSSProperties}>{source.name}</span>
+
+                    <OverlayTrigger
+                        placement='bottom'
+                        overlay={
+                            <Tooltip id='tooltip-screen-source-name'>
+                                {source.name}
+                            </Tooltip>
+                        }
+                    >
+                        <span style={this.style.sourceLabel as CSSProperties}>{source.name}</span>
+                    </OverlayTrigger>
                 </button>
             );
         });