From 1763c564bba5c7dffb3f75ba7535c964a32edba5 Mon Sep 17 00:00:00 2001
From: Xavier Mouligneau <189600+XavierM@users.noreply.github.com>
Date: Sun, 6 Dec 2020 14:20:52 -0500
Subject: [PATCH] fix bugs from review

---
 .../components/timeline/body/column_headers/index.tsx  |  4 +++-
 .../timeline/body/column_headers/translations.ts       |  4 ++++
 .../timelines/components/timeline/body/constants.ts    | 10 ++++++----
 .../public/timelines/components/timeline/styles.tsx    |  3 +++
 .../timelines/containers/local_storage/index.tsx       |  7 ++++++-
 5 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/index.tsx
index d00922a4f2acd..7109095494551 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/index.tsx
@@ -304,7 +304,9 @@ export const ColumnHeadersComponent = ({
             </EventsThContent>
           </EventsTh>
           <EventsTh>
-            <SortingColumnsContainer>{ColumnSorting}</SortingColumnsContainer>
+            <EuiToolTip content={i18n.SORT_FIELDS}>
+              <SortingColumnsContainer>{ColumnSorting}</SortingColumnsContainer>
+            </EuiToolTip>
           </EventsTh>
 
           {showEventsSelect && (
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/translations.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/translations.ts
index 1ebfa957b654f..c946182ddfe06 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/translations.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/translations.ts
@@ -22,6 +22,10 @@ export const FULL_SCREEN = i18n.translate('xpack.securitySolution.timeline.fullS
   defaultMessage: 'Full screen',
 });
 
+export const SORT_FIELDS = i18n.translate('xpack.securitySolution.timeline.sortFieldsButton', {
+  defaultMessage: 'Sort fields',
+});
+
 export const TYPE = i18n.translate('xpack.securitySolution.timeline.typeTooltip', {
   defaultMessage: 'Type',
 });
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/constants.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/constants.ts
index 6fddb5403561e..bf70d7bff1ff5 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/constants.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/constants.ts
@@ -7,15 +7,17 @@
 /** The minimum (fixed) width of the Actions column */
 export const MINIMUM_ACTIONS_COLUMN_WIDTH = 50; // px;
 
+/** Additional column width to include when checkboxes are shown **/
+export const SHOW_CHECK_BOXES_COLUMN_WIDTH = 24; // px;
+
 /** The (fixed) width of the Actions column */
-export const DEFAULT_ACTIONS_COLUMN_WIDTH = 24 * 4; // px;
+export const DEFAULT_ACTIONS_COLUMN_WIDTH = SHOW_CHECK_BOXES_COLUMN_WIDTH * 5; // px;
 /**
  * The (fixed) width of the Actions column when the timeline body is used as
  * an events viewer, which has fewer actions than a regular events viewer
  */
-export const EVENTS_VIEWER_ACTIONS_COLUMN_WIDTH = 24 * 3; // px;
-/** Additional column width to include when checkboxes are shown **/
-export const SHOW_CHECK_BOXES_COLUMN_WIDTH = 24; // px;
+export const EVENTS_VIEWER_ACTIONS_COLUMN_WIDTH = SHOW_CHECK_BOXES_COLUMN_WIDTH * 4; // px;
+
 /** The default minimum width of a column (when a width for the column type is not specified) */
 export const DEFAULT_COLUMN_MIN_WIDTH = 180; // px
 /** The default minimum width of a column of type `date` */
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/styles.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/styles.tsx
index 9f9940203960c..e729fe899fe8d 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/styles.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/styles.tsx
@@ -99,6 +99,9 @@ export const EventsThGroupActions = styled.div.attrs(({ className = '' }) => ({
   min-width: 0;
   padding-left: ${({ isEventViewer }) =>
     !isEventViewer ? '4px;' : '0;'}; // match timeline event border
+  button {
+    color: ${({ theme }) => theme.eui.euiColorPrimary};
+  }
 `;
 
 export const EventsThGroupData = styled.div.attrs(({ className = '' }) => ({
diff --git a/x-pack/plugins/security_solution/public/timelines/containers/local_storage/index.tsx b/x-pack/plugins/security_solution/public/timelines/containers/local_storage/index.tsx
index 1a09868da7771..604767bcde26c 100644
--- a/x-pack/plugins/security_solution/public/timelines/containers/local_storage/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/containers/local_storage/index.tsx
@@ -32,7 +32,12 @@ export const getTimelinesInStorageByIds = (storage: Storage, timelineIds: Timeli
 
     return {
       ...acc,
-      [timelineId]: timelineModel,
+      [timelineId]: {
+        ...timelineModel,
+        ...(timelineModel.sort != null && !Array.isArray(timelineModel.sort)
+          ? { sort: [timelineModel.sort] }
+          : {}),
+      },
     };
   }, {} as { [K in TimelineIdLiteral]: TimelineModel });
 };