From 5bad1756a002bb0a2d590bd36a7bd29958a075a0 Mon Sep 17 00:00:00 2001
From: semd <sergi.massaneda@elastic.co>
Date: Tue, 2 May 2023 18:50:20 +0200
Subject: [PATCH 01/11] security nav components from poc

---
 .../components/side_navigation/index.tsx      |  22 +++
 .../side_navigation/side_navigation.tsx       |  44 ++++++
 .../public/components/upselling/index.ts      |   7 +
 .../upselling/pages/cases_upselling.tsx       |  41 +++++
 .../upselling/pages/rules_upselling.tsx       |  58 +++++++
 .../upselling/register_upsellings.tsx         |  83 ++++++++++
 .../public/hooks/use_link_props.ts            |  65 ++++++++
 .../public/hooks/use_side_nav_items.ts        | 145 ++++++++++++++++++
 .../serverless_security/public/plugin.ts      |   8 +-
 .../serverless_security/public/services.tsx   |  26 ++++
 10 files changed, 497 insertions(+), 2 deletions(-)
 create mode 100644 x-pack/plugins/serverless_security/public/components/side_navigation/index.tsx
 create mode 100644 x-pack/plugins/serverless_security/public/components/side_navigation/side_navigation.tsx
 create mode 100644 x-pack/plugins/serverless_security/public/components/upselling/index.ts
 create mode 100644 x-pack/plugins/serverless_security/public/components/upselling/pages/cases_upselling.tsx
 create mode 100644 x-pack/plugins/serverless_security/public/components/upselling/pages/rules_upselling.tsx
 create mode 100644 x-pack/plugins/serverless_security/public/components/upselling/register_upsellings.tsx
 create mode 100644 x-pack/plugins/serverless_security/public/hooks/use_link_props.ts
 create mode 100644 x-pack/plugins/serverless_security/public/hooks/use_side_nav_items.ts
 create mode 100644 x-pack/plugins/serverless_security/public/services.tsx

diff --git a/x-pack/plugins/serverless_security/public/components/side_navigation/index.tsx b/x-pack/plugins/serverless_security/public/components/side_navigation/index.tsx
new file mode 100644
index 0000000000000..abd1716f9bf77
--- /dev/null
+++ b/x-pack/plugins/serverless_security/public/components/side_navigation/index.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 { CoreStart } from '@kbn/core/public';
+import { ServerlessSecurityPluginStartDependencies } from '../../types';
+import { SecuritySideNavigation } from './side_navigation';
+import { KibanaServicesProvider } from '../../services';
+
+export const getSecuritySideNavigation = (
+  core: CoreStart,
+  pluginsStart: ServerlessSecurityPluginStartDependencies
+) => {
+  return (
+    <KibanaServicesProvider core={core} pluginsStart={pluginsStart}>
+      <SecuritySideNavigation />
+    </KibanaServicesProvider>
+  );
+};
diff --git a/x-pack/plugins/serverless_security/public/components/side_navigation/side_navigation.tsx b/x-pack/plugins/serverless_security/public/components/side_navigation/side_navigation.tsx
new file mode 100644
index 0000000000000..1f7ca7821d291
--- /dev/null
+++ b/x-pack/plugins/serverless_security/public/components/side_navigation/side_navigation.tsx
@@ -0,0 +1,44 @@
+/*
+ * 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 { EuiLoadingSpinner, useEuiTheme } from '@elastic/eui';
+import { SolutionNav } from '@kbn/shared-ux-page-solution-nav';
+import { SolutionSideNav } from '@kbn/security-solution-side-nav';
+import {
+  usePartitionFooterNavItems,
+  useSideNavItems,
+  useSideNavSelectedId,
+} from '../../hooks/use_side_nav_items';
+
+export const SecuritySideNavigation: React.FC = () => {
+  const { euiTheme } = useEuiTheme();
+  const sideNavItems = useSideNavItems();
+  const selectedId = useSideNavSelectedId(sideNavItems);
+  const [items, footerItems] = usePartitionFooterNavItems(sideNavItems);
+
+  const isLoading = items.length === 0 && footerItems.length === 0;
+
+  return isLoading ? (
+    <EuiLoadingSpinner size="m" data-test-subj="sideNavLoader" />
+  ) : (
+    <SolutionNav
+      canBeCollapsed={false}
+      name={'Security'}
+      icon={'logoSecurity'}
+      children={
+        <SolutionSideNav
+          items={items}
+          footerItems={footerItems}
+          selectedId={selectedId}
+          panelTopOffset={`calc(${euiTheme.size.l} * 2)`}
+        />
+      }
+      closeFlyoutButtonPosition={'inside'}
+    />
+  );
+};
diff --git a/x-pack/plugins/serverless_security/public/components/upselling/index.ts b/x-pack/plugins/serverless_security/public/components/upselling/index.ts
new file mode 100644
index 0000000000000..2327166cc1706
--- /dev/null
+++ b/x-pack/plugins/serverless_security/public/components/upselling/index.ts
@@ -0,0 +1,7 @@
+/*
+ * 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 { registerUpsellings } from './register_upsellings';
diff --git a/x-pack/plugins/serverless_security/public/components/upselling/pages/cases_upselling.tsx b/x-pack/plugins/serverless_security/public/components/upselling/pages/cases_upselling.tsx
new file mode 100644
index 0000000000000..d75cc89556c40
--- /dev/null
+++ b/x-pack/plugins/serverless_security/public/components/upselling/pages/cases_upselling.tsx
@@ -0,0 +1,41 @@
+/*
+ * 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, EuiLink } from '@elastic/eui';
+import { ServerlessSecuritySkus } from '../../../../common/config';
+
+export const CasesUpselling: React.FC<{ projectSkus: ServerlessSecuritySkus }> = React.memo(
+  ({ projectSkus }) => {
+    const upsellingSku = projectSkus.includes('cloudEssentials')
+      ? 'Cloud Complete'
+      : 'Endpoint Complete';
+
+    return (
+      <EuiEmptyPrompt
+        iconType="logoSecurity"
+        title={<>This is a testing component for a Serverless upselling prompt.</>}
+        body={
+          <>
+            Get <EuiLink href="#">{upsellingSku}</EuiLink> to use Cases
+            <br />
+            <br />
+            <iframe
+              title="money"
+              src="https://giphy.com/embed/px8O7NANzzaqk"
+              width="480"
+              height="283"
+              frameBorder="0"
+              className="giphy-embed"
+              allowFullScreen
+            />
+          </>
+        }
+      />
+    );
+  }
+);
diff --git a/x-pack/plugins/serverless_security/public/components/upselling/pages/rules_upselling.tsx b/x-pack/plugins/serverless_security/public/components/upselling/pages/rules_upselling.tsx
new file mode 100644
index 0000000000000..402341f67db0c
--- /dev/null
+++ b/x-pack/plugins/serverless_security/public/components/upselling/pages/rules_upselling.tsx
@@ -0,0 +1,58 @@
+/*
+ * 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 { EuiToolTip, EuiEmptyPrompt, EuiLink } from '@elastic/eui';
+import { ServerlessSecuritySkus } from '../../../../common/config';
+
+export const PrebuiltRulesTooltipUpselling: React.FC = React.memo(({ children }) => {
+  return (
+    <EuiToolTip
+      content={
+        <>
+          Get <b>Endpoint Complete</b> to load prebuilt rules and Timeline templates.
+          <br />
+          <EuiLink href="#">Purchase Endpoint Complete</EuiLink>
+        </>
+      }
+      repositionOnScroll={true}
+      display="block"
+    >
+      {children as React.ReactElement}
+    </EuiToolTip>
+  );
+});
+
+export const RulesResponseActionsUpselling: React.FC<{ projectSkus: ServerlessSecuritySkus }> =
+  React.memo(({ projectSkus }) => {
+    const upsellingSku = projectSkus.includes('cloudEssentials')
+      ? 'Cloud Complete'
+      : 'Endpoint Complete';
+
+    return (
+      <EuiEmptyPrompt
+        iconType="logoSecurity"
+        title={<>This is a testing component for a Serverless upselling prompt.</>}
+        body={
+          <>
+            Get <EuiLink href="#">{upsellingSku}</EuiLink> to attach Response Actions to rules
+            <br />
+            <br />
+            <iframe
+              title="money"
+              src="https://giphy.com/embed/px8O7NANzzaqk"
+              width="480"
+              height="283"
+              frameBorder="0"
+              className="giphy-embed"
+              allowFullScreen
+            />
+          </>
+        }
+      />
+    );
+  });
diff --git a/x-pack/plugins/serverless_security/public/components/upselling/register_upsellings.tsx b/x-pack/plugins/serverless_security/public/components/upselling/register_upsellings.tsx
new file mode 100644
index 0000000000000..e905245aad980
--- /dev/null
+++ b/x-pack/plugins/serverless_security/public/components/upselling/register_upsellings.tsx
@@ -0,0 +1,83 @@
+/*
+ * 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 { UpsellingService } from '@kbn/security-solution-plugin/public';
+import { SecurityPageName, type AppFeatureKey } from '@kbn/security-solution-plugin/common';
+import type {
+  PageUpsellings,
+  SectionUpsellings,
+  UpsellingSectionId,
+} from '@kbn/security-solution-plugin/public';
+import type { ServerlessSecuritySkus } from '../../../common/config';
+import { CasesUpselling } from './pages/cases_upselling';
+import {
+  PrebuiltRulesTooltipUpselling,
+  RulesResponseActionsUpselling,
+} from './pages/rules_upselling';
+import { getProjectSkusFeatures } from '../../../common/sku/sku_features';
+
+interface UpsellingsConfig {
+  feature: AppFeatureKey;
+  component: React.ComponentType;
+}
+
+type UpsellingPages = Array<UpsellingsConfig & { pageName: SecurityPageName }>;
+type UpsellingSections = Array<UpsellingsConfig & { id: UpsellingSectionId }>;
+
+export const registerUpsellings = (
+  upselling: UpsellingService,
+  projectSkus: ServerlessSecuritySkus
+) => {
+  const skusFeatures = getProjectSkusFeatures(projectSkus);
+
+  const upsellingPages = getUpsellingPages(projectSkus).reduce<PageUpsellings>(
+    (pageUpsellings, { pageName, feature, component }) => {
+      if (!skusFeatures[feature]) {
+        pageUpsellings[pageName] = component;
+      }
+      return pageUpsellings;
+    },
+    {}
+  );
+
+  const upsellingSections = getUpsellingSections(projectSkus).reduce<SectionUpsellings>(
+    (sectionUpsellings, { id, feature, component }) => {
+      if (!skusFeatures[feature]) {
+        sectionUpsellings[id] = component;
+      }
+      return sectionUpsellings;
+    },
+    {}
+  );
+
+  upselling.registerPages(upsellingPages);
+  upselling.registerSections(upsellingSections);
+};
+
+// Upselling configuration for pages and sections components
+
+// TODO: lazy load these components
+const getUpsellingPages = (projectSkus: ServerlessSecuritySkus): UpsellingPages => [
+  {
+    pageName: SecurityPageName.case,
+    feature: 'cases_base',
+    component: () => <CasesUpselling projectSkus={projectSkus} />,
+  },
+];
+
+const getUpsellingSections = (projectSkus: ServerlessSecuritySkus): UpsellingSections => [
+  {
+    id: 'rules_load_prepackaged_tooltip',
+    feature: 'rules_load_prepackaged',
+    component: PrebuiltRulesTooltipUpselling,
+  },
+  {
+    id: 'rules_response_actions',
+    feature: 'rules_response_actions',
+    component: () => <RulesResponseActionsUpselling projectSkus={projectSkus} />,
+  },
+];
diff --git a/x-pack/plugins/serverless_security/public/hooks/use_link_props.ts b/x-pack/plugins/serverless_security/public/hooks/use_link_props.ts
new file mode 100644
index 0000000000000..6cdaef0d94d31
--- /dev/null
+++ b/x-pack/plugins/serverless_security/public/hooks/use_link_props.ts
@@ -0,0 +1,65 @@
+/*
+ * 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 { APP_UI_ID, type SecurityPageName } from '@kbn/security-solution-plugin/common';
+import { useMemo, useCallback, type MouseEventHandler, type MouseEvent } from 'react';
+import { useKibana, type Services } from '../services';
+
+interface LinkProps {
+  onClick: MouseEventHandler;
+  href: string;
+}
+
+interface GetLinkPropsParams {
+  deepLinkId?: SecurityPageName;
+  path?: string;
+  appId?: string;
+  onClick?: MouseEventHandler;
+}
+
+type GetLinkProps = (params: GetLinkPropsParams) => LinkProps;
+
+export const useLinkProps: GetLinkProps = (props) => {
+  const { application } = useKibana().services;
+  return useMemo(() => getLinkProps({ ...props, application }), [application, props]);
+};
+
+export const useGetLinkProps: () => GetLinkProps = () => {
+  const { application } = useKibana().services;
+  return useCallback<GetLinkProps>(
+    (props) => getLinkProps({ ...props, application }),
+    [application]
+  );
+};
+
+const getLinkProps = ({
+  deepLinkId,
+  path,
+  onClick: onClickProps,
+  appId = APP_UI_ID,
+  application,
+}: GetLinkPropsParams & { application: Services['application'] }): LinkProps => {
+  const { getUrlForApp, navigateToUrl } = application;
+  const url = getUrlForApp(appId, { deepLinkId, path });
+  return {
+    href: url,
+    onClick: (ev) => {
+      if (isModifiedEvent(ev)) {
+        return;
+      }
+
+      ev.preventDefault();
+      navigateToUrl(url);
+      if (onClickProps) {
+        onClickProps(ev);
+      }
+    },
+  };
+};
+
+const isModifiedEvent = (event: MouseEvent) =>
+  event.metaKey || event.altKey || event.ctrlKey || event.shiftKey;
diff --git a/x-pack/plugins/serverless_security/public/hooks/use_side_nav_items.ts b/x-pack/plugins/serverless_security/public/hooks/use_side_nav_items.ts
new file mode 100644
index 0000000000000..cc6f78becdbeb
--- /dev/null
+++ b/x-pack/plugins/serverless_security/public/hooks/use_side_nav_items.ts
@@ -0,0 +1,145 @@
+/*
+ * 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 { useMemo } from 'react';
+import useObservable from 'react-use/lib/useObservable';
+import { matchPath, useLocation } from 'react-router-dom';
+import { partition } from 'lodash/fp';
+import { SecurityPageName } from '@kbn/security-solution-plugin/common';
+import type { SolutionSideNavItem } from '@kbn/security-solution-side-nav';
+import { useKibana } from '../services';
+import { useGetLinkProps } from './use_link_props';
+
+const isFooterNavItem = (id: string) =>
+  id === SecurityPageName.landing || id === SecurityPageName.administration;
+
+const isGetStartedNavItem = (id: string) => id === SecurityPageName.landing;
+
+// DFS for the sideNavItem matching the current `pathname`, returns all item hierarchy when found
+const findItemsByPath = (
+  sideNavItems: SolutionSideNavItem[],
+  pathname: string
+): SolutionSideNavItem[] => {
+  for (const sideNavItem of sideNavItems) {
+    if (sideNavItem.items?.length) {
+      const found = findItemsByPath(sideNavItem.items, pathname);
+      if (found.length) {
+        found.unshift(sideNavItem);
+        return found;
+      }
+    }
+    if (matchPath(pathname, { path: sideNavItem.href })) {
+      return [sideNavItem];
+    }
+  }
+  return [];
+};
+
+/**
+ * Returns all the formatted SideNavItems, including external links
+ */
+export const useSideNavItems = (): SolutionSideNavItem[] => {
+  const { securitySolution } = useKibana().services;
+  const navLinks = useObservable(securitySolution.navLinks$, []);
+  const getLinkProps = useGetLinkProps();
+
+  const securitySideNavItems = useMemo(
+    () =>
+      navLinks.reduce<SolutionSideNavItem[]>((items, navLink) => {
+        if (navLink.disabled) {
+          return items;
+        }
+        if (isGetStartedNavItem(navLink.id)) {
+          items.push({
+            id: navLink.id,
+            label: navLink.title.toUpperCase(),
+            ...getLinkProps({ deepLinkId: navLink.id }),
+            labelSize: 'xs',
+            iconType: 'launch',
+            appendSeparator: true,
+          });
+        } else {
+          // default sideNavItem formatting
+          items.push({
+            id: navLink.id,
+            label: navLink.title,
+            ...getLinkProps({ deepLinkId: navLink.id }),
+            // ...(navLink.unauthorized && { unauthorized: true }),
+            ...(navLink.categories?.length && { categories: navLink.categories }),
+            ...(navLink.links?.length && {
+              items: navLink.links.reduce<SolutionSideNavItem[]>((acc, current) => {
+                if (!current.disabled) {
+                  acc.push({
+                    id: current.id,
+                    label: current.title,
+                    description: current.description,
+                    isBeta: current.isBeta,
+                    betaOptions: current.betaOptions,
+                    ...getLinkProps({ deepLinkId: current.id }),
+                  });
+                }
+                return acc;
+              }, []),
+            }),
+          });
+        }
+        return items;
+      }, []),
+    [getLinkProps, navLinks]
+  );
+
+  const sideNavItems = useAddExternalSideNavItems(securitySideNavItems);
+
+  return sideNavItems;
+};
+
+/**
+ * @param securitySideNavItems the sideNavItems for Security pages
+ * @returns sideNavItems with Security and external links
+ */
+const useAddExternalSideNavItems = (securitySideNavItems: SolutionSideNavItem[]) => {
+  const getLinkProps = useGetLinkProps();
+
+  const sideNavItemsWithExternals = useMemo(
+    () => [
+      ...securitySideNavItems,
+      {
+        id: 'ml',
+        label: 'Machine Learning',
+        ...getLinkProps({ appId: 'ml' }),
+      },
+    ],
+    [securitySideNavItems, getLinkProps]
+  );
+
+  return sideNavItemsWithExternals;
+};
+
+/**
+ * Partitions the sideNavItems into main and footer SideNavItems
+ * @param sideNavItems array for all SideNavItems
+ * @returns `[items, footerItems]` to be used in the side navigation component
+ */
+export const usePartitionFooterNavItems = (
+  sideNavItems: SolutionSideNavItem[]
+): [SolutionSideNavItem[], SolutionSideNavItem[]] =>
+  useMemo(() => partition((item) => !isFooterNavItem(item.id), sideNavItems), [sideNavItems]);
+
+/**
+ * Returns the selected item id, which is the root item in the links hierarchy
+ */
+export const useSideNavSelectedId = (sideNavItems: SolutionSideNavItem[]): string => {
+  const { http } = useKibana().services;
+  const { pathname } = useLocation();
+
+  const selectedId: string = useMemo(() => {
+    const [rootNavItem] = findItemsByPath(sideNavItems, http.basePath.prepend(pathname));
+    return rootNavItem?.id ?? '';
+  }, [sideNavItems, pathname, http]);
+
+  return selectedId;
+};
diff --git a/x-pack/plugins/serverless_security/public/plugin.ts b/x-pack/plugins/serverless_security/public/plugin.ts
index 4e7fa19a0945b..76a1e5b7cd3d9 100644
--- a/x-pack/plugins/serverless_security/public/plugin.ts
+++ b/x-pack/plugins/serverless_security/public/plugin.ts
@@ -30,10 +30,14 @@ export class ServerlessSecurityPlugin
   }
 
   public start(
-    _core: CoreStart,
-    { securitySolution }: ServerlessSecurityPluginStartDependencies
+    core: CoreStart,
+    startDeps: ServerlessSecurityPluginStartDependencies
   ): ServerlessSecurityPluginStart {
+    const { securitySolution, serverless } = startDeps;
+
     securitySolution.setIsSidebarEnabled(false);
+    // serverless.setServerlessNavigation(getSecuritySideNavigation(core, startDeps));
+
     return {};
   }
 
diff --git a/x-pack/plugins/serverless_security/public/services.tsx b/x-pack/plugins/serverless_security/public/services.tsx
new file mode 100644
index 0000000000000..3fb7ffbda18cf
--- /dev/null
+++ b/x-pack/plugins/serverless_security/public/services.tsx
@@ -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 { CoreStart } from '@kbn/core/public';
+import React from 'react';
+import {
+  KibanaContextProvider,
+  useKibana as useKibanaReact,
+} from '@kbn/kibana-react-plugin/public';
+import type { ServerlessSecurityPluginStartDependencies } from './types';
+
+export type Services = CoreStart & ServerlessSecurityPluginStartDependencies;
+
+export const KibanaServicesProvider: React.FC<{
+  core: CoreStart;
+  pluginsStart: ServerlessSecurityPluginStartDependencies;
+}> = ({ core, pluginsStart, children }) => {
+  const services: Services = { ...core, ...pluginsStart };
+  return <KibanaContextProvider services={services}>{children}</KibanaContextProvider>;
+};
+
+export const useKibana = () => useKibanaReact<Services>();

From 21c9631b8cd5e9b0997041afec72c2dd0463d752 Mon Sep 17 00:00:00 2001
From: semd <sergi.massaneda@elastic.co>
Date: Wed, 3 May 2023 19:33:14 +0200
Subject: [PATCH 02/11] chrome setProjectNavigation

---
 .../src/chrome_service.tsx                     | 18 ++++++++++++++++--
 .../src/ui/project/header.tsx                  |  6 +++---
 .../src/chrome_service.mock.ts                 |  1 +
 .../core-chrome-browser/src/contracts.ts       |  8 ++++++++
 x-pack/plugins/serverless/public/plugin.tsx    |  4 +++-
 x-pack/plugins/serverless/public/types.ts      |  5 +++--
 .../serverless_security/public/plugin.ts       |  3 ++-
 7 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/packages/core/chrome/core-chrome-browser-internal/src/chrome_service.tsx b/packages/core/chrome/core-chrome-browser-internal/src/chrome_service.tsx
index 41362b3d80dcd..34f7d9ea934c8 100644
--- a/packages/core/chrome/core-chrome-browser-internal/src/chrome_service.tsx
+++ b/packages/core/chrome/core-chrome-browser-internal/src/chrome_service.tsx
@@ -121,6 +121,7 @@ export class ChromeService {
     const helpSupportUrl$ = new BehaviorSubject<string>(KIBANA_ASK_ELASTIC_LINK);
     const isNavDrawerLocked$ = new BehaviorSubject(localStorage.getItem(IS_LOCKED_KEY) === 'true');
     const chromeStyle$ = new BehaviorSubject<ChromeStyle>('classic');
+    const projectNavigation$ = new BehaviorSubject<JSX.Element | undefined>(undefined);
 
     const getKbnVersionClass = () => {
       // we assume that the version is valid and has the form 'X.X.X'
@@ -170,6 +171,10 @@ export class ChromeService {
       chromeStyle$.next(style);
     };
 
+    const setProjectNavigation = (navigation: JSX.Element) => {
+      projectNavigation$.next(navigation);
+    };
+
     const isIE = () => {
       const ua = window.navigator.userAgent;
       const msie = ua.indexOf('MSIE '); // IE 10 or older
@@ -211,14 +216,22 @@ export class ChromeService {
     }
 
     const getHeaderComponent = () => {
-      const Component = ({ style$ }: { style$: typeof chromeStyle$ }) => {
+      const Component = ({
+        style$,
+        navigation$,
+      }: {
+        style$: typeof chromeStyle$;
+        navigation$: typeof projectNavigation$;
+      }) => {
         if (style$.getValue() === 'project') {
+          const navigation = navigation$.getValue();
           return (
             <ProjectHeader
               {...{
                 application,
                 globalHelpExtensionMenuLinks$,
               }}
+              navigation={navigation}
               actionMenu$={application.currentActionMenu$}
               breadcrumbs$={breadcrumbs$.pipe(takeUntil(this.stop$))}
               helpExtension$={helpExtension$.pipe(takeUntil(this.stop$))}
@@ -260,7 +273,7 @@ export class ChromeService {
           />
         );
       };
-      return <Component {...{ style$: chromeStyle$ }} />;
+      return <Component {...{ style$: chromeStyle$, navigation$: projectNavigation$ }} />;
     };
 
     return {
@@ -335,6 +348,7 @@ export class ChromeService {
       getBodyClasses$: () => bodyClasses$.pipe(takeUntil(this.stop$)),
       setChromeStyle,
       getChromeStyle$: () => chromeStyle$.pipe(takeUntil(this.stop$)),
+      setProjectNavigation,
     };
   }
 
diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx b/packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx
index e85ae262c3bb7..279e6adc83043 100644
--- a/packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx
+++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx
@@ -34,12 +34,14 @@ interface Props {
   kibanaVersion: string;
   application: InternalApplicationStart;
   navControlsRight$: Observable<ChromeNavControl[]>;
+  navigation: JSX.Element | undefined;
 }
 
 export const ProjectHeader = ({
   application,
   kibanaDocLink,
   kibanaVersion,
+  navigation,
   ...observables
 }: Props) => {
   const renderLogo = () => (
@@ -81,9 +83,7 @@ export const ProjectHeader = ({
         </EuiHeaderSection>
       </EuiHeader>
       <Router history={application.history}>
-        <ProjectNavigation>
-          <span />
-        </ProjectNavigation>
+        <ProjectNavigation>{navigation}</ProjectNavigation>
       </Router>
     </>
   );
diff --git a/packages/core/chrome/core-chrome-browser-mocks/src/chrome_service.mock.ts b/packages/core/chrome/core-chrome-browser-mocks/src/chrome_service.mock.ts
index c7c62c7811277..1a8042fb4e120 100644
--- a/packages/core/chrome/core-chrome-browser-mocks/src/chrome_service.mock.ts
+++ b/packages/core/chrome/core-chrome-browser-mocks/src/chrome_service.mock.ts
@@ -63,6 +63,7 @@ const createStartContractMock = () => {
     getBodyClasses$: jest.fn(),
     getChromeStyle$: jest.fn(),
     setChromeStyle: jest.fn(),
+    setProjectNavigation: jest.fn(),
   };
   startContract.navLinks.getAll.mockReturnValue([]);
   startContract.getIsVisible$.mockReturnValue(new BehaviorSubject(false));
diff --git a/packages/core/chrome/core-chrome-browser/src/contracts.ts b/packages/core/chrome/core-chrome-browser/src/contracts.ts
index 3f6f756e2d2b1..567fabad32156 100644
--- a/packages/core/chrome/core-chrome-browser/src/contracts.ts
+++ b/packages/core/chrome/core-chrome-browser/src/contracts.ts
@@ -161,4 +161,12 @@ export interface ChromeStart {
    * Get an observable of the current style type of the chrome.
    */
   getChromeStyle$(): Observable<ChromeStyle>;
+
+  /**
+   * Sets the project navigation to render in the chrome.
+   * @param projectNavigation The navigation to render in the chrome.
+   *
+   * @remarks Has no effect if the chrome style is not `project`.
+   */
+  setProjectNavigation(projectNavigation: JSX.Element): void;
 }
diff --git a/x-pack/plugins/serverless/public/plugin.tsx b/x-pack/plugins/serverless/public/plugin.tsx
index 20f4634fb7fa0..f4e57f354356b 100644
--- a/x-pack/plugins/serverless/public/plugin.tsx
+++ b/x-pack/plugins/serverless/public/plugin.tsx
@@ -62,7 +62,9 @@ export class ServerlessPlugin
     core.chrome.setChromeStyle('project');
     management.setIsSidebarEnabled(false);
 
-    return {};
+    return {
+      setNavigation: (navigation: JSX.Element) => core.chrome.setProjectNavigation(navigation),
+    };
   }
 
   public stop() {}
diff --git a/x-pack/plugins/serverless/public/types.ts b/x-pack/plugins/serverless/public/types.ts
index 9e8d9df34cb57..b88a1a6321a12 100644
--- a/x-pack/plugins/serverless/public/types.ts
+++ b/x-pack/plugins/serverless/public/types.ts
@@ -10,8 +10,9 @@ import type { ManagementSetup, ManagementStart } from '@kbn/management-plugin/pu
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface ServerlessPluginSetup {}
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface ServerlessPluginStart {}
+export interface ServerlessPluginStart {
+  setNavigation: (navigation: JSX.Element) => void;
+}
 
 export interface ServerlessPluginSetupDependencies {
   management: ManagementSetup;
diff --git a/x-pack/plugins/serverless_security/public/plugin.ts b/x-pack/plugins/serverless_security/public/plugin.ts
index 76a1e5b7cd3d9..9c3fa5f7c2d7b 100644
--- a/x-pack/plugins/serverless_security/public/plugin.ts
+++ b/x-pack/plugins/serverless_security/public/plugin.ts
@@ -6,6 +6,7 @@
  */
 
 import { CoreSetup, CoreStart, Plugin } from '@kbn/core/public';
+import { getSecuritySideNavigation } from './components/side_navigation';
 import {
   ServerlessSecurityPluginSetup,
   ServerlessSecurityPluginStart,
@@ -36,7 +37,7 @@ export class ServerlessSecurityPlugin
     const { securitySolution, serverless } = startDeps;
 
     securitySolution.setIsSidebarEnabled(false);
-    // serverless.setServerlessNavigation(getSecuritySideNavigation(core, startDeps));
+    serverless.setNavigation(getSecuritySideNavigation(core, startDeps));
 
     return {};
   }

From f79342e2667a666657a04d2d0d82e6ed0f6ccac7 Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Wed, 3 May 2023 17:52:54 +0000
Subject: [PATCH 03/11] [CI] Auto-commit changed files from 'node
 scripts/lint_ts_projects --fix'

---
 x-pack/plugins/serverless_security/tsconfig.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/x-pack/plugins/serverless_security/tsconfig.json b/x-pack/plugins/serverless_security/tsconfig.json
index ddf77b288e628..afc62a100b7a7 100644
--- a/x-pack/plugins/serverless_security/tsconfig.json
+++ b/x-pack/plugins/serverless_security/tsconfig.json
@@ -20,5 +20,8 @@
     "@kbn/security-plugin",
     "@kbn/security-solution-plugin",
     "@kbn/serverless",
+    "@kbn/shared-ux-page-solution-nav",
+    "@kbn/security-solution-side-nav",
+    "@kbn/kibana-react-plugin",
   ]
 }

From a80335aaa6125caa4870edcdf9202d96878c1776 Mon Sep 17 00:00:00 2001
From: semd <sergi.massaneda@elastic.co>
Date: Wed, 3 May 2023 20:27:04 +0200
Subject: [PATCH 04/11] cleaning

---
 .../public/components/upselling/index.ts      |  7 --
 .../upselling/pages/cases_upselling.tsx       | 41 ---------
 .../upselling/pages/rules_upselling.tsx       | 58 -------------
 .../upselling/register_upsellings.tsx         | 83 -------------------
 4 files changed, 189 deletions(-)
 delete mode 100644 x-pack/plugins/serverless_security/public/components/upselling/index.ts
 delete mode 100644 x-pack/plugins/serverless_security/public/components/upselling/pages/cases_upselling.tsx
 delete mode 100644 x-pack/plugins/serverless_security/public/components/upselling/pages/rules_upselling.tsx
 delete mode 100644 x-pack/plugins/serverless_security/public/components/upselling/register_upsellings.tsx

diff --git a/x-pack/plugins/serverless_security/public/components/upselling/index.ts b/x-pack/plugins/serverless_security/public/components/upselling/index.ts
deleted file mode 100644
index 2327166cc1706..0000000000000
--- a/x-pack/plugins/serverless_security/public/components/upselling/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/*
- * 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 { registerUpsellings } from './register_upsellings';
diff --git a/x-pack/plugins/serverless_security/public/components/upselling/pages/cases_upselling.tsx b/x-pack/plugins/serverless_security/public/components/upselling/pages/cases_upselling.tsx
deleted file mode 100644
index d75cc89556c40..0000000000000
--- a/x-pack/plugins/serverless_security/public/components/upselling/pages/cases_upselling.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * 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, EuiLink } from '@elastic/eui';
-import { ServerlessSecuritySkus } from '../../../../common/config';
-
-export const CasesUpselling: React.FC<{ projectSkus: ServerlessSecuritySkus }> = React.memo(
-  ({ projectSkus }) => {
-    const upsellingSku = projectSkus.includes('cloudEssentials')
-      ? 'Cloud Complete'
-      : 'Endpoint Complete';
-
-    return (
-      <EuiEmptyPrompt
-        iconType="logoSecurity"
-        title={<>This is a testing component for a Serverless upselling prompt.</>}
-        body={
-          <>
-            Get <EuiLink href="#">{upsellingSku}</EuiLink> to use Cases
-            <br />
-            <br />
-            <iframe
-              title="money"
-              src="https://giphy.com/embed/px8O7NANzzaqk"
-              width="480"
-              height="283"
-              frameBorder="0"
-              className="giphy-embed"
-              allowFullScreen
-            />
-          </>
-        }
-      />
-    );
-  }
-);
diff --git a/x-pack/plugins/serverless_security/public/components/upselling/pages/rules_upselling.tsx b/x-pack/plugins/serverless_security/public/components/upselling/pages/rules_upselling.tsx
deleted file mode 100644
index 402341f67db0c..0000000000000
--- a/x-pack/plugins/serverless_security/public/components/upselling/pages/rules_upselling.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
- * 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 { EuiToolTip, EuiEmptyPrompt, EuiLink } from '@elastic/eui';
-import { ServerlessSecuritySkus } from '../../../../common/config';
-
-export const PrebuiltRulesTooltipUpselling: React.FC = React.memo(({ children }) => {
-  return (
-    <EuiToolTip
-      content={
-        <>
-          Get <b>Endpoint Complete</b> to load prebuilt rules and Timeline templates.
-          <br />
-          <EuiLink href="#">Purchase Endpoint Complete</EuiLink>
-        </>
-      }
-      repositionOnScroll={true}
-      display="block"
-    >
-      {children as React.ReactElement}
-    </EuiToolTip>
-  );
-});
-
-export const RulesResponseActionsUpselling: React.FC<{ projectSkus: ServerlessSecuritySkus }> =
-  React.memo(({ projectSkus }) => {
-    const upsellingSku = projectSkus.includes('cloudEssentials')
-      ? 'Cloud Complete'
-      : 'Endpoint Complete';
-
-    return (
-      <EuiEmptyPrompt
-        iconType="logoSecurity"
-        title={<>This is a testing component for a Serverless upselling prompt.</>}
-        body={
-          <>
-            Get <EuiLink href="#">{upsellingSku}</EuiLink> to attach Response Actions to rules
-            <br />
-            <br />
-            <iframe
-              title="money"
-              src="https://giphy.com/embed/px8O7NANzzaqk"
-              width="480"
-              height="283"
-              frameBorder="0"
-              className="giphy-embed"
-              allowFullScreen
-            />
-          </>
-        }
-      />
-    );
-  });
diff --git a/x-pack/plugins/serverless_security/public/components/upselling/register_upsellings.tsx b/x-pack/plugins/serverless_security/public/components/upselling/register_upsellings.tsx
deleted file mode 100644
index e905245aad980..0000000000000
--- a/x-pack/plugins/serverless_security/public/components/upselling/register_upsellings.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-/*
- * 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 { UpsellingService } from '@kbn/security-solution-plugin/public';
-import { SecurityPageName, type AppFeatureKey } from '@kbn/security-solution-plugin/common';
-import type {
-  PageUpsellings,
-  SectionUpsellings,
-  UpsellingSectionId,
-} from '@kbn/security-solution-plugin/public';
-import type { ServerlessSecuritySkus } from '../../../common/config';
-import { CasesUpselling } from './pages/cases_upselling';
-import {
-  PrebuiltRulesTooltipUpselling,
-  RulesResponseActionsUpselling,
-} from './pages/rules_upselling';
-import { getProjectSkusFeatures } from '../../../common/sku/sku_features';
-
-interface UpsellingsConfig {
-  feature: AppFeatureKey;
-  component: React.ComponentType;
-}
-
-type UpsellingPages = Array<UpsellingsConfig & { pageName: SecurityPageName }>;
-type UpsellingSections = Array<UpsellingsConfig & { id: UpsellingSectionId }>;
-
-export const registerUpsellings = (
-  upselling: UpsellingService,
-  projectSkus: ServerlessSecuritySkus
-) => {
-  const skusFeatures = getProjectSkusFeatures(projectSkus);
-
-  const upsellingPages = getUpsellingPages(projectSkus).reduce<PageUpsellings>(
-    (pageUpsellings, { pageName, feature, component }) => {
-      if (!skusFeatures[feature]) {
-        pageUpsellings[pageName] = component;
-      }
-      return pageUpsellings;
-    },
-    {}
-  );
-
-  const upsellingSections = getUpsellingSections(projectSkus).reduce<SectionUpsellings>(
-    (sectionUpsellings, { id, feature, component }) => {
-      if (!skusFeatures[feature]) {
-        sectionUpsellings[id] = component;
-      }
-      return sectionUpsellings;
-    },
-    {}
-  );
-
-  upselling.registerPages(upsellingPages);
-  upselling.registerSections(upsellingSections);
-};
-
-// Upselling configuration for pages and sections components
-
-// TODO: lazy load these components
-const getUpsellingPages = (projectSkus: ServerlessSecuritySkus): UpsellingPages => [
-  {
-    pageName: SecurityPageName.case,
-    feature: 'cases_base',
-    component: () => <CasesUpselling projectSkus={projectSkus} />,
-  },
-];
-
-const getUpsellingSections = (projectSkus: ServerlessSecuritySkus): UpsellingSections => [
-  {
-    id: 'rules_load_prepackaged_tooltip',
-    feature: 'rules_load_prepackaged',
-    component: PrebuiltRulesTooltipUpselling,
-  },
-  {
-    id: 'rules_response_actions',
-    feature: 'rules_response_actions',
-    component: () => <RulesResponseActionsUpselling projectSkus={projectSkus} />,
-  },
-];

From 7f4e01e7aa068423cbc18723625f508d3e46c829 Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Wed, 3 May 2023 18:33:33 +0000
Subject: [PATCH 05/11] [CI] Auto-commit changed files from 'node
 scripts/lint_ts_projects --fix'

---
 x-pack/plugins/serverless/tsconfig.json          | 1 +
 x-pack/plugins/serverless_security/tsconfig.json | 1 +
 2 files changed, 2 insertions(+)

diff --git a/x-pack/plugins/serverless/tsconfig.json b/x-pack/plugins/serverless/tsconfig.json
index 75c3b77afc9bb..490449a4ee5a4 100644
--- a/x-pack/plugins/serverless/tsconfig.json
+++ b/x-pack/plugins/serverless/tsconfig.json
@@ -21,5 +21,6 @@
     "@kbn/serverless-project-switcher",
     "@kbn/serverless-types",
     "@kbn/utils",
+    "@kbn/core-chrome-browser",
   ]
 }
diff --git a/x-pack/plugins/serverless_security/tsconfig.json b/x-pack/plugins/serverless_security/tsconfig.json
index afc62a100b7a7..d2e05fc98d523 100644
--- a/x-pack/plugins/serverless_security/tsconfig.json
+++ b/x-pack/plugins/serverless_security/tsconfig.json
@@ -23,5 +23,6 @@
     "@kbn/shared-ux-page-solution-nav",
     "@kbn/security-solution-side-nav",
     "@kbn/kibana-react-plugin",
+    "@kbn/core-chrome-browser",
   ]
 }

From 0910ab7bddc90f7fbad0dc6fd6da76c6f2f57fdc Mon Sep 17 00:00:00 2001
From: semd <sergi.massaneda@elastic.co>
Date: Wed, 3 May 2023 20:34:16 +0200
Subject: [PATCH 06/11] serverless-security ownership

---
 .github/CODEOWNERS | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index cb9607ecbb51a..2a1760e516640 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -579,7 +579,7 @@ x-pack/plugins/serverless @elastic/appex-sharedux
 x-pack/plugins/serverless_observability @elastic/appex-sharedux
 packages/serverless/project_switcher @elastic/appex-sharedux
 x-pack/plugins/serverless_search @elastic/appex-sharedux
-x-pack/plugins/serverless_security @elastic/appex-sharedux
+x-pack/plugins/serverless_security @elastic/security-solution
 packages/serverless/storybook/config @elastic/appex-sharedux
 packages/serverless/types @elastic/appex-sharedux
 test/plugin_functional/plugins/session_notifications @elastic/kibana-core

From 766cb1a62d753e7d7342c568fa4f44a804d06266 Mon Sep 17 00:00:00 2001
From: semd <sergi.massaneda@elastic.co>
Date: Wed, 3 May 2023 20:35:42 +0200
Subject: [PATCH 07/11] serverless-security ownership

---
 x-pack/plugins/serverless_security/kibana.jsonc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/serverless_security/kibana.jsonc b/x-pack/plugins/serverless_security/kibana.jsonc
index 99def198e6b46..dec92842f389c 100644
--- a/x-pack/plugins/serverless_security/kibana.jsonc
+++ b/x-pack/plugins/serverless_security/kibana.jsonc
@@ -1,7 +1,7 @@
 {
   "type": "plugin",
   "id": "@kbn/serverless-security",
-  "owner": "@elastic/appex-sharedux",
+  "owner": "@elastic/security-solution",
   "description": "Serverless customizations for security.",
   "plugin": {
     "id": "serverlessSecurity",

From 8b02cab56f89497b81a9abc82e5f36ae46d5ebee Mon Sep 17 00:00:00 2001
From: semd <sergi.massaneda@elastic.co>
Date: Thu, 4 May 2023 12:03:31 +0200
Subject: [PATCH 08/11] type fix

---
 .../serverless_security/public/hooks/use_side_nav_items.ts    | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/x-pack/plugins/serverless_security/public/hooks/use_side_nav_items.ts b/x-pack/plugins/serverless_security/public/hooks/use_side_nav_items.ts
index 19bcb816be962..bade229d98794 100644
--- a/x-pack/plugins/serverless_security/public/hooks/use_side_nav_items.ts
+++ b/x-pack/plugins/serverless_security/public/hooks/use_side_nav_items.ts
@@ -102,15 +102,13 @@ export const useSideNavItems = (): SolutionSideNavItem[] => {
  * @returns sideNavItems with Security and external links
  */
 const useAddExternalSideNavItems = (securitySideNavItems: SolutionSideNavItem[]) => {
-  const getLinkProps = useGetLinkProps();
-
   const sideNavItemsWithExternals = useMemo(
     () => [
       ...securitySideNavItems,
       // TODO: add external links. e.g.:
       // {
       //   id: 'ml',
-      //   label: 'Machine Learning',
+      //   label: 'Machine Learning Jobs',
       //   ...getLinkProps({ appId: 'ml', path: '/jobs' }),
       //   links: [...]
       // },

From 43c43e1c094eab7e71ba934c703fbf190cd51bd0 Mon Sep 17 00:00:00 2001
From: semd <sergi.massaneda@elastic.co>
Date: Thu, 4 May 2023 17:24:53 +0200
Subject: [PATCH 09/11] serverless security tests implemented

---
 .../plugins/security_solution/public/mocks.ts |  23 ++
 .../security_solution/public/plugin.tsx       |   2 +-
 .../plugins/security_solution/public/types.ts |   2 +-
 x-pack/plugins/serverless/public/mocks.ts     |  16 +
 .../serverless_security/jest.config.dev.js    |  12 +
 .../public/components/jest.config.js          |  28 ++
 .../side_navigation/side_navigation.test.tsx  | 101 ++++++
 .../public/hooks/__mocks__/use_link_props.ts  |  16 +
 .../hooks/__mocks__/use_side_nav_items.ts     |  21 ++
 .../public/hooks/jest.config.js               |  28 ++
 .../public/hooks/use_link_props.test.tsx      | 156 +++++++++
 .../public/hooks/use_link_props.ts            |   2 +-
 .../public/hooks/use_nav_links.ts             |  17 +
 .../public/hooks/use_side_nav_items.test.tsx  | 302 ++++++++++++++++++
 .../public/hooks/use_side_nav_items.ts        |   6 +-
 .../serverless_security/public/jest.config.js |  27 ++
 .../public/services.mock.tsx                  |  26 ++
 17 files changed, 778 insertions(+), 7 deletions(-)
 create mode 100644 x-pack/plugins/security_solution/public/mocks.ts
 create mode 100644 x-pack/plugins/serverless/public/mocks.ts
 create mode 100644 x-pack/plugins/serverless_security/jest.config.dev.js
 create mode 100644 x-pack/plugins/serverless_security/public/components/jest.config.js
 create mode 100644 x-pack/plugins/serverless_security/public/components/side_navigation/side_navigation.test.tsx
 create mode 100644 x-pack/plugins/serverless_security/public/hooks/__mocks__/use_link_props.ts
 create mode 100644 x-pack/plugins/serverless_security/public/hooks/__mocks__/use_side_nav_items.ts
 create mode 100644 x-pack/plugins/serverless_security/public/hooks/jest.config.js
 create mode 100644 x-pack/plugins/serverless_security/public/hooks/use_link_props.test.tsx
 create mode 100644 x-pack/plugins/serverless_security/public/hooks/use_nav_links.ts
 create mode 100644 x-pack/plugins/serverless_security/public/hooks/use_side_nav_items.test.tsx
 create mode 100644 x-pack/plugins/serverless_security/public/jest.config.js
 create mode 100644 x-pack/plugins/serverless_security/public/services.mock.tsx

diff --git a/x-pack/plugins/security_solution/public/mocks.ts b/x-pack/plugins/security_solution/public/mocks.ts
new file mode 100644
index 0000000000000..f16e81636846c
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/mocks.ts
@@ -0,0 +1,23 @@
+/*
+ * 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 { BehaviorSubject } from 'rxjs';
+import type { NavigationLink } from './common/links/types';
+
+const setupMock = () => ({
+  resolver: jest.fn(),
+});
+
+const startMock = () => ({
+  getNavLinks$: jest.fn(() => new BehaviorSubject<NavigationLink[]>([])),
+  setIsSidebarEnabled: jest.fn(),
+});
+
+export const securitySolutionMock = {
+  createSetup: setupMock,
+  createStart: startMock,
+};
diff --git a/x-pack/plugins/security_solution/public/plugin.tsx b/x-pack/plugins/security_solution/public/plugin.tsx
index 14b886920613b..7e46c170ca133 100644
--- a/x-pack/plugins/security_solution/public/plugin.tsx
+++ b/x-pack/plugins/security_solution/public/plugin.tsx
@@ -310,7 +310,7 @@ export class Plugin implements IPlugin<PluginSetup, PluginStart, SetupPlugins, S
     this.registerAppLinks(core, plugins);
 
     return {
-      navLinks$,
+      getNavLinks$: () => navLinks$,
       setIsSidebarEnabled: (isSidebarEnabled: boolean) =>
         this.isSidebarEnabled$.next(isSidebarEnabled),
     };
diff --git a/x-pack/plugins/security_solution/public/types.ts b/x-pack/plugins/security_solution/public/types.ts
index ba5bd460ba376..76351fde26135 100644
--- a/x-pack/plugins/security_solution/public/types.ts
+++ b/x-pack/plugins/security_solution/public/types.ts
@@ -141,7 +141,7 @@ export interface PluginSetup {
 }
 
 export interface PluginStart {
-  navLinks$: Observable<NavigationLink[]>;
+  getNavLinks$: () => Observable<NavigationLink[]>;
   setIsSidebarEnabled: (isSidebarEnabled: boolean) => void;
 }
 
diff --git a/x-pack/plugins/serverless/public/mocks.ts b/x-pack/plugins/serverless/public/mocks.ts
new file mode 100644
index 0000000000000..d83018425260b
--- /dev/null
+++ b/x-pack/plugins/serverless/public/mocks.ts
@@ -0,0 +1,16 @@
+/*
+ * 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 { ServerlessPluginStart } from './types';
+
+const startMock = (): ServerlessPluginStart => ({
+  setSideNavComponent: jest.fn(),
+});
+
+export const serverlessMock = {
+  createStart: startMock,
+};
diff --git a/x-pack/plugins/serverless_security/jest.config.dev.js b/x-pack/plugins/serverless_security/jest.config.dev.js
new file mode 100644
index 0000000000000..f759355f0e0e5
--- /dev/null
+++ b/x-pack/plugins/serverless_security/jest.config.dev.js
@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../',
+  projects: ['<rootDir>/x-pack/plugins/serverless_security/public/*/jest.config.js'],
+};
diff --git a/x-pack/plugins/serverless_security/public/components/jest.config.js b/x-pack/plugins/serverless_security/public/components/jest.config.js
new file mode 100644
index 0000000000000..2bfc5a72a09ce
--- /dev/null
+++ b/x-pack/plugins/serverless_security/public/components/jest.config.js
@@ -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.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../../..',
+  roots: ['<rootDir>/x-pack/plugins/serverless_security/public/components'],
+  testMatch: [
+    '<rootDir>/x-pack/plugins/serverless_security/public/components/**/*.test.{js,mjs,ts,tsx}',
+  ],
+  coverageDirectory:
+    '<rootDir>/target/kibana-coverage/jest/x-pack/plugins/serverless_security/public/components',
+  coverageReporters: ['text', 'html'],
+  collectCoverageFrom: [
+    '<rootDir>/x-pack/plugins/serverless_security/public/components/**/*.{ts,tsx}',
+    '!<rootDir>/x-pack/plugins/serverless_security/public/components/*.test.{ts,tsx}',
+    '!<rootDir>/x-pack/plugins/serverless_security/public/components/{__test__,__snapshots__,__examples__,*mock*,tests,test_helpers,integration_tests,types}/**/*',
+    '!<rootDir>/x-pack/plugins/serverless_security/public/components/*mock*.{ts,tsx}',
+    '!<rootDir>/x-pack/plugins/serverless_security/public/components/*.test.{ts,tsx}',
+    '!<rootDir>/x-pack/plugins/serverless_security/public/components/*.d.ts',
+    '!<rootDir>/x-pack/plugins/serverless_security/public/components/*.config.ts',
+    '!<rootDir>/x-pack/plugins/serverless_security/public/components/index.{js,ts,tsx}',
+  ],
+};
diff --git a/x-pack/plugins/serverless_security/public/components/side_navigation/side_navigation.test.tsx b/x-pack/plugins/serverless_security/public/components/side_navigation/side_navigation.test.tsx
new file mode 100644
index 0000000000000..7b67b4714da67
--- /dev/null
+++ b/x-pack/plugins/serverless_security/public/components/side_navigation/side_navigation.test.tsx
@@ -0,0 +1,101 @@
+/*
+ * 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 { SecuritySideNavigation } from './side_navigation';
+import { useSideNavItems, useSideNavSelectedId } from '../../hooks/use_side_nav_items';
+import { SecurityPageName } from '@kbn/security-solution-plugin/common';
+import { KibanaServicesProvider } from '../../services.mock';
+
+jest.mock('../../hooks/use_side_nav_items');
+const mockUseSideNavItems = useSideNavItems as jest.Mock;
+const mockUseSideNavSelectedId = useSideNavSelectedId as jest.Mock;
+
+const mockSolutionSideNav = jest.fn((_props: unknown) => <div data-test-subj="solutionSideNav" />);
+jest.mock('@kbn/security-solution-side-nav', () => ({
+  SolutionSideNav: (props: unknown) => mockSolutionSideNav(props),
+}));
+
+const sideNavItems = [
+  {
+    id: SecurityPageName.dashboards,
+    label: 'Dashboards',
+    href: '/dashboards',
+    onClick: jest.fn(),
+  },
+  {
+    id: SecurityPageName.alerts,
+    label: 'Alerts',
+    href: '/alerts',
+    onClick: jest.fn(),
+  },
+];
+const sideNavFooterItems = [
+  {
+    id: SecurityPageName.administration,
+    label: 'Manage',
+    href: '/administration',
+    onClick: jest.fn(),
+  },
+];
+
+mockUseSideNavItems.mockReturnValue(sideNavItems);
+mockUseSideNavSelectedId.mockReturnValue(SecurityPageName.alerts);
+
+describe('SecuritySideNavigation', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render loading when not items received', () => {
+    mockUseSideNavItems.mockReturnValueOnce([]);
+    const component = render(<SecuritySideNavigation />, { wrapper: KibanaServicesProvider });
+    expect(component.queryByTestId('sideNavLoader')).toBeInTheDocument();
+  });
+
+  it('should not render loading when items received', () => {
+    const component = render(<SecuritySideNavigation />, { wrapper: KibanaServicesProvider });
+    expect(component.queryByTestId('sideNavLoader')).not.toBeInTheDocument();
+  });
+
+  it('should render the SideNav when items received', () => {
+    const component = render(<SecuritySideNavigation />, { wrapper: KibanaServicesProvider });
+    expect(component.queryByTestId('solutionSideNav')).toBeInTheDocument();
+  });
+
+  it('should pass item props to the SolutionSideNav component', () => {
+    render(<SecuritySideNavigation />, { wrapper: KibanaServicesProvider });
+
+    expect(mockSolutionSideNav).toHaveBeenCalledWith(
+      expect.objectContaining({
+        items: sideNavItems,
+      })
+    );
+  });
+
+  it('should pass footerItems props to the SolutionSideNav component', () => {
+    mockUseSideNavItems.mockReturnValueOnce(sideNavFooterItems);
+    render(<SecuritySideNavigation />, { wrapper: KibanaServicesProvider });
+
+    expect(mockSolutionSideNav).toHaveBeenCalledWith(
+      expect.objectContaining({
+        footerItems: sideNavFooterItems,
+      })
+    );
+  });
+
+  it('should selectedId the SolutionSideNav component', () => {
+    render(<SecuritySideNavigation />, { wrapper: KibanaServicesProvider });
+
+    expect(mockSolutionSideNav).toHaveBeenCalledWith(
+      expect.objectContaining({
+        selectedId: SecurityPageName.alerts,
+      })
+    );
+  });
+});
diff --git a/x-pack/plugins/serverless_security/public/hooks/__mocks__/use_link_props.ts b/x-pack/plugins/serverless_security/public/hooks/__mocks__/use_link_props.ts
new file mode 100644
index 0000000000000..4941619cf3f99
--- /dev/null
+++ b/x-pack/plugins/serverless_security/public/hooks/__mocks__/use_link_props.ts
@@ -0,0 +1,16 @@
+/*
+ * 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 { GetLinkProps } from '../use_link_props';
+
+export const getLinkProps = jest.fn(() => ({
+  href: '/test-href',
+  onClick: jest.fn(),
+}));
+
+export const useLinkProps: GetLinkProps = getLinkProps;
+export const useGetLinkProps: () => GetLinkProps = jest.fn(() => getLinkProps);
diff --git a/x-pack/plugins/serverless_security/public/hooks/__mocks__/use_side_nav_items.ts b/x-pack/plugins/serverless_security/public/hooks/__mocks__/use_side_nav_items.ts
new file mode 100644
index 0000000000000..a01612190d8f9
--- /dev/null
+++ b/x-pack/plugins/serverless_security/public/hooks/__mocks__/use_side_nav_items.ts
@@ -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 type { SolutionSideNavItem } from '@kbn/security-solution-side-nav';
+
+const { usePartitionFooterNavItems: originalUsePartitionFooterNavItems } =
+  jest.requireActual('../use_side_nav_items');
+
+export const useSideNavItems = jest.fn((): SolutionSideNavItem[] => []);
+
+export const usePartitionFooterNavItems = jest.fn(
+  (sideNavItems: SolutionSideNavItem[]): [SolutionSideNavItem[], SolutionSideNavItem[]] =>
+    // Same implementation as original for convenience. Can be overridden in tests if needed
+    originalUsePartitionFooterNavItems(sideNavItems)
+);
+
+export const useSideNavSelectedId = jest.fn((_sideNavItems: SolutionSideNavItem[]): string => '');
diff --git a/x-pack/plugins/serverless_security/public/hooks/jest.config.js b/x-pack/plugins/serverless_security/public/hooks/jest.config.js
new file mode 100644
index 0000000000000..e384b19ed580b
--- /dev/null
+++ b/x-pack/plugins/serverless_security/public/hooks/jest.config.js
@@ -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.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../../..',
+  roots: ['<rootDir>/x-pack/plugins/serverless_security/public/hooks'],
+  testMatch: [
+    '<rootDir>/x-pack/plugins/serverless_security/public/hooks/**/*.test.{js,mjs,ts,tsx}',
+  ],
+  coverageDirectory:
+    '<rootDir>/target/kibana-coverage/jest/x-pack/plugins/serverless_security/public/hooks',
+  coverageReporters: ['text', 'html'],
+  collectCoverageFrom: [
+    '<rootDir>/x-pack/plugins/serverless_security/public/hooks/**/*.{ts,tsx}',
+    '!<rootDir>/x-pack/plugins/serverless_security/public/hooks/*.test.{ts,tsx}',
+    '!<rootDir>/x-pack/plugins/serverless_security/public/hooks/{__test__,__snapshots__,__examples__,*mock*,tests,test_helpers,integration_tests,types}/**/*',
+    '!<rootDir>/x-pack/plugins/serverless_security/public/hooks/*mock*.{ts,tsx}',
+    '!<rootDir>/x-pack/plugins/serverless_security/public/hooks/*.test.{ts,tsx}',
+    '!<rootDir>/x-pack/plugins/serverless_security/public/hooks/*.d.ts',
+    '!<rootDir>/x-pack/plugins/serverless_security/public/hooks/*.config.ts',
+    '!<rootDir>/x-pack/plugins/serverless_security/public/hooks/index.{js,ts,tsx}',
+  ],
+};
diff --git a/x-pack/plugins/serverless_security/public/hooks/use_link_props.test.tsx b/x-pack/plugins/serverless_security/public/hooks/use_link_props.test.tsx
new file mode 100644
index 0000000000000..b04f19be75b8f
--- /dev/null
+++ b/x-pack/plugins/serverless_security/public/hooks/use_link_props.test.tsx
@@ -0,0 +1,156 @@
+/*
+ * 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 { MouseEvent } from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { APP_UI_ID, SecurityPageName } from '@kbn/security-solution-plugin/common';
+import { KibanaServicesProvider, servicesMocks } from '../services.mock';
+import { useGetLinkProps, useLinkProps } from './use_link_props';
+
+const { getUrlForApp: mockGetUrlForApp, navigateToUrl: mockNavigateToUrl } =
+  servicesMocks.application;
+
+const href = '/app/security/test';
+mockGetUrlForApp.mockReturnValue(href);
+
+describe('useLinkProps', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should return link props', async () => {
+    const { result } = renderHook(useLinkProps, { wrapper: KibanaServicesProvider });
+
+    const linkProps = result.current;
+
+    expect(linkProps).toEqual({ href, onClick: expect.any(Function) });
+    expect(mockGetUrlForApp).toHaveBeenCalledTimes(1);
+    expect(mockGetUrlForApp).toHaveBeenCalledWith(APP_UI_ID, {
+      deepLinkId: undefined,
+      path: undefined,
+    });
+  });
+
+  it('should call navigate when clicked normally', async () => {
+    const ev = { preventDefault: jest.fn() } as unknown as MouseEvent;
+    const { result } = renderHook(useLinkProps, { wrapper: KibanaServicesProvider });
+
+    const { onClick } = result.current;
+    onClick(ev);
+
+    expect(mockNavigateToUrl).toHaveBeenCalledTimes(1);
+    expect(mockNavigateToUrl).toHaveBeenCalledWith(href);
+  });
+
+  it('should not call navigate when clicked with modifiers', async () => {
+    const ev = { preventDefault: jest.fn(), ctrlKey: true } as unknown as MouseEvent;
+    const { result } = renderHook(useLinkProps, { wrapper: KibanaServicesProvider });
+
+    const { onClick } = result.current;
+    onClick(ev);
+
+    expect(mockNavigateToUrl).not.toHaveBeenCalled();
+  });
+
+  it('should return link props passing deepLink', async () => {
+    const { result } = renderHook(useLinkProps, {
+      wrapper: KibanaServicesProvider,
+      initialProps: { deepLinkId: SecurityPageName.alerts },
+    });
+
+    const linkProps = result.current;
+
+    expect(linkProps).toEqual({ href, onClick: expect.any(Function) });
+    expect(mockGetUrlForApp).toHaveBeenCalledTimes(1);
+    expect(mockGetUrlForApp).toHaveBeenCalledWith(APP_UI_ID, {
+      deepLinkId: SecurityPageName.alerts,
+      path: undefined,
+    });
+  });
+
+  it('should return link props passing deepLink and path', async () => {
+    const { result } = renderHook(useLinkProps, {
+      wrapper: KibanaServicesProvider,
+      initialProps: { deepLinkId: SecurityPageName.alerts, path: '/test' },
+    });
+
+    const linkProps = result.current;
+
+    expect(linkProps).toEqual({ href, onClick: expect.any(Function) });
+    expect(mockGetUrlForApp).toHaveBeenCalledTimes(1);
+    expect(mockGetUrlForApp).toHaveBeenCalledWith(APP_UI_ID, {
+      deepLinkId: SecurityPageName.alerts,
+      path: '/test',
+    });
+  });
+});
+
+describe('useGetLinkProps', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should return link props', async () => {
+    const { result } = renderHook(useGetLinkProps, { wrapper: KibanaServicesProvider });
+
+    const linkProps = result.current({});
+
+    expect(linkProps).toEqual({ href, onClick: expect.any(Function) });
+    expect(mockGetUrlForApp).toHaveBeenCalledTimes(1);
+    expect(mockGetUrlForApp).toHaveBeenCalledWith(APP_UI_ID, {
+      deepLinkId: undefined,
+      path: undefined,
+    });
+  });
+
+  it('should call navigate when clicked normally', async () => {
+    const ev = { preventDefault: jest.fn() } as unknown as MouseEvent;
+    const { result } = renderHook(useGetLinkProps, { wrapper: KibanaServicesProvider });
+
+    const { onClick } = result.current({});
+    onClick(ev);
+
+    expect(mockNavigateToUrl).toHaveBeenCalledTimes(1);
+    expect(mockNavigateToUrl).toHaveBeenCalledWith(href);
+  });
+
+  it('should not call navigate when clicked with modifiers', async () => {
+    const ev = { preventDefault: jest.fn(), ctrlKey: true } as unknown as MouseEvent;
+    const { result } = renderHook(useGetLinkProps, { wrapper: KibanaServicesProvider });
+
+    const { onClick } = result.current({});
+    onClick(ev);
+
+    expect(mockNavigateToUrl).not.toHaveBeenCalled();
+  });
+
+  it('should return link props passing deepLink', async () => {
+    const { result } = renderHook(useGetLinkProps, { wrapper: KibanaServicesProvider });
+
+    const linkProps = result.current({ deepLinkId: SecurityPageName.alerts });
+
+    expect(linkProps).toEqual({ href, onClick: expect.any(Function) });
+    expect(mockGetUrlForApp).toHaveBeenCalledTimes(1);
+    expect(mockGetUrlForApp).toHaveBeenCalledWith(APP_UI_ID, {
+      deepLinkId: SecurityPageName.alerts,
+      path: undefined,
+    });
+  });
+
+  it('should return link props passing deepLink and path', async () => {
+    const { result } = renderHook(useGetLinkProps, { wrapper: KibanaServicesProvider });
+
+    const linkProps = result.current({ deepLinkId: SecurityPageName.alerts, path: '/test' });
+
+    expect(linkProps).toEqual({ href, onClick: expect.any(Function) });
+    expect(mockGetUrlForApp).toHaveBeenCalledTimes(1);
+    expect(mockGetUrlForApp).toHaveBeenCalledWith(APP_UI_ID, {
+      deepLinkId: SecurityPageName.alerts,
+      path: '/test',
+    });
+  });
+});
diff --git a/x-pack/plugins/serverless_security/public/hooks/use_link_props.ts b/x-pack/plugins/serverless_security/public/hooks/use_link_props.ts
index 6cdaef0d94d31..3a1989dbdc79a 100644
--- a/x-pack/plugins/serverless_security/public/hooks/use_link_props.ts
+++ b/x-pack/plugins/serverless_security/public/hooks/use_link_props.ts
@@ -21,7 +21,7 @@ interface GetLinkPropsParams {
   onClick?: MouseEventHandler;
 }
 
-type GetLinkProps = (params: GetLinkPropsParams) => LinkProps;
+export type GetLinkProps = (params: GetLinkPropsParams) => LinkProps;
 
 export const useLinkProps: GetLinkProps = (props) => {
   const { application } = useKibana().services;
diff --git a/x-pack/plugins/serverless_security/public/hooks/use_nav_links.ts b/x-pack/plugins/serverless_security/public/hooks/use_nav_links.ts
new file mode 100644
index 0000000000000..7d2b16f6cc6e8
--- /dev/null
+++ b/x-pack/plugins/serverless_security/public/hooks/use_nav_links.ts
@@ -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 { useMemo } from 'react';
+import useObservable from 'react-use/lib/useObservable';
+import { useKibana } from '../services';
+
+export const useNavLinks = () => {
+  const { securitySolution } = useKibana().services;
+  const { getNavLinks$ } = securitySolution;
+  const navLinks$ = useMemo(() => getNavLinks$(), [getNavLinks$]);
+  return useObservable(navLinks$, []);
+};
diff --git a/x-pack/plugins/serverless_security/public/hooks/use_side_nav_items.test.tsx b/x-pack/plugins/serverless_security/public/hooks/use_side_nav_items.test.tsx
new file mode 100644
index 0000000000000..064b2bafd82a4
--- /dev/null
+++ b/x-pack/plugins/serverless_security/public/hooks/use_side_nav_items.test.tsx
@@ -0,0 +1,302 @@
+/*
+ * 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 { renderHook } from '@testing-library/react-hooks';
+import {
+  usePartitionFooterNavItems,
+  useSideNavItems,
+  useSideNavSelectedId,
+} from './use_side_nav_items';
+import { BehaviorSubject } from 'rxjs';
+import type { NavigationLink } from '@kbn/security-solution-plugin/public/common/links/types';
+import { SecurityPageName } from '@kbn/security-solution-plugin/common';
+import { KibanaServicesProvider, servicesMocks } from '../services.mock';
+
+jest.mock('./use_link_props');
+
+const mockNavLinks = jest.fn((): NavigationLink[] => []);
+servicesMocks.securitySolution.getNavLinks$.mockImplementation(
+  () => new BehaviorSubject(mockNavLinks())
+);
+
+const mockUseLocation = jest.fn(() => ({ pathname: '/' }));
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => mockUseLocation(),
+}));
+
+describe('useSideNavItems', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should return empty items', async () => {
+    const { result } = renderHook(useSideNavItems, { wrapper: KibanaServicesProvider });
+
+    const items = result.current;
+
+    expect(items).toEqual([]);
+    expect(servicesMocks.securitySolution.getNavLinks$).toHaveBeenCalledTimes(1);
+  });
+
+  it('should return main items', async () => {
+    mockNavLinks.mockReturnValueOnce([
+      { id: SecurityPageName.alerts, title: 'Alerts' },
+      { id: SecurityPageName.case, title: 'Cases' },
+    ]);
+    const { result } = renderHook(useSideNavItems, { wrapper: KibanaServicesProvider });
+
+    const items = result.current;
+    expect(items).toEqual([
+      {
+        id: SecurityPageName.alerts,
+        label: 'Alerts',
+        href: expect.any(String),
+        onClick: expect.any(Function),
+      },
+      {
+        id: SecurityPageName.case,
+        label: 'Cases',
+        href: expect.any(String),
+        onClick: expect.any(Function),
+      },
+    ]);
+  });
+
+  it('should return secondary items', async () => {
+    mockNavLinks.mockReturnValueOnce([
+      {
+        id: SecurityPageName.dashboards,
+        title: 'Dashboards',
+        links: [{ id: SecurityPageName.detectionAndResponse, title: 'Detection & Response' }],
+      },
+    ]);
+    const { result } = renderHook(useSideNavItems, { wrapper: KibanaServicesProvider });
+
+    const items = result.current;
+    expect(items).toEqual([
+      {
+        id: SecurityPageName.dashboards,
+        label: 'Dashboards',
+        href: expect.any(String),
+        onClick: expect.any(Function),
+        items: [
+          {
+            id: SecurityPageName.detectionAndResponse,
+            label: 'Detection & Response',
+            href: expect.any(String),
+            onClick: expect.any(Function),
+          },
+        ],
+      },
+    ]);
+  });
+
+  it('should return get started link', async () => {
+    mockNavLinks.mockReturnValueOnce([
+      {
+        id: SecurityPageName.landing,
+        title: 'Get Started',
+      },
+    ]);
+    const { result } = renderHook(useSideNavItems, { wrapper: KibanaServicesProvider });
+
+    const items = result.current;
+
+    expect(items).toEqual([
+      {
+        id: SecurityPageName.landing,
+        label: 'GET STARTED',
+        href: expect.any(String),
+        onClick: expect.any(Function),
+        labelSize: 'xs',
+        iconType: 'launch',
+        appendSeparator: true,
+      },
+    ]);
+  });
+});
+
+describe('usePartitionFooterNavItems', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should partition main items only', async () => {
+    const mainInputItems = [
+      {
+        id: SecurityPageName.dashboards,
+        label: 'Dashboards',
+        href: '',
+        onClick: jest.fn(),
+      },
+      {
+        id: SecurityPageName.alerts,
+        label: 'Alerts',
+        href: '',
+        onClick: jest.fn(),
+      },
+    ];
+    const { result } = renderHook(usePartitionFooterNavItems, {
+      initialProps: mainInputItems,
+    });
+
+    const [items, footerItems] = result.current;
+
+    expect(items).toEqual(mainInputItems);
+    expect(footerItems).toEqual([]);
+  });
+
+  it('should partition footer items only', async () => {
+    const footerInputItems = [
+      {
+        id: SecurityPageName.landing,
+        label: 'GET STARTED',
+        href: '',
+        onClick: jest.fn(),
+      },
+      {
+        id: SecurityPageName.administration,
+        label: 'Manage',
+        href: '',
+        onClick: jest.fn(),
+      },
+    ];
+    const { result } = renderHook(usePartitionFooterNavItems, {
+      initialProps: footerInputItems,
+    });
+
+    const [items, footerItems] = result.current;
+
+    expect(items).toEqual([]);
+    expect(footerItems).toEqual(footerInputItems);
+  });
+
+  it('should partition main and footer items', async () => {
+    const mainInputItems = [
+      {
+        id: SecurityPageName.dashboards,
+        label: 'Dashboards',
+        href: '',
+        onClick: jest.fn(),
+      },
+      {
+        id: SecurityPageName.alerts,
+        label: 'Alerts',
+        href: '',
+        onClick: jest.fn(),
+      },
+    ];
+    const footerInputItems = [
+      {
+        id: SecurityPageName.landing,
+        label: 'GET STARTED',
+        href: '',
+        onClick: jest.fn(),
+      },
+      {
+        id: SecurityPageName.administration,
+        label: 'Manage',
+        href: '',
+        onClick: jest.fn(),
+      },
+    ];
+    const { result } = renderHook(usePartitionFooterNavItems, {
+      initialProps: [...mainInputItems, ...footerInputItems],
+    });
+
+    const [items, footerItems] = result.current;
+
+    expect(items).toEqual(mainInputItems);
+    expect(footerItems).toEqual(footerInputItems);
+  });
+});
+
+describe('useSideNavSelectedId', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should return empty string when no item selected', async () => {
+    const items = [
+      {
+        id: SecurityPageName.dashboards,
+        label: 'Dashboards',
+        href: '/app/security/dashboards',
+        onClick: jest.fn(),
+      },
+      {
+        id: SecurityPageName.alerts,
+        label: 'Alerts',
+        href: '/app/security/alerts',
+        onClick: jest.fn(),
+      },
+    ];
+
+    const { result } = renderHook(useSideNavSelectedId, {
+      wrapper: KibanaServicesProvider,
+      initialProps: items,
+    });
+
+    const selectedId = result.current;
+    expect(selectedId).toEqual('');
+  });
+
+  it('should return the item with path selected', async () => {
+    mockUseLocation.mockReturnValueOnce({ pathname: '/app/security/alerts' });
+    const items = [
+      {
+        id: SecurityPageName.dashboards,
+        label: 'Dashboards',
+        href: '/app/security/dashboards',
+        onClick: jest.fn(),
+      },
+      {
+        id: SecurityPageName.alerts,
+        label: 'Alerts',
+        href: '/app/security/alerts',
+        onClick: jest.fn(),
+      },
+    ];
+
+    const { result } = renderHook(useSideNavSelectedId, {
+      wrapper: KibanaServicesProvider,
+      initialProps: items,
+    });
+
+    const selectedId = result.current;
+    expect(selectedId).toEqual(SecurityPageName.alerts);
+  });
+
+  it('should return the main item when nested path selected', async () => {
+    mockUseLocation.mockReturnValueOnce({ pathname: '/app/security/detection_response' });
+    const items = [
+      {
+        id: SecurityPageName.dashboards,
+        label: 'Dashboards',
+        href: '/app/security/dashboards',
+        onClick: jest.fn(),
+        items: [
+          {
+            id: SecurityPageName.detectionAndResponse,
+            label: 'Detection & Response',
+            href: '/app/security/detection_response',
+            onClick: jest.fn(),
+          },
+        ],
+      },
+    ];
+
+    const { result } = renderHook(useSideNavSelectedId, {
+      wrapper: KibanaServicesProvider,
+      initialProps: items,
+    });
+
+    const selectedId = result.current;
+    expect(selectedId).toEqual(SecurityPageName.dashboards);
+  });
+});
diff --git a/x-pack/plugins/serverless_security/public/hooks/use_side_nav_items.ts b/x-pack/plugins/serverless_security/public/hooks/use_side_nav_items.ts
index bade229d98794..3f6069be444e0 100644
--- a/x-pack/plugins/serverless_security/public/hooks/use_side_nav_items.ts
+++ b/x-pack/plugins/serverless_security/public/hooks/use_side_nav_items.ts
@@ -6,13 +6,13 @@
  */
 
 import { useMemo } from 'react';
-import useObservable from 'react-use/lib/useObservable';
 import { matchPath, useLocation } from 'react-router-dom';
 import { partition } from 'lodash/fp';
 import { SecurityPageName } from '@kbn/security-solution-plugin/common';
 import type { SolutionSideNavItem } from '@kbn/security-solution-side-nav';
 import { useKibana } from '../services';
 import { useGetLinkProps } from './use_link_props';
+import { useNavLinks } from './use_nav_links';
 
 const isFooterNavItem = (id: string) =>
   id === SecurityPageName.landing || id === SecurityPageName.administration;
@@ -43,8 +43,7 @@ const findItemsByPath = (
  * Returns all the formatted SideNavItems, including external links
  */
 export const useSideNavItems = (): SolutionSideNavItem[] => {
-  const { securitySolution } = useKibana().services;
-  const navLinks = useObservable(securitySolution.navLinks$, []);
+  const navLinks = useNavLinks();
   const getLinkProps = useGetLinkProps();
 
   const securitySideNavItems = useMemo(
@@ -68,7 +67,6 @@ export const useSideNavItems = (): SolutionSideNavItem[] => {
             id: navLink.id,
             label: navLink.title,
             ...getLinkProps({ deepLinkId: navLink.id }),
-            // ...(navLink.unauthorized && { unauthorized: true }),
             ...(navLink.categories?.length && { categories: navLink.categories }),
             ...(navLink.links?.length && {
               items: navLink.links.reduce<SolutionSideNavItem[]>((acc, current) => {
diff --git a/x-pack/plugins/serverless_security/public/jest.config.js b/x-pack/plugins/serverless_security/public/jest.config.js
new file mode 100644
index 0000000000000..8cbea4b0a4e67
--- /dev/null
+++ b/x-pack/plugins/serverless_security/public/jest.config.js
@@ -0,0 +1,27 @@
+/*
+ * 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.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../..',
+  /** all nested directories have their own Jest config file */
+  testMatch: ['<rootDir>/x-pack/plugins/serverless_security/public/*.test.{js,mjs,ts,tsx}'],
+  roots: ['<rootDir>/x-pack/plugins/serverless_security/public'],
+  coverageDirectory:
+    '<rootDir>/target/kibana-coverage/jest/x-pack/plugins/serverless_security/public',
+  coverageReporters: ['text', 'html'],
+  collectCoverageFrom: [
+    '<rootDir>/x-pack/plugins/serverless_security/public/**/*.{ts,tsx}',
+    '!<rootDir>/x-pack/plugins/serverless_security/public/*.test.{ts,tsx}',
+    '!<rootDir>/x-pack/plugins/serverless_security/public/{__test__,__snapshots__,__examples__,*mock*,tests,test_helpers,integration_tests,types}/**/*',
+    '!<rootDir>/x-pack/plugins/serverless_security/public/*mock*.{ts,tsx}',
+    '!<rootDir>/x-pack/plugins/serverless_security/public/*.test.{ts,tsx}',
+    '!<rootDir>/x-pack/plugins/serverless_security/public/*.d.ts',
+    '!<rootDir>/x-pack/plugins/serverless_security/public/*.config.ts',
+    '!<rootDir>/x-pack/plugins/serverless_security/public/index.{js,ts,tsx}',
+  ],
+};
diff --git a/x-pack/plugins/serverless_security/public/services.mock.tsx b/x-pack/plugins/serverless_security/public/services.mock.tsx
new file mode 100644
index 0000000000000..142ebb2152e63
--- /dev/null
+++ b/x-pack/plugins/serverless_security/public/services.mock.tsx
@@ -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 React from 'react';
+import { I18nProvider } from '@kbn/i18n-react';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
+import { coreMock } from '@kbn/core/public/mocks';
+import { serverlessMock } from '@kbn/serverless/public/mocks';
+import { securityMock } from '@kbn/security-plugin/public/mocks';
+import { securitySolutionMock } from '@kbn/security-solution-plugin/public/mocks';
+
+export const servicesMocks = {
+  ...coreMock.createStart(),
+  serverless: serverlessMock.createStart(),
+  security: securityMock.createStart(),
+  securitySolution: securitySolutionMock.createStart(),
+};
+
+export const KibanaServicesProvider = React.memo(({ children }) => (
+  <I18nProvider>
+    <KibanaContextProvider services={servicesMocks}>{children}</KibanaContextProvider>
+  </I18nProvider>
+));

From fd6cf01df6f0970e6f9ce080997283b0ba328f4e Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Thu, 4 May 2023 15:32:50 +0000
Subject: [PATCH 10/11] [CI] Auto-commit changed files from 'node
 scripts/lint_ts_projects --fix'

---
 x-pack/plugins/serverless_security/tsconfig.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/x-pack/plugins/serverless_security/tsconfig.json b/x-pack/plugins/serverless_security/tsconfig.json
index d2e05fc98d523..75252c18a0cfa 100644
--- a/x-pack/plugins/serverless_security/tsconfig.json
+++ b/x-pack/plugins/serverless_security/tsconfig.json
@@ -24,5 +24,6 @@
     "@kbn/security-solution-side-nav",
     "@kbn/kibana-react-plugin",
     "@kbn/core-chrome-browser",
+    "@kbn/i18n-react",
   ]
 }

From 47ee47196dfee066259ae1b24b4bf17c6b57fb6e Mon Sep 17 00:00:00 2001
From: semd <sergi.massaneda@elastic.co>
Date: Fri, 5 May 2023 11:59:15 +0200
Subject: [PATCH 11/11] add appEx cc to serverless_security codeowners

---
 .github/CODEOWNERS | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 2a1760e516640..fa2a580b4ae83 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -789,6 +789,7 @@ packages/kbn-yarn-lock-validator @elastic/kibana-operations
 #CC# /src/plugins/home/server/services/ @elastic/appex-sharedux
 #CC# /src/plugins/home/ @elastic/appex-sharedux
 #CC# /x-pack/plugins/reporting/ @elastic/appex-sharedux
+#CC# /x-pack/plugins/serverless_security/ @elastic/appex-sharedux
 
 ### Observability Plugins