From 7bfbd26136aea1fbbd89fee4398e64a921136200 Mon Sep 17 00:00:00 2001
From: Dennis Oelkers <dennis@graylog.com>
Date: Wed, 13 Jun 2018 12:08:29 +0200
Subject: [PATCH] Isolating message list styling changes to extended search.
 (Graylog2/graylog-plugin-enterprise#265)

In 28ee69b43f0906e0a1241f5aba568c1ed427e42f stylings were introduced which change the look of the message table widget globally (on the current and the new search page).

This PR is reverting this by isolating styling changes to the new search only.

Fixes Graylog2/graylog-plugin-enterprise#254.
---
 .../src/web/enterprise/ExtendedSearchPage.css | 16 ---------------
 .../components/widgets/MessageList.css        |  7 +++++++
 .../components/widgets/MessageList.jsx        | 20 +++++++++++--------
 3 files changed, 19 insertions(+), 24 deletions(-)
 create mode 100644 enterprise/src/web/enterprise/components/widgets/MessageList.css

diff --git a/enterprise/src/web/enterprise/ExtendedSearchPage.css b/enterprise/src/web/enterprise/ExtendedSearchPage.css
index 3050f5eed50a..1da3d8a28b1a 100644
--- a/enterprise/src/web/enterprise/ExtendedSearchPage.css
+++ b/enterprise/src/web/enterprise/ExtendedSearchPage.css
@@ -55,19 +55,3 @@ dl.message-details-fields {
 dl.message-details-fields dd {
     font-family: monospace;
 }
-
-/* the !important can go away when we removed the old search page and its stylesheet */
-table.messages thead th, table.messages thead  {
-    background-color: #eee !important;
-    color: #333;
-    border-bottom: 1px solid
-}
-
-/* the !important can go away when we removed the old search page and its stylesheet */
-table.messages {
-    margin-top: 0 !important;
-}
-
-#message-table-paginator-top {
-    margin-bottom: 12px;
-}
\ No newline at end of file
diff --git a/enterprise/src/web/enterprise/components/widgets/MessageList.css b/enterprise/src/web/enterprise/components/widgets/MessageList.css
new file mode 100644
index 000000000000..6b6cdbe42df0
--- /dev/null
+++ b/enterprise/src/web/enterprise/components/widgets/MessageList.css
@@ -0,0 +1,7 @@
+:local(.messageListTableHeader) table.messages thead th, :local(.messageListTableHeader) table.messages thead {
+    background-color: #eee;
+    color: #333;
+}
+:local(.messageListPaginator) #message-table-paginator-top {
+    margin-bottom: 12px;
+}
\ No newline at end of file
diff --git a/enterprise/src/web/enterprise/components/widgets/MessageList.jsx b/enterprise/src/web/enterprise/components/widgets/MessageList.jsx
index 99faefdf7d43..7950a6811c0e 100644
--- a/enterprise/src/web/enterprise/components/widgets/MessageList.jsx
+++ b/enterprise/src/web/enterprise/components/widgets/MessageList.jsx
@@ -16,6 +16,8 @@ import { SearchConfigStore } from 'enterprise/stores/SearchConfigStore';
 import FieldType from '../../logic/fieldtypes/FieldType';
 import { StreamsStore } from 'enterprise/stores/StreamsStore';
 
+import styles from './MessageList.css';
+
 const { InputsActions, InputsStore } = CombinedProvider.get('Inputs');
 const { NodesStore } = CombinedProvider.get('Nodes');
 const { RefreshActions } = CombinedProvider.get('Refresh');
@@ -130,23 +132,25 @@ const MessageList = createReactClass({
     const allStreams = Immutable.List(streams);
     return (
       <span>
-        <MessageTablePaginator currentPage={Number(this.state.currentPage)}
-          onPageChange={newPage => this.setState({ currentPage: newPage })}
-          pageSize={pageSize}
-          position="top"
-          resultCount={messages.length} />
+        <div className={styles.messageListPaginator}>
+          <MessageTablePaginator currentPage={Number(this.state.currentPage)}
+            onPageChange={newPage => this.setState({ currentPage: newPage })}
+            pageSize={pageSize}
+            position="top"
+            resultCount={messages.length} />
+        </div>
 
         <div className="search-results-table" style={{ overflow: 'auto', height: '100%' }}>
           <div className="table-responsive">
-            <div className="messages-container">
-              <table className="table table-condensed messages">
+            <div className={`messages-container ${styles.messageListTableHeader}`}>
+              <table className="table table-condensed messages" style={{ marginTop: 0 }}>
                 <thead>
                   <tr>
                     <th style={{ width: 180 }}><Field interactive name="Timestamp" queryId={activeQuery} type={this._fieldTypeFor('timestamp', fields)} /></th>
                     {selectedColumns.toSeq().map((selectedFieldName) => {
                       return (
                         <th key={selectedFieldName}
-                          style={this._columnStyle(selectedFieldName)}>
+                            style={this._columnStyle(selectedFieldName)}>
                           <Field interactive
                                  type={this._fieldTypeFor(selectedFieldName, fields)}
                                  name={selectedFieldName}