[MM-63802] Hide search team selector if user only member of one team (#30791)

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/new_search/new_search.tsx

@@ -9,7 +9,7 @@ import styled from 'styled-components';
 import {TrackCrossTeamSearchFeature, TrackCrossTeamSearchAllTeamsEvent, TrackCrossTeamSearchCurrentTeamEvent, TrackCrossTeamSearchDifferentTeamEvent} from 'mattermost-redux/constants/telemetry';
 import {getCurrentChannelNameForSearchShortcut} from 'mattermost-redux/selectors/entities/channels';
 import {getIsCrossTeamSearchEnabled} from 'mattermost-redux/selectors/entities/general';
-import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
+import {getCurrentTeamId, getMyTeams} from 'mattermost-redux/selectors/entities/teams';
 
 import {trackFeatureEvent} from 'actions/telemetry_actions';
 import {updateSearchTerms, showSearchResults, updateSearchType, updateSearchTeam} from 'actions/views/rhs';
@@ -114,6 +114,7 @@ const NewSearch = (): JSX.Element => {
     const pluginSearch = useSelector(getSearchButtons);
     const currentTeamId = useSelector(getCurrentTeamId);
     const crossTeamSearchEnabled = useSelector(getIsCrossTeamSearchEnabled);
+    const myTeams = useSelector(getMyTeams);
 
     const dispatch = useDispatch();
     const [focused, setFocused] = useState<boolean>(false);
@@ -318,6 +319,7 @@ const NewSearch = (): JSX.Element => {
                         initialSearchType={searchType}
                         initialSearchTeam={searchTeam}
                         crossTeamSearchEnabled={crossTeamSearchEnabled}
+                        myTeams={myTeams}
                     />
                 </PopoverStyled>
             )}

webapp/channels/src/components/new_search/search_box.test.tsx

@@ -3,6 +3,8 @@
 
 import React from 'react';
 
+import type {Team} from '@mattermost/types/teams';
+
 import {
     renderWithContext,
     screen,
@@ -19,6 +21,7 @@ describe('components/new_search/SearchBox', () => {
         initialSearchType: 'messages',
         initialSearchTeam: 'teamId',
         crossTeamSearchEnabled: true,
+        myTeams: [{id: 'team1', name: 'team1', display_name: 'Team 1', description: ''}] as Team[],
     };
 
     test('should have the focus on the input field', () => {
@@ -72,4 +75,44 @@ describe('components/new_search/SearchBox', () => {
         expect(screen.getByText('Text file')).toHaveClass('selected');
         expect(screen.getByText('Word Document')).not.toHaveClass('selected');
     });
+
+    test('should show team selector when there is more than one team', () => {
+        const props = {
+            ...baseProps,
+            myTeams: [
+                {id: 'team1', name: 'team1', display_name: 'Team 1', description: ''} as Team,
+                {id: 'team2', name: 'team2', display_name: 'Team 2', description: ''} as Team,
+            ],
+        };
+        renderWithContext(<SearchBox {...props}/>);
+
+        // The select team dropdown should be visible
+        const teamSelector = document.querySelector('div[data-testid="searchTeamSelector"]');
+        expect(teamSelector).toBeInTheDocument();
+    });
+
+    test('should not show team selector when there is only one team', () => {
+        // Base props already has one team
+        renderWithContext(<SearchBox {...baseProps}/>);
+
+        // The select team dropdown should not be visible
+        const teamSelector = document.querySelector('div[data-testid="searchTeamSelector"]');
+        expect(teamSelector).not.toBeInTheDocument();
+    });
+
+    test('should not show team selector when cross-team search is disabled', () => {
+        const props = {
+            ...baseProps,
+            crossTeamSearchEnabled: false,
+            myTeams: [
+                {id: 'team1', name: 'team1', display_name: 'Team 1', description: ''} as Team,
+                {id: 'team2', name: 'team2', display_name: 'Team 2', description: ''} as Team,
+            ],
+        };
+        renderWithContext(<SearchBox {...props}/>);
+
+        // The select team dropdown should not be visible
+        const teamSelector = document.querySelector('div[data-testid="searchTeamSelector"]');
+        expect(teamSelector).not.toBeInTheDocument();
+    });
 });

webapp/channels/src/components/new_search/search_box.tsx

@@ -5,6 +5,8 @@ import React, {useState, useRef, forwardRef, useCallback, useEffect} from 'react
 import {useIntl} from 'react-intl';
 import styled from 'styled-components';
 
+import type {Team} from '@mattermost/types/teams';
+
 import Constants from 'utils/constants';
 import * as Keyboard from 'utils/keyboard';
 import {escapeRegex} from 'utils/text_formatting';
@@ -25,6 +27,7 @@ type Props = {
     initialSearchType: string;
     initialSearchTeam: string;
     crossTeamSearchEnabled: boolean;
+    myTeams: Team[];
 };
 
 const SearchBoxContainer = styled.div`
@@ -73,7 +76,7 @@ const SearchTeamSelector = styled.div`
 
 const SearchBox = forwardRef(
     (
-        {onClose, onSearch, initialSearchTerms, initialSearchType, initialSearchTeam, crossTeamSearchEnabled}: Props,
+        {onClose, onSearch, initialSearchTerms, initialSearchType, initialSearchTeam, crossTeamSearchEnabled, myTeams}: Props,
         ref: React.Ref<HTMLDivElement>,
     ): JSX.Element => {
         const intl = useIntl();
@@ -83,6 +86,8 @@ const SearchBox = forwardRef(
         const [searchType, setSearchType] = useState<string>(initialSearchType || 'messages');
         const [selectedOption, setSelectedOption] = useState<number>(-1);
 
+        const hasMoreThanOneTeam = myTeams.length > 1;
+
         const inputRef = useRef<HTMLInputElement | null>(null);
 
         const [showFilterHaveBeenReset, setShowFilterHaveBeenReset] = useState(false);
@@ -282,8 +287,8 @@ const SearchBox = forwardRef(
                         searchType={searchType}
                         setSearchType={setSearchType}
                     />
-                    {crossTeamSearchEnabled && (
-                        <SearchTeamSelector>
+                    {crossTeamSearchEnabled && hasMoreThanOneTeam && (
+                        <SearchTeamSelector data-testid={'searchTeamSelector'}>
                             <SelectTeam
                                 selectedTeamId={searchTeam}
                                 onTeamSelected={changeSearchTeam}

webapp/channels/src/components/search_results/messages_or_files_selector.tsx

@@ -5,6 +5,8 @@ import React, {useRef} from 'react';
 import {FormattedMessage} from 'react-intl';
 import {useSelector} from 'react-redux';
 
+import {getMyTeams} from 'mattermost-redux/selectors/entities/teams';
+
 import {getSearchTeam} from 'selectors/rhs';
 
 import SelectTeam from 'components/new_search/select_team';
@@ -39,6 +41,8 @@ type DataSearchLiteral = typeof DataSearchTypes[keyof typeof DataSearchTypes];
 
 export default function MessagesOrFilesSelector(props: Props): JSX.Element {
     const searchTeam = useSelector((state: GlobalState) => getSearchTeam(state));
+    const myTeams = useSelector(getMyTeams);
+    const hasMoreThanOneTeam = myTeams.length > 1;
 
     // REFS to the tabs so there is ability to pass the custom A11y focus event
     const messagesTabRef = useRef<HTMLButtonElement>(null);
@@ -130,7 +134,7 @@ export default function MessagesOrFilesSelector(props: Props): JSX.Element {
                     </button>
                 )}
             </div>
-            {props.crossTeamSearchEnabled && (
+            {props.crossTeamSearchEnabled && hasMoreThanOneTeam && (
                 <div className='team-selector-container'>
                     <SelectTeam
                         selectedTeamId={searchTeam}