[SIEM] Table Styles & Markup Tweaks

x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.test.tsx

@@ -12,7 +12,6 @@ import { MockedProvider } from 'react-apollo/test-utils';
 import { mockBrowserFields, mocksSource } from '../../containers/source/mock';
 import { TestProviders } from '../../mock';
 import { mockDataProviders } from '../timeline/data_providers/mock/mock_data_providers';
-
 import { DragDropContextWrapper } from './drag_drop_context_wrapper';
 import { DraggableWrapper } from './draggable_wrapper';
 
@@ -50,14 +49,12 @@ describe('DraggableWrapper', () => {
   });
 
   describe('text truncation styling', () => {
-    test('it applies text truncation styling when a width IS specified (implicit: and the user is not dragging)', () => {
-      const width = '100px';
-
+    test('it applies text truncation styling when truncate IS specified (implicit: and the user is not dragging)', () => {
       const wrapper = mount(
         <TestProviders>
           <MockedProvider mocks={mocksSource} addTypename={false}>
             <DragDropContextWrapper browserFields={mockBrowserFields}>
-              <DraggableWrapper dataProvider={dataProvider} width={width} render={() => message} />
+              <DraggableWrapper dataProvider={dataProvider} render={() => message} truncate />
             </DragDropContextWrapper>
           </MockedProvider>
         </TestProviders>
@@ -68,7 +65,7 @@ describe('DraggableWrapper', () => {
       );
     });
 
-    test('it does NOT apply text truncation styling when a width is NOT specified', () => {
+    test('it does NOT apply text truncation styling when truncate is NOT specified', () => {
       const wrapper = mount(
         <TestProviders>
           <MockedProvider mocks={mocksSource} addTypename={false}>

x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx

@@ -20,7 +20,6 @@ import { dragAndDropActions } from '../../store/drag_and_drop';
 import { DataProvider } from '../timeline/data_providers/data_provider';
 import { STATEFUL_EVENT_CSS_CLASS_NAME } from '../timeline/helpers';
 import { TruncatableText } from '../truncatable_text';
-
 import { getDraggableId, getDroppableId } from './helpers';
 
 // As right now, we do not know what we want there, we will keep it as a placeholder
@@ -29,41 +28,28 @@ export const DragEffects = styled.div``;
 DragEffects.displayName = 'DragEffects';
 
 const Wrapper = styled.div`
-  .euiPageBody & {
-    display: inline-block;
-  }
+  display: inline-block;
+  max-width: 100%;
 `;
 
 Wrapper.displayName = 'Wrapper';
 
 const ProviderContainer = styled.div<{ isDragging: boolean }>`
   ${({ theme, isDragging }) => css`
-    // ALL DRAGGABLES
-
     &,
     &::before,
     &::after {
       transition: background ${theme.eui.euiAnimSpeedFast} ease,
         color ${theme.eui.euiAnimSpeedFast} ease;
     }
 
-    .euiBadge,
-    .euiBadge__text {
-      cursor: grab;
-    }
-
-    // PAGE DRAGGABLES
-
     ${!isDragging &&
       `
-      .euiPageBody & {
-        z-index: ${theme.eui.euiZLevel0} !important;
-      }
-
-      {
+      & {
         border-radius: 2px;
         padding: 0 4px 0 8px;
         position: relative;
+        z-index: ${theme.eui.euiZLevel0} !important;
 
         &::before {
           background-image: linear-gradient(
@@ -86,6 +72,14 @@ const ProviderContainer = styled.div<{ isDragging: boolean }>`
         }
       }
 
+      &:hover {
+        &,
+        & .euiBadge,
+        & .euiBadge__text {
+          cursor: move; //Fallback for IE11
+          cursor: grab;
+        }
+      }
 
       .${STATEFUL_EVENT_CSS_CLASS_NAME}:hover &,
       tr:hover & {
@@ -112,7 +106,8 @@ const ProviderContainer = styled.div<{ isDragging: boolean }>`
         background-color: ${theme.eui.euiColorPrimary};
 
         &,
-        & a {
+        & a,
+        & a:hover {
           color: ${theme.eui.euiColorEmptyShade};
         }
 
@@ -131,9 +126,10 @@ const ProviderContainer = styled.div<{ isDragging: boolean }>`
 
     ${isDragging &&
       `
-      .euiPageBody & {
+      & {
         z-index: ${theme.eui.euiZLevel9} !important;
-      `}
+      }
+    `}
   `}
 `;
 
@@ -147,7 +143,7 @@ interface OwnProps {
     provided: DraggableProvided,
     state: DraggableStateSnapshot
   ) => React.ReactNode;
-  width?: string;
+  truncate?: boolean;
 }
 
 interface DispatchProps {
@@ -166,10 +162,10 @@ type Props = OwnProps & DispatchProps;
  * data provider associated with the item being dropped
  */
 class DraggableWrapperComponent extends React.Component<Props> {
-  public shouldComponentUpdate = ({ dataProvider, render, width }: Props) =>
+  public shouldComponentUpdate = ({ dataProvider, render, truncate }: Props) =>
     isEqual(dataProvider, this.props.dataProvider) &&
     render !== this.props.render &&
-    width === this.props.width
+    truncate === this.props.truncate
       ? false
       : true;
 
@@ -186,7 +182,7 @@ class DraggableWrapperComponent extends React.Component<Props> {
   }
 
   public render() {
-    const { dataProvider, render, width } = this.props;
+    const { dataProvider, render, truncate } = this.props;
 
     return (
       <Wrapper data-test-subj="draggableWrapperDiv">
@@ -198,34 +194,28 @@ class DraggableWrapperComponent extends React.Component<Props> {
                 index={0}
                 key={getDraggableId(dataProvider.id)}
               >
-                {(provided, snapshot) => {
-                  return (
-                    <ProviderContainer
-                      {...provided.draggableProps}
-                      {...provided.dragHandleProps}
-                      innerRef={provided.innerRef}
-                      data-test-subj="providerContainer"
-                      isDragging={snapshot.isDragging}
-                      style={{
-                        ...provided.draggableProps.style,
-                      }}
-                    >
-                      {width != null && !snapshot.isDragging ? (
-                        <TruncatableText
-                          data-test-subj="draggable-truncatable-content"
-                          size="xs"
-                          width={width}
-                        >
-                          {render(dataProvider, provided, snapshot)}
-                        </TruncatableText>
-                      ) : (
-                        <span data-test-subj={`draggable-content-${dataProvider.queryMatch.field}`}>
-                          {render(dataProvider, provided, snapshot)}
-                        </span>
-                      )}
-                    </ProviderContainer>
-                  );
-                }}
+                {(provided, snapshot) => (
+                  <ProviderContainer
+                    {...provided.draggableProps}
+                    {...provided.dragHandleProps}
+                    innerRef={provided.innerRef}
+                    data-test-subj="providerContainer"
+                    isDragging={snapshot.isDragging}
+                    style={{
+                      ...provided.draggableProps.style,
+                    }}
+                  >
+                    {truncate && !snapshot.isDragging ? (
+                      <TruncatableText data-test-subj="draggable-truncatable-content">
+                        {render(dataProvider, provided, snapshot)}
+                      </TruncatableText>
+                    ) : (
+                      <span data-test-subj={`draggable-content-${dataProvider.queryMatch.field}`}>
+                        {render(dataProvider, provided, snapshot)}
+                      </span>
+                    )}
+                  </ProviderContainer>
+                )}
               </Draggable>
               {droppableProvided.placeholder}
             </div>

x-pack/legacy/plugins/siem/public/components/drag_and_drop/droppable_wrapper.tsx

@@ -4,13 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { rgba } from 'polished';
 import * as React from 'react';
 import { Droppable } from 'react-beautiful-dnd';
 import { pure } from 'recompose';
 import styled from 'styled-components';
 
-import { THIRTY_PERCENT_ALPHA_HEX_SUFFIX, TWENTY_PERCENT_ALPHA_HEX_SUFFIX } from './helpers';
-
 interface Props {
   children?: React.ReactNode;
   droppableId: string;
@@ -34,22 +33,22 @@ const ReactDndDropTarget = styled.div<{ isDraggingOver: boolean; height: string
       ? `
     .drop-and-provider-timeline {
       &:hover {
-        background-color: ${props.theme.eui.euiColorSuccess}${THIRTY_PERCENT_ALPHA_HEX_SUFFIX};
+        background-color: ${rgba(props.theme.eui.euiColorSuccess, 0.3)};
       }
     }
     .drop-and-provider-timeline:hover {
-        background-color: ${props.theme.eui.euiColorSuccess}${THIRTY_PERCENT_ALPHA_HEX_SUFFIX};
+        background-color: ${rgba(props.theme.eui.euiColorSuccess, 0.3)};
     }
   > div.timeline-drop-area-empty {
      color: ${props.theme.eui.euiColorSuccess}
-     background-color: ${props.theme.eui.euiColorSuccess}${TWENTY_PERCENT_ALPHA_HEX_SUFFIX};
+     background-color: ${rgba(props.theme.eui.euiColorSuccess, 0.2)};
 
      & .euiTextColor--subdued {
       color: ${props.theme.eui.euiColorSuccess};
      }
   }
   > div.timeline-drop-area {
-    background-color: ${props.theme.eui.euiColorSuccess}${TWENTY_PERCENT_ALPHA_HEX_SUFFIX};
+    background-color: ${rgba(props.theme.eui.euiColorSuccess, 0.2)};
     .provider-item-filter-container div:first-child{
       // Override dragNdrop beautiful so we do not have our droppable moving around for no good reason
       transform: none !important;
@@ -86,7 +85,6 @@ const ReactDndDropTarget = styled.div<{ isDraggingOver: boolean; height: string
     }
   }
 `;
-
 ReactDndDropTarget.displayName = 'ReactDndDropTarget';
 
 export const DroppableWrapper = pure<Props>(
@@ -118,5 +116,4 @@ export const DroppableWrapper = pure<Props>(
     </Droppable>
   )
 );
-
 DroppableWrapper.displayName = 'DroppableWrapper';

x-pack/legacy/plugins/siem/public/components/drag_and_drop/helpers.ts

@@ -224,12 +224,3 @@ export const DRAG_TYPE_FIELD = 'drag-type-field';
 
 /** This class is added to the document body while dragging */
 export const IS_DRAGGING_CLASS_NAME = 'is-dragging';
-
-/** A hex alpha channel suffix representing 10% for the `AA` in `#RRGGBBAA` */
-export const TEN_PERCENT_ALPHA_HEX_SUFFIX = '1A';
-
-/** A hex alpha channel suffix representing 20% for the `AA` in `#RRGGBBAA` */
-export const TWENTY_PERCENT_ALPHA_HEX_SUFFIX = '33';
-
-/** A hex alpha channel suffix representing 30% for the `AA` in `#RRGGBBAA` */
-export const THIRTY_PERCENT_ALPHA_HEX_SUFFIX = '4d';

x-pack/legacy/plugins/siem/public/components/draggables/field_badge/index.tsx

@@ -4,54 +4,37 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import {
-  EuiBadge,
-  EuiFlexGroup,
-  EuiFlexItem,
-  // @ts-ignore
-  EuiHighlight,
-} from '@elastic/eui';
+import { rgba } from 'polished';
 import * as React from 'react';
 import { pure } from 'recompose';
-import styled from 'styled-components';
-
-const FieldBadgeFlexGroup = styled(EuiFlexGroup)`
-  height: 38px;
-`;
-
-FieldBadgeFlexGroup.displayName = 'FieldBadgeFlexGroup';
-
-const FieldBadgeFlexItem = styled(EuiFlexItem)`
-  font-weight: bold;
-`;
-
-FieldBadgeFlexItem.displayName = 'FieldBadgeFlexItem';
-
-/**
- * The name of a (draggable) field
- */
-export const FieldNameContainer = styled.div`
-  padding: 5px;
-  &:hover {
-    transition: background-color 0.7s ease;
-    background-color: #000;
-    color: #fff;
-  }
+import styled, { css } from 'styled-components';
+
+const Field = styled.div`
+  ${({ theme }) => css`
+    background-color: ${theme.eui.euiColorEmptyShade};
+    border: ${theme.eui.euiBorderThin};
+    box-shadow: 0 2px 2px -1px ${rgba(theme.eui.euiColorMediumShade, 0.3)},
+      0 1px 5px -2px ${rgba(theme.eui.euiColorMediumShade, 0.3)};
+    font-size: ${theme.eui.euiFontSizeXS};
+    font-weight: ${theme.eui.euiFontWeightSemiBold};
+    line-height: ${theme.eui.euiLineHeight};
+    padding: ${theme.eui.paddingSizes.xs};
+  `}
 `;
-
-FieldNameContainer.displayName = 'FieldNameContainer';
+Field.displayName = 'Field';
 
 /**
  * Renders a field (e.g. `event.action`) as a draggable badge
  */
-export const DraggableFieldBadge = pure<{ fieldId: string }>(({ fieldId }) => (
-  <EuiBadge color="#000">
-    <FieldBadgeFlexGroup alignItems="center" justifyContent="center" gutterSize="none">
-      <FieldBadgeFlexItem data-test-subj="field" grow={false}>
-        {fieldId}
-      </FieldBadgeFlexItem>
-    </FieldBadgeFlexGroup>
-  </EuiBadge>
-));
 
+// Passing the styles directly to the component because the width is
+// being calculated and is recommended by Styled Components for performance
+// https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
+export const DraggableFieldBadge = pure<{ fieldId: string; fieldWidth?: string }>(
+  ({ fieldId, fieldWidth }) => (
+    <Field data-test-subj="field" style={{ width: fieldWidth }}>
+      {fieldId}
+    </Field>
+  )
+);
 DraggableFieldBadge.displayName = 'DraggableFieldBadge';