From 3fdb04d2942de9614630f012a159b6aa850b8fa4 Mon Sep 17 00:00:00 2001
From: Paulo Silva <paulo.henrique@elastic.co>
Date: Thu, 6 Mar 2025 14:13:08 -0800
Subject: [PATCH] [Asset Inventory] Initializing onboarding screen (#213302)

## Summary

It closes https://github.com/elastic/kibana/issues/210714

This PR adds the Initializing screen shown during the initialization
step of the Asset Inventory onboarding.

## Recording


https://github.com/user-attachments/assets/01631884-60bb-417c-9f36-3b37ca8de4a4
---
 .../onboarding/asset_inventory_onboarding.tsx |  5 +-
 .../components/onboarding/initializing.tsx    | 99 +++++++++++++++++++
 2 files changed, 102 insertions(+), 2 deletions(-)
 create mode 100644 x-pack/solutions/security/plugins/security_solution/public/asset_inventory/components/onboarding/initializing.tsx

diff --git a/x-pack/solutions/security/plugins/security_solution/public/asset_inventory/components/onboarding/asset_inventory_onboarding.tsx b/x-pack/solutions/security/plugins/security_solution/public/asset_inventory/components/onboarding/asset_inventory_onboarding.tsx
index 7b795e61af505..48bf5da1d13df 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/asset_inventory/components/onboarding/asset_inventory_onboarding.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/asset_inventory/components/onboarding/asset_inventory_onboarding.tsx
@@ -10,6 +10,7 @@ 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';
+import { Initializing } from './initializing';
 
 /**
  * This component serves as a wrapper to render appropriate onboarding screens
@@ -29,8 +30,8 @@ export const AssetInventoryOnboarding: FC<PropsWithChildren> = ({ children }) =>
   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 'initializing': // The onboarding process is currently initializing.
+      return <Initializing />;
     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.
diff --git a/x-pack/solutions/security/plugins/security_solution/public/asset_inventory/components/onboarding/initializing.tsx b/x-pack/solutions/security/plugins/security_solution/public/asset_inventory/components/onboarding/initializing.tsx
new file mode 100644
index 0000000000000..31094e0bc3fe3
--- /dev/null
+++ b/x-pack/solutions/security/plugins/security_solution/public/asset_inventory/components/onboarding/initializing.tsx
@@ -0,0 +1,99 @@
+/*
+ * 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 {
+  EuiEmptyPrompt,
+  EuiButton,
+  EuiTitle,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLoadingLogo,
+  EuiText,
+  EuiIcon,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { INTEGRATIONS_PLUGIN_ID } from '@kbn/fleet-plugin/common';
+import { InventoryTitle } from '../inventory_title';
+import { CenteredWrapper } from './centered_wrapper';
+
+const TEST_SUBJ = 'assetInventory:onboarding:initializing';
+
+export const Initializing = () => {
+  const { application } = useKibana().services;
+
+  return (
+    <EuiFlexGroup>
+      <EuiFlexItem>
+        <InventoryTitle />
+        <CenteredWrapper>
+          <EuiEmptyPrompt
+            data-test-subj={TEST_SUBJ}
+            icon={<EuiLoadingLogo logo="logoSecurity" size="xl" />}
+            title={
+              <h2>
+                <FormattedMessage
+                  id="xpack.securitySolution.assetInventory.onboarding.initializing.title"
+                  defaultMessage="Initializing Asset Inventory"
+                />
+              </h2>
+            }
+            color="plain"
+            body={
+              <FormattedMessage
+                id="xpack.securitySolution.assetInventory.onboarding.initializing.description"
+                defaultMessage="Your Asset Inventory is being set up. This may take a few moments as we prepare to provide you with centralized visibility into your assets. Check back shortly to start exploring your assets."
+              />
+            }
+            footer={
+              <EuiFlexGroup alignItems="center">
+                <EuiFlexItem grow={false}>
+                  <EuiIcon type="fleetApp" size="xl" />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiFlexGroup direction="column" alignItems="flexStart" gutterSize="none">
+                    <EuiFlexItem>
+                      <EuiTitle size="xxs">
+                        <strong>
+                          <FormattedMessage
+                            id="xpack.securitySolution.assetInventory.initializing.exploreTitle"
+                            defaultMessage="Explore Asset Integrations"
+                          />
+                        </strong>
+                      </EuiTitle>
+                    </EuiFlexItem>
+                    <EuiFlexItem>
+                      <EuiText size="s">
+                        <FormattedMessage
+                          id="xpack.securitySolution.assetInventory.initializing.exploreDescription"
+                          defaultMessage="Explore the out-of-the-box integrations we provide to connect your data sources."
+                        />
+                      </EuiText>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiButton
+                    size="s"
+                    iconType="plusInCircle"
+                    onClick={() => application?.navigateToApp(INTEGRATIONS_PLUGIN_ID)}
+                  >
+                    <FormattedMessage
+                      id="xpack.securitySolution.assetInventory.initializing.addIntegration"
+                      defaultMessage="Add integration"
+                    />
+                  </EuiButton>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            }
+          />
+        </CenteredWrapper>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};