[Presentation Util] Shared toolbar component (#94139)

packages/kbn-optimizer/limits.yml

@@ -100,7 +100,7 @@ pageLoadAssetSize:
   watcher: 43598
   runtimeFields: 41752
   stackAlerts: 29684
-  presentationUtil: 28545
+  presentationUtil: 49767
   spacesOss: 18817
   indexPatternFieldEditor: 90489
   osquery: 107090

src/plugins/dashboard/kibana.json

@@ -23,6 +23,7 @@
   "requiredBundles": [
     "home",
     "kibanaReact",
-    "kibanaUtils"
+    "kibanaUtils",
+    "presentationUtil"
   ]
 }

src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx

@@ -11,6 +11,12 @@ import angular from 'angular';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import UseUnmount from 'react-use/lib/useUnmount';
+import {
+  AddFromLibraryButton,
+  PrimaryActionButton,
+  QuickButtonGroup,
+  SolutionToolbar,
+} from '../../../../presentation_util/public';
 import { useKibana } from '../../services/kibana_react';
 import { IndexPattern, SavedQuery, TimefilterContract } from '../../services/data';
 import {
@@ -43,9 +49,9 @@ import { showCloneModal } from './show_clone_modal';
 import { showOptionsPopover } from './show_options_popover';
 import { TopNavIds } from './top_nav_ids';
 import { ShowShareModal } from './show_share_modal';
-import { PanelToolbar } from './panel_toolbar';
 import { confirmDiscardOrKeepUnsavedChanges } from '../listing/confirm_overlays';
 import { OverlayRef } from '../../../../../core/public';
+import { DashboardConstants } from '../../dashboard_constants';
 import { getNewDashboardTitle, unsavedChangesBadge } from '../../dashboard_strings';
 import { DASHBOARD_PANELS_UNSAVED_ID } from '../lib/dashboard_panel_storage';
 import { DashboardContainer } from '..';
@@ -103,6 +109,8 @@ export function DashboardTopNav({
   const [state, setState] = useState<DashboardTopNavState>({ chromeIsVisible: false });
   const [isSaveInProgress, setIsSaveInProgress] = useState(false);
 
+  const stateTransferService = embeddable.getStateTransfer();
+
   useEffect(() => {
     const visibleSubscription = chrome.getIsVisible$().subscribe((chromeIsVisible) => {
       setState((s) => ({ ...s, chromeIsVisible }));
@@ -147,12 +155,26 @@ export function DashboardTopNav({
   const createNew = useCallback(async () => {
     const type = 'visualization';
     const factory = embeddable.getEmbeddableFactory(type);
+
     if (!factory) {
       throw new EmbeddableFactoryNotFoundError(type);
     }
+
     await factory.create({} as EmbeddableInput, dashboardContainer);
   }, [dashboardContainer, embeddable]);
 
+  const createNewVisType = useCallback(
+    (newVisType: string) => async () => {
+      stateTransferService.navigateToEditor('visualize', {
+        path: `#/create?type=${encodeURIComponent(newVisType)}`,
+        state: {
+          originatingApp: DashboardConstants.DASHBOARDS_ID,
+        },
+      });
+    },
+    [stateTransferService]
+  );
+
   const clearAddPanel = useCallback(() => {
     if (state.addPanelOverlay) {
       state.addPanelOverlay.close();
@@ -540,11 +562,51 @@ export function DashboardTopNav({
   };
 
   const { TopNavMenu } = navigation.ui;
+
+  const quickButtons = [
+    {
+      iconType: 'visText',
+      createType: i18n.translate('dashboard.solutionToolbar.markdownQuickButtonLabel', {
+        defaultMessage: 'Markdown',
+      }),
+      onClick: createNewVisType('markdown'),
+      'data-test-subj': 'dashboardMarkdownQuickButton',
+    },
+    {
+      iconType: 'controlsHorizontal',
+      createType: i18n.translate('dashboard.solutionToolbar.inputControlsQuickButtonLabel', {
+        defaultMessage: 'Input control',
+      }),
+      onClick: createNewVisType('input_control_vis'),
+      'data-test-subj': 'dashboardInputControlsQuickButton',
+    },
+  ];
+
   return (
     <>
       <TopNavMenu {...getNavBarProps()} />
       {viewMode !== ViewMode.VIEW ? (
-        <PanelToolbar onAddPanelClick={createNew} onLibraryClick={addFromLibrary} />
+        <SolutionToolbar>
+          {{
+            primaryActionButton: (
+              <PrimaryActionButton
+                label={i18n.translate('dashboard.solutionToolbar.addPanelButtonLabel', {
+                  defaultMessage: 'Create panel',
+                })}
+                onClick={createNew}
+                iconType="plusInCircleFilled"
+                data-test-subj="dashboardAddNewPanelButton"
+              />
+            ),
+            quickButtonGroup: <QuickButtonGroup buttons={quickButtons} />,
+            addFromLibraryButton: (
+              <AddFromLibraryButton
+                onClick={addFromLibrary}
+                data-test-subj="dashboardAddPanelButton"
+              />
+            ),
+          }}
+        </SolutionToolbar>
       ) : null}
     </>
   );

src/plugins/dashboard/tsconfig.json

@@ -32,5 +32,8 @@
     { "path": "../saved_objects/tsconfig.json" },
     { "path": "../ui_actions/tsconfig.json" },
     { "path": "../spaces_oss/tsconfig.json" },
+    { "path": "../charts/tsconfig.json" },
+    { "path": "../discover/tsconfig.json" },
+    { "path": "../visualizations/tsconfig.json" },
   ]
 }

src/plugins/dashboard/public/application/top_nav/panel_toolbar/index.ts → src/plugins/presentation_util/public/components/solution_toolbar/index.ts

@@ -6,4 +6,5 @@
  * Side Public License, v 1.
  */
 
-export { PanelToolbar } from './panel_toolbar';
+export { SolutionToolbar } from './solution_toolbar';
+export * from './items';

src/plugins/presentation_util/public/components/solution_toolbar/items/add_from_library.tsx

@@ -0,0 +1,24 @@
+/*
+ * 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 { ComponentStrings } from '../../../i18n/components';
+import { SolutionToolbarButton, Props as SolutionToolbarButtonProps } from './button';
+
+const { SolutionToolbar: strings } = ComponentStrings;
+
+export type Props = Omit<SolutionToolbarButtonProps, 'iconType' | 'label'>;
+
+export const AddFromLibraryButton = ({ onClick, ...rest }: Props) => (
+  <SolutionToolbarButton
+    {...rest}
+    iconType="folderOpen"
+    onClick={onClick}
+    label={strings.getLibraryButtonLabel()}
+  />
+);

src/plugins/dashboard/public/application/top_nav/panel_toolbar/panel_toolbar.scss → src/plugins/presentation_util/public/components/solution_toolbar/items/button.scss

@@ -1,9 +1,5 @@
-.panelToolbar {
-  padding: 0 $euiSizeS $euiSizeS;
-  flex-grow: 0;
-}
 
-.panelToolbarButton {
+.solutionToolbarButton {
   line-height: $euiButtonHeight; // Keeps alignment of text and chart icon
   background-color: $euiColorEmptyShade;