[APM] Show search bar on empty prompt (#163495)

Closes https://github.com/elastic/kibana/issues/156962

### What was done
- Added the search bar to service map other states (empty, failure, etc)
- Fixed loading spinner


19b97219-1493-49a1-ac6a-06258c21961f

x-pack/plugins/apm/ftr_e2e/cypress/e2e/power_user/service_map/service_map.cy.ts

@@ -0,0 +1,73 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import url from 'url';
+import { synthtrace } from '../../../../synthtrace';
+import { opbeans } from '../../../fixtures/synthtrace/opbeans';
+
+const start = '2021-10-10T00:00:00.000Z';
+const end = '2021-10-10T00:15:00.000Z';
+
+const serviceMapHref = url.format({
+  pathname: '/app/apm/service-map',
+  query: {
+    environment: 'ENVIRONMENT_ALL',
+    rangeFrom: start,
+    rangeTo: end,
+  },
+});
+
+const detailedServiceMap = url.format({
+  pathname: '/app/apm/services/opbeans-java/service-map',
+  query: {
+    environment: 'ENVIRONMENT_ALL',
+    rangeFrom: start,
+    rangeTo: end,
+  },
+});
+
+describe('Service map', () => {
+  before(() => {
+    synthtrace.index(
+      opbeans({
+        from: new Date(start).getTime(),
+        to: new Date(end).getTime(),
+      })
+    );
+  });
+
+  after(() => {
+    synthtrace.clean();
+  });
+
+  beforeEach(() => {
+    cy.loginAsViewerUser();
+  });
+
+  describe('When navigating to service map', () => {
+    it('opens service map', () => {
+      cy.visitKibana(serviceMapHref);
+      cy.contains('h1', 'Services');
+    });
+
+    it('opens detailed service map', () => {
+      cy.visitKibana(detailedServiceMap);
+      cy.contains('h1', 'opbeans-java');
+    });
+
+    describe('When there is no data', () => {
+      it('shows empty state', () => {
+        cy.visitKibana(serviceMapHref);
+        // we need to dismiss the service-group call out first
+        cy.contains('Dismiss').click();
+        cy.getByTestSubj('apmUnifiedSearchBar').type('_id : foo{enter}');
+        cy.contains('No services available');
+        // search bar is still visible
+        cy.getByTestSubj('apmUnifiedSearchBar');
+      });
+    });
+  });
+});

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

@@ -1,130 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { render } from '@testing-library/react';
-import { createMemoryHistory, MemoryHistory } from 'history';
-import { CoreStart } from '@kbn/core/public';
-import React, { ReactNode } from 'react';
-import { createKibanaReactContext } from '@kbn/kibana-react-plugin/public';
-import { License } from '@kbn/licensing-plugin/common/license';
-import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
-import { MockApmPluginContextWrapper } from '../../../context/apm_plugin/mock_apm_plugin_context';
-import { LicenseContext } from '../../../context/license/license_context';
-import * as useFetcherModule from '../../../hooks/use_fetcher';
-import { ServiceMap } from '.';
-import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values';
-
-let history: MemoryHistory<unknown>;
-
-const KibanaReactContext = createKibanaReactContext({
-  usageCollection: { reportUiCounter: () => {} },
-} as Partial<CoreStart>);
-
-const activeLicense = new License({
-  signature: 'active test signature',
-  license: {
-    expiryDateInMillis: 0,
-    mode: 'platinum',
-    status: 'active',
-    type: 'platinum',
-    uid: '1',
-  },
-});
-
-const expiredLicense = new License({
-  signature: 'expired test signature',
-  license: {
-    expiryDateInMillis: 0,
-    mode: 'platinum',
-    status: 'expired',
-    type: 'platinum',
-    uid: '1',
-  },
-});
-
-function createWrapper(license: License | null) {
-  history = createMemoryHistory();
-  history.replace('/service-map?rangeFrom=now-15m&rangeTo=now');
-
-  return ({ children }: { children?: ReactNode }) => {
-    return (
-      <EuiThemeProvider>
-        <KibanaReactContext.Provider>
-          <LicenseContext.Provider value={license || undefined}>
-            <MockApmPluginContextWrapper history={history}>
-              {children}
-            </MockApmPluginContextWrapper>
-          </LicenseContext.Provider>
-        </KibanaReactContext.Provider>
-      </EuiThemeProvider>
-    );
-  };
-}
-
-describe('ServiceMap', () => {
-  describe('with no license', () => {
-    it('renders null', async () => {
-      expect(
-        await render(
-          <ServiceMap
-            environment={ENVIRONMENT_ALL.value}
-            kuery=""
-            start="2021-08-20T10:00:00.000Z"
-            end="2021-08-20T10:15:00.000Z"
-          />,
-          {
-            wrapper: createWrapper(null),
-          }
-        ).queryByTestId('ServiceMap')
-      ).not.toBeInTheDocument();
-    });
-  });
-
-  describe('with an expired license', () => {
-    it('renders the license banner', async () => {
-      expect(
-        await render(
-          <ServiceMap
-            environment={ENVIRONMENT_ALL.value}
-            kuery=""
-            start="2021-08-20T10:00:00.000Z"
-            end="2021-08-20T10:15:00.000Z"
-          />,
-          {
-            wrapper: createWrapper(expiredLicense),
-          }
-        ).findAllByText(/Platinum/)
-      ).toHaveLength(1);
-    });
-  });
-
-  describe('with an active license', () => {
-    describe('with an empty response', () => {
-      it('renders the empty banner', async () => {
-        jest.spyOn(useFetcherModule, 'useFetcher').mockReturnValueOnce({
-          data: { elements: [] },
-          refetch: () => {},
-          status: useFetcherModule.FETCH_STATUS.SUCCESS,
-        });
-
-        expect(
-          await render(
-            <ServiceMap
-              environment={ENVIRONMENT_ALL.value}
-              kuery=""
-              start="2021-08-20T10:00:00.000Z"
-              end="2021-08-20T10:15:00.000Z"
-            />,
-            {
-              wrapper: createWrapper(activeLicense),
-            }
-          ).findAllByText(/No services available/)
-        ).toHaveLength(1);
-      });
-    });
-  });
-});

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

@@ -40,7 +40,7 @@ import { DisabledPrompt } from './disabled_prompt';
 function PromptContainer({ children }: { children: ReactNode }) {
   return (
     <>
-      <SearchBar showUnifiedSearchBar={false} />
+      <SearchBar showTimeComparison />
       <EuiFlexGroup
         alignItems="center"
         justifyContent="spaceAround"

x-pack/plugins/apm/public/components/app/service_map/use_ref_dimensions.ts

@@ -13,7 +13,7 @@ export function useRefDimensions() {
   const windowHeight = useWindowSize().height;
 
   if (!ref.current) {
-    return { ref, width: 0, height: 0 };
+    return { ref, width: 0, height: windowHeight };
   }
 
   const { top, width } = ref.current.getBoundingClientRect();