[8.8] [Synthetics] refresh data on visualization scrubbing (#156777) (#…

…156799)

# Backport

This will backport the following commits from `main` to `8.8`:
- [[Synthetics] refresh data on visualization scrubbing
(#156777)](#156777)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Dominique
Clarke","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-05-05T08:21:42Z","message":"[Synthetics]
refresh data on visualization scrubbing (#156777)\n\nCo-authored-by:
Shahzad
<[email protected]>","sha":"29fe83f06a34f092a4533700e5ebaba1fca4dc80","branchLabelMapping":{"^v8.9.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","Team:uptime","release_note:skip","v8.8.0","v8.9.0"],"number":156777,"url":"https://github.com/elastic/kibana/pull/156777","mergeCommit":{"message":"[Synthetics]
refresh data on visualization scrubbing (#156777)\n\nCo-authored-by:
Shahzad
<[email protected]>","sha":"29fe83f06a34f092a4533700e5ebaba1fca4dc80"}},"sourceBranch":"main","suggestedTargetBranches":["8.8"],"targetPullRequestStates":[{"branch":"8.8","label":"v8.8.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.9.0","labelRegex":"^v8.9.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/156777","number":156777,"mergeCommit":{"message":"[Synthetics]
refresh data on visualization scrubbing (#156777)\n\nCo-authored-by:
Shahzad
<[email protected]>","sha":"29fe83f06a34f092a4533700e5ebaba1fca4dc80"}}]}]
BACKPORT-->

Co-authored-by: Dominique Clarke <[email protected]>

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_pending_wrapper.tsx

@@ -13,13 +13,15 @@ import { EuiLoadingSpinner, EuiLoadingChart } from '@elastic/eui';
 import { PageLoader } from '../common/components/page_loader';
 import { resetMonitorLastRunAction } from '../../state';
 import { useMonitorLatestPing } from './hooks/use_monitor_latest_ping';
+import { useSyntheticsRefreshContext } from '../../contexts';
 
 export const MonitorPendingWrapper: React.FC = ({ children }) => {
   const dispatch = useDispatch();
   const history = useHistory();
   const currentLocation = useLocation();
   const locationRef = useRef(currentLocation);
   const { monitorId } = useParams<{ monitorId: string }>();
+  const { refreshApp } = useSyntheticsRefreshContext();
 
   const { latestPing, loaded: pingsLoaded } = useMonitorLatestPing();
   const [loaded, setLoaded] = useState(false);
@@ -36,9 +38,10 @@ export const MonitorPendingWrapper: React.FC = ({ children }) => {
           setLoaded(false);
           setHasPing(false);
           dispatch(resetMonitorLastRunAction());
+          refreshApp();
         }
       }),
-    [history, monitorId, dispatch]
+    [history, monitorId, dispatch, refreshApp]
   );
 
   useEffect(() => {