[Uptime] Fix Monitor status toggle alert receovery state

x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx

@@ -89,10 +89,7 @@ export const MonitorPageTitle: React.FC = () => {
           <EuiSpacer size="xs" />
         </EuiFlexItem>
         <EuiFlexItem grow={false} style={{ justifyContent: 'center' }}>
-          <EnableMonitorAlert
-            monitorId={monitorId}
-            monitorName={selectedMonitor?.monitor?.name || selectedMonitor?.url?.full}
-          />
+          <EnableMonitorAlert monitorId={monitorId} selectedMonitor={selectedMonitor!} />
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="s" />

x-pack/plugins/uptime/public/components/overview/monitor_list/columns/enable_alert.test.tsx

@@ -7,112 +7,86 @@
 
 import React from 'react';
 import { EnableMonitorAlert } from './enable_alert';
-import * as redux from 'react-redux';
-import {
-  mountWithRouterRedux,
-  renderWithRouterRedux,
-  shallowWithRouterRedux,
-} from '../../../../lib';
-import { EuiPopover, EuiText } from '@elastic/eui';
+import { fireEvent } from '@testing-library/dom';
+
 import { DYNAMIC_SETTINGS_DEFAULTS } from '../../../../../common/constants';
-import { ReactRouterEuiLink } from '../../../common/react_router_helpers';
+import { makePing } from '../../../../../common/runtime_types/ping';
+import { render } from '../../../../lib/helper/rtl_helpers';
+import { DISABLE_STATUS_ALERT, ENABLE_STATUS_ALERT } from './translations';
+import { mockState } from '../../../../lib/__mocks__/uptime_store.mock';
+import { AlertsResult } from '../../../../state/actions/types';
 
 describe('EnableAlertComponent', () => {
-  let defaultConnectors: string[] = [];
-  let alerts: any = [];
-
-  beforeEach(() => {
-    jest.spyOn(redux, 'useDispatch').mockReturnValue(jest.fn());
-
-    jest.spyOn(redux, 'useSelector').mockImplementation((fn, d) => {
-      if (fn.name === 'selectDynamicSettings') {
-        return {
-          settings: Object.assign(DYNAMIC_SETTINGS_DEFAULTS, {
-            defaultConnectors,
-          }),
-        };
-      }
-      if (fn.name === 'alertsSelector') {
-        return {
-          data: {
-            data: alerts,
-          },
-          loading: false,
-        };
-      }
-      return {};
-    });
-  });
-
-  it('shallow renders without errors for valid props', () => {
-    const wrapper = shallowWithRouterRedux(
-      <EnableMonitorAlert monitorId={'testMonitor'} monitorName={'My website'} />
+  it('it displays define connectors when there is none', () => {
+    const { getByTestId, getByLabelText, getByText } = render(
+      <EnableMonitorAlert
+        monitorId={'testMonitor'}
+        selectedMonitor={makePing({ name: 'My website' })}
+      />
     );
-    expect(wrapper).toMatchSnapshot();
-  });
+    expect(getByTestId('uptimeDisplayDefineConnector'));
+    expect(getByLabelText(ENABLE_STATUS_ALERT));
 
-  it('renders without errors for valid props', () => {
-    const wrapper = renderWithRouterRedux(
-      <EnableMonitorAlert monitorId={'testMonitor'} monitorName={'My website'} />
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
+    fireEvent.click(getByTestId('uptimeDisplayDefineConnector'));
 
-  it('displays define connectors when there is none', () => {
-    defaultConnectors = [];
-    const wrapper = mountWithRouterRedux(
-      <EnableMonitorAlert monitorId={'testMonitor'} monitorName={'My website'} />
+    expect(getByTestId('uptimeSettingsLink')).toHaveAttribute(
+      'href',
+      '/settings?focusConnectorField=true'
     );
-    expect(wrapper.find(EuiPopover)).toHaveLength(1);
-    wrapper.find('button').simulate('click');
-    expect(wrapper.find(EuiText).text()).toBe(
-      'To start enabling alerts, please define a default alert action connector in Settings'
+    expect(
+      getByText('To start enabling alerts, please define a default alert action connector in')
     );
-    expect(wrapper.find(ReactRouterEuiLink)).toMatchInlineSnapshot(`
-      <ReactRouterEuiLink
-        data-test-subj="uptimeSettingsLink"
-        to="/settings?focusConnectorField=true"
-      >
-        <ReactRouterHelperForEui
-          to="/settings?focusConnectorField=true"
-        >
-          <EuiLink
-            data-test-subj="uptimeSettingsLink"
-            href="/settings?focusConnectorField=true"
-            onClick={[Function]}
-          >
-            <a
-              className="euiLink euiLink--primary"
-              data-test-subj="uptimeSettingsLink"
-              href="/settings?focusConnectorField=true"
-              onClick={[Function]}
-              rel="noreferrer"
-            >
-              Settings
-            </a>
-          </EuiLink>
-        </ReactRouterHelperForEui>
-      </ReactRouterEuiLink>
-    `);
   });
 
   it('does not displays define connectors when there is connector', () => {
-    defaultConnectors = ['infra-slack-connector-id'];
-    const wrapper = mountWithRouterRedux(
-      <EnableMonitorAlert monitorId={'testMonitor'} monitorName={'My website'} />
+    const defaultConnectors = ['infra-slack-connector-id'];
+
+    const { getByTestId, getByLabelText } = render(
+      <EnableMonitorAlert
+        monitorId={'testMonitor'}
+        selectedMonitor={makePing({ name: 'My website' })}
+      />,
+      {
+        state: {
+          dynamicSettings: {
+            settings: { ...DYNAMIC_SETTINGS_DEFAULTS, defaultConnectors },
+            loading: false,
+          },
+        },
+      }
     );
 
-    expect(wrapper.find(EuiPopover)).toHaveLength(0);
+    expect(getByTestId('uptimeEnableSimpleDownAlerttestMonitor'));
+    expect(getByLabelText(ENABLE_STATUS_ALERT));
   });
 
   it('displays disable when alert is there', () => {
-    alerts = [{ id: 'test-alert', params: { search: 'testMonitor' } }];
-    defaultConnectors = ['infra-slack-connector-id'];
+    const alerts = [{ id: 'test-alert', params: { search: 'testMonitor' } }];
+    const defaultConnectors = ['infra-slack-connector-id'];
 
-    const wrapper = mountWithRouterRedux(
-      <EnableMonitorAlert monitorId={'testMonitor'} monitorName={'My website'} />
+    const { getByTestId, getByLabelText } = render(
+      <EnableMonitorAlert
+        monitorId={'testMonitor'}
+        selectedMonitor={makePing({ name: 'My website' })}
+      />,
+      {
+        state: {
+          dynamicSettings: {
+            settings: { ...DYNAMIC_SETTINGS_DEFAULTS, defaultConnectors },
+            loading: false,
+          },
+          alerts: {
+            ...mockState.alerts,
+            alerts: {
+              data: ({ data: alerts } as unknown) as AlertsResult,
+              loading: false,
+            },
+          },
+        },
+      }
     );
 
-    expect(wrapper.find('button').prop('aria-label')).toBe('Disable status alert');
+    expect(getByTestId('uptimeDisableSimpleDownAlerttestMonitor'));
+    expect(getByLabelText(DISABLE_STATUS_ALERT));
   });
 });

x-pack/plugins/uptime/public/components/overview/monitor_list/columns/enable_alert.tsx

@@ -21,13 +21,14 @@ import {
 import { MONITOR_ROUTE } from '../../../../../common/constants';
 import { DefineAlertConnectors } from './define_connectors';
 import { DISABLE_STATUS_ALERT, ENABLE_STATUS_ALERT } from './translations';
+import { Ping } from '../../../../../common/runtime_types/ping';
 
 interface Props {
   monitorId: string;
-  monitorName?: string;
+  selectedMonitor: Ping;
 }
 
-export const EnableMonitorAlert = ({ monitorId, monitorName }: Props) => {
+export const EnableMonitorAlert = ({ monitorId, selectedMonitor }: Props) => {
   const [isLoading, setIsLoading] = useState(false);
 
   const { settings } = useSelector(selectDynamicSettings);
@@ -66,7 +67,7 @@ export const EnableMonitorAlert = ({ monitorId, monitorName }: Props) => {
       createAlertAction.get({
         defaultActions,
         monitorId,
-        monitorName,
+        selectedMonitor,
       })
     );
     setIsLoading(true);
@@ -102,28 +103,26 @@ export const EnableMonitorAlert = ({ monitorId, monitorName }: Props) => {
 
   return hasDefaultConnectors || hasAlert ? (
     <div className="eui-displayInlineBlock" style={{ marginRight: 10 }}>
-      {
-        <EuiToolTip content={btnLabel}>
-          <>
-            <EuiSwitch
-              id={'enableDisableAlertSwitch'}
-              compressed={!isMonitorPage}
-              disabled={showSpinner}
-              label={btnLabel}
-              showLabel={!!isMonitorPage}
-              aria-label={btnLabel}
-              onChange={onAlertClick}
-              checked={!!hasAlert}
-              data-test-subj={
-                hasAlert
-                  ? 'uptimeDisableSimpleDownAlert' + monitorId
-                  : 'uptimeEnableSimpleDownAlert' + monitorId
-              }
-            />{' '}
-            {showSpinner && <EuiLoadingSpinner className="eui-alignMiddle" />}
-          </>
-        </EuiToolTip>
-      }
+      <EuiToolTip content={btnLabel}>
+        <>
+          <EuiSwitch
+            id={'enableDisableAlertSwitch'}
+            compressed={!isMonitorPage}
+            disabled={showSpinner}
+            label={btnLabel}
+            showLabel={!!isMonitorPage}
+            aria-label={btnLabel}
+            onChange={onAlertClick}
+            checked={!!hasAlert}
+            data-test-subj={
+              hasAlert
+                ? 'uptimeDisableSimpleDownAlert' + monitorId
+                : 'uptimeEnableSimpleDownAlert' + monitorId
+            }
+          />{' '}
+          {showSpinner && <EuiLoadingSpinner className="eui-alignMiddle" />}
+        </>
+      </EuiToolTip>
     </div>
   ) : (
     <DefineAlertConnectors />

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

@@ -142,7 +142,7 @@ export const MonitorListComponent: ({
       render: (item: MonitorSummary) => (
         <EnableMonitorAlert
           monitorId={item.monitor_id}
-          monitorName={item.state.monitor.name || item.monitor_id}
+          selectedMonitor={item.state.summaryPings[0]}
         />
       ),
     },

x-pack/plugins/uptime/public/components/overview/synthetics_callout.test.tsx

@@ -55,6 +55,7 @@ describe('SyntheticsCallout', () => {
               grow={false}
             >
               <EuiButtonEmpty
+                data-test-subj="uptimeDismissSyntheticsCallout"
                 onClick={[Function]}
               >
                 <FormattedMessage
@@ -115,6 +116,7 @@ describe('SyntheticsCallout', () => {
               grow={false}
             >
               <EuiButtonEmpty
+                data-test-subj="uptimeDismissSyntheticsCallout"
                 onClick={[Function]}
               >
                 <FormattedMessage

x-pack/plugins/uptime/public/components/overview/synthetics_callout.tsx

@@ -58,6 +58,7 @@ export const SyntheticsCallout = () => {
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiButtonEmpty
+              data-test-subj="uptimeDismissSyntheticsCallout"
               onClick={() => {
                 if (shouldShow) {
                   hideSyntheticsCallout();