Closes #85549 by always rendering the datepicker regardless of data (#87393)

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

x-pack/plugins/apm/public/components/app/ServiceMap/index.test.tsx

@@ -5,6 +5,7 @@
  */
 
 import { render } from '@testing-library/react';
+import { createMemoryHistory } from 'history';
 import { CoreStart } from 'kibana/public';
 import React, { ReactNode } from 'react';
 import { createKibanaReactContext } from 'src/plugins/kibana_react/public';
@@ -15,6 +16,10 @@ import { MockApmPluginContextWrapper } from '../../../context/apm_plugin/mock_ap
 import { LicenseContext } from '../../../context/license/license_context';
 import * as useFetcherModule from '../../../hooks/use_fetcher';
 import { ServiceMap } from './';
+import { UrlParamsProvider } from '../../../context/url_params_context/url_params_context';
+import { Router } from 'react-router-dom';
+
+const history = createMemoryHistory();
 
 const KibanaReactContext = createKibanaReactContext({
   usageCollection: { reportUiCounter: () => {} },
@@ -49,7 +54,9 @@ function createWrapper(license: License | null) {
         <KibanaReactContext.Provider>
           <LicenseContext.Provider value={license || undefined}>
             <MockApmPluginContextWrapper>
-              {children}
+              <Router history={history}>
+                <UrlParamsProvider>{children}</UrlParamsProvider>
+              </Router>
             </MockApmPluginContextWrapper>
           </LicenseContext.Provider>
         </KibanaReactContext.Provider>

x-pack/plugins/apm/public/components/app/ServiceMap/index.tsx

@@ -39,21 +39,34 @@ const ServiceMapDatePickerFlexGroup = styled(EuiFlexGroup)`
   margin: 0;
 `;
 
+function DatePickerSection() {
+  return (
+    <ServiceMapDatePickerFlexGroup justifyContent="flexEnd" gutterSize="s">
+      <EuiFlexItem grow={false}>
+        <DatePicker />
+      </EuiFlexItem>
+    </ServiceMapDatePickerFlexGroup>
+  );
+}
+
 function PromptContainer({ children }: { children: ReactNode }) {
   return (
-    <EuiFlexGroup
-      alignItems="center"
-      justifyContent="spaceAround"
-      // Set the height to give it some top margin
-      style={{ height: '60vh' }}
-    >
-      <EuiFlexItem
-        grow={false}
-        style={{ width: 600, textAlign: 'center' as const }}
+    <>
+      <DatePickerSection />
+      <EuiFlexGroup
+        alignItems="center"
+        justifyContent="spaceAround"
+        // Set the height to give it some top margin
+        style={{ height: '60vh' }}
       >
-        {children}
-      </EuiFlexItem>
-    </EuiFlexGroup>
+        <EuiFlexItem
+          grow={false}
+          style={{ width: 600, textAlign: 'center' as const }}
+        >
+          {children}
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </>
   );
 }
 
@@ -137,11 +150,7 @@ export function ServiceMap({
 
   return (
     <>
-      <ServiceMapDatePickerFlexGroup justifyContent="flexEnd" gutterSize="s">
-        <EuiFlexItem grow={false}>
-          <DatePicker />
-        </EuiFlexItem>
-      </ServiceMapDatePickerFlexGroup>
+      <DatePickerSection />
       <div data-test-subj="ServiceMap" style={{ height }} ref={ref}>
         <Cytoscape
           elements={data.elements}