[FIX] Changes on department agents should mark form as dirty

client/views/omnichannel/departments/AddAgent.js

@@ -7,7 +7,7 @@ import { useToastMessageDispatch } from '../../../contexts/ToastMessagesContext'
 import { useTranslation } from '../../../contexts/TranslationContext';
 import { useEndpointAction } from '../../../hooks/useEndpointAction';
 
-function AddAgent({ agentList, setAgentList, ...props }) {
+function AddAgent({ agentList, setAgentsAdded, setAgentList, ...props }) {
 	const t = useTranslation();
 	const [userId, setUserId] = useState();
 	const getAgent = useEndpointAction('GET', `livechat/users/agent/${userId}`);
@@ -24,6 +24,7 @@ function AddAgent({ agentList, setAgentList, ...props }) {
 		if (agentList.filter((e) => e.agentId === user._id).length === 0) {
 			setAgentList([{ ...user, agentId: user._id }, ...agentList]);
 			setUserId();
+			setAgentsAdded((agents) => [...agents, { agentId: user._id }]);
 		} else {
 			dispatchToastMessage({ type: 'error', message: t('This_agent_was_already_selected') });
 		}

client/views/omnichannel/departments/AgentRow.js

@@ -6,7 +6,16 @@ import Count from './Count';
 import Order from './Order';
 import RemoveAgentButton from './RemoveAgentButton';
 
-const AgentRow = ({ agentId, username, name, avatarETag, mediaQuery, agentList, setAgentList }) => (
+const AgentRow = ({
+	agentId,
+	username,
+	name,
+	avatarETag,
+	mediaQuery,
+	agentList,
+	setAgentList,
+	setAgentsRemoved,
+}) => (
 	<Table.Row key={agentId} tabIndex={0} role='link' action qa-user-id={agentId}>
 		<Table.Cell withTruncatedText>
 			<Box display='flex' alignItems='center'>
@@ -38,7 +47,12 @@ const AgentRow = ({ agentId, username, name, avatarETag, mediaQuery, agentList,
 			<Order agentId={agentId} agentList={agentList} setAgentList={setAgentList} />
 		</Table.Cell>
 		<Table.Cell fontScale='p3' color='hint'>
-			<RemoveAgentButton agentId={agentId} agentList={agentList} setAgentList={setAgentList} />
+			<RemoveAgentButton
+				agentId={agentId}
+				agentList={agentList}
+				setAgentList={setAgentList}
+				setAgentsRemoved={setAgentsRemoved}
+			/>
 		</Table.Cell>
 	</Table.Row>
 );

client/views/omnichannel/departments/DepartmentsAgentsTable.js

@@ -6,7 +6,7 @@ import { useTranslation } from '../../../contexts/TranslationContext';
 import AddAgent from './AddAgent';
 import AgentRow from './AgentRow';
 
-function DepartmentsAgentsTable({ agents, setAgentListFinal }) {
+function DepartmentsAgentsTable({ agents, setAgentListFinal, setAgentsAdded, setAgentsRemoved }) {
 	const t = useTranslation();
 	const [agentList, setAgentList] = useState((agents && JSON.parse(JSON.stringify(agents))) || []);
 
@@ -16,7 +16,7 @@ function DepartmentsAgentsTable({ agents, setAgentListFinal }) {
 
 	return (
 		<>
-			<AddAgent agentList={agentList} setAgentList={setAgentList} />
+			<AddAgent agentList={agentList} setAgentList={setAgentList} setAgentsAdded={setAgentsAdded} />
 			<GenericTable
 				header={
 					<>
@@ -44,6 +44,7 @@ function DepartmentsAgentsTable({ agents, setAgentListFinal }) {
 						mediaQuery={mediaQuery}
 						agentList={agentList}
 						setAgentList={setAgentList}
+						setAgentsRemoved={setAgentsRemoved}
 						{...props}
 					/>
 				)}

client/views/omnichannel/departments/EditDepartment.js

@@ -57,6 +57,8 @@ function EditDepartment({ data, id, title, reload, allowedToForwardData }) {
 	const DepartmentBusinessHours = useDepartmentBusinessHours();
 	const AutoCompleteDepartment = useSelectForwardDepartment();
 	const [agentList, setAgentList] = useState([]);
+	const [agentsRemoved, setAgentsRemoved] = useState([]);
+	const [agentsAdded, setAgentsAdded] = useState([]);
 
 	const { department } = data || { department: {} };
 
@@ -257,6 +259,33 @@ function EditDepartment({ data, id, title, reload, allowedToForwardData }) {
 		[data.agents, agentList],
 	);
 
+	const agentsHaveChanged = () => {
+		let hasChanges = false;
+		if (agentList.length !== initialAgents.current.length) {
+			hasChanges = true;
+		}
+
+		if (agentsAdded.length > 0 && agentsRemoved.length > 0) {
+			hasChanges = true;
+		}
+
+		agentList.forEach((agent) => {
+			const existingAgent = initialAgents.current.find(
+				(initial) => initial.agentId === agent.agentId,
+			);
+			if (existingAgent) {
+				if (agent.count !== existingAgent.count) {
+					hasChanges = true;
+				}
+				if (agent.order !== existingAgent.order) {
+					hasChanges = true;
+				}
+			}
+		});
+
+		return hasChanges;
+	};
+
 	return (
 		<Page flexDirection='row'>
 			<Page>
@@ -265,7 +294,12 @@ function EditDepartment({ data, id, title, reload, allowedToForwardData }) {
 						<Button onClick={handleReturn}>
 							<Icon name='back' /> {t('Back')}
 						</Button>
-						<Button type='submit' form={formId} primary disabled={invalidForm && hasNewAgent}>
+						<Button
+							type='submit'
+							form={formId}
+							primary
+							disabled={invalidForm && hasNewAgent && !(id && agentsHaveChanged())}
+						>
 							{t('Save')}
 						</Button>
 					</ButtonGroup>
@@ -480,6 +514,8 @@ function EditDepartment({ data, id, title, reload, allowedToForwardData }) {
 								<DepartmentsAgentsTable
 									agents={data && data.agents}
 									setAgentListFinal={setAgentList}
+									setAgentsAdded={setAgentsAdded}
+									setAgentsRemoved={setAgentsRemoved}
 								/>
 							</Box>
 						</Field>

client/views/omnichannel/departments/RemoveAgentButton.js

@@ -7,7 +7,7 @@ import { useSetModal } from '../../../contexts/ModalContext';
 import { useToastMessageDispatch } from '../../../contexts/ToastMessagesContext';
 import { useTranslation } from '../../../contexts/TranslationContext';
 
-function RemoveAgentButton({ agentId, setAgentList, agentList }) {
+function RemoveAgentButton({ agentId, setAgentList, agentList, setAgentsRemoved }) {
 	const setModal = useSetModal();
 	const dispatchToastMessage = useToastMessageDispatch();
 	const t = useTranslation();
@@ -19,6 +19,7 @@ function RemoveAgentButton({ agentId, setAgentList, agentList }) {
 			setAgentList(newList);
 			dispatchToastMessage({ type: 'success', message: t('Agent_removed') });
 			setModal();
+			setAgentsRemoved((agents) => [...agents, { agentId }]);
 		};
 
 		setModal(