[Security Solution][Entity Analytics] Change hide timeline approach in priv mon onboarding (#229096)

## Summary

Remove the hook to update link config, in favour of the CSS approach.

### Why
As discussed with @michaelolo24 and @kqualters-elastic, the
`useUpdateLinkConfig` is too generic and too powerful. Every time the
function is called, the Security Solution plugin registry updater is
called to change the `deepLinks`, and it re-mounts the app.
It's very prone to misuse, and we don't want to open that door,
especially if it's created only to solve this small visual issue with
the timeline.

### Alternative
The "patchy but simple" approach proposed by @kqualters-elastic, which
hides the timeline updating the `element.style.display`, has been
applied. A `setTimeout` has been introduced to solve the problem of the
timeline not being rendered yet when the effect is executed.

@machadoum Please let me know what you think.

## Demo


https://github.com/user-attachments/assets/0347fddb-07bd-43f8-8899-6a10a9b2efd0

(The update of the status from "onboarding" to "dashboard" has been
artificially simulated for this demo.)

Author: semd

x-pack/solutions/security/plugins/security_solution/public/app/links/application_links_updater.ts

@@ -36,7 +36,6 @@ export interface ApplicationLinksUpdateParams {
 class ApplicationLinksUpdater {
   private readonly linksSubject$ = new BehaviorSubject<AppLinkItems>([]);
   private readonly normalizedLinksSubject$ = new BehaviorSubject<NormalizedLinks>({});
-  private lastUpdateParams?: ApplicationLinksUpdateParams | undefined;
 
   /** Observable that stores the links recursive hierarchy */
   public readonly links$: Observable<AppLinkItems>;
@@ -52,7 +51,6 @@ class ApplicationLinksUpdater {
    * Updates the internal app links applying the filter by permissions
    */
   public update(appLinksToUpdate: AppLinkItems, params: ApplicationLinksUpdateParams) {
-    this.lastUpdateParams = params;
     const processedAppLinks = this.processAppLinks(appLinksToUpdate, params);
     this.linksSubject$.next(Object.freeze(processedAppLinks));
     this.normalizedLinksSubject$.next(Object.freeze(this.getNormalizedLinks(processedAppLinks)));
@@ -65,36 +63,6 @@ class ApplicationLinksUpdater {
     return this.normalizedLinksSubject$.getValue();
   }
 
-  /**
-   * Updates a specific app link by its `SecurityPageName` identifier.
-   */
-  public updateAppLink(id: SecurityPageName, appLink: Partial<LinkItem>) {
-    if (!this.lastUpdateParams) {
-      throw new Error(
-        'Cannot update app link without previous update params. Please call `update` method first.'
-      );
-    }
-    const currentLinks = this.linksSubject$.getValue();
-    const updatedLinks = this.getUpdatedAppLink(id, appLink, currentLinks);
-    this.update(updatedLinks, this.lastUpdateParams);
-  }
-
-  private getUpdatedAppLink(
-    id: SecurityPageName,
-    appLinkUpdate: Partial<LinkItem>,
-    currentLinks: AppLinkItems
-  ): LinkItem[] {
-    return currentLinks.map((link) => {
-      if (link.id === id) {
-        return { ...link, ...appLinkUpdate };
-      }
-      if (link.links) {
-        return { ...link, links: this.getUpdatedAppLink(id, appLinkUpdate, link.links) };
-      }
-      return link;
-    });
-  }
-
   /**
    * Creates the `NormalizedLinks` structure from a `LinkItem` array
    */

x-pack/solutions/security/plugins/security_solution/public/common/links/links_hooks.ts

@@ -7,8 +7,6 @@
 import { useMemo, useCallback } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import type { SecurityPageName } from '@kbn/security-solution-navigation';
-import memoizeOne from 'memoize-one';
-import { isEqual } from 'lodash';
 import type { LinkInfo, NormalizedLink, NormalizedLinks } from './types';
 import { applicationLinksUpdater } from '../../app/links/application_links_updater';
 
@@ -80,22 +78,3 @@ export const useParentLinks = (id: SecurityPageName): LinkInfo[] => {
     return ancestors.reverse();
   }, [normalizedLinks, id]);
 };
-
-/**
- * Hook that returns a function to update a specific link configuration.
- * It takes the `SecurityPageName` id and a partial `LinkInfo` object to update the link.
- * The function will update the links observable and trigger a re-render of components that depend on the links.
- * Use with caution, as it will also trigger an update of the plugin deepLinks configuration as well.
- */
-type UpdateLinkConfig = (id: SecurityPageName, update: Partial<Omit<LinkInfo, 'id'>>) => void;
-export const useUpdateLinkConfig = (): UpdateLinkConfig => {
-  const updateLinkConfig = useMemo<UpdateLinkConfig>(
-    () =>
-      // make sure to only update if the update is different, this is important to avoid unnecessary updates
-      memoizeOne<UpdateLinkConfig>((id, update) => {
-        applicationLinksUpdater.updateAppLink(id, update);
-      }, isEqual), // deep equality check
-    []
-  );
-  return updateLinkConfig;
-};

x-pack/solutions/security/plugins/security_solution/public/common/utils/timeline/force_hidden_timeline.ts

@@ -0,0 +1,37 @@
+/*
+ * 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.
+ */
+
+const TIMELINE_SELECTOR = '[data-test-subj="timeline-bottom-bar-container"]';
+
+/**
+ * A utility function to forcefully hide the timeline bottom bar.
+ * This is useful for scenarios where the timeline should not be visible, such as during onboarding or initialization.
+ * @param hidden Whether the timeline should be forced hidden or have the default visibility.
+ */
+export const forceHiddenTimeline = (hidden: boolean) => {
+  let element: HTMLElement | null = null;
+  const timeout = setTimeout(() => {
+    // Use a timeout to ensure the element is available in the DOM
+    // This is necessary because the element might not be rendered immediately
+    element = document.querySelector(TIMELINE_SELECTOR);
+    if (element) {
+      if (hidden) {
+        element.style.display = 'none';
+      } else {
+        element.style.removeProperty('display');
+      }
+    }
+  });
+
+  // Return the cleanup function to clear the timeout
+  return () => {
+    clearTimeout(timeout);
+    if (element) {
+      element.style.removeProperty('display');
+    }
+  };
+};

x-pack/solutions/security/plugins/security_solution/public/entity_analytics/pages/entity_analytics_privileged_user_monitoring_page.tsx

@@ -39,9 +39,9 @@ import { usePrivilegedMonitoringEngineStatus } from '../api/hooks/use_privileged
 import { PrivilegedUserMonitoringManageDataSources } from '../components/privileged_user_monitoring_manage_data_sources';
 import { EmptyPrompt } from '../../common/components/empty_prompt';
 import { useDataView } from '../../data_view_manager/hooks/use_data_view';
-import { useLinkInfo, useUpdateLinkConfig } from '../../common/links/links_hooks';
 import { PageLoader } from '../../common/components/page_loader';
 import { DataViewManagerScopeName } from '../../data_view_manager/constants';
+import { forceHiddenTimeline } from '../../common/utils/timeline/force_hidden_timeline';
 
 type PageState =
   | { type: 'fetchingEngineStatus' }
@@ -179,24 +179,12 @@ export const EntityAnalyticsPrivilegedUserMonitoringPage = () => {
     engineStatus.isLoading,
   ]);
 
-  const linkInfo = useLinkInfo(SecurityPageName.entityAnalyticsPrivilegedUserMonitoring);
-  const updateLinkConfig = useUpdateLinkConfig();
-
-  // Update UrlParam to add hideTimeline to the URL when the onboarding is loaded and removes it when dashboard is loaded
+  // Hide the timeline bottom bar when the page is in onboarding or initializing state
   useEffect(() => {
-    // do not change the link config when the engine status is being fetched
-    if (state.type === 'fetchingEngineStatus') {
-      return;
-    }
-
     const hideTimeline = ['onboarding', 'initializingEngine'].includes(state.type);
-    // update the hideTimeline property in the link config. This call triggers expensive operations, use with love
-    const hideTimelineConfig = linkInfo?.hideTimeline ?? false;
-
-    if (hideTimeline !== hideTimelineConfig) {
-      updateLinkConfig(SecurityPageName.entityAnalyticsPrivilegedUserMonitoring, { hideTimeline });
-    }
-  }, [linkInfo?.hideTimeline, state.type, updateLinkConfig]);
+    const cleanup = forceHiddenTimeline(hideTimeline);
+    return cleanup;
+  }, [state.type]);
 
   const fullHeightCSS = css`
     min-height: calc(100vh - 240px);