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

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