MM-59540 Ensure user has invite team permission in order to change setting (#28670)

* ensure user has invite team permission in order to change setting

* add tests and handle UI

* lint fixes

* revert changes to invite section input

* update tests

* revert bad merge

---------

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

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

@@ -3,6 +3,10 @@
 
 import {connect} from 'react-redux';
 
+import {Permissions} from 'mattermost-redux/constants';
+import {haveITeamPermission} from 'mattermost-redux/selectors/entities/roles';
+import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
+
 import {isModalOpen} from 'selectors/views/modals';
 
 import {ModalIdentifiers} from 'utils/constants';
@@ -12,9 +16,12 @@ import type {GlobalState} from 'types/store';
 import TeamSettingsModal from './team_settings_modal';
 
 function mapStateToProps(state: GlobalState) {
+    const teamId = getCurrentTeamId(state);
+    const canInviteUsers = haveITeamPermission(state, teamId, Permissions.INVITE_USER);
     const modalId = ModalIdentifiers.TEAM_SETTINGS;
     return {
         show: isModalOpen(state, modalId),
+        canInviteUsers,
     };
 }
 

webapp/channels/src/components/team_settings_modal/team_settings_modal.test.tsx

@@ -10,8 +10,8 @@ import {renderWithContext} from 'tests/react_testing_utils';
 
 describe('components/team_settings_modal', () => {
     const baseProps = {
-        isCloud: false,
         onExited: jest.fn(),
+        canInviteUsers: true,
     };
 
     test('should hide the modal when the close button is clicked', async () => {
@@ -25,5 +25,31 @@ describe('components/team_settings_modal', () => {
         fireEvent.click(screen.getByText('Close'));
         expect(modal.className).toBe('fade modal');
     });
+
+    test('should display access tab when can invite users', async () => {
+        const props = {...baseProps, canInviteUsers: true};
+        renderWithContext(
+            <TeamSettingsModal
+                {...props}
+            />,
+        );
+        const infoButton = screen.getByRole('tab', {name: 'info'});
+        expect(infoButton).toBeDefined();
+        const accessButton = screen.getByRole('tab', {name: 'access'});
+        expect(accessButton).toBeDefined();
+    });
+
+    test('should not display access tab when can not invite users', async () => {
+        const props = {...baseProps, canInviteUsers: false};
+        renderWithContext(
+            <TeamSettingsModal
+                {...props}
+            />,
+        );
+        const tabs = screen.getAllByRole('tab');
+        expect(tabs.length).toEqual(1);
+        const infoButton = screen.getByRole('tab', {name: 'info'});
+        expect(infoButton).toBeDefined();
+    });
 });
 

webapp/channels/src/components/team_settings_modal/team_settings_modal.tsx

@@ -12,9 +12,10 @@ const SettingsSidebar = React.lazy(() => import('components/settings_sidebar'));
 
 type Props = {
     onExited: () => void;
+    canInviteUsers: boolean;
 }
 
-const TeamSettingsModal = ({onExited}: Props) => {
+const TeamSettingsModal = ({onExited, canInviteUsers}: Props) => {
     const [activeTab, setActiveTab] = useState('info');
     const [show, setShow] = useState<boolean>(true);
     const [hasChanges, setHasChanges] = useState<boolean>(false);
@@ -49,8 +50,10 @@ const TeamSettingsModal = ({onExited}: Props) => {
 
     const tabs = [
         {name: 'info', uiName: formatMessage({id: 'team_settings_modal.infoTab', defaultMessage: 'Info'}), icon: 'icon icon-information-outline', iconTitle: formatMessage({id: 'generic_icons.info', defaultMessage: 'Info Icon'})},
-        {name: 'access', uiName: formatMessage({id: 'team_settings_modal.accessTab', defaultMessage: 'Access'}), icon: 'icon icon-account-multiple-outline', iconTitle: formatMessage({id: 'generic_icons.member', defaultMessage: 'Member Icon'})},
     ];
+    if (canInviteUsers) {
+        tabs.push({name: 'access', uiName: formatMessage({id: 'team_settings_modal.accessTab', defaultMessage: 'Access'}), icon: 'icon icon-account-multiple-outline', iconTitle: formatMessage({id: 'generic_icons.member', defaultMessage: 'Member Icon'})});
+    }
 
     return (
         <Modal