[Security Solution] Display license type on the onboarding hub (elast…

…ic#175719)

## Summary

issue: elastic#175665

Traditional:


https://github.com/elastic/kibana/assets/6295984/d74891e8-e22c-4f6a-9783-caae0ea8444e



Serverless:
![Screenshot 2024-01-27 at 01 33
17](https://github.com/elastic/kibana/assets/6295984/5d7dd6f8-5cd7-4fcd-addb-a4ea5ecb0f25)




### Checklist

Delete any items that are not applicable to this PR.


- [x] [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/public/common/components/landing_page/index.tsx

@@ -5,14 +5,13 @@
  * 2.0.
  */
 
-import React, { memo, useMemo } from 'react';
+import React, { memo } from 'react';
 import { useSourcererDataView } from '../../containers/sourcerer';
-import { getOnboardingComponent } from './onboarding';
+import { Onboarding } from './onboarding';
 
 export const LandingPageComponent = memo(() => {
   const { indicesExist } = useSourcererDataView();
-  const OnBoarding = useMemo(() => getOnboardingComponent(), []);
-  return <OnBoarding indicesExist={indicesExist} />;
+  return <Onboarding indicesExist={indicesExist} />;
 });
 
 LandingPageComponent.displayName = 'LandingPageComponent';

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

@@ -6,6 +6,6 @@
  */
 import React from 'react';
 
-export const getOnboardingComponent = jest
+export const Onboarding = jest
   .fn()
-  .mockReturnValue(() => <div data-test-subj="onboarding-with-settings" />);
+  .mockReturnValue(<div data-test-subj="onboarding-with-settings" />);

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

@@ -4,12 +4,15 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+import React, { lazy, Suspense } from 'react';
+import { EuiLoadingLogo } from '@elastic/eui';
 
-import React from 'react';
+const OnboardingLazy = lazy(() => import('./onboarding_with_settings'));
 
-import { Onboarding } from './lazy';
+const centerLogoStyle = { display: 'flex', margin: 'auto' };
 
-export const getOnboardingComponent = (): React.ComponentType<{ indicesExist?: boolean }> =>
-  function OnBoardingComponent({ indicesExist }: { indicesExist?: boolean }) {
-    return <Onboarding indicesExist={indicesExist} />;
-  };
+export const Onboarding = ({ indicesExist }: { indicesExist?: boolean }) => (
+  <Suspense fallback={<EuiLoadingLogo logo="logoSecurity" size="xl" style={centerLogoStyle} />}>
+    <OnboardingLazy indicesExist={indicesExist} />
+  </Suspense>
+);

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

@@ -18,6 +18,13 @@ import { ProductLine, ProductTier } from './configs';
 jest.mock('./toggle_panel');
 jest.mock('./hooks/use_project_features_url');
 jest.mock('./hooks/use_projects_url');
+jest.mock('../../../lib/kibana', () => {
+  const original = jest.requireActual('../../../lib/kibana');
+  return {
+    ...original,
+    useAppUrl: jest.fn().mockReturnValue({ getAppUrl: jest.fn().mockReturnValue('mock url') }),
+  };
+});
 jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {

x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/current_plan.styles.ts

@@ -0,0 +1,40 @@
+/*
+ * 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 { useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/css';
+import { useMemo } from 'react';
+
+export const useCurrentPlanStyles = () => {
+  const { euiTheme } = useEuiTheme();
+  const styles = useMemo(() => {
+    return {
+      currentPlanWrapperStyles: css({
+        backgroundColor: euiTheme.colors.lightestShade,
+        borderRadius: '56px',
+        padding: `${euiTheme.size.xs} ${euiTheme.size.s} ${euiTheme.size.xs} ${euiTheme.size.m}`,
+        height: euiTheme.size.xl,
+      }),
+      currentPlanTextStyles: css({
+        fontSize: euiTheme.size.m,
+        fontWeight: euiTheme.font.weight.bold,
+        paddingRight: euiTheme.size.xs,
+      }),
+      projectFeaturesUrlStyles: css({
+        marginLeft: euiTheme.size.xs,
+      }),
+    };
+  }, [
+    euiTheme.colors.lightestShade,
+    euiTheme.font.weight.bold,
+    euiTheme.size.m,
+    euiTheme.size.s,
+    euiTheme.size.xl,
+    euiTheme.size.xs,
+  ]);
+
+  return styles;
+};

x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/current_plan_badge.styles.ts

@@ -0,0 +1,26 @@
+/*
+ * 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 { useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/css';
+import { useMemo } from 'react';
+
+export const useCurrentPlanBadgeStyles = () => {
+  const { euiTheme } = useEuiTheme();
+  const styles = useMemo(() => {
+    return {
+      wrapperStyles: css({
+        fontSize: euiTheme.size.m,
+        lineHeight: euiTheme.size.m,
+      }),
+      textStyles: css({
+        textTransform: 'capitalize',
+      }),
+    };
+  }, [euiTheme.size.m]);
+
+  return styles;
+};

x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/welcome_header.styles.ts

@@ -45,34 +45,16 @@ export const useWelcomeHeaderStyles = () => {
       headerContentStyles: css({
         width: `${CONTENT_WIDTH / 2}px`,
       }),
-      currentPlanWrapperStyles: css({
-        backgroundColor: euiTheme.colors.lightestShade,
-        borderRadius: '56px',
-        padding: `${euiTheme.size.xs} ${euiTheme.size.s} ${euiTheme.size.xs} ${euiTheme.size.m}`,
-        height: euiTheme.size.xl,
-      }),
-      currentPlanTextStyles: css({
-        fontSize: euiTheme.size.m,
-        fontWeight: euiTheme.font.weight.bold,
-        paddingRight: euiTheme.size.xs,
-      }),
-      projectFeaturesUrlStyles: css({
-        paddingLeft: euiTheme.size.xs,
-      }),
     };
   }, [
     euiTheme.base,
     euiTheme.colors.darkShade,
-    euiTheme.colors.lightestShade,
     euiTheme.colors.subduedText,
     euiTheme.colors.title,
     euiTheme.font.weight.bold,
     euiTheme.font.weight.regular,
     euiTheme.size.l,
-    euiTheme.size.m,
     euiTheme.size.s,
-    euiTheme.size.xl,
-    euiTheme.size.xs,
   ]);
   return welcomeHeaderStyles;
 };

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

@@ -34,6 +34,13 @@ export const CURRENT_PLAN_LABEL = i18n.translate(
   }
 );
 
+export const CURRENT_TIER_LABEL = i18n.translate(
+  'xpack.securitySolution.onboarding.currentTier.label',
+  {
+    defaultMessage: 'Current tier:',
+  }
+);
+
 export const PROGRESS_TRACKER_LABEL = i18n.translate(
   'xpack.securitySolution.onboarding.progressTracker.progressBar.label',
   { defaultMessage: 'PROGRESS' }

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

@@ -0,0 +1,95 @@
+/*
+ * 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 } from '@testing-library/react';
+import { useLicense } from '../../../../hooks/use_license';
+import { useAppUrl } from '../../../../lib/kibana';
+import { CurrentPlan } from './current_plan';
+import type { LicenseService } from '../../../../../../common/license';
+
+jest.mock('../../../../hooks/use_license');
+jest.mock('../../../../lib/kibana');
+
+const mockUseLicense = useLicense as jest.MockedFunction<typeof useLicense>;
+const mockUseAppUrl = useAppUrl as jest.MockedFunction<typeof useAppUrl>;
+const mockManagementUrl = 'https://management';
+const mockProjectFeaturesUrl = 'https://projectFeatures';
+
+describe('CurrentPlan', () => {
+  beforeEach(() => {
+    mockUseAppUrl.mockReturnValue({
+      getAppUrl: jest.fn(),
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders nothing if license is enterprise', () => {
+    mockUseLicense.mockReturnValue({
+      getLicenseType: jest.fn().mockReturnValue('enterprise'),
+      isEnterprise: jest.fn().mockReturnValue(true),
+    } as unknown as LicenseService);
+
+    const { container } = render(
+      <CurrentPlan productTier={undefined} projectFeaturesUrl={undefined} />
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  test('renders nothing if license type is enterprise', () => {
+    mockUseLicense.mockReturnValue({
+      getLicenseType: jest.fn().mockReturnValue('enterprise'),
+      isEnterprise: jest.fn().mockReturnValue(true),
+    } as unknown as LicenseService);
+
+    const { container } = render(
+      <CurrentPlan productTier={undefined} projectFeaturesUrl={mockProjectFeaturesUrl} />
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  test('renders component with valid productTier and projectFeaturesUrl', () => {
+    mockUseLicense.mockReturnValue({
+      getLicenseType: jest.fn().mockReturnValue('basic'),
+      isEnterprise: jest.fn().mockReturnValue(false),
+    } as unknown as LicenseService);
+
+    mockUseAppUrl.mockReturnValue({
+      getAppUrl: jest.fn().mockReturnValue(mockManagementUrl),
+    });
+
+    const { getByTestId } = render(
+      <CurrentPlan productTier="gold" projectFeaturesUrl={mockProjectFeaturesUrl} />
+    );
+
+    expect(getByTestId('currentPlanLabel')).toHaveTextContent('Current tier:');
+    expect(getByTestId('currentPlanLink').getAttribute('href')).toEqual(mockProjectFeaturesUrl);
+  });
+
+  test('renders component without productTier and projectFeaturesUrl', () => {
+    mockUseLicense.mockReturnValue({
+      getLicenseType: jest.fn().mockReturnValue('basic'),
+      isEnterprise: jest.fn().mockReturnValue(false),
+    } as unknown as LicenseService);
+
+    mockUseAppUrl.mockReturnValue({
+      getAppUrl: jest.fn().mockReturnValue(mockManagementUrl),
+    });
+
+    const { getByTestId } = render(
+      <CurrentPlan productTier={undefined} projectFeaturesUrl={undefined} />
+    );
+
+    expect(getByTestId('currentPlanLabel')).toHaveTextContent('Current plan:');
+    expect(getByTestId('currentPlanLink').getAttribute('href')).toEqual(mockManagementUrl);
+  });
+});

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

@@ -0,0 +1,80 @@
+/*
+ * 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 { EuiButtonIcon, EuiSpacer } from '@elastic/eui';
+import classnames from 'classnames';
+import { isEmpty } from 'lodash/fp';
+import React from 'react';
+import { useLicense } from '../../../../hooks/use_license';
+import { useAppUrl } from '../../../../lib/kibana';
+import { useCurrentPlanStyles } from '../styles/current_plan.styles';
+import { CURRENT_PLAN_LABEL, CURRENT_TIER_LABEL } from '../translations';
+import { CurrentPlanBadge } from './current_plan_badge';
+
+const CurrentPlanComponent = ({
+  productTier,
+  projectFeaturesUrl,
+}: {
+  productTier: string | undefined;
+  projectFeaturesUrl: string | undefined;
+}) => {
+  const licenseService = useLicense();
+  const licenseType = licenseService.getLicenseType();
+  const isTrial = licenseType === 'trial';
+  const isEnterprise = licenseService.isEnterprise() && !isTrial;
+
+  const { getAppUrl } = useAppUrl();
+  const licenseManagementUrl = getAppUrl({
+    appId: 'management',
+    path: 'stack/license_management/home',
+  });
+
+  const currentPlan = productTier ? productTier : !isEmpty(licenseType) ? licenseType : undefined;
+  const label = productTier ? CURRENT_TIER_LABEL : CURRENT_PLAN_LABEL;
+  const link = productTier ? projectFeaturesUrl : licenseManagementUrl;
+
+  const { currentPlanWrapperStyles, currentPlanTextStyles, projectFeaturesUrlStyles } =
+    useCurrentPlanStyles();
+  const currentPlanWrapperClassNames = classnames(
+    'eui-displayInlineBlock',
+    currentPlanWrapperStyles
+  );
+  const projectFeaturesUrlClassNames = classnames('eui-alignMiddle', projectFeaturesUrlStyles);
+
+  if (isEnterprise && productTier == null) {
+    return null;
+  }
+
+  return (
+    <>
+      <EuiSpacer size="l" />
+      <div>
+        <div className={currentPlanWrapperClassNames}>
+          <span data-test-subj="currentPlanLabel" className={currentPlanTextStyles}>
+            {label}
+          </span>
+          <CurrentPlanBadge currentPlan={currentPlan} />
+
+          {link && (
+            <EuiButtonIcon
+              data-test-subj="currentPlanLink"
+              className={projectFeaturesUrlClassNames}
+              color="primary"
+              href={link}
+              target="_blank"
+              aria-label={label}
+              iconType="gear"
+              size="xs"
+            />
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export const CurrentPlan = React.memo(CurrentPlanComponent);