[Significant events] Improving the UI/UX around model selection and run configuration popover

x-pack/platform/plugins/shared/streams_app/public/components/sig_events/significant_events_discovery/components/streams_view/connector_sub_panel.tsx

@@ -0,0 +1,56 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiBadge, EuiSelectable } from '@elastic/eui';
+import type { EuiSelectableOption } from '@elastic/eui';
+import type { InferenceConnector } from '@kbn/inference-common';
+import React, { useCallback, useMemo } from 'react';
+import { ConnectorIcon } from '../../../../connector_list_button/connector_icon';
+import { DEFAULT_MODEL_BADGE_LABEL } from './translations';
+
+interface ConnectorSubPanelProps {
+  connectors: InferenceConnector[];
+  resolvedConnectorId: string | undefined;
+  selectedConnectorId: string | undefined;
+  onSelect: (connectorId: string) => void;
+}
+
+export const ConnectorSubPanel = ({
+  connectors,
+  resolvedConnectorId,
+  selectedConnectorId,
+  onSelect,
+}: ConnectorSubPanelProps) => {
+  const options = useMemo<EuiSelectableOption[]>(
+    () =>
+      connectors.map((connector) => ({
+        label: connector.name,
+        key: connector.connectorId,
+        checked: connector.connectorId === selectedConnectorId ? ('on' as const) : undefined,
+        prepend: <ConnectorIcon connectorName={connector.name} />,
+        append:
+          connector.connectorId === resolvedConnectorId ? (
+            <EuiBadge color="hollow">{DEFAULT_MODEL_BADGE_LABEL}</EuiBadge>
+          ) : undefined,
+      })),
+    [connectors, selectedConnectorId, resolvedConnectorId]
+  );
+
+  const handleChange = useCallback(
+    (newOptions: EuiSelectableOption[]) => {
+      const selected = newOptions.find((o) => o.checked === 'on');
+      if (selected?.key) onSelect(selected.key);
+    },
+    [onSelect]
+  );
+
+  return (
+    <EuiSelectable singleSelection="always" options={options} onChange={handleChange}>
+      {(list) => list}
+    </EuiSelectable>
+  );
+};

x-pack/platform/plugins/shared/streams_app/public/components/sig_events/significant_events_discovery/components/streams_view/context_menu_helpers.tsx

@@ -0,0 +1,60 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import type { InferenceConnector } from '@kbn/inference-common';
+import React from 'react';
+import { ConnectorIcon } from '../../../../connector_list_button/connector_icon';
+import { ConnectorSubPanel } from './connector_sub_panel';
+import { MODEL_SELECTION_PANEL_TITLE } from './translations';
+
+export function buildConnectorSelectionPanel({
+  connectors,
+  resolvedConnectorId,
+  selectedConnectorId,
+  onSelect,
+}: {
+  connectors: InferenceConnector[];
+  resolvedConnectorId: string | undefined;
+  selectedConnectorId: string | undefined;
+  onSelect: (connectorId: string) => void;
+}) {
+  return {
+    title: MODEL_SELECTION_PANEL_TITLE,
+    width: 300,
+    content: (
+      <ConnectorSubPanel
+        connectors={connectors}
+        resolvedConnectorId={resolvedConnectorId}
+        selectedConnectorId={selectedConnectorId}
+        onSelect={onSelect}
+      />
+    ),
+  };
+}
+
+export function buildConnectorMenuItem({
+  connector,
+  panelId,
+}: {
+  connector: InferenceConnector | undefined;
+  panelId: number;
+}): { name: React.ReactNode; panel: number } {
+  return {
+    name: (
+      <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
+        <EuiFlexItem grow={false}>
+          <ConnectorIcon connectorName={connector?.name} />
+        </EuiFlexItem>
+        <EuiFlexItem className="eui-textTruncate" css={{ minWidth: 0 }}>
+          {connector?.name ?? '—'}
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    ),
+    panel: panelId,
+  };
+}

x-pack/platform/plugins/shared/streams_app/public/components/sig_events/significant_events_discovery/components/streams_view/context_menu_split_button.tsx

@@ -0,0 +1,153 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import {
+  EuiCallOut,
+  EuiContextMenu,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiSplitButton,
+  useEuiTheme,
+  useGeneratedHtmlId,
+} from '@elastic/eui';
+import type { EuiContextMenuPanelDescriptor } from '@elastic/eui';
+import { useBoolean } from '@kbn/react-hooks';
+import React, { useCallback, useMemo, useState } from 'react';
+import type { ComponentProps } from 'react';
+import { useModelSettingsUrl } from '../../../../../hooks/use_model_settings_url';
+import { MODEL_SETTINGS_LABEL } from './translations';
+
+const modelSettingsMenuName = (
+  <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
+    <EuiFlexItem>{MODEL_SETTINGS_LABEL}</EuiFlexItem>
+    <EuiFlexItem grow={false}>
+      <EuiIcon type="popout" size="s" color="subdued" aria-hidden={true} />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);
+
+export interface MenuHelpers {
+  resetMenu: () => void;
+  closeMenu: () => void;
+}
+
+interface ContextMenuSplitButtonProps {
+  primaryLabel: React.ReactNode;
+  primaryIconType?: string;
+  onPrimaryClick: () => void;
+  isPrimaryDisabled?: boolean;
+  primaryDataTestSubj?: string;
+
+  secondaryAriaLabel: string;
+  isSecondaryDisabled?: boolean;
+  secondaryDataTestSubj?: string;
+
+  buildPanels: (helpers: MenuHelpers) => Array<Omit<EuiContextMenuPanelDescriptor, 'id'>>;
+
+  error?: Error;
+  errorTitle?: string;
+
+  color?: ComponentProps<typeof EuiSplitButton>['color'];
+  isLoading?: boolean;
+  'data-test-subj'?: string;
+}
+
+export const ContextMenuSplitButton = ({
+  primaryLabel,
+  primaryIconType,
+  onPrimaryClick,
+  isPrimaryDisabled,
+  primaryDataTestSubj,
+  secondaryAriaLabel,
+  isSecondaryDisabled,
+  secondaryDataTestSubj,
+  buildPanels,
+  error,
+  errorTitle,
+  color,
+  isLoading,
+  'data-test-subj': dataTestSubj,
+}: ContextMenuSplitButtonProps) => {
+  const { euiTheme } = useEuiTheme();
+  const [isOpen, { off: close, toggle }] = useBoolean(false);
+  const [menuResetKey, setMenuResetKey] = useState(0);
+  const popoverId = useGeneratedHtmlId({ prefix: 'contextMenuSplitButton' });
+  const managementUrl = useModelSettingsUrl();
+
+  const resetMenu = useCallback(() => setMenuResetKey((k) => k + 1), []);
+
+  const closeMenu = useCallback(() => {
+    close();
+    resetMenu();
+  }, [close, resetMenu]);
+
+  const panels = useMemo(() => {
+    const builtPanels = buildPanels({ resetMenu, closeMenu });
+
+    const settingsItems = managementUrl
+      ? [
+          { isSeparator: true as const },
+          {
+            name: modelSettingsMenuName,
+            icon: 'gear' as const,
+            href: managementUrl,
+            target: '_blank',
+            onClick: closeMenu,
+          },
+        ]
+      : [];
+
+    return builtPanels.map((panel, index) => ({
+      ...panel,
+      id: index,
+      ...(index === 0 && panel.items && settingsItems.length > 0
+        ? { items: [...panel.items, ...settingsItems] }
+        : {}),
+    }));
+  }, [buildPanels, resetMenu, closeMenu, managementUrl]);
+
+  const popoverContent = error ? (
+    <EuiCallOut
+      announceOnMount
+      color="danger"
+      size="s"
+      title={errorTitle}
+      css={{ margin: euiTheme.size.s }}
+    />
+  ) : (
+    <EuiContextMenu key={menuResetKey} initialPanelId={0} panels={panels} />
+  );
+
+  return (
+    <EuiSplitButton size="m" color={color} isLoading={isLoading} data-test-subj={dataTestSubj}>
+      <EuiSplitButton.ActionPrimary
+        onClick={onPrimaryClick}
+        isDisabled={isPrimaryDisabled}
+        iconType={primaryIconType}
+        data-test-subj={primaryDataTestSubj}
+      >
+        {primaryLabel}
+      </EuiSplitButton.ActionPrimary>
+      <EuiSplitButton.ActionSecondary
+        iconType="arrowDown"
+        aria-label={secondaryAriaLabel}
+        isDisabled={isSecondaryDisabled}
+        data-test-subj={secondaryDataTestSubj}
+        onClick={toggle}
+        popoverProps={{
+          id: popoverId,
+          isOpen,
+          closePopover: closeMenu,
+          anchorPosition: 'downRight',
+          panelPaddingSize: 'none',
+          children: popoverContent,
+        }}
+      />
+    </EuiSplitButton>
+  );
+};