review with Patryk

elastic · Nov 19, 2020 · 5f652dc · 5f652dc
1 parent 56fc275
commit 5f652dc
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 72 deletions.
diff --git a/x-pack/plugins/security_solution/cypress/integration/timeline_toggle_column.spec.ts b/x-pack/plugins/security_solution/cypress/integration/timeline_toggle_column.spec.ts
@@ -41,7 +41,6 @@ describe('toggle column in timeline', () => {
   it('displays a checked Toggle field checkbox for `@timestamp`, a default timeline column', () => {
     expandFirstTimelineEventDetails();
     cy.get(TIMESTAMP_TOGGLE_FIELD).should('be.checked');
-    expandFirstTimelineEventDetails();
   });
 
   it('displays an Unchecked Toggle field checkbox for `_id`, because it is NOT a default timeline column', () => {
@@ -53,22 +52,19 @@ describe('toggle column in timeline', () => {
     uncheckTimestampToggleField();
 
     cy.get(TIMESTAMP_HEADER_FIELD).should('not.exist');
-    expandFirstTimelineEventDetails();
   });
 
   it('adds the _id field to the timeline when the user checks the field', () => {
     expandFirstTimelineEventDetails();
     checkIdToggleField();
 
     cy.get(ID_HEADER_FIELD).should('exist');
-    expandFirstTimelineEventDetails();
   });
 
   it('adds the _id field to the timeline via drag and drop', () => {
     expandFirstTimelineEventDetails();
     dragAndDropIdToggleFieldToTimeline();
 
     cy.get(ID_HEADER_FIELD).should('exist');
-    expandFirstTimelineEventDetails();
   });
 });
diff --git a/x-pack/plugins/security_solution/package.json b/x-pack/plugins/security_solution/package.json
@@ -10,7 +10,7 @@
     "build-graphql-types": "node scripts/generate_types_from_graphql.js",
     "cypress:open": "../../../node_modules/.bin/cypress open --config-file ./cypress/cypress.json",
     "cypress:open-as-ci": "node ../../../scripts/functional_tests --config ../../test/security_solution_cypress/visual_config.ts",
-    "cypress:run": "../../../node_modules/.bin/cypress run --browser chrome --headless --spec ./cypress/integration/**/*.spec.ts --config-file ./cypress/cypress.json --reporter ../../../node_modules/cypress-multi-reporters --reporter-options configFile=./cypress/reporter_config.json; status=$?; ../../node_modules/.bin/mochawesome-merge ../../../target/kibana-security-solution/cypress/results/mochawesome*.json > ../../../target/kibana-security-solution/cypress/results/output.json; ../../../node_modules/.bin/marge ../../../target/kibana-security-solution/cypress/results/output.json --reportDir ../../../target/kibana-security-solution/cypress/results; mkdir -p ../../../target/junit && cp ../../../target/kibana-security-solution/cypress/results/*.xml ../../../target/junit/ && exit $status;",
+    "cypress:run": "../../../node_modules/.bin/cypress run --browser chrome --headless --spec ./cypress/integration/**/*.spec.ts --config-file ./cypress/cypress.json --reporter ../../../node_modules/cypress-multi-reporters --reporter-options configFile=./cypress/reporter_config.json; status=$?; ../../../node_modules/.bin/mochawesome-merge ../../../target/kibana-security-solution/cypress/results/mochawesome*.json > ../../../target/kibana-security-solution/cypress/results/output.json; ../../../node_modules/.bin/marge ../../../target/kibana-security-solution/cypress/results/output.json --reportDir ../../../target/kibana-security-solution/cypress/results; mkdir -p ../../../target/junit && cp ../../../target/kibana-security-solution/cypress/results/*.xml ../../../target/junit/ && exit $status;",
     "cypress:run-as-ci": "node --max-old-space-size=2048 ../../../scripts/functional_tests --config ../../test/security_solution_cypress/cli_config.ts",
     "test:generate": "node scripts/endpoint/resolver_generator"
   }

diff --git a/...plugins/security_solution/public/common/components/events_viewer/event_details_flyout.tsx b/...plugins/security_solution/public/common/components/events_viewer/event_details_flyout.tsx
@@ -10,7 +10,6 @@ import styled from 'styled-components';
 import deepEqual from 'fast-deep-equal';
 import { useDispatch } from 'react-redux';
 
-import { TimelineExpandedEventType } from '../../../../common/types/timeline';
 import { ColumnHeaderOptions } from '../../../timelines/store/timeline/model';
 import { timelineActions } from '../../../timelines/store/timeline';
 import { BrowserFields, DocValueFields } from '../../containers/source';
@@ -43,15 +42,13 @@ const EventDetailsFlyoutComponent: React.FC<EventDetailsFlyoutProps> = ({
   );
 
   const handleClearSelection = useCallback(() => {
-    if (expandedEvent.eventId) {
-      dispatch(
-        timelineActions.toggleExpandedEvent({
-          timelineId,
-          ...(expandedEvent as TimelineExpandedEventType),
-        })
-      );
-    }
-  }, [dispatch, expandedEvent, timelineId]);
+    dispatch(
+      timelineActions.toggleExpandedEvent({
+        timelineId,
+        event: {},
+      })
+    );
+  }, [dispatch, timelineId]);
 
   if (!expandedEvent.eventId) {
     return null;

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.tsx
@@ -69,7 +69,8 @@ const ActionsComponent: React.FC<Props> = ({
           <EuiButtonIcon
             aria-label={expanded ? i18n.COLLAPSE : i18n.EXPAND}
             data-test-subj="expand-event"
-            iconType={expanded ? 'eye' : 'eyeClosed'}
+            disabled={expanded}
+            iconType="arrowRight"
             id={eventId}
             onClick={onEventToggled}
           />

diff --git a/...ins/security_solution/public/timelines/components/timeline/body/events/stateful_event.tsx b/...ins/security_solution/public/timelines/components/timeline/body/events/stateful_event.tsx
@@ -116,9 +116,11 @@ const StatefulEventComponent: React.FC<Props> = ({
     dispatch(
       timelineActions.toggleExpandedEvent({
         timelineId,
-        eventId,
-        indexName,
-        loading: false,
+        event: {
+          eventId,
+          indexName,
+          loading: false,
+        },
       })
     );
 

diff --git a/x-pack/plugins/security_solution/public/timelines/store/timeline/actions.ts b/x-pack/plugins/security_solution/public/timelines/store/timeline/actions.ts
@@ -35,11 +35,11 @@ export const addNoteToEvent = actionCreator<{ id: string; noteId: string; eventI
   'ADD_NOTE_TO_EVENT'
 );
 
-export const toggleExpandedEvent = actionCreator<
-  TimelineExpandedEvent & {
-    timelineId: string;
-  }
->('TOGGLE_EXPANDED_EVENT');
+interface ToggleExpandedEvent {
+  timelineId: string;
+  event: TimelineExpandedEvent;
+}
+export const toggleExpandedEvent = actionCreator<ToggleExpandedEvent>('TOGGLE_EXPANDED_EVENT');
 
 export const upsertColumn = actionCreator<{
   column: ColumnHeaderOptions;

diff --git a/x-pack/plugins/security_solution/public/timelines/store/timeline/helpers.ts b/x-pack/plugins/security_solution/public/timelines/store/timeline/helpers.ts
@@ -115,45 +115,6 @@ export const addTimelineNoteToEvent = ({
   };
 };
 
-interface ToggleTimelineExpandedEventParams {
-  timelineId: string;
-  eventId: string;
-  indexName: string;
-  loading: boolean;
-  timelineById: TimelineById;
-}
-
-export const toggleTimelineExpandedEvent = ({
-  timelineId,
-  eventId,
-  indexName,
-  loading,
-  timelineById,
-}: ToggleTimelineExpandedEventParams): TimelineById => {
-  const timeline = timelineById[timelineId];
-  const existingExpandedEvent = timeline.expandedEvent;
-
-  let newExpandedEvent;
-
-  if (
-    existingExpandedEvent &&
-    existingExpandedEvent.eventId === eventId &&
-    existingExpandedEvent.loading === loading
-  ) {
-    newExpandedEvent = {};
-  } else {
-    newExpandedEvent = { eventId, indexName, loading };
-  }
-
-  return {
-    ...timelineById,
-    [timelineId]: {
-      ...timeline,
-      expandedEvent: newExpandedEvent,
-    },
-  };
-};
-
 interface AddTimelineParams {
   id: string;
   timeline: TimelineModel;

diff --git a/x-pack/plugins/security_solution/public/timelines/store/timeline/reducer.ts b/x-pack/plugins/security_solution/public/timelines/store/timeline/reducer.ts
@@ -74,7 +74,6 @@ import {
   setDeletedTimelineEvents,
   setLoadingTimelineEvents,
   setSelectedTimelineEvents,
-  toggleTimelineExpandedEvent,
   unPinTimelineEvent,
   updateExcludedRowRenderersIds,
   updateKqlFilterQueryDraft,
@@ -179,15 +178,15 @@ export const timelineReducer = reducerWithInitialState(initialTimelineState)
     ...state,
     timelineById: addTimelineNoteToEvent({ id, noteId, eventId, timelineById: state.timelineById }),
   }))
-  .case(toggleExpandedEvent, (state, { timelineId, eventId, indexName, loading }) => ({
+  .case(toggleExpandedEvent, (state, { timelineId, event }) => ({
     ...state,
-    timelineById: toggleTimelineExpandedEvent({
-      timelineId,
-      eventId,
-      indexName,
-      loading,
-      timelineById: state.timelineById,
-    }),
+    timelineById: {
+      ...state.timelineById,
+      [timelineId]: {
+        ...state.timelineById[timelineId],
+        expandedEvent: event,
+      },
+    },
   }))
   .case(addProvider, (state, { id, provider }) => ({
     ...state,