diff --git a/examples/discover_customization_examples/public/plugin.tsx b/examples/discover_customization_examples/public/plugin.tsx index 7c35287b843b..6dc6e8f48da5 100644 --- a/examples/discover_customization_examples/public/plugin.tsx +++ b/examples/discover_customization_examples/public/plugin.tsx @@ -7,17 +7,9 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { - EuiButton, - EuiContextMenu, - EuiFlexItem, - EuiPopover, - EuiWrappingPopover, - IconType, -} from '@elastic/eui'; +import { EuiButton, EuiContextMenu, EuiFlexItem, EuiPopover, IconType } from '@elastic/eui'; import { CoreSetup, CoreStart, Plugin, SimpleSavedObject } from '@kbn/core/public'; import type { DeveloperExamplesSetup } from '@kbn/developer-examples-plugin/public'; -import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render'; import type { CustomizationCallback, DiscoverSetup, @@ -102,112 +94,14 @@ export class DiscoverCustomizationExamplesPlugin implements Plugin { } start(core: CoreStart, plugins: DiscoverCustomizationExamplesStartPlugins) { - const { discover } = plugins; - - let isOptionsOpen = false; - const optionsContainer = document.createElement('div'); - const closeOptionsPopover = () => { - ReactDOM.unmountComponentAtNode(optionsContainer); - document.body.removeChild(optionsContainer); - isOptionsOpen = false; - }; - this.customizationCallback = ({ customizations, stateContainer }) => { customizations.set({ id: 'top_nav', defaultMenu: { newItem: { disabled: true }, openItem: { disabled: true }, - shareItem: { order: 200 }, alertsItem: { disabled: true }, inspectItem: { disabled: true }, - saveItem: { order: 400 }, - }, - getMenuItems: () => [ - { - data: { - id: 'options', - label: 'Options', - iconType: 'arrowDown', - iconSide: 'right', - testId: 'customOptionsButton', - run: (anchorElement: HTMLElement) => { - if (isOptionsOpen) { - closeOptionsPopover(); - return; - } - - isOptionsOpen = true; - document.body.appendChild(optionsContainer); - - const element = ( - - - alert('Create new clicked'), - }, - { - name: 'Make a copy', - icon: 'copy', - onClick: () => alert('Make a copy clicked'), - }, - { - name: 'Manage saved searches', - icon: 'gear', - onClick: () => alert('Manage saved searches clicked'), - }, - ], - }, - ]} - data-test-subj="customOptionsPopover" - /> - - - ); - - ReactDOM.render(element, optionsContainer); - }, - }, - order: 100, - }, - { - data: { - id: 'documentExplorer', - label: 'Document explorer', - iconType: 'discoverApp', - testId: 'documentExplorerButton', - run: () => { - discover.locator?.navigate({}); - }, - }, - order: 300, - }, - ], - getBadges: () => { - return [ - { - data: { - badgeText: 'Example badge', - color: 'warning', - }, - order: 10, - }, - ]; }, }); diff --git a/examples/discover_customization_examples/tsconfig.json b/examples/discover_customization_examples/tsconfig.json index 776153f943fa..30ff666575f1 100644 --- a/examples/discover_customization_examples/tsconfig.json +++ b/examples/discover_customization_examples/tsconfig.json @@ -13,7 +13,6 @@ "@kbn/i18n-react", "@kbn/react-kibana-context-theme", "@kbn/data-plugin", - "@kbn/react-kibana-context-render", ], "exclude": ["target/**/*"] } diff --git a/packages/kbn-discover-utils/index.ts b/packages/kbn-discover-utils/index.ts index 723494478303..4345c0f8fc6c 100644 --- a/packages/kbn-discover-utils/index.ts +++ b/packages/kbn-discover-utils/index.ts @@ -56,6 +56,7 @@ export { getVisibleColumns, canPrependTimeFieldColumn, DiscoverFlyouts, + AppMenuRegistry, dismissAllFlyoutsExceptFor, dismissFlyouts, LogLevelBadge, diff --git a/packages/kbn-discover-utils/src/components/app_menu/__snapshots__/app_menu_registry.test.ts.snap b/packages/kbn-discover-utils/src/components/app_menu/__snapshots__/app_menu_registry.test.ts.snap new file mode 100644 index 000000000000..88ee3c6f55a7 --- /dev/null +++ b/packages/kbn-discover-utils/src/components/app_menu/__snapshots__/app_menu_registry.test.ts.snap @@ -0,0 +1,184 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AppMenuRegistry should allow to override actions under submenu 1`] = ` +Array [ + Object { + "controlProps": Object { + "label": "Action 2", + "onClick": [MockFunction], + }, + "id": "action-2", + "order": 200, + "type": "secondary", + }, + Object { + "actions": Array [ + Object { + "controlProps": Object { + "label": "Action 3.2", + "onClick": [MockFunction], + }, + "id": "action-3-2", + "order": 200, + "type": "secondary", + }, + Object { + "controlProps": Object { + "label": "Action Custom", + "onClick": [MockFunction], + }, + "id": "action-3-1", + "type": "custom", + }, + ], + "id": "action-3", + "label": "Action 3", + "order": 300, + "type": "secondary", + }, + Object { + "controlProps": Object { + "iconType": "bell", + "label": "Action 1", + "onClick": [MockFunction], + }, + "id": "action-1", + "order": 100, + "type": "primary", + }, +] +`; + +exports[`AppMenuRegistry should allow to register custom actions 1`] = ` +Array [ + Object { + "controlProps": Object { + "label": "Action Custom", + "onClick": [MockFunction], + }, + "id": "action-custom", + "type": "custom", + }, + Object { + "actions": Array [ + Object { + "controlProps": Object { + "label": "Action Custom Submenu 1", + "onClick": [MockFunction], + }, + "id": "action-custom-submenu-1", + "type": "custom", + }, + ], + "id": "action-custom-submenu", + "label": "Action Custom Submenu", + "type": "custom", + }, + Object { + "controlProps": Object { + "label": "Action 2", + "onClick": [MockFunction], + }, + "id": "action-2", + "order": 200, + "type": "secondary", + }, + Object { + "actions": Array [ + Object { + "controlProps": Object { + "iconType": "heart", + "label": "Action 3.1", + "onClick": [MockFunction], + }, + "id": "action-3-1", + "order": 100, + "type": "secondary", + }, + Object { + "controlProps": Object { + "label": "Action 3.2", + "onClick": [MockFunction], + }, + "id": "action-3-2", + "order": 200, + "type": "secondary", + }, + ], + "id": "action-3", + "label": "Action 3", + "order": 300, + "type": "secondary", + }, + Object { + "controlProps": Object { + "iconType": "bell", + "label": "Action 1", + "onClick": [MockFunction], + }, + "id": "action-1", + "order": 100, + "type": "primary", + }, +] +`; + +exports[`AppMenuRegistry should allow to register custom actions under submenu 1`] = ` +Array [ + Object { + "controlProps": Object { + "label": "Action 2", + "onClick": [MockFunction], + }, + "id": "action-2", + "order": 200, + "type": "secondary", + }, + Object { + "actions": Array [ + Object { + "controlProps": Object { + "iconType": "heart", + "label": "Action 3.1", + "onClick": [MockFunction], + }, + "id": "action-3-1", + "order": 100, + "type": "secondary", + }, + Object { + "controlProps": Object { + "label": "Action Custom", + "onClick": [MockFunction], + }, + "id": "action-custom", + "order": 101, + "type": "custom", + }, + Object { + "controlProps": Object { + "label": "Action 3.2", + "onClick": [MockFunction], + }, + "id": "action-3-2", + "order": 200, + "type": "secondary", + }, + ], + "id": "action-3", + "label": "Action 3", + "order": 300, + "type": "secondary", + }, + Object { + "controlProps": Object { + "iconType": "bell", + "label": "Action 1", + "onClick": [MockFunction], + }, + "id": "action-1", + "order": 100, + "type": "primary", + }, +] +`; diff --git a/packages/kbn-discover-utils/src/components/app_menu/app_menu_registry.test.ts b/packages/kbn-discover-utils/src/components/app_menu/app_menu_registry.test.ts new file mode 100644 index 000000000000..46b565c490b0 --- /dev/null +++ b/packages/kbn-discover-utils/src/components/app_menu/app_menu_registry.test.ts @@ -0,0 +1,188 @@ +/* + * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import { AppMenuRegistry } from './app_menu_registry'; +import { + AppMenuActionSubmenuSecondary, + AppMenuActionType, + AppMenuSubmenuActionCustom, +} from './types'; + +describe('AppMenuRegistry', () => { + it('should initialize correctly', () => { + const appMenuRegistry = initializeAppMenuRegistry(); + expect(appMenuRegistry.isActionRegistered('action-1')).toBe(true); + expect(appMenuRegistry.isActionRegistered('action-2')).toBe(true); + expect(appMenuRegistry.isActionRegistered('action-3')).toBe(true); + expect(appMenuRegistry.isActionRegistered('action-3-1')).toBe(true); + expect(appMenuRegistry.isActionRegistered('action-3-2')).toBe(true); + expect(appMenuRegistry.isActionRegistered('action-n')).toBe(false); + expect(appMenuRegistry.getSortedItems()).toHaveLength(3); + }); + + it('should allow to register custom actions', () => { + const appMenuRegistry = initializeAppMenuRegistry(); + expect(appMenuRegistry.isActionRegistered('action-custom')).toBe(false); + + appMenuRegistry.registerCustomAction({ + id: 'action-custom', + type: AppMenuActionType.custom, + controlProps: { + label: 'Action Custom', + onClick: jest.fn(), + }, + }); + + appMenuRegistry.registerCustomAction({ + id: 'action-custom-submenu', + type: AppMenuActionType.custom, + label: 'Action Custom Submenu', + actions: [ + { + id: 'action-custom-submenu-1', + type: AppMenuActionType.custom, + controlProps: { + label: 'Action Custom Submenu 1', + onClick: jest.fn(), + }, + }, + ], + }); + + expect(appMenuRegistry.isActionRegistered('action-custom')).toBe(true); + expect(appMenuRegistry.isActionRegistered('action-custom-submenu')).toBe(true); + expect(appMenuRegistry.getSortedItems()).toHaveLength(5); + + appMenuRegistry.registerCustomAction({ + id: 'action-custom-extra', + type: AppMenuActionType.custom, + controlProps: { + label: 'Action Custom Extra', + onClick: jest.fn(), + }, + }); + + // should limit the number of custom items + const items = appMenuRegistry.getSortedItems(); + expect(items).toHaveLength(5); + expect(items).toMatchSnapshot(); + }); + + it('should allow to register custom actions under submenu', () => { + const appMenuRegistry = initializeAppMenuRegistry(); + expect(appMenuRegistry.isActionRegistered('action-custom')).toBe(false); + + let items = appMenuRegistry.getSortedItems(); + let submenuItem = items.find((item) => item.id === 'action-3') as AppMenuActionSubmenuSecondary; + expect(items).toHaveLength(3); + expect(submenuItem.actions).toHaveLength(2); + + appMenuRegistry.registerCustomActionUnderSubmenu('action-3', { + id: 'action-custom', + type: AppMenuActionType.custom, + order: 101, + controlProps: { + label: 'Action Custom', + onClick: jest.fn(), + }, + }); + + expect(appMenuRegistry.isActionRegistered('action-custom')).toBe(true); + + items = appMenuRegistry.getSortedItems(); + expect(items).toHaveLength(3); + + // calling it again should not add a duplicate + items = appMenuRegistry.getSortedItems(); + expect(items).toHaveLength(3); + + submenuItem = items.find((item) => item.id === 'action-3') as AppMenuActionSubmenuSecondary; + expect(submenuItem.actions).toHaveLength(3); + expect(items).toMatchSnapshot(); + }); + + it('should allow to override actions under submenu', () => { + const appMenuRegistry = initializeAppMenuRegistry(); + + let items = appMenuRegistry.getSortedItems(); + expect(items).toHaveLength(3); + + let submenuItem = items.find((item) => item.id === 'action-3') as AppMenuActionSubmenuSecondary; + const existingSecondaryActionId = submenuItem.actions[0].id; + expect(submenuItem.actions).toHaveLength(2); + + expect(appMenuRegistry.isActionRegistered(existingSecondaryActionId)).toBe(true); + + const customAction: AppMenuSubmenuActionCustom = { + id: existingSecondaryActionId, // using the same id to override the action with a custom one + type: AppMenuActionType.custom, + controlProps: { + label: 'Action Custom', + onClick: jest.fn(), + }, + }; + appMenuRegistry.registerCustomActionUnderSubmenu('action-3', customAction); + + expect(appMenuRegistry.isActionRegistered(existingSecondaryActionId)).toBe(true); + + items = appMenuRegistry.getSortedItems(); + submenuItem = items.find((item) => item.id === 'action-3') as AppMenuActionSubmenuSecondary; + expect(submenuItem.actions).toHaveLength(2); + expect(submenuItem.actions.find((item) => item.id === existingSecondaryActionId)).toBe( + customAction + ); + expect(items).toMatchSnapshot(); + }); +}); + +function initializeAppMenuRegistry() { + return new AppMenuRegistry([ + { + id: 'action-1', + type: AppMenuActionType.primary, + controlProps: { + label: 'Action 1', + iconType: 'bell', + onClick: jest.fn(), + }, + }, + { + id: 'action-2', + type: AppMenuActionType.secondary, + controlProps: { + label: 'Action 2', + onClick: jest.fn(), + }, + }, + { + id: 'action-3', + type: AppMenuActionType.secondary, + label: 'Action 3', + actions: [ + { + id: 'action-3-1', + type: AppMenuActionType.secondary, + controlProps: { + label: 'Action 3.1', + iconType: 'heart', + onClick: jest.fn(), + }, + }, + { + id: 'action-3-2', + type: AppMenuActionType.secondary, + controlProps: { + label: 'Action 3.2', + onClick: jest.fn(), + }, + }, + ], + }, + ]); +} diff --git a/packages/kbn-discover-utils/src/components/app_menu/app_menu_registry.ts b/packages/kbn-discover-utils/src/components/app_menu/app_menu_registry.ts new file mode 100644 index 000000000000..65145c7de675 --- /dev/null +++ b/packages/kbn-discover-utils/src/components/app_menu/app_menu_registry.ts @@ -0,0 +1,214 @@ +/* + * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import { + AppMenuActionBase, + AppMenuActionSubmenuBase, + AppMenuActionSubmenuCustom, + AppMenuSubmenuHorizontalRule, + AppMenuActionSubmenuSecondary, + AppMenuActionType, + AppMenuItem, + AppMenuItemCustom, + AppMenuItemPrimary, + AppMenuItemSecondary, + AppMenuSubmenuActionCustom, +} from './types'; + +export class AppMenuRegistry { + static CUSTOM_ITEMS_LIMIT = 2; + + private appMenuItems: AppMenuItem[]; + /** + * As custom actions can be registered under a submenu from both root and data source profiles, we need to keep track of them separately. + * Otherwise, it would be less predictable. For example, we would override/reset the actions from the data source profile with the ones from the root profile. + * @private + */ + private customSubmenuItemsBySubmenuId: Map< + string, + Array + >; + + constructor(primaryAndSecondaryActions: Array) { + this.appMenuItems = assignOrderToActions(primaryAndSecondaryActions); + this.customSubmenuItemsBySubmenuId = new Map(); + } + + public isActionRegistered(appMenuItemId: string) { + return ( + this.appMenuItems.some((item) => { + if (item.id === appMenuItemId) { + return true; + } + if (isAppMenuActionSubmenu(item)) { + return item.actions.some((submenuItem) => submenuItem.id === appMenuItemId); + } + return false; + }) || + [...this.customSubmenuItemsBySubmenuId.values()].some((submenuItems) => + submenuItems.some((item) => item.id === appMenuItemId) + ) + ); + } + + /** + * Register a custom action to the app menu. It can be a simple action or a submenu with more actions and horizontal rules. + * Note: Only 2 top level custom actions are allowed to be rendered in the app menu. The rest will be ignored. + * A custom action can also open a flyout or a modal. For that, return your custom react node from action's `onClick` event and call `onFinishAction` when you're done. + * @param appMenuItem + */ + public registerCustomAction(appMenuItem: AppMenuItemCustom) { + this.appMenuItems = [ + ...this.appMenuItems.filter( + // prevent duplicates + (item) => !(item.id === appMenuItem.id && item.type === AppMenuActionType.custom) + ), + appMenuItem, + ]; + } + + /** + * Register a custom action under a submenu. It can be an action or a horizontal rule. + * Any number of submenu actions can be registered and rendered. + * You can also extend an existing submenu with more actions. For example, AppMenuActionType.alerts. + * `order` property is optional and can be used to control the order of actions in the submenu. + * @param submenuId + * @param appMenuItem + */ + public registerCustomActionUnderSubmenu( + submenuId: string, + appMenuItem: AppMenuSubmenuActionCustom | AppMenuSubmenuHorizontalRule + ) { + this.customSubmenuItemsBySubmenuId.set(submenuId, [ + ...(this.customSubmenuItemsBySubmenuId.get(submenuId) ?? []).filter( + // prevent duplicates and allow overrides + (item) => item.id !== appMenuItem.id + ), + appMenuItem, + ]); + } + + private getSortedItemsForType(type: AppMenuActionType) { + let actions = this.appMenuItems.filter((item) => item.type === type); + + if (type === AppMenuActionType.custom && actions.length > AppMenuRegistry.CUSTOM_ITEMS_LIMIT) { + // apply the limitation on how many custom items can be shown + actions = actions.slice(0, AppMenuRegistry.CUSTOM_ITEMS_LIMIT); + } + + // enrich submenus with custom actions + if (type === AppMenuActionType.secondary || type === AppMenuActionType.custom) { + [...this.customSubmenuItemsBySubmenuId.entries()].forEach(([submenuId, customActions]) => { + actions = actions.map((item) => { + if (item.id === submenuId && isAppMenuActionSubmenu(item)) { + return extendSubmenuWithCustomActions(item, customActions); + } + return item; + }); + }); + } + + return sortAppMenuItemsByOrder(actions); + } + + /** + * Get the resulting app menu items sorted by type and order. + */ + public getSortedItems() { + const primaryItems = this.getSortedItemsForType(AppMenuActionType.primary); + const secondaryItems = this.getSortedItemsForType(AppMenuActionType.secondary); + const customItems = this.getSortedItemsForType(AppMenuActionType.custom); + + return [...customItems, ...secondaryItems, ...primaryItems]; + } +} + +function isAppMenuActionSubmenu( + appMenuItem: AppMenuItem +): appMenuItem is AppMenuActionSubmenuSecondary | AppMenuActionSubmenuCustom { + return 'actions' in appMenuItem && Array.isArray(appMenuItem.actions); +} + +const FALLBACK_ORDER = Number.MAX_SAFE_INTEGER; + +function sortByOrder(a: T, b: T): number { + return (a.order ?? FALLBACK_ORDER) - (b.order ?? FALLBACK_ORDER); +} + +function getAppMenuSubmenuWithSortedItemsByOrder< + T extends AppMenuActionSubmenuBase = AppMenuActionSubmenuSecondary | AppMenuActionSubmenuCustom +>(appMenuItem: T): T { + return { + ...appMenuItem, + actions: [...appMenuItem.actions].sort(sortByOrder), + }; +} + +function sortAppMenuItemsByOrder(appMenuItems: AppMenuItem[]): AppMenuItem[] { + const sortedAppMenuItems = [...appMenuItems].sort(sortByOrder); + return sortedAppMenuItems.map((appMenuItem) => { + if (isAppMenuActionSubmenu(appMenuItem)) { + return getAppMenuSubmenuWithSortedItemsByOrder(appMenuItem); + } + return appMenuItem; + }); +} + +function getAppMenuSubmenuWithAssignedOrder< + T extends AppMenuActionSubmenuBase = AppMenuActionSubmenuSecondary | AppMenuActionSubmenuCustom +>(appMenuItem: T, order: number): T { + let orderInSubmenu = 0; + const actionsWithOrder = appMenuItem.actions.map((action) => { + orderInSubmenu = orderInSubmenu + 100; + return { + ...action, + order: action.order ?? orderInSubmenu, + }; + }); + return { + ...appMenuItem, + order: appMenuItem.order ?? order, + actions: actionsWithOrder, + }; +} + +function extendSubmenuWithCustomActions< + T extends AppMenuActionSubmenuBase = AppMenuActionSubmenuSecondary | AppMenuActionSubmenuCustom +>( + appMenuItem: T, + customActions: Array +): T { + const customActionsIds = new Set(customActions.map((action) => action.id)); + return { + ...appMenuItem, + actions: [ + ...appMenuItem.actions.filter((item) => !customActionsIds.has(item.id)), // allow to override secondary actions with custom ones + ...customActions, + ], + }; +} + +/** + * All primary and secondary actions by default get order 100, 200, 300,... assigned to them. + * Same for actions under a submenu. + * @param appMenuItems + */ +function assignOrderToActions(appMenuItems: AppMenuItem[]): AppMenuItem[] { + let order = 0; + return appMenuItems.map((appMenuItem) => { + order = order + 100; + if (isAppMenuActionSubmenu(appMenuItem)) { + return getAppMenuSubmenuWithAssignedOrder(appMenuItem, order); + } + return { + ...appMenuItem, + order: appMenuItem.order ?? order, + }; + }); +} diff --git a/packages/kbn-discover-utils/src/components/app_menu/types.ts b/packages/kbn-discover-utils/src/components/app_menu/types.ts new file mode 100644 index 000000000000..d5cd1bde16be --- /dev/null +++ b/packages/kbn-discover-utils/src/components/app_menu/types.ts @@ -0,0 +1,148 @@ +/* + * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import React from 'react'; +import type { TopNavMenuData } from '@kbn/navigation-plugin/public'; +import type { EuiIconType } from '@elastic/eui/src/components/icon/icon'; + +export interface AppMenuControlOnClickParams { + anchorElement: HTMLElement; + onFinishAction: () => void; +} + +export type AppMenuControlProps = Pick< + TopNavMenuData, + 'testId' | 'isLoading' | 'label' | 'description' | 'disableButton' | 'href' | 'tooltip' +> & { + onClick: + | ((params: AppMenuControlOnClickParams) => Promise) + | ((params: AppMenuControlOnClickParams) => React.ReactNode | void) + | undefined; +}; + +export type AppMenuControlWithIconProps = AppMenuControlProps & { + iconType: EuiIconType; +}; + +interface ControlWithOptionalIcon { + iconType?: EuiIconType; +} + +export enum AppMenuActionId { + new = 'new', + open = 'open', + share = 'share', + alerts = 'alerts', + inspect = 'inspect', + createRule = 'createRule', + manageRulesAndConnectors = 'manageRulesAndConnectors', +} + +export enum AppMenuActionType { + primary = 'primary', + secondary = 'secondary', + custom = 'custom', + submenuHorizontalRule = 'submenuHorizontalRule', +} + +export interface AppMenuActionBase { + readonly id: AppMenuActionId | string; + readonly order?: number | undefined; +} + +/** + * A secondary menu action + */ +export interface AppMenuActionSecondary extends AppMenuActionBase { + readonly type: AppMenuActionType.secondary; + readonly controlProps: AppMenuControlProps; +} + +/** + * A secondary submenu action + */ +export interface AppMenuSubmenuActionSecondary + extends Omit { + readonly controlProps: AppMenuControlProps & ControlWithOptionalIcon; +} + +/** + * A custom menu action + */ +export interface AppMenuActionCustom extends AppMenuActionBase { + readonly type: AppMenuActionType.custom; + readonly controlProps: AppMenuControlProps; +} + +/** + * A custom submenu action + */ +export interface AppMenuSubmenuActionCustom extends Omit { + readonly controlProps: AppMenuControlProps & ControlWithOptionalIcon; +} + +/** + * A primary menu action (with icon only) + */ +export interface AppMenuActionPrimary extends AppMenuActionBase { + readonly type: AppMenuActionType.primary; + readonly controlProps: AppMenuControlWithIconProps; +} + +/** + * A horizontal rule between menu items + */ +export interface AppMenuSubmenuHorizontalRule extends AppMenuActionBase { + readonly type: AppMenuActionType.submenuHorizontalRule; + readonly testId?: TopNavMenuData['testId']; +} + +/** + * A menu action which opens a submenu with more actions + */ +export interface AppMenuActionSubmenuBase + extends AppMenuActionBase { + readonly type: T extends AppMenuActionSecondary + ? AppMenuActionType.secondary + : AppMenuActionType.custom; + readonly label: TopNavMenuData['label']; + readonly description?: TopNavMenuData['description']; + readonly testId?: TopNavMenuData['testId']; + readonly actions: T extends AppMenuActionSecondary + ? Array< + AppMenuSubmenuActionSecondary | AppMenuSubmenuActionCustom | AppMenuSubmenuHorizontalRule + > + : Array; +} + +/** + * A menu action which opens a submenu with more secondary actions + */ +export type AppMenuActionSubmenuSecondary = AppMenuActionSubmenuBase; +/** + * A menu action which opens a submenu with more custom actions + */ +export type AppMenuActionSubmenuCustom = AppMenuActionSubmenuBase; + +/** + * A primary menu item can only have an icon + */ +export type AppMenuItemPrimary = AppMenuActionPrimary; +/** + * A secondary menu item can have only a label or a submenu + */ +export type AppMenuItemSecondary = AppMenuActionSecondary | AppMenuActionSubmenuSecondary; +/** + * A custom menu item can have only a label or a submenu + */ +export type AppMenuItemCustom = AppMenuActionCustom | AppMenuActionSubmenuCustom; +/** + * A menu item can be primary, secondary or custom + */ +export type AppMenuItem = AppMenuItemPrimary | AppMenuItemSecondary | AppMenuItemCustom; diff --git a/packages/kbn-discover-utils/src/index.ts b/packages/kbn-discover-utils/src/index.ts index 8fe9a9418c9f..243dd0577444 100644 --- a/packages/kbn-discover-utils/src/index.ts +++ b/packages/kbn-discover-utils/src/index.ts @@ -14,3 +14,4 @@ export * from './utils'; export * from './data_types'; export * from './components/custom_control_columns'; +export { AppMenuRegistry } from './components/app_menu/app_menu_registry'; diff --git a/packages/kbn-discover-utils/src/types.ts b/packages/kbn-discover-utils/src/types.ts index 63297edfe764..2c298da99949 100644 --- a/packages/kbn-discover-utils/src/types.ts +++ b/packages/kbn-discover-utils/src/types.ts @@ -17,6 +17,8 @@ export type { RowControlProps, RowControlRowProps, } from './components/custom_control_columns/types'; +export type * from './components/app_menu/types'; +export { AppMenuActionId, AppMenuActionType } from './components/app_menu/types'; type DiscoverSearchHit = SearchHit>; diff --git a/packages/kbn-discover-utils/tsconfig.json b/packages/kbn-discover-utils/tsconfig.json index 865603e379ec..c26624d139de 100644 --- a/packages/kbn-discover-utils/tsconfig.json +++ b/packages/kbn-discover-utils/tsconfig.json @@ -27,7 +27,8 @@ "@kbn/core-ui-settings-browser", "@kbn/expressions-plugin", "@kbn/logs-data-access-plugin", - "@kbn/ui-theme", - "@kbn/i18n-react" + "@kbn/i18n-react", + "@kbn/navigation-plugin", + "@kbn/ui-theme" ] } diff --git a/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/convert_to_top_nav_item.test.ts b/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/convert_to_top_nav_item.test.ts new file mode 100644 index 000000000000..2fb65563cddf --- /dev/null +++ b/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/convert_to_top_nav_item.test.ts @@ -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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import { + AppMenuActionPrimary, + AppMenuActionSecondary, + AppMenuActionSubmenuCustom, + AppMenuActionType, +} from '@kbn/discover-utils'; +import { convertAppMenuItemToTopNavItem } from './convert_to_top_nav_item'; +import { discoverServiceMock } from '../../../../../__mocks__/services'; + +describe('convertAppMenuItemToTopNavItem', () => { + it('should convert a primary AppMenuItem to TopNavMenuData', () => { + const appMenuItem: AppMenuActionPrimary = { + id: 'action-1', + type: AppMenuActionType.primary, + controlProps: { + label: 'Action 1', + testId: 'action-1', + iconType: 'share', + onClick: jest.fn(), + }, + }; + + const topNavItem = convertAppMenuItemToTopNavItem({ + appMenuItem, + services: discoverServiceMock, + }); + + expect(topNavItem).toEqual({ + id: 'action-1', + label: 'Action 1', + description: 'Action 1', + testId: 'action-1', + run: expect.any(Function), + iconType: 'share', + iconOnly: true, + }); + }); + + it('should convert a secondary AppMenuItem to TopNavMenuData', () => { + const appMenuItem: AppMenuActionSecondary = { + id: 'action-2', + type: AppMenuActionType.secondary, + controlProps: { + label: 'Action Secondary', + testId: 'action-secondary', + onClick: jest.fn(), + }, + }; + + const topNavItem = convertAppMenuItemToTopNavItem({ + appMenuItem, + services: discoverServiceMock, + }); + + expect(topNavItem).toEqual({ + id: 'action-2', + label: 'Action Secondary', + description: 'Action Secondary', + testId: 'action-secondary', + run: expect.any(Function), + }); + }); + + it('should convert a custom AppMenuItem to TopNavMenuData', () => { + const appMenuItem: AppMenuActionSubmenuCustom = { + id: 'action-3', + type: AppMenuActionType.custom, + label: 'Action submenu', + testId: 'action-submenu', + actions: [ + { + id: 'action-3-1', + type: AppMenuActionType.custom, + controlProps: { + label: 'Action 3.1', + testId: 'action-3-1', + onClick: jest.fn(), + }, + }, + { + id: 'action-3-2', + type: AppMenuActionType.submenuHorizontalRule, + }, + { + id: 'action-3-3', + type: AppMenuActionType.custom, + controlProps: { + label: 'Action 3.3', + testId: 'action-3-3', + onClick: jest.fn(), + }, + }, + ], + }; + + const topNavItem = convertAppMenuItemToTopNavItem({ + appMenuItem, + services: discoverServiceMock, + }); + + expect(topNavItem).toEqual({ + id: 'action-3', + label: 'Action submenu', + description: 'Action submenu', + testId: 'action-submenu', + run: expect.any(Function), + }); + }); +}); diff --git a/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/convert_to_top_nav_item.ts b/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/convert_to_top_nav_item.ts new file mode 100644 index 000000000000..2ff2d531d77c --- /dev/null +++ b/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/convert_to_top_nav_item.ts @@ -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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import { AppMenuActionType, AppMenuItem } from '@kbn/discover-utils'; +import type { TopNavMenuData } from '@kbn/navigation-plugin/public'; +import { runAppMenuAction, runAppMenuPopoverAction } from './run_app_menu_action'; +import { DiscoverServices } from '../../../../../build_services'; + +export function convertAppMenuItemToTopNavItem({ + appMenuItem, + services, +}: { + appMenuItem: AppMenuItem; + services: DiscoverServices; +}): TopNavMenuData { + if ('actions' in appMenuItem) { + return { + id: appMenuItem.id, + label: appMenuItem.label, + description: appMenuItem.description ?? appMenuItem.label, + testId: appMenuItem.testId, + run: (anchorElement: HTMLElement) => { + runAppMenuPopoverAction({ + appMenuItem, + anchorElement, + services, + }); + }, + }; + } + + return { + id: appMenuItem.id, + label: appMenuItem.controlProps.label, + description: appMenuItem.controlProps.description ?? appMenuItem.controlProps.label, + testId: appMenuItem.controlProps.testId, + run: async (anchorElement: HTMLElement) => { + await runAppMenuAction({ + appMenuItem, + anchorElement, + services, + }); + }, + ...(appMenuItem.type === AppMenuActionType.primary + ? { iconType: appMenuItem.controlProps.iconType, iconOnly: true } + : {}), + }; +} diff --git a/src/plugins/discover/public/application/main/components/top_nav/open_alerts_popover.test.tsx b/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/get_alerts.test.tsx similarity index 74% rename from src/plugins/discover/public/application/main/components/top_nav/open_alerts_popover.test.tsx rename to src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/get_alerts.test.tsx index fb9f127b83d8..a658ca750cf2 100644 --- a/src/plugins/discover/public/application/main/components/top_nav/open_alerts_popover.test.tsx +++ b/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/get_alerts.test.tsx @@ -10,28 +10,40 @@ import React from 'react'; import { mountWithIntl } from '@kbn/test-jest-helpers'; import { findTestSubject } from '@elastic/eui/lib/test'; -import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; -import { AlertsPopover } from './open_alerts_popover'; -import { discoverServiceMock } from '../../../../__mocks__/services'; -import { dataViewWithTimefieldMock } from '../../../../__mocks__/data_view_with_timefield'; -import { dataViewWithNoTimefieldMock } from '../../../../__mocks__/data_view_no_timefield'; import { dataViewMock } from '@kbn/discover-utils/src/__mocks__'; -import { getDiscoverStateMock } from '../../../../__mocks__/discover_state.mock'; +import { AppMenuActionsMenuPopover } from './run_app_menu_action'; +import { getAlertsAppMenuItem } from './get_alerts'; +import { discoverServiceMock } from '../../../../../__mocks__/services'; +import { dataViewWithTimefieldMock } from '../../../../../__mocks__/data_view_with_timefield'; +import { dataViewWithNoTimefieldMock } from '../../../../../__mocks__/data_view_no_timefield'; +import { getDiscoverStateMock } from '../../../../../__mocks__/discover_state.mock'; const mount = (dataView = dataViewMock, isEsqlMode = false) => { const stateContainer = getDiscoverStateMock({ isTimeBased: true }); stateContainer.actions.setDataView(dataView); + + const discoverParamsMock = { + dataView, + adHocDataViews: [], + isEsqlMode, + onNewSearch: jest.fn(), + onOpenSavedSearch: jest.fn(), + onUpdateAdHocDataViews: jest.fn(), + }; + + const alertsAppMenuItem = getAlertsAppMenuItem({ + discoverParams: discoverParamsMock, + services: discoverServiceMock, + stateContainer, + }); + return mountWithIntl( - - - + ); }; diff --git a/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/get_alerts.tsx b/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/get_alerts.tsx new file mode 100644 index 000000000000..d6d8bb81bac0 --- /dev/null +++ b/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/get_alerts.tsx @@ -0,0 +1,179 @@ +/* + * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import React, { useCallback, useMemo } from 'react'; +import type { DataView } from '@kbn/data-plugin/common'; +import { i18n } from '@kbn/i18n'; +import { + AppMenuActionId, + AppMenuActionSubmenuSecondary, + AppMenuActionType, +} from '@kbn/discover-utils'; +import { + AlertConsumers, + ES_QUERY_ID, + RuleCreationValidConsumer, + STACK_ALERTS_FEATURE_ID, +} from '@kbn/rule-data-utils'; +import { RuleTypeMetaData } from '@kbn/alerting-plugin/common'; +import { DiscoverStateContainer } from '../../../state_management/discover_state'; +import { AppMenuDiscoverParams } from './types'; +import { DiscoverServices } from '../../../../../build_services'; + +const EsQueryValidConsumer: RuleCreationValidConsumer[] = [ + AlertConsumers.INFRASTRUCTURE, + AlertConsumers.LOGS, + AlertConsumers.OBSERVABILITY, + STACK_ALERTS_FEATURE_ID, +]; + +interface EsQueryAlertMetaData extends RuleTypeMetaData { + isManagementPage?: boolean; + adHocDataViewList: DataView[]; +} + +const CreateAlertFlyout: React.FC<{ + discoverParams: AppMenuDiscoverParams; + services: DiscoverServices; + onFinishAction: () => void; + stateContainer: DiscoverStateContainer; +}> = ({ stateContainer, discoverParams, services, onFinishAction }) => { + const query = stateContainer.appState.getState().query; + + const { dataView, isEsqlMode, adHocDataViews, onUpdateAdHocDataViews } = discoverParams; + const { triggersActionsUi } = services; + const timeField = getTimeField(dataView); + + /** + * Provides the default parameters used to initialize the new rule + */ + const getParams = useCallback(() => { + if (isEsqlMode) { + return { + searchType: 'esqlQuery', + esqlQuery: query, + timeField, + }; + } + const savedQueryId = stateContainer.appState.getState().savedQuery; + return { + searchType: 'searchSource', + searchConfiguration: stateContainer.savedSearchState + .getState() + .searchSource.getSerializedFields(), + savedQueryId, + }; + }, [isEsqlMode, stateContainer.appState, stateContainer.savedSearchState, query, timeField]); + + const discoverMetadata: EsQueryAlertMetaData = useMemo( + () => ({ + isManagementPage: false, + adHocDataViewList: adHocDataViews, + }), + [adHocDataViews] + ); + + return triggersActionsUi?.getAddRuleFlyout({ + metadata: discoverMetadata, + consumer: 'alerts', + onClose: (_, metadata) => { + onUpdateAdHocDataViews(metadata!.adHocDataViewList); + onFinishAction(); + }, + onSave: async (metadata) => { + onUpdateAdHocDataViews(metadata!.adHocDataViewList); + }, + canChangeTrigger: false, + ruleTypeId: ES_QUERY_ID, + initialValues: { params: getParams() }, + validConsumers: EsQueryValidConsumer, + useRuleProducer: true, + // Default to the Logs consumer if it's available. This should fall back to Stack Alerts if it's not. + initialSelectedConsumer: AlertConsumers.LOGS, + }); +}; + +export const getAlertsAppMenuItem = ({ + discoverParams, + services, + stateContainer, +}: { + discoverParams: AppMenuDiscoverParams; + services: DiscoverServices; + stateContainer: DiscoverStateContainer; +}): AppMenuActionSubmenuSecondary => { + const { dataView, isEsqlMode } = discoverParams; + const timeField = getTimeField(dataView); + const hasTimeFieldName = !isEsqlMode ? Boolean(dataView?.timeFieldName) : Boolean(timeField); + + return { + id: AppMenuActionId.alerts, + type: AppMenuActionType.secondary, + label: i18n.translate('discover.localMenu.localMenu.alertsTitle', { + defaultMessage: 'Alerts', + }), + description: i18n.translate('discover.localMenu.alertsDescription', { + defaultMessage: 'Alerts', + }), + testId: 'discoverAlertsButton', + actions: [ + { + id: AppMenuActionId.createRule, + type: AppMenuActionType.secondary, + controlProps: { + label: i18n.translate('discover.alerts.createSearchThreshold', { + defaultMessage: 'Create search threshold rule', + }), + iconType: 'bell', + testId: 'discoverCreateAlertButton', + disableButton: !hasTimeFieldName, + tooltip: hasTimeFieldName + ? undefined + : i18n.translate('discover.alerts.missedTimeFieldToolTip', { + defaultMessage: 'Data view does not have a time field.', + }), + onClick: async (params) => { + return ( + + ); + }, + }, + }, + { + id: 'alertsDivider', + type: AppMenuActionType.submenuHorizontalRule, + }, + { + id: AppMenuActionId.manageRulesAndConnectors, + type: AppMenuActionType.secondary, + controlProps: { + label: i18n.translate('discover.alerts.manageRulesAndConnectors', { + defaultMessage: 'Manage rules and connectors', + }), + iconType: 'tableOfContents', + testId: 'discoverManageAlertsButton', + href: services.application.getUrlForApp( + 'management/insightsAndAlerting/triggersActions/rules' + ), + onClick: undefined, + }, + }, + ], + }; +}; + +function getTimeField(dataView: DataView | undefined) { + const dateFields = dataView?.fields.getByType('date'); + return dataView?.timeFieldName || dateFields?.[0]?.name; +} diff --git a/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/get_inspect.tsx b/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/get_inspect.tsx new file mode 100644 index 000000000000..5943f598c9ae --- /dev/null +++ b/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/get_inspect.tsx @@ -0,0 +1,34 @@ +/* + * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import { AppMenuActionId, AppMenuActionType, AppMenuActionSecondary } from '@kbn/discover-utils'; +import { i18n } from '@kbn/i18n'; + +export const getInspectAppMenuItem = ({ + onOpenInspector, +}: { + onOpenInspector: () => void; +}): AppMenuActionSecondary => { + return { + id: AppMenuActionId.inspect, + type: AppMenuActionType.secondary, + controlProps: { + label: i18n.translate('discover.localMenu.inspectTitle', { + defaultMessage: 'Inspect', + }), + description: i18n.translate('discover.localMenu.openInspectorForSearchDescription', { + defaultMessage: 'Open Inspector for search', + }), + testId: 'openInspectorButton', + onClick: () => { + onOpenInspector(); + }, + }, + }; +}; diff --git a/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/get_new_search.tsx b/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/get_new_search.tsx new file mode 100644 index 000000000000..b67f14f31c56 --- /dev/null +++ b/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/get_new_search.tsx @@ -0,0 +1,35 @@ +/* + * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import { AppMenuActionId, AppMenuActionType, AppMenuActionPrimary } from '@kbn/discover-utils'; +import { i18n } from '@kbn/i18n'; + +export const getNewSearchAppMenuItem = ({ + onNewSearch, +}: { + onNewSearch: () => void; +}): AppMenuActionPrimary => { + return { + id: AppMenuActionId.new, + type: AppMenuActionType.primary, + controlProps: { + label: i18n.translate('discover.localMenu.localMenu.newSearchTitle', { + defaultMessage: 'New', + }), + description: i18n.translate('discover.localMenu.newSearchDescription', { + defaultMessage: 'New Search', + }), + iconType: 'plus', + testId: 'discoverNewButton', + onClick: () => { + onNewSearch(); + }, + }, + }; +}; diff --git a/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/get_open_search.tsx b/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/get_open_search.tsx new file mode 100644 index 000000000000..e8f6c5448d60 --- /dev/null +++ b/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/get_open_search.tsx @@ -0,0 +1,37 @@ +/* + * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import React from 'react'; +import { AppMenuActionId, AppMenuActionType, AppMenuActionPrimary } from '@kbn/discover-utils'; +import { i18n } from '@kbn/i18n'; +import { OpenSearchPanel } from '../open_search_panel'; + +export const getOpenSearchAppMenuItem = ({ + onOpenSavedSearch, +}: { + onOpenSavedSearch: (savedSearchId: string) => void; +}): AppMenuActionPrimary => { + return { + id: AppMenuActionId.open, + type: AppMenuActionType.primary, + controlProps: { + label: i18n.translate('discover.localMenu.openTitle', { + defaultMessage: 'Open', + }), + description: i18n.translate('discover.localMenu.openSavedSearchDescription', { + defaultMessage: 'Open Saved Search', + }), + iconType: 'folderOpen', + testId: 'discoverOpenButton', + onClick: ({ onFinishAction }) => { + return ; + }, + }, + }; +}; diff --git a/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/get_share.tsx b/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/get_share.tsx new file mode 100644 index 000000000000..f1a030a40ea0 --- /dev/null +++ b/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/get_share.tsx @@ -0,0 +1,135 @@ +/* + * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import { AppMenuActionPrimary, AppMenuActionId, AppMenuActionType } from '@kbn/discover-utils'; +import { omit } from 'lodash'; +import { setStateToKbnUrl } from '@kbn/kibana-utils-plugin/public'; +import { i18n } from '@kbn/i18n'; +import { DiscoverStateContainer } from '../../../state_management/discover_state'; +import { getSharingData, showPublicUrlSwitch } from '../../../../../utils/get_sharing_data'; +import { DiscoverAppLocatorParams } from '../../../../../../common/app_locator'; +import { AppMenuDiscoverParams } from './types'; +import { DiscoverServices } from '../../../../../build_services'; + +export const getShareAppMenuItem = ({ + discoverParams, + services, + stateContainer, +}: { + discoverParams: AppMenuDiscoverParams; + services: DiscoverServices; + stateContainer: DiscoverStateContainer; +}): AppMenuActionPrimary => { + return { + id: AppMenuActionId.share, + type: AppMenuActionType.primary, + controlProps: { + label: i18n.translate('discover.localMenu.shareTitle', { + defaultMessage: 'Share', + }), + description: i18n.translate('discover.localMenu.shareSearchDescription', { + defaultMessage: 'Share Search', + }), + iconType: 'share', + testId: 'shareTopNavButton', + onClick: async ({ anchorElement }) => { + const { dataView, isEsqlMode } = discoverParams; + + if (!services.share) { + return; + } + + const savedSearch = stateContainer.savedSearchState.getState(); + const searchSourceSharingData = await getSharingData( + savedSearch.searchSource, + stateContainer.appState.getState(), + services, + isEsqlMode + ); + + const { locator, notifications } = services; + const appState = stateContainer.appState.getState(); + const { timefilter } = services.data.query.timefilter; + const timeRange = timefilter.getTime(); + const refreshInterval = timefilter.getRefreshInterval(); + const filters = services.filterManager.getFilters(); + + // Share -> Get links -> Snapshot + const params: DiscoverAppLocatorParams = { + ...omit(appState, 'dataSource'), + ...(savedSearch.id ? { savedSearchId: savedSearch.id } : {}), + ...(dataView?.isPersisted() + ? { dataViewId: dataView?.id } + : { dataViewSpec: dataView?.toMinimalSpec() }), + filters, + timeRange, + refreshInterval, + }; + const relativeUrl = locator.getRedirectUrl(params); + + // This logic is duplicated from `relativeToAbsolute` (for bundle size reasons). Ultimately, this should be + // replaced when https://github.com/elastic/kibana/issues/153323 is implemented. + const link = document.createElement('a'); + link.setAttribute('href', relativeUrl); + const shareableUrl = link.href; + + // Share -> Get links -> Saved object + let shareableUrlForSavedObject = await locator.getUrl( + { savedSearchId: savedSearch.id }, + { absolute: true } + ); + + // UrlPanelContent forces a '_g' parameter in the saved object URL: + // https://github.com/elastic/kibana/blob/a30508153c1467b1968fb94faf1debc5407f61ea/src/plugins/share/public/components/url_panel_content.tsx#L230 + // Since our locator doesn't add the '_g' parameter if it's not needed, UrlPanelContent + // will interpret it as undefined and add '?_g=' to the URL, which is invalid in Discover, + // so instead we add an empty object for the '_g' parameter to the URL. + shareableUrlForSavedObject = setStateToKbnUrl( + '_g', + {}, + undefined, + shareableUrlForSavedObject + ); + + services.share.toggleShareContextMenu({ + anchorElement, + allowEmbed: false, + allowShortUrl: !!services.capabilities.discover.createShortUrl, + shareableUrl, + shareableUrlForSavedObject, + shareableUrlLocatorParams: { locator, params }, + objectId: savedSearch.id, + objectType: 'search', + objectTypeMeta: { + title: i18n.translate('discover.share.shareModal.title', { + defaultMessage: 'Share this search', + }), + }, + sharingData: { + isTextBased: isEsqlMode, + locatorParams: [{ id: locator.id, params }], + ...searchSourceSharingData, + // CSV reports can be generated without a saved search so we provide a fallback title + title: + savedSearch.title || + i18n.translate('discover.localMenu.fallbackReportTitle', { + defaultMessage: 'Untitled discover search', + }), + }, + isDirty: !savedSearch.id || stateContainer.appState.hasChanged(), + showPublicUrlSwitch, + onClose: () => { + anchorElement?.focus(); + }, + toasts: notifications.toasts, + }); + }, + }, + }; +}; diff --git a/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/index.ts b/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/index.ts new file mode 100644 index 000000000000..6a5c2f31946a --- /dev/null +++ b/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/index.ts @@ -0,0 +1,16 @@ +/* + * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +export { getAlertsAppMenuItem } from './get_alerts'; +export { getNewSearchAppMenuItem } from './get_new_search'; +export { getOpenSearchAppMenuItem } from './get_open_search'; +export { getShareAppMenuItem } from './get_share'; +export { getInspectAppMenuItem } from './get_inspect'; +export { convertAppMenuItemToTopNavItem } from './convert_to_top_nav_item'; +export * from './types'; diff --git a/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/run_app_menu_action.test.tsx b/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/run_app_menu_action.test.tsx new file mode 100644 index 000000000000..952063317d91 --- /dev/null +++ b/src/plugins/discover/public/application/main/components/top_nav/app_menu_actions/run_app_menu_action.test.tsx @@ -0,0 +1,120 @@ +/* + * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import React from 'react'; +import { screen } from '@testing-library/react'; +import { AppMenuActionSubmenuCustom, AppMenuActionType, AppMenuItem } from '@kbn/discover-utils'; +import { discoverServiceMock } from '../../../../../__mocks__/services'; +import { runAppMenuAction, runAppMenuPopoverAction } from './run_app_menu_action'; + +describe('run app menu actions', () => { + describe('runAppMenuAction', () => { + it('should call the action correctly', () => { + const appMenuItem: AppMenuItem = { + id: 'action-1', + type: AppMenuActionType.primary, + controlProps: { + label: 'Action 1', + testId: 'action-1', + iconType: 'share', + onClick: jest.fn(), + }, + }; + + const anchorElement = document.createElement('div'); + + runAppMenuAction({ + appMenuItem, + anchorElement, + services: discoverServiceMock, + }); + + expect(appMenuItem.controlProps.onClick).toHaveBeenCalled(); + }); + + it('should call the action and render a custom content', async () => { + const appMenuItem: AppMenuItem = { + id: 'action-1', + type: AppMenuActionType.primary, + controlProps: { + label: 'Action 1', + testId: 'action-1', + iconType: 'share', + onClick: jest.fn(({ onFinishAction }) => ( +