Asset Inventory Onboarding and Context Integration (#212315)

### Summary

It closes #210713

This PR introduces the **onboarding flow for Asset Inventory**, ensuring
users are guided through an enablement process when accessing the Asset
Inventory page for the first time.

#### Changes:

**Asset Inventory API Forwarding**  
- The Asset Inventory API now proxies enablement requests to the
**Entity Store API** (`/api/entity_store/engines/enable`).
- This ensures that any future **enhancements for Asset Inventory
enablement** are already handled on the server side.

**Asset Inventory Context**  
- Introduced the `AssetInventoryContext` to centralize **Asset Inventory
status management** based on the `/api/entity_store/engines/status` data
(`disabled`, `initializing`, `ready`, etc.).
- Allows any component to **consume the onboarding state** and react
accordingly.

**"Get Started" Onboarding Experience**  
- Implemented a **new onboarding screen** that appears when Asset
Inventory is disabled.
   - Includes:
     - Informative **title and description** about the feature.
     - A **call-to-action button** to enable Asset Inventory.
     - **Loading states and error handling** for the API call.

**API Integration and Hooks**  
- Created `useEnableAssetInventory` to abstract and handle enablement
logic via **React Query**.
- Created `useAssetInventoryRoutes` to abstract API calls for fetching
and enabling Asset Inventory.

**HoverForExplanation Component**  
- Introduced `HoverForExplanation`, a **tooltip-based helper component**
that enhances the onboarding description.
- Provides **inline explanations** for key terms like **identity
providers, cloud services, MDMs, and databases**, ensuring users
understand **data sources** in Asset Inventory.


**Testing & Error Handling**  
   - Added **unit tests** for the onboarding component and hooks.  
- Implemented error handling for failed API requests (e.g., permission
errors, server failures).

#### Screenshots


![image](https://github.com/user-attachments/assets/b2e08497-6ca1-47bd-8627-f32b7c3172f3)



https://github.com/user-attachments/assets/1280404e-9cb3-4288-91a7-640f8f1b458a

#### How to test it locally

- Ensure the `assetInventoryUXEnabled` feature flag is enabled on
kibana.yml file:


```
xpack.securitySolution.enableExperimental: ['assetInventoryUXEnabled']
```

- Ensure the Entity Store is Off and data is removed (initial state), so
the onboarding is visible (If the Entity Store is installed by other
means the onboarding will direct users to the empty state component or
to the all assets page)

---------

Co-authored-by: kibanamachine <[email protected]>

Author: opauloh

x-pack/solutions/security/plugins/security_solution/common/api/asset_inventory/constants.ts

@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+
+export const ASSET_INVENTORY_ENABLE_API_PATH = '/api/asset_inventory/enable';
+export const ASSET_INVENTORY_STATUS_API_PATH = '/api/asset_inventory/status';
+export const ASSET_INVENTORY_DELETE_API_PATH = '/api/asset_inventory/delete';

x-pack/solutions/security/plugins/security_solution/common/api/asset_inventory/types.ts

@@ -0,0 +1,28 @@
+/*
+ * 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 type { ServerApiError } from '../../../public/common/types';
+import type { EntityAnalyticsPrivileges } from '../entity_analytics';
+import type { InitEntityStoreResponse } from '../entity_analytics/entity_store/enable.gen';
+
+export type AssetInventoryStatus =
+  | 'disabled'
+  | 'initializing'
+  | 'empty'
+  | 'permission_denied'
+  | 'ready';
+
+export interface AssetInventoryStatusResponse {
+  status: AssetInventoryStatus;
+  privileges?: EntityAnalyticsPrivileges['privileges'];
+}
+
+export type AssetInventoryEnableResponse = InitEntityStoreResponse;
+
+export interface AssetInventoryServerApiError {
+  body: ServerApiError;
+}

x-pack/solutions/security/plugins/security_solution/public/asset_inventory/components/asset_inventory_loading.tsx

@@ -0,0 +1,25 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem, EuiLoadingLogo, EuiSpacer } from '@elastic/eui';
+import { InventoryTitle } from './inventory_title';
+import { CenteredWrapper } from './onboarding/centered_wrapper';
+
+/**
+ * A loading state for the asset inventory page.
+ */
+export const AssetInventoryLoading = () => (
+  <EuiFlexGroup>
+    <EuiFlexItem>
+      <InventoryTitle />
+      <EuiSpacer size="l" />
+      <CenteredWrapper>
+        <EuiLoadingLogo logo="logoSecurity" size="xl" />
+      </CenteredWrapper>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);

x-pack/solutions/security/plugins/security_solution/public/asset_inventory/components/empty_state_illustration_container.tsx

@@ -0,0 +1,28 @@
+/*
+ * 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 { css } from '@emotion/react';
+import React from 'react';
+
+// width of the illustration used in the empty states
+const DEFAULT_ILLUSTRATION_WIDTH = 360;
+
+/**
+ * A container component that maintains a fixed width for SVG elements,
+ * this prevents the EmptyState component from flickering while the SVGs are loading.
+ */
+export const EmptyStateIllustrationContainer: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => (
+  <div
+    css={css`
+      width: ${DEFAULT_ILLUSTRATION_WIDTH}px;
+    `}
+  >
+    {children}
+  </div>
+);

x-pack/solutions/security/plugins/security_solution/public/asset_inventory/components/inventory_title.tsx

@@ -0,0 +1,22 @@
+/*
+ * 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 { EuiTitle } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+export const InventoryTitle = () => {
+  return (
+    <EuiTitle size="l" data-test-subj="inventory-title">
+      <h1>
+        <FormattedMessage
+          id="xpack.securitySolution.assetInventory.inventoryTitle"
+          defaultMessage="Inventory"
+        />
+      </h1>
+    </EuiTitle>
+  );
+};

x-pack/solutions/security/plugins/security_solution/public/asset_inventory/components/onboarding/asset_inventory_onboarding.tsx

@@ -0,0 +1,47 @@
+/*
+ * 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 { FC, PropsWithChildren } from 'react';
+import { GetStarted } from './get_started';
+import { AssetInventoryLoading } from '../asset_inventory_loading';
+import { useAssetInventoryStatus } from '../../hooks/use_asset_inventory_status';
+
+/**
+ * This component serves as a wrapper to render appropriate onboarding screens
+ * based on the current onboarding status. If no specific onboarding status
+ * matches, it will render the child components.
+ */
+export const AssetInventoryOnboarding: FC<PropsWithChildren> = ({ children }) => {
+  const { data, isLoading } = useAssetInventoryStatus();
+
+  if (isLoading || !data) {
+    return <AssetInventoryLoading />;
+  }
+
+  const { status, privileges } = data;
+
+  // Render different screens based on the onboarding status.
+  switch (status) {
+    case 'disabled': // The user has not yet started the onboarding process.
+      return <GetStarted />;
+    case 'initializing': // Todo: The onboarding process is currently initializing.
+      return <div>{'Initializing...'}</div>;
+    case 'empty': // Todo: Onboarding cannot proceed because no relevant data was found.
+      return <div>{'No data found.'}</div>;
+    case 'permission_denied': // Todo: User lacks the necessary permissions to proceed.
+      return (
+        <div>
+          {'Permission denied.'}
+          <pre>{JSON.stringify(privileges)}</pre>
+        </div>
+      );
+    default:
+      // If no onboarding status matches, render the child components.
+      return children;
+  }
+};

x-pack/solutions/security/plugins/security_solution/public/asset_inventory/components/onboarding/centered_wrapper.tsx

@@ -0,0 +1,30 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem, type CommonProps } from '@elastic/eui';
+import { css } from '@emotion/react';
+import React from 'react';
+
+/**
+ * A wrapper that centers its children both horizontally and vertically.
+ */
+export const CenteredWrapper = ({
+  children,
+  ...rest
+}: { children: React.ReactNode } & CommonProps) => (
+  <EuiFlexGroup
+    css={css`
+      // 250px is roughly the Kibana chrome with a page title and tabs
+      min-height: calc(100vh - 250px);
+    `}
+    justifyContent="center"
+    alignItems="center"
+    direction="column"
+    {...rest}
+  >
+    <EuiFlexItem>{children}</EuiFlexItem>
+  </EuiFlexGroup>
+);

x-pack/solutions/security/plugins/security_solution/public/asset_inventory/components/onboarding/get_started.test.tsx

@@ -0,0 +1,93 @@
+/*
+ * 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 { render, screen, waitFor } from '@testing-library/react';
+import { GetStarted } from './get_started';
+import { useEnableAssetInventory } from './hooks/use_enable_asset_inventory';
+import { TestProvider } from '../../test/test_provider';
+import { userEvent } from '@testing-library/user-event';
+
+jest.mock('./hooks/use_enable_asset_inventory', () => ({
+  useEnableAssetInventory: jest.fn(),
+}));
+
+const mockGetStarted = {
+  isEnabling: false,
+  error: null,
+  reset: jest.fn(),
+  enableAssetInventory: jest.fn(),
+};
+
+const renderWithProvider = (children: React.ReactNode) => {
+  return render(<TestProvider>{children}</TestProvider>);
+};
+
+describe('GetStarted Component', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+    (useEnableAssetInventory as jest.Mock).mockReturnValue(mockGetStarted);
+  });
+
+  it('renders the component', () => {
+    renderWithProvider(<GetStarted />);
+
+    expect(screen.getByText(/get started with asset inventory/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /enable asset inventory/i })).toBeInTheDocument();
+
+    expect(screen.getByText(/read documentation/i).closest('a')).toHaveAttribute(
+      'href',
+      'https://ela.st/asset-inventory'
+    );
+  });
+
+  it('calls enableAssetInventory when enable asset inventory button is clicked', async () => {
+    renderWithProvider(<GetStarted />);
+
+    await userEvent.click(screen.getByRole('button', { name: /enable asset inventory/i }));
+
+    expect(mockGetStarted.enableAssetInventory).toHaveBeenCalled();
+  });
+
+  it('shows a loading spinner when enabling', () => {
+    (useEnableAssetInventory as jest.Mock).mockReturnValue({
+      ...mockGetStarted,
+      isEnabling: true,
+    });
+
+    renderWithProvider(<GetStarted />);
+
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /enabling asset inventory/i })).toBeInTheDocument();
+  });
+
+  it('displays an error message when there is an error', () => {
+    const errorMessage = 'Task Manager is not available';
+    (useEnableAssetInventory as jest.Mock).mockReturnValue({
+      ...mockGetStarted,
+      error: errorMessage,
+    });
+
+    renderWithProvider(<GetStarted />);
+
+    expect(screen.getByText(/sorry, there was an error/i)).toBeInTheDocument();
+    expect(screen.getByText(errorMessage)).toBeInTheDocument();
+  });
+
+  it('calls reset when error message is dismissed', async () => {
+    (useEnableAssetInventory as jest.Mock).mockReturnValue({
+      ...mockGetStarted,
+      error: 'Task Manager is not available',
+    });
+
+    renderWithProvider(<GetStarted />);
+
+    await userEvent.click(screen.getByRole('button', { name: /dismiss/i }));
+
+    await waitFor(() => expect(mockGetStarted.reset).toHaveBeenCalled());
+  });
+});