fix(team): disable team leader setting when external auth sync is enabled [EE-3579] (#7852)

app/portainer/react/components/index.ts

@@ -147,6 +147,7 @@ export const componentsModule = angular
       'name',
       'placeholder',
       'teams',
+      'disabled',
     ])
   )
   .component(

app/portainer/views/users/users.html

@@ -118,9 +118,20 @@
                 data-cy="'user-teamSelect'"
                 on-change="(onChangeTeamIds)"
                 input-id="'teams-selector'"
+                disabled="teamSync"
               ></teams-selector>
             </div>
           </div>
+          <div class="form-group" ng-if="teamSync">
+            <div class="col-sm-12">
+              <span class="small">
+                <p class="small text-muted vertical-center">
+                  <pr-icon icon="'alert-circle'" feather="true" class-name="'icon-warning =vertical-center'"></pr-icon>
+                  The team leader feature is disabled as external authentication is currently enabled with team sync.
+                </p>
+              </span>
+            </div>
+          </div>
           <!-- !teams -->
           <div class="form-group" ng-if="isAdmin && !formValues.Administrator && formValues.Teams.length === 0">
             <div class="col-sm-12">

app/portainer/views/users/usersController.js

@@ -131,6 +131,7 @@ angular.module('portainer.app').controller('UsersController', [
           $scope.teams = _.orderBy(data.teams, 'Name', 'asc');
           $scope.AuthenticationMethod = data.settings.AuthenticationMethod;
           $scope.requiredPasswordLength = data.settings.RequiredPasswordLength;
+          $scope.teamSync = data.settings.TeamSync;
         })
         .catch(function error(err) {
           Notifications.error('Failure', err, 'Unable to retrieve users and teams');

app/react/components/TeamsSelector/TeamsSelector.tsx

@@ -10,6 +10,7 @@ interface Props {
   dataCy?: string;
   inputId?: string;
   placeholder?: string;
+  disabled?: boolean;
 }
 
 export function TeamsSelector({
@@ -20,6 +21,7 @@ export function TeamsSelector({
   dataCy,
   inputId,
   placeholder,
+  disabled,
 }: Props) {
   const options = teams.map((team) => ({ label: team.Name, value: team.Id }));
 
@@ -33,6 +35,7 @@ export function TeamsSelector({
       data-cy={dataCy}
       inputId={inputId}
       placeholder={placeholder}
+      disabled={disabled}
     />
   );
 }

app/react/components/UsersSelector/UsersSelector.tsx

@@ -10,6 +10,7 @@ interface Props {
   dataCy?: string;
   inputId?: string;
   placeholder?: string;
+  disabled?: boolean;
 }
 
 export function UsersSelector({
@@ -20,6 +21,7 @@ export function UsersSelector({
   dataCy,
   inputId,
   placeholder,
+  disabled,
 }: Props) {
   return (
     <Select
@@ -36,6 +38,7 @@ export function UsersSelector({
       data-cy={dataCy}
       inputId={inputId}
       placeholder={placeholder}
+      isDisabled={disabled}
     />
   );
 }

app/react/portainer/users/teams/ListView/CreateTeamForm/CreateTeamForm.tsx

@@ -5,12 +5,14 @@ import { useReducer } from 'react';
 import { Icon } from '@/react/components/Icon';
 import { User } from '@/portainer/users/types';
 import { notifySuccess } from '@/portainer/services/notifications';
+import { usePublicSettings } from '@/react/portainer/settings/queries';
 
 import { FormControl } from '@@/form-components/FormControl';
 import { Widget } from '@@/Widget';
 import { Input } from '@@/form-components/Input';
 import { UsersSelector } from '@@/UsersSelector';
 import { LoadingButton } from '@@/buttons/LoadingButton';
+import { TextTip } from '@@/Tip/TextTip';
 
 import { createTeam } from '../../teams.service';
 import { Team } from '../../types';
@@ -26,6 +28,9 @@ interface Props {
 export function CreateTeamForm({ users, teams }: Props) {
   const addTeamMutation = useAddTeamMutation();
   const [formKey, incFormKey] = useReducer((state: number) => state + 1, 0);
+  const teamSyncQuery = usePublicSettings<boolean>({
+    select: (settings) => settings.TeamSync,
+  });
 
   const initialValues = {
     name: '',
@@ -95,10 +100,22 @@ export function CreateTeamForm({ users, teams }: Props) {
                         dataCy="team-teamLeaderSelect"
                         inputId="users-input"
                         placeholder="Select one or more team leaders"
+                        disabled={teamSyncQuery.data}
                       />
                     </FormControl>
                   )}
 
+                  {teamSyncQuery.data && (
+                    <div className="form-group">
+                      <div className="col-sm-12">
+                        <TextTip color="orange">
+                          The team leader feature is disabled as external
+                          authentication is currently enabled with team sync.
+                        </TextTip>
+                      </div>
+                    </div>
+                  )}
+
                   <div className="form-group">
                     <div className="col-sm-12">
                       <LoadingButton