[Security Solution] Create new feature flag - dataIngestionHubEnabled (…

…elastic#189620)

## Summary

New feature flag added: `dataIngestionHubEnabled` and implemented in
`onboarding` page.


### Checklist

Delete any items that are not applicable to this PR.

- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

x-pack/plugins/security_solution/common/experimental_features.ts

@@ -243,6 +243,11 @@ export const allowedExperimentalValues = Object.freeze({
    * Adds a new option to filter descendants of a process for Management / Event Filters
    */
   filterProcessDescendantsForEventFiltersEnabled: false,
+
+  /**
+   * Enables the new data ingestion hub
+   */
+  dataIngestionHubEnabled: false,
 });
 
 type ExperimentalConfigKeys = Array<keyof ExperimentalFeatures>;

x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/data_ingestion_hub_header/index.tsx

@@ -0,0 +1,14 @@
+/*
+ * 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';
+
+const DataIngestionHubHeaderComponent: React.FC = () => {
+  return <div data-test-subj="data-ingestion-hub-header" />;
+};
+
+export const DataIngestionHubHeader = React.memo(DataIngestionHubHeaderComponent);

x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/onboarding.test.tsx

@@ -17,10 +17,13 @@ import { ProductLine, ProductTier } from './configs';
 import { useCurrentUser, useKibana } from '../../../lib/kibana';
 import type { AppContextTestRender } from '../../../mock/endpoint';
 import { createAppRootMockRenderer } from '../../../mock/endpoint';
+import { useIsExperimentalFeatureEnabled } from '../../../hooks/use_experimental_features';
 
 jest.mock('./toggle_panel');
 jest.mock('../../../lib/kibana');
-
+jest.mock('../../../hooks/use_experimental_features', () => ({
+  useIsExperimentalFeatureEnabled: jest.fn().mockReturnValue(false),
+}));
 (useCurrentUser as jest.Mock).mockReturnValue({ fullName: 'UserFullName' });
 
 describe('OnboardingComponent', () => {
@@ -41,6 +44,7 @@ describe('OnboardingComponent', () => {
   };
 
   beforeEach(() => {
+    (useIsExperimentalFeatureEnabled as jest.Mock).mockReturnValue(false);
     mockedContext = createAppRootMockRenderer();
     render = () => (renderResult = mockedContext.render(<OnboardingComponent {...props} />));
   });
@@ -72,6 +76,17 @@ describe('OnboardingComponent', () => {
     expect(welcomeHeader).toBeInTheDocument();
     expect(togglePanel).toBeInTheDocument();
   });
+
+  it('should render dataIngestionHubHeader if dataIngestionHubEnabled flag is true', () => {
+    (useIsExperimentalFeatureEnabled as jest.Mock).mockReturnValue(true);
+
+    render();
+
+    const dataIngestionHubHeader = renderResult.getByTestId('data-ingestion-hub-header');
+
+    expect(dataIngestionHubHeader).toBeInTheDocument();
+  });
+
   describe('AVC 2024 Results banner', () => {
     it('should render on the page', () => {
       render();

x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/onboarding.tsx

@@ -16,6 +16,7 @@ import { Progress } from './progress_bar';
 import { StepContextProvider } from './context/step_context';
 import { CONTENT_WIDTH } from './helpers';
 import { WelcomeHeader } from './welcome_header';
+import { DataIngestionHubHeader } from './data_ingestion_hub_header';
 import { Footer } from './footer';
 import { useScrollToHash } from './hooks/use_scroll';
 import type { SecurityProductTypes } from './configs';
@@ -25,6 +26,7 @@ import type { StepId } from './types';
 import { useOnboardingStyles } from './styles/onboarding.styles';
 import { useKibana } from '../../../lib/kibana';
 import type { OnboardingHubStepLinkClickedParams } from '../../../lib/telemetry/events/onboarding/types';
+import { useIsExperimentalFeatureEnabled } from '../../../hooks/use_experimental_features';
 
 interface OnboardingProps {
   indicesExist?: boolean;
@@ -65,6 +67,7 @@ export const OnboardingComponent: React.FC<OnboardingProps> = ({
     },
     [telemetry]
   );
+  const isDataIngestionHubEnabled = useIsExperimentalFeatureEnabled('dataIngestionHubEnabled');
 
   const [showAVCBanner, setShowAVCBanner] = useState(
     storage.get('securitySolution.showAvcBanner') ?? true
@@ -76,6 +79,16 @@ export const OnboardingComponent: React.FC<OnboardingProps> = ({
 
   useScrollToHash();
 
+  const renderDataIngestionHubHeader = useMemo(
+    () =>
+      isDataIngestionHubEnabled ? (
+        <DataIngestionHubHeader />
+      ) : (
+        <WelcomeHeader productTier={productTier} />
+      ),
+    [isDataIngestionHubEnabled, productTier]
+  );
+
   return (
     <div className={wrapperStyles}>
       {showAVCBanner && (
@@ -84,7 +97,7 @@ export const OnboardingComponent: React.FC<OnboardingProps> = ({
         </KibanaPageTemplate.Section>
       )}
       <KibanaPageTemplate.Section restrictWidth={CONTENT_WIDTH} paddingSize="xl">
-        <WelcomeHeader productTier={productTier} />
+        {renderDataIngestionHubHeader}
       </KibanaPageTemplate.Section>
       <KibanaPageTemplate.Section
         restrictWidth={CONTENT_WIDTH}