[Background search] Migrate custom SplitButton to EuiSplitButton

src/platform/plugins/shared/unified_search/moon.yml

@@ -53,7 +53,6 @@ dependsOn:
   - '@kbn/field-utils'
   - '@kbn/esql-types'
   - '@kbn/background-search'
-  - '@kbn/split-button'
   - '@kbn/cps'
   - '@kbn/css-utils'
   - '@kbn/kql'

src/platform/plugins/shared/unified_search/public/query_string_input/query_bar_top_row.tsx

@@ -43,6 +43,7 @@ import {
   EuiButton,
   EuiButtonIcon,
   EuiIconTip,
+  EuiSplitButton,
   useEuiTheme,
   type EuiTimeZoneDisplayProps,
 } from '@elastic/eui';
@@ -53,7 +54,6 @@ import { UI_SETTINGS } from '@kbn/data-plugin/common';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import type { ESQLControlVariable, ESQLQueryStats } from '@kbn/esql-types';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
-import { SplitButton } from '@kbn/split-button';
 import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
 import { QueryStringInput, FilterButtonGroup } from '@kbn/kql/public';
 import type { SuggestionsAbstraction, SuggestionsListSize } from '@kbn/kql/public';
@@ -75,8 +75,6 @@ import { FilterBarContextProvider } from '../filter_bar/filter_bar_context';
 /** Feature flag key for the new DateRangePicker. Falls back to `true` (new picker). */
 const DATE_RANGE_PICKER_FEATURE_FLAG = 'unifiedSearch.newDateRangePickerEnabled';
 
-const BUTTON_MIN_WIDTH = 108;
-
 const SuperDatePicker = React.memo(
   EuiSuperDatePicker as any
 ) as unknown as typeof EuiSuperDatePicker;
@@ -863,25 +861,27 @@ export const QueryBarTopRow = React.memo(
 
       if (props.useBackgroundSearchButton) {
         return (
-          <SplitButton
-            aria-label={buttonLabelCancel}
-            color="text"
-            data-test-subj="queryCancelButton"
-            iconType="cross"
-            isMainButtonLoading={isCancelling}
-            isDisabled={isCancelling}
-            isSecondaryButtonDisabled={!canSendToBackground}
-            isSecondaryButtonLoading={isSendingToBackground}
-            onClick={onClickCancelButton}
-            onSecondaryButtonClick={onClickSendToBackground}
-            secondaryButtonAriaLabel={strings.getSendToBackgroundLabel()}
-            secondaryButtonIcon="backgroundTask"
-            secondaryButtonTitle={strings.getSendToBackgroundLabel()}
-            size="s"
-            minWidth={BUTTON_MIN_WIDTH}
-          >
-            {buttonLabelCancel}
-          </SplitButton>
+          <EuiSplitButton color="text" size="s">
+            <EuiSplitButton.ActionPrimary
+              aria-label={buttonLabelCancel}
+              iconType="cross"
+              isLoading={isCancelling}
+              isDisabled={isCancelling}
+              onClick={onClickCancelButton}
+              data-test-subj="queryCancelButton"
+            >
+              {buttonLabelCancel}
+            </EuiSplitButton.ActionPrimary>
+            <EuiSplitButton.ActionSecondary
+              isLoading={isSendingToBackground}
+              isDisabled={!canSendToBackground}
+              onClick={onClickSendToBackground}
+              title={strings.getSendToBackgroundLabel()}
+              aria-label={strings.getSendToBackgroundLabel()}
+              iconType="backgroundTask"
+              data-test-subj="queryCancelButton-secondary-button"
+            />
+          </EuiSplitButton>
         );
       }
 
@@ -955,25 +955,27 @@ export const QueryBarTopRow = React.memo(
       } = getSubmitButtonProps();
 
       const updateButton = props.useBackgroundSearchButton ? (
-        <SplitButton
-          aria-label={buttonAriaLabel}
-          color={buttonColor}
-          data-test-subj="querySubmitButton"
-          iconType={buttonIcon}
-          isDisabled={isDateRangeInvalid || props.isDisabled}
-          isLoading={props.isLoading}
-          isSecondaryButtonDisabled={!canSendToBackground}
-          isSecondaryButtonLoading={isSendingToBackground}
-          onClick={onClickSubmitButton}
-          onSecondaryButtonClick={onClickSendToBackground}
-          secondaryButtonAriaLabel={strings.getSendToBackgroundLabel()}
-          secondaryButtonIcon="backgroundTask"
-          secondaryButtonTitle={strings.getSendToBackgroundLabel()}
-          size="s"
-          minWidth={BUTTON_MIN_WIDTH}
-        >
-          {buttonText}
-        </SplitButton>
+        <EuiSplitButton color={buttonColor} size="s">
+          <EuiSplitButton.ActionPrimary
+            iconType={buttonIcon}
+            isLoading={props.isLoading}
+            isDisabled={isDateRangeInvalid || props.isDisabled}
+            onClick={onClickSubmitButton}
+            aria-label={buttonAriaLabel}
+            data-test-subj="querySubmitButton"
+          >
+            {buttonText}
+          </EuiSplitButton.ActionPrimary>
+          <EuiSplitButton.ActionSecondary
+            iconType="backgroundTask"
+            isLoading={isSendingToBackground}
+            isDisabled={!canSendToBackground}
+            onClick={onClickSendToBackground}
+            title={strings.getSendToBackgroundLabel()}
+            aria-label={strings.getSendToBackgroundLabel()}
+            data-test-subj="querySubmitButton-secondary-button"
+          />
+        </EuiSplitButton>
       ) : (
         <EuiSuperUpdateButton
           iconType={buttonIcon}

src/platform/plugins/shared/unified_search/tsconfig.json

@@ -41,7 +41,6 @@
     "@kbn/field-utils",
     "@kbn/esql-types",
     "@kbn/background-search",
-    "@kbn/split-button",
     "@kbn/cps",
     "@kbn/css-utils",
     "@kbn/kql",