;
describe('components/ProductMenuItem', () => {
const defaultProps: ProductMenuItemProps = {
@@ -75,14 +76,21 @@ describe('components/ProductMenuItem', () => {
expect(svgElements.length).toBe(2);
});
- test('should not show check icon when active is false', () => {
+ test('should show open in new tab button when active is false', () => {
renderWithContext(
);
- const menuItem = screen.getByRole('menuitem');
+ expect(screen.getByLabelText('Open in new tab')).toBeInTheDocument();
+ });
- // When not active, there should only be one SVG element: the product icon
- const svgElements = menuItem.querySelectorAll('svg');
- expect(svgElements.length).toBe(1);
+ test('should not show open in new tab button when active is true', () => {
+ const props: ProductMenuItemProps = {
+ ...defaultProps,
+ active: true,
+ };
+
+ renderWithContext(
);
+
+ expect(screen.queryByLabelText('Open in new tab')).not.toBeInTheDocument();
});
test('should call onClick when clicked', async () => {
@@ -99,6 +107,24 @@ describe('components/ProductMenuItem', () => {
expect(onClick).toHaveBeenCalledTimes(1);
});
+ test('should open destination in new tab when open in new tab button is clicked', async () => {
+ const onClick = jest.fn();
+ const windowOpenSpy = jest.spyOn(window, 'open').mockImplementation();
+ const props: ProductMenuItemProps = {
+ ...defaultProps,
+ onClick,
+ };
+
+ renderWithContext(
);
+
+ await userEvent.click(screen.getByLabelText('Open in new tab'), {pointerEventsCheck: 0});
+
+ expect(windowOpenSpy).toHaveBeenCalledWith('/test-destination', '_blank', 'noopener,noreferrer');
+ expect(onClick).toHaveBeenCalledTimes(1);
+
+ windowOpenSpy.mockRestore();
+ });
+
test('should render tour tip when provided', () => {
const tourTipContent = 'Tour tip content';
const TourTip =
{tourTipContent}
;
diff --git a/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_item/product_menu_item.tsx b/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_item/product_menu_item.tsx
index c343a077d6e..c97cd34284c 100644
--- a/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_item/product_menu_item.tsx
+++ b/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_item/product_menu_item.tsx
@@ -1,13 +1,16 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
-import React from 'react';
+import React, {useCallback} from 'react';
+import {useIntl} from 'react-intl';
import {Link} from 'react-router-dom';
import styled from 'styled-components';
-import glyphMap, {CheckIcon} from '@mattermost/compass-icons/components';
+import glyphMap, {CheckIcon, OpenInNewIcon} from '@mattermost/compass-icons/components';
import type {IconGlyphTypes} from '@mattermost/compass-icons/IconGlyphs';
+import WithTooltip from 'components/with_tooltip';
+
export interface ProductMenuItemProps {
destination: string;
icon: IconGlyphTypes | React.ReactNode;
@@ -19,6 +22,34 @@ export interface ProductMenuItemProps {
id?: string;
}
+const MenuItemTextContainer = styled.div`
+ margin-left: 8px;
+ flex-grow: 1;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 20px;
+`;
+
+const OpenInNewTabButton = styled.button`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: transparent;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ color: rgba(var(--center-channel-color-rgb), 0.56);
+ padding: 6px !important;
+ margin-right: -6px;
+ opacity: 0;
+ pointer-events: none;
+
+ &:hover {
+ background: rgba(var(--center-channel-color-rgb), 0.08);
+ color: rgba(var(--center-channel-color-rgb), 0.72);
+ }
+`;
+
const MenuItem = styled(Link)`
&& {
text-decoration: none;
@@ -43,19 +74,24 @@ const MenuItem = styled(Link)`
button {
padding: 0 6px;
}
-`;
-const MenuItemTextContainer = styled.div`
- margin-left: 8px;
- flex-grow: 1;
- font-weight: 600;
- font-size: 14px;
- line-height: 20px;
+ &:hover ${OpenInNewTabButton} {
+ opacity: 1;
+ pointer-events: auto;
+ }
`;
const ProductMenuItem = ({icon, destination, text, active, onClick, tourTip, id}: ProductMenuItemProps): JSX.Element => {
+ const {formatMessage} = useIntl();
const ProductIcon = typeof icon === 'string' ? glyphMap[icon as IconGlyphTypes] : null;
+ const handleOpenInNewTab = useCallback((e: React.MouseEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+ window.open(destination, '_blank', 'noopener,noreferrer');
+ onClick();
+ }, [destination, onClick]);
+
return (
{text}
- {active && (
+ {active ? (
+
+
+
+
)}
{tourTip || null}
diff --git a/webapp/channels/src/components/search_results/search_results.test.tsx b/webapp/channels/src/components/search_results/search_results.test.tsx
index af6e9a55993..629c2e4dfc2 100644
--- a/webapp/channels/src/components/search_results/search_results.test.tsx
+++ b/webapp/channels/src/components/search_results/search_results.test.tsx
@@ -6,7 +6,7 @@ import React from 'react';
import SearchResults, {arePropsEqual} from 'components/search_results/search_results';
-import {renderWithContext, screen} from 'tests/react_testing_utils';
+import {renderWithContext} from 'tests/react_testing_utils';
import {getHistory} from 'utils/browser_history';
import {popoutRhsSearch} from 'utils/popouts/popout_windows';
import {TestHelper} from 'utils/test_helper';
@@ -168,18 +168,6 @@ describe('components/SearchResults', () => {
});
});
- describe('handleChannelNameClick', () => {
- test('should navigate to channel URL when channel display name is clicked', () => {
- const pushMock = jest.fn();
- jest.mocked(getHistory).mockReturnValue({push: pushMock} as any);
-
- renderSearchResults({channelDisplayName: 'Test Channel'});
- screen.getByText('Test Channel').click();
-
- expect(pushMock).toHaveBeenCalledWith(`/${team.name}/channels/${channel.name}`);
- });
- });
-
describe('arePropsEqual', () => {
const result1 = {test: 'test'};
const result2 = {test: 'test'};
diff --git a/webapp/channels/src/components/search_results/search_results.tsx b/webapp/channels/src/components/search_results/search_results.tsx
index 17f62bc6301..e702a7a0e13 100644
--- a/webapp/channels/src/components/search_results/search_results.tsx
+++ b/webapp/channels/src/components/search_results/search_results.tsx
@@ -28,7 +28,6 @@ import SearchHint from 'components/search_hint/search_hint';
import SearchResultsHeader from 'components/search_results_header';
import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
-import {getHistory} from 'utils/browser_history';
import {searchHintOptions, DataSearchTypes, RHSStates} from 'utils/constants';
import {isFileAttachmentsEnabled} from 'utils/file_utils';
import {popoutRhsSearch} from 'utils/popouts/popout_windows';
@@ -268,12 +267,6 @@ const SearchResults: React.FC
= (props: Props): JSX.Element => {
);
}, [isMentionSearch, isFlaggedPosts, isPinnedPosts, isChannelFiles, intl, searchTerms, searchType, currentTeam?.name, currentChannel?.name, searchTeamId]);
- const handleChannelNameClick = useCallback(() => {
- if (currentTeam?.name && currentChannel?.name) {
- getHistory().push(`/${currentTeam.name}/channels/${currentChannel.name}`);
- }
- }, [currentTeam?.name, currentChannel?.name]);
-
switch (true) {
case isLoading:
contentItems = (
@@ -390,14 +383,7 @@ const SearchResults: React.FC = (props: Props): JSX.Element => {
{formattedTitle}
- {props.channelDisplayName &&
-
- {props.channelDisplayName}
-
- }
+ {props.channelDisplayName && {props.channelDisplayName}
}
{isMessagesSearch &&