Improve the history UI.

web/pgadmin/feature_tests/query_tool_journey_test.py

@@ -78,6 +78,10 @@ class QueryToolJourneyTest(BaseFeatureTest):
         self.page.click_tab("History")
         selected_history_entry = self.page.find_by_css_selector("#query_list .selected")
         self.assertIn("SELECT * FROM shoes", selected_history_entry.text)
+        failed_history_detail_pane = self.page.find_by_id("query_detail")
+
+        self.assertIn("Error Message relation \"shoes\" does not exist", failed_history_detail_pane.text)
+
         ActionChains(self.page.driver) \
             .send_keys(Keys.ARROW_DOWN) \
             .perform()

web/pgadmin/static/jsx/history/detail/history_error_message.jsx

@@ -0,0 +1,30 @@
+//////////////////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2017, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////////////////
+
+import React from 'react';
+
+import Shapes from '../../react_shapes';
+
+export default class HistoryErrorMessage extends React.Component {
+
+  parseErrorMessage(message) {
+    return message.match(/ERROR:\s*([^\n\r]*)/i)[1];
+  }
+
+  render() {
+    return (
+      <div className='history-error-text'>
+        <span>Error Message</span> {this.parseErrorMessage(this.props.historyEntry.message)}
+      </div>);
+  }
+}
+
+HistoryErrorMessage.propTypes = {
+  historyEntry: Shapes.historyDetail,
+};

web/pgadmin/static/jsx/history/query_history_detail.jsx

@@ -11,14 +11,23 @@ import React from 'react';
 import HistoryDetailMetadata from './detail/history_detail_metadata';
 import HistoryDetailQuery from './detail/history_detail_query';
 import HistoryDetailMessage from './detail/history_detail_message';
+import HistoryErrorMessage from './detail/history_error_message';
 import Shapes from '../react_shapes';
 
 export default class QueryHistoryDetail extends React.Component {
 
   render() {
     if (!_.isUndefined(this.props.historyEntry)) {
+      let historyErrorMessage = null;
+      if (!this.props.historyEntry.status) {
+        historyErrorMessage = <div className='error-message-block'>
+          <HistoryErrorMessage {...this.props} />
+        </div>;
+      }
+
       return (
         <div id='query_detail' className='query-detail'>
+          {historyErrorMessage}
           <div className='metadata-block'>
             <HistoryDetailMetadata {...this.props} />
           </div>

web/pgadmin/static/scss/sqleditor/_history.scss

@@ -11,7 +11,7 @@
     border: 2px solid transparent;
     margin-left: 1px;
 
-    .other-info{
+    .other-info {
       @extend .text-13;
       @extend .font-gray-4;
       font-family: monospace;
@@ -47,7 +47,7 @@
     font-weight: bold;
     border: 2px solid;
 
-    .other-info{
+    .other-info {
       @extend .font-primary-blue;
       font-weight: bold;
     }
@@ -62,19 +62,37 @@
 
 .query-detail {
   width: 100%;
-  padding-top: 10px;
   display: flex;
   flex-direction: column;
 
+  .error-message-block {
+    @extend .bg-red-1;
+    flex: 0.3;
+    padding-left: 20px;
+
+    .history-error-text {
+      @extend .text-12;
+      padding: 7px 0;
+
+      span {
+        @extend .font-red-3;
+        font-weight: 500;
+        margin-right: 8px;
+      }
+    }
+  }
+
   .metadata-block {
-    flex: 1;
-    padding: 0 10px;
+    flex: 0.4;
+    padding: 10px 20px;
 
     .metadata {
       display: flex;
+      flex-wrap: wrap;
 
       .item {
         flex: 1;
+        min-width: 130px;
 
         .value {
           @extend .text-14;
@@ -106,7 +124,7 @@
   .message-block {
     flex: 2;
     display: flex;
-    padding-left: 10px;
+    padding: 0 20px;
 
     .message {
       flex: 2 2 0%;