[Security Solution] - Timeline UI refactor

src/plugins/unified_search/public/filter_bar/filter_bar.tsx

@@ -55,6 +55,8 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) {
       gutterSize="none" // We use `gap` in the styles instead for better truncation of badges
       alignItems="center"
       tabIndex={-1}
+      data-test-subj="filter-items-group"
+      className={`filter-items-group ${props.className ?? ''}`}
     >
       {props.prepend}
       <FilterItems

x-pack/plugins/security_solution/public/common/components/and_or_badge/rounded_badge.tsx

@@ -22,7 +22,8 @@ const RoundBadge = styled(EuiBadge)`
   margin: 0 5px 0 5px;
   padding: 7px 6px 4px 6px;
   user-select: none;
-  width: 34px;
+  width: 40px;
+  height: 40px;
   .euiBadge__content {
     position: relative;
     top: -1px;

x-pack/plugins/security_solution/public/common/components/drag_and_drop/drag_drop_context_wrapper.tsx

@@ -7,14 +7,13 @@
 
 import { noop, pick } from 'lodash/fp';
 import React, { useCallback, useMemo } from 'react';
-import type { DropResult } from '@hello-pangea/dnd';
+import type { DragStart, DropResult } from '@hello-pangea/dnd';
 import { DragDropContext } from '@hello-pangea/dnd';
 import { useDispatch } from 'react-redux';
 import type { Dispatch } from 'redux';
 import deepEqual from 'fast-deep-equal';
 import { IS_DRAGGING_CLASS_NAME } from '@kbn/securitysolution-t-grid';
 
-import type { BeforeCapture } from './drag_drop_context';
 import type { BrowserFields } from '../../containers/source';
 import { dragAndDropSelectors } from '../../store';
 import { timelineSelectors } from '../../../timelines/store/timeline';
@@ -151,8 +150,9 @@ export const DragDropContextWrapperComponent: React.FC<Props> = ({ browserFields
     },
     [activeTimelineDataProviders, browserFields, dataProviders, dispatch, onAddedToTimeline]
   );
+
   return (
-    <DragDropContext onDragEnd={onDragEnd} onBeforeCapture={onBeforeCapture} sensors={sensors}>
+    <DragDropContext onBeforeDragStart={onBeforeDragStart} onDragEnd={onDragEnd} sensors={sensors}>
       {children}
     </DragDropContext>
   );
@@ -168,12 +168,12 @@ export const DragDropContextWrapper = React.memo(
 
 DragDropContextWrapper.displayName = 'DragDropContextWrapper';
 
-const onBeforeCapture = (before: BeforeCapture) => {
-  if (!draggableIsField(before)) {
+const onBeforeDragStart = (start: DragStart) => {
+  if (!draggableIsField(start)) {
     document.body.classList.add(IS_DRAGGING_CLASS_NAME);
   }
 
-  if (draggableIsField(before)) {
+  if (draggableIsField(start)) {
     document.body.classList.add(IS_TIMELINE_FIELD_DRAGGING_CLASS_NAME);
   }
 };

x-pack/plugins/security_solution/public/common/components/exit_full_screen/index.tsx

@@ -7,16 +7,11 @@
 
 import { EuiButton, EuiWindowEvent } from '@elastic/eui';
 import React, { useCallback } from 'react';
-import styled from 'styled-components';
 
 import * as i18n from './translations';
 
 export const EXIT_FULL_SCREEN_CLASS_NAME = 'exit-full-screen';
 
-const StyledEuiButton = styled(EuiButton)`
-  margin: ${({ theme }) => theme.eui.euiSizeS};
-`;
-
 interface Props {
   fullScreen: boolean;
   setFullScreen: (fullScreen: boolean) => void;
@@ -45,16 +40,17 @@ const ExitFullScreenComponent: React.FC<Props> = ({ fullScreen, setFullScreen })
   return (
     <>
       <EuiWindowEvent event="keydown" handler={onKeyDown} />
-      <StyledEuiButton
+      <EuiButton
         className={EXIT_FULL_SCREEN_CLASS_NAME}
         data-test-subj="exit-full-screen"
         fullWidth={false}
         iconType="fullScreen"
+        fill
         isDisabled={!fullScreen}
         onClick={exitFullScreen}
       >
         {i18n.EXIT_FULL_SCREEN}
-      </StyledEuiButton>
+      </EuiButton>
     </>
   );
 };

x-pack/plugins/security_solution/public/common/components/header_section/index.tsx

@@ -108,7 +108,7 @@ const HeaderSectionComponent: React.FC<HeaderSectionProps> = ({
   stackHeader,
   subtitle,
   title,
-  titleSize = 'm',
+  titleSize = 'l',
   toggleQuery,
   toggleStatus = true,
   tooltip,
@@ -173,7 +173,6 @@ const HeaderSectionComponent: React.FC<HeaderSectionProps> = ({
                           <span className="eui-textBreakNormal">{title}</span>
                           {tooltip && (
                             <>
-                              {' '}
                               <EuiIconTip
                                 color="subdued"
                                 title={tooltipTitle}

x-pack/plugins/security_solution/public/common/components/inspect/index.tsx

@@ -40,7 +40,7 @@ interface InspectButtonProps {
   onCloseInspect?: () => void;
   queryId: string;
   showInspectButton?: boolean;
-  title: string | React.ReactElement | React.ReactNode;
+  title?: string | React.ReactElement | React.ReactNode;
 }
 
 const InspectButtonComponent: React.FC<InspectButtonProps> = ({
@@ -80,9 +80,6 @@ const InspectButtonComponent: React.FC<InspectButtonProps> = ({
           className={BUTTON_CLASS}
           aria-label={i18n.INSPECT}
           data-test-subj="inspect-empty-button"
-          color="text"
-          iconSide="left"
-          iconType="inspect"
           isDisabled={isButtonDisabled}
           isLoading={loading}
           onClick={handleClick}

x-pack/plugins/security_solution/public/common/components/query_bar/index.tsx

@@ -167,7 +167,6 @@ export const QueryBar = memo<QueryBarComponentProps>(
         savedQuery={savedQuery}
         displayStyle={displayStyle}
         isDisabled={isDisabled}
-        hideTextBasedRunQueryLabel
       />
     );
   }

x-pack/plugins/security_solution/public/common/components/sourcerer/alerts_sourcerer.test.tsx

@@ -0,0 +1,139 @@
+/*
+ * 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 React from 'react';
+
+import { Sourcerer } from '.';
+import { sourcererModel } from '../../store/sourcerer';
+import {
+  createSecuritySolutionStorageMock,
+  kibanaObservable,
+  mockGlobalState,
+  SUB_PLUGINS_REDUCER,
+  TestProviders,
+} from '../../mock';
+import { createStore } from '../../store';
+import { useSourcererDataView } from '../../containers/sourcerer';
+import { useSignalHelpers } from '../../containers/sourcerer/use_signal_helpers';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+const mockDispatch = jest.fn();
+
+jest.mock('../../containers/sourcerer');
+jest.mock('../../containers/sourcerer/use_signal_helpers');
+const mockUseUpdateDataView = jest.fn().mockReturnValue(() => true);
+jest.mock('./use_update_data_view', () => ({
+  useUpdateDataView: () => mockUseUpdateDataView,
+}));
+jest.mock('react-redux', () => {
+  const original = jest.requireActual('react-redux');
+
+  return {
+    ...original,
+    useDispatch: () => mockDispatch,
+  };
+});
+
+jest.mock('@kbn/kibana-react-plugin/public', () => {
+  const original = jest.requireActual('@kbn/kibana-react-plugin/public');
+
+  return {
+    ...original,
+    toMountPoint: jest.fn(),
+  };
+});
+
+const mockUpdateUrlParam = jest.fn();
+jest.mock('../../utils/global_query_string', () => {
+  const original = jest.requireActual('../../utils/global_query_string');
+
+  return {
+    ...original,
+    useUpdateUrlParam: () => mockUpdateUrlParam,
+  };
+});
+
+let store: ReturnType<typeof createStore>;
+const sourcererDataView = {
+  indicesExist: true,
+  loading: false,
+};
+describe('sourcerer on alerts page or rules details page', () => {
+  const { storage } = createSecuritySolutionStorageMock();
+  store = createStore(mockGlobalState, SUB_PLUGINS_REDUCER, kibanaObservable, storage);
+  const testProps = {
+    scope: sourcererModel.SourcererScopeName.detections,
+  };
+
+  const pollForSignalIndexMock = jest.fn();
+
+  beforeEach(async () => {
+    jest.clearAllMocks();
+
+    (useSignalHelpers as jest.Mock).mockReturnValue({
+      pollForSignalIndex: pollForSignalIndexMock,
+      signalIndexNeedsInit: false,
+    });
+
+    (useSourcererDataView as jest.Mock).mockReturnValue({
+      ...sourcererDataView,
+      indicesExist: true,
+    });
+
+    render(
+      <TestProviders store={store}>
+        <Sourcerer {...testProps} />
+      </TestProviders>
+    );
+
+    fireEvent.click(screen.getByTestId('sourcerer-trigger'));
+    await waitFor(() => {
+      expect(screen.getByTestId('sourcerer-advanced-options-toggle')).toBeVisible();
+    });
+    fireEvent.click(screen.getByTestId('sourcerer-advanced-options-toggle'));
+  });
+
+  it('renders an alerts badge in sourcerer button', () => {
+    expect(screen.getByTestId('sourcerer-advanced-options-toggle')).toHaveTextContent(
+      /Advanced options/
+    );
+  });
+
+  it('renders a callout', () => {
+    expect(screen.getByTestId('sourcerer-callout')).toHaveTextContent(
+      'Data view cannot be modified on this page'
+    );
+  });
+
+  it('disable data view selector', () => {
+    expect(screen.getByTestId('sourcerer-select')).toBeDisabled();
+  });
+
+  it('data view selector is default to Security Data View', () => {
+    expect(screen.getByTestId('sourcerer-select')).toHaveTextContent(/security data view/i);
+  });
+
+  it('renders an alert badge in data view selector', () => {
+    expect(screen.getByTestId('security-alerts-option-badge')).toHaveTextContent('Alerts');
+  });
+
+  it('disable index pattern selector', () => {
+    expect(screen.getByTestId('sourcerer-combo-box')).toHaveAttribute('disabled');
+  });
+
+  it('shows signal index as index pattern option', () => {
+    expect(screen.getByTestId('euiComboBoxPill')).toHaveTextContent('.siem-signals-spacename');
+  });
+
+  it('does not render reset button', () => {
+    expect(screen.queryByTestId('sourcerer-reset')).toBeFalsy();
+  });
+
+  it('does not render save button', () => {
+    expect(screen.queryByTestId('sourcerer-save')).toBeFalsy();
+  });
+});

x-pack/plugins/security_solution/public/common/components/sourcerer/helpers.tsx

@@ -10,6 +10,7 @@ import type { EuiSuperSelectOption, EuiFormRowProps } from '@elastic/eui';
 import { EuiIcon, EuiBadge, EuiButtonEmpty, EuiFormRow } from '@elastic/eui';
 import styled, { css } from 'styled-components';
 
+import { euiThemeVars } from '@kbn/ui-theme';
 import type { sourcererModel } from '../../store/sourcerer';
 
 import * as i18n from './translations';
@@ -23,7 +24,7 @@ export const StyledFormRow = styled(EuiFormRow)`
   max-width: none;
 `;
 
-export const StyledButton = styled(EuiButtonEmpty)`
+export const StyledButtonEmpty = styled(EuiButtonEmpty)`
   &:enabled:focus,
   &:focus {
     background-color: transparent;
@@ -43,7 +44,7 @@ export const PopoverContent = styled.div`
 `;
 
 export const StyledBadge = styled(EuiBadge)`
-  margin-left: 8px;
+  margin-left: ${euiThemeVars.euiSizeXS};
   &,
   .euiBadge__text {
     cursor: pointer;