[Security Solution] fix wrong banner shown in Discover document flyout because of missing services

x-pack/solutions/security/plugins/security_solution/public/one_discover/alert_flyout_header_component/index.test.tsx

@@ -286,6 +286,24 @@ describe('AlertFlyoutHeader', () => {
     );
   });
 
+  it('renders nothing while services or store are not yet resolved', () => {
+    const hit = { id: '1', raw: {}, flattened: {} } as unknown as DataTableRecord;
+    const history = createMemoryHistory({ initialEntries: ['/discover'] });
+
+    const { container } = render(
+      <Router history={history}>
+        <AlertFlyoutHeader
+          hit={hit}
+          servicesPromise={new Promise(() => {})}
+          storePromise={new Promise(() => {})}
+          onAlertUpdated={jest.fn()}
+        />
+      </Router>
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
   it('shows a callout when _id or _index are missing from hit.raw', async () => {
     const hit = { id: '1', raw: {}, flattened: {} } as unknown as DataTableRecord;
     const store = createStore(() => ({}));
@@ -340,6 +358,39 @@ describe('AlertFlyoutHeader', () => {
     });
   });
 
+  it('shows linked project callout text for remote docs in serverless', async () => {
+    const hit = {
+      id: '1',
+      raw: { _id: '1', _index: 'remote-cluster:logs-system-default' },
+      flattened: {},
+    } as unknown as DataTableRecord;
+    const store = createStore(() => ({}));
+    const history = createMemoryHistory({ initialEntries: ['/discover'] });
+    const serverlessServicesMock = {
+      ...servicesMock,
+      cloud: { isServerlessEnabled: true },
+    } as unknown as StartServices;
+
+    render(
+      <Router history={history}>
+        <AlertFlyoutHeader
+          hit={hit}
+          servicesPromise={Promise.resolve(serverlessServicesMock)}
+          storePromise={Promise.resolve(store as never)}
+          onAlertUpdated={jest.fn()}
+        />
+      </Router>
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.getByText(
+          'This event originates from a linked project. Some features may not be available.'
+        )
+      ).toBeInTheDocument();
+    });
+  });
+
   it('does not show the callout when both _id and _index are present in hit.raw', async () => {
     const hit = {
       id: '1',

x-pack/solutions/security/plugins/security_solution/public/one_discover/alert_flyout_header_component/index.tsx

@@ -138,43 +138,35 @@ export const AlertFlyoutHeader = ({
     };
   }, [servicesPromise, storePromise]);
 
-  const isMissingMetadata = !hit.raw._id || !hit.raw._index;
-
-  const metadataCallout = isMissingMetadata ? (
-    <>
-      <EuiCallOut announceOnMount size="s" title={MISSING_METADATA_CALLOUT} />
-      <EuiSpacer size="s" />
-    </>
-  ) : null;
-  const remoteDocumentCallout = (
-    <RemoteDocumentCallout hit={hit}>
-      <EuiSpacer size="s" />
-    </RemoteDocumentCallout>
-  );
-
   if (!services || !store) {
-    return (
-      <>
-        {metadataCallout}
-        {remoteDocumentCallout}
-      </>
-    );
+    return null;
   }
 
+  const isMissingMetadata = !hit.raw._id || !hit.raw._index;
+
   return (
     <>
-      {metadataCallout}
-      {remoteDocumentCallout}
+      {isMissingMetadata ? (
+        <>
+          <EuiCallOut announceOnMount size="s" title={MISSING_METADATA_CALLOUT} />
+          <EuiSpacer size="s" />
+        </>
+      ) : null}
       {flyoutProviders({
         services,
         store,
         children: (
-          <Header
-            hit={hit}
-            renderCellActions={renderCellActions}
-            onAlertUpdated={onAlertUpdated}
-            onShowNotes={openNotesFlyout}
-          />
+          <>
+            <RemoteDocumentCallout hit={hit}>
+              <EuiSpacer size="s" />
+            </RemoteDocumentCallout>
+            <Header
+              hit={hit}
+              renderCellActions={renderCellActions}
+              onAlertUpdated={onAlertUpdated}
+              onShowNotes={openNotesFlyout}
+            />
+          </>
         ),
       })}
     </>