[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,15 @@ 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,
+  originatingApp = DASHBOARD_APP_ID,
+  originatingPath,
+}: {
+  wrapperCss?: SerializedStyles;
+  originatingApp?: string;
+  originatingPath?: string;
+}) {
   const {
     usageCollection,
     data: { search },
@@ -69,12 +77,13 @@ export function DashboardEditingToolbar() {
       stateTransferService.navigateToEditor(appId, {
         path,
         state: {
-          originatingApp: DASHBOARD_APP_ID,
+          originatingApp,
+          originatingPath,
           searchSessionId: search.session.getSessionId(),
         },
       });
     },
-    [stateTransferService, search.session, trackUiMetric]
+    [stateTransferService, originatingApp, originatingPath, search.session, trackUiMetric]
   );
 
   const createNewEmbeddable = useCallback(
@@ -117,12 +126,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);
 
@@ -263,18 +265,30 @@ 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 ? [menuItems.edit] : [];
     return [
       ...labsMenuItem,
-      menuItems.fullScreen,
+      ...fullScreenMenuItem,
       ...shareMenuItem,
       ...cloneMenuItem,
       resetChangesMenuItem,
       ...editMenuItem,
     ];
-  }, [menuItems, share, showWriteControls, resetChangesMenuItem, isLabsEnabled]);
+  }, [
+    isLabsEnabled,
+    menuItems.labs,
+    menuItems.fullScreen,
+    menuItems.share,
+    menuItems.clone,
+    menuItems.edit,
+    showFullScreenButton,
+    share,
+    showWriteControls,
+    resetChangesMenuItem,
+  ]);
 
   const editModeTopNavConfig = useMemo(() => {
     const labsMenuItem = isLabsEnabled ? [menuItems.labs] : [];

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

@@ -6,13 +6,22 @@
  * 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;
+  topNavMenuAlignRight?: boolean;
+  showStickyTopNav?: boolean;
 }
 
 export interface DashboardMountContextProps {

src/plugins/dashboard/public/dashboard_app/top_nav/_dashboard_top_nav.scss → src/plugins/dashboard/public/dashboard_top_nav/_dashboard_top_nav.scss

@@ -1,9 +1,32 @@
+
+@mixin getBackgroundColor($showBackgroundColor: true) {
+  @if $showBackgroundColor {
+    background: $euiPageBackgroundColor;
+
+  } @else {
+    background: transparent;
+  }
+}
+
 .kbnBody {
   .dashboardTopNav {
     width: 100%;
     position: sticky;
     z-index: $euiZLevel2;
-    background: $euiPageBackgroundColor;
+
+    @include getBackgroundColor($showBackgroundColor: true);
+
+    &-right {
+      text-align: right;
+    }
+
+    &.dashboardTopNav-noBackgroundColor {
+      @include getBackgroundColor($showBackgroundColor: false);
+    }
+
+    &.dashboardTopNav-noSticky {
+      position: static;
+    }
   }
 
   &.kbnBody--noHeaderBanner {
@@ -23,4 +46,4 @@
       top: $kbnHeaderBannerHeight;
     }
   }
-}
+}

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>
+  );
+};