refactor(ml): reuse DataViewPicker

Author: KodeRad

src/platform/plugins/shared/discover/public/plugin.tsx

@@ -29,6 +29,7 @@ import { DISCOVER_ESQL_LOCATOR } from '@kbn/deeplinks-analytics';
 import { ADD_PANEL_TRIGGER, ON_OPEN_PANEL_MENU } from '@kbn/ui-actions-plugin/common/trigger_ids';
 import type { DrilldownTransforms } from '@kbn/embeddable-plugin/common';
 import { ProjectRoutingAccess } from '@kbn/cps-utils';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { DISCOVER_APP_LOCATOR, PLUGIN_ID, type DiscoverAppLocator } from '../common';
 import {
   DISCOVER_CONTEXT_APP_LOCATOR,
@@ -65,6 +66,8 @@ import type { ProfileProviderSharedServices, ProfilesManager } from './context_a
 import { forwardLegacyUrls } from './plugin_imports/forward_legacy_urls';
 import { registerEsqlResultsAttachmentUi } from './agent_builder/register_esql_results_ui';
 import { getProfilesInspectorView } from './context_awareness/inspector/get_profiles_inspector_view';
+import { OpenSearchPanel } from './application/main/components/top_nav/open_search_panel';
+import type { DiscoverServices } from './build_services';
 
 /**
  * Contains Discover, one of the oldest parts of Kibana
@@ -304,6 +307,23 @@ export class DiscoverPlugin
       DiscoverContainer: (props: DiscoverContainerProps) => (
         <DiscoverContainerInternal getDiscoverServices={getDiscoverServicesInternal} {...props} />
       ),
+      OpenSessionPanel: (props: {
+        onClose: () => void;
+        onOpenSavedSearch: (id: string) => void;
+      }) => {
+        const openSessionServices = {
+          addBasePath: (path: string) => core.http.basePath.prepend(path),
+          capabilities: core.application.capabilities,
+          savedObjectsTagging: plugins.savedObjectsTaggingOss?.getTaggingApi(),
+          contentClient: plugins.contentManagement.client,
+          uiSettings: core.uiSettings,
+        };
+        return (
+          <KibanaContextProvider services={openSessionServices as unknown as DiscoverServices}>
+            <OpenSearchPanel {...props} />
+          </KibanaContextProvider>
+        );
+      },
     };
   }
 

src/platform/plugins/shared/discover/public/types.ts

@@ -127,6 +127,10 @@ export interface DiscoverStart {
    * Use the Discover context awareness framework instead to register a custom Discover profile.
    */
   readonly DiscoverContainer: ComponentType<DiscoverContainerProps>;
+  readonly OpenSessionPanel: ComponentType<{
+    onClose: () => void;
+    onOpenSavedSearch: (id: string) => void;
+  }>;
 }
 
 /**

src/platform/plugins/shared/unified_search/public/dataview_picker/change_dataview.tsx

@@ -66,6 +66,7 @@ export function ChangeDataView({
   onCreateDefaultAdHocDataView,
   onClosePopover,
   getDataViewHelpText,
+  compressed = true,
 }: DataViewPickerProps) {
   const { euiTheme } = useEuiTheme();
   const [isPopoverOpen, setPopoverIsOpen] = useState(false);
@@ -126,7 +127,7 @@ export function ChangeDataView({
     const { label, title, 'data-test-subj': dataTestSubj, fullWidth, ...rest } = trigger;
     return (
       <EuiFormControlButton
-        compressed
+        compressed={compressed}
         css={styles.trigger}
         isInvalid={isMissingCurrent}
         title={trigger.label}
@@ -328,7 +329,7 @@ export function ChangeDataView({
       <>
         <EuiFlexItem grow={true} css={shrinkableContainerCss}>
           <EuiFormControlLayout
-            compressed
+            compressed={compressed}
             isDropdown
             prepend={i18n.translate('unifiedSearch.query.queryBar.esqlMenu.switcherLabelTitle', {
               defaultMessage: 'Data view',

src/platform/plugins/shared/unified_search/public/dataview_picker/data_view_picker.tsx

@@ -24,6 +24,11 @@ export interface DataViewPickerProps {
    * The properties of the button that triggers the dataview picker.
    */
   trigger: ChangeDataViewTriggerProps;
+  /**
+   * When false, renders the trigger at standard (non-compressed) height.
+   * Defaults to true to preserve the default compact toolbar appearance.
+   */
+  compressed?: boolean;
   /**
    * Flag that should be enabled when the current dataview is missing.
    */
@@ -95,6 +100,7 @@ export const DataViewPicker = ({
   onCreateDefaultAdHocDataView,
   isDisabled,
   getDataViewHelpText,
+  compressed = true,
 }: DataViewPickerProps) => {
   return (
     <ChangeDataView
@@ -112,6 +118,7 @@ export const DataViewPicker = ({
       selectableProps={selectableProps}
       isDisabled={isDisabled}
       getDataViewHelpText={getDataViewHelpText}
+      compressed={compressed}
     />
   );
 };

x-pack/platform/plugins/private/data_visualizer/public/application/data_drift/data_drift_page.tsx

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { css } from '@emotion/react';
 import type { FC, ReactNode } from 'react';
 import React, { useCallback, useEffect, useState, useMemo, useRef } from 'react';
 
@@ -55,6 +56,11 @@ import { useSearch } from '../common/hooks/use_search';
 import { DocumentCountWithBrush } from './document_count_with_brush';
 import { useDataDriftColors } from './use_data_drift_colors';
 
+const maxInlineSizeStyles = css`
+  max-inline-size: 100%;
+  min-inline-size: 0;
+`;
+
 interface PageHeaderProps {
   onRefresh: () => void;
   needsUpdate: boolean;
@@ -100,12 +106,12 @@ export const PageHeader: FC<PageHeaderProps> = ({ onRefresh, needsUpdate, header
       gutterSize="s"
       alignItems="center"
       justifyContent="spaceBetween"
-      responsive={false}
+      wrap={true}
       data-test-subj="dataComparisonTimeRangeSelectorSection"
     >
       <EuiFlexItem grow={false}>{headerContent ?? null}</EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
+      <EuiFlexItem grow={false} css={maxInlineSizeStyles}>
+        <EuiFlexGroup css={maxInlineSizeStyles} gutterSize="s" alignItems="center">
           {hasValidTimeField && (
             <EuiFlexItem grow={false}>
               <FullTimeRangeSelector
@@ -119,7 +125,7 @@ export const PageHeader: FC<PageHeaderProps> = ({ onRefresh, needsUpdate, header
               />
             </EuiFlexItem>
           )}
-          <EuiFlexItem grow={false}>
+          <EuiFlexItem grow={false} css={maxInlineSizeStyles}>
             <DatePickerWrapper
               isAutoRefreshOnly={!hasValidTimeField}
               showRefresh={!hasValidTimeField}

x-pack/platform/plugins/private/data_visualizer/public/application/index_data_visualizer/components/data_view_management/data_view_management.tsx

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { css } from '@emotion/react';
 import type { FC, ReactNode } from 'react';
 import React, { useEffect, useMemo, useState, useCallback, useRef } from 'react';
 import type { Required } from 'utility-types';
@@ -62,7 +63,6 @@ import { DocumentCountContent } from '../../../common/components/document_count_
 import { OMIT_FIELDS } from '../../../../../common/constants';
 import { SearchPanel } from '../search_panel';
 import { ActionsPanel } from '../actions_panel';
-import { DataVisualizerDataViewManagement } from '../data_view_management';
 import type { GetAdditionalLinks } from '../../../common/components/results_links';
 import { useDataVisualizerGridData } from '../../hooks/use_data_visualizer_grid_data';
 import {
@@ -72,6 +72,11 @@ import {
 } from '../../constants/random_sampler';
 import type { FieldStatisticTableEmbeddableProps } from '../../embeddables/grid_embeddable/types';
 
+const maxInlineSizeStyles = css`
+  max-inline-size: 100%;
+  min-inline-size: 0;
+`;
+
 const defaultSearchQuery = {
   match_all: {},
 };
@@ -519,19 +524,12 @@ export const IndexDataVisualizerView: FC<IndexDataVisualizerViewProps> = ({
           gutterSize="s"
           alignItems="center"
           justifyContent="spaceBetween"
-          responsive={false}
+          wrap={true}
           data-test-subj="dataVisualizerTimeRangeSelectorSection"
         >
-          <EuiFlexItem grow={false}>
-            <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
-              <EuiFlexItem grow={false}>{headerContent ?? null}</EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <DataVisualizerDataViewManagement currentDataView={currentDataView} />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
+          <EuiFlexItem grow={false}>{headerContent ?? null}</EuiFlexItem>
+          <EuiFlexItem grow={false} css={maxInlineSizeStyles}>
+            <EuiFlexGroup css={maxInlineSizeStyles} gutterSize="s" alignItems="center">
               {hasValidTimeField && (
                 <EuiFlexItem grow={false}>
                   <FullTimeRangeSelector
@@ -544,7 +542,7 @@ export const IndexDataVisualizerView: FC<IndexDataVisualizerViewProps> = ({
                   />
                 </EuiFlexItem>
               )}
-              <EuiFlexItem grow={false}>
+              <EuiFlexItem grow={false} css={maxInlineSizeStyles}>
                 <DatePickerWrapper
                   isAutoRefreshOnly={!hasValidTimeField}
                   showRefresh={!hasValidTimeField}