[8.x] [Synthetics] Refactor bulk delete monitor and params routes !! (#195420)

docs/api/synthetics/monitors/delete-monitor-api.asciidoc

@@ -17,17 +17,13 @@ Deletes one or more monitors from the Synthetics app.
 You must have `all` privileges for the *Synthetics* feature in the *{observability}* section of the
 <<kibana-feature-privileges,{kib} feature privileges>>.
 
-You must have `all` privileges for the *Synthetics* feature in the *{observability}* section of the
-<<kibana-feature-privileges,{kib} feature privileges>>.
-
 
 [[delete-monitor-api-path-params]]
 === {api-path-parms-title}
 
 `config_id`::
 (Required, string) The ID of the monitor that you want to delete.
 
-
 Here is an example of a DELETE request to delete a monitor by ID:
 
 [source,sh]
@@ -37,7 +33,7 @@ DELETE /api/synthetics/monitors/monitor1-id
 
 ==== Bulk Delete Monitors
 
-You can delete multiple monitors by sending a list of config ids to a DELETE request to the `/api/synthetics/monitors` endpoint.
+You can delete multiple monitors by sending a list of config ids to a POST request to the `/api/synthetics/monitors/_bulk_delete` endpoint.
 
 
 [[monitors-delete-request-body]]
@@ -49,11 +45,11 @@ The request body should contain an array of monitors IDs that you want to delete
 (Required, array of strings) An array of monitor IDs to delete.
 
 
-Here is an example of a DELETE request to delete a list of monitors by ID:
+Here is an example of a POST request to delete a list of monitors by ID:
 
 [source,sh]
 --------------------------------------------------
-DELETE /api/synthetics/monitors
+POST /api/synthetics/monitors/_bulk_delete
 {
   "ids": [
     "monitor1-id",

docs/api/synthetics/params/delete-param.asciidoc

@@ -8,9 +8,9 @@ Deletes one or more parameters from the Synthetics app.
 
 === {api-request-title}
 
-`DELETE <kibana host>:<port>/api/synthetics/params`
+`DELETE <kibana host>:<port>/api/synthetics/params/<param_id>`
 
-`DELETE <kibana host>:<port>/s/<space_id>/api/synthetics/params`
+`DELETE <kibana host>:<port>/s/<space_id>/api/synthetics/params/<param_id>`
 
 === {api-prereq-title}
 
@@ -20,26 +20,19 @@ You must have `all` privileges for the *Synthetics* feature in the *{observabili
 You must have `all` privileges for the *Synthetics* feature in the *{observability}* section of the
 <<kibana-feature-privileges,{kib} feature privileges>>.
 
-[[parameters-delete-request-body]]
-==== Request Body
+[[parameters-delete-path-param]]
+==== Path Parameters
 
 The request body should contain an array of parameter IDs that you want to delete.
 
-`ids`::
-(Required, array of strings) An array of parameter IDs to delete.
+`param_id`::
+(Required, string) An id of parameter to delete.
 
-
-Here is an example of a DELETE request to delete a list of parameters by ID:
+Here is an example of a DELETE request to delete a parameter by its ID:
 
 [source,sh]
 --------------------------------------------------
-DELETE /api/synthetics/params
-{
-  "ids": [
-    "param1-id",
-    "param2-id"
-  ]
-}
+DELETE /api/synthetics/params/param_id1
 --------------------------------------------------
 
 [[parameters-delete-response-example]]
@@ -58,10 +51,21 @@ Here's an example response for deleting multiple parameters:
   {
     "id": "param1-id",
     "deleted": true
-  },
-  {
-    "id": "param2-id",
-    "deleted": true
   }
 ]
---------------------------------------------------
+--------------------------------------------------
+
+==== Bulk delete parameters
+To delete multiple parameters, you can send a POST request to `/api/synthetics/params/_bulk_delete`  with an array of parameter IDs to delete via body.
+
+Here is an example of a POST request to delete multiple parameters:
+
+[source,sh]
+--------------------------------------------------
+POST /api/synthetics/params/_bulk_delete
+{
+  "ids": ["param1-id", "param2-id"]
+}
+--------------------------------------------------
+
+

x-pack/plugins/observability_solution/synthetics/common/runtime_types/monitor_management/synthetics_params.ts

@@ -19,6 +19,8 @@ export const SyntheticsParamsReadonlyCodec = t.intersection([
   }),
 ]);
 
+export const SyntheticsParamsReadonlyCodecList = t.array(SyntheticsParamsReadonlyCodec);
+
 export type SyntheticsParamsReadonly = t.TypeOf<typeof SyntheticsParamsReadonlyCodec>;
 
 export const SyntheticsParamsCodec = t.intersection([

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/settings/global_params/delete_param.tsx

@@ -5,16 +5,17 @@
  * 2.0.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { EuiConfirmModal } from '@elastic/eui';
-import { FETCH_STATUS, useFetcher } from '@kbn/observability-shared-plugin/public';
-import { toMountPoint } from '@kbn/react-kibana-mount';
 import { i18n } from '@kbn/i18n';
 
-import { useDispatch } from 'react-redux';
-import { getGlobalParamAction, deleteGlobalParams } from '../../../state/global_params';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  getGlobalParamAction,
+  deleteGlobalParamsAction,
+  selectGlobalParamState,
+} from '../../../state/global_params';
 import { syncGlobalParamsAction } from '../../../state/settings';
-import { kibanaService } from '../../../../../utils/kibana_service';
 import { NO_LABEL, YES_LABEL } from '../../monitors_page/management/monitor_list_table/labels';
 import { ListParamItem } from './params_list';
 
@@ -25,71 +26,21 @@ export const DeleteParam = ({
   items: ListParamItem[];
   setIsDeleteModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
 }) => {
-  const [isDeleting, setIsDeleting] = useState<boolean>(false);
-
   const dispatch = useDispatch();
-
-  const handleConfirmDelete = () => {
-    setIsDeleting(true);
-  };
-
-  const { status } = useFetcher(() => {
-    if (isDeleting) {
-      return deleteGlobalParams(items.map(({ id }) => id));
-    }
-  }, [items, isDeleting]);
+  const { isDeleting, listOfParams } = useSelector(selectGlobalParamState);
 
   const name = items
     .map(({ key }) => key)
     .join(', ')
     .slice(0, 50);
 
   useEffect(() => {
-    if (!isDeleting) {
-      return;
-    }
-    const { coreStart, toasts } = kibanaService;
-
-    if (status === FETCH_STATUS.FAILURE) {
-      toasts.addDanger(
-        {
-          title: toMountPoint(
-            <p data-test-subj="uptimeDeleteParamFailure">
-              {' '}
-              {i18n.translate('xpack.synthetics.paramManagement.paramDeleteFailuresMessage.name', {
-                defaultMessage: 'Param {name} failed to delete.',
-                values: { name },
-              })}
-            </p>,
-            coreStart
-          ),
-        },
-        { toastLifeTimeMs: 3000 }
-      );
-    } else if (status === FETCH_STATUS.SUCCESS) {
-      toasts.addSuccess(
-        {
-          title: toMountPoint(
-            <p data-test-subj="uptimeDeleteParamSuccess">
-              {i18n.translate('xpack.synthetics.paramManagement.paramDeleteSuccessMessage.name', {
-                defaultMessage: 'Param {name} deleted successfully.',
-                values: { name },
-              })}
-            </p>,
-            coreStart
-          ),
-        },
-        { toastLifeTimeMs: 3000 }
-      );
-      dispatch(syncGlobalParamsAction.get());
-    }
-    if (status === FETCH_STATUS.SUCCESS || status === FETCH_STATUS.FAILURE) {
-      setIsDeleting(false);
+    if (!isDeleting && (listOfParams ?? []).length === 0) {
       setIsDeleteModalVisible(false);
       dispatch(getGlobalParamAction.get());
       dispatch(syncGlobalParamsAction.get());
     }
-  }, [setIsDeleting, isDeleting, status, setIsDeleteModalVisible, name, dispatch]);
+  }, [isDeleting, setIsDeleteModalVisible, name, dispatch, listOfParams]);
 
   return (
     <EuiConfirmModal
@@ -98,7 +49,9 @@ export const DeleteParam = ({
         values: { name },
       })}
       onCancel={() => setIsDeleteModalVisible(false)}
-      onConfirm={handleConfirmDelete}
+      onConfirm={() => {
+        dispatch(deleteGlobalParamsAction.get(items.map(({ id }) => id)));
+      }}
       cancelButtonText={NO_LABEL}
       confirmButtonText={YES_LABEL}
       buttonColor="danger"

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/settings/global_params/params_list.tsx

@@ -83,7 +83,11 @@ export const ParamsList = () => {
       render: (val: string[]) => {
         const tags = val ?? [];
         if (tags.length === 0) {
-          return <EuiText>--</EuiText>;
+          return (
+            <EuiText>
+              {i18n.translate('xpack.synthetics.columns.TextLabel', { defaultMessage: '--' })}
+            </EuiText>
+          );
         }
         return (
           <EuiFlexGroup gutterSize="xs" wrap>
@@ -105,7 +109,11 @@ export const ParamsList = () => {
       render: (val: string[]) => {
         const namespaces = val ?? [];
         if (namespaces.length === 0) {
-          return <EuiText>--</EuiText>;
+          return (
+            <EuiText>
+              {i18n.translate('xpack.synthetics.columns.TextLabel', { defaultMessage: '--' })}
+            </EuiText>
+          );
         }
         return (
           <EuiFlexGroup gutterSize="xs" wrap>
@@ -184,6 +192,7 @@ export const ParamsList = () => {
         isEditingItem={isEditingItem}
         setIsEditingItem={setIsEditingItem}
         items={items}
+        key="add-param-flyout"
       />,
     ];
   };

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/state/global_params/actions.ts

@@ -23,3 +23,8 @@ export const editGlobalParamAction = createAsyncAction<
   },
   SyntheticsParams
 >('EDIT GLOBAL PARAM');
+
+export const deleteGlobalParamsAction = createAsyncAction<
+  string[],
+  Array<{ id: string; deleted: boolean }>
+>('DELETE GLOBAL PARAMS');

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/state/global_params/api.ts

@@ -13,21 +13,22 @@ import {
   SyntheticsParams,
   SyntheticsParamsCodec,
   SyntheticsParamsReadonlyCodec,
+  SyntheticsParamsReadonlyCodecList,
 } from '../../../../../common/runtime_types';
 import { apiService } from '../../../../utils/api_service/api_service';
 
 export const getGlobalParams = async (): Promise<SyntheticsParams[]> => {
   return apiService.get<SyntheticsParams[]>(
     SYNTHETICS_API_URLS.PARAMS,
     { version: INITIAL_REST_VERSION },
-    SyntheticsParamsReadonlyCodec
+    SyntheticsParamsReadonlyCodecList
   );
 };
 
 export const addGlobalParam = async (
   paramRequest: SyntheticsParamRequest
 ): Promise<SyntheticsParams> =>
-  apiService.post(SYNTHETICS_API_URLS.PARAMS, paramRequest, SyntheticsParamsCodec, {
+  apiService.post(SYNTHETICS_API_URLS.PARAMS, paramRequest, SyntheticsParamsReadonlyCodec, {
     version: INITIAL_REST_VERSION,
   });
 
@@ -53,11 +54,13 @@ export const editGlobalParam = async ({
   );
 };
 
-export const deleteGlobalParams = async (ids: string[]): Promise<DeleteParamsResponse[]> =>
-  apiService.delete(
-    SYNTHETICS_API_URLS.PARAMS,
-    { version: INITIAL_REST_VERSION },
+export const deleteGlobalParams = async (ids: string[]): Promise<DeleteParamsResponse[]> => {
+  return await apiService.post(
+    SYNTHETICS_API_URLS.PARAMS + '/_bulk_delete',
     {
       ids,
-    }
+    },
+    null,
+    { version: INITIAL_REST_VERSION }
   );
+};

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

@@ -8,8 +8,13 @@
 import { takeLeading } from 'redux-saga/effects';
 import { i18n } from '@kbn/i18n';
 import { fetchEffectFactory } from '../utils/fetch_effect';
-import { addGlobalParam, editGlobalParam, getGlobalParams } from './api';
-import { addNewGlobalParamAction, editGlobalParamAction, getGlobalParamAction } from './actions';
+import { addGlobalParam, deleteGlobalParams, editGlobalParam, getGlobalParams } from './api';
+import {
+  addNewGlobalParamAction,
+  deleteGlobalParamsAction,
+  editGlobalParamAction,
+  getGlobalParamAction,
+} from './actions';
 
 export function* getGlobalParamEffect() {
   yield takeLeading(
@@ -69,3 +74,26 @@ const editSuccessMessage = i18n.translate('xpack.synthetics.settings.editParams.
 const editFailureMessage = i18n.translate('xpack.synthetics.settings.editParams.fail', {
   defaultMessage: 'Failed to edit global parameter.',
 });
+
+// deleteGlobalParams
+
+export function* deleteGlobalParamsEffect() {
+  yield takeLeading(
+    deleteGlobalParamsAction.get,
+    fetchEffectFactory(
+      deleteGlobalParams,
+      deleteGlobalParamsAction.success,
+      deleteGlobalParamsAction.fail,
+      deleteSuccessMessage,
+      deleteFailureMessage
+    )
+  );
+}
+
+const deleteSuccessMessage = i18n.translate('xpack.synthetics.settings.deleteParams.success', {
+  defaultMessage: 'Successfully deleted global parameters.',
+});
+
+const deleteFailureMessage = i18n.translate('xpack.synthetics.settings.deleteParams.fail', {
+  defaultMessage: 'Failed to delete global parameters.',
+});