[Security] Add Timeline improvements (#71506)

x-pack/plugins/security_solution/cypress/tasks/timeline.ts

@@ -27,6 +27,8 @@ import {
 
 import { drag, drop } from '../tasks/common';
 
+export const hostExistsQuery = 'host.name: *';
+
 export const addDescriptionToTimeline = (description: string) => {
   cy.get(TIMELINE_DESCRIPTION).type(`${description}{enter}`);
   cy.get(DATE_PICKER_APPLY_BUTTON_TIMELINE).click().invoke('text').should('not.equal', 'Updating');
@@ -77,6 +79,7 @@ export const openTimelineSettings = () => {
 };
 
 export const populateTimeline = () => {
+  executeTimelineKQL(hostExistsQuery);
   cy.get(SERVER_SIDE_EVENT_COUNT)
     .invoke('text')
     .then((strCount) => {

x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/__snapshots__/providers.test.tsx.snap

@@ -9,10 +9,11 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
     <Styled(EuiFlexItem)
       grow={false}
     >
-      <styled.div>
-        <AddDataProviderPopover
-          browserFields={Object {}}
-          timelineId="foo"
+      <styled.div
+        hideBadge={true}
+      >
+        <AndOrBadge
+          type="or"
         />
       </styled.div>
     </Styled(EuiFlexItem)>
@@ -58,7 +59,9 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
     <Styled(EuiFlexItem)
       grow={false}
     >
-      <styled.div>
+      <styled.div
+        hideBadge={false}
+      >
         <AndOrBadge
           type="or"
         />
@@ -106,7 +109,9 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
     <Styled(EuiFlexItem)
       grow={false}
     >
-      <styled.div>
+      <styled.div
+        hideBadge={false}
+      >
         <AndOrBadge
           type="or"
         />
@@ -154,7 +159,9 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
     <Styled(EuiFlexItem)
       grow={false}
     >
-      <styled.div>
+      <styled.div
+        hideBadge={false}
+      >
         <AndOrBadge
           type="or"
         />
@@ -202,7 +209,9 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
     <Styled(EuiFlexItem)
       grow={false}
     >
-      <styled.div>
+      <styled.div
+        hideBadge={false}
+      >
         <AndOrBadge
           type="or"
         />
@@ -250,7 +259,9 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
     <Styled(EuiFlexItem)
       grow={false}
     >
-      <styled.div>
+      <styled.div
+        hideBadge={false}
+      >
         <AndOrBadge
           type="or"
         />
@@ -298,7 +309,9 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
     <Styled(EuiFlexItem)
       grow={false}
     >
-      <styled.div>
+      <styled.div
+        hideBadge={false}
+      >
         <AndOrBadge
           type="or"
         />
@@ -346,7 +359,9 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
     <Styled(EuiFlexItem)
       grow={false}
     >
-      <styled.div>
+      <styled.div
+        hideBadge={false}
+      >
         <AndOrBadge
           type="or"
         />
@@ -394,7 +409,9 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
     <Styled(EuiFlexItem)
       grow={false}
     >
-      <styled.div>
+      <styled.div
+        hideBadge={false}
+      >
         <AndOrBadge
           type="or"
         />
@@ -442,7 +459,9 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
     <Styled(EuiFlexItem)
       grow={false}
     >
-      <styled.div>
+      <styled.div
+        hideBadge={false}
+      >
         <AndOrBadge
           type="or"
         />
@@ -490,7 +509,9 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
     <Styled(EuiFlexItem)
       grow={false}
     >
-      <styled.div>
+      <styled.div
+        hideBadge={false}
+      >
         <AndOrBadge
           type="or"
         />
@@ -527,6 +548,10 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
         )
       </styled.span>
     </Styled(EuiFlexItem)>
+    <AddDataProviderPopover
+      browserFields={Object {}}
+      timelineId="foo"
+    />
   </EuiFlexGroup>
 </div>
 `;

x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/add_data_provider_popover.tsx

@@ -7,6 +7,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import {
   EuiButton,
+  EuiButtonEmpty,
   EuiContextMenu,
   EuiText,
   EuiPopover,
@@ -139,21 +140,33 @@ const AddDataProviderPopoverComponent: React.FC<AddDataProviderPopoverProps> = (
     [browserFields, handleDataProviderEdited, timelineId, timelineType]
   );
 
-  const button = useMemo(
-    () => (
-      <EuiButton
+  const button = useMemo(() => {
+    if (timelineType === TimelineType.template) {
+      return (
+        <EuiButton
+          size="s"
+          onClick={handleOpenPopover}
+          data-test-subj="addFilter"
+          iconType="arrowDown"
+          fill
+          iconSide="right"
+        >
+          <EuiText size="s">{ADD_FIELD_LABEL}</EuiText>
+        </EuiButton>
+      );
+    }
+
+    return (
+      <EuiButtonEmpty
         size="s"
         onClick={handleOpenPopover}
         data-test-subj="addFilter"
-        iconType="arrowDown"
-        fill
         iconSide="right"
       >
-        <EuiText size="s">{ADD_FIELD_LABEL}</EuiText>
-      </EuiButton>
-    ),
-    [handleOpenPopover]
-  );
+        <EuiText size="s">{`+ ${ADD_FIELD_LABEL}`}</EuiText>
+      </EuiButtonEmpty>
+    );
+  }, [handleOpenPopover, timelineType]);
 
   const content = useMemo(() => {
     if (timelineType === TimelineType.template) {

x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/providers.tsx

@@ -82,10 +82,10 @@ const Parens = styled.span`
   `}
 `;
 
-const AndOrBadgeContainer = styled.div`
-  width: 121px;
-  display: flex;
-  justify-content: flex-end;
+const AndOrBadgeContainer = styled.div<{ hideBadge: boolean }>`
+  span {
+    visibility: ${({ hideBadge }) => (hideBadge ? 'hidden' : 'inherit')};
+  }
 `;
 
 const LastAndOrBadgeInGroup = styled.div`
@@ -113,10 +113,6 @@ const ParensContainer = styled(EuiFlexItem)`
   align-self: center;
 `;
 
-const AddDataProviderContainer = styled.div`
-  padding-right: 9px;
-`;
-
 const getDataProviderValue = (dataProvider: DataProvidersAnd) =>
   dataProvider.queryMatch.displayValue ?? dataProvider.queryMatch.value;
 
@@ -152,15 +148,9 @@ export const Providers = React.memo<Props>(
 
             <EuiFlexGroup alignItems="center" gutterSize="none">
               <OrFlexItem grow={false}>
-                {groupIndex === 0 ? (
-                  <AddDataProviderContainer>
-                    <AddDataProviderPopover browserFields={browserFields} timelineId={timelineId} />
-                  </AddDataProviderContainer>
-                ) : (
-                  <AndOrBadgeContainer>
-                    <AndOrBadge type="or" />
-                  </AndOrBadgeContainer>
-                )}
+                <AndOrBadgeContainer hideBadge={groupIndex === 0}>
+                  <AndOrBadge type="or" />
+                </AndOrBadgeContainer>
               </OrFlexItem>
               <ParensContainer grow={false}>
                 <Parens>{'('}</Parens>
@@ -300,6 +290,9 @@ export const Providers = React.memo<Props>(
               <ParensContainer grow={false}>
                 <Parens>{')'}</Parens>
               </ParensContainer>
+              {groupIndex === dataProviderGroups.length - 1 && (
+                <AddDataProviderPopover browserFields={browserFields} timelineId={timelineId} />
+              )}
             </EuiFlexGroup>
           </Fragment>
         ))}

x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx

@@ -266,7 +266,9 @@ const makeMapStateToProps = () => {
 
     // return events on empty search
     const kqlQueryExpression =
-      isEmpty(dataProviders) && isEmpty(kqlQueryTimeline) ? ' ' : kqlQueryTimeline;
+      isEmpty(dataProviders) && isEmpty(kqlQueryTimeline) && timelineType === 'template'
+        ? ' '
+        : kqlQueryTimeline;
     return {
       columns,
       dataProviders,