[SecuritySolution] Security Solution Dashboard edit mode

packages/kbn-optimizer/limits.yml

@@ -25,7 +25,7 @@ pageLoadAssetSize:
   core: 435325
   crossClusterReplication: 65408
   customIntegrations: 22034
-  dashboard: 82025
+  dashboard: 136103
   dashboardEnhanced: 65646
   data: 454087
   dataViewEditor: 28082

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_app/top_nav/dashboard_top_nav.tsx → src/plugins/dashboard/public/dashboard_top_nav/dashboard_top_nav.tsx

@@ -16,6 +16,8 @@ import {
 } from '@kbn/presentation-util-plugin/public';
 import { ViewMode } from '@kbn/embeddable-plugin/public';
 import type { DataView } from '@kbn/data-views-plugin/public';
+import { SerializedStyles } from '@emotion/react';
+import classNames from 'classnames';
 import { TopNavMenuProps } from '@kbn/navigation-plugin/public';
 import { EuiHorizontalRule, EuiIcon, EuiToolTipProps } from '@elastic/eui';
 
@@ -24,29 +26,35 @@ import {
   leaveConfirmStrings,
   getDashboardBreadcrumb,
   unsavedChangesBadgeStrings,
-} from '../_dashboard_app_strings';
-import { UI_SETTINGS } from '../../../common';
-import { useDashboardAPI } from '../dashboard_app';
-import { DashboardEmbedSettings } from '../types';
-import { pluginServices } from '../../services/plugin_services';
-import { useDashboardMenuItems } from './use_dashboard_menu_items';
-import { DashboardRedirect } from '../../dashboard_container/types';
-import { DashboardEditingToolbar } from './dashboard_editing_toolbar';
-import { useDashboardMountContext } from '../hooks/dashboard_mount_context';
-import { getFullEditPath, LEGACY_DASHBOARD_APP_ID } from '../../dashboard_constants';
-
+} from '../dashboard_app/_dashboard_app_strings';
+import { UI_SETTINGS } from '../../common';
+import { useDashboardAPI } from '../dashboard_app/dashboard_app';
+import { pluginServices } from '../services/plugin_services';
+import { useDashboardMenuItems } from '../dashboard_app/top_nav/use_dashboard_menu_items';
+import { DashboardEmbedSettings } from '../dashboard_app/types';
+import { DashboardEditingToolbar } from '../dashboard_app/top_nav/dashboard_editing_toolbar';
+import { useDashboardMountContext } from '../dashboard_app/hooks/dashboard_mount_context';
+import { getFullEditPath, LEGACY_DASHBOARD_APP_ID } from '../dashboard_constants';
 import './_dashboard_top_nav.scss';
-export interface DashboardTopNavProps {
+import { DashboardRedirect } from '../dashboard_container/types';
+
+export interface InternalDashboardTopNavProps {
   embedSettings?: DashboardEmbedSettings;
   redirectTo: DashboardRedirect;
+  originatingApp?: string;
+  originatingPath?: string;
 }
 
 const LabsFlyout = withSuspense(LazyLabsFlyout, null);
 
-export function DashboardTopNav({ embedSettings, redirectTo }: DashboardTopNavProps) {
+export function InternalDashboardTopNav({
+  embedSettings,
+  redirectTo,
+  originatingApp,
+  originatingPath,
+}: InternalDashboardTopNavProps) {
   const [isChromeVisible, setIsChromeVisible] = useState(false);
   const [isLabsShown, setIsLabsShown] = useState(false);
-
   const dashboardTitleRef = useRef<HTMLHeadingElement>(null);
 
   /**
@@ -202,36 +210,52 @@ export function DashboardTopNav({ embedSettings, redirectTo }: DashboardTopNavPr
     };
   }, [onAppLeave, getStateTransfer, hasUnsavedChanges, viewMode]);
 
-  const { viewModeTopNavConfig, editModeTopNavConfig } = useDashboardMenuItems({
-    redirectTo,
-    isLabsShown,
-    setIsLabsShown,
-  });
-
   const visibilityProps = useMemo(() => {
     const shouldShowNavBarComponent = (forceShow: boolean): boolean =>
       (forceShow || isChromeVisible) && !fullScreenMode;
     const shouldShowFilterBar = (forceHide: boolean): boolean =>
       !forceHide && (filterManager.getFilters().length > 0 || !fullScreenMode);
 
     const showTopNavMenu = shouldShowNavBarComponent(Boolean(embedSettings?.forceShowTopNavMenu));
-    const showQueryInput = shouldShowNavBarComponent(
-      Boolean(embedSettings?.forceShowQueryInput || viewMode === ViewMode.PRINT)
-    );
-    const showDatePicker = shouldShowNavBarComponent(Boolean(embedSettings?.forceShowDatePicker));
+    const showQueryInput = Boolean(embedSettings?.forceHideQueryInput)
+      ? false
+      : shouldShowNavBarComponent(
+          Boolean(embedSettings?.showQueryInput || viewMode === ViewMode.PRINT)
+        );
+    const showDatePicker = Boolean(embedSettings?.forceHideDatePicker)
+      ? false
+      : shouldShowNavBarComponent(Boolean(embedSettings?.showDatePicker));
     const showFilterBar = shouldShowFilterBar(Boolean(embedSettings?.forceHideFilterBar));
     const showQueryBar = showQueryInput || showDatePicker || showFilterBar;
     const showSearchBar = showQueryBar || showFilterBar;
-
+    const showBorderBottom = embedSettings?.showBorderBottom ?? true;
+    const showBackgroundColor = embedSettings?.showBackgroundColor ?? true;
+    const showFullScreenButton = embedSettings?.showFullScreenButton ?? true;
+    const editingToolBarCss = embedSettings?.editingToolBarCss ?? ({} as SerializedStyles);
+    const topNavMenuAlignRight = embedSettings?.topNavMenuAlignRight ?? false;
+    const showStickyTopNav = embedSettings?.showStickyTopNav ?? true;
     return {
       showTopNavMenu,
       showSearchBar,
       showFilterBar,
       showQueryInput,
       showDatePicker,
+      showBorderBottom,
+      showBackgroundColor,
+      showFullScreenButton,
+      editingToolBarCss,
+      topNavMenuAlignRight,
+      showStickyTopNav,
     };
   }, [embedSettings, filterManager, fullScreenMode, isChromeVisible, viewMode]);
 
+  const { viewModeTopNavConfig, editModeTopNavConfig } = useDashboardMenuItems({
+    redirectTo,
+    isLabsShown,
+    setIsLabsShown,
+    showFullScreenButton: visibilityProps.showFullScreenButton,
+  });
+
   UseUnmount(() => {
     dashboard.clearOverlays();
   });
@@ -268,7 +292,13 @@ export function DashboardTopNav({ embedSettings, redirectTo }: DashboardTopNavPr
   }, [hasRunMigrations, hasUnsavedChanges, viewMode]);
 
   return (
-    <div className="dashboardTopNav">
+    <div
+      className={classNames('dashboardTopNav', {
+        'dashboardTopNav-noBackgroundColor': !visibilityProps.showBackgroundColor,
+        'dashboardTopNav-right': visibilityProps.topNavMenuAlignRight,
+        'dashboardTopNav-noSticky': !visibilityProps.showStickyTopNav,
+      })}
+    >
       <h1
         id="dashboardTitle"
         className="euiScreenReaderOnly"
@@ -286,8 +316,11 @@ export function DashboardTopNav({ embedSettings, redirectTo }: DashboardTopNavPr
         showSaveQuery={showSaveQuery}
         appName={LEGACY_DASHBOARD_APP_ID}
         visible={viewMode !== ViewMode.PRINT}
+        alignRight={visibilityProps.topNavMenuAlignRight}
         setMenuMountPoint={embedSettings || fullScreenMode ? undefined : setHeaderActionMenu}
-        className={fullScreenMode ? 'kbnTopNavMenu-isFullScreen' : undefined}
+        className={classNames({
+          'kbnTopNavMenu-isFullScreen': fullScreenMode,
+        })}
         config={
           visibilityProps.showTopNavMenu
             ? viewMode === ViewMode.EDIT
@@ -309,8 +342,14 @@ export function DashboardTopNav({ embedSettings, redirectTo }: DashboardTopNavPr
           <LabsFlyout solutions={['dashboard']} onClose={() => setIsLabsShown(false)} />
         </PresentationUtilContextProvider>
       ) : null}
-      {viewMode === ViewMode.EDIT ? <DashboardEditingToolbar /> : null}
-      <EuiHorizontalRule margin="none" />
+      {viewMode === ViewMode.EDIT ? (
+        <DashboardEditingToolbar
+          wrapperCss={visibilityProps.editingToolBarCss}
+          originatingApp={originatingApp}
+          originatingPath={originatingPath}
+        />
+      ) : null}
+      {visibilityProps.showBorderBottom && <EuiHorizontalRule margin="none" />}
     </div>
   );
 }