diff --git a/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_list/product_menu_list.test.tsx b/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_list/product_menu_list.test.tsx index ad8a9dc93a..b161ed7957 100644 --- a/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_list/product_menu_list.test.tsx +++ b/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_list/product_menu_list.test.tsx @@ -3,6 +3,7 @@ import {shallow} from 'enzyme'; import React from 'react'; +import * as reactRedux from 'react-redux'; import type {UserProfile} from '@mattermost/types/users'; @@ -13,9 +14,14 @@ import {TestHelper} from 'utils/test_helper'; import ProductMenuList from './product_menu_list'; import type {Props as ProductMenuListProps} from './product_menu_list'; +jest.mock('react-redux', () => ({ + ...jest.requireActual('react-redux'), + useSelector: jest.fn(), +})); + describe('components/global/product_switcher_menu', () => { - // Necessary for components enhanced by HOCs due to issue with enzyme. - // See https://github.com/enzymejs/enzyme/issues/539 + let useSelectorMock: jest.Mock; + const getMenuWrapper = (props: ProductMenuListProps) => { const wrapper = shallow(); return wrapper.find(MenuGroup).shallow(); @@ -53,6 +59,11 @@ describe('components/global/product_switcher_menu', () => { }, }; + beforeEach(() => { + useSelectorMock = reactRedux.useSelector as jest.Mock; + useSelectorMock.mockReturnValue(true); + }); + test('should match snapshot with id', () => { const props = {...defaultProps, id: 'product-switcher-menu-test'}; const wrapper = shallow(); @@ -60,7 +71,10 @@ describe('components/global/product_switcher_menu', () => { }); test('should not render if the user is not logged in', () => { - const props = {...defaultProps, currentUser: undefined as unknown as UserProfile}; + const props = { + ...defaultProps, + currentUser: undefined as unknown as UserProfile, + }; const wrapper = shallow(); expect(wrapper.type()).toEqual(null); }); @@ -124,53 +138,81 @@ describe('components/global/product_switcher_menu', () => { expect(wrapper.find('#userGroups').prop('disabled')).toBe(true); }); + test('should hide RestrictedIndicator if user is not admin', () => { + useSelectorMock.mockReturnValueOnce(false); + + const props = { + ...defaultProps, + isStarterFree: true, + }; + + const wrapper = shallow(); + + expect(wrapper.find('RestrictedIndicator').exists()).toBe(false); + }); + describe('should show integrations', () => { it('when incoming webhooks enabled', () => { - const props = {...defaultProps, enableIncomingWebhooks: true}; + const props = { + ...defaultProps, + enableIncomingWebhooks: true, + }; const wrapper = shallow(); - expect(wrapper.find('#integrations').prop('show')).toBe(true); }); it('when outgoing webhooks enabled', () => { - const props = {...defaultProps, enableOutgoingWebhooks: true}; + const props = { + ...defaultProps, + enableOutgoingWebhooks: true, + }; const wrapper = shallow(); - expect(wrapper.find('#integrations').prop('show')).toBe(true); }); it('when slash commands enabled', () => { - const props = {...defaultProps, enableCommands: true}; + const props = { + ...defaultProps, + enableCommands: true, + }; const wrapper = getMenuWrapper(props); - expect(wrapper.find('#integrations').prop('show')).toBe(true); }); it('when oauth providers enabled', () => { - const props = {...defaultProps, enableOAuthServiceProvider: true}; + const props = { + ...defaultProps, + enableOAuthServiceProvider: true, + }; const wrapper = getMenuWrapper(props); - expect(wrapper.find('#integrations').prop('show')).toBe(true); }); it('when can manage system bots', () => { - const props = {...defaultProps, canManageSystemBots: true}; + const props = { + ...defaultProps, + canManageSystemBots: true, + }; const wrapper = getMenuWrapper(props); - expect(wrapper.find('#integrations').prop('show')).toBe(true); }); it('unless cannot manage integrations', () => { - const props = {...defaultProps, canManageIntegrations: false, enableCommands: true}; + const props = { + ...defaultProps, + canManageIntegrations: false, + enableCommands: true, + }; const wrapper = getMenuWrapper(props); - expect(wrapper.find('#integrations').prop('show')).toBe(false); }); it('should show integrations modal', () => { - const props = {...defaultProps, enableIncomingWebhooks: true}; + const props = { + ...defaultProps, + enableIncomingWebhooks: true, + }; const wrapper = getMenuWrapper(props); - wrapper.find('#integrations').simulate('click'); expect(wrapper).toMatchSnapshot(); }); diff --git a/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_list/product_menu_list.tsx b/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_list/product_menu_list.tsx index c72f55a434..c7c5f118ee 100644 --- a/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_list/product_menu_list.tsx +++ b/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_list/product_menu_list.tsx @@ -3,6 +3,7 @@ import React, {useEffect} from 'react'; import {useIntl} from 'react-intl'; +import {useSelector} from 'react-redux'; import { AccountMultipleOutlineIcon, @@ -15,6 +16,7 @@ import { import type {UserProfile} from '@mattermost/types/users'; import {Permissions} from 'mattermost-redux/constants'; +import {isCurrentUserSystemAdmin} from 'mattermost-redux/selectors/entities/users'; import AboutBuildModal from 'components/about_build_modal'; import {VisitSystemConsoleTour} from 'components/onboarding_tasks'; @@ -85,6 +87,7 @@ const ProductMenuList = (props: Props): JSX.Element | null => { enableCustomUserGroups, } = props; const {formatMessage} = useIntl(); + const isAdmin = useSelector(isCurrentUserSystemAdmin); useEffect(() => { props.actions.getPrevTrialLicense(); @@ -151,7 +154,7 @@ const ProductMenuList = (props: Props): JSX.Element | null => { text={formatMessage({id: 'navbar_dropdown.userGroups', defaultMessage: 'User Groups'})} icon={} disabled={isStarterFree} - sibling={(isStarterFree || isFreeTrial) && ( + sibling={(isAdmin && (isStarterFree || isFreeTrial)) && (