[Synthetics] Disable/enable status alert for viewer user permissions (#…

…156146)

## Summary

Fixes #155937

For viewer user tooltip will be displayed and button is disabled.

Also fixed loading position for manual test run loader.

<img width="1770" alt="image"
src="https://user-images.githubusercontent.com/3505601/235106034-7e758a5d-7291-47a2-8a46-2327b367e4a8.png">

x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/actions_popover.tsx

@@ -235,7 +235,12 @@ export function ActionsPopover({
       },
     },
     {
-      name: monitor.isStatusAlertEnabled ? disableAlertLabel : enableMonitorAlertLabel,
+      name: (
+        <NoPermissionsTooltip canEditSynthetics={canEditSynthetics}>
+          {monitor.isStatusAlertEnabled ? disableAlertLabel : enableMonitorAlertLabel}
+        </NoPermissionsTooltip>
+      ),
+      disabled: !canEditSynthetics,
       icon: alertLoading ? (
         <EuiLoadingSpinner size="s" />
       ) : monitor.isStatusAlertEnabled ? (

x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item_icon.tsx

@@ -27,7 +27,7 @@ import { useRef } from 'react';
 import { selectErrorPopoverState, toggleErrorPopoverOpen } from '../../../../state';
 import { useErrorDetailsLink } from '../../../common/links/error_details_link';
 import { MonitorOverviewItem, OverviewPing } from '../../../../../../../common/runtime_types';
-import { manualTestRunSelector } from '../../../../state/manual_test_runs';
+import { manualTestRunSelector, isTestRunning } from '../../../../state/manual_test_runs';
 import { useFormatTestRunAt } from '../../../../utils/monitor_test_result/test_time_formats';
 
 const Container = styled.div`
@@ -62,7 +62,7 @@ export const MetricItemIcon = ({
     dispatch(toggleErrorPopoverOpen(configIdByLocation));
   };
 
-  const inProgress = testNowRun?.status === 'in-progress' || testNowRun?.status === 'loading';
+  const inProgress = isTestRunning(testNowRun);
 
   const errorLink = useErrorDetailsLink({
     configId: monitor.configId,
@@ -75,9 +75,11 @@ export const MetricItemIcon = ({
 
   if (inProgress) {
     return (
-      <EuiToolTip position="top" content="Test is in progress">
-        <EuiLoadingSpinner />
-      </EuiToolTip>
+      <Container>
+        <EuiToolTip position="top" content={TEST_IN_PROGRESS}>
+          <EuiLoadingSpinner />
+        </EuiToolTip>
+      </Container>
     );
   }
 
@@ -164,6 +166,10 @@ const ERROR_DETAILS = i18n.translate('xpack.synthetics.errorDetails.label', {
   defaultMessage: 'Error details',
 });
 
+const TEST_IN_PROGRESS = i18n.translate('xpack.synthetics.inProgress.label', {
+  defaultMessage: 'Manual test run is in progress.',
+});
+
 const StyledIcon = euiStyled.div<{ boxShadow: string }>`
   box-sizing: border-box;
   display: flex;

x-pack/plugins/synthetics/public/apps/synthetics/state/manual_test_runs/index.ts

@@ -31,6 +31,9 @@ export enum TestRunStatus {
   COMPLETED = 'completed',
 }
 
+export const isTestRunning = (testRun?: ManualTestRun) =>
+  testRun?.status === TestRunStatus.IN_PROGRESS || testRun?.status === TestRunStatus.LOADING;
+
 export interface ManualTestRun {
   configId: string;
   name: string;