[PoC][Security Solution] Serverless navigation

config/serverless.security.yml

@@ -1,3 +1,4 @@
+enterpriseSearch.enabled: false
 xpack.apm.enabled: false
 xpack.canvas.enabled: false
 xpack.observability.enabled: false

packages/core/chrome/core-chrome-browser-internal/src/ui/solution/header.tsx

@@ -7,16 +7,8 @@
  */
 
 import React from 'react';
-import {
-  EuiButtonIcon,
-  EuiCollapsibleNav,
-  EuiHeader,
-  EuiHeaderLogo,
-  EuiHeaderSection,
-  EuiHeaderSectionItem,
-  EuiThemeProvider,
-  useEuiTheme,
-} from '@elastic/eui';
+import { Router } from 'react-router-dom';
+import { EuiHeader, EuiHeaderLogo, EuiHeaderSection, EuiHeaderSectionItem } from '@elastic/eui';
 import {
   ChromeBreadcrumb,
   ChromeGlobalHelpExtensionMenuLink,
@@ -51,8 +43,6 @@ export const SolutionHeader = ({
   navigation,
   ...observables
 }: Props) => {
-  const { euiTheme, colorMode } = useEuiTheme();
-
   const renderLogo = () => (
     <EuiHeaderLogo
       iconType="logoElastic"
@@ -91,28 +81,7 @@ export const SolutionHeader = ({
           </EuiHeaderSectionItem>
         </EuiHeaderSection>
       </EuiHeader>
-      <EuiThemeProvider colorMode={colorMode === 'DARK' ? 'LIGHT' : 'DARK'}>
-        <EuiCollapsibleNav
-          css={{
-            borderInlineEndWidth: 1,
-            background: euiTheme.colors.darkestShade,
-          }}
-          isOpen={true}
-          onClose={() => {}}
-          closeButtonProps={{ iconType: 'menuLeft' }}
-          showButtonIfDocked={true}
-          isDocked={true}
-          size={248}
-          hideCloseButton={false}
-          button={
-            <span css={{ marginLeft: -40, marginTop: 16, position: 'fixed', zIndex: 1000 }}>
-              <EuiButtonIcon iconType="menuLeft" aria-label="Open nav" color="text" />
-            </span>
-          }
-        >
-          {navigation}
-        </EuiCollapsibleNav>
-      </EuiThemeProvider>
+      <Router history={application.history}>{navigation}</Router>
     </>
   );
 };

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

@@ -8,6 +8,7 @@
 // TODO(jbudz): should be removed when upgrading to [email protected]
 // this is a skip for the errors created when typechecking with isolatedModules
 export {};
+export { APP_UI_ID, SecurityPageName } from './constants';
 export { ELASTIC_SECURITY_RULE_ID } from './detection_engine/constants';
 
 // Careful of exporting anything from this file as any file(s) you export here will cause your page bundle size to increase.

x-pack/plugins/security_solution/public/app/deep_links/index.ts

@@ -78,7 +78,7 @@ import {
   USERS_PATH,
 } from '../../../common/constants';
 import type { ExperimentalFeatures } from '../../../common/experimental_features';
-import { hasCapabilities, subscribeAppLinks } from '../../common/links';
+import { appLinks$, hasCapabilities } from '../../common/links';
 import type { AppLinkItems } from '../../common/links/types';
 
 export const FEATURE = {
@@ -630,7 +630,7 @@ const formatDeepLinks = (appLinks: AppLinkItems): AppDeepLink[] =>
  * Registers any change in appLinks to be updated in app deepLinks
  */
 export const registerDeepLinksUpdater = (appUpdater$: Subject<AppUpdater>): Subscription => {
-  return subscribeAppLinks((appLinks) => {
+  return appLinks$.subscribe((appLinks) => {
     appUpdater$.next(() => ({
       navLinkStatus: AppNavLinkStatus.hidden, // needed to prevent main security link to switch to visible after update
       deepLinks: formatDeepLinks(appLinks),

x-pack/plugins/security_solution/public/common/components/navigation/security_side_nav/security_side_nav.tsx

@@ -13,7 +13,7 @@ import { SecurityPageName } from '../../../../app/types';
 import { getAncestorLinksInfo } from '../../../links';
 import { useRouteSpy } from '../../../utils/route/use_route_spy';
 import { useGetSecuritySolutionLinkProps } from '../../links';
-import { useAppNavLinks } from '../nav_links';
+import { useNavLinks } from '../../../links/nav_links';
 import { useShowTimeline } from '../../../utils/timeline/use_show_timeline';
 import { useIsPolicySettingsBarVisible } from '../../../../management/pages/policy/view/policy_hooks';
 import { track } from '../../../lib/telemetry';
@@ -30,7 +30,7 @@ const isGetStartedNavItem = (id: SecurityPageName) => id === SecurityPageName.la
  * Returns the formatted `items` and `footerItems` to be rendered in the navigation
  */
 const useSolutionSideNavItems = () => {
-  const navLinks = useAppNavLinks();
+  const navLinks = useNavLinks();
   const getSecuritySolutionLinkProps = useGetSecuritySolutionLinkProps(); // adds href and onClick props
 
   const sideNavItems = useMemo(() => {

x-pack/plugins/security_solution/public/common/components/navigation/types.ts

@@ -5,9 +5,7 @@
  * 2.0.
  */
 
-import type { IconType } from '@elastic/eui';
 import { SecurityPageName } from '../../../app/types';
-import type { LinkCategories } from '../../links';
 
 export type SearchNavTab = NavTab | { urlKey: UrlStateType; isDetailPage: boolean };
 
@@ -101,18 +99,3 @@ export interface SecuritySolutionTabNavigationProps {
 }
 
 export type NavigateToUrl = (url: string) => void;
-export interface NavLinkItem {
-  categories?: LinkCategories;
-  description?: string;
-  disabled?: boolean;
-  icon?: IconType;
-  id: SecurityPageName;
-  links?: NavLinkItem[];
-  image?: string;
-  title: string;
-  skipUrlState?: boolean;
-  isBeta?: boolean;
-  betaOptions?: {
-    text: string;
-  };
-}

x-pack/plugins/security_solution/public/common/links/links.ts

@@ -7,7 +7,8 @@
 
 import type { Capabilities } from '@kbn/core/public';
 import { get, isArray } from 'lodash';
-import { useEffect, useState } from 'react';
+import { useMemo } from 'react';
+import useObservable from 'react-use/lib/useObservable';
 import { BehaviorSubject } from 'rxjs';
 import type { SecurityPageName } from '../../../common/constants';
 import type {
@@ -20,72 +21,48 @@ import type {
 } from './types';
 
 /**
- * App links updater, it keeps the value of the app links in sync with all application.
- * It can be updated using `updateAppLinks` or `excludeAppLink`
- * Read it using `subscribeAppLinks` or `useAppLinks` hook.
+ * App links updater, it stores the `appLinkItems` recursive hierarchy and keeps
+ * the value of the app links in sync with all application components.
+ * It can be updated using `updateAppLinks`.
+ * Read it using subscription or `useAppLinks` hook.
  */
-const appLinksUpdater$ = new BehaviorSubject<{
-  links: AppLinkItems;
-  normalizedLinks: NormalizedLinks;
-}>({
-  links: [], // stores the appLinkItems recursive hierarchy
-  normalizedLinks: {}, // stores a flatten normalized object for direct id access
-});
+const appLinksUpdater$ = new BehaviorSubject<AppLinkItems>([]);
+// stores a flatten normalized appLinkItems object for internal direct id access
+const normalizedAppLinksUpdater$ = new BehaviorSubject<NormalizedLinks>({});
 
-const getAppLinksValue = (): AppLinkItems => appLinksUpdater$.getValue().links;
-const getNormalizedLinksValue = (): NormalizedLinks => appLinksUpdater$.getValue().normalizedLinks;
+// AppLinks observable
+export const appLinks$ = appLinksUpdater$.asObservable();
 
 /**
- * Subscribes to the updater to get the app links updates
+ * Updates the app links applying the filter by permissions
  */
-export const subscribeAppLinks = (onChange: (links: AppLinkItems) => void) =>
-  appLinksUpdater$.subscribe(({ links }) => onChange(links));
+export const updateAppLinks = (
+  appLinksToUpdate: AppLinkItems,
+  linksPermissions: LinksPermissions
+) => {
+  const filteredAppLinks = getFilteredAppLinks(appLinksToUpdate, linksPermissions);
+  appLinksUpdater$.next(Object.freeze(filteredAppLinks));
+  normalizedAppLinksUpdater$.next(Object.freeze(getNormalizedLinks(filteredAppLinks)));
+};
 
 /**
  * Hook to get the app links updated value
  */
-export const useAppLinks = (): AppLinkItems => {
-  const [appLinks, setAppLinks] = useState(getAppLinksValue);
-
-  useEffect(() => {
-    const linksSubscription = subscribeAppLinks((newAppLinks) => {
-      setAppLinks(newAppLinks);
-    });
-    return () => linksSubscription.unsubscribe();
-  }, []);
-
-  return appLinks;
-};
+export const useAppLinks = (): AppLinkItems =>
+  useObservable(appLinksUpdater$, appLinksUpdater$.getValue());
+/**
+ * Hook to get the normalized app links updated value
+ */
+export const useNormalizedAppLinks = (): NormalizedLinks =>
+  useObservable(normalizedAppLinksUpdater$, normalizedAppLinksUpdater$.getValue());
 
 /**
  * Hook to check if a link exists in the application links,
  * It can be used to know if a link access is authorized.
  */
 export const useLinkExists = (id: SecurityPageName): boolean => {
-  const [linkExists, setLinkExists] = useState(!!getNormalizedLink(id));
-
-  useEffect(() => {
-    const linksSubscription = subscribeAppLinks(() => {
-      setLinkExists(!!getNormalizedLink(id));
-    });
-    return () => linksSubscription.unsubscribe();
-  }, [id]);
-
-  return linkExists;
-};
-
-/**
- * Updates the app links applying the filter by permissions
- */
-export const updateAppLinks = (
-  appLinksToUpdate: AppLinkItems,
-  linksPermissions: LinksPermissions
-) => {
-  const filteredAppLinks = getFilteredAppLinks(appLinksToUpdate, linksPermissions);
-  appLinksUpdater$.next({
-    links: Object.freeze(filteredAppLinks),
-    normalizedLinks: Object.freeze(getNormalizedLinks(filteredAppLinks)),
-  });
+  const normalizedLinks = useNormalizedAppLinks();
+  return useMemo(() => !!normalizedLinks[id], [normalizedLinks, id]);
 };
 
 /**
@@ -128,6 +105,10 @@ export const needsUrlState = (id: SecurityPageName): boolean => {
   return !getNormalizedLink(id)?.skipUrlState;
 };
 
+export const getLinksWithHiddenTimeline = (): LinkInfo[] => {
+  return Object.values(normalizedAppLinksUpdater$.getValue()).filter((link) => link.hideTimeline);
+};
+
 // Internal functions
 
 /**
@@ -136,8 +117,8 @@ export const needsUrlState = (id: SecurityPageName): boolean => {
 const getNormalizedLinks = (
   currentLinks: AppLinkItems,
   parentId?: SecurityPageName
-): NormalizedLinks => {
-  return currentLinks.reduce<NormalizedLinks>((normalized, { links, ...currentLink }) => {
+): NormalizedLinks =>
+  currentLinks.reduce<NormalizedLinks>((normalized, { links, ...currentLink }) => {
     normalized[currentLink.id] = {
       ...currentLink,
       parentId,
@@ -147,10 +128,9 @@ const getNormalizedLinks = (
     }
     return normalized;
   }, {});
-};
 
 const getNormalizedLink = (id: SecurityPageName): Readonly<NormalizedLink> | undefined =>
-  getNormalizedLinksValue()[id];
+  normalizedAppLinksUpdater$.getValue()[id];
 
 const getFilteredAppLinks = (
   appLinkToFilter: AppLinkItems,
@@ -226,7 +206,3 @@ const isLinkAllowed = (
   }
   return true;
 };
-
-export const getLinksWithHiddenTimeline = (): LinkInfo[] => {
-  return Object.values(getNormalizedLinksValue()).filter((link) => link.hideTimeline);
-};