Fix parallel enable/disable requests ending up in limbo. (#138021)

x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_list_table/columns.tsx

@@ -33,6 +33,7 @@ export function getMonitorListColumns({
   errorSummariesById,
   canEditSynthetics,
   reloadPage,
+  loading,
   syntheticsMonitors,
 }: {
   basePath: string;
@@ -41,6 +42,7 @@ export function getMonitorListColumns({
   errorSummariesById: Map<string, Ping>;
   canEditSynthetics: boolean;
   syntheticsMonitors: EncryptedSyntheticsSavedMonitor[];
+  loading: boolean;
   reloadPage: () => void;
 }) {
   const getIsMonitorUnHealthy = (monitor: EncryptedSyntheticsSavedMonitor) => {
@@ -132,7 +134,12 @@ export function getMonitorListColumns({
         defaultMessage: 'Enabled',
       }),
       render: (_enabled: boolean, monitor: EncryptedSyntheticsSavedMonitor) => (
-        <MonitorEnabled id={monitor.id} monitor={monitor} reloadPage={reloadPage} />
+        <MonitorEnabled
+          id={monitor.id}
+          monitor={monitor}
+          reloadPage={reloadPage}
+          isSwitchable={!loading}
+        />
       ),
     },
     {

x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_list_table/monitor_enabled.tsx

@@ -5,8 +5,9 @@
  * 2.0.
  */
 
-import { EuiSwitch, EuiSwitchEvent, EuiLoadingSpinner } from '@elastic/eui';
 import React, { useMemo } from 'react';
+import { EuiSwitch, EuiSwitchEvent, EuiLoadingSpinner } from '@elastic/eui';
+import { euiStyled } from '@kbn/kibana-react-plugin/common';
 import { FETCH_STATUS } from '@kbn/observability-plugin/public';
 import { useCanEditSynthetics } from '../../../../../../hooks/use_capabilities';
 import { ConfigKey, EncryptedSyntheticsMonitor } from '../../../../../../../common/runtime_types';
@@ -18,9 +19,16 @@ interface Props {
   monitor: EncryptedSyntheticsMonitor;
   reloadPage: () => void;
   initialLoading?: boolean;
+  isSwitchable?: boolean;
 }
 
-export const MonitorEnabled = ({ id, monitor, reloadPage, initialLoading }: Props) => {
+export const MonitorEnabled = ({
+  id,
+  monitor,
+  reloadPage,
+  initialLoading = false,
+  isSwitchable = true,
+}: Props) => {
   const isDisabled = !useCanEditSynthetics();
 
   const monitorName = monitor[ConfigKey.NAME];
@@ -51,7 +59,7 @@ export const MonitorEnabled = ({ id, monitor, reloadPage, initialLoading }: Prop
       {isLoading || initialLoading ? (
         <EuiLoadingSpinner size="m" />
       ) : (
-        <EuiSwitch
+        <SwitchWithCursor
           compressed={true}
           checked={enabled}
           disabled={isLoading || isDisabled}
@@ -59,9 +67,16 @@ export const MonitorEnabled = ({ id, monitor, reloadPage, initialLoading }: Prop
           label={enabled ? labels.DISABLE_MONITOR_LABEL : labels.ENABLE_MONITOR_LABEL}
           title={enabled ? labels.DISABLE_MONITOR_LABEL : labels.ENABLE_MONITOR_LABEL}
           data-test-subj="syntheticsIsMonitorEnabled"
+          isSwitchable={isSwitchable}
           onChange={handleEnabledChange}
         />
       )}
     </>
   );
 };
+
+const SwitchWithCursor = euiStyled(EuiSwitch)<{ isSwitchable: boolean }>`
+  & > button {
+    cursor: ${({ isSwitchable }) => (isSwitchable ? undefined : 'not-allowed')};
+  }
+`;

x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_list_table/monitor_list.tsx

@@ -111,6 +111,7 @@ export const MonitorList = ({
     errorSummariesById,
     canEditSynthetics,
     syntheticsMonitors,
+    loading,
     reloadPage,
   });
 

x-pack/plugins/synthetics/public/apps/synthetics/state/monitor_list/effects.ts

@@ -7,7 +7,7 @@
 
 import { IHttpFetchError } from '@kbn/core-http-browser';
 import { PayloadAction } from '@reduxjs/toolkit';
-import { call, put, takeLeading } from 'redux-saga/effects';
+import { call, put, takeEvery, takeLeading } from 'redux-saga/effects';
 import { fetchEffectFactory } from '../utils/fetch_effect';
 import {
   fetchMonitorListAction,
@@ -30,7 +30,7 @@ export function* fetchMonitorListEffect() {
 }
 
 export function* upsertMonitorEffect() {
-  yield takeLeading(
+  yield takeEvery(
     fetchUpsertMonitorAction,
     function* (action: PayloadAction<UpsertMonitorRequest>): Generator {
       try {