[Synthetics] Monitor editing and deletion - prefer config_id for edit…

…ing and deleting monitor (elastic#145879) ## Summary Resolves elastic#145780 Resolves elastic#145881 Standardized the configuration used for monitor editing and deleting, so that both project monitors and UI monitors can be deleted successfully. Also updates content for the delete monitor modal for project monitors <img width="789" alt="Screen Shot 2022-11-21 at 6 14 08 PM" src="https://user-images.githubusercontent.com/11356435/203183292-ace95578-baea-400c-b48d-71015d9a5bd3.png"> ### Testing 1. Create at least one project monitor and one UI monitor 2. Navigate to the Synthetics App monitors page 3. Click edit for both monitors. Ensure the edit page is loaded 4. Delete both monitors. Ensure both monitors are able to be deleted successfully.
kibanamachine · Nov 22, 2022 · 1f9cd75 · 1f9cd75
1 parent d995fb8
commit 1f9cd75
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 16 deletions.
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/form/submit.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/form/submit.tsx
@@ -118,7 +118,7 @@ export const ActionBar = () => {
       </EuiFlexGroup>
       {isDeleteModalVisible && (
         <DeleteMonitor
-          id={monitorId}
+          configId={monitorId}
           name={monitorObject?.attributes?.[ConfigKey.NAME] ?? ''}
           reloadPage={() => {
             history.push(MONITORS_ROUTE);

diff --git a/...public/apps/synthetics/components/monitors_page/management/monitor_list_table/actions.tsx b/...public/apps/synthetics/components/monitors_page/management/monitor_list_table/actions.tsx
@@ -15,7 +15,7 @@ import * as labels from './labels';
 
 interface Props {
   euiTheme: EuiThemeComputed;
-  id: string;
+  configId: string;
   name: string;
   canEditSynthetics: boolean;
   isProjectMonitor?: boolean;
@@ -24,7 +24,7 @@ interface Props {
 
 export const Actions = ({
   euiTheme,
-  id,
+  configId,
   name,
   reloadPage,
   canEditSynthetics,
@@ -96,7 +96,7 @@ export const Actions = ({
       key="xpack.synthetics.editMonitor"
       icon="pencil"
       onClick={closePopover}
-      href={`${basePath}/app/synthetics/edit-monitor/${id}`}
+      href={`${basePath}/app/synthetics/edit-monitor/${configId}`}
       disabled={!canEditSynthetics}
     >
       {labels.EDIT_LABEL}
@@ -115,7 +115,7 @@ export const Actions = ({
   return (
     <>
       <EuiPopover
-        id={`xpack.synthetics.${id}`}
+        id={`xpack.synthetics.${configId}`}
         button={menuButton}
         isOpen={isPopoverOpen}
         closePopover={closePopover}
@@ -127,7 +127,7 @@ export const Actions = ({
 
       {isDeleteModalVisible && (
         <DeleteMonitor
-          id={id}
+          configId={configId}
           name={name}
           reloadPage={reloadPage}
           isProjectMonitor={isProjectMonitor}

diff --git a/...public/apps/synthetics/components/monitors_page/management/monitor_list_table/columns.tsx b/...public/apps/synthetics/components/monitors_page/management/monitor_list_table/columns.tsx
@@ -152,7 +152,7 @@ export function getMonitorListColumns({
       render: (fields: EncryptedSyntheticsSavedMonitor) => (
         <Actions
           euiTheme={euiTheme}
-          id={fields.id}
+          configId={fields[ConfigKey.CONFIG_ID]}
           name={fields[ConfigKey.NAME]}
           canEditSynthetics={canEditSynthetics}
           reloadPage={reloadPage}

diff --git a/...apps/synthetics/components/monitors_page/management/monitor_list_table/delete_monitor.tsx b/...apps/synthetics/components/monitors_page/management/monitor_list_table/delete_monitor.tsx
@@ -17,13 +17,13 @@ import { kibanaService } from '../../../../../../utils/kibana_service';
 import * as labels from './labels';
 
 export const DeleteMonitor = ({
-  id,
+  configId,
   name,
   reloadPage,
   isProjectMonitor,
   setIsDeleteModalVisible,
 }: {
-  id: string;
+  configId: string;
   name: string;
   reloadPage: () => void;
   isProjectMonitor?: boolean;
@@ -37,9 +37,9 @@ export const DeleteMonitor = ({
 
   const { status: monitorDeleteStatus } = useFetcher(() => {
     if (isDeleting) {
-      return fetchDeleteMonitor({ id });
+      return fetchDeleteMonitor({ id: configId });
     }
-  }, [id, isDeleting]);
+  }, [configId, isDeleting]);
 
   useEffect(() => {
     if (!isDeleting) {
@@ -63,7 +63,7 @@ export const DeleteMonitor = ({
               {i18n.translate(
                 'xpack.synthetics.monitorManagement.monitorDeleteSuccessMessage.name',
                 {
-                  defaultMessage: 'Monitor {name} deleted successfully.',
+                  defaultMessage: 'Deleted "{name}"',
                   values: { name },
                 }
               )}
@@ -113,23 +113,23 @@ export const DeleteMonitor = ({
 export const PROJECT_MONITOR_TITLE = i18n.translate(
   'xpack.synthetics.monitorManagement.monitorList.disclaimer.title',
   {
-    defaultMessage: "Deleting this monitor will not remove it from Project's source",
+    defaultMessage: 'Deleting this monitor will not remove it from the project source',
   }
 );
 
 export const ProjectMonitorDisclaimer = () => {
   return (
     <FormattedMessage
       id="xpack.synthetics.monitorManagement.monitorList.disclaimer.label"
-      defaultMessage="Make sure to remove this monitor from Project's source, otherwise it will be recreated the next time you use the push command. For more information, {docsLink} for deleting project monitors."
+      defaultMessage="To delete it completely and stop it from being pushed again in the future, delete it from the project source. {docsLink}."
       values={{
         docsLink: (
           <EuiLink
             href="https://elastic.co/guide/en/observability/current/synthetics-manage-monitors.html#manage-monitors-delete"
             target="_blank"
           >
             {i18n.translate('xpack.synthetics.monitorManagement.projectDelete.docsLink', {
-              defaultMessage: 'read our docs',
+              defaultMessage: 'Learn more',
             })}
           </EuiLink>
         ),

diff --git a/...hetics/public/legacy_uptime/components/monitor_management/monitor_list/delete_monitor.tsx b/...hetics/public/legacy_uptime/components/monitor_management/monitor_list/delete_monitor.tsx
@@ -78,7 +78,7 @@ export const DeleteMonitor = ({
               {i18n.translate(
                 'xpack.synthetics.monitorManagement.monitorDeleteSuccessMessage.name',
                 {
-                  defaultMessage: 'Monitor {name} deleted successfully.',
+                  defaultMessage: 'Deleted "{name}"',
                   values: { name },
                 }
               )}