[Uptime] UI Monitor Management - adjust delete modal content (#126271)

* adjust delete modal content

* Update x-pack/plugins/uptime/public/components/monitor_management/monitor_list/delete_monitor.test.tsx

* update tests

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/uptime/public/components/monitor_management/monitor_list/actions.test.tsx

@@ -15,7 +15,7 @@ describe('<Actions />', () => {
   const onUpdate = jest.fn();
 
   it('navigates to edit monitor flow on edit pencil', () => {
-    render(<Actions id="test-id" onUpdate={onUpdate} />);
+    render(<Actions id="test-id" name="sample name" onUpdate={onUpdate} />);
 
     expect(screen.getByLabelText('Edit monitor')).toHaveAttribute(
       'href',

x-pack/plugins/uptime/public/components/monitor_management/monitor_list/actions.tsx

@@ -13,11 +13,12 @@ import { DeleteMonitor } from './delete_monitor';
 
 interface Props {
   id: string;
+  name: string;
   isDisabled?: boolean;
   onUpdate: () => void;
 }
 
-export const Actions = ({ id, onUpdate, isDisabled }: Props) => {
+export const Actions = ({ id, name, onUpdate, isDisabled }: Props) => {
   const { basePath } = useContext(UptimeSettingsContext);
 
   return (
@@ -32,7 +33,7 @@ export const Actions = ({ id, onUpdate, isDisabled }: Props) => {
         />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <DeleteMonitor onUpdate={onUpdate} id={id} isDisabled={isDisabled} />
+        <DeleteMonitor onUpdate={onUpdate} name={name} id={id} isDisabled={isDisabled} />
       </EuiFlexItem>
     </EuiFlexGroup>
   );

x-pack/plugins/uptime/public/components/monitor_management/monitor_list/delete_monitor.test.tsx

@@ -26,7 +26,7 @@ describe('<Actions />', () => {
     useFetcher.mockImplementation(originalUseFetcher);
     const deleteMonitor = jest.spyOn(fetchers, 'deleteMonitor');
     const id = 'test-id';
-    render(<DeleteMonitor id={id} onUpdate={onUpdate} />);
+    render(<DeleteMonitor id={id} name="sample name" onUpdate={onUpdate} />);
 
     expect(deleteMonitor).not.toBeCalled();
 
@@ -39,7 +39,8 @@ describe('<Actions />', () => {
 
   it('calls set refresh when deletion is successful', () => {
     const id = 'test-id';
-    render(<Actions id={id} onUpdate={onUpdate} />);
+    const name = 'sample monitor';
+    render(<Actions id={id} name={name} onUpdate={onUpdate} />);
 
     userEvent.click(screen.getByLabelText('Delete monitor'));
 
@@ -53,7 +54,7 @@ describe('<Actions />', () => {
       status: FETCH_STATUS.LOADING,
       refetch: () => {},
     });
-    render(<Actions id={id} onUpdate={onUpdate} />);
+    render(<Actions id={id} name="sample name" onUpdate={onUpdate} />);
 
     expect(screen.getByLabelText('Deleting monitor...')).toBeInTheDocument();
   });

x-pack/plugins/uptime/public/components/monitor_management/monitor_list/delete_monitor.tsx

@@ -16,10 +16,12 @@ import { toMountPoint } from '../../../../../../../src/plugins/kibana_react/publ
 
 export const DeleteMonitor = ({
   id,
+  name,
   onUpdate,
   isDisabled,
 }: {
   id: string;
+  name: string;
   isDisabled?: boolean;
   onUpdate: () => void;
 }) => {
@@ -70,7 +72,7 @@ export const DeleteMonitor = ({
 
   const destroyModal = (
     <EuiConfirmModal
-      title={DELETE_MONITOR_LABEL}
+      title={`${DELETE_MONITOR_LABEL} ${name}`}
       onCancel={() => setIsDeleteModalVisible(false)}
       onConfirm={onConfirmDelete}
       cancelButtonText={NO_LABEL}
@@ -103,16 +105,17 @@ export const DeleteMonitor = ({
 const DELETE_DESCRIPTION_LABEL = i18n.translate(
   'xpack.uptime.monitorManagement.confirmDescriptionLabel',
   {
-    defaultMessage: 'Are you sure you want to do delete the monitor?',
+    defaultMessage:
+      'This action will delete the monitor but keep any data collected. This action cannot be undone.',
   }
 );
 
 const YES_LABEL = i18n.translate('xpack.uptime.monitorManagement.yesLabel', {
-  defaultMessage: 'Yes',
+  defaultMessage: 'Delete',
 });
 
 const NO_LABEL = i18n.translate('xpack.uptime.monitorManagement.noLabel', {
-  defaultMessage: 'No',
+  defaultMessage: 'Cancel',
 });
 
 const DELETE_MONITOR_LABEL = i18n.translate('xpack.uptime.monitorManagement.deleteMonitorLabel', {

x-pack/plugins/uptime/public/components/monitor_management/monitor_list/monitor_list.tsx

@@ -179,11 +179,17 @@ export const MonitorManagementList = ({
     },
     {
       align: 'left' as const,
-      field: 'id',
       name: i18n.translate('xpack.uptime.monitorManagement.monitorList.actions', {
         defaultMessage: 'Actions',
       }),
-      render: (id: string) => <Actions id={id} isDisabled={!canEdit} onUpdate={onUpdate} />,
+      render: (fields: SyntheticsMonitorWithId) => (
+        <Actions
+          id={fields.id}
+          name={fields[ConfigKey.NAME]}
+          isDisabled={!canEdit}
+          onUpdate={onUpdate}
+        />
+      ),
     },
   ] as Array<EuiBasicTableColumn<SyntheticsMonitorWithId>>;