[Dashboard Navigation] Add creation UI

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

@@ -101,7 +101,7 @@ export function DashboardEditingToolbar() {
 
       let explicitInput: Awaited<ReturnType<typeof embeddableFactory.getExplicitInput>>;
       try {
-        explicitInput = await embeddableFactory.getExplicitInput();
+        explicitInput = await embeddableFactory.getExplicitInput(undefined, dashboard);
       } catch (e) {
         // error likely means user canceled embeddable creation
         return;

src/plugins/dashboard/public/services/dashboard_content_management/dashboard_content_management_service.ts

@@ -65,11 +65,12 @@ export const dashboardContentManagementServiceFactory: DashboardContentManagemen
         dashboardSessionStorage,
       }),
     findDashboards: {
-      search: ({ hasReference, hasNoReference, search, size }) =>
+      search: ({ hasReference, hasNoReference, search, size, options }) =>
         searchDashboards({
           contentManagement,
           hasNoReference,
           hasReference,
+          options,
           search,
           size,
         }),

src/plugins/dashboard/public/services/dashboard_content_management/lib/find_dashboards.ts

@@ -18,6 +18,7 @@ import { DASHBOARD_CONTENT_ID } from '../../../dashboard_constants';
 
 export interface SearchDashboardsArgs {
   contentManagement: DashboardStartDependencies['contentManagement'];
+  options?: DashboardCrudTypes['SearchIn']['options'];
   hasNoReference?: SavedObjectsFindOptionsReference[];
   hasReference?: SavedObjectsFindOptionsReference[];
   search: string;
@@ -33,6 +34,7 @@ export async function searchDashboards({
   contentManagement,
   hasNoReference,
   hasReference,
+  options,
   search,
   size,
 }: SearchDashboardsArgs): Promise<SearchDashboardsResponse> {
@@ -52,6 +54,7 @@ export async function searchDashboards({
         excluded: (hasNoReference ?? []).map(({ id }) => id),
       },
     },
+    options,
   });
   return {
     total,

src/plugins/dashboard/public/services/dashboard_content_management/types.ts

@@ -87,7 +87,10 @@ export interface SaveDashboardReturn {
  */
 export interface FindDashboardsService {
   search: (
-    props: Pick<SearchDashboardsArgs, 'hasReference' | 'hasNoReference' | 'search' | 'size'>
+    props: Pick<
+      SearchDashboardsArgs,
+      'hasReference' | 'hasNoReference' | 'search' | 'size' | 'options'
+    >
   ) => Promise<SearchDashboardsResponse>;
   findByIds: (ids: string[]) => Promise<FindDashboardsByIdResponse[]>;
   findByTitle: (title: string) => Promise<{ id: string } | undefined>;

src/plugins/embeddable/public/lib/actions/edit_panel_action.ts

@@ -92,7 +92,7 @@ export class EditPanelAction implements Action<ActionContext> {
       }
 
       const oldExplicitInput = embeddable.getExplicitInput();
-      const newExplicitInput = await factory.getExplicitInput(oldExplicitInput);
+      const newExplicitInput = await factory.getExplicitInput(oldExplicitInput, embeddable.parent);
       embeddable.parent?.replaceEmbeddable(embeddable.id, newExplicitInput);
       return;
     }

src/plugins/embeddable/public/lib/containers/container.ts

@@ -301,7 +301,7 @@ export abstract class Container<
 
   public async getExplicitInputIsEqual(lastInput: TContainerInput) {
     const { panels: lastPanels, ...restOfLastInput } = lastInput;
-    const { panels: currentPanels, ...restOfCurrentInput } = this.getInput();
+    const { panels: currentPanels, ...restOfCurrentInput } = this.getExplicitInput();
     const otherInputIsEqual = isEqual(restOfLastInput, restOfCurrentInput);
     if (!otherInputIsEqual) return false;
 
@@ -371,7 +371,6 @@ export abstract class Container<
     initializeSettings?: EmbeddableContainerSettings
   ) {
     let initializeOrder = Object.keys(initialInput.panels);
-
     if (initializeSettings?.childIdInitializeOrder) {
       const initializeOrderSet = new Set<string>();
 

src/plugins/embeddable/public/lib/embeddables/embeddable_factory.ts

@@ -99,7 +99,10 @@ export interface EmbeddableFactory<
    *
    * Can be used to edit an embeddable by re-requesting explicit input. Initial input can be provided to allow the editor to show the current state.
    */
-  getExplicitInput(initialInput?: Partial<TEmbeddableInput>): Promise<Partial<TEmbeddableInput>>;
+  getExplicitInput(
+    initialInput?: Partial<TEmbeddableInput>,
+    parent?: IContainer
+  ): Promise<Partial<TEmbeddableInput>>;
 
   /**
    * Creates a new embeddable instance based off the saved object id.

src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx

@@ -430,27 +430,28 @@ export class EmbeddablePanel extends React.Component<Props, State> {
   };
 
   private getActionContextMenuPanel = async () => {
-    let regularActions =
+    const regularActions =
       (await this.props.getActions?.(CONTEXT_MENU_TRIGGER, {
         embeddable: this.props.embeddable,
       })) ?? [];
 
     const { disabledActions } = this.props.embeddable.getInput();
+
+    let allActions = regularActions.concat(
+      Object.values(this.state.universalActions ?? {}) as Array<Action<object>>
+    );
     if (disabledActions) {
       const removeDisabledActions = removeById(disabledActions);
-      regularActions = regularActions.filter(removeDisabledActions);
+      allActions = allActions.filter(removeDisabledActions);
     }
 
-    let sortedActions = regularActions
-      .concat(Object.values(this.state.universalActions || {}) as Array<Action<object>>)
-      .sort(sortByOrderField);
-
     if (this.props.actionPredicate) {
-      sortedActions = sortedActions.filter(({ id }) => this.props.actionPredicate!(id));
+      allActions = allActions.filter(({ id }) => this.props.actionPredicate!(id));
     }
+    allActions.sort(sortByOrderField);
 
     const panels = await buildContextMenuForActions({
-      actions: sortedActions.map((action) => ({
+      actions: allActions.map((action) => ({
         action,
         context: { embeddable: this.props.embeddable },
         trigger: contextMenuTrigger,
@@ -460,7 +461,7 @@ export class EmbeddablePanel extends React.Component<Props, State> {
 
     return {
       panels,
-      actions: sortedActions,
+      actions: allActions,
     };
   };
 }

src/plugins/navigation_embeddable/kibana.jsonc

@@ -1,17 +1,14 @@
 {
   "type": "plugin",
-  "id": "@kbn/navigation-embeddable-plugin",
   "owner": "@elastic/kibana-presentation",
+  "id": "@kbn/navigation-embeddable-plugin",
   "description": "An embeddable for quickly navigating between dashboards.",
   "plugin": {
     "id": "navigationEmbeddable",
     "server": false,
     "browser": true,
-    "requiredPlugins": [
-      "embeddable"
-    ],
-    "optionalPlugins": [],
-    "requiredBundles": [
-    ]
+    "requiredPlugins": ["dashboard", "embeddable", "kibanaReact", "presentationUtil"],
+    "optionalPlugins": ["triggersActionsUi"],
+    "requiredBundles": []
   }
 }

src/plugins/navigation_embeddable/public/_mixins.scss

@@ -0,0 +1,25 @@
+@import '../../../core/public/mixins';
+
+@keyframes euiFlyoutAnimation {
+  0% {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0%);
+  }
+}
+
+@mixin euiFlyout {
+  @include kibanaFullBodyHeight();
+  border-left: $euiBorderThin;
+  position: fixed;
+  width: 50%;
+  z-index: $euiZFlyout;
+  background: $euiColorEmptyShade;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}

src/plugins/navigation_embeddable/public/components/dashboard_link/dashboard_link_component.tsx

@@ -0,0 +1,54 @@
+/*
+ * 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 useAsync from 'react-use/lib/useAsync';
+
+import { EuiButtonEmpty } from '@elastic/eui';
+import { DashboardContainer } from '@kbn/dashboard-plugin/public/dashboard_container';
+
+import {
+  DASHBOARD_LINK_TYPE,
+  NavigationEmbeddableLink,
+  NavigationLinkInfo,
+} from '../../embeddable/types';
+import { fetchDashboard } from './dashboard_link_tools';
+import { useNavigationEmbeddable } from '../../embeddable/navigation_embeddable';
+
+export const DashboardLinkComponent = ({ link }: { link: NavigationEmbeddableLink }) => {
+  const navEmbeddable = useNavigationEmbeddable();
+
+  const dashboardContainer = navEmbeddable.parent as DashboardContainer;
+  const parentDashboardTitle = dashboardContainer.select((state) => state.explicitInput.title);
+  const parentDashboardId = dashboardContainer.select((state) => state.componentState.lastSavedId);
+
+  const { loading: loadingDestinationDashboard, value: destinationDashboard } =
+    useAsync(async () => {
+      return await fetchDashboard(link.destination);
+    }, [link, parentDashboardId]);
+
+  return (
+    <EuiButtonEmpty
+      isLoading={loadingDestinationDashboard}
+      iconType={NavigationLinkInfo[DASHBOARD_LINK_TYPE].icon}
+      {...(link.destination === parentDashboardId
+        ? {
+            color: 'text',
+          }
+        : {
+            color: 'primary',
+            onClick: () => {}, // TODO: As part of https://github.com/elastic/kibana/issues/154381, connect to drilldown
+          })}
+    >
+      {link.label ||
+        (link.destination === parentDashboardId
+          ? parentDashboardTitle
+          : destinationDashboard?.attributes.title)}
+    </EuiButtonEmpty>
+  );
+};

src/plugins/navigation_embeddable/public/components/dashboard_link/dashboard_link_destination_picker.tsx

@@ -0,0 +1,118 @@
+/*
+ * 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 { debounce } from 'lodash';
+import useAsync from 'react-use/lib/useAsync';
+import React, { useEffect, useMemo, useState } from 'react';
+
+import {
+  EuiBadge,
+  EuiSpacer,
+  EuiHighlight,
+  EuiSelectable,
+  EuiFieldSearch,
+  EuiSelectableOption,
+} from '@elastic/eui';
+import { DashboardContainer } from '@kbn/dashboard-plugin/public/dashboard_container';
+import { DashboardItem } from '../../embeddable/types';
+import { memoizedFetchDashboards } from './dashboard_link_tools';
+import { DashboardLinkEmbeddableStrings } from './dashboard_link_strings';
+
+export const DashboardLinkDestinationPicker = ({
+  setDestination,
+  setPlaceholder,
+  currentDestination,
+  parentDashboard,
+  ...other
+}: {
+  setDestination: (destination?: string) => void;
+  setPlaceholder: (placeholder?: string) => void;
+  currentDestination?: string;
+  parentDashboard?: DashboardContainer;
+}) => {
+  const [searchString, setSearchString] = useState<string>('');
+  const [selectedDashboard, setSelectedDashboard] = useState<DashboardItem | undefined>();
+  const [dashboardListOptions, setDashboardListOptions] = useState<EuiSelectableOption[]>([]);
+
+  const parentDashboardId = parentDashboard?.select((state) => state.componentState.lastSavedId);
+
+  const { loading: loadingDashboardList, value: dashboardList } = useAsync(async () => {
+    return await memoizedFetchDashboards(searchString, undefined, parentDashboardId);
+  }, [searchString, parentDashboardId]);
+
+  useEffect(() => {
+    const dashboardOptions =
+      (dashboardList ?? []).map((dashboard: DashboardItem) => {
+        return {
+          data: dashboard,
+          label: dashboard.attributes.title,
+          ...(dashboard.id === parentDashboardId
+            ? {
+                prepend: (
+                  <EuiBadge>{DashboardLinkEmbeddableStrings.getCurrentDashboardLabel()}</EuiBadge>
+                ),
+              }
+            : {}),
+        } as EuiSelectableOption;
+      }) ?? [];
+
+    setDashboardListOptions(dashboardOptions);
+  }, [dashboardList, parentDashboardId, searchString]);
+
+  const debouncedSetSearch = useMemo(
+    () =>
+      debounce((newSearch: string) => {
+        setSearchString(newSearch);
+      }, 250),
+    [setSearchString]
+  );
+
+  useEffect(() => {
+    if (selectedDashboard) {
+      setDestination(selectedDashboard.id);
+      setPlaceholder(selectedDashboard.attributes.title);
+    } else {
+      setDestination(undefined);
+      setPlaceholder(undefined);
+    }
+  }, [selectedDashboard, setDestination, setPlaceholder]);
+
+  /* {...other} is needed so all inner elements are treated as part of the form */
+  return (
+    <div {...other}>
+      <EuiFieldSearch
+        isClearable={true}
+        placeholder={DashboardLinkEmbeddableStrings.getSearchPlaceholder()}
+        onChange={(e) => {
+          debouncedSetSearch(e.target.value);
+        }}
+      />
+      <EuiSpacer size="s" />
+      <EuiSelectable
+        singleSelection={true}
+        options={dashboardListOptions}
+        isLoading={loadingDashboardList}
+        listProps={{ onFocusBadge: false, bordered: true, isVirtualized: true }}
+        aria-label={DashboardLinkEmbeddableStrings.getDashboardPickerAriaLabel()}
+        onChange={(newOptions, _, selected) => {
+          if (selected.checked) {
+            setSelectedDashboard(selected.data as DashboardItem);
+          } else {
+            setSelectedDashboard(undefined);
+          }
+          setDashboardListOptions(newOptions);
+        }}
+        renderOption={(option) => {
+          return <EuiHighlight search={searchString}>{option.label}</EuiHighlight>;
+        }}
+      >
+        {(list) => list}
+      </EuiSelectable>
+    </div>
+  );
+};

src/plugins/navigation_embeddable/public/components/dashboard_link/dashboard_link_strings.ts

@@ -0,0 +1,32 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const DashboardLinkEmbeddableStrings = {
+  getDisplayName: () =>
+    i18n.translate('navigationEmbeddable.dashboardLink.displayName', {
+      defaultMessage: 'Dashboard',
+    }),
+  getDescription: () =>
+    i18n.translate('navigationEmbeddable.dsahboardLink.description', {
+      defaultMessage: 'Go to dashboard',
+    }),
+  getSearchPlaceholder: () =>
+    i18n.translate('navigationEmbeddable.dashboardLink.editor.searchPlaceholder', {
+      defaultMessage: 'Search for a dashboard',
+    }),
+  getDashboardPickerAriaLabel: () =>
+    i18n.translate('navigationEmbeddable.dashboardLink.editor.dashboardPickerAriaLabel', {
+      defaultMessage: 'Pick a destination dashboard',
+    }),
+  getCurrentDashboardLabel: () =>
+    i18n.translate('navigationEmbeddable.dashboardLink.editor.currentDashboardLabel', {
+      defaultMessage: 'Current',
+    }),
+};