[8.17] Only show data warning screen on Serverless (#201920) (#210383)

# Backport This will backport the following commits from `main` to `8.17`: - [Only show data warning screen on Serverless (#201920)](https://github.com/elastic/kibana/pull/201920)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Charlotte Alexandra Wilson <CAWilson94@users.noreply.github.com>
2025-04-24 01:38:56 -04:00 · 2025-02-11 02:38:34 +11:00 · 2025-02-11 02:38:34 +11:00 · 33a9b8a99b
commit 33a9b8a99b
parent 41f1d2b174
8 changed files with 92 additions and 2 deletions
--- a/x-pack/plugins/security_solution/public/contract_components.ts
+++ b/x-pack/plugins/security_solution/public/contract_components.ts
@ -11,6 +11,7 @@ import type { Observable } from 'rxjs';
 export type ContractComponents = Partial<{
  GetStarted: React.ComponentType<{ indicesExist?: boolean }>;
  DashboardsLandingCallout: React.ComponentType<{}>;
+  EnablementModalCallout: React.ComponentType<{}>;
 }>;

 export type SetComponents = (components: ContractComponents) => void;
--- a/x-pack/plugins/security_solution/public/entity_analytics/components/entity_store/components/enablement_modal.test.tsx
+++ b/x-pack/plugins/security_solution/public/entity_analytics/components/entity_store/components/enablement_modal.test.tsx
@ -6,6 +6,7 @@
 */

 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { EntityStoreEnablementModal } from './enablement_modal';
 import { TestProviders } from '../../../../common/mock';
@ -25,6 +26,11 @@ jest.mock('../../../hooks/use_missing_risk_engine_privileges', () => ({
  useMissingRiskEnginePrivileges: () => mockUseMissingRiskEnginePrivileges(),
 }));

+const mockUseContractComponents = jest.fn(() => ({}));
+jest.mock('../../../../common/hooks/use_contract_component', () => ({
+  useContractComponents: () => mockUseContractComponents(),
+}));
+
 const defaultProps = {
  visible: true,
  toggle: mockToggle,
@ -77,8 +83,10 @@ const missingRiskEnginePrivileges: RiskEngineMissingPrivilegesResponse = {
  },
 };

-const renderComponent = (props = defaultProps) => {
-  return render(<EntityStoreEnablementModal {...props} />, { wrapper: TestProviders });
+const renderComponent = async (props = defaultProps) => {
+  await act(async () => {
+    return render(<EntityStoreEnablementModal {...props} />, { wrapper: TestProviders });
+  });
 };

 describe('EntityStoreEnablementModal', () => {
@ -172,5 +180,16 @@ describe('EntityStoreEnablementModal', () => {
      renderComponent();
      expect(screen.getByTestId('callout-missing-risk-engine-privileges')).toBeInTheDocument();
    });
+
+    it('should render additional charges message when available', async () => {
+      const EnablementModalCalloutMock = () => <span data-test-subj="enablement-modal-test" />;
+      mockUseContractComponents.mockReturnValue({
+        EnablementModalCallout: EnablementModalCalloutMock,
+      });
+
+      await renderComponent();
+
+      expect(screen.queryByTestId('enablement-modal-test')).toBeInTheDocument();
+    });
  });
 });
--- a/x-pack/plugins/security_solution/public/entity_analytics/components/entity_store/components/enablement_modal.tsx
+++ b/x-pack/plugins/security_solution/public/entity_analytics/components/entity_store/components/enablement_modal.tsx
@ -26,6 +26,7 @@ import {
 import { css } from '@emotion/react';
 import React, { useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { useContractComponents } from '../../../../common/hooks/use_contract_component';
 import { TECHNICAL_PREVIEW, TECHNICAL_PREVIEW_TOOLTIP } from '../../../../common/translations';
 import {
  ENABLEMENT_DESCRIPTION_RISK_ENGINE_ONLY,
@ -72,6 +73,7 @@ export const EntityStoreEnablementModal: React.FC<EntityStoreEnablementModalProp
    useEntityEnginePrivileges();
  const riskEnginePrivileges = useMissingRiskEnginePrivileges();
  const enablementOptions = enablements.riskScore || enablements.entityStore;
+  const { EnablementModalCallout } = useContractComponents();

  if (!visible) {
    return null;
@ -100,6 +102,7 @@ export const EntityStoreEnablementModal: React.FC<EntityStoreEnablementModalProp

      <EuiModalBody>
        <EuiFlexGroup direction="column">
+          <EuiFlexItem>{EnablementModalCallout && <EnablementModalCallout />}</EuiFlexItem>
          <EuiFlexItem>
            <EuiSwitch
              label={
--- a/x-pack/plugins/security_solution_serverless/public/components/enablement_modal_callout/enablement_modal_callout.tsx
+++ b/x-pack/plugins/security_solution_serverless/public/components/enablement_modal_callout/enablement_modal_callout.tsx
@ -0,0 +1,21 @@
+/*
+ * 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 React from 'react';
+import { EuiText } from '@elastic/eui';
+import { ADDITIONAL_CHARGES_MESSAGE } from '../../upselling/translations';
+
+export const EnablementModalCallout: React.FC = () => {
+  return (
+    <div>
+      <EuiText>{ADDITIONAL_CHARGES_MESSAGE}</EuiText>
+    </div>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default EnablementModalCallout;
--- a/x-pack/plugins/security_solution_serverless/public/components/enablement_modal_callout/index.tsx
+++ b/x-pack/plugins/security_solution_serverless/public/components/enablement_modal_callout/index.tsx
@ -0,0 +1,19 @@
+/*
+ * 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 React from 'react';
+import type { Services } from '../../common/services';
+import { ServicesProvider } from '../../common/services';
+import { EnablementModalCallout } from './lazy';
+
+export const getEnablementModalCallout = (services: Services): React.ComponentType =>
+  function EnablementModalCalloutComponent() {
+    return (
+      <ServicesProvider services={services}>
+        <EnablementModalCallout />
+      </ServicesProvider>
+    );
+  };
--- a/x-pack/plugins/security_solution_serverless/public/components/enablement_modal_callout/lazy.tsx
+++ b/x-pack/plugins/security_solution_serverless/public/components/enablement_modal_callout/lazy.tsx
@ -0,0 +1,17 @@
+/*
+ * 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 React, { lazy, Suspense } from 'react';
+import { EuiLoadingSpinner } from '@elastic/eui';
+
+const EnablementModalCalloutLazy = lazy(() => import('./enablement_modal_callout'));
+
+export const EnablementModalCallout = () => (
+  <Suspense fallback={<EuiLoadingSpinner size="s" />}>
+    <EnablementModalCalloutLazy />
+  </Suspense>
+);
--- a/x-pack/plugins/security_solution_serverless/public/plugin.ts
+++ b/x-pack/plugins/security_solution_serverless/public/plugin.ts
@ -23,6 +23,7 @@ import {
  type ExperimentalFeatures,
 } from '../common/experimental_features';
 import { setOnboardingSettings } from './onboarding';
+import { getEnablementModalCallout } from './components/enablement_modal_callout';

 export class SecuritySolutionServerlessPlugin
  implements
@ -69,6 +70,7 @@ export class SecuritySolutionServerlessPlugin

    securitySolution.setComponents({
      DashboardsLandingCallout: getDashboardsLandingCallout(services),
+      EnablementModalCallout: getEnablementModalCallout(services),
    });

    setOnboardingSettings(services);
--- a/x-pack/plugins/security_solution_serverless/public/upselling/translations.ts
+++ b/x-pack/plugins/security_solution_serverless/public/upselling/translations.ts
@ -18,3 +18,11 @@ export const UPGRADE_PRODUCT_MESSAGE = (requiredProduct: string) =>
      },
    }
  );
+
+export const ADDITIONAL_CHARGES_MESSAGE = i18n.translate(
+  'xpack.securitySolutionServerless.entityStoreEnablementCallout.additionalChargesMessage',
+  {
+    defaultMessage:
+      'Please be aware that activating these features may incur additional charges depending on your subscription plan. Review your plan details carefully to avoid unexpected costs before proceeding.',
+  }
+);