[SecuritySolution] Security Solution Dashboard edit mode

src/plugins/dashboard/public/dashboard_app/dashboard_app.tsx

@@ -33,13 +33,13 @@ import { DashboardAPI, DashboardRenderer } from '..';
 import { type DashboardEmbedSettings } from './types';
 import { DASHBOARD_APP_ID } from '../dashboard_constants';
 import { pluginServices } from '../services/plugin_services';
-import { DashboardTopNav } from './top_nav/dashboard_top_nav';
 import { AwaitingDashboardAPI } from '../dashboard_container';
 import { DashboardRedirect } from '../dashboard_container/types';
 import { useDashboardMountContext } from './hooks/dashboard_mount_context';
 import { useDashboardOutcomeValidation } from './hooks/use_dashboard_outcome_validation';
 import { loadDashboardHistoryLocationState } from './locator/load_dashboard_history_location_state';
 import type { DashboardCreationOptions } from '../dashboard_container/embeddable/dashboard_container_factory';
+import { DashboardTopNav } from '../dashboard_top_nav';
 
 export interface DashboardAppProps {
   history: History;
@@ -192,9 +192,11 @@ export function DashboardApp({
       {!showNoDataPage && (
         <>
           {dashboardAPI && (
-            <DashboardAPIContext.Provider value={dashboardAPI}>
-              <DashboardTopNav redirectTo={redirectTo} embedSettings={embedSettings} />
-            </DashboardAPIContext.Provider>
+            <DashboardTopNav
+              redirectTo={redirectTo}
+              embedSettings={embedSettings}
+              dashboardContainer={dashboardAPI}
+            />
           )}
 
           {getLegacyConflictWarning?.()}

src/plugins/dashboard/public/dashboard_app/dashboard_router.tsx

@@ -91,8 +91,8 @@ export async function mountApp({ core, element, appUnMounted, mountContext }: Da
   ): DashboardEmbedSettings | undefined => {
     return {
       forceShowTopNavMenu: routeParams[dashboardUrlParams.showTopMenu] === 'true',
-      forceShowQueryInput: routeParams[dashboardUrlParams.showQueryInput] === 'true',
-      forceShowDatePicker: routeParams[dashboardUrlParams.showTimeFilter] === 'true',
+      showQueryInput: routeParams[dashboardUrlParams.showQueryInput] === 'true',
+      showDatePicker: routeParams[dashboardUrlParams.showTimeFilter] === 'true',
       forceHideFilterBar: routeParams[dashboardUrlParams.hideFilterBar] === 'true',
     };
   };

src/plugins/dashboard/public/dashboard_app/top_nav/dashboard_editing_toolbar.tsx

@@ -6,8 +6,8 @@
  * Side Public License, v 1.
  */
 
-import { css } from '@emotion/react';
-import React, { useCallback } from 'react';
+import { css, SerializedStyles } from '@emotion/react';
+import React, { useCallback, useMemo } from 'react';
 import { METRIC_TYPE } from '@kbn/analytics';
 import { useEuiTheme } from '@elastic/eui';
 
@@ -23,7 +23,7 @@ import { ControlsToolbarButton } from './controls_toolbar_button';
 import { DASHBOARD_APP_ID, DASHBOARD_UI_METRIC_ID } from '../../dashboard_constants';
 import { dashboardReplacePanelActionStrings } from '../../dashboard_actions/_dashboard_actions_strings';
 
-export function DashboardEditingToolbar() {
+export function DashboardEditingToolbar({ wrapperCss }: { wrapperCss?: SerializedStyles }) {
   const {
     usageCollection,
     data: { search },
@@ -69,12 +69,13 @@ export function DashboardEditingToolbar() {
       stateTransferService.navigateToEditor(appId, {
         path,
         state: {
-          originatingApp: DASHBOARD_APP_ID,
+          originatingApp: dashboard.currentAppId ?? DASHBOARD_APP_ID,
+          originatingPath: dashboard.getEmbeddableContainerContext()?.getCurrentPath?.(),
           searchSessionId: search.session.getSessionId(),
         },
       });
     },
-    [stateTransferService, search.session, trackUiMetric]
+    [stateTransferService, dashboard, search.session, trackUiMetric]
   );
 
   const createNewEmbeddable = useCallback(
@@ -117,12 +118,17 @@ export function DashboardEditingToolbar() {
     extraButtons.push(<ControlsToolbarButton controlGroup={dashboard.controlGroup} />);
   }
 
+  const wrapperStyles = useMemo(
+    () =>
+      css({
+        padding: `0 ${euiTheme.size.s} ${euiTheme.size.s} ${euiTheme.size.s}`,
+        ...(wrapperCss ?? {}),
+      }),
+    [euiTheme.size.s, wrapperCss]
+  );
+
   return (
-    <div
-      css={css`
-        padding: 0 ${euiTheme.size.s} ${euiTheme.size.s} ${euiTheme.size.s};
-      `}
-    >
+    <div css={wrapperStyles}>
       <Toolbar>
         {{
           primaryButton: (

src/plugins/dashboard/public/dashboard_app/top_nav/use_dashboard_menu_items.tsx

@@ -26,10 +26,12 @@ export const useDashboardMenuItems = ({
   redirectTo,
   isLabsShown,
   setIsLabsShown,
+  showFullScreenButton = true,
 }: {
   redirectTo: DashboardRedirect;
   isLabsShown: boolean;
   setIsLabsShown: Dispatch<SetStateAction<boolean>>;
+  showFullScreenButton?: boolean;
 }) => {
   const [isSaveInProgress, setIsSaveInProgress] = useState(false);
 
@@ -264,18 +266,31 @@ export const useDashboardMenuItems = ({
    */
   const viewModeTopNavConfig = useMemo(() => {
     const labsMenuItem = isLabsEnabled ? [menuItems.labs] : [];
+    const fullScreenMenuItem = showFullScreenButton ? [menuItems.fullScreen] : [];
     const shareMenuItem = share ? [menuItems.share] : [];
     const cloneMenuItem = showWriteControls ? [menuItems.clone] : [];
     const editMenuItem = showWriteControls && !managed ? [menuItems.edit] : [];
     return [
       ...labsMenuItem,
-      menuItems.fullScreen,
+      ...fullScreenMenuItem,
       ...shareMenuItem,
       ...cloneMenuItem,
       resetChangesMenuItem,
       ...editMenuItem,
     ];
-  }, [isLabsEnabled, menuItems, share, showWriteControls, managed, resetChangesMenuItem]);
+  }, [
+    isLabsEnabled,
+    menuItems.labs,
+    menuItems.fullScreen,
+    menuItems.share,
+    menuItems.clone,
+    menuItems.edit,
+    showFullScreenButton,
+    share,
+    showWriteControls,
+    managed,
+    resetChangesMenuItem,
+  ]);
 
   const editModeTopNavConfig = useMemo(() => {
     const labsMenuItem = isLabsEnabled ? [menuItems.labs] : [];

src/plugins/dashboard/public/dashboard_app/types.ts

@@ -6,13 +6,21 @@
  * Side Public License, v 1.
  */
 
+import { SerializedStyles } from '@emotion/react';
 import { AppMountParameters, ScopedHistory } from '@kbn/core-application-browser';
 
 export interface DashboardEmbedSettings {
+  forceHideDatePicker?: boolean;
   forceHideFilterBar?: boolean;
+  forceHideQueryInput?: boolean;
   forceShowTopNavMenu?: boolean;
-  forceShowQueryInput?: boolean;
-  forceShowDatePicker?: boolean;
+  showQueryInput?: boolean;
+  showDatePicker?: boolean;
+  showBorderBottom?: boolean;
+  showBackgroundColor?: boolean;
+  showFullScreenButton?: boolean;
+  editingToolBarCss?: SerializedStyles;
+  showStickyTopNav?: boolean;
 }
 
 export interface DashboardMountContextProps {

src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid_item.tsx

@@ -90,6 +90,7 @@ const Item = React.forwardRef<HTMLDivElement, Props>(
               showNotifications={true}
               onPanelStatusChange={onPanelStatusChange}
               embeddable={() => container.untilEmbeddableLoaded(id)}
+              containerContext={container.getEmbeddableContainerContext()}
             />
             {children}
           </>

src/plugins/dashboard/public/dashboard_container/embeddable/dashboard_container.tsx

@@ -107,7 +107,7 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
   public controlGroup?: ControlGroupContainer;
 
   public searchSessionId?: string;
-
+  public currentAppId?: string;
   // cleanup
   public stopSyncingWithUnifiedSearch?: () => void;
   private cleanupStateTools: () => void;
@@ -139,6 +139,7 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
   ) {
     const {
       embeddable: { getEmbeddableFactory },
+      application,
     } = pluginServices.getServices();
 
     super(
@@ -163,6 +164,9 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
     this.creationOptions = creationOptions;
     this.searchSessionId = initialSessionId;
     this.dashboardCreationStartTime = dashboardCreationStartTime;
+    application.currentAppId$.subscribe((appId) => {
+      this.currentAppId = appId;
+    });
 
     // start diffing dashboard state
     const diffingMiddleware = startDiffingDashboardState.bind(this)(creationOptions);
@@ -185,6 +189,10 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
     this.select = reduxTools.select;
   }
 
+  public getEmbeddableContainerContext() {
+    return this.creationOptions?.getEmbeddableContainerContext?.(this.getDashboardSavedObjectId());
+  }
+
   public getDashboardSavedObjectId() {
     return this.getState().componentState.lastSavedId;
   }

src/plugins/dashboard/public/dashboard_container/embeddable/dashboard_container_factory.tsx

@@ -16,6 +16,7 @@ import {
   EmbeddableFactory,
   EmbeddableFactoryDefinition,
   EmbeddablePackageState,
+  EmbeddableContainerContext,
 } from '@kbn/embeddable-plugin/public';
 import { SearchSessionInfoProvider } from '@kbn/data-plugin/public';
 import { IKbnUrlStateStorage } from '@kbn/kibana-utils-plugin/public';
@@ -58,6 +59,8 @@ export interface DashboardCreationOptions {
   validateLoadedSavedObject?: (result: LoadDashboardReturn) => 'valid' | 'invalid' | 'redirected';
 
   isEmbeddedExternally?: boolean;
+
+  getEmbeddableContainerContext?: (dashboardId?: string) => EmbeddableContainerContext;
 }
 
 export class DashboardContainerFactoryDefinition

src/plugins/dashboard/public/dashboard_top_nav/_dashboard_top_nav.scss

@@ -0,0 +1,34 @@
+
+@mixin getBackgroundColor($showBackgroundColor: true) {
+  @if $showBackgroundColor {
+    background: $euiPageBackgroundColor;
+
+  } @else {
+    background: transparent;
+  }
+}
+
+.kbnBody {
+  .dashboardTopNav {
+    width: 100%;
+    position: sticky;
+    z-index: $euiZLevel2;
+    top: var(--euiFixedHeadersOffset, 0);
+    background: $euiPageBackgroundColor;
+
+    @include getBackgroundColor($showBackgroundColor: true);
+
+    &-right {
+      text-align: right;
+    }
+
+    &.dashboardTopNav-noBackgroundColor {
+      @include getBackgroundColor($showBackgroundColor: false);
+    }
+
+    &.dashboardTopNav-noSticky {
+      position: static;
+    }
+  }
+
+}

src/plugins/dashboard/public/dashboard_top_nav/dashboard_top_nav_with_context.tsx

@@ -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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { DashboardAPIContext } from '../dashboard_app/dashboard_app';
+import { DashboardContainer } from '../dashboard_container';
+import {
+  InternalDashboardTopNav,
+  InternalDashboardTopNavProps,
+} from './internal_dashboard_top_nav';
+export interface DashboardTopNavProps extends InternalDashboardTopNavProps {
+  dashboardContainer: DashboardContainer;
+}
+
+export const DashboardTopNavWithContext = (props: DashboardTopNavProps) => (
+  <DashboardAPIContext.Provider value={props.dashboardContainer}>
+    <InternalDashboardTopNav {...props} />
+  </DashboardAPIContext.Provider>
+);
+
+// eslint-disable-next-line import/no-default-export
+export default DashboardTopNavWithContext;

src/plugins/dashboard/public/dashboard_top_nav/index.tsx

@@ -0,0 +1,29 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import React, { Suspense } from 'react';
+import { servicesReady } from '../plugin';
+import { DashboardTopNavProps } from './dashboard_top_nav_with_context';
+
+const LazyDashboardTopNav = React.lazy(() =>
+  (async () => {
+    const modulePromise = import('./dashboard_top_nav_with_context');
+    const [module] = await Promise.all([modulePromise, servicesReady]);
+
+    return {
+      default: module.DashboardTopNavWithContext,
+    };
+  })().then((module) => module)
+);
+
+export const DashboardTopNav = (props: DashboardTopNavProps) => {
+  return (
+    <Suspense fallback={<div />}>
+      <LazyDashboardTopNav {...props} />
+    </Suspense>
+  );
+};